:root{--forest:#173b3a;--forest2:#244b48;--sage:#778b7d;--cream:#f7f2e9;--paper:#fffdfa;--gold:#d29a4a;--night:#071a27;--ink:#243230;--line:#d8d1c5;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif;--shadow:0 18px 55px rgba(22,59,58,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.7}img{max-width:100%;display:block}a{color:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:20px;top:20px;z-index:999;background:white;padding:12px}
header{position:fixed;inset:0 0 auto;z-index:50;transition:.35s;background:linear-gradient(180deg,rgba(5,23,31,.68),transparent)}header.scrolled{background:rgba(255,253,250,.95);box-shadow:0 8px 30px rgba(0,0,0,.08);backdrop-filter:blur(12px)}.nav{height:80px;display:flex;align-items:center;justify-content:space-between}.brand img{width:220px;filter:brightness(0) invert(1)}header.scrolled .brand img{filter:none}.menu{display:flex;gap:20px;align-items:center}.menu a{text-decoration:none;color:white;font-size:.9rem}.menu .pill{border:1px solid rgba(255,255,255,.65);padding:10px 16px;border-radius:999px}header.scrolled .menu a{color:var(--forest)}header.scrolled .menu .pill{border-color:var(--forest)}.hamb{display:none;background:none;border:0;color:white;font-size:1.5rem}header.scrolled .hamb{color:var(--forest)}
.hero{min-height:100svh;position:relative;display:grid;align-items:end;color:white;background:url('../images/hero-house-20260817-v2.webp') center/cover no-repeat}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,20,24,.15),rgba(5,20,24,.68))}.hero-copy{position:relative;z-index:1;padding:0 0 10vh;width:min(1180px,calc(100% - 40px));margin:auto}.eyebrow{text-transform:uppercase;letter-spacing:.23em;font-weight:700;font-size:.76rem}.hero h1,.display{font-family:var(--serif);font-weight:400}.hero h1{font-size:clamp(4rem,10vw,8.3rem);line-height:.88;margin:.16em 0}.hero p{font-size:clamp(1.08rem,2vw,1.35rem);max-width:650px}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.btn{display:inline-flex;justify-content:center;align-items:center;padding:13px 21px;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid transparent;cursor:pointer}.btn-gold{background:var(--gold);color:#162421}.btn-light{border-color:rgba(255,255,255,.75);color:white;background:rgba(255,255,255,.07)}
section{padding:105px 0}.display{font-size:clamp(2.5rem,5.2vw,5rem);line-height:1.02;color:var(--forest);margin:.15em 0}.lead{font-size:1.18rem;color:#52615d}.intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.full-photo{border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}.full-photo img{width:100%;height:auto}.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}.fact{padding-top:14px;border-top:1px solid var(--line)}.fact strong{display:block;font-family:var(--serif);font-size:1.55rem;color:var(--forest)}
.story-block{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin:70px 0}.story-block.reverse .story-text{order:2}.story-block.reverse .story-images{order:1}.story-text{padding:60px;background:var(--cream);border-radius:24px;display:flex;flex-direction:column;justify-content:center}.story-text .num{font:400 3.8rem var(--serif);color:rgba(210,154,74,.5)}.story-text h3{font:400 clamp(2.2rem,4.5vw,4rem)/1.03 var(--serif);color:var(--forest);margin:.1em 0 .35em}.story-images{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}.story-images img{width:100%;height:520px;object-fit:cover;border-radius:22px;box-shadow:var(--shadow)}.story-images img:last-child{height:430px;align-self:end}
.panorama{min-height:78vh;background:url('../images/wintergarden-panorama.webp') center/cover fixed;position:relative;display:grid;place-items:center;text-align:center;color:white}.panorama:before,.sunset:before{content:"";position:absolute;inset:0;background:rgba(5,26,31,.42)}.panorama>div,.sunset>div{position:relative;z-index:1;max-width:850px;padding:25px}.panorama h2,.sunset h2{font:400 clamp(3rem,7vw,6.4rem)/.96 var(--serif);margin:0}
.pool-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}.pool-grid img{width:100%;height:650px;object-fit:cover;border-radius:24px}.pool-side{display:grid;gap:16px}.pool-side img{height:317px}
.sunset{min-height:92vh;background:url('../images/sunset-pool-20260817-v2.webp') center/cover no-repeat;position:relative;display:grid;place-items:center;color:white;text-align:center}.sunset:before{background:linear-gradient(180deg,rgba(5,18,29,.15),rgba(5,18,29,.58))}
.night{background:var(--night);color:#eaf0ef}.night .display{color:#fff}.night .lead{color:#b6c7c5}.night-gallery{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.night-gallery img{width:100%;height:620px;object-fit:cover;border-radius:24px}.night-stack{display:grid;gap:16px}.night-stack img{height:302px}
.amenity-grid{columns:3;column-gap:34px}.amenity{break-inside:avoid;border-bottom:1px solid var(--line);padding:10px 0}
.pricing{background:var(--cream)}.price-layout{display:grid;grid-template-columns:1fr .75fr;gap:35px}.price-table{width:100%;border-collapse:collapse;background:white;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.price-table th,.price-table td{padding:20px;border-bottom:1px solid #eee;text-align:left}.price-table th{background:var(--forest);color:white}.price-table td:last-child{text-align:right;font-weight:800}.included{background:var(--forest);color:white;padding:30px;border-radius:20px}.included h3{font:400 2rem var(--serif);margin-top:0}.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.location{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.distances{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.distances div{padding:18px;border:1px solid var(--line);border-radius:15px;background:white}.distances strong{display:block;color:var(--forest)}.mapbox{min-height:470px;border-radius:24px;background:linear-gradient(135deg,#dce7e2,#f0e6d6);display:grid;place-items:center;text-align:center;padding:35px}
.calendar-shell{padding:10px;background:white;border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.calendar-shell iframe{display:block;width:100%;height:680px;border:0}.calendar-note{text-align:center;color:#61706c}
.hosts{background:var(--cream)}.host-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.host-photo{border-radius:24px;overflow:hidden;box-shadow:var(--shadow);height:520px}.host-photo img{width:100%;height:100%;object-fit:cover;object-position:24% center}
.faq details{border-bottom:1px solid var(--line);padding:17px 0}.faq summary{cursor:pointer;font-weight:800;color:var(--forest)}
.contact{background:#e9e1d3}.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px}.form-card{background:white;padding:30px;border-radius:24px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}label{font-weight:700;color:var(--forest)}input,select,textarea{padding:14px;border:1px solid #c8cec9;border-radius:12px;font:inherit;background:white}textarea{min-height:130px}.small{font-size:.86rem;color:#65716e}
footer{background:#0c2e2e;color:#dce6e2;padding:55px 0 25px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:30px}footer a{color:white}.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:20px;font-size:.85rem}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:100;display:none;place-items:center;padding:20px}.lightbox.open{display:grid}.lightbox img{max-height:90vh;max-width:95vw}.lightbox button{position:absolute;right:25px;top:20px;font-size:2rem;color:white;background:none;border:0}.zoom{cursor:zoom-in}
.cookie{position:fixed;z-index:90;left:20px;right:20px;bottom:20px;max-width:720px;margin:auto;background:white;border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.28);padding:20px;display:none}.cookie.show{display:block}.reveal{opacity:0;transform:translateY(24px);transition:.8s}.reveal.show{opacity:1;transform:none}
@media(max-width:900px){.hamb{display:block}.menu{display:none;position:absolute;top:74px;left:20px;right:20px;background:white;padding:20px;border-radius:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.menu.open{display:flex}.menu a,.menu .pill{color:var(--forest);border-color:var(--line)}.intro,.location,.host-layout,.contact-layout,.price-layout{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}.story-block,.story-block.reverse{grid-template-columns:1fr}.story-block.reverse .story-text,.story-block.reverse .story-images{order:initial}.story-images img{height:430px}.story-images img:last-child{height:360px}.pool-grid,.night-gallery{grid-template-columns:1fr}.pool-grid>img,.night-gallery>img{height:520px}.pool-side,.night-stack{grid-template-columns:1fr 1fr}.panorama{background-attachment:scroll}.calendar-shell iframe{height:620px}}
@media(max-width:600px){section{padding:76px 0}.hero h1{font-size:4rem}.brand img{width:188px}.facts,.distances,.form-grid,.checks{grid-template-columns:1fr}.story-text{padding:34px}.story-images{grid-template-columns:1fr}.story-images img,.story-images img:last-child{height:340px}.pool-side,.night-stack{grid-template-columns:1fr}.pool-side img,.night-stack img{height:320px}.pool-grid>img,.night-gallery>img{height:420px}.amenity-grid{columns:1}.host-photo{height:400px}.calendar-shell{padding:4px}.calendar-shell iframe{height:560px}.footer-grid{grid-template-columns:1fr}}

/* Version 5 */
.hero-claim{display:inline-block;margin-top:.35rem;font-size:.78em;max-width:760px}
.house-intro .intro-heading{max-width:1120px}.display-wide{max-width:none}.intro-lead{max-width:820px}
.intro-body{display:grid;grid-template-columns:.78fr 1.22fr;gap:58px;align-items:center;margin-top:48px}
.focus-house-morning{object-position:50% 48%}.focus-wintergarden-open{object-position:56% 50%}.focus-wintergarden-view{object-position:46% 50%}
.focus-kitchen-main{object-position:52% 48%}.focus-kitchen-detail{object-position:58% 50%}.focus-bedroom-red{object-position:50% 45%}
.focus-bedroom-green{object-position:48% 44%}.focus-bath-wide{object-position:48% 50%}.focus-shower{object-position:50% 45%;object-fit:contain!important;background:#eee8df}
.focus-pool-main{object-position:48% 47%}.focus-house-angle{object-position:48% 44%}.focus-terrace{object-position:52% 46%}
.focus-night-main{object-position:48% 54%}.focus-night-one{object-position:50% 52%}.focus-night-three{object-position:50% 54%}
.reviews{background:#fffdfa}.reviews-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:38px}
.review-summary{width:220px;border-left:1px solid var(--line);padding-left:28px}.review-summary strong{display:block;font:400 4rem/1 var(--serif);color:var(--forest)}
.review-summary span{display:block;color:#65716e}.review-featured{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.review-card,.all-review-grid article{background:var(--cream);padding:30px;border-radius:22px;border:1px solid rgba(23,59,58,.07)}
.stars{color:#b97d28;font-weight:800;letter-spacing:.08em}.review-card blockquote,.all-review-grid blockquote{font:400 1.25rem/1.55 var(--serif);color:var(--forest);margin:18px 0}
.review-card p,.all-review-grid p{margin-bottom:0;color:#596763}.review-card span{font-size:.9rem}.all-reviews{margin-top:22px;background:white;border:1px solid var(--line);border-radius:20px;padding:0 24px}
.all-reviews summary{cursor:pointer;padding:20px 0;font-weight:800;color:var(--forest)}.all-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 0 24px}
.all-review-grid article{padding:22px}.all-review-grid blockquote{font-size:1.02rem}.review-source-note{text-align:center;color:#69736f;font-size:.86rem;margin-top:18px}
.trust-strip{padding:22px 0;background:var(--forest);color:white;text-align:center}.trust-strip p{margin:0}
@media(max-width:900px){.intro-body{grid-template-columns:1fr}.reviews-head{grid-template-columns:1fr}.review-summary{width:auto;border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.review-featured{grid-template-columns:1fr}.all-review-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hero-claim{font-size:.7em;line-height:1.35}.display-wide{font-size:clamp(2.35rem,12vw,3.7rem)}.all-review-grid{grid-template-columns:1fr}.focus-house-morning{object-position:58% 50%}.focus-wintergarden-open{object-position:61% 50%}.focus-kitchen-main{object-position:62% 50%}.focus-shower{object-position:center}}

/* V5.1: ausschließlich echte Vorschau-Ausschnitte und neues Logo */
.story-images img,.pool-grid img,.night-gallery img,.night-stack img{object-position:center}
.brand img{width:238px}
@media(max-width:600px){.brand img{width:198px}}

/* Version 5.2: überarbeitete Pool- und Nachtbildstrecken */
.pool-grid>img,.pool-side img,.night-gallery>img,.night-stack img{
  object-position:center;
}

/* Version 5.3: kleine Preistabellen- und Textkorrekturen */
.price-table th:last-child{text-align:right}

/* Version 5.7: Lagekarte, Desktop-Zahlen und Draußen-genießen-Kapitel */
@media(min-width:901px){
 .fact-nowrap strong{white-space:nowrap;font-size:1.42rem}
}
.map-preview{position:relative;display:block;min-height:470px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;background:#dfe7df}
.map-preview img{width:100%;height:470px;object-fit:cover;transition:transform .5s ease}
.map-preview:hover img{transform:scale(1.025)}
.map-overlay{position:absolute;left:22px;right:22px;bottom:22px;background:rgba(255,253,248,.94);padding:16px 18px;border-radius:16px;color:var(--forest);box-shadow:0 10px 28px rgba(0,0,0,.13)}
.map-overlay strong,.map-overlay small{display:block}
.map-overlay small{margin-top:3px;color:#65716e}
.outdoor-dining{background:var(--cream)}
.outdoor-heading{max-width:1050px}
.outdoor-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:40px}
.outdoor-grid img{width:100%;height:610px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
.outdoor-side{display:grid;gap:16px}
.outdoor-side img{height:297px}
.outdoor-note{max-width:900px;margin:22px auto 0;text-align:center;color:#65716e;font-size:.92rem}
@media(max-width:900px){
 .outdoor-grid{grid-template-columns:1fr}
 .outdoor-grid>img{height:500px}
 .outdoor-side{grid-template-columns:1fr 1fr}
 .outdoor-side img{height:300px}
}
@media(max-width:600px){
 .outdoor-grid>img{height:390px}
 .outdoor-side{grid-template-columns:1fr}
 .outdoor-side img{height:320px}
 .map-preview,.map-preview img{height:420px;min-height:420px}
}

/* Version 5.8 */
.facts{align-items:stretch}
.fact{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.fact strong{line-height:1.12;min-height:1.85em;display:flex;align-items:flex-start}
.fact span{display:block;margin-top:.1rem}
@media(min-width:901px){
 .facts{grid-template-columns:.9fr 1.15fr .9fr 1.6fr;gap:18px}
 .fact-nowrap strong{white-space:nowrap;font-size:1.42rem}
}
.map-preview img{object-fit:contain;object-position:center;background:#e8efe8}
@media(max-width:900px){.fact strong{min-height:auto}}

/* Version 5.12: verfeinerte Kennzahlen, Storytelling und WebP-Konvertierung */
@media (min-width: 901px){
  .facts{
    grid-template-columns: .95fr 1.15fr .95fr 1.45fr;
    gap: 18px;
    align-items: start;
  }
  .fact{
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
  }
  .fact strong{
    display: block;
    min-height: 1.25em;
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.08;
    white-space: nowrap;
  }
  .fact span{
    display: block;
    margin-top: .16rem;
  }
}
.outdoor-sublead{
  margin-top: .15rem;
  font-size: 1.04rem;
}

/* Version 5.13: Bewertungs-Hinweis und mobiles Hamburger-Menü */
@media (max-width: 900px){
  .nav{
    padding-right: 10px;
  }
  .hamb{
    flex: 0 0 auto;
    margin-right: 6px;
    padding: 8px 10px;
    line-height: 1;
    position: relative;
    right: 0;
  }
}
@media (max-width: 420px){
  .wrap.nav{
    width: calc(100% - 28px);
  }
  .hamb{
    margin-right: 4px;
  }
}

/* Version 5.19: mobiles Hamburger-Menü sicher innerhalb des Viewports */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

header{
  width:100%;
}

@media (max-width: 900px){
  header .wrap.nav{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:16px;
    padding-right:16px;
    box-sizing:border-box;
  }

  .brand{
    min-width:0;
    flex:1 1 auto;
  }

  .brand img{
    max-width:180px;
    width:auto;
    height:auto;
  }

  .hamb{
    display:block;
    position:relative;
    right:auto;
    left:auto;
    margin:0 0 0 auto;
    flex:0 0 auto;
    box-sizing:border-box;
    max-width:48px;
    min-width:44px;
    padding:8px;
  }

  .menu{
    right:16px;
    left:16px;
    width:auto;
    max-width:calc(100vw - 32px);
    box-sizing:border-box;
  }
}

@media (max-width: 420px){
  header .wrap.nav{
    width:100%;
    padding-left:12px;
    padding-right:12px;
  }

  .brand img{
    max-width:160px;
  }

  .hamb{
    min-width:42px;
    max-width:42px;
    margin-left:auto;
  }

  .menu{
    right:12px;
    left:12px;
    max-width:calc(100vw - 24px);
  }
}

/* Version 5.22: language switch */
.lang-switch{
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  padding:7px 10px!important;
  font-weight:800;
  letter-spacing:.08em;
  min-width:42px;
  text-align:center;
}
header.scrolled .lang-switch{border-color:var(--forest)}
@media(max-width:900px){
  .menu .lang-switch{align-self:flex-start;margin-top:4px}
}


/* Version 5.33: mobile-optimized hero crops */
@media (max-width: 900px){
  .hero{
    background-image:url('../images/hero-house-20260817-mobile.webp');
    background-position:center center;
    min-height:92svh;
  }

  .hero-copy{
    padding-bottom:8vh;
  }

  .sunset{
    background-image:url('../images/sunset-pool-20260817-mobile.webp');
    background-position:center center;
    min-height:84svh;
  }
}

@media (max-width: 560px){
  .hero{
    background-position:center 42%;
  }

  .hero h1{
    font-size:clamp(3.2rem,17vw,5rem);
    line-height:.92;
  }

  .hero p{
    font-size:1.02rem;
    max-width:34ch;
  }

  .sunset{
    background-position:center 52%;
  }
}

/* Version 5.34: mobile hero images shown uncropped */
@media (max-width: 600px){

  /* Start / Hero:
     show the complete wide photo across the screen and place the text below it
     instead of forcing a landscape photo into a portrait cover crop. */
  .hero{
    min-height:0 !important;
    display:block !important;
    padding-top:46.3vw;
    padding-bottom:0;
    background-image:url('../images/hero-house-20260817-mobile-full.webp') !important;
    background-size:100% auto !important;
    background-position:center top;
    background-repeat:no-repeat !important;
    background-color:#173b3a !important;
  }

  .hero:after{
    background:linear-gradient(
      180deg,
      rgba(5,20,24,.05) 0,
      rgba(5,20,24,.18) 36vw,
      rgba(5,20,24,.90) 48vw,
      rgba(5,20,24,.96) 100%
    ) !important;
  }

  .hero-copy{
    width:calc(100% - 28px) !important;
    padding:28px 0 42px !important;
    margin:0 auto !important;
  }

  .hero h1{
    margin-top:.08em;
  }

  /* Sunset:
     same principle – the complete panorama remains visible on top,
     the text sits on a calm dark continuation underneath. */
  .sunset{
    min-height:0 !important;
    display:block !important;
    padding-top:46.3vw !important;
    padding-bottom:0 !important;
    background-image:url('../images/sunset-pool-20260817-mobile-full.webp') !important;
    background-size:100% auto !important;
    background-position:center top;
    background-repeat:no-repeat !important;
    background-color:#102c32 !important;
  }

  .sunset:before{
    background:linear-gradient(
      180deg,
      rgba(5,18,29,.03) 0,
      rgba(5,18,29,.14) 35vw,
      rgba(5,18,29,.88) 47vw,
      rgba(5,18,29,.96) 100%
    ) !important;
  }

  .sunset > div{
    padding:30px 20px 46px !important;
    max-width:100% !important;
  }

  .sunset h2{
    font-size:clamp(2.7rem,13vw,4.3rem) !important;
  }
}


/* Version 5.35: mobile hero text stays inside the image area */
@media (max-width: 600px){
  .hero{
    min-height:92svh !important;
    display:grid !important;
    align-items:end !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    background-image:url('../images/hero-house-20260817-mobile-overlay.webp') !important;
    background-size:cover !important;
    background-position:center top;
    background-repeat:no-repeat !important;
    background-color:#10282d !important;
  }

  .hero:after{
    background:linear-gradient(180deg,rgba(5,20,24,.06),rgba(5,20,24,.30) 35%,rgba(5,20,24,.74) 66%,rgba(5,20,24,.88) 100%) !important;
  }

  .hero-copy{
    width:min(100%, calc(100% - 28px)) !important;
    margin:auto !important;
    padding:0 0 6.5svh !important;
    position:relative !important;
    z-index:1 !important;
  }

  .hero h1{
    font-size:clamp(3.15rem,15.3vw,5rem) !important;
    line-height:.92 !important;
  }

  .hero p{
    max-width:32ch !important;
    font-size:1.02rem !important;
  }

  .sunset{
    min-height:86svh !important;
    display:grid !important;
    place-items:end center !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    background-image:url('../images/sunset-pool-20260817-mobile-overlay.webp') !important;
    background-size:cover !important;
    background-position:center top;
    background-repeat:no-repeat !important;
    background-color:#102c32 !important;
    text-align:center !important;
  }

  .sunset:before{
    background:linear-gradient(180deg,rgba(5,18,29,.04),rgba(5,18,29,.22) 36%,rgba(5,18,29,.72) 64%,rgba(5,18,29,.88) 100%) !important;
  }

  .sunset > div{
    max-width:min(100%, 36rem) !important;
    padding:0 20px 6svh !important;
    position:relative !important;
    z-index:1 !important;
  }

  .sunset h2{
    font-size:clamp(2.7rem,13vw,4.3rem) !important;
  }
}


/* Version 5.36: mobile hero text back inside the picture + no clipping */
@media (max-width: 600px){
  .hero{
    min-height:94svh !important;
    display:grid !important;
    align-items:end !important;
    background-image:url('../images/hero-house-20260817-mobile-portrait-v3.webp') !important;
    background-size:cover !important;
    background-position:center center;
    background-repeat:no-repeat !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  .hero:after{
    background:linear-gradient(180deg,rgba(5,20,24,.10) 0%,rgba(5,20,24,.22) 34%,rgba(5,20,24,.58) 62%,rgba(5,20,24,.84) 100%) !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 16px 6svh !important;
    box-sizing:border-box !important;
    position:relative !important;
    z-index:1 !important;
  }

  .hero .eyebrow,
  .hero h1,
  .hero p{
    max-width:100% !important;
  }

  .hero h1{
    font-size:clamp(3rem,14.8vw,4.8rem) !important;
    line-height:.92 !important;
    margin-right:0 !important;
  }

  .hero p{
    font-size:1.0rem !important;
    max-width:31ch !important;
    margin-right:0 !important;
  }

  .buttons{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    max-width:100% !important;
  }

  .btn{
    max-width:100% !important;
    white-space:normal !important;
  }

  .sunset{
    min-height:86svh !important;
    display:grid !important;
    place-items:end center !important;
    text-align:center !important;
    background-image:url('../images/sunset-pool-20260817-mobile-portrait-v3.webp') !important;
    background-size:cover !important;
    background-position:center center;
    background-repeat:no-repeat !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  .sunset:before{
    background:linear-gradient(180deg,rgba(5,18,29,.08) 0%,rgba(5,18,29,.18) 36%,rgba(5,18,29,.48) 62%,rgba(5,18,29,.80) 100%) !important;
  }

  .sunset > div,
  .sunset .reveal{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 16px 6svh !important;
    box-sizing:border-box !important;
    position:relative !important;
    z-index:1 !important;
  }

  .sunset h2{
    font-size:clamp(2.55rem,12.2vw,4.1rem) !important;
    line-height:.96 !important;
    margin-right:0 !important;
  }

  .sunset p{
    max-width:31ch !important;
    margin:0 auto !important;
    font-size:1rem !important;
  }
}


/* Version 5.37: mobile hero actually shows the complete image with text over it */
@media (max-width: 600px){
  .hero{
    min-height:100svh !important;
    display:grid !important;
    align-items:end !important;
    padding:0 !important;
    background-image:url('../images/hero-house-mobile-full-v4.webp') !important;
    background-size:100% 100% !important;
    background-position:center center;
    background-repeat:no-repeat !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 18px 5.5svh !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .hero .eyebrow,
  .hero h1,
  .hero p,
  .hero .buttons{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow-wrap:anywhere !important;
  }

  .hero h1{
    font-size:clamp(3rem,14vw,4.6rem) !important;
    line-height:.92 !important;
  }

  .hero p{
    font-size:.98rem !important;
    line-height:1.5 !important;
  }

  .buttons{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:9px !important;
  }

  .btn{
    max-width:calc(100vw - 36px) !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .sunset{
    min-height:92svh !important;
    display:grid !important;
    place-items:end center !important;
    padding:0 !important;
    background-image:url('../images/sunset-pool-mobile-full-v4.webp') !important;
    background-size:100% 100% !important;
    background-position:center center;
    background-repeat:no-repeat !important;
  }

  .sunset > div{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 18px 5.5svh !important;
    box-sizing:border-box !important;
  }

  .sunset h2,
  .sunset p{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }

  .sunset h2{
    font-size:clamp(2.5rem,11.5vw,3.9rem) !important;
    line-height:.98 !important;
  }

  .sunset p{
    font-size:.98rem !important;
    line-height:1.5 !important;
    margin:0 auto !important;
  }
}


/* Version 5.38: mobile Hero/Sunset text placement corrected after visual comparison */
@media (max-width: 600px){

  /* Keep the text inside the hero image, but not glued to the bottom. */
  .hero{
    align-items:center !important;
  }

  .hero-copy{
    align-self:center !important;
    padding:18svh 18px 0 !important;
    transform:none !important;
  }

  .hero h1,
  .hero p,
  .hero .hero-claim,
  .hero .eyebrow{
    max-width:100% !important;
    overflow:visible !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  /* Sunset: bring the text back up into the picture, similar to the original layout. */
  .sunset{
    place-items:center !important;
  }

  .sunset > div,
  .sunset .reveal{
    align-self:center !important;
    width:100% !important;
    max-width:100% !important;
    padding:10svh 14px 0 !important;
    margin:0 !important;
    transform:none !important;
    box-sizing:border-box !important;
  }

  .sunset h2{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(2.12rem,10.6vw,3.15rem) !important;
    line-height:.98 !important;
    letter-spacing:-.015em !important;
    margin:.12em auto .35em !important;
    padding:0 !important;
    text-wrap:balance;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  .sunset p{
    width:min(100%, 30ch) !important;
    max-width:30ch !important;
    margin:0 auto !important;
    padding:0 !important;
    font-size:.94rem !important;
    line-height:1.48 !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .sunset .eyebrow{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}

@media (max-width: 360px){
  .sunset h2{
    font-size:2.02rem !important;
  }

  .sunset p{
    font-size:.90rem !important;
    max-width:29ch !important;
  }
}


/* Version 5.39: mobile hero back to cinematic full-screen presentation */
@media (max-width: 600px){

  /* Start-Hero: wieder vollflächig und bildstark */
  .hero{
    min-height:100svh !important;
    display:grid !important;
    align-items:end !important;
    padding:0 !important;
    background-image:url('../images/hero-house-20260817-v2.webp') !important;
    background-size:cover !important;
    background-position:66% center;
    background-repeat:no-repeat !important;
    background-color:#10282d !important;
  }

  .hero:after{
    background:
      linear-gradient(
        180deg,
        rgba(5,20,24,.10) 0%,
        rgba(5,20,24,.12) 32%,
        rgba(5,20,24,.36) 58%,
        rgba(5,20,24,.78) 100%
      ) !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 16px 7svh !important;
    box-sizing:border-box !important;
    align-self:end !important;
    transform:none !important;
  }

  .hero .eyebrow{
    font-size:.66rem !important;
    letter-spacing:.18em !important;
    white-space:normal !important;
  }

  .hero h1{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(3.1rem,14.5vw,4.7rem) !important;
    line-height:.92 !important;
    margin:.12em 0 .24em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .hero p{
    width:100% !important;
    max-width:31ch !important;
    font-size:.98rem !important;
    line-height:1.45 !important;
    margin:0 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .hero .buttons{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    width:100% !important;
    max-width:100% !important;
    gap:10px !important;
    margin-top:20px !important;
  }

  .hero .btn{
    width:auto !important;
    max-width:calc(100vw - 32px) !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }

  /* Sunset: ebenfalls wieder wie ein echtes Fullscreen-Foto */
  .sunset{
    min-height:92svh !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    background-image:url('../images/sunset-pool-20260817-v2.webp') !important;
    background-size:cover !important;
    background-position:38% center;
    background-repeat:no-repeat !important;
    background-color:#102c32 !important;
    text-align:center !important;
  }

  .sunset:before{
    background:
      linear-gradient(
        180deg,
        rgba(5,18,29,.08) 0%,
        rgba(5,18,29,.13) 34%,
        rgba(5,18,29,.34) 58%,
        rgba(5,18,29,.72) 100%
      ) !important;
  }

  .sunset > div,
  .sunset .reveal{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:10svh 14px 0 !important;
    box-sizing:border-box !important;
    align-self:center !important;
    transform:none !important;
  }

  .sunset .eyebrow{
    font-size:.66rem !important;
    letter-spacing:.18em !important;
    white-space:normal !important;
  }

  .sunset h2{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(2.35rem,11vw,3.45rem) !important;
    line-height:.98 !important;
    letter-spacing:-.015em !important;
    margin:.12em auto .34em !important;
    padding:0 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
    text-wrap:balance;
  }

  .sunset p{
    width:min(100%,30ch) !important;
    max-width:30ch !important;
    margin:0 auto !important;
    padding:0 !important;
    font-size:.94rem !important;
    line-height:1.48 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}

@media (max-width: 360px){
  .hero h1{
    font-size:2.95rem !important;
  }

  .sunset h2{
    font-size:2.18rem !important;
  }
}


/* Version 5.46: sichtbarkeitsgesteuerte Kamerafahrt, einmalig
   Mobil: links -> rechts -> Mitte -> Stopp */
@media (max-width: 600px){
  .hero,
  .sunset,
  .panorama{
    background-size:auto 100% !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
    background-position:0% center;
    animation:none;
    will-change:background-position;
  }

  .hero.camera-pan-play{
    animation:casaPanoHeroVisiblePan 9s ease-in-out 1 forwards;
  }

  .sunset.camera-pan-play{
    animation:casaPanoSunsetVisiblePan 9s ease-in-out 1 forwards;
  }

  .panorama.camera-pan-play{
    animation:casaPanoPanoramaVisiblePan 9s ease-in-out 1 forwards;
  }
}

@keyframes casaPanoHeroVisiblePan{
  0%   { background-position:0% center; }
  55%  { background-position:100% center; }
  100% { background-position:50% center; }
}

@keyframes casaPanoSunsetVisiblePan{
  0%   { background-position:0% center; }
  55%  { background-position:100% center; }
  100% { background-position:50% center; }
}

@keyframes casaPanoPanoramaVisiblePan{
  0%   { background-position:0% center; }
  55%  { background-position:100% center; }
  100% { background-position:50% center; }
}

@media (prefers-reduced-motion: reduce){
  .hero.camera-pan-play,
  .sunset.camera-pan-play,
  .panorama.camera-pan-play{
    animation:none !important;
    background-position:50% center;
  }
}


/* Version 5.47: two fully visible arrival images */
.arrival-gallery{
  display:grid;
  gap:18px;
}

.arrival-gallery .full-photo{
  margin:0;
}

.arrival-gallery .full-photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

@media (max-width: 900px){
  .arrival-gallery{
    gap:14px;
  }
}

/* Version 5.48: neue Bildfolge im Bereich Ankommen */
.house-intro .arrival-flow{
  margin-top:48px;
}
.house-intro .arrival-photo{
  margin:0;
}
.house-intro .arrival-photo img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.house-intro .arrival-text{
  width:min(920px,calc(100% - 70px));
  margin:34px auto 40px;
  font-size:1.04rem;
}
.house-intro .arrival-text p{
  margin:0;
}
.house-intro .arrival-photo-two{
  margin-top:4px;
}
.house-intro .arrival-facts{
  width:min(980px,calc(100% - 70px));
  margin:34px auto 0;
}
@media(max-width:900px){
  .house-intro .arrival-flow{margin-top:34px}
  .house-intro .arrival-text,
  .house-intro .arrival-facts{width:100%}
  .house-intro .arrival-text{margin:26px auto 30px}
  .house-intro .arrival-facts{margin-top:26px}
}
@media(max-width:600px){
  .house-intro .arrival-flow{margin-top:28px}
  .house-intro .arrival-text{margin:22px auto 26px}
  .house-intro .arrival-facts{margin-top:22px}
}

/* Version 5.65: grouped amenities + uncropped hosts photo on mobile */
.amenity-intro{max-width:820px;margin-bottom:34px}
.amenity-groups{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.amenity-group{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 26px;box-shadow:0 8px 28px rgba(18,48,47,.05)}
.amenity-group h3{font:400 1.65rem var(--serif);color:var(--forest);margin:0 0 16px}
.amenity-group .amenity-grid{columns:1;display:grid;grid-template-columns:1fr;gap:9px}
.amenity-group .amenity{break-inside:avoid}
.amenity-group-rules{grid-column:1/-1}
.amenity-group-rules .amenity-grid{grid-template-columns:repeat(3,1fr);gap:12px}

@media(max-width:900px){
  .amenity-groups{grid-template-columns:1fr}
  .amenity-group-rules{grid-column:auto}
  .amenity-group-rules .amenity-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  .host-photo{
    height:auto !important;
    aspect-ratio:1700/764;
  }
  .host-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center !important;
    display:block;
  }
  .amenity-group{padding:21px 20px}
  .amenity-group h3{font-size:1.5rem}
}