/* KENYU Quicksilver – Ergänzungen für Startpaket, Konfigurator und Maßkontrolle
   Nutzt das 12-Spalten-Raster und die Variablen der Seite. */

/* --------------------------------------------------------- Startpaket */
.sp-grid { row-gap: var(--s-5); margin-block-start: var(--s-7); }
.sp-card {
  grid-column: span 6;
  padding: var(--s-6);
  border: 1px solid var(--c-line-gold, rgba(193,163,125,.28));
  border-radius: 6px;
  background: linear-gradient(140deg, rgba(193,163,125,.10), rgba(193,163,125,.02));
}
.sp-card.sp-big { border-color: var(--c-accent); }
.sp-eyebrow { margin: 0 0 var(--s-3); font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.sp-title { margin: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: var(--ls-h2); font-weight: 600; color: #fff; }
.sp-value { margin: var(--s-3) 0 0; color: var(--c-ink-muted); }
.sp-fine { grid-column: 1 / 9; margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-ink-muted); }
.sp-act { grid-column: 1 / -1; }

/* ------------------------------------------------------- Konfigurator */
.kq-host { grid-column: 1 / -1; margin-block-start: var(--s-7); }
.kq-sect .kq-summary { top: 96px; }
.kq-note { grid-column: 1 / 9; margin: var(--s-6) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-ink-muted); }

/* ------------------------------------------------------- Maßkontrolle */
.mk-grid { row-gap: var(--s-5); margin-block-start: var(--s-7); }
.mk-step { grid-column: span 4; padding-block-start: var(--s-4); border-block-start: 1px solid var(--c-line); }
.mk-step em { display: block; font-style: normal; font-size: var(--fs-num, 32px); line-height: var(--lh-num, 36px); color: var(--c-accent); font-weight: 600; margin-block-end: var(--s-3); }
.mk-step b { display: block; color: #fff; margin-block-end: var(--s-2); }
.mk-step span { color: var(--c-ink-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.mk-extra { grid-column: 1 / 9; margin: 0; color: var(--c-ink-muted); }
.mk-doc a { display: inline-block; padding-block: 10px; color: var(--c-accent); }

/* ------------------------------------------- Formular: So geht es weiter */
.next-col { grid-column: 9 / 13; align-self: start; padding: var(--s-5); border: 1px solid var(--c-line); border-radius: 6px; }
.next-head { margin: 0 0 var(--s-4); font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.next-list { list-style: none; margin: 0; padding: 0; counter-reset: nx; display: grid; gap: var(--s-4); }
.next-list li { counter-increment: nx; display: grid; grid-template-columns: 28px 1fr; column-gap: var(--s-3); }
.next-list li::before { content: "0" counter(nx); grid-row: span 2; color: var(--c-accent); font-size: var(--fs-small); font-weight: 600; padding-top: 1px; }
.next-list b { color: #fff; font-weight: 600; }
.next-list span { color: var(--c-ink-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.next-note { margin: var(--s-5) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-ink-muted); }

/* --------------------------------------------------------- Abschluss */
.end-act { row-gap: var(--s-4); margin-block-start: var(--s-6); }
.end-act > * { grid-column: 1 / -1; justify-self: start; }

/* --------------------------------------------- Stimmen: Google-Bewertung */
.says-rating { max-width: 1200px; margin: var(--s-7) auto 0; padding-inline: var(--gutter, 24px);
               text-align: center; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-ink-muted); }
.says-rating strong { color: var(--c-accent); font-size: 1.25em; font-weight: 600; margin-inline-end: 2px; }
.says-rating a { color: var(--c-accent); white-space: nowrap; }

/* ------------------------------------------------- Formular: Zusatz */
.wa-hint a { white-space: nowrap; }

@media (max-width: 900px) {
  .sp-card, .mk-step, .sp-fine, .mk-extra, .kq-note, .next-col { grid-column: 1 / -1; }
  .next-col { margin-block-start: var(--s-6); }
  .sp-title { font-size: 26px; line-height: 30px; }
}