/* ==========================================================================
   /abos/ · Preise & Abos (P13) — page-only components, prefix .abo-
   Colour code (same as the home pricing teaser): peach = Hosting & Wartung, sky = SEO, sun = SEA,
   lilac/violet = Agentic AI, mint = one-off projects. Orange stays the action colour (featured tier, CTA).
   Layout: hero (+ "Auf einen Blick" cards) → Abo hub (pinned switcher, abos.js turns the four family
   sections into tab panels) → Einmalig (price menu + hourly rates) → Konditionen → Beratung → FAQ.
   ========================================================================== */
:root {
  --abo-nav-top: calc(var(--header-h) + 10px);   /* sticky pill nav sits 10px below the header */
  --abo-nav-h: 52px;                              /* track: 44px links + 2 × 4px padding */
  --abo-stick: calc(var(--abo-nav-top) + var(--abo-nav-h) + 8px); /* first free line below the nav */
  --abo-anchor: calc(var(--abo-nav-h) + 30px);   /* extra scroll margin for anchor targets */
}

/* ---- Hero ------------------------------------------------------------------------------- */
.abo-hero { padding-bottom: clamp(36px, 4.4vw, 60px); }
.abo-hero .phero__title { max-width: 21ch; }
.abo-hero .phero__lead { max-width: 56ch; text-wrap: balance; }

