/* ===========================================================
   Ferienwohnung Waldblick — Styles
   =========================================================== */

/* Selbst gehostete Schriften (Cormorant Garamond, Work Sans) — OFL-lizenziert, siehe /fonts/OFL-*.txt */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond-400.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond-500.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond-500italic.woff') format('woff');
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond-600.woff') format('woff');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond-700.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('fonts/work-sans-300.woff') format('woff');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('fonts/work-sans-400.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('fonts/work-sans-500.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('fonts/work-sans-600.woff') format('woff');
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --green-light:#c1d195;
  --green-dark:#253f1d;
  --green-dark-2:#1c3016;
  --beige:#f5e9e0;
  --brown:#ceae95;
  --text:#32271e;
  --cream:#fbf8f3;
  --white:#ffffff;

  --font-head:'Cormorant Garamond', serif;
  --font-body:'Work Sans', sans-serif;

  --header-h:128px;
  --header-h-scrolled:78px;

  --maxw:1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--cream);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  color:var(--green-dark);
  margin:0 0 .5em;
  letter-spacing:.04em;
}

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brown);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:'';
  width:28px;height:1px;
  background:var(--brown);
  display:inline-block;
}

h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  text-transform:uppercase;
  letter-spacing:.07em;
  line-height:1.05;
  overflow-wrap:break-word;
}
h2{
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  text-transform:uppercase;
  letter-spacing:.06em;
}
h3{
  font-size:1.35rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--green-dark);
}

p{ margin:0 0 1.1em; }
.lead{
  font-family:var(--font-head);
  font-size:1.35rem;
  font-style:italic;
  color:var(--green-dark);
  font-weight:500;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 2em;
  border-radius:2px;
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid var(--green-dark);
  transition:all .3s ease;
  cursor:pointer;
  background:none;
}
.btn-solid{ background:var(--green-dark); color:var(--cream); }
.btn-solid:hover{ background:var(--green-dark-2); }
.btn-outline{ color:var(--green-dark); }
.btn-outline:hover{ background:var(--green-dark); color:var(--cream); }
.btn-light{ border-color:var(--cream); color:var(--cream); }
.btn-light:hover{ background:var(--cream); color:var(--green-dark); }

/* ===================== HEADER ===================== */
#site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  height:var(--header-h);
  transition:height .45s cubic-bezier(.22,1,.36,1), background .45s ease, box-shadow .45s ease;
  background:linear-gradient(to bottom, rgba(37,63,29,.55), rgba(37,63,29,0));
}
#site-header.scrolled{
  height:var(--header-h-scrolled);
  background:var(--green-dark);
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}

.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  height:100%;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
}

.logo-link{
  position:relative;
  display:block;
  height:100%;
  display:flex;
  align-items:center;
}
.logo{
  position:absolute;
  left:0;
  transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.logo-compact{
  height:96px;
  opacity:1;
  transform:translateY(0) scale(1);
  filter:brightness(0) invert(1);
}
.logo-wide{
  height:38px;
  opacity:0;
  transform:translateY(0) scale(.96);
  position:static;
  filter:brightness(0) invert(1);
}
#site-header.scrolled .logo-compact{ opacity:0; transform:scale(.9); pointer-events:none; }
#site-header.scrolled .logo-wide{ opacity:1; }
#site-header:not(.scrolled) .logo-wide{ opacity:0; }

nav.main-nav{
  display:flex;
  align-items:center;
  gap:2.1em;
}
nav.main-nav a{
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream);
  font-weight:500;
  padding:.4em 0;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, opacity .25s ease;
  opacity:.9;
}
nav.main-nav a:hover{ border-color:var(--green-light); opacity:1; }

.header-right{ display:flex; align-items:center; gap:2.4em; }

.lang-switch{ display:flex; gap:.5em; }
.lang-switch button{
  background:none;border:none;cursor:pointer;
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.1em;
  color:rgba(251,248,243,.6);
  padding:.2em .35em;
  font-weight:600;
  transition:color .2s ease;
}
.lang-switch button.active,
.lang-switch button:hover{ color:var(--green-light); }
.lang-switch span{ color:rgba(251,248,243,.35); font-size:.72rem; }

