/* Mobile Hover Fix – 17.10.2025 – verhindert dauerhaft grünen Button auf Touch-Geräten */
/* ===== CSS: Eickhoff Ferienwohnung ===== */
:root{
  --green-900:#1f4d37;
  --green-700:#2f6e4f;
  --green-600:#3b7f5c;
  --green-500:#D2D853;
  --brown-600:#7b5f4b;
  --teal-500:#3aa6a1;
  --ink:#222;
  --muted:#5f6b75;
  --bg:#fafaf7;
  --accent-bg:#f5f3ef;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 10px 25px rgba(0,0,0,.07);
  --shadow-sm:0 6px 16px rgba(0,0,0,.06);
  --max:1120px;
}

/* Base */
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
img{max-width:100%;display:block}
a{color:var(--green-700);text-decoration:none}
.container{max-width:var(--max);margin-inline:auto;padding:0 20px}

/* Skiplink */
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:#fff;border:2px solid var(--green-700);border-radius:999px}

/* Buttons */
.btn{display:inline-block;padding:.9rem 1.15rem;border-radius:999px;background:var(--green-700);color:#fff;font-weight:600;box-shadow:var(--shadow-sm);transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);background:var(--green-600)}
.btn:active{transform:translateY(0)}
.btn-outline{background:#fff;color:var(--green-700);border:2px solid var(--green-700)}
/* --- Fix: Mobile "sticky :hover" (iOS/Android) ließ .btn-outline dauerhaft grün werden.
   Wir überschreiben :hover/:active für .btn-outline und neutralisieren Hover auf Touch-Geräten. --- */
.btn-outline:hover,
.btn-outline:active{
  background:#fff !important;
  color:var(--green-700) !important;
  border-color: var(--green-700);
  box-shadow: var(--shadow-sm);
}

/* Auf Touch-Geräten sollen Hover-Styles nicht kleben */
@media (hover: none) and (pointer: coarse){
  .btn:hover{ background: var(--green-700); box-shadow: var(--shadow-sm); transform:none; }
  .btn-outline:hover{ background:#fff !important; }
}


/* Header */
header{
  position:sticky; top:0; left:0; right:0;
  background:#fff;
  border-bottom:1px solid #e6e6e1;
  z-index:50;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:100px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.logo-img{height:75px;width:auto}
nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
nav a{font-weight:600;color:#223;opacity:.95}
nav a:hover{opacity:1}
.lang{font-size:.95rem;color:var(--muted)}
.menu-btn{display:none;border:0;background:transparent}

/* Mobile Navigation */
@media (max-width:980px){
  header .nav{position:relative;height:80px}
  .menu-btn{display:block}
  #main-nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #ecece6;box-shadow:0 12px 24px rgba(0,0,0,.06);display:none}
  #main-nav.open{display:block}
  #main-nav ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:14px 20px}
  #main-nav a{padding:12px 8px;display:block}
}
@media (min-width:981px){ #main-nav{background:transparent;} }

/* Hero */
.hero{position:relative; padding:0;}      /* FIX: kein globaler Section-Padding im Hero */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.45),
    rgba(0,0,0,.3) 40%,
    rgba(0,0,0,.15) 70%,
    rgba(0,0,0,0) 100%);
}
.hero .media{height:min(72vh,760px);background:url('assets/schwimmteich.jpg') center/cover no-repeat;background-attachment:fixed}
.hero .inner{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center;color:#fff;padding:0 20px}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.5px;margin:.2rem 0 .8rem}
.hero p{font-size:clamp(1.1rem,2vw,1.25rem);font-weight:300;opacity:.98;max-width:700px;margin:0 auto 1.4rem}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Highlights */
.highlights{padding:38px 0;background:var(--accent-bg);border-bottom:1px solid #ecece6}
.highlights .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hi-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.hi-card svg{flex:0 0 auto;width:28px;height:28px}
.hi-card h3{margin:0 0 4px;font-size:1.05rem}
.hi-card p{margin:0;color:var(--muted);font-size:.98rem}

/* Sections */
section:not(.hero){padding:80px 0}        /* FIX: nur noch auf Nicht-Hero anwenden */
.section-title{font-size:clamp(1.6rem,2.5vw,2rem);line-height:1.2;margin:0 0 12px}
.section-lead{margin:0 0 26px;color:var(--muted)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.media-box{background:#e8efe9;border-radius:var(--radius);aspect-ratio:16/10;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.media-box::after{content:"Bildplatzhalter";position:absolute;inset:auto auto 12px 12px;color:#fff;background:rgba(47,110,79,.8);padding:4px 10px;border-radius:999px;font-size:.8rem}
.no-badge::after{content:none}

/* Über uns – Bild sauber füllen */
#ueber-uns .media-box::after{content:none}
#ueber-uns .media-box img{width:100%;height:100%;object-fit:cover;display:block}

/* Simple Carousel */
.carousel{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:#000}
.carousel.aspect-16x10{aspect-ratio:16/10}
.carousel-track{display:flex;height:100%;width:100%;transition:transform .4s ease}
.carousel-slide{min-width:100%;height:100%}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(0,0,0,.3);color:#fff;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.carousel-btn:hover{background:rgba(0,0,0,.45)}
.carousel-prev{left:10px}
.carousel-next{right:10px}
.carousel-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px}
.carousel-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.6);border:0}
.carousel-dot[aria-current="true"]{background:#fff}

/* Preise */
.accent-section{background:#f6f7f3;border-top:1px solid #ecece6;border-bottom:1px solid #ecece6}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);border:1px solid #e7ece6}
.card--featured{border:2px solid #cfe3d7}
.price{font-size:1.9rem;font-weight:800;color:var(--green-700)}
.badge{display:inline-block;margin-left:8px;border:1px solid #cfe3d7;color:var(--green-700);padding:.15rem .5rem;border-radius:999px;font-size:.8rem}
.muted{color:var(--muted)}
.text-sm{font-size:1rem}

/* Über uns */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}

/* Kontakt */
#kontakt .contact{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
#kontakt .form{display:grid;grid-template-columns:1fr;gap:14px;height:auto}
#kontakt .form label{display:grid;gap:8px;font-weight:600}
#kontakt .form input,#kontakt .form textarea{width:100%;box-sizing:border-box;border:1px solid #dfe5de;border-radius:12px;padding:14px 16px;font:inherit;background:#fff}
#kontakt .form input{height:48px}
#kontakt .form textarea{min-height:200px;resize:vertical}
#kontakt .form input:focus,#kontakt .form textarea:focus{outline:2px solid transparent;border-color:var(--green-700);box-shadow:0 0 0 4px rgba(47,110,79,.12)}
#kontakt .form .btn{width:fit-content;margin-top:6px}
#kontakt .form-note{font-size:.85rem;color:var(--muted);margin-top:10px;line-height:1.4}
#kontakt .form-note a{color:var(--green-700);text-decoration:underline}
#kontakt .media-box{width:100%;aspect-ratio:16/10;height:auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
#kontakt .media-box iframe{width:100%;height:100%;border:0;display:block}

/* Footer */
footer{padding:36px 0 60px;border-top:1px solid #ecece6;color:#43505a;background:var(--accent-bg)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
.foot h4{margin:.2rem 0 8px}
.subtle{font-size:.92rem;color:var(--muted)}

/* Utilities */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-0{margin-bottom:0}
.center{text-align:center}

/* Responsive */
@media (max-width:980px){
  .split,.about,#kontakt .contact{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .highlights .grid{grid-template-columns:1fr}
  nav{display:none}
  .hero .media{background-attachment:scroll}
  #kontakt .media-box{min-height:300px}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .hero .media{height:60vh}
  .foot{grid-template-columns:1fr}
}

/* === Buttons vereinheitlichen (Anker, Button, Submit) === */
a.btn, button.btn, input[type="submit"].btn { text-decoration: none; }

button.btn, input[type="submit"].btn{
  -webkit-appearance: none;
  appearance: none;
  border: 0;              /* entfernt Browser-Default-Rand */
  cursor: pointer;
  font: inherit;          /* gleiche Schrift wie Links */
  line-height: 1.2;       /* konsistent wie .btn */
}

/* einheitlicher Focus */
.btn:focus-visible{
  outline: 3px solid rgba(47,110,79,.35);
  outline-offset: 2px;
}
/* === Mobile Overflow-Fixes (Ferienwohnung / Über uns / Kontakt) === */

/* 1) Sichere Box-Sizing & kein Horizontal-Scroll */
*,*::before,*::after{ box-sizing: border-box; }
html, body{ overflow-x: hidden; max-width: 100%; }

/* 2) Medien nie breiter als der Viewport */
img, video, iframe{ display:block; max-width:100%; height:auto; }
.media-box, .media-box img{ width:100%; height:auto; }
#kontakt .media-box{ overflow:hidden; }
#kontakt .media-box iframe{ width:100%; height:100%; display:block; }

/* 3) Container-Padding mobil etwas flexibler */
.container{ padding-inline: clamp(16px, 4vw, 20px); }

/* 4) Grids einkolumnig + Items dürfen schrumpfen (wichtiger Fix) */
@media (max-width:980px){
  .split, .about, #kontakt .contact{ grid-template-columns:1fr; }
  .split > *, .about > *, #kontakt .contact > *{ min-width:0; } /* verhindert Überlaufen */
  .carousel{ overflow:hidden; }
}

/* 5) Lange Wörter/Links umbrechen statt überlaufen */
p, li, blockquote{ overflow-wrap: break-word; }

/* 6) Form-Felder nie breiter als der Container */
#kontakt .form input,
#kontakt .form textarea{ max-width:100%; }

/* === Mobile-Rand-Boost für #wohnung & #ueber-uns === */
@media (max-width: 980px){
  /* seitliche Innenabstände erhöhen */
  #wohnung,
  #ueber-uns{
    padding-left: clamp(22px, 6vw, 32px);
    padding-right: clamp(22px, 6vw, 32px);
  }

  /* Inhalte dürfen schrumpfen – verhindert Anstoßen am Rand */
  #wohnung .split > *,
  #ueber-uns .about > *{
    min-width: 0;
  }

  /* Medien wirken „sauberer“ am Rand */
  #wohnung .carousel,
  #ueber-uns .media-box{
    border-radius: 16px;
  }
}
/* === Brand-CTA: Eickhoff Naturgarten === */
.partner-cta{ padding:40px 0; background:linear-gradient(180deg,#f7f7f3,transparent); }
.partner{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  background:#fff; border:1px solid #e7ece6; border-radius:20px; padding:18px 20px;
  box-shadow: var(--shadow-sm); position:relative; overflow:hidden;
}
/* dezente Gradientkante oben */
.partner::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, #D2D853, #2f6e4f);
  opacity:.35;
}
.partner__title{ margin:0 0 6px; font-size:clamp(1.2rem,2.4vw,1.4rem); line-height:1.25; }
.partner__title span{ white-space:nowrap; }
.partner__text{ margin:0; color:var(--muted); }
.partner__logo svg{ display:block; }
.partner__action .btn{ white-space:nowrap; }

/* Mobile: sauber stapeln */
@media (max-width:980px){
  .partner{ grid-template-columns:1fr; text-align:left; gap:14px; }
  .partner__action{ order:3; }
  .partner__logo{ order:1; }
  .partner__content{ order:2; }
}

/* Optional (wenn du es besonders herausheben willst): pulsierender Rand */
@keyframes subtlePulse{0%,100%{opacity:.35}50%{opacity:.6}}
/* .partner::before{ animation:subtlePulse 4s ease-in-out infinite; } */

/* === Hinweisbox im Abschnitt "Garten & Umgebung" === */
.partner-card{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  margin-top:14px; background:#fff; border:1px solid #e7ece6; border-radius:16px;
  padding:14px 16px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.partner-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#D2D853,#2f6e4f); opacity:.35;
}
.partner-card__title{ margin:0 0 4px; font-size:1.05rem; line-height:1.25; }
.partner-card__title span{ white-space:nowrap; }
.partner-card__text{ margin:0; color:var(--muted); }
.partner-card__logo svg{ display:block; }
.partner-card__action .btn{ white-space:nowrap; }

/* Mobile: sauber stapeln */
@media (max-width:980px){
  .partner-card{ grid-template-columns:1fr; text-align:left; gap:10px; }
  .partner-card__action{ order:3; }
  .partner-card__logo{ order:1; }
  .partner-card__content{ order:2; }
}
/* Partner-Box im Abschnitt #garten über volle Breite der Split-Grid */
#garten .split{ align-items:start; }

/* Rechte Spalte „auflösen“, damit Kinder Grid-Items werden */
#garten .split > div:last-child{ display: contents; }

/* Alles aus der rechten Spalte bleibt in Spalte 2 … */
#garten .split > div:last-child > *{ grid-column: 2; }

/* … nur die Partner-Box spannt beide Spalten */
#garten .split > div:last-child > .partner-card{
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 18px;
}

/* Mobile: wieder normal einspaltig stacken */
@media (max-width:980px){
  #garten .split > div:last-child{ display:block; }
  #garten .split > div:last-child > *{ grid-column: auto; }
  #garten .split > div:last-child > .partner-card{ grid-column:auto; }
}
/* === Partner-Box im #garten über volle Breite (Override) === */
#garten .split { align-items: start; }

/* Rechte Spalte „auflösen“, damit ihre Kinder Grid-Items werden */
#garten .split > div:last-child { display: contents; }

/* Standard: Inhalte der rechten Spalte bleiben in Spalte 2 … */
#garten .split > div:last-child > * { grid-column: 2; }

/* … nur die Partner-Box geht über beide Spalten */
#garten .split > div:last-child > .partner-card{
  grid-column: 1 / -1 !important;  /* sichert Override */
  justify-self: stretch;
  width: 100%;
  margin-left: 0;
}

/* Mobil wieder normal einspaltig */
@media (max-width:980px){
  #garten .split > div:last-child{ display:block; }
  #garten .split > div:last-child > *{ grid-column:auto; }
  #garten .split > div:last-child > .partner-card{ grid-column:auto; }
}
/* === Brand-CTA: Eickhoff Naturgarten === */
.partner-cta{ padding:40px 0; background:linear-gradient(180deg,#f7f7f3,transparent); }
.partner{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  background:#fff; border:1px solid #e7ece6; border-radius:20px; padding:18px 20px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.partner::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,#D2D853,#2f6e4f); opacity:.35;
}
.partner__title{ margin:0 0 6px; font-size:clamp(1.2rem,2.4vw,1.4rem); line-height:1.25; }
.partner__title span{ white-space:nowrap; }
.partner__text{ margin:0; color:var(--muted); }
.partner__logo svg{ display:block; }
.partner__action .btn{ white-space:nowrap; }

@media (max-width:980px){
  .partner{ grid-template-columns:1fr; gap:14px; }
}

/* Inline-Variante im #garten: keine Außen-Padding/Background, volle Container-Breite */
.partner-cta--inline{ padding:0; background:transparent; margin-top:22px; }
.partner-cta--inline .partner{ margin:0; }
/* Safety-Reset für frühere Tests */
#garten .split > div:last-child{ display:block; }
#garten .split > div:last-child > *{ grid-column:auto; }

/* Inline-Banner ohne Extra-Hintergrund, mit Abstand nach oben */
.partner-cta--inline{ padding:0; background:transparent; margin-top:22px; }

.form .consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:.5rem 0 1rem;
}
.form .consent input{ margin-top:.2rem; }
.form .consent a{ text-decoration: underline; }

/* Map-Card bündig ohne Innenabstand + saubere Rundung */
.media-box[aria-label="Karte – Anfahrt"] { 
  padding: 0;                 /* nimmt den unteren Padding-Streifen weg */
}
.media-box[aria-label="Karte – Anfahrt"] .map-wrap{
  border-radius: inherit;     /* gleiche Rundung wie die Card */
  overflow: hidden;           /* schneidet alles bündig ab */
  line-height: 0;             /* gegen Baseline-Gap */
}
.media-box[aria-label="Karte – Anfahrt"] .map-wrap iframe{
  display: block;             /* verhindert 1–2px Lücke */
  width: 100%;
  height: 100%;
  border: 0;
}

/* Maps: 1px-Gap am unteren Rand nur auf Desktop eliminieren */
@media (min-width: 768px) {
  .media-box[aria-label^="Karte"] { padding: 0; }               /* sicherheitshalber */
  .media-box[aria-label^="Karte"] .map-wrap { 
    position: relative; 
    overflow: hidden; 
    border-radius: inherit; 
    line-height: 0;
  }
  .media-box[aria-label^="Karte"] .map-wrap iframe {
    position: absolute;
    inset: -1px;                       /* minimal größer als die Box */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    display: block;
    border: 0;
    transform: translateZ(0);          /* render-flicker vorbeugen */
  }
}

/* Karte bündig in der Card – nur Desktop */
@media (min-width: 768px){
  .media-box[aria-label="Karte – Anfahrt"]{ 
    padding: 0 !important;         /* nimmt den Reststreifen weg */
  }
  .media-box[aria-label="Karte – Anfahrt"] .map-wrap{
    border-radius: inherit;
    overflow: hidden;
    line-height: 0;
  }
  .media-box[aria-label="Karte – Anfahrt"] .map-wrap iframe{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }
}