:root{--black:#0A0A0A;--panel:#151818;--line:#2E3434;--grey:#9AA0A0;--mist:#C8CDCD;--white:#F2F2EE;--accent:#7CFC00;
--serif:Georgia,"Times New Roman",serif;--sans:Aptos,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--black);color:var(--white);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.6;background:var(--black);color:var(--white);overflow-x:clip}
html body{color:var(--white)}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.2em}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
.top{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.top img{height:2.8rem;width:auto}
.top nav a{color:var(--mist);text-decoration:none;font-size:.95rem;white-space:nowrap}
.top nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1.5rem}
.top nav a:hover{color:var(--white)}
.top nav a[aria-current]{color:var(--white);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.45em}
.kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent);margin:0 0 .75rem}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--white)}
h2{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin-bottom:1.25rem}
section{padding:4.5rem 0;border-top:1px solid var(--line)}
.lead{color:var(--mist);max-width:40rem}
.btn{display:inline-block;padding:.75rem 1.25rem;border:1px solid var(--accent);color:var(--white);text-decoration:none;font-weight:600;font-size:.95rem;margin:.25rem .5rem .25rem 0}
.btn.primary{background:var(--accent);color:var(--black)}
.example{background:#1C2410;border-bottom:1px solid var(--accent);color:var(--white);font-size:.9rem;padding:.6rem 0;text-align:center}
/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:3rem;align-items:center;padding:4rem 0 4.5rem;border-top:0;position:relative}
.hero::before{content:"";position:absolute;inset:-10% 0 auto auto;width:60%;height:120%;z-index:-1;
  background:radial-gradient(closest-side,rgba(124,252,0,.18),transparent 70%)}
.hero h1{font-size:clamp(2.8rem,8vw,5.2rem);line-height:1}
.hero .by{font-family:var(--serif);font-size:clamp(1.2rem,3vw,1.7rem);color:var(--mist);margin:.75rem 0 1.25rem}
.hero .by b{color:var(--white);font-weight:400}
.hero .tag{color:var(--mist);max-width:30rem;margin:0 0 1.75rem}
.can{position:relative;justify-self:center;max-width:22rem;width:100%}
.can img{border:1px solid var(--line);aspect-ratio:177/230;object-fit:cover;width:100%}
.can figcaption{color:var(--grey);font-size:.85rem;margin-top:.6rem}
/* Story */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:3rem}
.two p{color:var(--mist);margin:0 0 1.2rem;max-width:40rem}
blockquote{margin:2rem 0 0;padding:1.25rem 1.5rem;border-left:2px solid var(--accent);background:var(--panel);
  font-family:var(--serif);font-size:1.35rem;line-height:1.45;color:var(--white)}
blockquote cite{display:block;margin-top:.75rem;font-family:var(--sans);font-style:normal;font-size:.9rem;color:var(--grey)}
/* Timeline */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.step{background:var(--panel);padding:1.5rem 1.25rem;border-top:2px solid var(--accent)}
.step .when{color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.step h3{font-size:1.25rem;margin:.35rem 0 .5rem}
.step p{margin:0;color:var(--grey);font-size:.95rem}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.ph{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,#121515 0 12px,#151818 12px 24px);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--grey);font-size:.85rem;text-align:center;padding:1rem}
/* Blend */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none}
.chips li{border:1px solid var(--line);background:var(--panel);padding:.35rem .8rem;font-size:.95rem}
.profile{display:grid;gap:.9rem;max-width:26rem}
.bar{display:grid;grid-template-columns:6rem 1fr 2rem;align-items:center;gap:.75rem;color:var(--mist);font-size:.95rem}
.dots{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dots i{height:8px;background:var(--line)}
.dots i.on{background:var(--accent)}
.pairs{color:var(--mist);margin-top:1.75rem}
.pairs b{color:var(--white);font-weight:600}
.blendimg{border:1px solid var(--line)}
/* Rezept */
.recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.recipe{background:var(--panel);padding:1.75rem 1.5rem}
.recipe h3{font-size:1.4rem;margin:.25rem 0 .25rem}
.recipe .time{color:var(--grey);font-size:.9rem;margin:0 0 1rem}
.recipe ul,.recipe ol{margin:0 0 1rem;padding-left:1.2rem;color:var(--mist)}
.recipe li{margin:.25rem 0}
/* Band */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:1.5rem 0}
.facts div{background:var(--panel);padding:1rem 1.25rem}
.facts span{display:block;color:var(--grey);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}
.facts b{font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--white)}
/* Wo */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--panel);padding:1.75rem 1.5rem 2rem;border-top:2px solid var(--accent)}
.card h3{font-size:1.3rem;margin:0 0 .5rem}
.card p{margin:0;color:var(--grey);font-size:.98rem}
/* Kit */
.kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:2rem 0 1.5rem}
.kit a{text-decoration:none;color:var(--mist);font-size:.9rem}
.kit img{border:1px solid var(--line);margin-bottom:.5rem;aspect-ratio:4/5;object-fit:cover;width:100%}
.kit .story img{aspect-ratio:9/16}
/* Übersicht */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2rem}
.slot{background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--white);display:flex;flex-direction:column}
.slot img{aspect-ratio:177/230;object-fit:cover;width:100%}
.slot .meta{padding:1rem 1.1rem 1.25rem}
.slot .no{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.14em}
.slot h3{font-size:1.25rem;margin:.25rem 0 .15rem}
.slot p{margin:0;color:var(--grey);font-size:.9rem}
.slot.soon{border-style:dashed}
.slot.soon .lock{aspect-ratio:177/230;display:flex;align-items:center;justify-content:center;background:#0f1111;
  font-family:var(--serif);font-size:3rem;color:var(--line)}