/* "Auf einen Blick": five pastel link cards */
.abo-glance { width: 100%; }
.abo-glance__list {
  list-style: none; margin: 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
.abo-glance__item { display: flex; }
.abo-glance__card {
  position: relative; isolation: isolate; overflow: hidden; flex: 1;
  display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px;
  border: 1px solid var(--pastel-border); border-radius: var(--radius-xl);
  color: var(--color-text); text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.abo-glance__card::after {   /* soft white glow, top right (as in the home pricing heads) */
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 220px; height: 220px; right: -90px; top: -110px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
}
.abo-glance__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.abo-glance__icon { width: 40px; height: 40px; }
.abo-glance__icon .icon { width: 20px; height: 20px; stroke-width: 1.8; }
.abo-glance__icon--web { color: var(--color-icon-brand); }
.abo-glance__icon--seo { color: var(--sm-sky-700); }
.abo-glance__icon--sea { color: var(--sm-sun-700); }
.abo-glance__icon--agentic { color: var(--sm-violet-700); }
.abo-glance__icon--once { color: var(--sm-mint-700); }
.abo-glance__type {
  padding: 6px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .72);
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted);
}
.abo-glance__name { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
.abo-glance__text { font-size: var(--fs-xs); line-height: 1.45; color: var(--color-text-muted); max-width: 26ch; }
.abo-glance__price {
  margin-top: auto; padding-top: 18px; padding-right: 40px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; line-height: 1; font-variant-numeric: tabular-nums;
}
.abo-glance__price b { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.03em; }
.abo-glance__price small { font-size: var(--fs-xs); font-weight: 500; color: var(--color-text-muted); }
.abo-glance__arrow { position: absolute; right: 16px; bottom: 18px; background: rgba(255, 255, 255, .8); }
.abo-glance__arrow .icon { width: 15px; height: 15px; }
.abo-glance__card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xl); }
@media (hover: hover) {
  .abo-glance__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .abo-glance__card:hover .abo-glance__arrow { background: #fff; color: var(--color-text); transform: translateY(2px); }
}
@media (max-width: 1180px) {
  .abo-glance__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .abo-glance__item { grid-column: span 2; }
  .abo-glance__item:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 782px) {
  .abo-glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .abo-glance__item, .abo-glance__item:nth-child(n + 4) { grid-column: auto; }
  .abo-glance__item:last-child { grid-column: 1 / -1; }
}
/* Phones: compact rows (icon · name + text · price) */
@media (max-width: 560px) {
  .abo-glance__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .abo-glance__item:last-child { grid-column: auto; }
  .abo-glance__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon name price" "icon text price";
    align-items: center; gap: 2px 14px; padding: 14px 16px;
  }
  .abo-glance__top { grid-area: icon; margin: 0; }
  .abo-glance__type, .abo-glance__arrow { display: none; }
  .abo-glance__name { grid-area: name; font-size: 16px; }
  .abo-glance__text { grid-area: text; font-size: 13px; }
  .abo-glance__price { grid-area: price; margin: 0; padding: 0; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
  .abo-glance__price b { font-size: 1.375rem; }
  .abo-glance__price small { font-size: 12px; }
}

/* ---- Abo hub: pinned pill bar = family switcher (abos.js: tabs) ------------------------------- */
.abo-hub { position: relative; }
.abo-hub + .section { padding-top: 0; }                 /* no double gap after the hub */
.abo-nav-sentinel { height: 1px; margin-bottom: -1px; }
.abo-nav { position: sticky; top: var(--abo-nav-top); z-index: 30; pointer-events: none; }
/* while pinned: a quiet white band from the header down to the column heads of an open comparison */
.abo-nav::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -10px; bottom: -8px;
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: inset 0 -1px 0 var(--color-border);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.abo-nav.is-stuck::before { opacity: 1; pointer-events: auto; }
.abo-nav__inner { display: flex; justify-content: center; }
/* the kit's segmented control (.seg), one size up: grey track, the selected family as a white pill */
ul.abo-nav__track {
  pointer-events: auto; list-style: none; margin: 0; padding: 4px; display: flex; gap: 4px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  background: var(--color-surface-pressed); border-radius: var(--radius-pill);
}
.abo-nav__track::-webkit-scrollbar { display: none; }
.abo-nav__track > li { flex: none; }
.abo-nav__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 18px;
  border-radius: var(--radius-pill); font: 600 14.5px/1 var(--font-sans); color: var(--color-text-muted);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.abo-nav__link .icon { width: 18px; height: 18px; transition: color var(--dur) var(--ease); }
.abo-nav__link:hover { color: var(--color-text); }
.abo-nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-pill); }
.abo-nav__link.is-active { background: #fff; color: var(--color-text); box-shadow: var(--shadow-xs); }
.abo-nav__link.is-active .icon { color: var(--color-icon-brand); }
@media (max-width: 900px) {
  .abo-nav__link { padding: 0 15px; }
  .abo-nav__link .icon { display: none; }
}
@media (max-width: 560px) {
  :root { --abo-nav-h: 48px; }                    /* 42px links + 2 × 3px padding */
  ul.abo-nav__track { padding: 3px; gap: 2px; }
  .abo-nav__link { min-height: 42px; padding: 0 10px; font-size: 13px; }
  .abo-nav__more { display: none; }
}

/* ---- Price family (Hosting & Wartung, SEO, SEA, Agentic AI; the head is shared with Einmalig) ---- */
/* Anchor landing inside the hub: html already has scroll-padding-top = header + 16px; add the pinned bar + air */
.abo-hub .abo-fam, .abo-hub .abo-cmp, .abo-hub .abo-addons { scroll-margin-top: var(--abo-anchor); }
.abo-hub > .abo-nav + .abo-fam { padding-top: clamp(48px, 6vw, 88px); scroll-margin-top: calc(var(--abo-anchor) - clamp(48px, 6vw, 88px)); }
/* Tabs (abos.js): one panel visible, every panel starts like the first one and lands right below the pinned bar.
   The hub ends right after the panel content, so the pinned bar lets go there; the next section brings the air.
   Landing on #einmalig: the hub (and its bar) stays hidden under the header, the eyebrow sits 40px below it. */
.abo-hub.is-tabs > .abo-fam { padding-block: clamp(48px, 6vw, 88px) 0; scroll-margin-top: calc(var(--abo-nav-h) - 6px); }
.abo-hub.is-tabs + .section { padding-top: var(--section-space); scroll-margin-top: calc(40px - var(--section-space)); }
.abo-fam.is-entering { animation: abo-panel-in var(--dur-slow) var(--ease) both; }
@keyframes abo-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .abo-fam.is-entering { animation: none; } }
.abo-fam__head {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(28px, 3.4vw, 44px);
}
.abo-fam__intro h2 { max-width: 20ch; }
.abo-fam__lead { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text-muted); max-width: 60ch; }
.abo-fam__facts {
  padding: 20px 22px 22px; border-radius: var(--radius-xl);
  background: var(--color-surface-subtle); border: 1px solid var(--color-border);
}
.abo-fam__facts-label { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-text); margin-bottom: 14px; }
.abo-fam__facts .checks { gap: 10px; }
.abo-fam__facts .checks li { color: var(--color-text); }
@media (max-width: 900px) {
  .abo-fam__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .abo-fam__facts .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 560px) {
  .abo-fam__facts { padding: 18px 18px 20px; }
  .abo-fam__facts .checks { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Tier cards (C7 with an inset pastel head; head rows aligned via subgrid) ------------------ */
.abo-tiers {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 20px;
}
.abo-tier { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.abo-tier__card {
  --r: 24px; --inset: 8px;
  position: relative;   /* containing block for the visually-hidden CTA text (keeps it inside the mobile scroller) */
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--r); padding: var(--inset);
}
.abo-tier--featured .abo-tier__card {
  border: 2px solid var(--color-brand); padding: calc(var(--inset) - 1px);
  box-shadow: 0 18px 40px -24px rgba(224, 116, 19, .45);   /* brand-tinted lift, as .tier--featured */
}
.abo-tier__head {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--pastel-border); border-radius: calc(var(--r) - var(--inset)); padding: 20px 22px 22px;
}
.abo-tier__head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 260px; height: 260px; right: -100px; top: -130px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
}
.abo-tier__top { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.abo-tier__name { font-size: var(--fs-h4); font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.abo-tier__desc { margin-top: 8px; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); max-width: 34ch; }
.abo-tier__price {
  margin-top: auto; padding-top: 22px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.abo-tier__from { font-size: var(--fs-small); font-weight: 500; color: var(--color-text-muted); }
.abo-tier__amount { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -0.03em; color: var(--color-text); }
.abo-tier__per { margin-left: -4px; font-size: 1rem; font-weight: 500; color: var(--color-text-muted); }
.abo-tier__year {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, .8); border: 1px solid var(--pastel-border);
  font-size: 13px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums;
}
.abo-tier__year .icon { width: 15px; height: 15px; color: var(--color-text-muted); }
.abo-tier__body { display: flex; flex-direction: column; padding: 20px 14px 14px; }
.abo-tier__terms { margin-top: 10px; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--color-text-subtle); }
.abo-tier__plus {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-text);
}
ul.abo-tier__list { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border); gap: 11px; }
.abo-tier__plus + ul.abo-tier__list { margin-top: 12px; padding-top: 0; border-top: 0; }
.abo-tier__list li { color: var(--color-text); }
.abo-tiers__hint { display: none; }

