/* ===========================================================================
 * site-enhancements.css — Styles fuer Hamburger-Menu, Suche, Vorlesen, PWA
 * =========================================================================== */

/* ---- Header-Aktionen (Lupe + Burger oben rechts) ---- */
/* Schritt 19: ".topbar { position: relative; }" entfernt - siehe unten. */
.topbar .nav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.topbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
}
.topbar__icon-btn:hover,
.topbar__icon-btn:focus-visible { background: rgba(0, 0, 0, .07); }
.topbar__icon-btn svg { display: block; }

/* ---- Hamburger-Menü ---- */
.topbar__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e7e3ee;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(31, 24, 58, .14);
  padding: .35rem 0;
}
.topbar__menu[hidden] { display: none; }
.topbar__menu a {
  display: block;
  padding: .6rem 1rem;
  color: #2a2342;
  text-decoration: none;
  font-size: .95rem;
}
.topbar__menu a:hover,
.topbar__menu a:focus-visible { background: #f5f2fb; }

/* ---- Such-Panel ---- */
.search-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 60;
  width: min(92vw, 460px);
  background: #fff;
  border: 1px solid #e7e3ee;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(31, 24, 58, .14);
  padding: .75rem;
  margin-top: 2px;
}
.search-panel[hidden] { display: none; }
.search-panel__input {
  width: 100%;
  box-sizing: border-box;
  padding: .6rem .8rem;
  border: 1px solid #d8d2e6;
  border-radius: 8px;
  font-size: 1rem;
}
.search-panel__results { margin-top: .5rem; max-height: 60vh; overflow-y: auto; }
.search-result {
  display: block;
  padding: .55rem .65rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #f1edf7;
}
.search-result:hover,
.search-result:focus-visible { background: #f5f2fb; }
.search-result__title { display: block; font-weight: 600; color: #1f1856; }
.search-result__desc {
  display: block;
  font-size: .85rem;
  color: #6b6480;
  margin-top: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result__type {
  display: inline-block;
  margin-top: .2rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a4cff;
}
.search-panel__empty { padding: .55rem .65rem; color: #6b6480; font-size: .9rem; }

/* ---- Vorlesen (Speech) ---- */
.speech-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  background: #f5f2fb;
  border: 1px solid #e7e3ee;
  border-radius: 12px;
  padding: .5rem .65rem;
  margin: 0 0 1.25rem;
}
.speech-bar__btn {
  border: 0;
  background: #1f1856;
  color: #fff;
  padding: .5rem .9rem;
  border-radius: 8px;
  font-size: .9rem;
  cursor: pointer;
  line-height: 1.2;
}
.speech-bar__btn:hover { background: #2a2342; }
.speech-bar__stop { background: #b4282f; }
.speech-bar__voice { margin-left: auto; font-size: .85rem; color: #2a2342; }
.speech-bar__select {
  padding: .35rem .5rem;
  border: 1px solid #d8d2e6;
  border-radius: 8px;
  font-size: .85rem;
  background: #fff;
}
.speech-bar__btn[hidden] { display: none; }

/* ---- PWA Install-Hinweis ---- */
.pwa-install-hint {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #1f1856;
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(31, 24, 58, .3);
  font-size: .9rem;
}
.pwa-install-hint__btn {
  border: 0;
  background: #8a4cff;
  color: #fff;
  padding: .45rem .8rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
}
.pwa-install-hint__close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .2rem;
}

/* ---- Mobil: Menü + Suche volle Breite ---- */
@media (max-width: 540px) {
  .search-panel { left: 0; width: 100%; border-radius: 0 0 0 0; }
  .topbar__menu { right: 0; min-width: auto; left: auto; }
}

/* ==== Schritt 19: Kopfzeile und Hero ==== */
/* A) Die Kopfzeile klebt wieder oben. In Schritt 18 stand hier
 *    ".topbar { position: relative; }". Da diese Datei als letzte geladen
 *    wird, hat das das "position: sticky" aus 4myvip-reise.css ueberschrieben.
 *    "sticky" bildet selbst einen Bezugsrahmen, deshalb funktionieren das
 *    Hamburger-Menue und das Suchfeld damit unveraendert weiter. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* B) Herobild auf Mobilgeraeten im Querformat statt Hochformat.
 *    Ohne diese Regel gilt "min-height: 470px" - auf einem 390 Pixel
 *    breiten Bildschirm ergibt das ein hochkant stehendes Bild. */
@media (max-width: 800px) {
  .hero {
    min-height: 0;
    /* Die feste Breite ist wichtig: ohne sie leitet der Browser aus
     * "aspect-ratio" und der Mindesthoehe eine zu grosse Breite ab und die
     * Seite laesst sich seitlich verschieben. */
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 62vh;
    background-position: center 35%;
  }
  /* Der untere Abstand haelt den Text ueber dem Buchungsfenster, das rund
   * 28 Pixel in das Herobild hineinragt. */
  .hero .hero-content {
    padding: 20px 0 48px;
  }
  .hero .hero-content h1 {
    max-width: 100%;
    font-size: clamp(1.45rem, 6.2vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  .hero .hero-content .eyebrow {
    font-size: .72rem;
    letter-spacing: .12em;
  }
  .hero .hero-content .subtitle {
    max-width: 100%;
    font-size: clamp(.86rem, 3.1vw, 1rem);
    line-height: 1.42;
  }
}

/* Quer gehaltenes Telefon: noch flacheres Bild, damit Text sichtbar bleibt. */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: 0;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 80vh;
  }
  .hero .hero-content {
    /* Ab 800 Pixel Breite ragt das Buchungsfenster rund 46 Pixel in das
     * Herobild hinein, deshalb hier mehr Abstand als im Hochformat. */
    padding: 14px 0 66px;
  }
  .hero .hero-content h1 {
    max-width: 100%;
    font-size: clamp(1.6rem, 4.4vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  .hero .hero-content .subtitle {
    max-width: 100%;
    font-size: clamp(.88rem, 1.8vw, 1.05rem);
    line-height: 1.4;
  }
}

/* ==== Schritt 21: Trefferzahl und Knopf "Mehr anzeigen" ==== */
.search-panel__count {
  padding: .4rem .65rem .3rem;
  color: #6b6480;
  font-size: .82rem;
  border-bottom: 1px solid #ece8f6;
  margin-bottom: .2rem;
}

.search-panel__more {
  display: block;
  width: calc(100% - 1.3rem);
  margin: .35rem .65rem .5rem;
  padding: .5rem .6rem;
  border: 1px solid #d8d1ec;
  border-radius: 8px;
  background: #f7f5fd;
  color: #1f1856;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}

.search-panel__more:hover,
.search-panel__more:focus-visible {
  background: #efeafb;
  border-color: #bfb4e0;
}

/* ==== Schritt 36: Ortsbezug als erster Menuepunkt ====
   Der Punkt sieht wie die uebrigen Menuepunkte aus. Gab es keine Adresse,
   ist es eine Zeile ohne Zeigefinger und ohne Linkfarbe, damit niemand
   darauf tippt und sich wundert, dass nichts passiert. Die Trennlinie
   darunter setzt den Ortsbezug von den allgemeinen Punkten ab. */
.topbar__menu-ort {
  font-weight: 700;
}

.topbar__menu-ort--nurtext {
  cursor: default;
  color: inherit;
  text-decoration: none;
}