/* NESTWERK – Zuhause im Ort. Designsystem: Waldgrün #1F3D36, Holz #B8875A, Leinen #F6F1E9, Moos #6E7F4E
   Schriften: Cormorant (Überschriften, Gefühl) + Source Sans 3 (Text, Klarheit) – lokal eingebunden, keine Google-Verbindung */
@font-face { font-family:'Cormorant'; src:url('fonts/cormorant-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('fonts/cormorant-500i.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('fonts/source-sans-3-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('fonts/source-sans-3-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('fonts/source-sans-3-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --wald:#1F3D36; --wald-2:#2E5A4F; --holz:#B8875A; --holz-dunkel:#8E6440; --holz-hell:#E9D9C2;
  --leinen:#F6F1E9; --moos:#6E7F4E; --text:#24302C; --grau:#5C6B66; --linie:#E2DACB; --weiss:#fff;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Source Sans 3', 'Segoe UI', Arial, sans-serif; color:var(--text); font-size:18px; line-height:1.65; background:var(--weiss); }
img { max-width:100%; display:block; }
a { color:var(--wald-2); }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
h1, h2, h3 { font-family:'Cormorant', Georgia, serif; font-weight:500; line-height:1.12; color:var(--wald); }
h1 { font-size:clamp(40px, 5.4vw, 66px); }
h2 { font-size:clamp(32px, 3.8vw, 46px); margin-bottom:18px; }
h3 { font-size:26px; margin-bottom:8px; }
em.akzent { font-style:italic; color:var(--holz); }
.ober { font-size:14px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--holz-dunkel); margin-bottom:14px; display:block; }
.lead { font-size:20px; color:var(--grau); max-width:760px; }
section { padding:96px 0; }
.leinen { background:var(--leinen); }
.dunkel { background:var(--wald); color:var(--leinen); }
.dunkel h2, .dunkel h3 { color:var(--leinen); }
.dunkel .ober { color:var(--holz-hell); }
.dunkel .lead { color:#C9D3CE; }

/* Buttons */
.btn { display:inline-block; padding:14px 28px; border-radius:40px; font-weight:700; text-decoration:none; font-size:17px; transition:.2s; border:2px solid transparent; }
.btn-holz { background:var(--holz); color:#fff; }
.btn-holz:hover { background:var(--holz-dunkel); }
.btn-rand { border-color:var(--leinen); color:var(--leinen); }
.btn-rand:hover { background:var(--leinen); color:var(--wald); }
.btn-wald { background:var(--wald); color:#fff; }
.btn-wald:hover { background:var(--wald-2); }

/* Kopfzeile */
header { position:sticky; top:0; z-index:20; background:rgba(246,241,233,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--linie); }
header .wrap { display:flex; align-items:center; justify-content:space-between; height:76px; }
header .logo svg { height:46px; width:auto; display:block; }
nav a { color:var(--wald); text-decoration:none; font-weight:600; margin-left:26px; font-size:16px; }
nav a:hover { color:var(--holz-dunkel); }
nav a.btn-klein { background:var(--wald); color:#fff; padding:8px 18px; border-radius:30px; }
nav a.btn-klein:hover { background:var(--holz); }

/* Hero */
.hero { position:relative; min-height:min(86vh, 820px); display:flex; align-items:flex-end; color:#fff; background:#1F3D36 url('bilder/hero-ankommen.jpg') center 60%/cover no-repeat; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,40,35,.15) 0%, rgba(20,40,35,.35) 40%, rgba(20,40,35,.88) 100%); }
.hero .wrap { position:relative; padding-bottom:84px; padding-top:140px; }
.hero h1 { color:#fff; max-width:820px; margin-bottom:22px; }
.hero h1 em { color:var(--holz-hell); }
.hero p { font-size:21px; max-width:680px; color:#EEE8DD; margin-bottom:34px; }
.hero .ober { color:var(--holz-hell); }
.hero .knoepfe { display:flex; gap:16px; flex-wrap:wrap; }
.bildhinweis { position:absolute; right:16px; bottom:12px; font-size:12px; color:rgba(255,255,255,.65); }

/* Zwei Wege */
.zweiwege { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:44px; }
.weg { background:#fff; border:1px solid var(--linie); border-radius:18px; padding:36px; display:flex; flex-direction:column; }
.weg .icon { width:54px; height:54px; border-radius:50%; background:var(--leinen); display:grid; place-items:center; margin-bottom:18px; }
.weg ul { list-style:none; margin:14px 0 26px; }
.weg li { padding-left:26px; position:relative; margin-bottom:6px; }
.weg li::before { content:""; position:absolute; left:0; top:11px; width:12px; height:5px; border-radius:3px; background:var(--holz); }
.weg .btn { margin-top:auto; align-self:flex-start; }

/* Schritte */
.schritte { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:48px; counter-reset:s; }
.schritt { padding:28px 24px; border-top:4px solid var(--holz); background:rgba(255,255,255,.05); border-radius:0 0 14px 14px; }
.schritt .nr { font-family:'Cormorant', serif; font-size:52px; line-height:1; color:var(--holz-hell); }
.schritt h3 { margin-top:8px; }
.schritt p { color:#C9D3CE; font-size:17px; }

/* Text + Bild */
.split { display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; }
.split.umgekehrt .bild { order:-1; }
.split .bild img { border-radius:20px; box-shadow:0 20px 50px rgba(31,61,54,.18); }
.split .bild figcaption { font-size:13px; color:var(--grau); margin-top:8px; }
.liste { list-style:none; margin:22px 0; }
.liste li { padding:12px 0 12px 40px; position:relative; border-bottom:1px solid var(--linie); }
.liste li:last-child { border-bottom:none; }
.liste li::before { content:"✓"; position:absolute; left:0; top:12px; width:26px; height:26px; border-radius:50%; background:var(--wald); color:#fff; font-size:14px; display:grid; place-items:center; font-weight:700; }
.liste strong { color:var(--wald); }

/* Karten */
.karten { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:40px; }
.karte { background:#fff; border-radius:16px; padding:28px; border:1px solid var(--linie); }
.karte h3 { font-size:23px; }
.karte p { color:var(--grau); font-size:17px; }
.karten.vier { grid-template-columns:repeat(4, 1fr); }

/* Einwände / FAQ */
.faq { margin-top:34px; max-width:880px; }
details { background:#fff; border:1px solid var(--linie); border-radius:12px; margin-bottom:12px; }
summary { cursor:pointer; padding:18px 22px; font-weight:600; color:var(--wald); list-style:none; position:relative; padding-right:50px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:22px; top:12px; font-size:26px; color:var(--holz); }
details[open] summary::after { content:"–"; }
details p { padding:0 22px 20px; color:var(--grau); }

/* Hinweis */
.hinweis { border-left:4px solid var(--holz); background:var(--leinen); padding:18px 22px; border-radius:0 10px 10px 0; font-size:16px; color:var(--grau); margin-top:30px; }
.dunkel .hinweis { background:rgba(255,255,255,.06); color:#C9D3CE; }

/* Kennzahl-Leiste */
.fakten { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:44px; }
.fakt { text-align:center; padding:26px 12px; border-radius:16px; background:#fff; border:1px solid var(--linie); }
.fakt .wert { font-family:'Cormorant', serif; font-size:44px; color:var(--wald); line-height:1; }
.fakt .was { font-size:15px; color:var(--grau); margin-top:8px; }

/* Name */
.name-erklaert { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px; }
.name-erklaert div { border-radius:18px; padding:34px; }
.name-erklaert .nest { background:var(--leinen); }
.name-erklaert .werk { background:var(--holz-hell); }
.name-erklaert .wort { font-size:30px; font-weight:700; letter-spacing:4px; }
.name-erklaert .nest .wort { color:var(--wald); }
.name-erklaert .werk .wort { color:var(--holz-dunkel); }

/* Person */
.person { display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center; margin-top:30px; }
.person img { border-radius:50%; width:220px; height:220px; object-fit:cover; border:6px solid var(--leinen); }

/* Kontakt */
.kontakt { text-align:center; }
.kontakt .knoepfe { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* Fußzeile */
footer { background:#16302A; color:#A9B7B1; padding:44px 0; font-size:15px; }
footer .wrap { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
footer a { color:#E9D9C2; text-decoration:none; margin-left:18px; }
footer a:hover { text-decoration:underline; }

/* Unterseiten */
.seite { padding:70px 0 90px; max-width:860px; }
.seite h1 { font-size:48px; margin-bottom:26px; }
.seite h2 { font-size:28px; margin:30px 0 8px; }
.seite p { margin-bottom:10px; }

@media (max-width:960px) {
  nav a:not(.btn-klein) { display:none; }
  .zweiwege, .split, .name-erklaert { grid-template-columns:1fr; }
  .split.umgekehrt .bild { order:0; }
  .schritte, .karten.vier, .fakten { grid-template-columns:1fr 1fr; }
  .karten { grid-template-columns:1fr; }
  section { padding:68px 0; }
}
@media (max-width:560px) {
  .wrap { padding:0 16px; }
  .schritte, .karten.vier, .fakten { grid-template-columns:1fr; }
  .person { grid-template-columns:1fr; text-align:center; }
  .person img { margin:0 auto; }
  header .logo svg { height:38px; }
  .weg { padding:26px; }
}

/* Kacheln heben sich bei Mausberührung leicht ab */
.weg, .karte, .schritt, .fakt { transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.weg:hover, .karte:hover, .fakt:hover { transform:translateY(-6px); box-shadow:0 16px 36px rgba(31,61,54,.14); border-color:var(--holz); }
.schritt:hover { transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.28); background:rgba(255,255,255,.09); }
@media (prefers-reduced-motion: reduce) { .weg, .karte, .schritt, .fakt { transition:none; } .weg:hover, .karte:hover, .schritt:hover, .fakt:hover { transform:none; } }