/* KENYU Quicksilver – Mobil (17.10.2026, nach "Mobile Ansicht optimieren", von David freigegeben)
   Nur Handy/Tablet-Breiten. Am Desktop greift außer den zwei Ausblend-Regeln oben nichts. */

/* Nur mobil sichtbar: Google-Zeile im Hero, Wisch-Hinweise, Aufklapp-Titel */
.m-only, .m-swipe-hint { display: none; }
.sp-fine-box { grid-column: 1 / 9; }
.sp-fine-box > summary { display: none; }
.mk-steps { display: contents; }

/* ============================================ Paket 1: feste Leiste, Banner, Tippflächen */
@media (max-width: 900px) {
  .stickybar { display: flex; gap: 10px; visibility: hidden;
    transition: transform var(--d-ui) var(--e-exit), visibility 0s var(--d-ui); }
  .stickybar.show { visibility: visible; transition: transform var(--d-ui) var(--e-enter); }
  .stickybar a { flex: 1; display: flex; align-items: center; justify-content: center;
    padding-block: var(--s-3); padding-inline: var(--s-3); }
  .stickybar a.sb-wa { background: transparent; color: var(--c-ink);
    border: 1px solid rgba(255,255,255,0.32); }
  html { scroll-padding-bottom: 84px; }

  /* Cookie-Hinweis kompakter, damit "Preis ansehen" darüber sichtbar bleibt */
  .consent { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); padding: 14px; }
  .consent p { margin-block-end: var(--s-3); }

  /* Tippflächen mindestens 44 px */
  .hero-mark { padding-block: 6px; margin-block: -6px; }
  .kq-toggle { min-height: 44px; padding-block: 0; }
  .wa-hint a, .end-act .microhint a, #mailDirect, .says-rating a {
    display: inline-flex; align-items: center; min-height: 44px; }
  .consent p a, .opener-note a, .check a, label a {
    padding-block: 13px; }
  .foot nav { column-gap: var(--s-5); row-gap: 0; }
  .foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================ Paket 2: Länge bündeln */
@media (max-width: 900px) {
  /* Startpaket: Bedingungen aufklappbar (Text bleibt im HTML) */
  .sp-fine-box { grid-column: 1 / -1; }
  .sp-fine-box > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer;
    list-style: none; font-size: 14px; color: var(--c-ink); }
  .sp-fine-box > summary::-webkit-details-marker { display: none; }
  .sp-fine-box > summary::after { content: ""; width: 8px; height: 8px; margin-left: 12px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
  .sp-fine-box[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

  /* Kennzahlen nebeneinander */
  .fig { grid-column: span 2; margin-block-end: 0; }
  .fig b { font-size: 24px; line-height: 30px; }
  .fig span { display: block; font-size: 14px; line-height: 20px; }
}
/* Wischreihen nur am Handy; am Tablet ist genug Breite zum Stapeln */
@media (max-width: 600px) {
  .m-swipe-hint { display: block; grid-column: 1 / -1; margin: 0 0 var(--s-2);
    text-align: right; font-size: 12px; line-height: 16px; color: var(--c-ink-muted); }

  /* Maßkontrolle: drei Schritte zum Wischen */
  .mk-steps { display: grid; grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-block-end: var(--s-2); }
  .mk-steps::-webkit-scrollbar { display: none; }
  .mk-steps .mk-step { grid-column: auto; scroll-snap-align: start; }
  .mk-grid { row-gap: var(--s-4); }

  /* Ablauf in drei Schritten: zum Wischen */
  .flow-mini { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .flow-mini::-webkit-scrollbar { display: none; }
  .flow-mini li { scroll-snap-align: start; }

  /* Farbbühne flacher: die Farben stehen schon im Konfigurator */
  .deck-view { min-height: 340px; }
}

/* ============================================ Paket 3: Lesbarkeit */
@media (max-width: 900px) {
  .m-only { display: block; }
  .hero-rating { margin: var(--s-3) 0 0; font-size: 14px; line-height: 20px; color: var(--c-ink-muted); }
  .hero-rating strong { color: var(--c-accent); font-weight: 600; }
  .hero-rating a { color: var(--c-ink-muted); text-decoration: none; }
}
@media (max-width: 600px) {
  /* Fließtext 16 px statt 14 */
  :root { --fs-small: 16px; --lh-small: 24px; }
  /* Hinweise, Leisten und Fußbereich bewusst 14 px */
  .microhint, .gate-hint, .keyhint, .next-note, .says-rating, .sp-fine-box > summary,
  .foot nav a, .consent, .consent button, .lchip, .pick-jump, .review-back, .sum-note,
  .hero-rating, .fig span { font-size: 14px; line-height: 20px; }
  .says-rating strong { font-size: 18px; }
  .kq-hint, .kq-empty, .kq-fine, .kq-option-meta, .kq-price span { font-size: 14px; }
  .kq-summary dl, .kq-offer { font-size: 15px; }
}