/* ============================================================
   pricing.css — the pricing page in the home page's grammar
   ------------------------------------------------------------
   Loaded only on preise.html / en/pricing.html (body.page-pricing)
   after site.css. Ink on the light ground, 2px
   chapter rules with a 96px gradient head, hairlines between
   entries, no card frames. Violet ink is the accent.
   ============================================================ */

.page-pricing {
  --p-ink: var(--ink);
  --p-ink-2: var(--ink-2);
  --p-muted: var(--ink-3);
  --p-rule: rgba(var(--ink-rgb), 0.12);
  --p-accent: var(--violet-ink);
  --p-grad: linear-gradient(90deg, #EC4899, #8B5CF6);
  --p-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hero: der gemeinsame Unterseiten-Hero (.hero--landing, site.css) */

/* ---- Chapter rule (packages, comparison) ---- */
.page-pricing .grid--price { position: relative; border-top: 2px solid var(--p-ink); }
.page-pricing .grid--price::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 96px;
  height: 2px;
  background: var(--p-grad);
  z-index: 1;
}

/* =====================================================
   PACKAGES — four ruled columns
   ===================================================== */
.page-pricing .section--cards { padding-top: var(--section-y-s); }
.page-pricing .grid--price { max-width: none; gap: 0; }
.page-pricing .price-card {
  gap: 14px;
  padding: 30px 26px 34px;
  background: none;
  border: 0;
  border-left: 1px solid var(--p-rule);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.page-pricing .price-card:first-child { border-left: 0; padding-left: 0; }
.page-pricing .price-card:hover { transform: none; box-shadow: none; border-color: var(--p-rule); }
.page-pricing .price-card--featured {
  overflow: visible;
  background: var(--surface);
  border-left-color: transparent;
  box-shadow: 0 24px 48px rgba(15, 17, 22, 0.06);
}
.page-pricing .price-card--featured::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--p-accent);
}
.page-pricing .price-card--featured + .price-card { border-left-color: transparent; }
.page-pricing .price-card__chips { gap: 8px; flex-wrap: wrap; }
.page-pricing .price-card__usehint,
.page-pricing .price-card__badge {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--p-muted);
}
.page-pricing .price-card__badge { color: var(--p-accent); font-weight: 600; }
.page-pricing .price-card__label {
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--p-ink);
}
.page-pricing .price-card__amount {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--p-ink-2);
}
.page-pricing .price-card__amount strong {
  display: inline-block;
  margin: 0 2px;
  font-size: clamp(2rem, 2.4vw + 0.6rem, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--p-ink);
  font-variant-numeric: tabular-nums;
}
.page-pricing .price-card__setup { font-size: 0.88rem; color: var(--p-muted); }
.page-pricing .price-card__setup strong { color: var(--p-ink); }
.page-pricing .price-card__meta {
  margin-top: 0;
  padding: 12px 0;
  border-top: 1px solid var(--p-rule);
  border-bottom: 1px solid var(--p-rule);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--p-ink);
}
.page-pricing .price-card .list--check li { font-size: 0.94rem; color: var(--p-ink-2); }
.page-pricing .price-card .list--check li::before { background: transparent; }
.page-pricing .price-card .list--check li::after { border-color: var(--p-accent); }
.page-pricing .price-card__hint { font-style: normal; color: var(--p-muted); }
.page-pricing .price-card .btn {
  justify-content: center;
  min-height: 50px;
  background: transparent;
  color: var(--p-ink);
  border: 1px solid var(--p-rule);
  border-radius: 10px;
  box-shadow: none;
  font-weight: 500;
}
.page-pricing .price-card .btn::before { display: none; }
.page-pricing .price-card--featured .btn { background: var(--p-ink); color: var(--on-ink); border-color: var(--p-ink); }
.page-pricing .price-card .btn:active { transform: scale(0.97); }

