/* ============================================================
   GH Mobile-Optimierung
   Greift via !important auch über Inline-Styles.
   ============================================================ */

/* Desktop-only Zeilenumbrüche – auf Mobil ausgeblendet */
@media (max-width: 768px) {
  br.br-d { display: none !important; }
}

/* Sticky Schließen-Button in Apartment-Modals (mobil) */
@media (max-width: 768px) {
  .apt-modal-close { position: fixed !important; top: 14px !important; right: 14px !important; z-index: 2600 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
}

@media (max-width: 768px) {

  /* --- Mehrspaltige Inline-Raster -> 1 Spalte --- */
  [style*="grid-template-columns:1fr auto 1fr"],
  [style*="grid-template-columns: 1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 36px !important;
  }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1.3fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Footer: zentrieren --- */
  footer [style*="text-align:right"],
  footer [style*="text-align:left"] { text-align: center !important; }
  footer nav,
  footer [style*="align-items:flex-end"] { align-items: center !important; }
  footer img[src*="gh-hauptlogo"] { width: 200px !important; }
  footer [style*="justify-content:space-between"] {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* --- Große Section-Abstände reduzieren --- */
  [style*="padding:110px 48px"] { padding: 64px 20px !important; }
  [style*="padding:120px 48px"] { padding: 108px 20px 56px !important; }
  [style*="padding:130px 48px"] { padding: 112px 20px 52px !important; }
  [style*="padding:90px 48px"]  { padding: 56px 20px !important; }
  [style*="padding:90px 0 32px"],
  [style*="padding:60px 0 32px"] { padding: 48px 0 28px !important; }
  [style*="padding:0 40px"] { padding: 0 22px !important; }
  [style*="padding:0 48px"] { padding: 0 22px !important; }
  [style*="padding:40px"] { padding: 28px !important; }

  /* --- Feste Höhen flexibler --- */
  [style*="height:540px"] { height: 380px !important; }
  [style*="height:460px"] { height: 300px !important; }
  [style*="min-height:480px"] { min-height: 280px !important; }

  /* --- Bilder nie überlaufen --- */
  img { max-width: 100%; }

  /* --- Footer am Handy kürzen: Kontakt zuerst, dann Logo, Navigation raus, enge Abstände --- */
  footer [style*="grid-template-columns:1fr auto 1fr"] { gap: 14px !important; }
  footer [style*="grid-template-columns:1fr auto 1fr"] > [style*="text-align:right"] { display: none !important; }
  footer [style*="margin-bottom:44px"] { margin-bottom: 22px !important; }
}

/* ============================================================
   Burger-Menü für die Hochzeitsseiten
   ============================================================ */
.nav-burger-hz { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
.nav-burger-hz span { display:block; width:26px; height:2px; background:var(--cream); transition:transform .3s, opacity .3s, background .3s; }
.nav-burger-hz.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger-hz.open span:nth-child(2){ opacity:0; }
.nav-burger-hz.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav.nav-scrolled .nav-burger-hz span { background:var(--anthrazit); }
.nav-mobile-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1999; }
.nav-mobile-backdrop.open { display:block; }
.nav-mobile-hz { display:none; position:fixed; top:70px; left:0; right:0; z-index:1000; background-image:url('img/leinenhintergrund.jpg'); background-size:600px auto; background-repeat:repeat; background-color:rgba(240,235,227,0.97); background-blend-mode:lighten; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(61,56,53,.1); flex-direction:column; padding:12px 24px 28px; }
.nav-mobile-hz.open { display:flex; }
.nav-mobile-hz a { font-family:'Outfit',sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--anthrazit); text-decoration:none; padding:16px 0; border-bottom:1px solid rgba(61,56,53,.08); }
.nav-mobile-hz a.mob-cta { color:#15110f; font-weight:700; border-bottom:none; }
.nav-mobile-hz a.mob-switch { border-bottom:none; margin-top:6px; font-weight:600; }
.nav-mobile-close { display:none; }
.nav-mobile-backdrop { display:none !important; }

@media (max-width: 1240px) {
  .nav .nav-center { display:none !important; }
  .nav .nav-toggle { display:none !important; }
  .nav-burger-hz { display:flex !important; }
  .nav-burger { display:flex !important; }
}

/* ============================================================
   Urlaub-Mobilmenü: Navi-Leiste bei offenem Menü Leinen statt transparent
   ============================================================ */
@media (max-width: 1240px) {
  .nav:has(.nav-burger.open) {
    background-image: url('img/leinenhintergrund.jpg') !important;
    background-size: 600px auto !important;
    background-repeat: repeat !important;
    background-color: rgba(240,235,227,0.97) !important;
    background-blend-mode: lighten !important;
    border-bottom-color: rgba(61,56,53,0.1) !important;
  }
  .nav:has(.nav-burger.open) .nav-logo svg { color: var(--anthrazit) !important; fill: var(--anthrazit) !important; }
  .nav:has(.nav-burger.open) .nav-burger span { background: var(--anthrazit) !important; }
}

/* ─── Hochzeits-Burgermenü: Hover wie Urlaub (in Gold) + DE/EN ─── */
.nav-mobile-hz a { transition: color .25s; }
.nav-mobile-hz a:hover, .nav-mobile-hz a:active { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.nav-mobile-hz a.mob-switch { color: #4A5B42; }            /* Urlaub-Welt = grün */
.nav-mobile-hz a.mob-switch:hover, .nav-mobile-hz a.mob-switch:active { color: #3a4834; text-decoration: underline; text-underline-offset: 4px; }
.nav-mobile-hz .nav-mobile-lang { display: flex; align-items: center; gap: 12px; padding-top: 18px; }
.nav-mobile-hz .nav-mobile-lang button { background: none; border: none; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(61,56,53,0.5); padding: 4px 0; transition: color .25s; }
.nav-mobile-hz .nav-mobile-lang button:hover { color: var(--gold); }
.nav-mobile-hz .nav-mobile-lang button.active { color: var(--anthrazit); font-weight: 600; }
.nav-mobile-hz .nav-mobile-lang span { color: rgba(61,56,53,0.3); }

/* Hochzeits-Navileiste bei offenem Menü auf Leinen (wie Urlaub) */
@media (max-width: 1240px) {
  .nav:has(.nav-burger-hz.open) {
    background-image: url('img/leinenhintergrund.jpg') !important;
    background-size: 600px auto !important;
    background-repeat: repeat !important;
    background-color: rgba(240,235,227,0.97) !important;
    background-blend-mode: lighten !important;
    border-bottom-color: rgba(61,56,53,0.1) !important;
  }
  .nav:has(.nav-burger-hz.open) .nav-logo svg { fill: var(--anthrazit) !important; color: var(--anthrazit) !important; }
  .nav:has(.nav-burger-hz.open) .nav-burger-hz span { background: var(--anthrazit) !important; }
}

/* Hochzeits-Dropdown-Links schwarz + fett */
.nav-mobile-hz a { color:#15110f; font-weight:600; }

/* ============================================================
   Urlaub-Appartements am Handy: Slider + Frühstück ohne Foto
   ============================================================ */
@media (max-width: 768px) {
  #appartements .apt-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    margin-bottom: 8px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  #appartements .apt-grid > .apt-card {
    flex: 0 0 84%;
    min-width: 84%;
    scroll-snap-align: center;
  }
  #appartements .apt-grid { scrollbar-width: none; }
  #appartements .apt-grid::-webkit-scrollbar { display: none; }

  /* Frühstück-Box ohne Foto */
  .apt-breakfast .apt-img { display: none !important; }
  .apt-breakfast .apt-info { padding: 28px !important; }
}

/* Slider-Punkte (statt Scrollbar) */
.apt-dots { display: none; }
@media (max-width: 768px) {
  .apt-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .apt-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(240,235,227,0.35); cursor: pointer; transition: width .3s, background .3s, border-radius .3s; }
  .apt-dots span.active { width: 22px; border-radius: 4px; background: var(--cream); }
}

/* ============================================================
   Urlaub – weitere Mobil-Anpassungen
   ============================================================ */
@media (max-width: 768px) {
  /* Hero-CTA weiter nach unten */
  .banner .banner-content .btn { margin-top: 32px; }
  /* Foto im "Das Grafhaidergut"-Abschnitt ausblenden */
  .gh-photo { display: none !important; }
  /* Leinen-Hintergründe wie die Navigation (gleiche Transparenz) */
  [style*="background-color:rgba(240,235,227,0.88)"] { background-color: rgba(240,235,227,0.97) !important; }
}

/* ============================================================
   Über-uns (Urlaub) – Mobil: Bild zuerst, größeres Bild, Nachhaltigkeit-Slider
   ============================================================ */
@media (max-width: 768px) {
  /* Leinen-Boxen (0.95) wie Navigation */
  [style*="background-color:rgba(240,235,227,0.95)"] { background-color: rgba(240,235,227,0.97) !important; }

  /* Nachhaltigkeit: eine Box sichtbar, horizontal wischbar (Swiper) */
  .nh-slider {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    scrollbar-width: none;
  }
  .nh-slider::-webkit-scrollbar { display: none; }
  .nh-slider > div { flex: 0 0 86%; min-width: 86%; scroll-snap-align: center; }
}

/* Nachhaltigkeit-Swiper-Punkte */
.nh-dots { display: none; }
@media (max-width: 768px) {
  .nh-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
  .nh-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(240,235,227,0.45); cursor: pointer; transition: width .3s, background .3s, border-radius .3s; }
  .nh-dots span.active { width: 22px; border-radius: 4px; background: var(--cream); }
}

/* Nachhaltigkeit HZ-Über-uns: Swiper-Punkte auf hellem Hintergrund (Gold) */
.nh-dots-hz { display: none; }
@media (max-width: 768px) {
  .nh-dots-hz { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
  .nh-dots-hz span { width: 8px; height: 8px; border-radius: 50%; background: rgba(196,162,101,0.35); cursor: pointer; transition: width .3s, background .3s, border-radius .3s; }
  .nh-dots-hz span.active { width: 22px; border-radius: 4px; background: var(--gold); }
}

/* ============================================================
   Hochzeitsseite – Mobil
   ============================================================ */
@media (max-width: 768px) {
  /* Der Ort: Text zuerst, dann Foto */
  #der-ort .ort-text { order: -1; }
  /* Fotogalerie: nur ein Foto statt zwei */
  .gal-pair > div:nth-child(2) { display: none !important; }
  /* Catering: Foto entfernen */
  .cat-photo { display: none !important; }
  /* Euer Tag: Desktop-Timeline aus, Mobil-Slider an */
  #euer-tag .tag-split { display: none !important; }
}

/* Generische Slider + Punkte */
@media (max-width: 768px) {
  .gh-slider { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; scrollbar-width: none; padding-bottom: 4px; }
  .gh-slider::-webkit-scrollbar { display: none; }
  .gh-slider > * { flex: 0 0 84%; min-width: 84%; scroll-snap-align: center; }
}
.gh-dots { display: none; }
@media (max-width: 768px) {
  .gh-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .gh-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(196,162,101,0.35); cursor: pointer; transition: width .3s, background .3s, border-radius .3s; }
  .gh-dots span.active { width: 22px; border-radius: 4px; background: var(--gold); }
}

/* Mobile-Timeline-Karten (Euer Tag) */
.tl-mslider { display: none; }
@media (max-width: 768px) {
  .tl-mslider { display: flex !important; margin-top: 8px; }
  .tl-mcard { background: rgba(255,255,255,0.04); border: 1px solid rgba(196,162,101,0.22); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
  .tl-mphoto { height: 230px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.05); }
  .tl-mbody { padding: 24px; }
  .tl-mnum { font-family: 'Fraunces', serif; color: var(--gold); font-size: 14px; margin-bottom: 6px; }
  .tl-mbody h4 { font-family: 'Fraunces', serif; color: var(--cream); font-size: 22px; font-weight: 400; margin-bottom: 10px; }
  .tl-mbody p { color: rgba(240,235,227,0.7); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
}

/* ============================================================
   Hochzeitsseite – Mobil (Teil 2)
   ============================================================ */
/* Voll-Breite Fotos (Brautpaar / Andreas & Katrin) */
@media (max-width: 768px) {
  .m-bleed { width: 100vw; margin-left: calc(50% - 50vw); height: auto !important; border-radius: 0 !important; }
  .m-bleed img { width: 100%; height: auto !important; min-height: 0 !important; border-radius: 0 !important; display: block; }
}

/* Reihenfolge: Fotoslider direkt nach "Euer Tag" */
.m-reorder { display: contents; }
@media (max-width: 768px) {
  .m-reorder { display: flex; flex-direction: column; }
  .m-reorder #euer-tag { order: 1; }
  .m-reorder #trauplaetze { order: 2; }
  .m-reorder > section:not([id]) { order: 3; }   /* Fotogalerie nach Trauplätze */
  .m-reorder #catering { order: 4; }
}

/* Stadelapartment nur im Slider (mobil); Gartenchalet bleibt */
.m-only { display: none; }
@media (max-width: 768px) {
  .m-only { display: block !important; }
  #übernachten .stay-grid > div:nth-child(2) { display: none !important; }
}

/* Frühstück-Box wie auf der Urlaubsseite */
@media (max-width: 768px) {
  .m-fruehstueck {
    background-image: url('img/leinenhintergrund.jpg') !important;
    background-size: 600px auto !important; background-repeat: repeat !important;
    background-color: rgba(240,235,227,0.97) !important; background-blend-mode: lighten !important;
    border-left: none !important; border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.07) !important; padding: 28px !important;
  }
}

/* ============================================================
   Hochzeitsseite – Mobil (Teil 3)
   ============================================================ */
@media (max-width: 768px) {
  /* Erstes Foto (Brautpaar nach "Für euch zwei") am Handy entfernen */
  #der-ort .ort-image { display: none !important; }
  /* "Euer Tag"-Fotos: Gesichter sichtbar (oberer Bildbereich) */
  .tl-mphoto { background-position: center 22% !important; }
  /* Kirchlich-Box im Fließtext ausblenden (steckt jetzt im Slider) */
  #trauplaetze .kirchlich-note { display: none !important; }
}

/* Horizontalen Überlauf verhindern (z. B. durch Vollbreite-Fotos) */
html, body { overflow-x: clip; max-width: 100%; }

/* Startseite: Kontakt Hochzeiten am Handy unter Kontakt Urlaub zeigen (Logo zuletzt) */
@media (max-width: 768px) {
  footer [style*="grid-template-columns:1fr auto 1fr"].idx-contacts > [style*="text-align:right"] { display: block !important; order: 3; }
  footer .idx-contacts > [style*="text-align:left"] { order: 1; }
  footer .idx-contacts > [style*="text-align:center"] { order: 2; }
}

/* Über-uns: Abschnitte stapeln sobald einspaltig (≤900px) – immer Bild zuerst, dann Text */
@media (max-width: 900px) {
  .exp-row { height: auto !important; min-height: 0 !important; }
  .exp-row .exp-img { order: -1; height: 460px; }
  .exp-row .exp-img img { min-height: 0 !important; height: 100% !important; }
  .exp-row:has(img[src*="hof-uebersicht"]) .exp-img { height: auto !important; }
  .exp-row .exp-img img[src*="hof-uebersicht"] { object-fit: contain !important; height: auto !important; }
  /* Hunde-Foto: Ausschnitt so, dass beide Hunde (Aura & Cuna) im Bild sind */
  .exp-row .exp-img img[src*="neu-tiere"] { object-position: center center !important; }
}

/* ============================================================
   Hochzeitsseite – Mobile-Feinschliff Sept.
   ============================================================ */
@media (max-width: 768px) {
  /* Pill-Reihen (Exklusiv/Alleinlage …, 140+ Hochzeiten …) nebeneinander wischbar.
     Eltern-Container dürfen sich nicht breit ziehen lassen (min-width:0), sonst
     wird die Reihe abgeschnitten statt zu scrollen. */
  .ort-text, .gastgeber-text { min-width: 0; }
  .hz-pill-row {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .hz-pill-row::-webkit-scrollbar { display: none; }
  .hz-pill-row > * { flex: 0 0 auto; white-space: nowrap; }

  /* Auszeichnungs-Logos nebeneinander wischbar */
  .hz-logo-row {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 32px !important;
    margin-top: 48px !important;
  }
  .hz-logo-row::-webkit-scrollbar { display: none; }
  .hz-logo-row > img { flex: 0 0 auto; }
  /* Reihenfolge auf Mobil: … · Hochzeiterei · Urlaub am Bauernhof */
  .hz-logo-row img[alt*="hochzeiterei"] { order: 2; }
  .hz-logo-row img[alt*="Bauernhof"] { order: 3; }

  /* CTA-Buttons "Hochzeitsmappe sichern" auf allen Seiten immer in einer Zeile */
  .cta-btn { white-space: nowrap; padding: 16px 28px; letter-spacing: 1.5px; font-size: 11px; }
  .btn-gold, .form-submit { white-space: nowrap; }
}

/* Hochzeits-Konfigurator: Auswahlkarten auf Handy + Tablet immer untereinander */
@media (max-width: 900px) {
  .config-grid { grid-template-columns: 1fr !important; }
}

/* Trauplätze-Boxen ohne Schatten (mobil) */
@media (max-width: 768px) {
  .venue-card { box-shadow: none !important; }
}

/* Gastgeber-Baustein: Overflow ausschließen (Handy + Tablet) */
@media (max-width: 900px) {
  .gastgeber-inner, .gastgeber-text, .gastgeber-photos { min-width: 0; max-width: 100%; }
  .gastgeber-text > * { max-width: 100%; }
}

/* ============================================================
   Mobile-Feinschliff Sept. – Startseite + Urlaub
   ============================================================ */

/* Startseite: Hero-Eyebrow "Urlaub & Hochzeiten" 15 % kleiner */
@media (max-width: 768px) {
  .lp-hero-eyebrow { font-size: 14px !important; letter-spacing: 4px !important; }
}

/* Urlaub – Zielgruppen-Tabs nebeneinander, horizontal wischbar */
@media (max-width: 768px) {
  .aud-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 28px 0 32px;
    padding-bottom: 4px;
  }
  .aud-tabs::-webkit-scrollbar { display: none; }
  .aud-tab { flex: 0 0 auto; white-space: nowrap; }
}

/* Urlaub – "Urlaubszeit am Hof": eine Karte, wischen, Punkte
   (nutzt .gh-slider/.gh-dots; grüne Dots passend zur Urlaubswelt) */
@media (max-width: 768px) {
  #am-hof .grid-4.gh-slider > .img-card { flex: 0 0 86%; min-width: 86%; }
  #am-hof .gh-dots span { background: rgba(74,91,66,0.3); }
  #am-hof .gh-dots span.active { background: var(--green); }
}

/* Urlaub – Bewertungen: Desktop = TrustYou-Liste, Mobil = eigener Slider */
.rev-mobile { display: none; }
.rev-card {
  background: #F0EBE3; border: 1px solid rgba(61,56,53,0.08);
  border-radius: 16px; box-shadow: 0 6px 24px rgba(61,56,53,0.10);
  padding: 30px 26px; text-align: left; display: flex; flex-direction: column;
}
.rev-stars { color: #C4A265; font-size: 15px; letter-spacing: 3px; margin-bottom: 14px; }
.rev-text { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--charcoal-light); margin: 0 0 18px; }
.rev-name { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 400; color: var(--anthrazit); }
.rev-sub { font-size: 12px; font-weight: 300; color: var(--mokka); margin-top: 3px; }
.rev-source { font-size: 11px; font-weight: 300; color: var(--mokka); text-align: center; margin-top: 16px; }
.rev-source a { color: var(--green); }
@media (max-width: 768px) {
  .rev-desktop { display: none; }
  .rev-mobile { display: block; margin-top: 36px; }
  #revDots span { background: rgba(74,91,66,0.3); }
  #revDots span.active { background: var(--green); }
}