:root {
  --sage:#A9B8A1;
  --sage-dark:#5F7461;
  --sage-soft:#EAF0E7;
  --cream:#F8F5EF;
  --warm:#EFE7DC;
  --ink:#2F332F;
  --muted:#6B706B;
  --accent:#8C5B52;
  --white:#FFFFFF;
  --shadow:0 18px 40px rgba(47,51,47,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  position:relative;
  min-height:100vh;
}

.page-shell{
  position:relative;
  max-width:calc(100% - 26px);
  margin:13px auto;
  background:transparent;
  border-radius:20px;
  overflow:hidden;
}

.page-frame{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  border-radius:20px;
  background:
    linear-gradient(rgba(248,245,239,0.08), rgba(248,245,239,0.08)),
    url('../images/Minimalistischer_botanischer_Rahmen_in_Salbeigrün.png') center center / contain no-repeat;
  box-shadow:inset 0 0 0 1px rgba(94,113,94,0.18);
  opacity:.9;
}

header, main, footer {
  position:relative;
  z-index:1;
}
h1,h2,h3{font-family:Georgia, "Times New Roman", serif; font-weight:500; line-height:1.1; margin:0 0 .6rem}
h1{font-size:clamp(2.7rem,7vw,5.6rem); letter-spacing:-.03em}
h2{font-size:clamp(2rem,4vw,3.3rem)}
h3{font-size:1.35rem}
p{margin:.3rem 0 1rem}
a{color:inherit; text-decoration:none}
.container{width:min(1180px,92vw); margin:auto}
.topbar{
  position:relative; z-index:20;
  background:rgba(248,245,239,1);
  border-bottom:1px solid rgba(47,51,47,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
.brand{font-family:Georgia,serif; font-size:1.15rem}
.navlinks{display:flex; gap:1.4rem; font-size:.95rem}
.nav-toggle{display:none;background:transparent;border:0;padding:.4rem;margin-right:.25rem}
.nav-toggle:focus{outline:3px solid var(--accent);outline-offset:4px}
.burger{display:inline-block;width:28px;height:20px;position:relative}
.burger span{display:block;background:var(--ink);height:2px;border-radius:2px;position:absolute;left:0;right:0}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:9px}
.burger span:nth-child(3){bottom:0}
.btn{
  display:inline-block; padding:.9rem 1.2rem; border-radius:999px;
  background:var(--sage-dark); color:white; font-weight:600;
  transition:.2s transform,.2s opacity;
}
.btn:hover{transform:translateY(-1px); opacity:.94}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(47,51,47,.18)}
.hero{padding:4rem 0 3rem}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:3rem;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--sage-dark);font-weight:700}
.lead{font-size:1.18rem;color:var(--muted);max-width:700px}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.hero-card{
  position:relative; background:var(--sage-soft); border-radius:34px; padding:1rem; box-shadow:var(--shadow); overflow:visible;
}
.hero-card .hero-photo{position:relative; z-index:1; width:100%;display:block;border-radius:26px;height:auto;aspect-ratio:auto;object-fit:cover;object-position:center top}
.hero-card .hero-frame{position:absolute; inset:-6% -8% -8% -8%; width:116%; height:116%; z-index:2; pointer-events:none; object-fit:contain; opacity:.96; filter:drop-shadow(0 7px 18px rgba(47,51,47,.12));}
.trustline{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;color:var(--muted);font-size:.95rem}
.trustline span{padding:.55rem .8rem;background:white;border-radius:999px;border:1px solid rgba(47,51,47,.08)}
.section{padding:5.5rem 0}
.section.soft{background:var(--sage-soft)}
.kicker{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.76rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.card{background:white;border-radius:24px;padding:1.5rem;box-shadow:var(--shadow);border:1px solid rgba(47,51,47,.06)}
.card p{color:var(--muted)}
.icon{font-size:1.5rem;margin-bottom:.9rem}
.about-box{background:var(--warm);border-radius:28px;padding:2rem}
.quote{font-family:Georgia,serif;font-size:1.45rem;line-height:1.35}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.step{padding:1.4rem;border-top:1px solid rgba(47,51,47,.18)}
.num{font-family:Georgia,serif;font-size:2rem;color:var(--sage-dark)}
.pricegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.price{background:white;border-radius:24px;padding:1.6rem;border:1px solid rgba(47,51,47,.08)}
.price strong{font-size:1.7rem;font-family:Georgia,serif}
.cta{background:var(--sage-dark);color:white;border-radius:32px;padding:2.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.cta .btn{background:white;color:var(--sage-dark)}
footer{padding:2.2rem 0;color:var(--muted);font-size:.9rem}
.note{font-size:.9rem;color:var(--muted);margin-top:1.2rem}
@media (max-width:900px){
  .hero-grid,.two-col{grid-template-columns:1fr}
  .cards,.steps,.pricegrid{grid-template-columns:1fr}
  /* On smaller screens hide inline nav; show burger */
  .navlinks{display:none}
  .nav-toggle{display:inline-flex}
  .hero{padding-top:2.4rem}
  .cta{flex-direction:column;align-items:flex-start}
}

:root{--accent:#79434b;--cream:#faf6ef;--warm:#eee3d5;--sage-dark:#4e6755}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.nav{gap:1.5rem;flex-wrap:wrap}.brand{line-height:1.25}.brand small{display:block;font-family:system-ui,sans-serif;font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;margin-top:.35rem;color:var(--muted)}
.navlinks{flex-wrap:wrap;align-items:center}.navlinks a:hover{color:var(--accent)}
.hero{padding-top:4.5rem}.hero h1{font-size:clamp(2.8rem,5.7vw,5rem)}
.hero-card{padding:.6rem;background:var(--warm);border-radius:120px 120px 24px 24px;overflow:visible}.hero-card .hero-photo{position:relative; z-index:1; border-radius:114px 114px 18px 18px;height:100%;max-height:640px;background:transparent;object-fit:cover;object-position:center top;display:block;width:100%}
.hero-card .hero-frame{position:absolute; inset:-8% -10% -8% -10%; width:120%; height:120%; z-index:2; pointer-events:none; object-fit:contain; opacity:.96; filter:drop-shadow(0 8px 20px rgba(47,51,47,.12));}
.hero-card figcaption{position:relative; z-index:3; text-align:center;font-size:.85rem;color:var(--muted);padding:.75rem .3rem .4rem}.hero-card{margin:0}
.card{box-shadow:none;border-radius:14px;padding:1.8rem}.icon{color:var(--accent)}
.nature{position:relative;margin:1rem auto 0;border-radius:20px;overflow:hidden;min-height:330px;display:flex;align-items:flex-end;background:linear-gradient(0deg,rgba(20,35,22,.8),transparent 75%),url('../images/waldbach.jpg') center/cover}.nature p{color:#fff;font-family:Georgia,serif;font-size:clamp(1.7rem,4vw,2.6rem);padding:2rem;max-width:760px;line-height:1.3}
.notice{padding:1rem 1.3rem;border-left:3px solid var(--accent);background:var(--warm);font-size:.92rem;margin:1.5rem 0}
.page-heading{max-width:760px}
.page-heading h1{font-size:clamp(2.6rem,5vw,4rem)}
.about-layout{display:grid;grid-template-columns:1fr;gap:2rem}
.about-visual{order:1}
.page-heading{order:2}
.about-copy{order:3}
.about-note{order:4}
article ul{margin:1rem 0 1.5rem 1.1rem; padding-left:1rem; color:var(--ink)}
article li{margin-bottom:.55rem; line-height:1.6}
article .btn{margin-top:1rem}
.about-photo{display:block;width:min(100%, 620px);height:auto;border-radius:24px;margin:0 auto}
.about-visual figure{margin:0}
.about-visual figcaption{margin-top:.7rem; text-align:center; color:var(--muted); font-size:.9rem}
.contact-link{color:#0b5ed7;text-decoration:underline;text-underline-offset:0.18em;text-decoration-thickness:2px}
.contact-link:hover,.contact-link:focus-visible{color:#0a4bb3}
.contact-form{display:grid;gap:1.2rem}.form-row{display:grid;gap:.4rem}input,textarea{width:100%;font:inherit;padding:.9rem;border:1px solid #9caa98;border-radius:8px;background:#fff;color:var(--ink)}input:focus,textarea:focus{outline:2px solid var(--sage-dark);outline-offset:3px}label{font-weight:600}button{font:inherit;border:0;cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}.check{display:flex;gap:.6rem;align-items:flex-start}.check input{width:auto;margin-top:.4rem}.check label{font-weight:400;font-size:.9rem}.privacy-link{color:var(--accent);text-decoration:underline;text-underline-offset:0.18em;text-decoration-thickness:2px}.privacy-link:hover,.privacy-link:focus-visible{color:var(--sage-dark)}.hp{display:none}.alert{padding:1rem;border-radius:8px;margin:1rem 0;background:var(--sage-soft)}.alert.error{background:#f6e5e1}
.skip{position:absolute;left:-10000px}.skip:focus{left:1rem;top:1rem;z-index:100;background:white;padding:1rem}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.footer-inner nav{display:flex;gap:1rem}footer a{text-decoration:underline;text-underline-offset:4px}.about-photo{display:block;width:100%;height:auto;max-width:460px;border-radius:24px;object-fit:cover;object-position:center top;background:var(--warm)}.page-heading{max-width:760px}.page-heading h1{font-size:clamp(2.6rem,5vw,4rem)}.contact-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem}.contact-box{padding:2rem;background:white;border-radius:20px;border:1px solid #d5ddcf}.active{color:var(--accent)}
@media (max-width:900px){
  /* Default: hide inline nav links on small screens and show burger */
  .navlinks{display:none}
  .nav-toggle{display:inline-flex}
  .nav>.btn{font-size:.85rem;padding:.65rem .9rem}
  .brand{font-size:1rem}
  .hero-grid{gap:2rem}
  .hero-card{max-width:480px;width:100%;margin:auto}
  .contact-layout{grid-template-columns:1fr;gap:2rem}
  .section{padding:3.5rem 0}
  .nature{min-height:270px}
  .two-col{gap:2rem}
}
/* Responsive navigation when toggled open */
@media (max-width:900px){
  .nav.open .navlinks{display:flex;flex-direction:column;gap:1rem;padding:1rem 0;background:transparent;width:100%}
  .nav.open .navlinks a{padding:.6rem 0;border-top:1px solid rgba(47,51,47,.04)}
  .nav.open .btn{order:4;width:100%;margin-top:.6rem}
}

/* Smaller devices adjustments */
@media (max-width:480px){
  h1{font-size:clamp(1.8rem,6vw,3rem)}
  h2{font-size:clamp(1.4rem,4.5vw,2rem)}
  .container{width:94vw}
  .brand{font-size:1rem}
  .nav{padding:.6rem 0}
  .hero{padding:2rem 0}
  .lead{font-size:1rem}
  .btn{padding:.7rem 1rem}
  .contact-box{padding:1rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}