/* ==========================================================================
   zusatz-mobil.css – Feinschliff für Handy (≤ 639 px) und Tablet (640–1179 px)
   Nur Media Queries unterhalb des Desktop-Umschaltpunkts: ab 1180 px ändert
   sich nichts. Wird nach den übrigen zusatz-*.css geladen (alphabetisch).
   ========================================================================== */

/* ---------- Handy + Tablet (unter dem Desktop-Kopf) */
@media (max-width:1179px){
  /* Kicker in der Etappen-Route wie alle anderen Kicker (erbte sonst 18,5 px von .etappe p) */
  .tour__block .marke{font-size:12.5px;line-height:1.45}

  /* Landingpages: lange H1-Sätze (mit Hervorhebung) nicht in der Riesengröße der Startseiten-Marke */
  .h1--marke .h1__m:has(em){font-size:clamp(38px,4vw,45px);line-height:1.05;letter-spacing:-.045em}

  /* Gipfelcheck: Kleingedrucktes nicht an „Angebot anfragen“ kleben */
  .gc__hint{display:block;margin:6px 0 0}

  /* Tourenplaner: Zurück/Überspringen als echte Tipp-Ziele, Pfeil nicht umbrechen */
  .kf-nav .kf-link:not([hidden]){display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap}
  .kk__drin summary{min-height:44px}

  /* kleine Textlinks: unsichtbar vergrößerte Tippfläche, Layout bleibt gleich */
  .skip{position:relative}
  .skip::after{content:"";position:absolute;left:-6px;right:-6px;top:-14px;bottom:-12px}
  .anf__direkt a{min-height:44px}
  .krumen a{position:relative}
  .krumen a::after{content:"";position:absolute;left:-4px;right:-4px;top:-13px;bottom:-13px}

  /* Fuß: Links mit 44 px Tippfläche (Abstand kommt aus der Tippfläche statt aus dem Listen-Gap) */
  .fuss ul{gap:0}
  .fuss ul a{display:flex;align-items:center;min-height:44px}
  .fuss__route a,.fuss__kontakt a{display:inline-flex;align-items:center;min-height:44px}

  /* Lange Komposita in Überschriften („Suchmaschinenoptimierung“) dürfen umbrechen statt überzustehen:
     Silbentrennung (lang="de-AT"), aber nur bei langen Wörtern; Rückfall: Umbruch im Wort */
  h1,h2,h3{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:anywhere}

  /* Menü: Untermenü-Knopf so hoch wie der Link daneben (Trennlinie läuft sonst versetzt) */
  .hdr__sub > .hdr__subknopf{height:auto;align-self:stretch;min-height:46px}
}

/* ---------- Handy + Tablet mit 1–2-spaltigen Kachelrastern */
@media (max-width:1099px){
  /* Kachel: Symbol neben die Überschrift statt darüber (in .prosa bekam die h3 sonst 32 px Abstand nach oben) */
  .kachel:has(> .kachel__ic + h3){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;align-content:start}
  .kachel:has(> .kachel__ic + h3) > *{grid-column:1 / -1}
  .kachel:has(> .kachel__ic + h3) > .kachel__ic{grid-column:1;width:44px;height:44px;margin:0}
  .kachel:has(> .kachel__ic + h3) > .kachel__ic + h3{grid-column:2;margin:0}
  .kachel:has(> .kachel__ic + h3) > .kachel__ic + h3 + *{margin-top:12px}
}
/* Tablet: keine einsame Kachel in der letzten Reihe – sie nimmt die volle Breite */
@media (min-width:640px) and (max-width:1099px){
  .raster--3 > :last-child:nth-child(odd),.raster--4 > :last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---------- Tablet: die beiden Kontaktknöpfe stehen schon im Kopf – im aufgeklappten Menü nicht doppelt */
@media (min-width:640px) and (max-width:1179px){
  .hdr__navknoepfe{display:none}
  .hdr__nav ul{padding-bottom:16px}
  /* Gründerbonus-Sticker: im schmalen Kostenrahmen kleiner, damit er den Text nicht berührt */
  .kk-bonus{width:92px;height:92px;top:-26px;right:-14px}
  .kk-bonus__z{font-size:22px}
  .kk-bonus__t{font-size:9px}
}

/* ---------- Tablet hochkant (640–899 px) */
@media (min-width:640px) and (max-width:899px){
  .h1--marke .h1__m:has(em){font-size:clamp(40px,6.2vw,52px)}
}

/* ---------- Handy */
@media (max-width:639px){
  /* Kicker mit Umbruch: Zeilen nicht aneinanderkleben */
  .marke{line-height:1.5;align-items:flex-start}
  .marke::before{margin-top:.2em}

  /* Landingpage-H1: stark, aber ohne einsamen Gedankenstrich und ohne Überlauf */
  .h1--marke .h1__m:has(em){font-size:clamp(30px,8.6vw,38px);line-height:1.08;letter-spacing:-.035em}

  /* Zitatblock: mehr Zeilenbreite (vorher nur ~ 22 Zeichen je Zeile) */
  .zitatblock{padding:24px 20px 22px}
  .zitatblock::before{font-size:72px;right:14px}
  .zitatblock blockquote{padding-right:30px;font-size:18px}

  /* Offenes Menü: Handy-Leiste ausblenden – das Menü hat eigene Kontaktknöpfe, die sonst unter der Leiste liegen */
  body:has(.hdr.is-open) .mbar{display:none}

  /* Fuß: kein heller Streifen unter dem dunklen Fuß; Abstand für die Handy-Leiste im Fuß selbst */
  body{padding-bottom:0}
  .fuss{padding-bottom:calc(28px + 76px + env(safe-area-inset-bottom))}

  /* Fuß kompakter: „Seite“ und „Rechtliches“ nebeneinander, Links mit 44 px Tippfläche */
  .fuss__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
  .fuss__grid > :nth-child(1){grid-column:1 / -1}
  .fuss__grid > :nth-child(2){grid-column:1;grid-row:2}
  .fuss__grid > :nth-child(4){grid-column:2;grid-row:2}
  .fuss__grid > :nth-child(3){grid-column:1 / -1;grid-row:3}
  .fuss__grid > :nth-child(5){grid-column:1 / -1}
  .fuss .fuss__h{margin-bottom:6px}
  .fuss__kontakt{margin-top:0}
}

/* Datenschutz-Häkchen: Tippfläche mind. 44 px (Tourenplaner, Formulare) */
@media (max-width:1179px){
  .consent{min-height:44px;align-items:center;padding:4px 0}
  .consent input{width:24px;height:24px;margin:0}
  .consent a{display:inline-block;padding:10px 0;margin:-10px 0}
}