/* ==========================================================================
   A · Atelier — inner pages
   l- Leistungen · u- Über uns · k- Kontakt · r- Rechtliches
   Same tokens and 12-column grid as the homepage; compositions vary.
   ========================================================================== */

/* ===================== Leistungen ===================== */

/* Bausteine: plain list — title and one sentence per row */
.l-blocks { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }
.l-block {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-height) + var(--space-m));
}
.l-block .t-lead { max-width: 48ch; }
@media (min-width: 768px) {
  .l-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: baseline; }
  .l-block .t-h3 { grid-column: 1 / span 4; }
  .l-block .t-lead { grid-column: 6 / -1; }
}

/* Der Abend: horizontal track from afternoon into night; each stop opens a moment */
.l-evening { background: var(--color-bg-subtle); }
.l-arc { display: grid; gap: var(--space-l); }
.l-arc__scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.l-arc__scroller::-webkit-scrollbar { display: none; }
.l-arc__rail,
.l-arc__bands { min-width: 760px; }
.l-arc__rail {
  --stops: 5;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--stops), minmax(0, 1fr));
}
/* The band darkens from day to night; the gold line shows how far the evening has come. */
.l-arc__rail::before,
.l-arc__rail::after {
  content: "";
  position: absolute;
  left: calc(50% / var(--stops));
  top: calc(var(--arc-time-h) + 18px);
  height: 4px;
  pointer-events: none;
}
.l-arc__rail { --arc-time-h: 2.6rem; }
.l-arc__rail::before {
  right: calc(50% / var(--stops));
  background: linear-gradient(90deg, var(--color-border), var(--color-border-strong) 55%, var(--color-text));
}
.l-arc__rail::after {
  width: calc((100% - 100% / var(--stops)) * var(--arc-p, 0));
  background: var(--color-accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.l-arc__stop {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--arc-time-h) 40px auto auto;
  justify-items: center;
  align-items: end;
  gap: var(--space-3xs);
  padding: 0 var(--space-3xs) var(--space-2xs);
  text-align: center;
  color: var(--color-text-subtle);
  transition: color var(--dur-base) var(--ease-in-out);
}
.l-arc__time {
  font: var(--type-h3);
  letter-spacing: var(--type-h3-tracking);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.l-arc__dot {
  align-self: center;
  width: 14px;
  height: 14px;
  background: var(--color-bg-subtle);
  border: 2px solid currentColor;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.l-arc__name { font: var(--type-small); font-weight: 560; }
.l-arc__kind { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; font-stretch: var(--type-label-stretch); color: var(--color-text-subtle); }
.l-arc__stop[data-kind="extra"] .l-arc__kind,
.l-arc__stop[data-kind="effect"] .l-arc__kind { color: var(--color-accent-text); }
.l-arc__stop[aria-selected="true"] { color: var(--color-text); }
.l-arc__stop[aria-selected="true"] .l-arc__dot { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.25); }
@media (hover: hover) { .l-arc__stop:hover { color: var(--color-text); } }

.l-arc__bands {
  display: grid;
  gap: 4px;
  margin-top: var(--space-xs);
}
.l-arc__band {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 22px;
  padding-inline: var(--space-xs);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  font-stretch: var(--type-label-stretch);
}
/* Bands fade in from the left: we only know where they end, not when your day starts. */
.l-arc__band--basic {
  width: calc(100% * 3.5 / 5);
  background: linear-gradient(90deg, transparent, var(--color-border) 35%, var(--color-text));
  color: var(--color-bg);
}
.l-arc__band--premium {
  width: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-accent) 30%, transparent) 40%, var(--color-accent));
  color: var(--color-on-accent);
}

