/* Desktop-Vorschau der bestehenden mobilen Laufbänder. */
@media (min-width: 901px) {
  html.review-preview .testi { border-top: none; padding-block: 24px 40px; }
  html.review-preview .testi-head, html.review-preview .testi-grid, html.review-preview .testi-dots { display: none; }
  html.review-preview .testi-marquee {
    display: block;
    margin-top: 0;
    /* volle Bildschirmbreite, aus dem Container ausbrechen */
    margin-inline: calc(var(--gutter) * -1);
    overflow: hidden;
    /* Luft, damit der Schatten oben/unten nicht abgeschnitten wird */
    padding-block: 16px;
    /* keine weiche Kante — die Kacheln dürfen klar aus dem Rand laufen */
  }

  /* Der Lauf wird in app.js gesteuert (requestAnimationFrame), nicht per
     CSS-Animation — sonst legt iOS' "Bewegung reduzieren" die Reihe komplett
     still. touch-action: pan-y = horizontal wischen wir selbst, vertikal
     scrollt die Seite ganz normal weiter. */
  html.review-preview .testi-row {
    display: flex;
    padding-inline: 7px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  /* Greif-Cursor erst beim echten Ziehen — sonst fühlt sich die Reihe schon
     beim Drüberfahren "klebrig" an. */
  html.review-preview .testi-row:active { cursor: grabbing; }
  html.review-preview .testi-row + .testi-row { margin-top: 14px; }

  html.review-preview .testi-row-track {
    display: flex;
    gap: 14px;
    width: max-content;
    will-change: transform;
  }
  /* Kacheln selbst nicht als Bild/Text greifbar — sonst kämpft der
     native Drag gegen das Wischen. */
  html.review-preview .testi-tile, html.review-preview .testi-tile * { -webkit-user-drag: none; }

  html.review-preview .testi-tile {
    flex: none;
    width: min(86vw, 340px);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 20px 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* neutraler Schatten statt rotem Schein — der wurde am Rand nur abgeschnitten */
    box-shadow: 0 4px 18px rgba(0,0,0,0.11), 0 1px 3px rgba(0,0,0,0.06);
  }
  html.review-preview .testi-tile .stars {
    display: flex; gap: 3px; color: #f5a623;
    font-size: 16px; margin-bottom: 12px;
  }
  html.review-preview .testi-tile blockquote {
    font-size: 14px; line-height: 1.6; color: var(--ink);
    letter-spacing: -0.01em; flex: 1;
    /* auf 4 Zeilen kürzen, damit beide Reihen zusammen auf einen Screen passen */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* kein Trennstrich + keine "Google Rezension"-Zeile: spart Höhe,
     die Herkunft steht ohnehin im Google-Badge über dem CTA */
  html.review-preview .testi-tile .who {
    display: flex; align-items: center; gap: 11px;
    margin-top: 14px; padding-top: 0;
    border-top: none;
  }
  html.review-preview .testi-tile .who > div > span { display: none; }
  html.review-preview .testi-tile .av {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line-strong);
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px; color: var(--ink-dim);
    flex: none;
  }
  html.review-preview .testi-tile .who b { font-size: 13px; font-weight: 600; display: block; color: var(--ink); }
  html.review-preview .testi-tile .who span { font-size: 11px; color: var(--ink-faint); }
  html.review-preview .testi-marquee { width: 100vw; margin-inline: calc(50% - 50vw); }
}