/* ---- Comparison table: ruled, featured column marked lightly ---- */
.page-pricing .compare-table {
  margin-top: 64px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.page-pricing .compare-table__head {
  background: none;
  border-bottom: 1px solid var(--p-ink);
}
.page-pricing .compare-table__head > div {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--p-ink);
}
.page-pricing .compare-table__row { border-top: 1px solid var(--p-rule); }
.page-pricing .compare-table__row > div { font-variant-numeric: tabular-nums; }
.page-pricing .compare-table__row > div:first-child { color: var(--p-muted); font-weight: 400; }
.page-pricing .compare-table__col--featured { background: var(--violet-soft); color: var(--p-ink); }
.page-pricing .compare-table__head .compare-table__col--featured { color: var(--p-accent); background: var(--violet-soft); }
.page-pricing .compare-table__yes { color: var(--p-accent); font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .page-pricing .price-card .btn:hover { border-color: var(--p-ink); background: transparent; transform: none; box-shadow: none; }
  .page-pricing .price-card--featured .btn:hover { background: var(--ink-hi); border-color: var(--ink-hi); }
}
@media (max-width: 1000px) {
  .page-pricing .grid--price { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-pricing .price-card:nth-child(3) { border-left: 0; padding-left: 0; }
  .page-pricing .price-card:nth-child(n+3) { border-top: 1px solid var(--p-rule); }
}
@media (max-width: 700px) {
  .page-pricing .grid--price { grid-template-columns: minmax(0, 1fr); }
  .page-pricing .price-card { border-left: 0; padding-left: 0; padding-right: 0; }
  .page-pricing .price-card--featured { padding-left: 20px; padding-right: 20px; }
  .page-pricing .price-card + .price-card { border-top: 1px solid var(--p-rule); }
}

/* Review fixes */
.page-pricing .section::before { display: none; }
.page-pricing .price-card__amount { line-height: 1.6; }
@media (max-width: 700px) {
  /* tier picker: two by two instead of four squeezed buttons */
  /* the comparison table keeps its columns and scrolls sideways */
  .page-pricing .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-pricing .compare-table__head,
  .page-pricing .compare-table__row { min-width: 620px; }
  .page-pricing .grid--price { grid-template-columns: minmax(0, 1fr); }
}

/* Four equal columns: minmax(0, 1fr) so a long price ("ab 2'000 CHF /
   Monat") cannot widen its column and squeeze the next one. */
.page-pricing .grid--price { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-pricing .price-card { min-width: 0; padding-left: 22px; padding-right: 22px; }
.page-pricing .price-card__amount strong { white-space: nowrap; font-size: clamp(1.8rem, 1.6vw + 0.9rem, 2.4rem); }
.page-pricing .price-card .btn { white-space: nowrap; }
@media (max-width: 1000px) {
  .page-pricing .grid--price { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .page-pricing .grid--price { grid-template-columns: minmax(0, 1fr); }
}
/* the price wraps as a unit: "ab 2'000 CHF" on one line, "/ Monat" may follow below */
.page-pricing .price-card__amount { white-space: normal; overflow-wrap: normal; }
.page-pricing .price-card__amount strong { font-size: clamp(1.6rem, 0.9vw + 0.95rem, 1.95rem); }
.page-pricing .grid--4.grid--price .price-card__amount { white-space: normal; font-size: 1rem; }
.page-pricing .price-card__per { white-space: nowrap; }

/* Cells stretch to the row height so the featured column's tint fills
   the whole cell, even when a neighbour wraps onto several lines. */
.page-pricing .compare-table__head,
.page-pricing .compare-table__row { align-items: stretch; }
.page-pricing .compare-table__head > div,
.page-pricing .compare-table__row > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-pricing .compare-table__head > div:first-child,
.page-pricing .compare-table__row > div:first-child { justify-content: flex-start; }
/* Fixed column widths: long cell text wraps instead of widening its column,
   so every row lines up (matters most in the scrolling mobile view). */
.page-pricing .compare-table--4 .compare-table__head,
.page-pricing .compare-table--4 .compare-table__row { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .page-pricing .compare-table__head,
  .page-pricing .compare-table__row { min-width: 760px; }
}

/* Tablet: the 4-column table needs ~760px, so it scrolls inside its own
   box up to 1000px instead of widening the page. */
@media (max-width: 1000px) {
  .page-pricing .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Phones: wider columns so cells stop breaking into five lines, and the
   row labels stay in view while the table scrolls sideways. */
@media (max-width: 700px) {
  .page-pricing .compare-table--4 .compare-table__head,
  .page-pricing .compare-table--4 .compare-table__row {
    grid-template-columns: 140px repeat(4, 168px);
    min-width: 812px;
  }
  .page-pricing .compare-table__row > div:first-child { font-size: 0.88rem; hyphens: manual; }
  .page-pricing .compare-table__head > div:first-child,
  .page-pricing .compare-table__row > div:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg);
    box-shadow: 1px 0 0 var(--p-rule);
  }
}

/* =====================================================
   WHAT WE TAKE CARE OF — chapter right below the packages.
   Same grammar as the packages: 2px chapter rule with
   the gradient head, four ruled columns, numbers in
   violet ink. Says right after the prices that setup and
   ongoing care are our job.
   ===================================================== */
.page-pricing .section--svc { padding-top: 0; }
.page-pricing .svc { position: relative; border-top: 2px solid var(--p-ink); padding-top: 56px; }
.page-pricing .svc::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 128px;
  height: 2px;
  background: var(--p-grad);
}
.page-pricing .svc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: 52px;
}
.page-pricing .svc__heading {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--p-ink);
}
.page-pricing .svc__lead { margin: 0; max-width: 46ch; font-size: 1.12rem; line-height: 1.55; color: var(--p-ink-2); }
.page-pricing .svc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-pricing .svc__item { padding: 4px 32px 8px; border-left: 1px solid var(--p-rule); }
.page-pricing .svc__item:first-child { padding-left: 0; border-left: 0; }
.page-pricing .svc__num {
  display: block;
  margin-bottom: 18px;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--p-accent);
}
.page-pricing .svc__title { margin: 0 0 10px; font-size: 1.3rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--p-ink); }
.page-pricing .svc__text { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--p-ink-2); }
@media (max-width: 1000px) {
  .page-pricing .svc__head { grid-template-columns: minmax(0, 1fr); }
  .page-pricing .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .page-pricing .svc__item:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .page-pricing .svc__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .page-pricing .svc__item { padding: 28px 0; border-left: 0; border-top: 1px solid var(--p-rule); }
  .page-pricing .svc__item:first-child { border-top: 0; padding-top: 0; }
  .page-pricing .svc__num { margin-bottom: 8px; }
}