.l-arc__panel:not([hidden]) {
  display: grid;
  gap: var(--space-m);
  animation: l-panel-in var(--dur-slow) var(--ease-out);
}
@keyframes l-panel-in { from { opacity: 0; transform: translateY(6px); } }
.l-arc__text { display: grid; gap: var(--space-xs); align-content: center; }
.l-arc__text .t-lead { max-width: 34ch; }
.l-arc__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border-strong);
  font: var(--type-small);
}
.l-arc__detail[data-kind="extra"] .label,
.l-arc__detail[data-kind="effect"] .label { --label-color: var(--color-accent-text); }
.l-arc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s); }
.l-arc__nav { display: flex; gap: var(--space-2xs); }
@media (min-width: 1024px) {
  .l-arc__scroller { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .l-arc__rail, .l-arc__bands { min-width: 0; }
  .l-arc__panel:not([hidden]) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .l-arc__media { grid-column: 1 / span 6; }
  .l-arc__text { grid-column: 8 / -1; }
}

/* Pakete: aligned comparison (CSS subgrid) — the only place packages appear */
.a-compare { display: grid; gap: var(--space-s); }
.a-compare__labels { display: none; }
.a-compare__col {
  display: grid;
  background: var(--color-surface);
  padding-inline: var(--space-m);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 2px 0 var(--color-border-strong);
  scroll-margin-top: calc(var(--header-height) + var(--space-m));
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.a-compare__col--featured { box-shadow: inset 0 2px 0 var(--color-accent); }
.a-compare__col[data-picked] { border-color: var(--color-text); box-shadow: inset 0 3px 0 var(--color-text); }
.a-compare__head { display: grid; gap: var(--space-2xs); align-content: start; padding-block: var(--space-m); }
.a-compare__rows { display: grid; margin: 0; }
.a-compare__rows > div {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-s);
  border-top: 1px solid var(--color-border);
}
.a-compare__rows dd { margin: 0; font: var(--type-small); }
.a-compare__more { border-top: 1px solid var(--color-border); padding-block: var(--space-xs); }
.a-compare__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font: var(--type-button);
}
.a-compare__more summary::-webkit-details-marker { display: none; }
.a-compare__more summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-base) var(--ease-out);
}
.a-compare__more[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.a-compare__more ul { margin: var(--space-2xs) 0 var(--space-xs); padding: 0; list-style: none; }
.a-compare__more li { padding-block: var(--space-2xs); border-top: 1px solid var(--color-border); font: var(--type-small); color: var(--color-text-muted); }
.a-compare__cta { padding-block: var(--space-m); }
.l-packages__note { margin-top: var(--space-m); }

/* Pick buttons (package / extras) */
.a-pick[aria-pressed="true"] { --_bg: var(--color-text); --_fg: var(--color-bg); --_bd: var(--color-text); }
.a-pick[aria-pressed="true"] .btn__label::before { content: "✓ "; }

@media (min-width: 768px) {
  .a-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); column-gap: var(--grid-gap); row-gap: 0; }
  .a-compare__col { grid-row: 1 / span 8; grid-template-rows: subgrid; }
  .a-compare__rows { grid-row: span 5; grid-template-rows: subgrid; }
}
@media (min-width: 1024px) {
  .a-compare { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr); }
  .a-compare__labels { display: grid; grid-row: 1 / span 8; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; }
  .a-compare__labels > li { padding-block: var(--space-s); }
  .a-compare__labels > li:not(:first-child):not(:last-child) { border-top: 1px solid var(--color-border-strong); }
  .a-compare__rows dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Partner */
.l-partner { display: grid; gap: var(--space-l); }
.l-partner__body { display: grid; gap: var(--space-s); align-content: center; }
.l-partner__body .t-lead { max-width: 44ch; }
.l-partner__body .a-direct { margin-top: var(--space-s); }
@media (min-width: 1024px) {
  .l-partner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; }
  .l-partner__media { grid-column: 1 / span 5; }
  .l-partner__body { grid-column: 7 / -1; }
}
.l-partner + .l-partner { margin-top: var(--space-2xl); }

