/* Ferienhaus Lienharter – Seiten-Styles.
   Baut auf css/design-system.css (Tokens + Basis) auf. Mobile first, Breakpoints 480 / 600 / 800 / 1100 px.
   Icons: Lucide (https://lucide.dev), ISC-Lizenz. */

html{scroll-behavior:smooth}
body{overflow-x:clip}
[hidden]{display:none!important}
section[id],#top{scroll-margin-top:70px}
body.no-scroll{overflow:hidden}

.lead{font-size:var(--fs-lead)}
.para{margin:0 0 14px}
.muted{font-size:var(--fs-small);color:var(--text-muted)}
.section--sage{background:var(--salbeigruen-200)}
.section-title{margin:0 0 18px}
.section-intro{margin-bottom:40px}
.section-intro h2{margin:0 0 10px}
.split{gap:clamp(28px,5vw,64px);align-items:center}
.photo{width:100%;object-fit:cover;border-radius:var(--radius-md)}
.photo--4x5{aspect-ratio:4/5}
svg{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons (Design-System Button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap-min);padding:12px 30px;border-radius:var(--radius-sm);border:2px solid transparent;font-family:var(--font-body);font-weight:700;font-size:var(--fs-ui);letter-spacing:var(--ls-ui);line-height:1.3;text-align:center;text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--primary{background:var(--weinrot);border-color:var(--weinrot);color:var(--weiss)}
.btn--primary:hover{background:var(--weinrot-hover);border-color:var(--weinrot-hover);color:var(--weiss)}
.btn--outline{background:transparent;border-color:var(--tannengruen);color:var(--tannengruen)}
.btn--outline:hover{background:var(--tannengruen);color:var(--weiss)}
.btn--full{display:flex;width:100%}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--cremeweiss);border-bottom:1px solid var(--linie-creme)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.logo-link{display:flex;flex:0 1 auto;min-width:0}
.logo{width:clamp(150px,18vw,230px);max-width:100%;height:auto}
.nav-desktop{display:flex;align-items:center;gap:20px}
.nav-link{white-space:nowrap}
.nav-link,.mobile-menu a:not(.btn){font-size:var(--fs-ui);font-weight:700;letter-spacing:var(--ls-ui);color:var(--tannengruen);min-height:44px;display:flex;align-items:center}
.nav-link:hover,.mobile-menu a:not(.btn):hover{color:var(--weinrot)}
.header-mobile{display:flex;align-items:center;gap:2px}
.lang{display:flex;align-items:center}
.lang span{color:var(--salbeigruen)}
.lang button{min-width:44px;min-height:44px;background:transparent;border:none;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-ui);letter-spacing:var(--ls-ui);color:var(--tannengruen);font-weight:500}
.lang button[aria-pressed="true"]{color:var(--weinrot);font-weight:800}
.burger{flex:none;width:48px;height:48px;border:none;background:transparent;color:var(--tannengruen);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.burger .icon-close,.burger[aria-expanded="true"] .icon-menu{display:none}
.burger[aria-expanded="true"] .icon-close{display:block}
.mobile-menu{border-top:1px solid var(--linie-creme);background:var(--cremeweiss);max-height:calc(100vh - 70px);overflow-y:auto}
.mobile-menu-inner{padding-top:8px;padding-bottom:18px}
.mobile-menu a:not(.btn){font-size:17px;min-height:52px;border-bottom:1px solid var(--linie-creme)}
.mobile-cta{margin-top:16px}

/* ---------- Hero ---------- */
.hero{position:relative;color:var(--weiss)}
.hero>img{width:100%;height:clamp(440px,84vh,900px);object-fit:cover;filter:brightness(.72)}
.hero-text{position:absolute;inset:auto 0 0 0;padding-bottom:clamp(8px,1.5vw,12px)}
.hero-kicker{margin:0 0 6px;font-weight:700;font-size:var(--fs-ui);letter-spacing:var(--ls-ui);text-shadow:var(--text-shadow-hero-sm)}
.hero h1{color:var(--weiss);margin:0 0 7px;text-shadow:var(--text-shadow-hero);text-wrap:balance}
.hero-lead{margin:0;font-size:var(--fs-lead);text-shadow:var(--text-shadow-hero-sm)}

/* ---------- Das Haus ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:22px;border-top:1px solid var(--linie-creme)}
.fact{padding:14px 0;border-bottom:1px solid var(--linie-creme)}
.fact strong{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--fs-stat);color:var(--weinrot);line-height:1.2}
.fact span{font-size:var(--fs-small);color:var(--text-muted)}
.full-bleed{width:100%;height:clamp(240px,45vw,520px);object-fit:cover}

/* ---------- Zimmer ---------- */
.rooms{display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.room{gap:clamp(20px,4vw,56px);align-items:center}
.room-photo{position:relative;display:block;width:100%;padding:0;border:none;background:var(--salbeigruen-100);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:box-shadow var(--dur) var(--ease)}
.room-photo:hover{box-shadow:var(--shadow-hover)}
.room-photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.photo-badge{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;background:var(--cremeweiss);color:var(--tannengruen);font-weight:700;font-size:var(--fs-small);padding:6px 10px;border-radius:var(--radius-sm)}
.room-num{font-family:var(--font-display);font-weight:600;font-size:var(--fs-stat);color:var(--salbeigruen);margin-bottom:6px}
.room-title{font-size:var(--fs-h2);margin:0 0 12px}
.room-badge{margin-bottom:12px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-sm);background:var(--salbeigruen-100);color:var(--tannengruen);font-weight:700;font-size:var(--fs-min);letter-spacing:var(--ls-ui);line-height:1.5}
@media (min-width:800px){.room--flip .room-photo{order:2}.room-text{order:1}}

/* ---------- Gemeinsame Räume (Design-System Card) ---------- */
.spaces-title{margin:0 0 32px}
.card{display:flex;flex-direction:column;background:var(--surface-card-on-page);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;min-width:0;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.card>img{width:100%;height:210px;object-fit:cover}
.card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
.card-body h3{font-size:var(--fs-h3);margin:0}
.card-content{font-size:var(--fs-small);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.card-paras{display:flex;flex-direction:column;gap:8px}
.text-btn{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:none;background:none;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:var(--fs-ui);letter-spacing:var(--ls-ui);color:var(--tannengruen);transition:color var(--dur) var(--ease)}
.text-btn:hover{color:var(--weinrot)}

/* ---------- Geschichte ---------- */
.img-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.img-pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-md)}
.img-pair img+img{margin-top:clamp(20px,5vw,48px)}

/* ---------- Fotos ---------- */
.gal-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.gal-head-text{min-width:0;flex:1 1 300px}
.gal-head h2{margin:0 0 8px}
.scroller{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 12px;scroll-padding:0 var(--gutter)}
.scroller button{flex:0 0 auto;width:clamp(240px,40vw,460px);aspect-ratio:4/3;padding:0;border:none;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;scroll-snap-align:start;background:var(--salbeigruen-100)}
.scroller img{width:100%;height:100%;object-fit:cover}

/* ---------- Ausstattung & Lage ---------- */
.lage-title{margin:0 0 28px}
.lage-grid{gap:clamp(28px,5vw,64px);align-items:stretch}
.amenities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:18px 28px}
.amenities li{display:flex;align-items:center;gap:14px;min-height:44px;font-size:var(--fs-body)}
.amenities svg,.address svg{flex:none;stroke:var(--salbeigruen);stroke-width:1.75}
.lage-text{margin:28px 0 0}
.map-col{display:flex;flex-direction:column;gap:18px}
.address{margin:0;display:flex;gap:10px;align-items:flex-start}
.map-box{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--salbeigruen-100);flex:1 1 auto;min-height:300px}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.map-consent svg{stroke:var(--tannengruen);stroke-width:1.75}
.map-consent p{max-width:300px;font-size:var(--fs-small)}