.nav-toggle{
  display:none;
  background:none;border:none;cursor:pointer;
  color:var(--cream);
  font-size:1.6rem;
  line-height:1;
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  height:100vh;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--green-dark) url('images/landschaft-sommer.jpg') center 65%/cover no-repeat;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(37,63,29,.55) 0%, rgba(37,63,29,.15) 38%, rgba(37,63,29,.75) 100%);
}
.hero-signet{
  position:absolute;
  right:-6%;
  top:8%;
  width:46vw;
  max-width:640px;
  opacity:.16;
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px 5.5rem;
  color:var(--cream);
}
.hero-inner .eyebrow{ color:var(--green-light); }
.hero-inner .eyebrow::before{ background:var(--green-light); }
.hero-inner h1{ color:var(--cream); text-shadow:0 4px 30px rgba(0,0,0,.25); }
.hero-sub{
  font-family:var(--font-head);
  font-style:italic;
  font-size:1.3rem;
  max-width:560px;
  margin-bottom:2em;
  color:var(--beige);
}
.hero-scroll{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6em;
  color:var(--cream); opacity:.75;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
}
.hero-scroll .line{ width:1px; height:34px; background:var(--cream); opacity:.6; animation:scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ===================== SECTIONS ===================== */
section{ padding:7rem 0; position:relative; }
.section-alt{ background:var(--beige); }

.divider-mark{
  display:block; margin:0 auto 1.6rem;
  width:34px; opacity:.9;
}

.section-head{ text-align:center; max-width:680px; margin:0 auto 3.6rem; }
.section-head.left{ text-align:left; margin:0 0 2.4rem; }

/* --- About / intro --- */
.about-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:4.5rem;
  align-items:center;
}
.about-copy .eyebrow{ }
.about-photo{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  aspect-ratio:4/5;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo::after{
  content:'';
  position:absolute; inset:14px;
  border:1px solid rgba(251,248,243,.55);
  pointer-events:none;
}
.stat-row{
  display:flex; gap:2.6rem; margin-top:2.2rem;
  padding-top:2.2rem;
  border-top:1px solid rgba(50,39,30,.15);
}
.stat b{
  display:block;
  font-family:var(--font-head);
  font-size:2.1rem;
  color:var(--green-dark);
  line-height:1;
}
.stat span{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  opacity:.7;
}

/* --- Highlights / Ausstattung --- */
.highlights-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:var(--brown);
  border-radius:2px;
  overflow:hidden;
}
.highlight-card{
  background:var(--cream);
  padding:2.6rem 2.2rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.highlight-card .num{
  font-family:var(--font-head);
  font-size:.85rem;
  color:var(--brown);
  letter-spacing:.15em;
}
.highlight-card h3{ margin-bottom:.2rem; }
.highlight-card p{ font-size:.94rem; margin:0; opacity:.85; }
.highlight-card svg{ width:30px; height:30px; color:var(--green-dark); }

.balcony-banner{
  margin-top:5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:2px;
  overflow:hidden;
  min-height:340px;
}
.balcony-banner img{ width:100%; height:100%; object-fit:cover; }
.balcony-text{
  background:var(--green-dark);
  color:var(--beige);
  padding:3.4rem;
  display:flex; flex-direction:column; justify-content:center;
}
.balcony-text h3{ color:var(--green-light); }
.balcony-text p{ opacity:.9; }

.linen-notice{
  margin-top:2.4rem;
  background:var(--cream);
  border:1px solid rgba(50,39,30,.15);
  border-left:4px solid var(--green-dark);
  border-radius:2px;
  padding:2.4rem 2.8rem;
}
.linen-notice-head{
  display:flex; align-items:center; gap:.9rem;
  margin-bottom:.9rem;
}
.linen-notice-head svg{ width:26px; height:26px; color:var(--green-dark); flex-shrink:0; }
.linen-notice-head h3{ margin:0; }
.linen-notice-lead{ max-width:640px; }
.linen-sizes{
  list-style:none; margin:0 0 1.6rem; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:.7rem 2.4rem;
}
.linen-sizes li{
  display:flex; align-items:baseline; gap:.6rem;
  font-size:.95rem;
}
.linen-sizes .tick{ color:var(--green-dark); font-weight:700; }
.linen-emergency{
  background:var(--beige);
  padding:1.1rem 1.4rem;
  border-radius:2px;
  font-size:.92rem;
  margin:0;
}
.linen-emergency b, .linen-emergency strong{ color:var(--green-dark); }

/* --- Gallery --- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
  grid-auto-flow:dense;
  gap:10px;
}
.gallery-grid button{
  border:none; padding:0; margin:0; background:none; cursor:pointer;
  overflow:hidden; position:relative; border-radius:2px;
}
.gallery-grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.gallery-grid button:hover img{ transform:scale(1.08); }
.gallery-grid button::after{
  content:'+';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
  font-family:var(--font-head);
  font-size:2rem;
  background:rgba(37,63,29,0);
  transition:background .3s ease, opacity .3s ease;
  opacity:0;
}
.gallery-grid button:hover::after{ background:rgba(37,63,29,.28); opacity:1; }
.g-wide{ grid-column:span 2; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:3000;
  background:rgba(28,22,15,.94);
  display:none;
  align-items:center; justify-content:center;
  padding:2rem;
}
.lightbox.open{ display:flex; }
.lightbox figure{ margin:0; max-width:min(92vw, 1100px); text-align:center; }
.lightbox img{ max-height:78vh; margin:0 auto; border:1px solid rgba(251,248,243,.15); }
.lightbox figcaption{ color:var(--beige); font-size:.85rem; letter-spacing:.06em; margin-top:1rem; opacity:.8; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  background:none; border:none; cursor:pointer;
  color:var(--cream); opacity:.8;
  transition:opacity .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ opacity:1; }
.lightbox-close{ top:1.6rem; right:2rem; font-size:2rem; font-family:var(--font-head); }
.lightbox-prev,.lightbox-next{ top:50%; transform:translateY(-50%); font-size:2.4rem; font-family:var(--font-head); }
.lightbox-prev{ left:1.2rem; } .lightbox-next{ right:1.2rem; }

/* --- Reviews --- */
.reviews-section{ background:var(--green-dark); color:var(--beige); position:relative; overflow:hidden; }
.reviews-signet{ position:absolute; left:-8%; bottom:-14%; width:38vw; max-width:480px; opacity:.12; }
.reviews-section .section-head h2{ color:var(--cream); }
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2.6rem 3.2rem;
  position:relative; z-index:1;
}
.review-card{ border-left:2px solid var(--green-light); padding-left:1.6rem; }
.review-card q{
  font-family:var(--font-head);
  font-style:italic;
  font-size:1.5rem;
  color:var(--cream);
  quotes:'“' '”';
  line-height:1.5;
}
.review-card q::before{ content:open-quote; color:var(--green-light); }
.review-card q::after{ content:close-quote; color:var(--green-light); }
.review-card cite{
  display:block; margin-top:1rem; font-style:normal;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6;
}