/* ≤ 1080: tighter cards */
@media (max-width: 1080px) {
  .abo-tiers { column-gap: 14px; }
  .abo-tier__head { padding: 18px 18px 20px; }
  .abo-tier__body { padding: 18px 10px 10px; }
}
/* ≤ 900: one card per row, head left / body right */
@media (max-width: 900px) {
  .abo-tiers { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; max-width: 760px; margin-inline: auto; }
  .abo-tier { display: flex; grid-row: auto; }
  .abo-tier__card { display: flex; flex: 1; grid-row: auto; }
  .abo-tier__head { flex: 0 0 40%; padding: 22px 20px 24px; justify-content: center; }
  .abo-tier__price { margin-top: 0; }
  .abo-tier__body { flex: 1; min-width: 0; padding: 14px 10px 10px 24px; }
  .abo-tier__terms { text-align: left; }
}
/* ≤ 600: swipeable row of cards with a peek of the next one (all content stays reachable) */
@media (max-width: 600px) {
  ul.abo-tiers {
    display: flex; gap: 12px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  }
  .abo-tiers::-webkit-scrollbar { display: none; }
  .abo-tier { flex: 0 0 86%; scroll-snap-align: start; }
  .abo-tier__card { flex-direction: column; }
  .abo-tier__head { flex: none; padding: 18px 18px 20px; }
  .abo-tier__price { padding-top: 18px; }
  .abo-tier__body { padding: 18px 8px 8px; }
  .abo-tier__terms { text-align: center; }
  .abo-tiers__hint {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px;
    font-size: 12.5px; font-weight: 500; color: var(--color-text-subtle);
  }
  .abo-tiers__hint::before, .abo-tiers__hint::after { content: ""; width: 18px; height: 1px; background: var(--color-border-strong); }
}

