/* Desktop-Schicht für alle Varianten (lädt nach d.css): ruhige Schriftgrößen, zentrierte Abschnittsköpfe */
@media (min-width: 900px) {
  h1.df-h { font-size: clamp(40px, 4.2vw, 64px) !important; }
  .abschnitt h2.df-h, .schluss h2.df-h, .profis h2.df-h { font-size: clamp(28px, 2.9vw, 44px) !important; }
  .kopfzeile { margin-inline: auto; text-align: center; display: grid; justify-items: center; }
  .kopfzeile .df-lead { max-width: 60ch; }
  .df-lead { font-size: 19px; }
}
/* Bewertungszeile mobil überall gleich (Vorgabe Matthias): Sterne links, Text linksbündig */
@media (max-width: 767px) { .beweis { justify-content: flex-start !important; text-align: left !important; } }

/* Listen und Schritte nie ausgegraut, Markierung nur über Rand */
.bewegt .schritt, .bewegt .technik__liste li, .bewegt [data-teil], .bewegt [data-schritt] { opacity: 1 !important; }
/* Überschriften mobil ohne künstliche Schmalheit, damit sie höchstens drei Zeilen brauchen */
@media (max-width: 899px) { .abschnitt h2.df-h, .schluss h2.df-h, .pull h2.df-h { max-width: none !important; font-size: clamp(25px, 6.8vw, 34px) !important; } }

/* Matthias 05.11.2026: Desktop aufgeräumt, Text in einer Rail, CTAs untereinander, Subline kurz */
@media (min-width: 900px) {
  .hero .df-wrap, .hero [class*="__text"], .hero [class*="__inhalt"] { box-sizing: border-box; }
  .hero__cta { display: grid !important; grid-auto-flow: row !important; justify-items: start !important; gap: 12px !important; }
  .hero__cta .df-btn, .hero__cta .btn-zweit { width: 320px; justify-content: center; }
  .hero__cta .beweis { margin-top: 6px; }
  .hero .df-lead { max-width: 52ch !important; }
  .kopfzeile .df-lead { max-width: 64ch !important; }
}
/* Kein mitlaufender Seitenrand als Markierung (KI-Optik) */
.technik__liste li, .technik li[data-teil], [data-teil] { border-left: 0 !important; }

/* Drei Pakete: ab Tablet drei Spalten über die volle Rail, Rabattzeile auf gleicher Breite (keine leere vierte Spalte) */
@media (min-width: 700px) {
  .pakete { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .preise .rabatt { max-width: none !important; }
}
@media (min-width: 700px) and (max-width: 899px) { .pakete { gap: 10px !important; } }
/* Hero-Subline mobil über die volle Breite der Headline (höchstens drei Zeilen) */
@media (max-width: 767px) { .hero .df-lead { max-width: none !important; } }
/* Gutschein-Fächer mobil: alle Karten mit Abstand zum Rand */
@media (max-width: 599px) {
  .gs__faecher { width: min(58vw, 240px) !important; }
  .gs__karte { transform: translateX(calc((var(--i) - 1) * 14% * var(--k))) rotate(calc((var(--i) - 1) * 7deg * var(--k))) !important; }
}
/* Sublines unter zentrierten Überschriften: höchstens zwei Zeilen voll breit */
@media (min-width: 900px) { .kopfzeile { max-width: 1000px !important; } .kopfzeile .df-lead { max-width: 82ch !important; text-wrap: balance; } }
@media (min-width: 1180px) { .kopfzeile { max-width: 1080px !important; } .kopfzeile .df-lead { max-width: 90ch !important; } }