:root{
  --schwarz:#0c0a08; --kohle:#15110d; --karte:#1c1712; --linie:#2e261e;
  --holz:#a8743f; --holz-hell:#d9a066; --glut:#e8742a; --creme:#f3eadf; --grau:#a89a8a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--schwarz);color:var(--creme);font-family:var(--sans);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--holz-hell)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* Holzmaserung als Akzent */
.maserung{background:
  repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
  repeating-linear-gradient(97deg, rgba(0,0,0,.25) 0 1px, transparent 1px 23px),
  linear-gradient(135deg,#6b4423,#a8743f 45%,#7a4d27 70%,#5a3719);}

/* Kopf */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.fest{background:rgba(12,10,8,.92);backdrop-filter:blur(10px);border-color:var(--linie)}
.kopf{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--creme)}
.logo .marke{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:bold;font-size:20px;color:#1a0f06;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.logo b{font-family:var(--serif);font-size:21px;letter-spacing:.3px}
.logo small{display:block;font-size:11px;letter-spacing:2.5px;color:var(--grau);text-transform:uppercase;margin-top:-3px}
nav a{color:var(--creme);text-decoration:none;margin-left:28px;font-size:15px;opacity:.85}
nav a:hover{opacity:1;color:var(--holz-hell)}
.knopf{display:inline-block;background:var(--glut);color:#1a0f06 !important;font-weight:700;padding:13px 26px;border-radius:999px;text-decoration:none;transition:transform .15s, box-shadow .15s;border:0;cursor:pointer;font-size:16px;opacity:1 !important}
.knopf:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(232,116,42,.35)}
.knopf.leer{background:transparent;color:var(--creme) !important;box-shadow:inset 0 0 0 1.5px rgba(243,234,223,.45)}
@media(max-width:860px){nav a:not(.knopf){display:none}}

/* Hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding-bottom:12vh;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:atmen 18s ease-in-out infinite alternate}
@keyframes atmen{to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.hero img{animation:none}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,.35) 0%,rgba(12,10,8,.2) 40%,rgba(12,10,8,.92) 88%,var(--schwarz) 100%),linear-gradient(90deg,rgba(12,10,8,.75),transparent 65%)}
.hero .wrap{position:relative;z-index:2}
.zeile{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--holz-hell);margin-bottom:18px}
h1{font-family:var(--serif);font-weight:normal;font-size:clamp(42px,7vw,88px);line-height:1.02;max-width:12ch;letter-spacing:-1px}
h1 em{font-style:italic;color:var(--glut)}
.hero p.lead{font-size:clamp(17px,2vw,21px);color:#e3d6c6;max-width:560px;margin:24px 0 34px}
.hero .knoepfe{display:flex;gap:14px;flex-wrap:wrap}
.siegel{display:flex;gap:30px;flex-wrap:wrap;margin-top:48px;color:var(--grau);font-size:14px}
.siegel span b{color:var(--creme);font-size:22px;font-family:var(--serif);display:block;font-weight:normal}

/* Abschnitte */
section{padding:110px 0}
h2{font-family:var(--serif);font-weight:normal;font-size:clamp(32px,4.5vw,52px);line-height:1.1;margin-bottom:18px}
h2 em{font-style:italic;color:var(--holz-hell)}
.unter{color:var(--grau);max-width:620px;font-size:18px}
.holzband{height:10px}

/* Versprechen */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
@media(max-width:860px){.drei{grid-template-columns:1fr}}
.vers{background:var(--karte);border:1px solid var(--linie);border-radius:18px;padding:32px;position:relative;overflow:hidden}
.vers .zahl{font-family:var(--serif);font-size:54px;color:var(--glut);line-height:1}
.vers h3{font-size:20px;margin:14px 0 8px}
.vers p{color:var(--grau);font-size:16px}

/* Bild-Text */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split.um{grid-template-columns:1fr 1.05fr}
.split.um .bild{order:2}
@media(max-width:900px){.split,.split.um{grid-template-columns:1fr;gap:36px}.split.um .bild{order:0}}
.bild{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--karte)}
.bild img{width:100%;height:100%;object-fit:cover}
.bild .etikett{position:absolute;left:18px;bottom:18px;background:rgba(12,10,8,.8);backdrop-filter:blur(6px);padding:8px 14px;border-radius:999px;font-size:13px;color:var(--holz-hell)}
.schritte{list-style:none;margin-top:30px;counter-reset:s}
.schritte li{counter-increment:s;padding:16px 0 16px 58px;position:relative;border-bottom:1px solid var(--linie)}
.schritte li::before{content:counter(s);position:absolute;left:0;top:14px;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--holz);display:grid;place-items:center;font-family:var(--serif);color:var(--holz-hell)}
.schritte b{display:block;font-size:17px}
.schritte span{color:var(--grau);font-size:15px}

/* Produkte */
.dunkler{background:var(--kohle)}
.produkte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
@media(max-width:960px){.produkte{grid-template-columns:1fr}}
.prod{background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:34px 30px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.prod:hover{transform:translateY(-4px);border-color:var(--holz)}
.prod.top{border-color:var(--glut);position:relative}
.prod.top::before{content:"Beliebteste Wahl";position:absolute;top:-13px;left:30px;background:var(--glut);color:#1a0f06;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.5px}
.prod .art{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--holz-hell)}
.prod h3{font-family:var(--serif);font-weight:normal;font-size:28px;margin:8px 0 6px}
.prod .preis{font-family:var(--serif);font-size:46px;margin:18px 0 0;line-height:1}
.prod .preis small{font-family:var(--sans);font-size:15px;color:var(--grau)}
.prod ul{list-style:none;margin:22px 0 28px;flex:1}
.prod li{padding:7px 0 7px 26px;position:relative;color:#d8cbbb;font-size:15.5px}
.prod li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:2px;background:var(--glut)}
.prod .knopf{text-align:center}
.hinweis{color:var(--grau);font-size:14px;margin-top:22px}
.extras{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
@media(max-width:860px){.extras{grid-template-columns:1fr 1fr}}
.extra{border:1px solid var(--linie);border-radius:14px;padding:18px}
.extra b{display:block;font-size:16px}
.extra span{color:var(--grau);font-size:14px}

/* Maße */
.masse{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
@media(max-width:860px){.masse{grid-template-columns:1fr}}
.mass{border-top:3px solid var(--holz);padding-top:22px}
.mass .k{font-family:var(--serif);font-size:38px;color:var(--holz-hell)}
.mass h3{font-size:19px;margin:4px 0 8px}
.mass p{color:var(--grau);font-size:15.5px}
.wuerfel{width:84px;height:84px;margin-bottom:16px}
.formel{margin-top:40px;background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:22px 26px;font-size:17px}
.formel b{color:var(--glut)}

/* Liefergebiet */
.zonen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media(max-width:700px){.zonen{grid-template-columns:1fr}}
.zone{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:22px}
.zone b{font-family:var(--serif);font-size:26px;display:block;font-weight:normal}
.zone span{color:var(--grau);font-size:15px}

/* Stimmen */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
@media(max-width:860px){.stimmen{grid-template-columns:1fr}}
.stimme{background:var(--karte);border-radius:18px;padding:28px;border:1px solid var(--linie)}
.stimme .sterne{color:var(--glut);letter-spacing:3px}
.stimme p{font-family:var(--serif);font-size:19px;margin:12px 0 16px;font-style:italic}
.stimme span{color:var(--grau);font-size:14px}

/* FAQ */
details{border-bottom:1px solid var(--linie);padding:22px 0}
summary{cursor:pointer;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::after{content:"+";color:var(--glut);font-size:26px;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--grau);margin-top:12px;max-width:760px}

/* Bestellung */
.bestell{display:grid;grid-template-columns:1fr 1.1fr;gap:60px}
@media(max-width:900px){.bestell{grid-template-columns:1fr}}
form{background:var(--karte);border:1px solid var(--linie);border-radius:22px;padding:34px}
.feld{margin-bottom:18px}
label{display:block;font-size:14px;color:var(--grau);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--schwarz);border:1px solid var(--linie);color:var(--creme);border-radius:12px;padding:13px 14px;font:inherit;font-size:16px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--holz)}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.summe{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linie);padding-top:18px;margin:6px 0 22px}
.summe b{font-family:var(--serif);font-size:34px;font-weight:normal;color:var(--holz-hell)}
form .knopf{width:100%}
.kontakt-liste{list-style:none;margin-top:30px}
.kontakt-liste li{padding:14px 0;border-bottom:1px solid var(--linie);display:flex;gap:14px}
.kontakt-liste li span:first-child{color:var(--holz-hell);width:90px;flex:none}

footer{border-top:1px solid var(--linie);padding:50px 0 40px;color:var(--grau);font-size:14px}
.fuss{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.vorschau{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(28,23,18,.95);border:1px solid var(--holz);color:var(--holz-hell);font-size:12.5px;padding:7px 16px;border-radius:999px;z-index:60;white-space:nowrap}

.rein{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.rein.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rein{opacity:1;transform:none}}

/* ===== Kaminholz Werne: Ergänzungen ===== */
:root{ --wald:#3f6b4a; --wald-hell:#7fae86; }
.logo .marke{font-size:15px}
.leist{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
@media(max-width:960px){.leist{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.leist{grid-template-columns:1fr}}
.leist .vers .zahl{font-size:40px}
.lohn{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:700px){.lohn{grid-template-columns:1fr}}
/* Bestell-Assistent */
.assist{background:var(--karte);border:1px solid var(--linie);border-radius:22px;padding:30px}
.stufen{display:flex;gap:6px;margin-bottom:24px}
.stufen span{flex:1;height:4px;border-radius:4px;background:var(--linie);transition:background .3s}
.stufen span.an{background:var(--glut)}
.schritt{display:none}
.schritt.aktiv{display:block;animation:auf .35s ease}
@keyframes auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.schritt h3{font-family:var(--serif);font-weight:normal;font-size:26px;margin-bottom:16px}
.wahl{display:grid;gap:10px}
.wahl label{display:flex;gap:14px;align-items:center;background:var(--schwarz);border:1.5px solid var(--linie);border-radius:14px;padding:16px;cursor:pointer;color:var(--creme);font-size:16px;margin:0;transition:border-color .15s}
.wahl label:hover{border-color:var(--holz)}
.wahl input{width:auto;accent-color:var(--glut)}
.wahl label:has(input:checked){border-color:var(--glut);background:#21170f}
.wahl .p{margin-left:auto;font-family:var(--serif);color:var(--holz-hell);white-space:nowrap}
.wahl small{display:block;color:var(--grau);font-size:13.5px}
.menge{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.menge button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--holz);background:none;color:var(--creme);font-size:24px;cursor:pointer}
.menge output{font-family:var(--serif);font-size:40px;min-width:90px;text-align:center}
.nav-knoepfe{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.nav-knoepfe .knopf{flex:1;text-align:center}
.zusammen{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:15.5px}
.zusammen td{padding:9px 0;border-bottom:1px solid var(--linie)}
.zusammen td:last-child{text-align:right}
.zusammen tr.gesamt td{font-family:var(--serif);font-size:24px;color:var(--holz-hell);border:0;padding-top:14px}
.fehler{color:#ff8a65;font-size:14px;min-height:20px;margin-top:8px}
.danke{text-align:center;padding:20px 0}
.danke .nr{font-family:var(--serif);font-size:44px;color:var(--glut);margin:10px 0}
.hp{position:absolute;left:-9999px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--grau)}
.check input{width:auto;margin-top:4px;accent-color:var(--glut)}
.recht{max-width:780px;padding:140px 24px 80px;margin:0 auto}
.recht h1{font-size:48px;margin-bottom:30px}
.recht h2{font-size:24px;margin:30px 0 10px}
.recht p{color:#d8cbbb;margin-bottom:12px}

@media(max-width:600px){
  .kopf{height:64px}
  .wrap{padding:0 16px}
  .logo{gap:9px}
  .logo b{font-size:17px;white-space:nowrap}
  .logo small{display:none}
  .logo .marke{width:34px;height:34px}
  nav .knopf{padding:10px 16px;font-size:14px;white-space:nowrap}
  .vorschau{font-size:11px;white-space:normal;width:max-content;max-width:92vw;text-align:center}
}