/* ---- Notes under the tiers (two compact cards) ---------------------------------------------- */
.abo-extras {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.abo-extra {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 22px 24px 16px 22px; border-radius: var(--radius-xl);
  background: var(--color-surface-subtle); border: 1px solid var(--color-border);
}
.abo-extra__icon { width: 40px; height: 40px; }
.abo-extra__icon .icon { width: 20px; height: 20px; }
.abo-extra__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.abo-extra__title { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
.abo-extra__price { font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); white-space: nowrap; }
.abo-extra__text { margin-top: 6px; font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted); max-width: 58ch; }
.abo-extra__links { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 0 22px; }
.abo-extra__links .link-arrow { min-height: 44px; }
@media (max-width: 900px) { .abo-extras { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 760px; margin-inline: auto; } }
@media (max-width: 560px) {
  .abo-extra { gap: 14px; padding: 18px 18px 10px 16px; }
  .abo-extra__icon { width: 36px; height: 36px; }
  .abo-extra__icon .icon { width: 18px; height: 18px; }
  .abo-extra__top { flex-direction: column; }
  .abo-extra__links { flex-direction: column; }
}

/* ---- Full comparison: one native <details> per family with the kit's compare table ----------- */
.abo-cmp {
  margin-top: 20px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.abo-cmp:hover { border-color: var(--color-border-strong); }
.abo-cmp[open] { border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.abo-cmp__sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  min-height: 76px; padding: 14px 16px 14px 14px; border-radius: var(--radius-xl);
}
.abo-cmp__sum::-webkit-details-marker { display: none; }
.abo-cmp__sum:focus-visible { outline: none; }
.abo-cmp:has(.abo-cmp__sum:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.abo-cmp__icon { width: 46px; height: 46px; background: var(--color-surface-subtle); box-shadow: none; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.abo-cmp__icon .icon { width: 20px; height: 20px; }
.abo-cmp__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.abo-cmp__title { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
.abo-cmp__meta { font-size: 13.5px; line-height: 1.4; color: var(--color-text-subtle); }
.abo-cmp__btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: #fff;
  font: 600 14px/1 var(--font-sans); color: var(--color-text);
  transition: background-color var(--dur) var(--ease);
}
.abo-cmp__btn .icon { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--dur) var(--ease); }
.abo-cmp__sum:hover .abo-cmp__btn { background: var(--color-surface-hover); }
.abo-cmp__close { display: none; }
.abo-cmp[open] .abo-cmp__open { display: none; }
.abo-cmp[open] .abo-cmp__close { display: inline; }
.abo-cmp[open] .abo-cmp__btn .icon { transform: rotate(180deg); }

/* table: no own frame/scroll (the details card is the frame), sticky column heads below the pill nav */
.abo-cmp__table { overflow: visible; border: 0; border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: transparent; }
.abo-cmp__table table { min-width: 0; table-layout: fixed; }
.abo-cmp__table thead th { position: sticky; top: var(--abo-stick); z-index: 2; padding-block: 13px; box-shadow: inset 0 -1px 0 var(--color-border); border-bottom: 0; }
.abo-cmp__table thead th:first-child { width: 46%; }
.abo-cmp__table thead th.is-hl { background: var(--sm-orange-100); }
.abo-cmp__table tbody th { font-weight: 500; line-height: 1.4; }
.abo-cmp__table tbody th small { margin-top: 2px; line-height: 1.4; }
.abo-cmp__table td { font-size: var(--fs-xs); line-height: 1.35; color: var(--color-text); }
.abo-cmp__table tbody tr:not(.compare__group):hover > * { background: var(--sm-ink-25); }
.abo-cmp__table tbody tr:not(.compare__group):hover > .is-hl { background: var(--sm-orange-100); }
.abo-cmp__table .compare__group th { padding-top: 26px !important; padding-bottom: 12px; }
.abo-cmp__table tr:last-child > * { border-bottom: 0; }
.abo-cmp__table tbody tr:last-child > :first-child { border-bottom-left-radius: var(--radius-xl); }
.abo-cmp__table tbody tr:last-child > :last-child { border-bottom-right-radius: var(--radius-xl); }
.abo-cmp__table .is-no { color: var(--sm-ink-300); }
@supports (interpolate-size: allow-keywords) {
  .abo-cmp { interpolate-size: allow-keywords; }
  .abo-cmp::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-slow) var(--ease), content-visibility var(--dur-slow) allow-discrete; }
  .abo-cmp[open]::details-content { block-size: auto; overflow: visible; }
}
@media (max-width: 782px) {
  .abo-cmp__sum { gap: 14px; }
  .abo-cmp__icon { display: none; }
  .abo-cmp__table thead th:first-child { width: 40%; }
  .abo-cmp__table th, .abo-cmp__table td { padding-inline: 10px; }
}
/* ≤ 640: each row becomes a card: name on top, three labelled cells below (no sideways scrolling) */
@media (max-width: 640px) {
  .abo-cmp__sum { padding: 14px 14px 14px 18px; align-items: flex-start; flex-wrap: wrap; }
  .abo-cmp__meta { display: none; }
  .abo-cmp__btn { margin-left: auto; }
  .abo-cmp__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .abo-cmp__table table, .abo-cmp__table tbody { display: block; }
  .abo-cmp__table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px 14px 16px; border-bottom: 1px solid var(--sm-ink-100); }
  .abo-cmp__table tbody tr:last-child { border-bottom: 0; }
  .abo-cmp__table tbody tr:not(.compare__group):hover > * { background: transparent; }
  .abo-cmp__table tbody th[scope="row"] { grid-column: 1 / -1; position: static; padding: 0 0 4px; border: 0; background: transparent; text-align: left; }
  .abo-cmp__table td {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0;
    padding: 9px 4px 10px; border: 0; border-radius: 10px; background: var(--color-surface-subtle); font-size: 12.5px;
    overflow-wrap: anywhere; hyphens: auto;
  }
  .abo-cmp__table td::before { content: attr(data-tier); font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--color-text-subtle); }
  .abo-cmp__table td.is-hl, .abo-cmp__table tbody tr:not(.compare__group):hover > td.is-hl { background: var(--sm-orange-50); }
  .abo-cmp__table td .icon { width: 17px; height: 17px; }
  .abo-cmp__table .compare__group { display: block; padding: 22px 14px 4px; border-bottom: 0; }
  .abo-cmp__table .compare__group th { display: block; padding: 0 !important; border: 0; position: static; }
  .abo-cmp__table tbody tr:last-child > * { border-radius: 10px; }
  /* same value in all three packages: one compact "Alle" pill next to the name */
  .abo-cmp__table tbody tr.is-same { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding-block: 12px; }
  .abo-cmp__table tbody tr.is-same th[scope="row"] { grid-column: 1; padding: 0; }
  .abo-cmp__table tbody tr.is-same td + td { display: none; }
  .abo-cmp__table tbody tr.is-same td {
    flex-direction: row; align-items: center; gap: 6px; padding: 6px 10px 6px 11px; border-radius: var(--radius-pill);
    white-space: nowrap; overflow-wrap: normal;
  }
  .abo-cmp__table tbody tr.is-same td::before { content: "Alle"; }
}