/* --- Surroundings --- */
.season-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--brown);
  border-radius:2px;
  overflow:hidden;
}
.season-panel{
  position:relative;
  min-height:460px;
  color:var(--cream);
  display:flex;
  align-items:center;
}
.season-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.season-overlay{
  position:absolute; inset:0;
  background:rgba(37,63,29,.58);
}
.season-panel-summer .season-overlay{
  background:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)),
    rgba(37,63,29,.58);
}
.season-panel-inner{ position:relative; z-index:1; padding:2.6rem 3.2rem; width:100%; }
.season-panel h3{
  color:var(--green-light);
  margin-bottom:1.6rem;
}
.season-list{ list-style:none; margin:0; padding:0; }
.season-list li{
  font-size:1rem;
  padding:.9rem 0;
  border-top:1px solid rgba(251,248,243,.28);
  opacity:.96;
}
.season-list li:last-child{ border-bottom:1px solid rgba(251,248,243,.28); }

.info-strip{
  margin-top:3.5rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  text-align:center;
}
.info-strip div b{ display:block; font-family:var(--font-head); font-size:1.5rem; color:var(--green-dark); margin-bottom:.2rem;}
.info-strip div span{ font-size:.82rem; opacity:.75; }

/* --- Booking --- */
.booking-section{
  background:var(--beige);
}
.booking-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}
.price-card{
  background:var(--cream);
  border:1px solid rgba(50,39,30,.12);
  padding:2.6rem;
  border-radius:2px;
}
.price-card .price{
  font-family:var(--font-head);
  font-size:3rem;
  color:var(--green-dark);
  line-height:1;
}
.price-card .price span{ font-size:1rem; font-family:var(--font-body); opacity:.7; }
.price-list{ list-style:none; padding:0; margin:1.6rem 0 0; }
.price-list li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.75rem 0;
  border-top:1px solid rgba(50,39,30,.12);
  font-size:.92rem;
}
.price-list li:first-child{ border-top:none; }
.price-list b{ font-weight:600; color:var(--green-dark); }
.rules-list{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid rgba(50,39,30,.12); }
.rules-list li{ font-size:.88rem; opacity:.85; margin-bottom:.5rem; padding-left:1.2rem; position:relative; }
.rules-list li::before{ content:'—'; position:absolute; left:0; color:var(--brown); }
.contact-box .btn{ margin-top:1rem; }
.contact-line{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.3rem; }
.contact-line svg{ width:20px; height:20px; margin-top:.2rem; flex-shrink:0; color:var(--green-dark); }
.hosts{ margin-top:2.4rem; padding-top:2rem; border-top:1px solid rgba(50,39,30,.15); }
.external-link{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:1.6rem;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--green-dark);
  padding-bottom:.15em;
}