/* Fragen */
.l-faq__grid { display: grid; gap: var(--space-l); }
.l-faq__head { display: grid; gap: var(--space-s); align-content: start; }
.l-faq__list { border-top: 1px solid var(--color-border-strong); }
.l-faq__item { border-bottom: 1px solid var(--color-border-strong); }
.l-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 72px;
  padding-block: var(--space-s);
  cursor: pointer;
  list-style: none;
}
.l-faq__item summary::-webkit-details-marker { display: none; }
.l-faq__item summary::after {
  content: "+";
  flex: none;
  font: var(--type-h3);
  color: var(--color-accent-text);
  transition: rotate var(--dur-base) var(--ease-out);
}
.l-faq__item[open] summary::after { rotate: 45deg; }
.l-faq__item p { max-width: 60ch; padding-bottom: var(--space-m); }
@supports (interpolate-size: allow-keywords) {
  .l-faq__list { interpolate-size: allow-keywords; }
  .l-faq__item::details-content { height: 0; overflow: clip; transition: height var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete; }
  .l-faq__item[open]::details-content { height: auto; }
}
@media (min-width: 1024px) {
  .l-faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .l-faq__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-height) + var(--space-l)); }
  .l-faq__list { grid-column: 6 / -1; }
}

/* ===================== Über uns ===================== */

/* Haltung: cards stack on top of each other while scrolling (native sticky) */
.u-values { background: var(--color-bg-subtle); }
.u-stack { display: grid; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.u-card {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 2px 0 var(--color-text);
}
.u-card__text { display: grid; gap: var(--space-s); align-content: center; }
.u-card__text .t-lead { max-width: 34ch; }
@media (min-width: 1024px) {
  .u-stack { gap: var(--space-xl); }
  .u-card {
    position: sticky;
    top: calc(var(--header-height) + var(--space-m) + var(--i) * 18px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    min-height: min(62svh, 560px);
    padding: var(--space-xl);
  }
  .u-card__text { grid-column: 1 / span 5; }
  .u-card__media { grid-column: 7 / -1; align-self: center; }
}

.u-origin__grid { display: grid; gap: var(--space-l); }
.u-origin__text { display: grid; gap: var(--space-m); }
@media (min-width: 1024px) {
  .u-origin__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .u-origin__title { grid-column: 1 / span 3; }
  .u-origin__text { grid-column: 4 / span 5; }
  .u-origin__media { grid-column: 10 / -1; }
}

.u-team__grid { display: grid; gap: var(--space-xl); }
.u-member { display: grid; gap: var(--space-2xs); align-content: start; }
.u-member .media { margin-bottom: var(--space-s); }
.u-member .muted { max-width: 48ch; }
@media (min-width: 768px) {
  .u-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); }
}

/* Am Abend: draggable filmstrip aligned to the content edge */
.u-film__controls { display: flex; gap: var(--space-2xs); }
.u-film__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-strong);
  transition: border-color var(--dur-fast) var(--ease-hover), opacity var(--dur-fast) var(--ease-hover);
}
.u-film__btn svg { width: 16px; height: 16px; }
.u-film__btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .u-film__btn:not(:disabled):hover { border-color: var(--color-text); } }
.u-film__track {
  --edge: max(var(--gutter), calc((100% - var(--container-content)) / 2));
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding-inline: var(--edge);
  scrollbar-width: none;
  cursor: grab;
}
.u-film__track::-webkit-scrollbar { display: none; }
.u-film__track[data-dragging] { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.u-film__item { flex: none; scroll-snap-align: start; margin: 0; }
.u-film__item img {
  display: block;
  height: clamp(300px, 54svh, 560px);
  width: auto;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  background: var(--color-bg-subtle);
}
.u-film__progress { height: 2px; margin-top: var(--space-l); background: var(--color-border); }
.u-film__progress span { display: block; height: 100%; background: var(--color-text); transform-origin: left; transform: scaleX(var(--p, 0.15)); }

.u-qa__grid { display: grid; gap: var(--space-xl); }
.u-qa__content { display: grid; gap: var(--space-s); align-content: start; }
.u-qa__list { display: grid; margin-top: var(--space-m); }
.u-qa__list > div {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-top: 1px solid var(--color-border);
}
.u-qa__list dd { max-width: 52ch; }
@media (min-width: 1024px) {
  .u-qa__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .u-qa__media { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-height) + var(--space-m)); }
  .u-qa__content { grid-column: 7 / -1; }
}

/* ===================== Kontakt ===================== */