/* ---- Agentic AI: scope (in / out) and add-ons ----------------------------------------------- */
.abo-scope {
  margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px clamp(24px, 3vw, 40px); align-items: center;
  padding: 22px 26px; border-radius: var(--radius-xl); background: var(--grad-lilac); border: 1px solid var(--pastel-border);
}
.abo-scope__label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-small); color: var(--color-text); }
.abo-scope__label .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.abo-scope__col--in .abo-scope__label .icon { color: var(--sm-mint-700); }
.abo-scope__col--out .abo-scope__label .icon { color: var(--sm-violet-700); }
.abo-scope__text { margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); }
.abo-scope__link { min-height: 44px; white-space: nowrap; }
@media (max-width: 1080px) {
  .abo-scope { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .abo-scope__link { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .abo-scope { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

.abo-addons {
  margin-top: 20px; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: 20px clamp(28px, 4vw, 56px);
  padding: clamp(22px, 3vw, 36px); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: #fff;
}
.abo-addons__head { align-self: start; }
.abo-addons__title { font-size: var(--fs-h3); }
.abo-addons__text { margin-top: 10px; font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted); }
.abo-addons__table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.abo-addons__table th, .abo-addons__table td { padding: 13px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sm-ink-100); }
.abo-addons__table thead th { padding-top: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-subtle); border-bottom-color: var(--color-border); }
.abo-addons__table tbody th { width: 30%; font-weight: 600; color: var(--color-text); }
.abo-addons__table td { line-height: 1.5; color: var(--color-text-muted); }
.abo-addons__table tbody tr:last-child > * { border-bottom: 0; padding-bottom: 0; }
.abo-addons__table th:first-child, .abo-addons__table td:first-child { padding-left: 0; }
.abo-addons__num { text-align: right !important; white-space: nowrap; padding-right: 0 !important; }
.abo-addons__num b { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.abo-addons__num small { display: block; font-size: 12px; color: var(--color-text-subtle); }
@media (max-width: 1080px) { .abo-addons { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .abo-addons__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .abo-addons__table, .abo-addons__table tbody { display: block; }
  .abo-addons__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--sm-ink-100); }
  .abo-addons__table tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .abo-addons__table th, .abo-addons__table td { padding: 0 !important; border: 0; }
  .abo-addons__table tbody th { width: auto; }
  .abo-addons__table td:not(.abo-addons__num) { grid-column: 1 / -1; grid-row: 2; }
  .abo-addons__table .abo-addons__num { grid-column: 2; grid-row: 1; }
}

/* ---- One-off price menu (#einmalig) ---------------------------------------------------------- */
.abo-once__head { max-width: 1100px; }   /* wide enough for the four promises on one line; the lead keeps 64ch */
.abo-once__head .section-head__lead { max-width: 64ch; }
ul.abo-once__facts {
  list-style: none; padding: 0; margin-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 14.5px; color: var(--color-text-muted);
}
.abo-once__facts li { display: inline-flex; align-items: center; gap: 8px; }
.abo-once__facts .icon { width: 18px; height: 18px; stroke-width: 2.2; color: var(--color-icon-brand-strong); }
@media (max-width: 1180px) {
  ul.abo-once__facts { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: start; gap: 10px 28px; text-align: left; }
}
@media (max-width: 560px) {
  ul.abo-once__facts { grid-template-columns: minmax(0, auto); }
}
.abo-menus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.abo-menu {
  display: flex; flex-direction: column; padding: 22px 22px 12px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl);
}
.abo-menu__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.abo-menu__title { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.005em; }
.abo-menu__rows { list-style: none; margin: 0; padding: 0; }
.abo-menu__rows > li + li { border-top: 1px solid var(--sm-ink-100); }
.abo-menu__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-inline: -10px; padding: 12px 10px; border-radius: 12px; color: inherit; text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.abo-menu__row:hover { background: var(--color-surface-hover); }
.abo-menu__row:hover .abo-menu__name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--color-border-strong); }
.abo-menu__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.abo-menu__name { min-width: 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.35; color: var(--color-text); }
.abo-menu__name small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--color-text-subtle); }
.abo-menu__price { flex: none; font-size: var(--fs-small); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.abo-menu__extra { margin-top: 10px; padding: 14px 14px 14px; border-radius: 14px; background: var(--color-surface-subtle); border: 1px solid var(--sm-ink-100); }
.abo-menu__label { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-text); }
.abo-menu__chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.abo-menu__chips li {
  padding: 6px 10px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-border);
  font-size: 12.5px; line-height: 1.2; color: var(--color-text-muted);
}
.abo-menu__chips b { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.abo-menu__note { margin-top: 12px; display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--color-text-subtle); }
.abo-menu__note .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.abo-menu__foot { margin-top: auto; padding-top: 10px; }
.abo-menu__foot .link-arrow { min-height: 44px; }
@media (max-width: 1080px) { .abo-menus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 700px) { .abo-menus { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .abo-menu { padding: 18px 18px 10px; } }

/* Hourly rates */
.abo-rates {
  margin-top: 20px; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 3fr); gap: 20px clamp(28px, 4vw, 48px); align-items: center;
  padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-2xl); background: var(--color-surface-subtle); border: 1px solid var(--color-border);
}
.abo-rates__title { font-size: var(--fs-h3); }
.abo-rates__text { margin-top: 8px; font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted); }
.abo-rates__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.abo-rate { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-border); }
.abo-rate__label { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.abo-rate__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sm-orange-500); }
.abo-rate--app .abo-rate__label::before { background: var(--sm-rose-700); }
.abo-rate--ki .abo-rate__label::before { background: var(--sm-violet-600); }
.abo-rate--depin .abo-rate__label::before { background: var(--sm-mint-700); }
.abo-rate__price { display: flex; align-items: baseline; gap: 0 5px; line-height: 1; font-variant-numeric: tabular-nums; }
.abo-rate__price b { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; }
.abo-rate__price small { font-size: var(--fs-xs); font-weight: 500; color: var(--color-text-muted); }
.abo-rate__text { font-size: 13px; line-height: 1.45; color: var(--color-text-subtle); }
@media (max-width: 1080px) { .abo-rates { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 782px) { .abo-rates__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .abo-rate { padding: 16px 14px 18px; } .abo-rate__price b { font-size: 1.75rem; } }

/* ---- Konditionen (AGB summary + example invoice) ---------------------------------------------- */
.abo-terms__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.abo-terms__copy > .eyebrow { display: block; }
.abo-terms__copy h2 { margin-top: 14px; max-width: 17ch; }
.abo-terms__lead { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text-muted); max-width: 54ch; }
.abo-terms__list {
  margin: 32px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl);
}
.abo-term { padding: 20px 22px 22px; }
.abo-term:nth-child(n + 3) { border-top: 1px solid var(--sm-ink-100); }
.abo-term:nth-child(even) { border-left: 1px solid var(--sm-ink-100); }
.abo-term dt { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-small); color: var(--color-text); }
.abo-term dd { margin: 10px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); }
.abo-terms__agb { margin-top: 18px; min-height: 44px; }
.abo-terms__media { min-height: 560px; display: grid; place-items: center; padding: clamp(36px, 4vw, 56px) clamp(20px, 3vw, 40px); }
@media (max-width: 980px) {
  .abo-terms__grid { grid-template-columns: minmax(0, 1fr); }
  .abo-terms__media { min-height: 0; }
}
/* phones: one card with divided rows instead of eight separate cards */
@media (max-width: 560px) {
  .abo-terms__list { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
  .abo-term { padding: 16px 18px 17px; }
  .abo-term:nth-child(even) { border-left: 0; }
  .abo-term + .abo-term { border-top: 1px solid var(--sm-ink-100); }
  .abo-term dd { margin-top: 6px; padding-left: 42px; }
}

/* Mocks: project offer + annual invoice (decorative; every number is explained in the list next to it) */
.abo-terms__mocks { width: min(100%, 440px); display: grid; gap: 18px; }
.abo-offer {
  justify-self: start; width: min(92%, 320px); padding: 16px 18px 16px; position: relative; z-index: 1;
  background: #fff; border-radius: 16px; border: 1px solid rgba(9, 12, 18, .06); box-shadow: var(--shadow-md);
  font-size: 12.5px; line-height: 1.4;
}
.abo-offer__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--sm-ink-100); }
.abo-offer__icon { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--sm-orange-100); color: var(--sm-orange-700); }
.abo-offer__icon .icon { width: 17px; height: 17px; }
.abo-offer__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.abo-offer__who b { font-size: 14px; }
.abo-offer__who small { font-size: 11.5px; color: var(--color-text-subtle); }
.abo-offer__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.abo-offer__row span { color: var(--color-text-muted); }
.abo-offer__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.abo-offer__cap { margin-top: 6px; padding: 10px 12px 10px; border-radius: 10px; background: var(--color-surface-subtle); border: 1px solid var(--sm-ink-100); }
.abo-offer__bar { position: relative; height: 8px; border-radius: 4px; background: var(--sm-ink-100); }
.abo-offer__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 78%; border-radius: 4px; background: var(--sm-orange-300); }
.abo-offer__bar span { position: absolute; top: -3px; bottom: -3px; left: 91%; width: 2px; border-radius: 1px; background: var(--color-text); }
.abo-offer__scale { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; color: var(--color-text-subtle); }
.abo-offer__scale b { color: var(--color-text); font-weight: 600; }
.abo-offer__scale span { display: inline-flex; align-items: center; gap: 6px; }
.abo-offer__tick { width: 2px; height: 10px; border-radius: 1px; background: var(--color-text); }
.abo-offer__notice { margin-top: 7px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--color-text); }
.abo-offer__notice .mock-dot { background: var(--sm-orange-600); flex: none; }
.abo-terms__mocks .abo-bill { justify-self: end; }
.abo-bill {
  position: relative; width: min(100%, 370px); padding: 22px 22px 18px;
  background: #fff; border-radius: 18px; border: 1px solid rgba(9, 12, 18, .06); box-shadow: var(--shadow-md);
  font-size: 13px; line-height: 1.4;
}
.abo-bill__float {
  position: absolute; top: -16px; right: -18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-md);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.abo-bill__float-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sm-mint-100); color: var(--sm-mint-700); }
