/* Unser Naturhaus – Stylesheet
   Schriften werden lokal ausgeliefert (kein externer Dienst, keine Cookies). */

@font-face{font-family:'NH Display';src:url('fonts/lmroman10-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'NH Sans';src:url('fonts/lato-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'NH Sans';src:url('fonts/lato-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'NH Sans';src:url('fonts/lato-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'NH Sans';src:url('fonts/lato-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --cream:#F3F1EA;
  --cream-2:#EDEAE1;
  --ink:#3B4038;
  --ink-2:#4E5449;
  --ink-3:#6A7063;
  --green:#61754E;
  --green-dark:#4E603E;
  --sage:#C7D3C0;
  --sage-2:#DCE4D6;
  --maxw:44rem;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink-2);
  font-family:'NH Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1.19rem;          /* bewusst groß – die Zielgruppe liest ohne Brille */
  line-height:1.62;
  overflow-x:hidden;
}

/* ---------------------------------------------------------- Dekor */
.leaves{
  position:absolute;
  width:min(46vw,26rem);
  pointer-events:none;
  user-select:none;
  z-index:0;
  opacity:.9;
}
.leaves--top{top:-2rem;right:-3rem}
.leaves--bottom{bottom:-2rem;left:-3rem;transform:rotate(180deg)}

/* ---------------------------------------------------------- Layout */
.wrap{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.4rem;
}

main{padding-bottom:1rem}

section{padding:2.2rem 0}

.rule{
  width:5.5rem;height:1px;border:0;
  background:var(--sage);
  margin:2.6rem auto;
}

/* ---------------------------------------------------------- Kopf */
.hero{padding:3.4rem 0 1rem;text-align:center}

.hero h1{
  font-family:'NH Display',Georgia,serif;
  font-weight:400;
  font-size:4.6rem;font-size:clamp(3.2rem,15vw,5.6rem);
  line-height:.95;
  letter-spacing:.06em;
  color:var(--ink);
  margin:0;
  text-indent:.06em;         /* gleicht das Tracking rechts aus */
}

.hero .kicker{
  font-weight:300;
  font-size:1.1rem;font-size:clamp(.95rem,3.6vw,1.22rem);
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:.9rem 0 0;
}

.house{
  display:block;
  width:min(100%,30rem);
  height:auto;
  margin:1.6rem auto .4rem;
}

.claim{
  font-weight:700;
  font-size:1.15rem;font-size:clamp(1.02rem,4vw,1.25rem);
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--ink);
  text-align:center;
  margin:.6rem auto 0;
  max-width:32rem;
  line-height:1.45;
}

.lead{
  text-align:center;
  font-size:1.16rem;
  margin:1.4rem auto 0;
  max-width:34rem;
}

/* ---------------------------------------------------------- Inhalt */
h2{
  font-family:'NH Display',Georgia,serif;
  font-weight:400;
  font-size:2.1rem;font-size:clamp(1.8rem,6.4vw,2.4rem);
  letter-spacing:.02em;
  color:var(--ink);
  margin:0 0 1rem;
  text-align:center;
}

p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

.list{list-style:none;margin:1.2rem 0 0;padding:0}
.list li{
  position:relative;
  padding:.15rem 0 .15rem 2rem;
  margin-bottom:.85rem;
}
.list li::before{
  content:"";
  position:absolute;left:.15rem;top:.85em;
  width:.62rem;height:.62rem;
  border-radius:50% 0 50% 50%;
  background:var(--green);
  opacity:.75;
  transform:rotate(-10deg);
}

.steps{
  list-style:none;
  counter-reset:step;
  margin:1.4rem 0 0;padding:0;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding-left:3.4rem;
  margin-bottom:1.5rem;
}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:-.1rem;
  width:2.3rem;height:2.3rem;
  display:block;line-height:2.3rem;text-align:center;
  border-radius:50%;
  background:var(--sage-2);
  color:var(--green-dark);
  font-family:'NH Display',Georgia,serif;
  font-size:1.15rem;
}
.steps strong{color:var(--ink);font-weight:600}

.note{
  background:var(--cream-2);
  border-left:3px solid var(--sage);
  padding:1.1rem 1.3rem;
  margin-top:1.6rem;
}

/* ---------------------------------------------------------- Kontakt */
.contact{
  margin:2.4rem 0 1rem;
  padding:2.6rem 1.6rem 2.4rem;
  text-align:center;
  background:var(--green);
  /* leicht unregelmäßig – nimmt die Pinselform des Flyers auf */
  border-radius:2.6rem 3.6rem 2.8rem 3.3rem / 1.9rem 1.6rem 2.1rem 1.8rem;
}

.contact h2{color:#fff;font-size:1.7rem;font-size:clamp(1.5rem,5.6vw,1.95rem);margin-bottom:1.2rem}

.contact a{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:1.2rem;
  font-size:clamp(1.08rem,4.4vw,1.32rem);
  padding:.35rem 0 .25rem;
  border-bottom:1px solid rgba(255,255,255,.45);
  margin:.4rem 0;
  overflow-wrap:anywhere;
}
.contact a:hover,.contact a:focus{border-bottom-color:#fff}
.contact svg{
  width:1.1em;height:1.1em;fill:#fff;
  vertical-align:-.16em;margin-right:.55rem;
}
.contact .row{display:block}
.contact .sig{
  color:rgba(255,255,255,.9);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.9rem;
  font-weight:300;
  margin-top:1.5rem;
}

/* ---------------------------------------------------------- Fuß */
footer{
  text-align:center;
  padding:2.2rem 0 3rem;
  color:var(--ink-3);
  font-size:.95rem;
}
footer a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--sage)}
footer a:hover,footer a:focus{color:var(--ink);border-bottom-color:var(--ink-3)}
footer .sep{margin:0 .6rem;color:var(--sage)}

/* ---------------------------------------------------------- Rechtstexte */
.legal{padding-top:2.6rem}
.legal h1{
  font-family:'NH Display',Georgia,serif;
  font-weight:400;
  font-size:2.4rem;font-size:clamp(2rem,7vw,2.8rem);
  color:var(--ink);
  margin:0 0 1.8rem;
  text-align:center;
}
.legal h2{text-align:left;font-size:1.55rem;font-size:clamp(1.35rem,5vw,1.7rem);margin:2.4rem 0 .8rem}
.legal h3{
  font-family:'NH Sans',sans-serif;font-weight:700;
  font-size:1.08rem;color:var(--ink);margin:1.7rem 0 .5rem;
}
.legal{font-size:1.05rem;line-height:1.62}
.legal ul{padding-left:1.3rem}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--green-dark)}
.back{display:inline-block;margin-bottom:1.4rem;font-size:.98rem}

@media (max-width:480px){
  body{font-size:1.13rem}
  .leaves{width:60vw}
  .contact{padding:2.4rem 1rem 2.7rem}
}

@media (prefers-reduced-motion:no-preference){
  a{transition:border-color .15s ease,color .15s ease}
}