/* Package sales pages (/pakete/<package>, /pakete/praxis; templates/landing/_package_sales.php). Theme tokens only, so light and dark follow site.css.
   At 375 px every grid falls back to one column; touch targets of the links stay 44 px high. */
.ps-hero-price { margin-top: 0; margin-bottom: 0; padding-block: 14px; color: var(--ink-soft); font-size: .95rem; }
.ps-sec { padding-block: 88px; }

/* Function tiles (lp_pkg_functions(), Marc 07.11.2026 evening): title = function name, sub line, one sentence, link to the feature page */
.ps-fns { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.ps-fn-tile { border: 1px solid var(--line); border-radius: 10px; background: var(--st-card, var(--surface)); }
.ps-fn-tile > .ps-fn-link, .ps-fn-tile > .pk-ic { }
.ps-fn-link, .ps-fn-tile:not(:has(a)) { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; min-height: 44px; color: inherit; text-decoration: none; }
.ps-fn-tile:not(:has(a)) { display: flex; }
.ps-fn-link:hover strong, .ps-fn-link:focus-visible strong { text-decoration: underline; }
.ps-fn-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-fn-txt strong { font-size: 1rem; font-weight: 600; color: var(--ink); }
.ps-fn-sub { font-size: .87rem; color: var(--ink-soft); line-height: 1.4; }
/* "Alles aus <smaller>, dazu:" band above the tiles of the larger packages */
.ps-base { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 24px 0 0; padding: 14px 18px; border-radius: 10px; background: var(--accent-tint, var(--bg-alt)); color: var(--ink-soft); }
.ps-base strong { color: var(--ink); }

/* Before and after: three light columns, each with the function that solves it, "Bisher" muted, the relief bold */
.ps-pairs { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ps-pair { display: flex; flex-direction: column; gap: 10px; }
.ps-pair p { margin: 0; line-height: 1.55; }
.ps-fn { align-self: flex-start; padding: 2px 10px; border: 1px solid var(--accent); border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--accent-dark, var(--accent)); }
.ps-before { color: var(--ink-soft); font-size: .95rem; }
.ps-before .ps-label { font-weight: 600; }
.ps-after { font-weight: 600; color: var(--ink); }

.ps-every { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.6; }

/* Price card and terms side by side */
.ps-price-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.ps-price-card { padding: 32px; border: 1px solid var(--line); border-top: 4px solid var(--accent); background: var(--st-card, var(--surface)); }
.ps-price-card .lp-h2 { margin-top: 0; }
.ps-price { margin: 8px 0 20px; color: var(--ink-soft); }
.ps-price strong { display: block; color: var(--ink); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.1; }
.ps-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ps-terms li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
.ps-terms .pk-ic { grid-row: span 2; }
.ps-terms strong { display: block; }
.ps-terms span:last-child { color: var(--ink-soft); line-height: 1.5; }

/* Neighbouring packages */
.ps-neighbours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; margin-top: 24px; }
.ps-neighbour { display: flex; flex-direction: column; }
.ps-neighbour .pk-cta { margin-top: auto; }
/* The neighbour boxes are only ~300 px wide between 720 and 860 px viewport; the two-column difference list of site.css
   (min-width 720px, sized for the full content width) pushed the page 70 px sideways there (found 07.11.2026, WCAG 1.4.10). */
.ps-neighbour .pd-diff { grid-template-columns: minmax(0, 1fr); }
.ps-name { color: inherit; text-decoration: none; }
.ps-name:hover, .ps-name:focus-visible { text-decoration: underline; }
.ps-n-price { font-weight: 600; }

@media (max-width: 860px) {
  .ps-price-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .ps-sec { padding-block: 56px; }

  .ps-pairs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ps-price-card { padding: 22px; }
  .ps-neighbour .lp-link { display: inline-flex; align-items: center; min-height: 44px; }
}