/* Minimal, eigenständiges Styling (ohne Framework) */
:root{
  --bg:#ffffff;
  --muted:#f6f7fb;
  --text:#0f172a;
  --sub:#475569;
  --border:#e2e8f0;
  --brand:#1d4ed8;
  --brand2:#0ea5e9;
  --shadow: 0 10px 25px rgba(2,6,23,.08);
  --radius: 16px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* same blue like "Angebote finden" button */
  --brand-blue:#0078d7;
  --brand-blue-hover:#0066b6;

  /* lighter yellow border for search box */
  --search-border:#ffe082;

  /* IMPORTANT: falls JS/alt-Fallback mal --topbar-height setzt -> Standard 0 */
  --topbar-height: 0px;
}
*{box-sizing:border-box}

/* ===== FIX: großer Leerraum oberhalb Logo (Mobile) verhindern ===== */
html, body{
  margin:0 !important;
  padding:0 !important;
  height:100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  padding-top:0 !important; /* kill any inherited padding-top */
}

/* falls irgendwo main/hero oben Abstand bekommen */
main, .hero{
  margin-top:0 !important;
  padding-top:0 !important;
}

a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 18px}

/* =========================================================
   Sticky Header (Logo + Menü) inkl. Mobile / iOS Fallback
   ========================================================= */

/* Standard: sticky (funktioniert in modernen Browsern inkl. Mobile) */
.topbar{
  position:-webkit-sticky; /* iOS Safari */
  position:sticky;
  top:0;
  z-index:9999;
  background:#fff;
  border-bottom:1px solid var(--border);
  width:100%;
  /* Stabilität: kein "wackeln" durch Subpixel */
  transform: translateZ(0);
  will-change: transform;
}

/* etwas kompakter oben/unten, hilft ebenfalls gegen "Leerraum" */
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0; /* war 14px */
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  line-height:0;              /* FIX: inline-gap/line-height entfernen */
}
.brand img{
  display:block;              /* FIX: verhindert baseline-gap */
  height:auto;
  max-width:100%;
}

.topbar__right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end
}
.topbar__hint{font-size:12px;color:var(--sub)}
.topbar__phone{font-weight:700;text-decoration:none}

/* NUR wenn sticky NICHT unterstützt wird -> fixed + body padding */
@supports not (position: sticky){
  .topbar{
    position:fixed;
    left:0;
    right:0;
    top:0;
  }
  body{
    padding-top: var(--topbar-height, 140px) !important;
  }
}

/* Wenn sticky unterstützt wird: niemals body padding-top setzen */
@supports (position: sticky){
  body{ padding-top:0 !important; }
}

/* ===== NAV (blue background + white bold links + hover) ===== */
.nav{
  border-top:1px solid var(--border);
  background: var(--brand-blue);
}
.nav__inner{display:flex;gap:14px;flex-wrap:wrap;padding:10px 0}
.nav__item{
  font-size:14px;
  color:#fff;
  font-weight:800;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  transition: background-color .2s ease, transform .05s ease, opacity .2s ease;
}
.nav__item:hover,
.nav__item:focus-visible{
  background: rgba(255,255,255,.18);
}
.nav__item:active{
  transform: translateY(1px);
}

/* ===== HERO: background.jpg only behind hero, NOT behind search box ===== */
.hero{
  position: relative;
  overflow: hidden;
  border-bottom:3px solid var(--border);
  background: none !important; /* IMPORTANT: overrides old gradient */
}

/* background image (background.jpg is in the SAME folder as this CSS: /assets/) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("background.jpg") center/cover no-repeat;
  z-index: 0;
}

/* overlay (weniger stark abgeschwächt -> Bild stärker sichtbar) */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.22);
  z-index: 1;
}

/* content above background */
.hero__inner{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns:.85fr 1.75fr;
  gap:22px;
  padding:34px 0;
}