/* First line of every card: the managed service, in ink */
.page-pricing .price-card .list--check li.price-card__managed { color: var(--p-ink); font-weight: 600; }

/* The guide link now sits right under the packages */
.page-pricing .grid--price + .basics__more { margin-top: 40px; }

/* =====================================================
   PACKAGE DIALOG — opened by "Mehr Infos" on a card.
   Left: the package on the paper ground: name, price, three
   figures, the one action. Behind it, very quiet, a still frame
   of the landing page's dot field (js/pkg-field.js renders it
   once with three.js, no animation). Right: what the assistant
   does and what we take care of, in sentences; setup and
   ongoing support are a real sequence, so they are numbered.
   ===================================================== */
.pkg-dialog {
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--p-ink);
  background: var(--surface);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 50px 100px -20px rgba(10, 10, 12, 0.45), 0 0 0 1px var(--p-rule);
}
.pkg-dialog[open] { display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.pkg-dialog::backdrop { background: rgba(10, 10, 12, 0.5); backdrop-filter: blur(4px); }
.pkg-dialog[open] { animation: pkg-in 0.36s var(--p-ease) both; }
.pkg-dialog[open]::backdrop { animation: pkg-fade 0.36s var(--p-ease) both; }
.pkg-dialog.is-closing { animation: pkg-out 0.18s ease-in both; }
.pkg-dialog.is-closing::backdrop { animation: pkg-fade 0.18s ease-in reverse both; }
@keyframes pkg-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes pkg-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes pkg-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pkg-dialog[open], .pkg-dialog[open]::backdrop, .pkg-dialog.is-closing, .pkg-dialog.is-closing::backdrop { animation: none; }
}
html.has-pkg-dialog { overflow: hidden; }

