/*
 * Antippflaechen auf Mobilgeraeten.
 *
 * Auf 375 px waren zwei Dinge zu klein zum Treffen: der Menueknopf mit 36x28
 * Pixeln und 26 Links in der Fusszeile mit 18 Pixeln Hoehe, dicht gestapelt.
 * Beides ist kein Schoenheitsfehler - es ist der Unterschied zwischen "geht"
 * und "nervt".
 *
 * Bewusst nur unterhalb der Breakpoints, an denen diese Elemente ueberhaupt
 * mit dem Finger bedient werden. Am Desktop aendert sich nichts, und das
 * Aussehen bleibt in beiden Faellen gleich: es waechst nur die Flaeche, die
 * auf einen Druck reagiert.
 */

@media (max-width: 1080px) {
  /* Der Menueknopf. Negative Marge, damit die groessere Flaeche die
     Kopfzeile nicht auseinanderdrueckt. */
  #nav .burger {
    min-width: 44px;
    min-height: 44px;
    padding: 12px 10px;
    margin: -6px -10px;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 860px) {
  /* Fusszeilenlinks. Vorher 18 px hoch bei 10 px Abstand - zwei Ziele lagen
     naeher beieinander als ein Fingerkuppen-Durchmesser. */
  .bu-footer .buf-col a {
    padding: 8px 0;
    margin-bottom: 0;
    min-height: 34px;
  }

  .bu-footer .buf-soc {
    gap: 6px 14px;
  }
  .bu-footer .buf-soc a {
    padding: 8px 0;
    display: inline-block;
    min-height: 34px;
  }

  .bu-footer .buf-bottom-links a {
    display: inline-block;
    padding: 8px 0;
    min-height: 34px;
  }

  .bu-footer .buf-contact a {
    display: inline-block;
    padding: 6px 0;
    min-height: 30px;
  }
}

@media (max-width: 720px) {
  /*
   * Hero-Pfeile lagen auf der Ueberschrift.
   *
   * Sie stehen auf halber Hoehe, waehrend der Textblock im Hero unten sitzt -
   * auf einem schmalen Bildschirm treffen sich beide. Gemessen auf 430 px:
   * der linke Pfeil belegte 12-54 px, die Ueberschrift begann bei 22 px.
   * Man tippt also auf "Weiter", wenn man die Zeile lesen will.
   *
   * Die Pfeile wandern ins obere Drittel, wo nur Bild ist. Auf dem Desktop
   * bleibt alles wie es war.
   */
  /*
   * Eine Prozentangabe reicht nicht: Je schmaler der Bildschirm, desto mehr
   * Zeilen bricht die Ueberschrift um und desto weiter wandert der Textblock
   * nach oben. Auf 430 px war 34 % frei, auf 375 px lag der Pfeil wieder auf
   * der Zeile. Die Pfeile werden deshalb am oberen Rand des Hero verankert -
   * dort ist unabhaengig von der Textlaenge nur Bild.
   */
  .hero-arrow {
    top: 16px;
    transform: none;
    width: 44px;
    height: 44px;
  }
  .hero-arrow.prev { left: 14px; }
  .hero-arrow.next { right: 14px; }
}

