/* newliving eG — newliving.info */

@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/zilla-slab-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/zilla-slab-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2')}

:root{
  --paper:#F7F5F0;
  --ink:#212A22;
  --green:#2C5A41;
  --green-deep:#1E3A2C;
  --sage:#E6ECE3;
  --line:#D8D4CA;
  --scale:linear-gradient(90deg,#2C7A3F 0%,#6FAE3E 35%,#C9C531 70%,#E0A62B 100%);
  --display:'Zilla Slab',Georgia,serif;
  --body:'Source Sans 3',system-ui,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--body);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper)}
img{max-width:100%;display:block}
a{color:var(--green)}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}

h1,h2,h3{font-family:var(--display);line-height:1.15;color:var(--ink)}
h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:700}
h3{font-size:1.25rem;font-weight:600}

/* Signatur: Energieskala-Linie unter Überschriften */
.scale-rule{width:120px;height:6px;border-radius:3px;background:var(--scale);margin:1rem 0 1.5rem}
.scale-rule.center{margin-left:auto;margin-right:auto}

.eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--green);margin-bottom:.6rem}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.25rem;max-width:1100px;margin:0 auto}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.25rem}
.brand img{height:40px;width:auto}
.nav ul{display:flex;gap:1.4rem;list-style:none;align-items:center}
.nav a.link{text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.nav a.link:hover,.nav a.link[aria-current]{color:var(--green)}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font-weight:600;padding:.65rem 1.3rem;border-radius:6px;border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--green-deep)}
.btn.ghost{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn.ghost:hover{background:var(--sage)}
.btn:focus-visible,a:focus-visible{outline:3px solid #6FAE3E;outline-offset:2px}
#navToggle{display:none;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--ink)}

/* Hero */
.hero{position:relative;color:#fff;background:var(--green-deep)}
.hero .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.38}
.hero .inner{position:relative;padding:6rem 1.25rem 5.5rem;max-width:1100px;margin:0 auto}
.hero h1{color:#fff;max-width:640px}
.hero p{max-width:560px;margin:1.2rem 0 1.8rem;font-size:1.15rem}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap}
.hero .btn.ghost{color:#fff;border-color:#fff}
.hero .btn.ghost:hover{background:rgba(255,255,255,.15)}

/* Sections */
section{padding:4rem 0}
section.alt{background:var(--sage)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.8rem;display:flex;flex-direction:column;gap:.6rem}
.card h3{margin-bottom:.2rem}
.card .btn{margin-top:auto;align-self:flex-start}
.photo{border-radius:10px;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}

/* Prozess-Schritte */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.step{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.4rem}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--green);display:block;margin-bottom:.4rem}

/* Vorteile */
.checks{list-style:none;display:grid;gap:.7rem}
.checks li{padding-left:1.8rem;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:700}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery figure{border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{padding:.6rem .9rem;font-size:.9rem;color:#4a544b}

/* Kontakt */
form{display:grid;gap:1rem;max-width:560px}
label{font-weight:600;font-size:.95rem}
input,textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:6px;font:inherit;background:#fff}
input:focus,textarea:focus{outline:3px solid #6FAE3E;outline-offset:1px}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;font-weight:400}
.consent input{width:auto;margin-top:.25rem}
.hp{position:absolute;left:-9999px}
.contact-info{display:grid;gap:.4rem}
.contact-info a{font-weight:600}

/* CTA-Band */
.cta-band{background:var(--green-deep);color:#fff;text-align:center;padding:3.5rem 1.25rem}
.cta-band h2{color:#fff;margin-bottom:1.2rem}

/* Footer */
footer{background:var(--ink);color:#cfd6cf;padding:2.5rem 0;font-size:.92rem}
footer .cols{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer a{color:#fff}
footer .legal{margin-top:1.5rem;border-top:1px solid #3a453b;padding-top:1rem;color:#9aa79b}

@media (max-width:860px){
  .grid2,.grid3,.steps,.gallery{grid-template-columns:1fr 1fr}
  .hero .inner{padding:4rem 1.25rem}
}
@media (max-width:640px){
  #navToggle{display:block}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;padding:1rem 1.25rem;border-bottom:1px solid var(--line);gap:1rem}
  .nav ul.open{display:flex}
  .grid2,.grid3,.steps,.gallery{grid-template-columns:1fr}
}