/* ---- Panel: paper ground + still dot field ---- */
.pkg-panel {
  --on: var(--p-ink);
  --on-2: var(--p-ink-2);
  --on-rule: var(--p-rule);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 32px 32px;
  color: var(--on);
  background: var(--bg);
  border-right: 1px solid var(--p-rule);
}
.pkg-panel.has-field {
  background-image: var(--pkg-field);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}
.pkg-panel > * { position: relative; }
.pkg-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--p-grad);
}
.pkg-panel__name {
  margin: 0;
  font-size: 2.3rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--on);
}
.pkg-panel__name:focus { outline: none; }
.pkg-panel__name:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 4px; }
.pkg-panel__sub { margin: 10px 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--on-2); }
.pkg-panel__price { margin: 30px 0 0; font-size: 1rem; line-height: 1.2; color: var(--on-2); }
.pkg-panel__price strong {
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--on);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pkg-panel__per { display: block; margin-top: 6px; font-size: 0.92rem; }
.pkg-panel__setup { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.45; color: var(--on-2); }

.pkg-panel__facts { margin: 30px 0 0; border-top: 1px solid var(--on-rule); }
.pkg-panel__facts > div {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--on-rule);
}
.pkg-panel__facts dt { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; color: var(--on); font-variant-numeric: tabular-nums; }
.pkg-panel__facts dd { margin: 0; font-size: 0.88rem; line-height: 1.35; color: var(--on-2); }

.pkg-panel__cta { margin-top: auto; padding-top: 30px; }
.pkg-panel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-ink);
  background: var(--p-ink);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s var(--p-ease), background-color 0.2s var(--p-ease);
}
.pkg-panel__btn:active { transform: scale(0.98); }
.pkg-panel__btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.pkg-panel__cta p { margin: 10px 0 0; text-align: center; font-size: 0.82rem; color: var(--on-2); }
@media (hover: hover) and (pointer: fine) {
  .pkg-panel__btn:hover { background: var(--ink-hi); }
}

/* ---- Body ---- */
.pkg-body {
  position: relative;
  min-height: 0;
  max-height: calc(100dvh - 48px);
  padding: 40px 48px 34px 44px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pkg-body__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--p-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s var(--p-ease), color 0.2s var(--p-ease);
}
.pkg-body__close svg { width: 16px; height: 16px; }
.pkg-body__close:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pkg-body__close:hover { color: var(--p-ink); background: rgba(var(--ink-rgb), 0.07); }
}
.pkg-body__part + .pkg-body__part { margin-top: 34px; }
.pkg-body__part h3 {
  margin: 0 48px 14px 0;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--p-ink);
}
.pkg-body__base { margin: -6px 0 10px; font-size: 0.95rem; color: var(--p-muted); }
.pkg-body__does { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pkg-body__does li {
  position: relative;
  padding-left: 28px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--p-ink-2);
}
.pkg-body__does li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.3em;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--violet-soft);
  box-shadow: inset 0 0 0 1px var(--violet-dim, #D8B4FE);
}
.pkg-body__does li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(0.3em + 4px);
  width: 4px;
  height: 7px;
  border: solid var(--p-accent);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* Setup → ongoing support: two numbered steps on a thin track */
.pkg-steps { margin: 0; padding: 0; list-style: none; counter-reset: pkg-step; }
.pkg-steps li { position: relative; padding: 0 0 22px 44px; counter-increment: pkg-step; }
.pkg-steps li:last-child { padding-bottom: 0; }
.pkg-steps li::before {
  content: counter(pkg-step);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--on-ink);
  background: var(--p-ink);
  border-radius: 999px;
}
.pkg-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: var(--p-rule);
}
.pkg-steps p { margin: 0; font-size: 0.97rem; line-height: 1.5; color: var(--p-ink-2); }
.pkg-steps p.pkg-steps__head { margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pkg-steps__head strong { font-weight: 600; color: var(--p-ink); }
.pkg-steps__head span { font-size: 0.85rem; font-weight: 400; color: var(--p-ink); }

.pkg-body__small {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--p-rule);
  font-size: 0.88rem;
  color: var(--p-muted);
}