/* ===================== FOOTER ===================== */
footer.site-footer{
  position:relative;
  background:var(--green-dark-2);
  color:var(--beige);
  padding-top:1px;
  overflow:hidden;
}
.footer-panorama{
  width:100%;
  height:auto;
  display:block;
  margin-bottom:-2px;
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:1rem 40px 3rem;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:3rem;
}
.footer-brand img{ height:44px; margin-bottom:1.2rem; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:.88rem; opacity:.75; max-width:280px; }
footer h4{
  color:var(--green-light);
  font-family:var(--font-body);
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
  font-weight:600;
}
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-links a{ font-size:.9rem; opacity:.82; transition:opacity .2s; }
.footer-links a:hover{ opacity:1; }
.footer-bottom{
  border-top:1px solid rgba(251,248,243,.12);
  padding:1.6rem 40px;
}
.footer-bottom-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.76rem; opacity:.55; letter-spacing:.02em;
}
.footer-bottom a{ text-decoration:underline; text-underline-offset:3px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px){
  .about-grid, .booking-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .highlights-grid{ grid-template-columns:repeat(2,1fr); }
  .season-grid{ grid-template-columns:1fr; }
  .balcony-banner{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:180px; }
}
@media (max-width: 720px){
  .wrap, .header-inner, .hero-inner, .footer-inner, .footer-bottom-inner{ padding-left:22px; padding-right:22px; }
  nav.main-nav{
    position:fixed; top:var(--header-h-scrolled); left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--green-dark);
    padding:0 22px; max-height:0; overflow:hidden;
    transition:max-height .35s ease, padding .35s ease;
  }
  nav.main-nav.open{ max-height:420px; padding:1.2rem 22px 1.6rem; }
  nav.main-nav a{ padding:.7em 0; width:100%; border-bottom:1px solid rgba(251,248,243,.12); }
  .nav-toggle{ display:block; }
  .header-right{ gap:1rem; }
  .logo-compact{ height:70px; }
  #site-header{ --header-h:100px; }
  .hero-inner h1{ font-size:clamp(1.7rem, 8.6vw, 2.7rem); letter-spacing:.03em; }
  .hero-signet{ width:80vw; opacity:.1; }
  .highlights-grid{ grid-template-columns:1fr; }
  .info-strip{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .g-wide{ grid-column:span 2; }
  section{ padding:4.5rem 0; }
  .footer-inner{ grid-template-columns:1fr; }
  .linen-notice{ padding:1.8rem; }
  .linen-sizes{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--green-light);
  outline-offset:3px;
}

/* Impressum page */
.legal-page{ padding-top:calc(var(--header-h-scrolled) + 5rem); padding-bottom:6rem; max-width:760px; margin:0 auto; }
.legal-page h1{ font-size:2.2rem; }
.legal-page h2{ font-size:1.3rem; margin-top:2rem; }
.legal-page p{ font-size:.96rem; }
.back-link{ display:inline-flex; align-items:center; gap:.5em; margin-bottom:2rem; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green-dark); }