/* Handy: erste Ansicht und Terminseite. Der Streifen selbst steht in content/inc_handy_leiste.php (muss beim ersten Bild da sein). */
/* Erste Ansicht am Handy: Band, Überschrift, kurzer Satz und beide Knöpfe müssen über der Leiste stehen (Peter, 05.11.2026). */
.hero-subline--kurz { display: none; }
@media (max-width: 767.98px) {
  .hero-subline:not(.hero-subline--kurz) { display: none !important; }
  .hero-subline--kurz { display: block; margin: 0 0 16px; font-size: 17px; line-height: 1.4; }
  .hero-statement__inner { padding-top: 0 !important; }
  .swiper-slide-caption.section-md { padding-top: 76px !important; }
  .hero-headline { font-size: clamp(31px, 9.2vw, 42px) !important; line-height: 1.08 !important; margin-bottom: 10px !important; }
  .hero-eyebrow { margin-top: 0 !important; }
  .hero-cta-row { gap: 10px !important; }
  .hero-cta { min-height: 54px !important; height: 54px !important; padding-left: 10px !important; padding-right: 10px !important; font-size: clamp(12.5px, 3.5vw, 15px) !important; letter-spacing: .01em !important; white-space: nowrap; }
  .hero-cta-row { max-width: none !important; }
  html[lang^="zh"] .hero-headline { font-size: clamp(26px, 7.8vw, 34px) !important; }
  .hero-cta--stacked .hero-cta__lines { display: inline !important; }
  .hero-cta--stacked .hero-cta__lines span { display: inline !important; font-size: inherit !important; letter-spacing: inherit !important; }
}
/* Sehr kurze Handys: Erklärvideo erst nach dem ersten Wischen */
@media (max-width: 767.98px) and (max-height: 600px) {
  .hero-video-trigger-row { display: none !important; }
}
/* Terminseite: Knopf samt Zeile darunter stehen auch auf kurzen Handys über dem Streifen. */
@media (max-width: 767.98px) {
  .wpit-book-cover-intro { margin-bottom: 12px !important; }
  .wpit-book-cover-grid ul { gap: 6px !important; }
}
@media (max-width: 767.98px) and (max-height: 600px) {
  .wpit-book-cover-grid ul li:nth-child(n+2) { display: none !important; }
}
/* Untereinander gestapelt wirkt die Breitenangabe flex-basis als Höhe: Der Text bekam 480 bzw. 320 px statt seiner echten Höhe. */
@media (max-width: 767.98px) {
  .trust-bar__claim { flex: 0 0 auto; margin-bottom: 12px; }
}
@media (max-width: 575.98px) {
  .paket-pane-cta__text { flex: 0 0 auto; }
  .paket-pane-cta__button { justify-content: center; text-align: center; }
}