.banner{position:relative;border-bottom:1px solid var(--line)}
.pic{position:relative;display:block}
.banner img.breit{max-height:none;min-height:10rem;object-position:center}
.ah{position:absolute;right:.5rem;bottom:.45rem;z-index:2;font-size:.7rem;line-height:1.2;letter-spacing:.03em;color:#E8E8E2;background:rgba(10,10,10,.62);padding:.15rem .45rem;pointer-events:none}
.banner img{width:100%;height:auto;max-height:42rem;object-fit:cover;object-position:center top}
/* Band-Story-Seite */
.bandhero{position:relative;min-height:clamp(26rem,62vw,38rem);display:flex;align-items:flex-end;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(135deg,#101313 0 14px,#131616 14px 28px)}
.bandhero .phl{position:absolute;top:1.25rem;right:1.5rem;color:var(--grey);font-size:.85rem;border:1px dashed var(--line);padding:.35rem .7rem}
.bandhero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(10,10,10,.95))}
.bandhero .wrap{position:relative;z-index:1;width:100%;padding-bottom:3rem}
.bandhero h1{font-size:clamp(3.2rem,11vw,7.5rem);line-height:.95}
.bandhero .sub{font-family:var(--serif);font-size:clamp(1.2rem,3vw,1.8rem);color:var(--mist);margin:.9rem 0 0}
.bandhero .sub b{color:var(--accent);font-weight:400}
.intro{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.45;color:var(--white);max-width:46rem;margin:0}
.ch{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:2rem}
.ch-no{font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--accent)}
.ch p{color:var(--mist);max-width:42rem;margin:0 0 1.2rem}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2.5rem;align-items:start}
.pull{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.3;color:var(--white);border-left:2px solid var(--accent);padding-left:1.5rem;margin:2rem 0}
.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:.9rem;color:var(--grey);margin-top:.75rem}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;margin-top:2rem}
.gallery .ph:first-child{grid-row:span 2;aspect-ratio:auto}
.qa{margin:0;display:grid;gap:1.75rem;max-width:44rem}
.qa dt{font-family:var(--serif);font-size:1.3rem;color:var(--white)}
.qa dd{margin:.4rem 0 0;color:var(--mist)}
.tour{list-style:none;margin:0 0 1.5rem;padding:0;border-top:1px solid var(--line);max-width:44rem}
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0}
.toc a{border:1px solid var(--line);background:var(--panel);padding:.35rem .85rem;font-size:.92rem;color:var(--mist);text-decoration:none}
.toc a:hover{border-color:var(--accent);color:var(--white)}
.tour li{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--mist)}
.tour b{color:var(--white);font-weight:600}
.strip{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--accent);padding:1.5rem 1.75rem;margin:1rem 0 4rem}
.strip img{width:5rem;border:1px solid var(--line)}
.strip .t{flex:1;min-width:14rem}
.strip h3{font-size:1.35rem;margin:0 0 .25rem}
.strip p{margin:0;color:var(--grey)}
/* Für Bands */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{background:var(--panel);padding:1.75rem 1.5rem 2rem;border-top:2px solid var(--accent)}
.tier.hi{background:#0F1A06;outline:1px solid var(--accent)}
.tier .pct{font-family:var(--serif);font-size:3rem;color:var(--accent);line-height:1;margin:.25rem 0 .5rem}
.tier ul{margin:.75rem 0 0;padding-left:1.1rem;color:var(--mist)}
.order{counter-reset:o;list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.order li{background:var(--panel);padding:1.5rem 1.25rem;counter-increment:o;color:var(--grey);font-size:.95rem}
.order li::before{content:counter(o,decimal-leading-zero);display:block;font-family:var(--serif);font-size:2rem;color:var(--accent);margin-bottom:.4rem}
.order b{display:block;color:var(--white);font-size:1.05rem;margin-bottom:.3rem}
table.cond{border-collapse:collapse;width:100%;min-width:40rem;margin-top:1.5rem;font-size:.98rem}
table.cond th,table.cond td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
table.cond th{color:var(--grey);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}
table.cond td{color:var(--mist)}
table.cond td:first-child{color:var(--white);font-weight:600}
details{border-bottom:1px solid var(--line);padding:1rem 0}
summary{cursor:pointer;font-family:var(--serif);font-size:1.2rem;color:var(--white)}
details p{color:var(--mist);margin:.6rem 0 0;max-width:44rem}
.facts.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
.blends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.blends div{background:var(--panel);padding:1.1rem 1.2rem 1.25rem}
.blends span{display:block;color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.blends b{color:var(--white);display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:.2rem 0 .3rem}
.blends p{margin:0;color:var(--grey);font-size:.92rem}
.crumb{color:var(--grey);font-size:.88rem;margin:0 0 1.25rem}.crumb a{color:var(--mist)}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.paths a{background:var(--panel);padding:1.75rem 1.5rem 2rem;border-top:2px solid var(--accent);text-decoration:none;color:var(--white);display:flex;flex-direction:column;gap:.5rem}
.paths a:hover{background:#192010}
.paths .kicker{margin:0}.paths h3{font-size:1.4rem}.paths p{margin:0;color:var(--grey);font-size:.98rem;flex:1}
.paths .price{font-family:var(--serif);font-size:1.6rem;color:var(--accent);line-height:1.1;flex:0}
.paths .go{color:var(--accent);font-weight:600;font-size:.95rem}
.paths.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.product{background:var(--panel);padding:1.5rem 1.4rem 1.75rem;display:flex;flex-direction:column;gap:.35rem}
.product .price{font-family:var(--serif);font-size:2rem;color:var(--accent);line-height:1.1}
.product h3{font-size:1.25rem}.product p{margin:0;color:var(--grey);font-size:.95rem}
.product .where{margin-top:auto;padding-top:.75rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);font-weight:700}
.product.fest{border-top:2px solid var(--accent)}
.note{border-left:2px solid var(--accent);background:var(--panel);padding:1rem 1.25rem;color:var(--mist);max-width:44rem;margin:1.5rem 0}
.note b{color:var(--white)}
.contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.contacts article{background:var(--panel);padding:1.6rem 1.5rem 1.75rem}
.contacts h3{font-size:1.3rem;margin-bottom:.4rem}.contacts p{color:var(--grey);margin:0 0 1rem;font-size:.98rem}
.mail{font-family:var(--serif);font-size:clamp(1.4rem,3.4vw,2rem);overflow-wrap:anywhere}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--grey);font-size:.9rem}
footer a{color:var(--mist)}
@media (max-width:820px){
  .hero,.two{grid-template-columns:1fr;gap:2rem}
  .steps,.cards,.recipes,.facts,.paths,.paths.two-up,.products,.contacts{grid-template-columns:1fr}
  .photos{grid-template-columns:1fr 1fr}
  .kit,.grid{grid-template-columns:1fr 1fr}
  .ch,.split{grid-template-columns:1fr;gap:1rem}
  .ch-no{font-size:2.4rem}
  .gallery{grid-template-columns:1fr 1fr}.gallery .ph:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .tiers{grid-template-columns:1fr}.order{grid-template-columns:1fr}
  .tour li{grid-template-columns:5.5rem 1fr}
  .top{flex-direction:column;align-items:flex-start;gap:.9rem;padding:1rem 0 .85rem}
  .top nav{justify-content:flex-start;gap:.3rem .95rem}
  .top nav a{font-size:.86rem}
  .facts.f4{grid-template-columns:1fr 1fr}
  .blends{grid-template-columns:1fr 1fr}
  .top img{height:2.2rem}
}