/* ---- Phones: panel on top, body below, one scroll; × sits on the panel ---- */
@media (max-width: 760px) {
  .pkg-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; }
  .pkg-dialog[open] { grid-template-columns: minmax(0, 1fr); }
  .pkg-panel { padding: 30px 22px 24px; }
  .pkg-panel__name { margin-right: 44px; font-size: 2rem; }
  .pkg-panel__price { margin-top: 20px; }
  .pkg-panel__price strong { font-size: 2.2rem; }
  .pkg-panel__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; border-bottom: 1px solid var(--on-rule); }
  .pkg-panel__facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 8px 12px 0; border-bottom: 0; }
  .pkg-panel__facts dt { font-size: 1.15rem; }
  .pkg-panel__facts dd { font-size: 0.78rem; }
  .pkg-panel__cta { padding-top: 22px; }
  .pkg-body { position: static; max-height: none; overflow: visible; padding: 28px 22px 26px; }
  .pkg-panel { border-right: 0; border-bottom: 1px solid var(--p-rule); }
  .pkg-body__close { top: 16px; right: 14px; }
}
/* small print sits at the bottom, level with the panel's button */
.pkg-body { display: flex; flex-direction: column; }
.pkg-body__small { margin-top: auto; }
.pkg-body__part:last-of-type { margin-bottom: 30px; }

/* Setup line, minutes, languages and agents lead the list as their own
   check rows, under the rule that closes the price block. */
.page-pricing .price-card__facts {
  padding-top: 12px;
  border-top: 1px solid var(--p-rule);
  gap: 8px;
}
.page-pricing .price-card .price-card__facts li { color: var(--p-ink); }

/* All cards share one set of rows (subgrid): price, setup line, each fact,
   the feature list, hint and button line up across the columns, even when
   a neighbour wraps. Both lists hold the same topics in the same order in
   every card (facts: 4 rows, features: 6 rows), so each row compares like
   with like. 8 children per card, 16 rows. The copy is written so each row takes
   the same number of lines in every card, so the rhythm stays even. */
@supports (grid-template-rows: subgrid) {
  .page-pricing .price-card {
    display: grid;
    grid-row: span 16;
    grid-template-rows: subgrid;
    row-gap: 14px;
  }
  .page-pricing .price-card > * { align-self: start; }
  .page-pricing .price-card__hint { margin-top: 0; }
  .page-pricing .price-card__facts {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 10px;
  }
  .page-pricing .price-card__features {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 10px;
    margin-top: -4px; /* 14px card gap - 4 = the same 10px as between rows */
  }
}

/* =====================================================
   Preisseite neu (18.10.): kompakter Hero mit CTA,
   Karten mit gleichen Zeilen, Vergleichstabelle, Abschluss
   wie auf den Unterseiten. Nur .pr-* Klassen.
   ===================================================== */
/* Preis mit "/ Monat" auf einer Zeile; bei langen Beträgen etwas kleiner */
@media (min-width: 901px) {
  .page-pricing .grid--4.grid--price .price-card__amount { white-space: nowrap; }
  .page-pricing .grid--4.grid--price .price-card__amount strong { font-size: clamp(1.5rem, 0.8vw + 0.95rem, 2.15rem); }
}

.page-pricing .pr-rows { margin: 4px 0 8px; }
.page-pricing .pr-rows + .btn { margin-top: auto; }
.page-pricing .pr-more { align-self: center; margin-top: -4px; padding: 4px 6px; border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--p-muted); text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), 0.25); text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .page-pricing .pr-more:hover { color: var(--p-ink); text-decoration-color: var(--p-ink); } }


.page-pricing .pr-compare__title { margin: 0; font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; color: var(--p-ink); }
.page-pricing .pr-compare .compare-table { margin-top: 40px; }
.page-pricing .pr-compare .compare-table__head > div { padding-top: 14px; padding-bottom: 14px; }
.page-pricing .pr-compare .compare-table__row > div { padding-top: 12px; padding-bottom: 12px; font-size: 0.95rem; }
.page-pricing .pr-compare .compare-table__row > div:first-child { color: var(--p-ink-2); }
.page-pricing .pr-group { border-top-color: transparent; }
.page-pricing .pr-group > div:first-child { padding-top: 34px !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.02em; color: var(--p-ink) !important; }
.page-pricing .pr-group > div { padding-top: 34px !important; }
.page-pricing .pr-yes { width: 17px; height: 17px; color: var(--p-accent); }
.page-pricing .pr-compare__note { margin: 28px 0 0; font-size: 1rem; color: var(--p-ink-2); }
.page-pricing .pr-compare .basics__more { margin-top: 12px; }

