/* Paketseite KI-Sichtbarkeits-Check (R-31, STUDIO-KISC-1-R1, 08.11.2026).
   Nur diese Seite lädt die Datei (generate.mjs, extra.styles; build.mjs hasht sie nach assets/seite-kisc.<hash>.css).
   Tokens, Typografie und Bausteine kommen aus styles.css; hier stehen nur die Teile, die es dort nicht gibt. */

/* ---------- Erster Bildschirm: Text links, Beispielbericht rechts (ab 1024 px), am Handy darunter ---------- */
.kisc-hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1024px) { .kisc-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr); } }
.kisc-hero .display { font-size: clamp(2.25rem, 1rem + 3vw, 4.25rem); max-width: 21ch; }
@media (min-width: 768px) { .kisc-hero .display { line-height: 1; } }
.kisc-hero .lede { max-width: 44ch; }
.kisc-hero .actions { margin-top: 24px; gap: 14px 28px; }
.kisc-hero .note { margin-top: 16px; }
/* Hinweiszeilen aus Teilen: Umbruch nur zwischen den Teilen, nie mitten in einer Angabe. */
.kisc-teile { display: flex; flex-wrap: wrap; column-gap: .35em; }
.kisc-teile > span { white-space: nowrap; }
.kisc-hero .note.kisc-teile { max-width: none; }
/* Am Handy je Teil eine Zeile statt eines Punkts am Zeilenende. */
@media (max-width: 719.98px) { .kisc-teile { flex-direction: column; } .kisc-teile > span[aria-hidden] { display: none; } }
.paket .kisc-teile { flex-direction: column; } .paket .kisc-teile > span[aria-hidden] { display: none; }

/* Preis in klaren Zeilen: Betrag groß, darunter „zzgl. USt. · bis …, danach …“. Kein Monospace, keine Umbrüche mitten in Angaben. */
.kisc-preis { display: grid; gap: 6px; }
.kisc-preis--hero { margin-top: clamp(24px, 3vw, 32px); }
.kisc-preis__betrag { font-size: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem); font-weight: 650; font-stretch: 110%; letter-spacing: -.025em; line-height: 1; }
.kisc-preis__zeile { display: flex; flex-wrap: wrap; column-gap: .35em; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.kisc-preis__zeile > span { white-space: nowrap; }
.kisc-hinweis { margin-top: 16px; max-width: 46ch; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: var(--fs-small); line-height: 1.45; color: var(--ink); }
.paket .kisc-hinweis { margin-top: 0; background: var(--canvas); }

/* Beispielbericht (Beispieldaten) */
.kisc-vorschau { margin: 0; display: grid; gap: 18px; width: 100%; max-width: 520px; padding: clamp(22px, 2.4vw, 32px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--lift); }
@media (min-width: 1024px) { .kisc-vorschau { justify-self: end; } }
.kisc-vorschau__kopf { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.625rem); font-weight: 560; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.kisc-vorschau__kopf strong { font-weight: 700; white-space: nowrap; }
.kisc-balken { display: grid; gap: 14px; }
.kisc-balken li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; font-size: var(--fs-small); color: var(--ink-2); }
.kisc-balken__wert { color: var(--ink); font-weight: 600; white-space: nowrap; }
.kisc-balken .is-eigen .kisc-balken__name { color: var(--ink); font-weight: 650; }
.kisc-balken__spur { grid-column: 1 / -1; display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--line);
  -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.kisc-balken__spur::-webkit-meter-bar { height: 8px; border: 0; border-radius: 4px; background: var(--line); }
.kisc-balken__spur::-webkit-meter-optimum-value, .kisc-balken__spur::-webkit-meter-suboptimum-value, .kisc-balken__spur::-webkit-meter-even-less-good-value { border-radius: 4px; background: var(--ink-3); }
.kisc-balken__spur::-moz-meter-bar { border-radius: 4px; background: var(--ink-3); }
.kisc-balken .is-eigen .kisc-balken__spur::-webkit-meter-optimum-value, .kisc-balken .is-eigen .kisc-balken__spur::-webkit-meter-suboptimum-value, .kisc-balken .is-eigen .kisc-balken__spur::-webkit-meter-even-less-good-value { background: var(--ink); }
.kisc-balken .is-eigen .kisc-balken__spur::-moz-meter-bar { background: var(--ink); }
.kisc-vorschau__hebel { padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }

/* ---------- Warum jetzt: Zahlen mit Quelle ---------- */
.kisc-zahl { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 650; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.05; }
.kisc-schluss { margin-top: clamp(28px, 4vw, 44px); max-width: 44ch; font-size: var(--fs-lede); font-weight: 560; line-height: 1.4; color: var(--ink); text-wrap: balance; }

/* ---------- Für wen: je Unternehmensart drei Beispielfragen ---------- */
.kisc-arten { display: grid; gap: var(--gutter); }
@media (min-width: 720px) { .kisc-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kisc-arten > li { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.kisc-arten h3 { font-size: var(--fs-sub); font-weight: 580; font-stretch: 104%; line-height: 1.2; letter-spacing: -.01em; }
.kisc-fragen { display: grid; gap: 8px; margin-top: 4px; }
.kisc-fragen li { justify-self: start; max-width: 100%; padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: var(--canvas); color: var(--ink); font-size: .9375rem; line-height: 1.4; }

/* ---------- Kurz beantwortet: vier Antwortblöcke ---------- */
.kisc-antworten { display: grid; gap: 32px var(--gutter); }
@media (min-width: 900px) { .kisc-antworten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kisc-antworten section { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.kisc-antworten h3 { font-size: var(--fs-sub); font-weight: 580; font-stretch: 104%; line-height: 1.2; letter-spacing: -.01em; }
.kisc-antworten p { max-width: 62ch; color: var(--ink-2); }

/* ---------- Preis-Karten ---------- */
.paket .kisc-preis { margin-bottom: 2px; }

/* ---------- Bestell-Leiste am Handy: dezent, unten fest, erst nach dem ersten Bildschirm ---------- */
.kisc-leiste { display: none; }
@media (max-width: 719.98px) {
  .kisc-leiste { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px;
    border-radius: var(--r-pill); background: var(--glass-solid); border: 1px solid var(--glass-line); box-shadow: var(--glass-edge), var(--lift); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .kisc-leiste { -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
  }
  .kisc-leiste__preis { display: grid; min-width: 0; line-height: 1.2; font-size: .75rem; color: var(--ink-3); }
  .kisc-leiste__preis > span { white-space: nowrap; }
  .kisc-leiste__preis strong { font-size: 1.125rem; font-weight: 650; color: var(--ink); }
  .kisc-leiste .button { flex: none; min-height: 44px; padding: 10px 18px; }
  /* Platz unter dem Fuß, damit die Leiste am Seitenende nichts verdeckt; während der Einwilligungshinweis offen ist, bleibt sie weg. */
  body:has(.kisc-leiste) .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px + 76px); }
  body:has(.consent:not([hidden])) .kisc-leiste { display: none; }
  /* Erst sichtbar, wenn der Bestellknopf im ersten Bildschirm weggescrollt ist (wo unterstützt; sonst immer sichtbar). */
  @supports (animation-timeline: scroll()) {
    .kisc-leiste { animation: kisc-leiste-ein linear both; animation-timeline: scroll(root); animation-range: 0 680px; }
  }
}
@keyframes kisc-leiste-ein { 0%, 82% { opacity: 0; visibility: hidden; transform: translateY(12px); } 100% { opacity: 1; visibility: visible; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @keyframes kisc-leiste-ein { 0%, 82% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
}