.k-form { background: var(--color-bg-subtle); }
.k-form__grid { display: grid; gap: var(--space-xl); }
.k-form__aside { display: grid; gap: var(--space-s); align-content: start; }
.k-form__index { display: none; margin-block: var(--space-m) var(--space-2xs); padding: 0; list-style: none; }
.k-form__index li:last-child a { border-bottom: 1px solid var(--color-border-strong); }
.k-form__index a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 48px;
  border-top: 1px solid var(--color-border-strong);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-case);
  font-stretch: var(--type-label-stretch);
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-in-out);
}
.k-form__index a::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  background: var(--color-accent);
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.k-form__index a.is-current { color: var(--color-text); }
.k-form__index a.is-current::before { transform: scale(1); }

.k-form__panel { background: var(--color-surface); padding: var(--space-l) var(--space-m); }
.k-form__form { display: grid; gap: var(--space-xl); }
.k-form__form[hidden] { display: none; }
.k-form__alert:not([hidden]) {
  display: block;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  font: var(--type-small);
}
/* Spam trap: hidden from people, filled in only by bots. */
.k-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.k-group { display: grid; gap: var(--space-m); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.k-group > legend { float: left; width: 100%; margin-bottom: var(--space-m); padding: 0; }
.k-group > legend + * { clear: both; }
.k-group + .k-group { padding-top: var(--space-l); border-top: 1px solid var(--color-border); }
.k-group__stack { display: grid; gap: var(--space-l); }
.k-group__select { max-width: 24rem; }
.k-choices { display: grid; gap: var(--space-xs); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.k-choices > legend { float: left; width: 100%; margin-bottom: var(--space-xs); padding: 0; }
.k-choices > legend + * { clear: both; }
.k-note { display: flex; gap: var(--space-2xs); align-items: baseline; color: var(--color-text-muted); }
.k-note::before { content: ""; flex: none; width: 0.5em; height: 0.5em; background: var(--color-accent); }
.field__req { color: var(--color-accent-text); }
.k-form__submit { display: grid; gap: var(--space-m); padding-top: var(--space-l); border-top: 1px solid var(--color-border); }
.k-done:not([hidden]) { display: grid; gap: var(--space-s); }
.k-done:focus { outline: none; }

@media (min-width: 1024px) {
  .k-form__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .k-form__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-height) + var(--space-m)); }
  .k-form__index { display: grid; }
  .k-form__panel { grid-column: 5 / -1; padding: var(--space-xl); }
}

.k-after { display: grid; gap: var(--space-xs); margin-top: var(--space-s); }
.k-after__list { display: grid; margin: 0; padding: 0; list-style: none; }
.k-after__list li {
  display: grid;
  gap: 2px;
  padding-block: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font: var(--type-small);
}
.k-after__list b { font-weight: 600; }

/* ===================== Rechtliches ===================== */

.r-intro { padding-bottom: var(--space-l); }
.r-legal { padding-bottom: var(--section-space); }
.r-section {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-top: 1px solid var(--color-border);
}
.r-body { display: grid; gap: var(--space-s); max-width: 68ch; }
.r-body address { font-style: normal; }
.r-dl { display: grid; gap: var(--space-3xs); }
.r-dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-xs); align-items: baseline; }
.r-missing {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-text);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}
.r-cross { padding-top: var(--space-l); border-top: 1px solid var(--color-border); }
@media (min-width: 1024px) {
  .r-section { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .r-section > h2 { grid-column: 1 / span 4; }
  .r-body { grid-column: 5 / -1; }
}

/* ===================== Struktur-Vorschlag ===================== */

.s-changes__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }
.s-change {
  display: grid;
  gap: var(--space-xs) var(--grid-gap);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-border-strong);
}
@media (min-width: 1024px) {
  .s-change { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .s-change > .t-h3 { grid-column: 1 / span 4; }
  .s-change > .muted { grid-column: 5 / span 5; }
  .s-change > .btn { grid-column: 10 / -1; justify-self: end; }
}

.s-map { background: var(--color-bg-subtle); }
.s-legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-self: end; }
.s-map__grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) { .s-map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .s-map__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s-page {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 2px 0 var(--color-text);
}
.s-page__list { margin: var(--space-s) 0 0; padding: 0; list-style: none; }
.s-page__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xs) var(--space-2xs);
  min-height: 48px;
  padding-block: var(--space-2xs);
  border-top: 1px solid var(--color-border);
  font: var(--type-small);
}
.s-page__list a { font-weight: 560; }
@media (hover: hover) { .s-page__list a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.s-page__gone { margin-top: var(--space-xs); font: var(--type-small); color: var(--color-text-muted); }
.s-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: 8px;
  border: 1px solid var(--color-border-strong);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-case);
  font-stretch: var(--type-label-stretch);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.s-badge--new { border-color: var(--color-accent); color: var(--color-accent-text); }