.page-pricing .pr-close .voice-end__text { grid-column: 1 / span 9; }
.page-pricing .pr-close .voice-end__text .section__sub { max-width: 52ch; }
.page-pricing .pr-close .voice-end__text h2 { max-width: none; }
.page-pricing .pr-close .steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 12px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(var(--ink-rgb), 0.14); list-style: none; }
.page-pricing .pr-close .steps li { display: flex; flex-direction: column; }
.page-pricing .pr-close .steps__k { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-3); }
.page-pricing .pr-close .steps strong { margin-top: 10px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.page-pricing .pr-close .steps li > span:last-child { margin-top: 4px; font-size: 0.98rem; color: var(--ink-3); }
@media (max-width: 700px) {
  .page-pricing .pr-close .steps { grid-template-columns: 1fr; gap: 24px; margin-top: 8px; }
}
/* Kapitelkopf wie auf den Unterseiten, Titel oben, Text darunter */
.page-pricing .svc--stack .svc__head { display: block; max-width: 900px; margin-bottom: 56px; }
.page-pricing .svc--stack .svc__heading,
.page-pricing .pr-compare__title { font-size: clamp(2.1rem, 3.6vw + 0.4rem, 3.6rem); line-height: 1.04; }
.page-pricing .svc--stack .svc__lead { margin-top: 20px; max-width: 56ch; }
/* Handy: schmalere Spalten, damit zwei Pakete nebeneinander sichtbar sind */
@media (max-width: 700px) {
  .page-pricing .pr-compare .compare-table--4 .compare-table__head,
  .page-pricing .pr-compare .compare-table--4 .compare-table__row { grid-template-columns: 128px repeat(4, 112px); min-width: 576px; }
  .page-pricing .pr-compare .compare-table__head > div,
  .page-pricing .pr-compare .compare-table__row > div { padding-left: 8px; padding-right: 8px; font-size: 0.86rem; }
  .page-pricing .pr-compare .compare-table__row > div:first-child { font-size: 0.84rem; }
}

/* =====================================================
   Laufzeit-Toggle (19.10.) über den Paketkarten, nur preise.html.
   Zwei Radios als Schalter; :has() blendet je Zustand den
   passenden Monatspreis ein (Karten und Dialoge).
   ===================================================== */
.page-pricing .pr-term {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 28px;
}
.page-pricing .pr-term__switch {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  margin: 0;
  padding: 3px;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.05);
}
.page-pricing .pr-term__legend {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.page-pricing .pr-term__switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.page-pricing .pr-term__switch label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--p-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--p-ease), color 0.2s var(--p-ease), box-shadow 0.2s var(--p-ease);
}
.page-pricing .pr-term__save { font-size: 0.8rem; font-weight: 600; color: var(--p-accent); }
.page-pricing .pr-term__switch input:checked + label {
  color: var(--p-ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 17, 22, 0.08), 0 0 0 1px var(--p-rule);
}
.page-pricing .pr-term__switch input:focus-visible + label { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.page-pricing .pr-term__note { margin: 0; font-size: 0.82rem; color: var(--p-muted); }
@media (hover: hover) and (pointer: fine) {
  .page-pricing .pr-term__switch input:not(:checked) + label:hover { color: var(--p-ink); }
}
@media (max-width: 700px) {
  .page-pricing .pr-term { flex-direction: column; align-items: flex-end; }
  .page-pricing .pr-term__switch label { min-height: 40px; }
}

.pr-p--month { display: none; }
body:has(#pr-term-month:checked) .pr-p--term { display: none; }
body:has(#pr-term-month:checked) .pr-p--month { display: inline; }