/* FinNuria service packages (/servicepakete/), 2026-10-07a.
   Loaded only by /servicepakete/, after the shared stylesheet. Every selector is scoped to
   the page's own .sp- classes; colours, radii, shadows and type come from the shared
   custom properties (no new colours, no gradients, no glass, no new type scale).
   Layout: audience cards, three package cards, the 17 services grouped as native
   details/summary disclosures (all 51 cells in the HTML, no table), regular hours. */

/* ---------- Audience ---------- */
.sp-audience { display: grid; gap: 1.5rem; min-width: 0; }
.sp-audience__lead { max-width: 40em; font-size: 1.0625rem; color: var(--navy); }
.sp-audience__grid { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .sp-audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-audience__item { background: var(--tint-blue); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; display: grid; gap: 0.6rem; align-content: start; }
.sp-audience__item h3 { font-size: var(--fs-h3); }
.sp-audience__item p:last-child { margin-top: auto; }

/* ---------- Package cards ---------- */
/* Narrow screens: cards stack at their natural height. Side by side (60rem and up): equal
   height, and each card spans the same nine rows of the list (step, title, lead, four facts,
   scope, link) through subgrid, so titles, facts and links line up across the three cards. */
.sp-packages { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.sp-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.5rem 1.25rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
}
@media (min-width: 60rem) {
  .sp-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .sp-card { grid-template-rows: auto auto auto 1fr auto auto; }
  @supports (grid-template-rows: subgrid) {
    .sp-packages { row-gap: 0; }
    .sp-card { grid-row: span 9; grid-template-rows: subgrid; row-gap: 0.75rem; }
    .sp-card__facts { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  }
}
.sp-card__step { font-size: 0.8125rem; font-weight: 600; color: var(--blue-hover); }
.sp-card h3 { font-size: var(--fs-h3); margin-top: -0.4rem; }
.sp-card__lead { color: var(--muted); font-size: 0.9375rem; line-height: 1.35; }
.sp-card__lead strong { display: block; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--navy); margin-top: 0.1rem; }
.sp-card__facts { display: grid; font-size: 0.9375rem; }
.sp-card__facts > div { padding-block: 0.5rem; border-top: 1px solid var(--rule-soft); }
.sp-card__facts dt { font-size: 0.875rem; }
.sp-card__facts dt a { color: var(--muted); text-decoration: none; }
.sp-card__facts dt a:hover { color: var(--blue); text-decoration: underline; }
.sp-card__facts dd { margin: 0.1rem 0 0; font-weight: 600; color: var(--navy); }
.sp-card__scope { display: grid; gap: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--rule-soft); color: var(--muted); font-size: 0.875rem; }
.sp-card__more { font-size: 0.9375rem; }
.sp-bar { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 3px; height: 0.5rem; }
.sp-bar__seg { border-radius: 2px; background: var(--rule-soft); }
.sp-bar__seg--included { background: var(--blue); }
.sp-bar__seg--additional, .sp-bar__seg--addon { background: var(--white); box-shadow: inset 0 0 0 1px var(--blue-hover); }
.sp-bar__seg--limited { background: var(--tint-blue-line); box-shadow: inset 0 0 0 1px var(--blue-hover); }

/* ---------- Grouped comparison ---------- */
.sp-compare { --sp-col: 8.5rem; --sp-gap: 0.75rem; --sp-pad: 1.25rem; display: grid; gap: 2.25rem; max-width: 68rem; min-width: 0; }
.sp-legend { display: grid; gap: 0.5rem 1.5rem; font-size: 0.875rem; background: var(--tint-slate); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
@media (min-width: 48rem) { .sp-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .sp-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-legend dt { display: flex; align-items: center; font-weight: 600; color: var(--navy); }
.sp-legend dd { margin: 0.1rem 0 0 1.55rem; color: var(--muted); }

.sp-group { display: grid; gap: 0.75rem; min-width: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
.sp-group__head { display: grid; gap: 0.6rem; padding-inline: var(--sp-pad); align-items: end; }
.sp-group__head h3 { font-size: var(--fs-h3); }
.sp-group__count { display: block; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--muted); margin-top: 0.15rem; }
.sp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-gap); font-size: 0.75rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.3; hyphens: auto; overflow-wrap: anywhere; }
.sp-list { display: grid; gap: 0.5rem; }

.sp-svc { background: var(--tint-blue); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--header-h) + 1rem); }
.sp-svc[open] { background: var(--white); box-shadow: var(--shadow), inset 0 0 0 1px var(--tint-blue-line); }
.sp-svc summary {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem;
  gap: 0.6rem var(--sp-gap);
  align-items: center;
  min-height: 44px;
  padding: 0.85rem var(--sp-pad);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}
.sp-svc summary::-webkit-details-marker { display: none; }
.sp-svc summary::after { content: "+"; grid-column: 3; grid-row: 1; justify-self: end; font-size: 1.5rem; line-height: 1; color: var(--blue); }
.sp-svc[open] summary::after { content: "\2212"; }
.sp-svc summary:hover .sp-svc__name { color: var(--blue); }
.sp-svc summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sp-svc__nr { grid-column: 1; grid-row: 1; color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.sp-svc__name { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--navy); max-width: 34em; }
.sp-svc__marks { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-gap); justify-items: center; }
.sp-svc__mark .mark { margin: 0; vertical-align: middle; }
.sp-svc__body { padding: 0 var(--sp-pad) 1.1rem; display: grid; gap: 0.75rem; }
.sp-levels { display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.sp-levels > div { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.2rem; padding-top: 0.5rem; border-top: 1px solid var(--rule-soft); }
@media (min-width: 30rem) and (max-width: 63.99rem) { .sp-levels > div { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.75rem; } }
.sp-levels dt { color: var(--muted); font-size: 0.875rem; }
.sp-levels dd { margin: 0; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: 0.45rem; align-items: start; }
.sp-levels dd .mark { grid-column: 1; grid-row: 1; margin: 0.15rem 0 0; }
.sp-levels__status { grid-column: 2; font-weight: 600; color: var(--navy); }
.sp-levels__detail { grid-column: 2; display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.875rem; max-width: 36em; }
.sp-svc__note { font-size: 0.875rem; color: var(--muted); }
.sp-svc__note .matrix__gate { margin-left: 0; }

/* Wide screens: the three levels in fixed columns next to the service name. */
@media (min-width: 64rem) {
  .sp-group__head { grid-template-columns: minmax(0, 1fr) calc(3 * var(--sp-col) + 2 * var(--sp-gap)) 1.5rem; column-gap: var(--sp-gap); }
  .sp-cols { grid-template-columns: repeat(3, var(--sp-col)); }
  .sp-svc summary { grid-template-columns: 1.75rem minmax(0, 1fr) repeat(3, var(--sp-col)) 1.5rem; }
  .sp-svc summary::after { grid-column: 6; }
  .sp-svc__marks { grid-column: 3 / 6; grid-row: 1; grid-template-columns: repeat(3, var(--sp-col)); }
  .sp-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .sp-levels > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* ---------- Regular hours and remuneration note ---------- */
.sp-after { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 48rem) { .sp-after { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }
.sp-after .statement { max-width: 40em; }