/* ---------- Preise ---------- */
.prices{max-width:960px}
.prices-title{margin:0 0 28px}
.prices-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
/* Desktop: Hauptsaison + Hinweise links, Nebensaison rechts. Mobil: Hauptsaison → Nebensaison → Hinweise (HTML-Reihenfolge). */
@media (min-width:800px){.prices-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr}.price-card--low{grid-column:2;grid-row:1 / span 2}.price-notes{grid-column:1;grid-row:2}}
.price-card{background:var(--weiss);border-radius:var(--radius-md);padding:clamp(20px,3vw,28px)}
.price-card-title{margin:0 0 12px;font-size:24px}
.price-card-title--tight{margin-bottom:6px}
.periods{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}
.min-stay{margin:0 0 18px}
.min-stay--high{margin:0 0 14px}
.by-persons{margin:0 0 4px;font-weight:700;color:var(--tannengruen)}
.rates{border-top:1px solid var(--linie-creme)}
.rate{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linie-creme)}
.rate-label{flex:1 1 auto;min-width:0}
.rate--season{flex-wrap:wrap;gap:6px 16px;padding:16px 0}
.season{min-width:0;flex:1 1 200px}
.season-name{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--tannengruen)}
/* Design-System PriceTag (ohne „ab“) – darf nie umbrechen */
.price{flex:none;white-space:nowrap}
.price-tag{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;font-family:var(--font-display);font-size:var(--fs-price);font-weight:600;line-height:1.3;color:var(--weinrot)}
.price-notes{margin:0;padding:0 0 0 20px;font-size:var(--fs-small);color:var(--text-muted);display:grid;gap:4px}
.price-note-kids{font-weight:700;color:var(--tannengruen)}