.abo-bill__float-ic .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.abo-bill__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.abo-bill__brand { font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.abo-bill__brand i { font-style: normal; color: var(--color-icon-brand); }
.abo-bill__kind { margin-top: 18px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.abo-bill__period { margin-top: 2px; font-size: 12px; color: var(--color-text-subtle); }
.abo-bill__lines { margin-top: 14px; border-top: 1px solid var(--sm-ink-100); }
.abo-bill__line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sm-ink-100); }
.abo-bill__line span { font-weight: 600; }
.abo-bill__line small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--color-text-subtle); }
.abo-bill__line b { font-weight: 600; font-variant-numeric: tabular-nums; }
.abo-bill__line--muted span, .abo-bill__line--muted b { color: var(--color-text-muted); font-weight: 500; }
.abo-bill__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 2px; }
.abo-bill__total span { font-weight: 600; }
.abo-bill__total b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.abo-bill__due { margin-top: 8px; }
.abo-bill__year { margin-top: 16px; padding: 14px 14px 12px; border-radius: 12px; background: var(--color-surface-subtle); border: 1px solid var(--sm-ink-100); }
.abo-bill__year-label { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); }
.abo-bill__bar { margin-top: 10px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.abo-bill__bar i { height: 8px; border-radius: 3px; background: var(--sm-orange-200); }
.abo-bill__bar i.is-notice { background: var(--sm-orange-600); }
.abo-bill__months { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--color-text-subtle); }
.abo-bill__notice { margin-top: 8px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--color-text); }
.abo-bill__notice .mock-dot { background: var(--sm-orange-600); flex: none; }
@media (max-width: 560px) {
  .abo-terms__media { padding: 36px 14px 22px; }
  .abo-bill { padding: 20px 16px 16px; }
  .abo-offer { width: 94%; }
  .abo-bill__float { right: 8px; top: -18px; }
}