@media (max-width: 860px) {
  /*
   * Reiter der Reiseziel-Seiten.
   *
   * Hotels, Ausflüge, Videos, Podcast, Angebote, FAQ — das ist die
   * Hauptnavigation dieser Seiten, und sie war 31 px hoch. Wer auf dem Handy
   * zwischen den Bereichen wechseln will, trifft daneben.
   */
  .t-btn {
    min-height: 46px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Sprungliste in der Seitenspalte (.sbx). Sechs Knoepfe ohne Klasse,
     Inline-Stil, 31 px hoch - auf dem Handy stehen sie untereinander und
     sind kaum zu treffen. Die Inline-Angabe wird hier ueberschrieben. */
  .sbx button {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Brotkrumen: 16 px hohe Textlinks, dicht nebeneinander. */
  .bc a {
    display: inline-block;
    padding: 7px 0;
    min-height: 30px;
  }
}

@media (max-width: 860px) {
  /*
   * Die Handlungsknoepfe selbst.
   *
   * .btn war 38 px hoch - und das sind die Knoepfe, auf die es ankommt:
   * "Verfuegbarkeit pruefen", "Reise anfragen", "Reiseziel ansehen". Die
   * Nebennavigation war laengst angepasst, ausgerechnet die Hauptaktion
   * nicht. Die Breite stimmte schon; es fehlten sechs Pixel Hoehe.
   */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* .btn-sm bleibt bewusst kleiner - er steht in Karten und Listen, wo ein
     44-px-Knopf das Raster auseinanderzieht. 40 px sind dort das Maximum,
     das die Gestaltung traegt. */
  .btn.btn-sm { min-height: 40px; }

  /*
   * Cookie-Banner. Zwei Knoepfe mit 39 px, und einer davon ist die
   * Ablehnung - genau der darf nicht schwerer zu treffen sein als die
   * Zustimmung.
   */
  .cb-btn { min-height: 44px; }

  /* Fusszeile von 34 auf 40 px. Volle 44 wuerden bei 26 gestapelten Links
     die Fusszeile auf dem Handy unverhaeltnismaessig lang machen; 40 px bei
     voller Zeilenbreite sind der Kompromiss, der beides traegt. */
  .bu-footer .buf-col a,
  .bu-footer .buf-bottom-links a,
  .bu-footer .buf-soc a {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 860px) {
  /*
   * Seitlich scrollende Streifen sichtbar machen.
   *
   * Der Kategorie-Streifen ist auf 375 px 774 px breit - vier der sechs
   * Reiter stehen ausserhalb. Er scrollt korrekt, aber nichts deutet darauf
   * hin: Die Kante endet, als waere die Liste dort zu Ende. Der Schatten am
   * rechten Rand verschwindet am Scrollende von selbst, weil der weisse
   * Deckgradient dort darueberliegt.
   *
   * Dieselbe Behandlung wie die Vergleichstabellen im Magazin.
   */
  .cat-strip-wrap {
    background:
      linear-gradient(to right,var(--card,#fff) 30%,rgba(255,255,255,0)) left center / 34px 100% no-repeat,
      linear-gradient(to left,var(--card,#fff) 30%,rgba(255,255,255,0)) right center / 34px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(13,17,23,.14),transparent) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(13,17,23,.14),transparent) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* Kontaktangaben in der Fusszeile: Telefonnummern und E-Mail sind das,
     was auf dem Handy am ehesten angetippt wird. */
  .bu-footer .buf-contact a {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* "Alle Ausflüge →" und aehnliche Weiterfuehrungen waren 17 px hoch. */
  .link {
    display: inline-block;
    padding: 10px 0;
    min-height: 40px;
  }
}

@media (max-width: 860px) {
  /*
   * Filter sind auf dem Handy die Hauptbedienung, nicht Zierrat.
   *
   * Die Kategoriefilter im Magazin waren 26 px hohe Knoepfe, die
   * Reiseziel-Chips auf der Hotelseite 38 px. Wer auf dem Handy filtern will,
   * trifft daneben und landet in einer anderen Kategorie - der aergerlichste
   * Fehlerfall, weil man erst am Ergebnis merkt, dass man danebengetippt hat.
   */
  button.tag,
  a.tag {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hdest-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/*
 * Zaehler am Merklisten-Symbol.
 *
 * bu-merkliste.js blendet ihn ein, indem es das Inline-`display` LOESCHT
 * (style.display = ''). Damit faellt das Element auf die Angabe im
 * Stylesheet zurueck - und ohne diese Regel wird aus dem runden Abzeichen
 * ein normales Inline-Element, weil align-items dann ins Leere greift.
 */
[data-bu-merk-zaehler] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
 * Amazon-Partnerlinks.
 *
 * Bewusst zurueckhaltend: Besser Urlauben ist kein Affiliate-Blog. Der Knopf
 * steht dort, wo der Text vorher erklaert hat, warum man das Ding braucht —
 * und der Hinweis darunter ist nicht kleingedruckt, sondern lesbar.
 */
.bu-amz {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 18px;
  border: 1.5px solid var(--border, #E5E7EB);
  border-radius: 10px;
  background: #fff;
  color: var(--ink, #243040);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
}
.bu-amz:hover { border-color: var(--blue, #1E5BBF); color: var(--blue, #1E5BBF); }
.bu-amz-hinweis {
  display: block;
  margin-top: 7px;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--light, #8A9099);
  max-width: 52ch;
}

/*
 * Fliesstext-Links im Cookie-Banner.
 *
 * "Datenschutzerklaerung" steht mitten im Satz und war 18 px hoch. Ein
 * 44-px-Knopf ginge hier nicht - es ist ein Wort in einer Zeile. Vertikale
 * Polsterung an einem Inline-Element vergroessert aber die Trefferflaeche,
 * ohne den Zeilenumbruch oder den Zeilenabstand zu veraendern. Genau der
 * Link muss erreichbar sein: er ist die Pflichtangabe im Banner.
 */
@media (max-width: 860px) {
  .cb-text a { padding: 9px 0; }
}