/* ferienhaus-anja.de, Gestaltung nach Entwurf A "Waldhaus" */
:root{--pine:#2F6B47;--moss:#4F7A3A;--moss-soft:#E1EDD6;--bark:#7A5230;--birch:#EEF0EA;--paper:#FFFFFF;--ink:#1B211C;--muted:#5B665C;--line:#D7DCD2;--focus:#4F7A3A}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--birch);color:var(--ink);font-family:"Alegreya Sans",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Alegreya",Georgia,serif;margin:0;text-wrap:balance;line-height:1.1;font-weight:700}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;padding:8px 12px;border-radius:4px;z-index:2000}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--moss)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:4px;font-weight:700;text-decoration:none;font-size:16px;border:1.5px solid transparent;font-family:inherit;cursor:pointer}
.btn.primary{background:var(--moss);color:#fff}
.btn.ghost{border-color:currentColor;color:#fff;background:rgba(0,0,0,.15)}
.btn.dark{background:var(--pine);color:#fff}
.btn.outline{border-color:var(--pine);color:var(--pine);background:transparent}
.btn.white{background:#fff;color:var(--pine)}
.btn svg{width:18px;height:18px}
section{padding:84px 0}
.section-head{margin-bottom:28px}
.section-head h2{font-size:clamp(30px,3.6vw,44px);margin-top:8px}
.section-head p{margin:10px 0 0;color:var(--muted);max-width:60ch}
.lead{font-size:19px;color:#2A332C;max-width:62ch}

/* Startseite */
.hero{position:relative;min-height:640px;display:grid;align-items:end;color:#fff;isolation:isolate}
.hero picture,.hero img.bg{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero img.bg{object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,70,48,.32) 0%,rgba(30,70,48,.12) 40%,rgba(30,70,48,.78) 100%)}
.hero .wrap{padding-bottom:56px;padding-top:150px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end}
.hero h1{font-size:clamp(38px,5.6vw,66px)}
.hero p{font-size:20px;max-width:52ch;margin:16px 0 26px;color:rgba(255,255,255,.92)}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .card{background:rgba(255,255,255,.96);color:var(--ink);border-radius:6px;padding:22px 24px;justify-self:end;width:min(100%,360px);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hero .card .eyebrow{color:var(--bark)}
.hero .card .price{font-family:"Alegreya",serif;font-size:44px;font-weight:700;line-height:1;margin:8px 0 2px;color:var(--pine);font-variant-numeric:tabular-nums}
.hero .card .price small{font-family:"Alegreya Sans",sans-serif;font-size:15px;font-weight:500;color:var(--muted)}
.hero .card ul{list-style:none;padding:0;margin:12px 0 16px;font-size:15px;color:var(--muted);display:grid;gap:4px}
.facts{background:var(--pine);color:#fff}
.facts .wrap{display:grid;grid-template-columns:repeat(5,1fr)}
.facts .wrap > div{padding:22px 18px;border-left:1px solid rgba(255,255,255,.14);font-size:15px;line-height:1.35}
.facts .wrap > div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-family:"Alegreya",serif;font-size:22px;font-weight:700;margin-bottom:2px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.split h2{font-size:clamp(30px,3.6vw,44px);margin:10px 0 18px}
.split p{margin:0 0 14px;max-width:58ch;color:#2A332C}
.photo-stack{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:520px}
.photo-stack img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}
.photo-stack picture{display:block;min-height:0;min-width:0}
.photo-stack picture:first-child{grid-row:1/3}
picture{display:block}
source{display:none}
.grid figure picture,.gal a picture,.familie picture,.room-pics picture{height:100%}
.gallery{background:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid figure{margin:0;position:relative;aspect-ratio:4/3.4;overflow:hidden;border-radius:4px;background:var(--birch)}
.grid img{width:100%;height:100%;object-fit:cover;display:block}
.grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;color:#fff;font-size:15px;background:linear-gradient(180deg,transparent,rgba(30,70,48,.75))}
.familie .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.familie h2{font-size:clamp(30px,3.6vw,44px);margin:10px 0 18px}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;font-size:16px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.checks li::before{content:"";width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--moss-soft);border:2px solid var(--moss);box-shadow:inset 0 0 0 3px var(--moss-soft)}
.familie img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block}
.duo{background:var(--paper)}
.duo .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.pricebox{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.pricebox header{background:var(--pine);color:#fff;padding:20px 24px}
.pricebox header h2{font-size:28px}
.pricebox header p{margin:4px 0 0;color:rgba(255,255,255,.8);font-size:15px}
.pricebox table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pricebox td{padding:14px 24px;border-top:1px solid var(--line);vertical-align:top}
.pricebox td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.pricebox .incl{padding:16px 24px 20px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.pricebox .incl b{color:var(--ink)}
.quotes h2{font-size:clamp(30px,3.6vw,44px);margin:8px 0 22px}
blockquote{margin:0 0 18px;padding:22px 24px 20px 28px;background:var(--birch);border-left:3px solid var(--bark);border-radius:0 6px 6px 0;font-family:"Alegreya",serif;font-size:19px;font-style:italic;line-height:1.5}
blockquote footer{margin-top:12px;font-family:"Alegreya Sans",sans-serif;font-style:normal;font-size:14px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.ziele{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0;margin:0 0 22px}
.ziele li{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:16px 18px;display:grid;gap:2px}
.ziele li a{text-decoration:none}
.ziele b{font-family:"Alegreya",serif;font-size:20px;font-weight:700}
.ziele span{font-size:14px;color:var(--muted)}
.kontakt{background:var(--pine);color:#fff}
.kontakt .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.kontakt h2{font-size:clamp(30px,3.6vw,44px);margin:8px 0 14px}
.kontakt p{color:rgba(255,255,255,.85);max-width:52ch}
.kontakt .eyebrow{color:#DCEFCB}
.kontakt dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0;font-size:16px}
.kontakt dt{color:#DCEFCB;font-weight:700}
.kontakt dd{margin:0}
.kontakt .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* Unterseiten */
.page-head{background:var(--pine);color:#fff;padding:120px 0 48px}
.page-head .eyebrow{color:#DCEFCB}
.page-head h1{font-size:clamp(34px,5vw,58px);margin-top:8px}
.page-head p{margin:16px 0 0;font-size:19px;color:rgba(255,255,255,.85);max-width:60ch}
.prose{max-width:70ch}
.prose p{margin:0 0 16px}
.prose h2{font-size:clamp(26px,3vw,36px);margin:40px 0 14px}
.prose h3{font-size:22px;margin:28px 0 10px}
.prose ul{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose a{color:var(--pine);text-decoration-thickness:1px;text-underline-offset:3px}
.room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:36px 0;border-top:1px solid var(--line)}
.room:first-of-type{border-top:0}
.room:nth-of-type(even) .room-text{order:2}
.room h2{font-size:clamp(26px,3vw,36px);margin:8px 0 12px}
.room p{margin:0 0 12px;color:#2A332C}
.room-pics{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.room-pics img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block}
.room-pics.single{grid-template-columns:1fr}
.room-pics.single img{aspect-ratio:4/3}
.list-two{columns:2;column-gap:32px;padding-left:20px}
.list-two li{break-inside:avoid;margin-bottom:6px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal a{display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:4px;background:var(--paper)}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gal a:hover img{transform:scale(1.03)}
.gal a span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-size:14px;background:linear-gradient(180deg,transparent,rgba(30,70,48,.7))}
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(10,15,11,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox[open]{display:flex}
.lightbox img{max-width:100%;max-height:calc(100vh - 120px);border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox figcaption{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#fff;font-size:15px}
.lightbox button{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:24px;cursor:pointer}
.lightbox .prev,.lightbox .next{top:50%;transform:translateY(-50%);right:auto;left:16px}
.lightbox .next{left:auto;right:16px}
.pricetable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pricetable th,.pricetable td{padding:14px 18px;text-align:left;border-top:1px solid var(--line)}
.pricetable th{background:var(--pine);color:#fff;font-family:"Alegreya",serif;font-size:19px;border-top:0}
.pricetable td:last-child,.pricetable th:last-child{text-align:right;white-space:nowrap}
.pricetable td:last-child{font-weight:700}
.beispiel{background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px 22px;margin-top:22px}
.beispiel table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.beispiel td{padding:6px 0;border-bottom:1px solid var(--line)}
.beispiel td:last-child{text-align:right}
.beispiel tr:last-child td{border-bottom:0;font-weight:700;padding-top:10px}
.review{background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px 28px;margin-bottom:16px}
.review p{font-family:"Alegreya",serif;font-size:19px;line-height:1.55;margin:0 0 12px}
.review footer{font-size:14px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.gb{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start;padding:30px 0;border-top:1px solid var(--line)}
.gb img{width:100%;border-radius:4px;border:1px solid var(--line);display:block}
.gb p{font-family:"Alegreya",serif;font-size:19px;line-height:1.55;margin:0 0 12px}
.gb footer{font-size:14px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.ziel-gruppe h2{font-size:clamp(26px,3vw,36px);margin:40px 0 16px}
.ziel-gruppe:first-of-type h2{margin-top:0}
.form{display:grid;gap:14px;max-width:560px}
.form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.form input,.form textarea,.form select{font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form small{color:var(--muted);font-weight:400}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px 26px}
.contact-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0}
.contact-card dt{color:var(--muted);font-weight:700}
.contact-card dd{margin:0}
.contact-card .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.note{background:var(--moss-soft);border-left:3px solid var(--moss);padding:14px 18px;border-radius:0 6px 6px 0;margin:20px 0}

/* Fußzeile */
footer.site{background:#27573D;color:#DCE6D8;padding:48px 0 28px;font-size:15px}
footer.site .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
footer.site h3{font-family:"Alegreya",serif;font-size:19px;color:#fff;margin-bottom:10px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer.site a{text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:14px;color:#B5C4B5}

@media (max-width:1023px){
  /* ohne Kapselzeile braucht der Kopf weniger Luft nach oben */
  .hero .wrap{padding-top:72px}
  .page-head{padding-top:52px;padding-bottom:40px}
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);padding-top:72px}
  .hero .card{justify-self:stretch;width:auto}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .facts .wrap > div{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:0}
  section{padding:56px 0}
  .split,.familie .inner,.duo .wrap,.kontakt .wrap,.room,.gb,.contact-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .room:nth-of-type(even) .room-text{order:0}
  .photo-stack{height:380px}
  .grid,.ziele,.gal{grid-template-columns:1fr 1fr}
  .checks{grid-template-columns:1fr}
  .list-two{columns:1}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid,.ziele,.gal,.facts .wrap,.form .row,footer.site .cols{grid-template-columns:1fr}
  .room-pics{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gal img{transition:none}}

/* ---------- Bewegung: wenig, kurz, mit Bedeutung ---------- */
@media (prefers-reduced-motion: no-preference){
  /* Einstieg auf der Startseite: Text und Preiskarte kommen nacheinander, das Foto setzt sich ruhig */
  .hero .wrap > *{animation:fade-up .55s cubic-bezier(.2,.7,.2,1) both}
  .hero .wrap > :nth-child(2){animation-delay:.14s}
  .hero img.bg{animation:settle 1.8s cubic-bezier(.2,.7,.2,1) both}
  .page-head .wrap > *{animation:fade-up .5s cubic-bezier(.2,.7,.2,1) both}
  .page-head .wrap > :nth-child(2){animation-delay:.06s}
  .page-head .wrap > :nth-child(3){animation-delay:.12s}
  /* Aufdecken beim Scrollen: nur wenn JS die Klasse setzt, sonst ist alles sofort sichtbar */
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .35s ease-out,transform .35s ease-out;transition-delay:calc(var(--i,0)*45ms)}
  .reveal.in{opacity:1;transform:none}
  .btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
  .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(30,70,48,.18)}
  .grid figure img,.room-pics img,.familie img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .grid figure:hover img,.room-pics picture:hover img{transform:scale(1.03)}
  .ziele li{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .ziele li:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,70,48,.1);border-color:var(--moss)}
  .lightbox[open] img{animation:fade-up .25s ease-out both}
}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.045)}to{transform:scale(1)}}

/* Tippflächen und Ränder auf kleinen Bildschirmen */
.ziele li a{display:block;padding:2px 0}
.form small,.pricebox .incl small{font-size:13px}
@media (max-width:1023px){
  footer.site ul{gap:2px}
  footer.site ul a{display:inline-block;padding:7px 0}
  footer.site .bottom a{display:inline-block;padding:8px 4px}
  .prose a,.incl a{padding:4px 0;display:inline-block}
}

/* Häufige Fragen */
details.faq{border-top:1px solid var(--line);padding:4px 0}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;font-family:"Alegreya",serif;font-size:21px;font-weight:700;padding:14px 32px 14px 0;position:relative;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:26px;color:var(--moss);font-family:"Alegreya Sans",sans-serif;font-weight:400}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:0 0 16px;color:#2A332C;max-width:68ch}