/* Handy-Ansicht (bis 767 px Breite).
   Alles hier greift NUR auf dem Smartphone. Desktop und Tablet bleiben unverändert.
   Die Seiten nutzen Inline-Styles, deshalb sind die Regeln mit !important versehen. */
@media (max-width: 767px) {

  /* Nichts darf seitlich überstehen: sonst zoomt das Handy heraus oder die Seite wackelt quer.
     "clip" statt "hidden", damit die klebende Kopfzeile (position: sticky) weiter funktioniert. */
  html, body { overflow-x: clip; max-width: 100%; }

  /* Kopfzeile der Unterseiten: kompakt wie auf der Startseite */
  .rc-subhead { gap: 10px !important; height: 64px !important; padding: 0 16px !important; }
  .rc-subhead > a:first-child { gap: 10px !important; min-width: 0; flex-shrink: 1; }
  .rc-subhead > a:first-child > img { width: 46px !important; }
  .rc-subhead > a:first-child > span { gap: 3px !important; }
  .rc-subhead > a:first-child > span > span:first-child { font-size: 13px !important; letter-spacing: .14em !important; }
  .rc-subhead > a:first-child > span > span:last-child { font-size: 8px !important; letter-spacing: .22em !important; }
  .rc-subhead > nav { gap: 0 !important; flex-shrink: 0; }
  .rc-subhead > nav > a:not(.rc-headcta) { display: none !important; }
  .rc-subhead .rc-headcta { height: 38px !important; padding: 0 16px !important; font-size: 0 !important; letter-spacing: 0 !important; }
  .rc-subhead .rc-headcta::after { content: "Anfragen"; content: "Anfragen" / ""; font-size: 11px; letter-spacing: .12em; }
  .rc-subhead > a:last-child:not(:first-child) { font-size: 12px !important; letter-spacing: .02em !important; white-space: nowrap; flex-shrink: 0; }

  /* Inhaltsverzeichnis der Ratgeber-Seiten: nicht mitlaufen lassen (überdeckte sonst den Text) */
  nav[aria-label="Inhalt dieser Seite"] { position: static !important; max-width: none !important; flex-basis: 100% !important; }

  /* Tabellen (Preise, Vergleich) passen ohne Querwischen auf den Bildschirm */
  .rc-mtable { min-width: 0 !important; font-size: 14px !important; line-height: 1.45 !important; }
  .rc-mtable th, .rc-mtable td { padding: 12px 10px !important; }
  .rc-mtable thead th { font-size: 10px !important; letter-spacing: .08em !important; }
  .rc-mtable td > span { gap: 6px !important; }
}

/* Preistabellen: Behandlung als eigene Zeile, darunter die Preise nebeneinander */
@media (max-width: 767px) {
  .rc-mstack, .rc-mstack thead, .rc-mstack tbody { display: block !important; width: 100% !important; }
  .rc-mstack tr { display: grid !important; grid-template-columns: 1fr 1fr; }
  .rc-mstack tr > :first-child { grid-column: 1 / -1; padding-bottom: 2px !important; }
  .rc-mstack tbody tr > :first-child { font-weight: 500; color: #14110F !important; }
  .rc-mstack thead tr > :first-child { display: none !important; }
  .rc-mstack thead th { padding-top: 10px !important; padding-bottom: 10px !important; }
  .rc-mstack tbody td:not(:first-child) { padding-top: 4px !important; }
}

/* Startseite, Hero auf dem Smartphone: Video oben komplett sichtbar (16:9), Text darunter auf hellem Grund */
@media (max-width: 767px) {
  #top { min-height: 0 !important; justify-content: flex-start !important; padding: calc(76px + 56.25vw + 32px) 20px 64px !important; color: #14110F !important; }
  #rc-hero-copy > p:first-child { color: #7A5C30 !important; }
  #rc-hero-copy h1 em, #rc-hero-copy li > span:first-child[style*="background-clip"] { background-image: linear-gradient(100deg, #6E5228 0%, #A9844A 40%, #5E4520 100%) !important; }
  #rc-hero-copy > p:nth-of-type(2) { color: #4A413A !important; }
  #rc-hero-copy a[href="#ergebnisse"] { color: #14110F !important; border-color: rgba(20, 17, 15, .35) !important; }
  #rc-hero-copy ul, #rc-hero-copy ul a { color: #4A413A !important; }
  #rc-hero-copy ul a > span:first-child, #rc-hero-copy ul li > span:first-child:not([style*="background-clip"]) { color: #B08D57 !important; }
}