/* Ciarda – Nebelwald (aus Muster A2) */
:root{--ink:#e9e6e1;--dim:#9a958d;--line:#2e2c2a;--bg:#0b0b0b;--gold:#b59a6a}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,sans-serif;font-weight:300;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit}
.bg{position:fixed;inset:0;background:url(../bilder/wald.jpg) center 35%/cover;filter:brightness(.55) contrast(1.1);z-index:-3}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0bdd 0%,#0b0b0b55 45%,#0b0b0b00 70%),linear-gradient(#0b0b0b00 55%,#0b0b0b 98%)}
body.unterseite .bg{filter:brightness(.25)}
body.unterseite .bg::after{background:linear-gradient(#0b0b0bcc,#0b0b0b 70%)}
.nebel{position:fixed;inset:-10%;z-index:-2;background:radial-gradient(ellipse at 30% 75%,#ffffff18,transparent 55%),radial-gradient(ellipse at 75% 45%,#ffffff12,transparent 50%);animation:zieh 28s ease-in-out infinite alternate;pointer-events:none}
@keyframes zieh{to{transform:translateX(-7%) translateY(2%)}}
#blaetter{position:fixed;inset:0;z-index:-1;pointer-events:none}
.blatt{position:absolute;top:-30px;width:14px;height:9px;background:#1d1b19;border-radius:0 80% 0 80%;opacity:.8;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}

header{display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;position:fixed;top:0;left:0;right:0;z-index:10;transition:background .4s,padding .4s}
header.fest,body.unterseite header{background:#0b0b0bf2;padding:14px 5vw;border-bottom:1px solid var(--line)}
body.unterseite main{padding-top:70px}
.logo{font-family:"Cormorant Garamond",serif;font-size:28px;letter-spacing:.25em;color:var(--ink);text-decoration:none}
nav{display:flex;align-items:center}
nav a{color:var(--ink);text-decoration:none;margin-left:28px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
nav a:hover{color:var(--gold)}
.ig svg{width:17px;height:17px;vertical-align:-3px}
.korb b{display:inline-block;min-width:18px;text-align:center;border:1px solid var(--dim);border-radius:9px;font-weight:400;margin-left:4px;font-size:10px;padding:1px 4px}
.korb.voll b{background:var(--gold);border-color:var(--gold);color:#000}

.kl{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:"Cormorant Garamond",serif;font-weight:400}
h2{font-size:clamp(36px,5vw,52px);margin:10px 0 8px}
.unter{color:var(--dim);margin-bottom:52px;max-width:560px;line-height:1.7}
.knopf{display:inline-block;border:1px solid var(--ink);color:var(--ink);padding:15px 30px;text-decoration:none;letter-spacing:.25em;font-size:11px;text-transform:uppercase;background:none;cursor:pointer;font-family:Inter,sans-serif;text-align:center}
.knopf:hover,.knopf.voll{background:var(--ink);color:#000}
.knopf.voll:hover{background:var(--gold);border-color:var(--gold)}
.knopf.leise{border-color:transparent;color:var(--dim)}
.knopf[disabled],.knopf.aus{opacity:.4;cursor:not-allowed;pointer-events:none}
.meldung{border:1px solid var(--gold);color:#e8dcc4;padding:14px 18px;margin:0 0 26px;line-height:1.6;font-size:14px}
.meldung.gut{border-color:#6d8a5e;color:#cfe0c4}

/* Startseite */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 5vw}
.hero small{letter-spacing:.35em;text-transform:uppercase;font-size:11px;color:var(--gold)}
.hero h1{font-size:clamp(52px,9vw,124px);line-height:.95;margin:18px 0}
.hero h1 i{color:#b9b2a6}
.hero p{max-width:440px;color:#cfcac2;line-height:1.75}
.knoepfe{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
section{padding:14vh 5vw;background:#0b0b0bf0;position:relative}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:48px 40px}
.stueck{position:relative;text-decoration:none;display:block}
.stueck .bild{aspect-ratio:3/4;background:#151413;overflow:hidden;position:relative}
.stueck .bild img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform 1.4s,filter 1s;filter:grayscale(.35)}
.stueck:hover img{transform:scale(1.05);filter:grayscale(0)}
.leer{display:flex;align-items:center;justify-content:center;color:#4c4945;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;border:1px solid var(--line);height:100%}
.marke{position:absolute;top:14px;left:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;background:#0b0b0b;padding:6px 10px;z-index:2}
.marke.knapp{color:var(--gold)}
.stueck.weg .bild{opacity:.45}
.stueck.weg .marke{background:var(--ink);color:#000}
.stueck h3{font-size:25px;margin-top:18px}
.stueck p{color:var(--dim);font-size:14px;margin-top:6px;line-height:1.55}
.preis{display:flex;justify-content:space-between;margin-top:14px;border-top:1px solid var(--line);padding-top:12px;font-size:14px}
.preis span+span{color:var(--dim);font-size:12px;letter-spacing:.15em}
.show{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;background:#0b0b0bd0}
.show .foto{aspect-ratio:4/5;background:#151413 center 20%/cover;filter:grayscale(1) contrast(1.1);position:relative}
.show .foto::after{content:"23 · 10 · 2026";position:absolute;bottom:-18px;right:-18px;background:var(--bg);padding:14px 20px;font-family:"Cormorant Garamond",serif;font-size:22px;letter-spacing:.15em;border:1px solid var(--line)}
.show p{color:#cfcac2;line-height:1.85;max-width:480px;margin-top:18px}
.fakten{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;margin-top:30px;font-size:14px;border-top:1px solid var(--line);padding-top:22px;max-width:480px}
.fakten dt{color:var(--dim)}
.schritte3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:20px}
.schritt b{font-family:"Cormorant Garamond",serif;font-size:56px;font-weight:400;color:var(--gold);line-height:1}
.schritt h3{font-size:24px;margin:10px 0}
.schritt p{color:var(--dim);line-height:1.7;font-size:15px}
.zitat{text-align:center;background:#0b0b0b99;padding:20vh 5vw}
.zitat q{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(28px,4vw,46px);max-width:820px;display:block;margin:auto;line-height:1.35;quotes:"„" "“"}
.zitat small{display:block;font-size:11px;letter-spacing:.35em;color:var(--dim);margin-top:24px;text-transform:uppercase}

/* Instagram */
.igband{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:8vh 5vw;background:#0b0b0bf0;border-top:1px solid var(--line)}
.igband .wer{display:flex;align-items:center;gap:20px}
.igband .rund{width:76px;height:76px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#b59a6a,#4a1622,#b59a6a)}
.igband .rund span{display:block;width:100%;height:100%;border-radius:50%;background:#000 url(../bilder/wald.jpg) center/cover;border:3px solid #000}
.igband h2{margin:4px 0}
.igband p{color:var(--dim)}
.igreihe{flex-basis:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:20px}
.igreihe a{aspect-ratio:1;background:#151413 center 25%/cover;position:relative;overflow:hidden;text-decoration:none}
.igreihe a span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#4c4945;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px}
.igreihe a.frei{border:1px solid var(--line)}
.igreihe a:not(.frei):hover{opacity:.75}

/* Produktseite */
.pfad{padding:22px 5vw 0;font-size:12px;color:var(--dim);letter-spacing:.1em}
.pfad a{color:var(--dim);text-decoration:none}
.produkt{display:grid;grid-template-columns:1.15fr 1fr;gap:5vw;padding:30px 5vw 0;align-items:start}
.galerie{display:grid;grid-template-columns:84px 1fr;gap:14px;position:sticky;top:80px}
.daumen{display:flex;flex-direction:column;gap:10px}
.galerie.einzeln{grid-template-columns:1fr}.galerie.einzeln .daumen{display:none}
.daumen button{aspect-ratio:3/4;border:1px solid var(--line);background:#151413 center/cover;cursor:pointer;padding:0}
.daumen button.an{border-color:var(--ink)}
.haupt{aspect-ratio:3/4;background:#151413;overflow:hidden;position:relative;cursor:zoom-in}
.haupt img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .5s}
.haupt.zoom img{transform:scale(1.8);cursor:zoom-out}
.info h1{font-size:clamp(40px,4.4vw,58px);line-height:1.02;margin:12px 0 18px}
.preiszeile{display:flex;align-items:baseline;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.preiszeile .betrag{font-family:"Cormorant Garamond",serif;font-size:34px}
.preiszeile small{color:var(--dim);font-size:12px}
.vorrat{display:flex;align-items:center;gap:12px;margin:22px 0;font-size:14px;color:#cfcac2}
.vorrat i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #b59a6a30}
.vorrat.aus i{background:#6d6964;box-shadow:none}
.info .text{line-height:1.8;color:#cfcac2;margin-bottom:26px;white-space:pre-line}
.groesse{display:flex;align-items:center;gap:14px;margin-bottom:26px;font-size:13px}
.groesse span{border:1px solid var(--ink);padding:9px 16px;letter-spacing:.1em}
.kaufen{display:grid;grid-template-columns:auto 1fr;gap:12px}
.kaufen select,.feld{background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:0 14px;font:inherit;font-size:14px;min-height:50px}
.kaufen .knopf{width:100%}
.frage{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--dim);text-decoration:none;padding:6px}
.frage svg{width:16px;height:16px}
.vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0;font-size:12px;color:var(--dim);text-align:center}
.vorteile div{border:1px solid var(--line);padding:14px 8px;line-height:1.5}
.vorteile b{display:block;color:var(--ink);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:11px;margin-bottom:4px}
details{border-top:1px solid var(--line);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:18px;line-height:1}
details[open] summary::after{content:"–"}
details dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin-top:16px;font-size:14px}
details dt{color:var(--dim)}
details p{margin-top:14px;color:#cfcac2;line-height:1.7;font-size:14px}

/* Warenkorb */
.korbseite{display:grid;grid-template-columns:1.6fr 1fr;gap:5vw;padding:30px 5vw 0;align-items:start}
.korbseite h1{font-size:clamp(40px,5vw,60px);margin:10px 0 30px}
.posten{display:grid;grid-template-columns:110px 1fr auto;gap:24px;padding:24px 0;border-top:1px solid var(--line);align-items:start}
.posten img{width:110px;aspect-ratio:3/4;object-fit:cover;object-position:center 25%;background:#151413}
.posten h3{font-size:26px}
.posten h3 a{text-decoration:none}
.posten .mehr{color:var(--dim);font-size:13px;margin-top:6px;line-height:1.6}
.posten .menge{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--dim)}
.posten .menge select{background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:6px 10px;font:inherit}
.posten .rechts{text-align:right}
.posten .betrag{font-family:"Cormorant Garamond",serif;font-size:24px}
.weg{background:none;border:0;color:var(--dim);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;margin-top:12px}
.korbleer{padding:60px 0;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.korbleer p{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:28px;color:#cfcac2;margin-bottom:24px}
.summe{background:#121110;border:1px solid var(--line);padding:30px;position:sticky;top:90px}
.summe h2{font-size:28px;margin:0 0 20px}
.zeile{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;color:#cfcac2}
.zeile.gesamt{border-top:1px solid var(--line);margin-top:10px;padding-top:18px;font-size:16px;color:var(--ink)}
.zeile.gesamt span+span{font-family:"Cormorant Garamond",serif;font-size:26px}
.summe select{width:100%;margin:8px 0 4px;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:12px;font:inherit;font-size:14px}
.summe .knopf{width:100%;margin-top:22px}
.zahlarten{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.zahlarten span{border:1px solid var(--line);padding:5px 9px;font-size:11px;color:var(--dim)}
.klein{font-size:12px;color:#6d6964;line-height:1.6;margin-top:16px}
.textseite{max-width:760px;padding:40px 5vw 0;line-height:1.8;color:#cfcac2}
.textseite h1{font-size:48px;color:var(--ink);margin-bottom:20px}
.textseite h2{font-size:28px;color:var(--ink);margin:30px 0 8px}

footer{padding:50px 5vw 40px;border-top:1px solid var(--line);display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;font-size:13px;color:var(--dim);background:var(--bg);margin-top:10vh}
body.start footer{margin-top:0}
footer h4{font-weight:400;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
footer a{color:var(--dim);display:block;text-decoration:none;margin-bottom:8px}
footer a:hover{color:var(--ink)}
footer .logo{font-size:22px;display:block;margin-bottom:12px}

.musik{position:fixed;right:22px;bottom:22px;z-index:10;display:flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 14px;border-radius:23px;border:1px solid #ffffff40;background:#0b0b0bcc;color:var(--ink);cursor:pointer;font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.wellen{display:flex;gap:3px;align-items:flex-end;height:14px}
.wellen i{width:2px;height:4px;background:var(--ink)}
.spielt .wellen i{animation:welle .9s ease-in-out infinite alternate}
.spielt .wellen i:nth-child(2){animation-delay:.2s}.spielt .wellen i:nth-child(3){animation-delay:.4s}
@keyframes welle{to{height:14px}}

@media(max-width:860px){
  .produkt,.korbseite,.show,.schritte3{grid-template-columns:1fr}
  .galerie{position:static;grid-template-columns:1fr}
  .daumen{flex-direction:row;order:2}.daumen button{width:64px}
  .summe{position:static}
  .posten{grid-template-columns:90px 1fr}.posten img{width:90px}.posten .rechts{grid-column:2;text-align:left}
  footer{grid-template-columns:1fr}
  .igreihe{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  nav a{margin-left:14px;font-size:10px;letter-spacing:.12em}nav a.weg-mobil{display:none}.logo{font-size:20px;letter-spacing:.18em}
  .bg::after{background:linear-gradient(#0b0b0b66,#0b0b0b 92%)}
  .hero{justify-content:flex-end;padding-bottom:14vh}
  .musik span.mtext{display:none}.musik{padding:0 14px}
}
@media(prefers-reduced-motion:reduce){.nebel,.blatt{animation:none}#blaetter{display:none}}

/* lange Wörter/Formularfelder dürfen die Spalten nicht sprengen */
.produkt>*,.korbseite>*,.show>*{min-width:0}
.kaufen select{max-width:90px}


/* Rechtstexte */
.recht{max-width:820px}.recht p{margin-bottom:14px}.recht h3{font-size:22px;color:var(--ink);margin:22px 0 6px}
.recht mark{background:#b59a6a40;color:#f3e6c8;padding:0 4px;border-radius:2px}
.recht .entwurf{border:1px dashed var(--gold);padding:12px 16px;color:#e8dcc4;font-size:14px}
.recht .klein2{color:var(--dim);font-size:13px;margin-top:-10px}
.recht .formular{border:1px solid var(--line);padding:18px;font-size:14px}
.recht a{color:var(--ink)}
.summe .klein a{color:var(--dim)}


/* Widerruf */
footer a.widerrufen{color:var(--ink);border:1px solid var(--line);padding:8px 12px;display:inline-block;margin-top:4px}
footer a.widerrufen:hover{border-color:var(--gold)}
.widerruf .feldzeile{display:block;margin-bottom:18px}
.widerruf .feldzeile span{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.widerruf .feldzeile small{text-transform:none;letter-spacing:0}
.widerruf .feld{width:100%;padding:12px 14px;min-height:auto}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* Nennung der Musik */
.musikvon{position:fixed;right:22px;bottom:74px;z-index:10;font-size:11px;color:var(--dim);letter-spacing:.05em;text-align:right;max-width:260px}