/* ---------- Verfügbarkeit & Buchung (feratel-Widget) ---------- */
.booking{border-radius:var(--radius-md);background:var(--salbeigruen-100)}
.booking-consent,.booking-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:280px;padding:clamp(24px,4vw,40px) 24px;text-align:center}
.booking-consent svg{stroke:var(--tannengruen);stroke-width:1.75}
.booking-consent h3{margin:0}
.booking-consent p,.booking-soon p{max-width:520px;font-size:var(--fs-small)}
.booking-soon p{font-size:var(--fs-body);font-weight:700;color:var(--tannengruen)}
.booking-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px}
.booking-contact a{min-height:44px;display:flex;align-items:center;font-weight:700}
.booking-widget:not([hidden]){display:block;background:var(--weiss);min-height:280px}
/* Volle Bildschirmbreite (siehe index.html); auf schmalen Bildschirmen den normalen Seitenabstand behalten */
@media (max-width:799px){.booking-widget{padding:0 var(--gutter)}}
.section-intro--book{margin-bottom:28px}

/* ---------- Gastgeber ---------- */
.hosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,5vw,56px);align-items:center}
.hosts-figure{margin:0;width:100%;max-width:420px}
.hosts-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:44% 30%;border-radius:var(--radius-md)}
.photo-credit{margin-top:6px;font-size:var(--fs-min);line-height:1.4;letter-spacing:var(--ls-ui);color:var(--tannengruen);text-align:right}
.swallow{width:56px;height:auto;margin-bottom:14px}
.hosts-title{margin:0 0 14px}
.signature{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--tannengruen)}

/* ---------- Footer ---------- */
.site-footer{background:var(--tannengruen);color:var(--cremeweiss);padding:clamp(40px,6vw,56px) var(--gutter) 28px;text-align:center}
.site-footer a{color:var(--cremeweiss);min-height:44px;display:flex;align-items:center;text-underline-offset:3px}
.site-footer a:hover{color:var(--cremeweiss);text-decoration:underline}
.footer-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-logo-text);margin-bottom:10px}
.footer-addr{margin:0 0 6px;font-size:var(--fs-small)}
.footer-row{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px;font-size:var(--fs-small)}
.footer-row--legal{align-items:center;gap:4px 24px}
.footer-divider{height:1px;background:var(--salbeigruen);max-width:1100px;margin:18px auto}
.footer-lang{display:flex}
.footer-lang button{min-width:44px;min-height:44px;background:transparent;border:none;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-small);color:var(--cremeweiss);font-weight:500}
.footer-lang button[aria-pressed="true"]{font-weight:800}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:var(--tannengruen-700);display:flex;align-items:center;justify-content:center;padding:64px 12px 72px}
.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-md)}
.lightbox-close{position:absolute;top:8px;right:8px;width:52px;height:52px;border:none;background:transparent;color:var(--cremeweiss);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:none;background:var(--tannengruen);border-radius:var(--radius-sm);color:var(--cremeweiss);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-prev{left:4px}
.lightbox-next{right:4px}
.lightbox-caption{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--cremeweiss);font-size:var(--fs-ui);padding:0 16px}

/* ---------- Galerie-Dialog (Zimmer & Räume) ---------- */
.sg-backdrop{position:fixed;inset:0;z-index:220;background:rgba(48,54,51,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.sg{background:var(--cremeweiss);border-radius:var(--radius-md);width:100%;max-width:880px;max-height:100%;overflow-y:auto;padding:clamp(14px,3vw,24px);display:flex;flex-direction:column;gap:14px}
.sg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sg-head h3{margin:0;font-size:var(--fs-h2)}
.sg-close{flex:none;width:48px;height:48px;border:none;background:transparent;color:var(--tannengruen);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sg-stage{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--salbeigruen-100)}
.sg-img{width:100%;aspect-ratio:3/2;object-fit:cover}
.sg-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:none;background:var(--cremeweiss);border-radius:var(--radius-sm);color:var(--tannengruen);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sg-prev{left:10px}
.sg-next{right:10px}
.sg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sg-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.sg-thumbs button{width:76px;height:56px;padding:0;border:3px solid transparent;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:var(--salbeigruen-100)}
.sg-thumbs button[aria-current="true"]{border-color:var(--weinrot)}
.sg-thumbs img{width:100%;height:100%;object-fit:cover}

/* ---------- Rechtliche Seiten ---------- */
.legal{max-width:760px;padding-top:clamp(32px,5vw,56px);padding-bottom:clamp(44px,7vw,70px)}
.legal h1{margin:0 0 20px}
.legal p{margin:0 0 14px}
.legal h2{font-size:var(--fs-h3);margin:28px 0 8px}
.legal-stand{margin-top:28px}
.legal-back{margin-top:24px}