.s-badge--moved { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }

.s-table-wrap { overflow-x: auto; border-top: 1px solid var(--color-border-strong); }
.s-table { width: 100%; min-width: 640px; border-collapse: collapse; font: var(--type-small); }
.s-table th, .s-table td { padding: var(--space-s) var(--space-s) var(--space-s) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.s-table thead th { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-case); font-stretch: var(--type-label-stretch); color: var(--color-text-muted); }
.s-table tbody th { font-weight: 600; width: 22%; }
.s-table td:nth-child(2) { color: var(--color-text-muted); }

.s-comps { background: var(--color-bg-subtle); }
.s-comps__grid { display: grid; gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .s-comps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .s-comps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s-comp {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-2xs);
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.s-comp .btn { justify-self: start; }

.s-check__grid { display: grid; gap: var(--space-l); }
.s-check__head { display: grid; gap: var(--space-s); align-content: start; }
.s-check__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }
.s-check__list li { padding-block: var(--space-s); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); max-width: 70ch; }
.s-check__list b { color: var(--color-text); font-weight: 600; }
@media (min-width: 1024px) {
  .s-check__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .s-check__head { grid-column: 1 / span 4; }
  .s-check__list { grid-column: 6 / -1; }
}

/* ===================== Kontakt · Konfigurator (Version 3) ===================== */

.k-summary { display: grid; margin: var(--space-2xs) 0 0; }
.k-summary > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: baseline;
  padding-block: var(--space-xs);
  border-top: 1px solid var(--color-border-strong);
  font: var(--type-small);
}
.k-summary > div:last-child { border-bottom: 1px solid var(--color-border-strong); }
.k-summary dt a {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  font-stretch: var(--type-label-stretch);
  color: var(--color-text-muted);
}
@media (hover: hover) { .k-summary dt a:hover { color: var(--color-text); } }
.k-summary dd { margin: 0; overflow-wrap: anywhere; }
.k-summary dd[data-empty] { color: var(--color-text-subtle); }
.k-summary dd.is-updated { animation: k-flash 600ms var(--ease-out); }
@keyframes k-flash { from { color: var(--color-accent-text); } }

.k-group { scroll-margin-top: calc(var(--header-height) + var(--space-m)); }
.k-group__more { justify-self: start; }

/* Package cards (radio) */
.k-options { display: grid; gap: var(--space-2xs); }
@media (min-width: 768px) { .k-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k-option { position: relative; display: grid; }
.k-option > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.k-option__box {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  min-height: 100%;
  padding: var(--space-s);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 0 var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-hover), box-shadow var(--dur-fast) var(--ease-hover), background-color var(--dur-fast) var(--ease-hover);
}
.k-option__title { font: var(--type-h3); letter-spacing: var(--type-h3-tracking); }
.k-option__copy { font: var(--type-small); color: var(--color-text-muted); }
@media (hover: hover) { .k-option:hover .k-option__box { border-color: var(--color-text); } }
.k-option > input:checked + .k-option__box { border-color: var(--color-text); box-shadow: inset 0 3px 0 0 var(--color-accent); background: var(--color-bg-subtle); }
.k-option > input:focus-visible + .k-option__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.k-group > legend .field__opt { margin-left: 0.4em; font: var(--type-small); letter-spacing: normal; color: var(--color-text-subtle); }

/* ---------- 404 ---------- */
.r-404 > .t-lead { margin-top: var(--space-s); }
.r-404 > .cluster { margin-top: var(--space-l); }