/* ---- Beratung (expert card with the team photo) ------------------------------------------------ */
.abo-help__photo img { max-height: 380px; max-width: 94%; }
.abo-help__who { list-style: none; margin: 20px 0 0 !important; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.abo-help__fine { font-size: 13px !important; color: var(--color-text-subtle) !important; }
/* The team photo is landscape: below 1180 px it becomes a wide band, with the text centred below it */
@media (max-width: 1180px) {
  .abo-help__card { grid-template-columns: minmax(0, 1fr); }
  .abo-help__photo { min-height: 0; padding-top: 32px; }
  .abo-help__photo img { max-height: 340px; }
  .abo-help__card .expert__body { align-items: center; text-align: center; padding-top: clamp(28px, 4vw, 44px); }
  .abo-help__card .expert__body h2 { max-width: none; }
  .abo-help__card .expert__body p { margin-inline: auto; }
  .abo-help__who, .abo-help__card .expert__actions { justify-content: center; }
  .abo-help__who .expert__who { text-align: left; }
}
@media (max-width: 560px) {
  .abo-help__photo { padding-top: 22px; }
  .abo-help__photo img { max-width: 100%; }
  .abo-help__card .expert__body { align-items: stretch; text-align: left; }
  .abo-help__who, .abo-help__card .expert__actions { justify-content: flex-start; }
}