.hero h1{margin:0 0 10px;font-size:34px;line-height:1.12}
.lead{margin:0 0 14px;color:var(--sub);font-size:16px;line-height:1.55}

.bullets{margin:0;padding-left:18px;color:var(--sub)}
.bullets li{margin:6px 0}

/* search card must be above background and solid */
.card.search{
  background:#fff;
  position: relative;
  z-index: 3;
}

/* Mobile: NO hero background image */
@media (max-width: 640px){
  .hero{
    background:#fff !important;
  }
  .hero::before,
  .hero::after{
    content:none !important;
  }
}

/* ===== cards / general layout ===== */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 10px}
.card__title{font-weight:800}
.link{border:0;background:transparent;color:var(--brand);cursor:pointer;padding:6px 8px;border-radius:10px}
.link:hover{background:var(--muted)}

.search{padding-bottom:14px}
.search__form{padding:0 16px 16px}
.grid{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.grid--2{grid-template-columns: 1fr 1fr}
.field{display:block}
.field__label{display:block;font-size:12px;color:var(--sub);margin:2px 0 6px}
.field input,.field select{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.field input:focus,.field select:focus{border-color: rgba(29,78,216,.6);box-shadow:0 0 0 4px rgba(29,78,216,.12)}

.travellers{
  display:grid;
  grid-template-columns: 42px 1fr 42px 1px 42px 1fr 42px;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.travellers__divider{height:34px;background:var(--border)}
.step{
  width:42px;height:42px;border-radius:12px;border:1px solid var(--border);
  background:var(--muted);cursor:pointer;font-size:18px;line-height:1
}
.step:hover{filter:brightness(.98)}
.travellers__stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.travellers__num{font-weight:800}
.travellers__label{font-size:12px;color:var(--sub)}

.actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary:hover{filter:brightness(.98)}
.btn--ghost{background:#fff}
.note{font-size:13px;color:var(--sub);min-height:18px}

.quick{margin-top:14px;border-top:1px dashed var(--border);padding-top:12px}
.quick__title{font-size:12px;color:var(--sub);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--border);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
}
.chip:hover{background:var(--muted)}

.section{padding:40px 0}
.section--muted{background:var(--muted);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section h2{margin:0 0 14px;font-size:24px}
.cols{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:16px}
.col{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.col h3{margin:0 0 10px}
.col p{margin:0;color:var(--sub);line-height:1.6}

.rating{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.rating__score{font-size:40px;font-weight:900}
.rating__stars{font-size:18px}
.rating__text{color:var(--sub);line-height:1.45}

.contact{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:12px}
.contact__box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.contact__title{font-size:12px;color:var(--sub);margin-bottom:8px}
.contact__value{text-decoration:none;font-weight:800}

/* ===== Footer ===== */
.footer{padding:24px 0;border-top:1px solid var(--border);background:#fff}
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer__links{display:flex;gap:12px;flex-wrap:wrap}
.footer__links a{color:var(--sub);text-decoration:none}
.footer__links a:hover{color:var(--text)}
.small{font-size:12px;color:var(--sub);margin-top:10px;max-width:420px}

/* Footer-Logo generell responsive */
.footer__brand img{
  max-width:100%;
  height:auto;
  display:block;
}

.multi{position:relative}
.multi__btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;
  cursor:pointer;
}
.multi__panel{
  display:none;
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);
  padding:10px;
  max-height:220px;
  overflow:auto;
  z-index:20;
}
.multi.is-open .multi__panel{display:block}
.check{display:flex;gap:10px;align-items:center;padding:8px 8px;border-radius:10px;cursor:pointer}
.check:hover{background:var(--muted)}
.check input{transform:scale(1.1)}

.suggest{
  display:none;
  position:absolute;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);
  margin-top:6px;
  padding:6px;
  max-height:220px;
  overflow:auto;
  z-index:20;
}
.field{position:relative}
.suggest.is-open{display:block}
.suggest__item{
  width:100%;
  text-align:left;
  border:0;background:transparent;
  padding:10px;border-radius:10px;
  cursor:pointer;
  color:var(--text);
}
.suggest__item:hover{background:var(--muted)}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px){
  .hero__inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .topbar__right{justify-content:flex-start}
}

/* =========================================================
   MOBILE: Suchmaske DIREKT nach Menü + Header stabil
   + Footer-Logo zentriert & begrenzt
   ========================================================= */
@media (max-width: 640px){

  /* 0) Mobile: sicherstellen kein "oben Platz" */
  body{ padding-top:0 !important; }
  .topbar{ margin-top:0 !important; }

  /* 1) Header stabiler (weniger Layout-Sprünge durch Wrap) */
  .topbar__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0; /* nochmal etwas kompakter */
  }
  .topbar__right{
    width:100%;
    justify-content:flex-start;
  }
  .nav__inner{
    gap:10px;
  }
  .nav__item{
    padding:10px 12px;
  }

  /* 2) HERO: Reihenfolge -> erst Suchmaske, dann Text */
  .hero__inner{
    display:flex;              /* Grid auf Mobile aus */
    flex-direction: column;
    gap: 14px;
    padding: 18px 0;
  }
  .card.search{ order: 1; }
  .hero__copy{ order: 2; }

  /* 3) Typo etwas kompakter */
  .hero h1{
    font-size: 26px;
    line-height: 1.15;
  }

  /* 4) Footer-Logo nur unten: zentrieren + Breite begrenzen */
  .footer__brand{
    width:100%;
    display:flex;
    justify-content:center;
  }
  .footer__brand img{
    width:100%;
    max-width:320px; /* ggf. 280px wenn noch zu breit */
    height:auto;
  }
}

/* --- search-box helpers --- */
.search-box .form-control{
  width:100%;
  padding: 12px 14px;
  border: 2px solid rgba(15, 23, 42, .18);
  background: #fff;
  color: #0f172a;
  font: inherit;
}
.search-box .form-control:focus{
  outline: none;
  border-color: rgba(37, 99, 235, .7);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.search-box label{
  display:block;
  margin-bottom: 8px;
  color:#0f172a;
}
.search-box select.form-control{
  appearance: auto;
}
.card__subtitle{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(15, 23, 42, .7);
}
#kinderAlterContainer label{
  display:block;
  margin-top: 10px;
  margin-bottom: 6px;
}

/* ===== Search-box yellow border (lighter) ===== */
.search-box{
  border: 4px solid var(--search-border);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

/* ===== "Angebote finden" hover effect (submit button in search-box) ===== */
.search-box button[type=submit]{
  background: var(--brand-blue) !important;
  color:#fff !important;
  font-weight:800;
  border: 2px solid transparent; /* FIX: instead of "border:2" */
  cursor:pointer;
  transition: background-color .2s ease, transform .05s ease, box-shadow .2s ease;
}
.search-box button[type=submit]:hover,
.search-box button[type=submit]:focus-visible{
  background: var(--brand-blue-hover) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.search-box button[type=submit]:active{
  transform: translateY(1px);
  box-shadow:none;
}

/* --- Button animation: ">>" wiggle --- */
.search-box button[type=submit]{
  position: relative;
}
.search-box button[type=submit] .btn-arrows{
  display:inline-block;
  margin-right: 8px;
  font-weight: 900;
  animation: arrows-wiggle 1s ease-in-out infinite;
}
@keyframes arrows-wiggle{
  0%, 100% { transform: translateX(0); opacity: .95; }
  50%      { transform: translateX(8px); opacity: 1; }
}
/* Optional: bei Hover etwas schneller */
.search-box button[type=submit]:hover .btn-arrows{
  animation-duration: .6s;
}
/* Optional: Nutzer mit "Reduce Motion" respektieren */
@media (prefers-reduced-motion: reduce){
  .search-box button[type=submit] .btn-arrows{
    animation: none;
  }
}