/* ============================================================
   kakaw.network – gemeinsames Stylesheet (Prototyp, Basis Entwurf 3)
   Regeln: Farben/Schriften/Formen nur hier ändern. Seiten (index.html,
   dalileo.html …) enthalten nur Inhalt. Später 1:1 -> Shopify assets/.
   ============================================================ */
:root{
  --orange:#fcbc0f; --rose:#ffe4ce; --rose2:#ffdcbe; --braun:#6e494f; --blau:#2aadc7; --lemon:#fff8cf;
  --braun-deep:#4a2f34; --braun-soft:#8f6a70;
  --bg:var(--rose); --fg:var(--braun); --fg-soft:var(--braun-soft);
  --display:'Fraunces',Georgia,serif; --body:'Nunito','Helvetica Neue',Arial,sans-serif;
  --pod:62% 38% 58% 42% / 55% 48% 52% 45%;
  --pod2:42% 58% 44% 56% / 60% 40% 60% 40%;
  --tree-w:min(46vw,620px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;position:relative;isolation:isolate;z-index:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6;transition:background-color .9s ease,color .9s ease;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.dark{--bg:#4a2f34;--fg:#ffe4ce;--fg-soft:#e4bfa8}
body.rose2{--bg:#ffdcbe}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.05;text-wrap:balance;font-variation-settings:"SOFT" 100}
h1{font-size:clamp(44px,7vw,104px)}
h2{font-size:clamp(34px,4.6vw,64px)}
h3{font-size:clamp(22px,2.4vw,30px)}
p{margin:0}
em{font-style:italic;font-weight:300}
img,video{max-width:100%;display:block}
a{color:inherit}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-soft)}

/* ---------- Header ---------- */
/* Eine einzige Glasfläche: Leiste (Pille) + quer liegende Kakaoschote in der Mitte, per Maske vereint.
   So haben Leiste und Schote garantiert dieselbe Deckkraft. Maße über Variablen: --bh Leistenhöhe, --pw/--ph Schote. */
.hdr{--glass:rgba(255,255,255,.66);--blur:blur(18px) saturate(1.4);--bh:88px;--pw:340px;--ph:200px;
  --pod-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 340 176%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M6 90C26 42 104 12 186 12C258 12 314 40 324 84C332 126 280 162 194 164C108 166 30 140 6 90Z%22/%3E%3C/svg%3E");
  --bar-mask:radial-gradient(closest-side,#000 98%,transparent 100%) left center/var(--bh) var(--bh) no-repeat,
             radial-gradient(closest-side,#000 98%,transparent 100%) right center/var(--bh) var(--bh) no-repeat,
             linear-gradient(#000,#000) center/calc(100% - var(--bh)) var(--bh) no-repeat,
             var(--pod-mask) center/var(--pw) var(--ph) no-repeat;
  position:fixed;inset:0 0 auto 0;z-index:40;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) var(--pw) minmax(0,1fr);align-items:center;height:var(--bh);margin:40px clamp(16px,3vw,40px) 0;padding:0 8px;color:var(--braun-deep);pointer-events:none}
.hdr::before{content:"";position:absolute;left:0;right:0;top:calc((var(--bh) - var(--ph)) / 2);bottom:calc((var(--bh) - var(--ph)) / 2);z-index:-1;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);-webkit-mask:var(--bar-mask);mask:var(--bar-mask)}
/* weicher Schatten derselben Form (äußeres Element weichgezeichnet, inneres maskiert) */
.hdr-shadow{position:absolute;left:0;right:0;top:calc((var(--bh) - var(--ph)) / 2 + 10px);bottom:calc((var(--bh) - var(--ph)) / 2 - 10px);z-index:-2;filter:blur(16px);opacity:.55;pointer-events:none}
.hdr-shadow span{position:absolute;inset:0;background:rgba(74,47,52,.28);-webkit-mask:var(--bar-mask);mask:var(--bar-mask)}
.hdr nav{display:flex;gap:4px;padding:0}
.hdr nav.l{justify-self:center;align-items:center}
/* links: Startseite, Farmen, Weisheit mittig; rechts: Shop mittig, Warenkorb fest ganz rechts */
.hdr nav.r{justify-self:stretch;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px}
.hdr nav.r>a:not(.cart){grid-column:2}.hdr nav.r .cart{grid-column:3;justify-self:end}
.hdr nav a.cart{background:var(--orange);color:var(--braun-deep);margin-left:6px;display:inline-flex;align-items:center;gap:6px}
.hdr .bag{display:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hdr nav a.cart:hover,.hdr nav a.cart:focus-visible{background:#e8a800}
.hdr>*{pointer-events:auto}
.hdr .logo{position:relative;display:grid;place-items:center;width:var(--pw);height:var(--bh)}
.hdr .logo img{position:relative;width:150px;z-index:1;transform:translate(var(--logo-x,10.5px),var(--logo-y,-8.5px))} /* optisch mittig: waagerecht auf dem Flächenschwerpunkt der Schotenform (nicht Bounding-Box), senkrecht im Browser nachgemessen */
/* Kontur der Kakaoschote, leicht eingefärbt; --ripe wandert beim Scrollen von Grüngelb über Gelb zu Orange */
.hdr .pod{position:absolute;left:0;top:calc((var(--bh) - var(--ph)) / 2);width:var(--pw);height:var(--ph);overflow:visible;pointer-events:none}
.hdr .pod path{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.hdr .pod-body{fill:var(--ripe,#d9c95a);fill-opacity:.16;stroke:var(--ripe,#d9c95a);stroke-width:2.2;transition:fill .6s,stroke .6s}
.hdr .pod-ridge{fill:none;stroke:var(--ripe,#d9c95a);stroke-width:1.4;opacity:.75;transition:stroke .6s}
.hdr .pod-stem path{stroke:var(--braun);stroke-width:1.6}
.hdr .pod-stem .cushion{fill:#8a5a3a;fill-opacity:.85;stroke:#5b3b27}
.hdr .pod-stem .vein{fill:none;stroke:#5c7436;stroke-width:.9;opacity:.8}
.hdr .pod-stem .stalk{fill:none;stroke:#6b4a2f;stroke-width:3.2}
.hdr .pod-stem .node{fill:none;stroke:#6b4a2f;stroke-width:1.6}
.hdr .pod-stem .leaf{fill:#7d9a4a;fill-opacity:.55;stroke:#5c7436;stroke-width:1.2}
/* Logo klarer: heller Hof hinter dem Logo + feine Kontur */
.hdr .logo-halo{position:absolute;left:calc(50% + var(--logo-x,10.5px));top:calc(50% + var(--logo-y,-8.5px));width:230px;height:150px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,.4) 55%,rgba(255,255,255,0));pointer-events:none;z-index:0}
.hdr .logo img{filter:drop-shadow(0 0 .45px rgba(74,47,52,.9)) drop-shadow(0 1px 0 rgba(74,47,52,.55)) drop-shadow(0 3px 5px rgba(74,47,52,.14))} /* feine dunkle Kontur + 1px Kante + zarter Tiefenschatten */
.hdr .logo:hover .pod-body{fill-opacity:.32}
.hdr nav a{text-decoration:none;font-weight:800;font-size:20px;padding:9px 15px;border-radius:999px;transition:background .25s,color .25s;white-space:nowrap}
.hdr nav a:hover,.hdr nav a:focus-visible{background:var(--orange);color:var(--braun-deep)} /* Hover im Kakaw-Gelb */
/* Zwischenbreite (Tablet / schmales Fenster): Seitenspalten sind oben minmax(0,1fr), damit die Schote immer exakt in der Mitte der Glasfläche bleibt.
   Hier wird die Leiste kompakter, damit nichts überläuft: kleinere Schote, „Weisheit“ ohne „des Kakaos“, Warenkorb als Taschen-Icon. */
@media (min-width:861px) and (max-width:1200px){.hdr{--bh:76px;--pw:260px;--ph:154px}.hdr .logo img{width:115px;--logo-x:8px;--logo-y:-6.5px}.hdr .logo-halo{--logo-x:8px;--logo-y:-6.5px;width:176px;height:115px}.hdr nav{gap:2px}.hdr nav a{font-size:13px;padding:8px 10px}.hdr .lg,.hdr .cart-t{display:none}.hdr .bag{display:inline-block}}
@media (max-width:860px){.hdr{--bh:56px;--pw:190px;--ph:112px;margin-top:28px}.hdr .logo img{width:84px;--logo-x:5.8px;--logo-y:-2.8px}.hdr .logo-halo{--logo-x:5.8px;--logo-y:-2.8px}.hdr nav a{font-size:13px;padding:8px 12px}.hdr .lg,.hdr .caret{display:none}.hdr .logo-halo{width:130px;height:84px}.hdr nav.l>a:not(:first-child),.hdr nav.l .dd,.hdr nav.r a:not(.cart){display:none}.hdr .cart-t{display:none}.hdr .bag{display:inline-block}}

/* ---------- Baum-Ebene (liegt unter allem) ---------- */
.tree-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s ease;
  /* --m0: Oberkante von Kapitel I im Viewport. Darüber (Hero, Icon-Streifen) bleibt der Baum unsichtbar */
  clip-path:inset(var(--m0,0px) 0 0 0);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--m0,0px) + 58vh),transparent calc(var(--m0,0px) + 88vh));mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--m0,0px) + 58vh),transparent calc(var(--m0,0px) + 88vh))}
.tree-layer.on{opacity:1}
.tree-layer img{position:absolute;left:50%;top:0;width:var(--tree-w);height:auto;transform:translate3d(-50%,var(--ty,0px),0);will-change:transform;filter:drop-shadow(0 30px 40px rgba(74,47,52,.12))}
body.dark .tree-layer img{filter:brightness(1.15) contrast(.95) drop-shadow(0 0 60px rgba(252,188,15,.18))}
@media (max-width:760px){:root{--tree-w:70vw}.tree-layer img{left:18%}}

/* ---------- Baum-Zeitstrahl (rechts): Krone, geschwungener Stamm, Wurzeln ---------- */
.meter{opacity:0;transition:opacity .8s;position:fixed;left:clamp(8px,1.5vw,24px);top:50%;transform:translateY(-50%);z-index:30;pointer-events:none;color:var(--fg-soft)}
body.treeon .meter{opacity:1}
.meter svg{display:block;height:min(66vh,520px);width:auto;overflow:visible}
.meter .deco{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.meter .track{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;opacity:.28}
.meter .fill{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100}
.meter .fruit path{fill:var(--orange);stroke:var(--braun);stroke-width:1.8}
body.dark .meter .fruit path{stroke:var(--rose)}
.meter .stop{pointer-events:auto;cursor:pointer;color:var(--fg-soft);transition:color .3s}
.meter .stop .hit{fill:transparent}
.meter .stop .dot{fill:currentColor;opacity:.6}
.meter .stop use{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity .3s}
.meter .stop .ic{transform-box:fill-box;transform-origin:center;transition:transform .35s}
.meter .stop:hover use,.meter .stop.on use{opacity:1}
.meter .stop.on{color:var(--orange)}
.meter .stop.on .ic{transform:scale(1.25)}
@media (max-width:760px){.meter{display:none}}

/* ---------- Inhalte ---------- */
main{position:relative;z-index:1}
section{position:relative;padding:clamp(70px,11vw,150px) clamp(16px,4vw,56px)}
.row{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.row.center{grid-template-columns:1fr;justify-items:center;text-align:center}
.row.center .blk{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:clamp(22px,3vw,44px);border-radius:40px;max-width:720px}
.blk{display:flex;flex-direction:column;gap:18px;max-width:540px}
.row .blk{background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:clamp(22px,3vw,40px);border-radius:34px;border:1px solid rgba(255,255,255,.25)}
body.dark .row .blk{background:rgba(255,240,230,.13);border-color:rgba(255,228,206,.18);box-shadow:0 20px 60px rgba(0,0,0,.18)}
.blk p{max-width:56ch;font-size:clamp(16px,1.25vw,19px)}
.right{grid-column:2}.left{grid-column:1}
.podimg{border-radius:var(--pod);overflow:hidden;aspect-ratio:1/1.12;width:100%;max-width:520px;animation:breathe 11s ease-in-out infinite alternate}
.podimg.b{border-radius:var(--pod2);animation-delay:-5s}
.podimg img{width:100%;height:100%;object-fit:cover}
@keyframes breathe{from{border-radius:62% 38% 58% 42% / 55% 48% 52% 45%}to{border-radius:48% 52% 46% 54% / 58% 44% 56% 42%}}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:var(--braun-deep);font-weight:800;padding:15px 30px;border-radius:999px;text-decoration:none;font-size:15px;border:0;cursor:pointer;transition:transform .2s;width:max-content}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border:2px solid currentColor;color:inherit}
/* Tag = gerade Glas-Pille */
.tag{display:inline-flex;align-items:center;color:var(--braun-deep);font-size:12px;font-weight:800;padding:8px 16px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;width:max-content;background:rgba(255,248,207,.55);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(255,255,255,.55);box-shadow:0 6px 18px rgba(74,47,52,.10)}
.farm .tag{background:rgba(255,248,207,.7)}
body.dark .tag{background:rgba(255,248,207,.85)}
.num{font-family:var(--display);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);background:var(--braun);padding:5px 14px;border-radius:999px;width:max-content}
body.dark .num{background:var(--rose);color:var(--braun-deep)}
.rv{opacity:.001;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}
@media (max-width:860px){.row{grid-template-columns:1fr}.right,.left{grid-column:1}.blk{max-width:none}}

/* ---------- Hero ---------- */
.hero{height:100vh;height:100svh;min-height:640px;padding:0;overflow:hidden;display:flex;align-items:flex-end;background:#2b1a1c}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(var(--hs,1));transform-origin:50% 45%}
.hero video{opacity:0;transition:opacity .8s}
/* Das Hero-Video hat fest eingebrannte schwarze Balken (1920x1080, Bild nur 1920x900). Video 20 % höher als der Hero und mittig, so fallen die Balken oben/unten aus dem Ausschnitt. */
.hero video{top:-10%;bottom:auto;height:120%}.hero video.playing{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(74,47,52,.72),rgba(74,47,52,.05) 55%),linear-gradient(to bottom,rgba(43,26,28,.55),transparent 22%)}
.hero .inner{position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,56px) clamp(40px,7vh,80px);display:grid;grid-template-columns:1fr;gap:30px;align-items:end;color:var(--rose);opacity:var(--ho,1)}
.hero h1{color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.hero .lead{font-size:clamp(16px,1.4vw,20px);max-width:44ch;margin-top:14px;color:var(--rose)}
.hero .index{display:flex;flex-direction:column;gap:2px;font-family:var(--display);font-size:clamp(15px,1.3vw,19px);text-align:right;background:rgba(255,228,206,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,228,206,.22);border-radius:28px;padding:14px 10px}
.hero .index a{text-decoration:none;color:var(--rose);display:flex;gap:14px;justify-content:flex-end;align-items:baseline;opacity:.9;padding:7px 16px;border-radius:999px;transition:background .25s,transform .25s,color .25s}
.hero .index a:hover{background:rgba(255,228,206,.18);color:#fff;transform:translateX(-4px)}
.hero .index a:hover span:first-child{color:var(--orange)}
.hero .index a span:first-child{color:var(--orange);font-variant-numeric:tabular-nums;min-width:2.2em;text-align:right}
.hero .scrollhint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;color:var(--rose);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;opacity:.8;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}
@media (max-width:760px){.hero .inner{grid-template-columns:1fr}.hero .index{text-align:left}.hero .index a{justify-content:flex-start}}

/* ---------- Icon-Streifen ---------- */
.strip{padding:clamp(34px,5vw,60px) clamp(16px,4vw,56px);background:color-mix(in srgb,var(--bg) 82%,#fff 18%);position:relative;z-index:2}
.strip .in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.strip .it{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:15px;line-height:1.45;max-width:28ch;margin:0 auto}
.strip .it b{font-family:var(--display);font-weight:500;font-size:22px;color:var(--braun-deep)}
.strip .it span{color:var(--fg-soft)}
body.dark .strip .it b{color:var(--rose)}
.strip svg{width:56px;height:56px;stroke:var(--braun-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.dark .strip{background:#5a3a40}body.dark .strip svg{stroke:var(--rose)}
@media (max-width:860px){.strip .in{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.strip .in{grid-template-columns:1fr}}

/* ---------- Kapitel I: Wald / Säulen ---------- */
.row.three{grid-template-columns:1fr 1.5fr 1fr;align-items:center}
@media (min-width:1001px) and (max-width:1600px){.row.three{padding-left:100px}} /* Platz für den Zeitstrahl links */
.pillars.col{grid-template-columns:1fr}
.pillars.col .pillar:nth-child(even){transform:translateY(0)}
.pillars.col.l .pillar:first-child{transform:translateX(-14px)}.pillars.col.r .pillar:first-child{transform:translateX(14px)}
@media (max-width:1000px){.row.three{grid-template-columns:1fr}.row.three .blk{order:-1}.pillars.col{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.pillars.col{grid-template-columns:1fr}}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pillar{background:color-mix(in srgb,var(--bg) 78%,#fff 20%);border-radius:var(--pod);padding:30px 26px;display:flex;flex-direction:column;gap:8px;aspect-ratio:1/1.05;justify-content:center;transition:transform .5s}
.pillar:nth-child(even){border-radius:var(--pod2);transform:translateY(28px)}
.pillar h3{font-size:22px}
.pillar p{font-size:14.5px;line-height:1.5;color:var(--fg-soft)}
.pillar .ic{width:34px;height:24px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--orange);transform:rotate(-18deg)}
@media (max-width:480px){.pillars{grid-template-columns:1fr}.pillar{aspect-ratio:auto}.pillar:nth-child(even){transform:none}}

/* ---------- Kapitel II: Farmen ---------- */
.farms{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px)}
.farm{position:relative;border-radius:40px;overflow:hidden;min-height:620px;display:flex;align-items:flex-end;color:var(--rose)}
.farm video,.farm>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.farm::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(74,47,52,.9),rgba(74,47,52,.1) 60%)}
.farm .t{position:relative;z-index:2;padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:10px}
.farm h3{font-size:clamp(28px,3vw,44px);color:#fff}
.farm p{font-size:15.5px;max-width:46ch}
.farm .q{font-family:var(--display);font-style:italic;font-size:17px;color:var(--lemon)}
.farm .btn{margin-top:8px}
@media (max-width:860px){.farms{grid-template-columns:1fr}.farm{min-height:520px}}

/* ---------- Kapitel III: Horizontal-Scroll ---------- */
.hscroll{padding:0;height:340vh}
.hscroll .sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:30px}
.hscroll .head{padding:0 clamp(16px,4vw,56px);max-width:1320px;margin:0 auto;width:100%}
.hscroll .head>*{display:inline-block}
.hscroll .head h2{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 22px;border-radius:30px}
.hscroll .track{display:flex;gap:clamp(18px,3vw,40px);padding:0 clamp(16px,4vw,56px);transform:translate3d(var(--tx,0px),0,0);will-change:transform;width:max-content}
.step{width:min(72vw,440px);flex:none;display:flex;flex-direction:column;gap:16px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:18px;border-radius:34px}
.step .im{border-radius:28px;overflow:hidden;aspect-ratio:16/10;max-height:250px}
.step:nth-child(odd) .im{border-radius:var(--pod);aspect-ratio:16/10}
.step .im img{width:100%;height:100%;object-fit:cover}
.step .k{display:flex;align-items:baseline;gap:12px}
.step .k b{font-family:var(--display);font-size:44px;font-weight:400;color:var(--orange)}
.step h3{font-size:30px}
.step p{font-size:18px;line-height:1.55;color:var(--fg)}
.step .fact{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--lemon);color:var(--braun-deep);border-radius:999px;padding:5px 12px;width:max-content;transform:rotate(-2deg)}

/* ---------- Kapitel IV: Ritual (dunkel) ---------- */
.ritual .fire{border-radius:var(--pod2);overflow:hidden;aspect-ratio:1/1.15;max-width:520px;width:100%}
.ritual .fire img{width:100%;height:100%;object-fit:cover}
.ritual .cups{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.ritual .cups img{border-radius:24px;aspect-ratio:1;object-fit:cover;width:100%}
.recipe{display:flex;flex-direction:column;gap:6px;font-size:15px;border-left:3px solid var(--orange);padding-left:16px}
.recipe b{color:var(--orange)}

/* ---------- Kapitel V: Shop ---------- */
.products{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px)}
.product{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);border-radius:40px;padding:clamp(22px,3vw,36px) clamp(18px,2.5vw,32px)}
.product .im{width:min(80%,360px);aspect-ratio:1/1.1;border-radius:var(--pod);overflow:hidden;background:var(--lemon);transition:transform .5s;position:relative}
.product:nth-child(2) .im{border-radius:var(--pod2)}
.product .im img{width:100%;height:100%;object-fit:cover}
.product:hover .im{transform:rotate(-3deg) translateY(-6px)}
.product .badge{position:absolute;top:14px;right:10px;background:var(--orange);color:var(--braun-deep);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:999px;transform:rotate(8deg)}
.product h3{font-size:clamp(24px,2.6vw,34px)}
.product .ing{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.product .ing span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:1.5px solid rgba(110,73,79,.35)}
.product .price{font-family:var(--display);font-size:24px}
.product .price small{font-family:var(--body);font-size:13px;color:var(--fg-soft)}
.sizes{display:inline-flex;gap:6px;background:color-mix(in srgb,var(--bg) 60%,#fff 30%);padding:5px;border-radius:999px}
.sizes span{padding:7px 14px;border-radius:999px;font-weight:800;font-size:13px}
.sizes span.on{background:var(--braun);color:var(--rose)}
@media (max-width:760px){.products{grid-template-columns:1fr}}

/* ---------- Kapitel VI: Wurzeln / Footer ---------- */
.roots{padding-bottom:0}
.quote{font-family:var(--display);font-size:clamp(26px,3.4vw,46px);line-height:1.2;font-style:italic;font-weight:300;max-width:22ch;text-align:center}
.founder{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:8px}
.founder img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.founder b{display:block}
.founder small{color:var(--fg-soft)}
.news{margin-top:50px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.news form{display:flex;gap:8px;background:#fff5ea;padding:6px;border-radius:999px;max-width:100%}
.news input{border:0;background:transparent;padding:10px 18px;font-family:var(--body);font-size:15px;min-width:0;width:240px;color:var(--braun)}
.news input:focus{outline:2px solid var(--blau);border-radius:999px}
footer{margin:90px calc(-1 * clamp(16px,4vw,56px)) 0;background:var(--braun);color:var(--rose);padding:70px clamp(24px,5vw,72px) 40px;position:relative;overflow:hidden;border-radius:64px 64px 0 0;box-shadow:0 -20px 60px rgba(74,47,52,.12)}
@media (max-width:760px){footer{border-radius:36px 36px 0 0}}
footer .net{position:absolute;inset:0;opacity:.07;background-image:radial-gradient(circle at 1px 1px,#fff 1.4px,transparent 0);background-size:22px 22px;mask-image:linear-gradient(to bottom,transparent,#000)}
footer .cols{position:relative;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;font-size:14.5px}
footer h4{font-family:var(--display);font-size:18px;font-weight:500;margin:0 0 10px}
footer a{display:block;text-decoration:none;opacity:.85;line-height:1.9}
footer a:hover{opacity:1;color:var(--orange)}
footer .copy{position:relative;max-width:1320px;margin:40px auto 0;font-size:12.5px;opacity:.6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.podimg,.hero .scrollhint{animation:none}.rv{opacity:1;transform:none;transition:none}}

/* ---------- Bausteine der Farm-Seiten ---------- */
.facts{padding:clamp(28px,4vw,50px) clamp(16px,4vw,56px);position:relative;z-index:2}
.facts .in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fact{background:color-mix(in srgb,var(--bg) 70%,#fff 30%);border-radius:var(--pod);padding:26px 18px;text-align:center;display:flex;flex-direction:column;gap:4px;aspect-ratio:1.35/1;justify-content:center}
.fact:nth-child(even){border-radius:var(--pod2)}
.fact b{font-family:var(--display);font-size:clamp(34px,3.6vw,52px);font-weight:500;line-height:1;color:var(--braun-deep)}
.fact span{font-size:13.5px;font-weight:700;color:var(--fg-soft)}
@media (max-width:860px){.facts .in{grid-template-columns:1fr 1fr}}
.gal2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gal2 img{width:100%;height:100%;object-fit:cover;border-radius:26px;aspect-ratio:4/5}
.gal2 img:nth-child(2){margin-top:34px}
.gal2 .wide{grid-column:1/-1;aspect-ratio:16/9;margin-top:0}
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);max-width:1320px;margin:40px auto 0}
.person{display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);border-radius:40px;padding:clamp(20px,3vw,36px)}
.person .im{border-radius:var(--pod);overflow:hidden;aspect-ratio:1/1;width:min(100%,300px);align-self:center}
.person:nth-child(2) .im{border-radius:var(--pod2)}
.person .im img{width:100%;height:100%;object-fit:cover}
.person h3{font-size:clamp(24px,2.4vw,32px)}
.person .q{font-family:var(--display);font-style:italic;font-size:18px;color:var(--braun-deep);border-left:3px solid var(--orange);padding-left:14px}
.person p{font-size:16px}
@media (max-width:860px){.people{grid-template-columns:1fr}}
.bean-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.bean-facts div{background:color-mix(in srgb,var(--bg) 60%,#fff 40%);border-radius:24px;padding:16px 18px;font-size:14.5px;line-height:1.45}
.bean-facts b{display:block;font-family:var(--display);font-size:26px;font-weight:500;color:var(--braun-deep)}
.white-bean{display:flex;gap:14px;align-items:center;margin-top:6px}
.white-bean i{width:34px;height:48px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;flex:none;border:2px solid var(--braun)}
.white-bean i.w{background:#fff7ee}.white-bean i.p{background:#7b4b8a}
.white-bean small{font-size:13.5px;color:var(--fg-soft)}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:14px;color:var(--fg-soft);margin-bottom:20px}
.village .row{align-items:start}
.hint{font-size:12.5px;color:var(--fg-soft);background:var(--lemon);border-radius:14px;padding:8px 12px;display:inline-block;color:var(--braun-deep)}


/* ---------- Untermenü im Header ---------- */
.hdr .dd{position:relative}
.hdr .dd .caret{font-size:10px;opacity:.6;margin-left:2px}
.hdr .dd-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:240px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:24px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 40px rgba(74,47,52,.14);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
.hdr .dd:hover .dd-menu,.hdr .dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .25s,transform .25s}
.hdr .dd-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.hdr .dd-menu a{padding:10px 16px;border-radius:14px;font-size:14px;font-weight:800;color:var(--braun-deep);display:block}
.hdr .dd-menu a:hover,body.dark .hdr .dd-menu a:hover{background:var(--orange);color:var(--braun-deep)}
body.dark .hdr .dd-menu{background:rgba(74,47,52,.85)}
body.dark .hdr .dd-menu a{color:var(--rose)}

/* ---------- Panel-Seiten (nebeneinander, links/rechts wie einfach.jetzt/#projekte) ---------- */
body.panels-page{overflow:hidden;height:100vh;height:100dvh}
.panels{position:fixed;inset:0;overflow:hidden;z-index:1}
.ptrack{display:flex;height:100%;transform:translate3d(calc(var(--pi,0) * -100vw),0,0);transition:transform .7s cubic-bezier(.65,0,.25,1);will-change:transform}
.panel{flex:none;width:100vw;height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;overscroll-behavior:contain}
.panel::-webkit-scrollbar{width:9px}.panel::-webkit-scrollbar-thumb{background:linear-gradient(var(--orange),var(--braun));border-radius:99px}
.panel-in{max-width:1120px;margin:0 auto;padding:190px clamp(16px,4vw,56px) 0;min-height:100%;display:flex;flex-direction:column}
.panel-head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;padding-block:clamp(40px,8vh,90px)}
.panel-head .num{background:var(--braun);color:var(--orange)}
.panel-head h1{font-size:clamp(40px,6vw,88px)}
.panel-head p{max-width:56ch;font-size:clamp(16px,1.3vw,20px);color:var(--fg-soft)}
.panel .placeholder{margin:30px 0 90px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.panel .placeholder div{border:2px dashed rgba(110,73,79,.25);padding:34px 24px;text-align:center;color:var(--fg-soft);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;aspect-ratio:1/1.05;display:grid;place-items:center}
.panel .placeholder div:nth-child(odd){border-radius:var(--pod)}.panel .placeholder div:nth-child(even){border-radius:var(--pod2)}
.panel footer{margin:auto calc(-1 * clamp(16px,4vw,56px)) 0}
/* Sub-Navigation (Pillen) unter dem Header */
.subnav{position:fixed;left:50%;top:164px;transform:translateX(-50%);z-index:30;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--glass, rgba(255,255,255,.66));backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.55);box-shadow:0 10px 30px rgba(74,47,52,.10)}
.subnav button{border:0;background:transparent;font:inherit;font-weight:800;font-size:13.5px;padding:9px 16px;border-radius:999px;color:var(--braun-deep);cursor:pointer;transition:background .25s,color .25s;white-space:nowrap}
.subnav button:hover{background:var(--orange);color:var(--braun-deep)}
.subnav button.on{background:var(--braun);color:var(--rose)}
/* Randpfeile */
.edge{position:fixed;top:50%;transform:translateY(-50%);z-index:40;display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--braun-deep);font:inherit;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:14px;cursor:pointer;opacity:.9;transition:opacity .3s}
.edge:hover{opacity:1}.edge[hidden]{display:none}
.edge .arr{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.66);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px rgba(74,47,52,.12);display:grid;place-items:center;font-size:20px;transition:transform .3s;color:var(--braun-deep)}
.edge.left{left:12px}.edge.right{right:12px}
.edge.left:hover .arr{transform:translateX(-5px)}.edge.right:hover .arr{transform:translateX(5px)}
.edge .lbl{writing-mode:vertical-rl;text-orientation:mixed}
.edge.left .lbl{transform:rotate(180deg)}
body.dark .edge,body.dark .subnav button{color:var(--rose)}
@media (max-width:760px){.edge .lbl{display:none}.edge{top:auto;bottom:16px;transform:none}.subnav{top:auto;bottom:88px;max-width:calc(100vw - 32px);overflow-x:auto}.panel-in{padding-top:120px}.panel .placeholder{margin-bottom:170px}}


/* ---------- Wissenskarten + Popup ---------- */
.kcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2.4vw,30px);margin:10px 0 90px}
.kcard{display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--bg) 70%,#fff 30%);border:1px solid rgba(255,255,255,.5);border-radius:36px;padding:18px 18px 22px;transition:transform .35s,box-shadow .35s}
.kcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(74,47,52,.12)}
.kcard .im{aspect-ratio:1/1.05;border-radius:var(--pod);overflow:hidden;margin-bottom:4px}
.kcard:nth-child(even) .im{border-radius:var(--pod2)}
.kcard .im img{width:100%;height:100%;object-fit:cover}
.kcard h3{font-size:clamp(21px,1.8vw,25px);padding:0 6px}
.kcard p{font-size:15px;line-height:1.5;color:var(--fg-soft);padding:0 6px;flex:1}
.kcard .btn{margin:6px 6px 0;padding:11px 20px;font-size:14px}
.modal{border:0;padding:0;background:transparent;max-width:min(920px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 48px);overflow:visible}
.modal::backdrop{background:rgba(74,47,52,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:0;background:#fff5ea;color:var(--braun);border-radius:40px;overflow:hidden;box-shadow:0 30px 80px rgba(74,47,52,.35);max-height:calc(100vh - 48px)}
.modal-im{min-height:260px}
.modal-im img{width:100%;height:100%;object-fit:cover;display:block}
.modal-txt{padding:clamp(24px,3.5vw,48px);overflow-y:auto;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.65}
.modal-txt h2{font-size:clamp(28px,3vw,40px);margin-bottom:6px;color:var(--braun-deep)}
.modal-txt p{max-width:60ch}.modal-txt a{color:var(--braun-deep);font-weight:800}
.modal-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,245,234,.9);color:var(--braun-deep);font-size:26px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 6px 18px rgba(74,47,52,.18)}
.modal-x:hover{background:var(--orange)}
.modal[open]{animation:modal-in .35s ease}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
@media (max-width:760px){.modal-in{grid-template-columns:1fr;max-height:calc(100vh - 24px)}.modal-im{max-height:220px}.modal{max-width:calc(100vw - 16px);max-height:calc(100vh - 24px)}}


/* ---------- Kapitel I: Bildband „Kakao wächst im Schatten“ ---------- */
.shade-strip{width:80vw;max-width:100%;margin:clamp(40px,6vw,80px) auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:34px;overflow:hidden;box-shadow:0 24px 60px rgba(74,47,52,.16)}
.shade-strip img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media (max-width:760px){.shade-strip{width:100%;grid-template-columns:repeat(2,1fr);border-radius:26px}}

/* ---------- Kapitel VI: Wurzeln – Marc & Bruno ---------- */
.roots .duo{margin:6px 0 4px;width:100%;max-width:680px;aspect-ratio:3/2;border-radius:var(--pod2);overflow:hidden;box-shadow:0 24px 60px rgba(74,47,52,.18)}
.roots .duo img{width:100%;height:100%;object-fit:cover;object-position:40% 45%}
.roots .intro{font-size:clamp(17px,1.4vw,21px);line-height:1.6;max-width:50ch;text-align:center}
.roots .founder{text-align:center}

/* ---------- Wissensseite: versetzte Reihen (Bild | Text) + Fakten-Kasten ---------- */
.panel-in{max-width:1320px}
.wrow{padding-block:clamp(28px,5vh,60px)}
.wrow .media{display:flex;justify-content:center}
.wrow .podimg{max-width:460px}
.wrow.flip .media{order:2}
.wrow .blk{gap:14px}
.wrow .blk h2{font-size:clamp(30px,3.4vw,46px)}
.infobox{background:var(--lemon);color:var(--braun-deep);border-radius:26px;padding:18px 20px;display:flex;flex-direction:column;gap:8px;max-width:420px}
.infobox b{font-family:var(--display);font-weight:500;font-size:19px}
.infobox ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.4}
.infobox li{position:relative;padding-left:20px}
.infobox li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:8px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--orange);transform:rotate(-18deg)}
body.dark .infobox{background:rgba(255,248,207,.9)}
.wrow .btn{width:max-content}
@media (max-width:860px){.wrow.flip .media{order:0}.wrow .podimg{max-width:360px}}

/* ---------- Farm-Panelseite (Jun Ajpu): Hero im Panel, Zahlen, Video-Strip ---------- */
.panel-in.has-hero{padding-top:0}
.phero{position:relative;min-height:min(78vh,720px);border-radius:0 0 48px 48px;overflow:hidden;display:flex;align-items:flex-end;background:#2b1a1c;color:var(--rose);margin:0 calc(-1 * clamp(16px,4vw,56px))}
.phero .poster,.phero video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(74,47,52,.78),rgba(74,47,52,.08) 55%)}
.phero .inner{position:relative;z-index:2;padding:0 clamp(16px,4vw,56px) clamp(32px,6vh,64px);max-width:900px}
.phero .eyebrow{color:var(--orange)}
.phero h1{color:#fff;font-size:clamp(38px,5.6vw,80px);text-shadow:0 4px 40px rgba(0,0,0,.35)}
.phero .lead{font-size:clamp(16px,1.3vw,19px);max-width:52ch;margin-top:12px;color:var(--rose)}
.panel .facts{padding:clamp(24px,3vw,40px) 0 0}
.panel .facts .in{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.panel .facts .in{grid-template-columns:1fr 1fr}}
.pvideos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px);margin:10px 0 90px}
.pv{margin:0;display:flex;flex-direction:column;gap:12px}
.pv video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--pod);background:var(--braun);display:block}
.pv:nth-child(even) video{border-radius:var(--pod2)}
.pv figcaption{display:flex;flex-direction:column;gap:4px;padding:0 6px}
.pv b{font-family:var(--display);font-weight:500;font-size:22px;color:var(--braun-deep)}
.pv span{font-size:14.5px;color:var(--fg-soft);line-height:1.45}
@media (max-width:860px){.pvideos{grid-template-columns:1fr 1fr}}

/* Reise als Pfeil: gestrichelte Linie durch die Mitte, Pfeilspitze zeigt auf den Werkstatt-Block */
.journey{position:relative;padding-block:30px 10px}
.journey::before{content:"";position:absolute;left:50%;top:0;bottom:-10px;border-left:3px dashed rgba(110,73,79,.6);transform:translateX(-50%)}
.journey::after{content:"";position:absolute;left:50%;bottom:-22px;width:16px;height:16px;border-right:3px solid rgba(110,73,79,.8);border-bottom:3px solid rgba(110,73,79,.8);transform:translateX(-50%) rotate(45deg)}
.journey .wrow{position:relative;z-index:1}
.journey .wrow .blk::before{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--orange);border:3px solid var(--braun);transform:translateY(-50%)}
.journey .wrow .blk{position:relative}
.journey .wrow:not(.flip) .blk::before{left:-30px}
.journey .wrow.flip .blk::before{right:-30px}
.jcenter{margin-top:50px;padding-bottom:90px}
.jcenter .blk{border:2px solid rgba(110,73,79,.25)}
@media (max-width:860px){.journey::before,.journey::after,.journey .wrow .blk::before{display:none}}

/* Farmen-Untermenü (Menüleiste): nutzt dieselben .dd/.dd-menu-Regeln wie „Weisheit des Kakaos“ */
.hdr .dd-farmen .dd-menu{min-width:220px}


/* ---------- DaliLeo-Panelseite (Claude für Bruno, 02.10.): Foto-Schritte, Mini-Galerie, Tier-Slider ---------- */
.psteps{grid-template-columns:repeat(3,1fr);margin-bottom:40px}
.pv.ps img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--pod);display:block;background:var(--braun)}
.pv.ps:nth-child(even) img{border-radius:var(--pod2)}
.pv.ps .k{font-family:var(--display);font-weight:500;font-size:24px;color:var(--braun-deep)}
.pv.ps .k b{color:var(--orange);font-weight:400;font-size:34px;margin-right:6px}
.pv.ps .chip{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--lemon);color:var(--braun-deep);border-radius:999px;padding:5px 12px;width:max-content;margin-top:4px}
@media (max-width:860px){.psteps{grid-template-columns:1fr 1fr}}
.minigal{display:grid;gap:14px;max-width:1320px;margin:-30px auto 70px}
.minigal.n2{grid-template-columns:1fr 1fr}.minigal.n3{grid-template-columns:1fr 1fr 1fr}
.minigal img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;border-radius:30px;display:block}
.minigal div:nth-child(even) img{border-radius:var(--pod2);aspect-ratio:16/10}
@media (max-width:860px){.minigal.n3{grid-template-columns:1fr 1fr}.minigal.n3 div:last-child{grid-column:1/-1}}
.tslider{position:relative;max-width:1320px;margin:10px auto 80px}
.ts-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 14px;-webkit-overflow-scrolling:touch}
.ts-track::-webkit-scrollbar{display:none}
.ts{flex:0 0 min(78vw,360px);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:34px;padding:14px}
.ts img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:26px;display:block}
.ts:nth-child(odd) img{border-radius:var(--pod)}
.ts figcaption{display:flex;flex-direction:column;gap:3px;padding:0 6px 4px}
.ts b{font-family:var(--display);font-weight:500;font-size:22px;color:var(--braun-deep)}
.ts span{font-size:14.5px;color:var(--fg-soft);line-height:1.45}
.ts-arr{position:absolute;top:40%;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:color-mix(in srgb,var(--bg) 70%,#fff 30%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--braun-deep);font-size:22px;cursor:pointer;box-shadow:0 8px 24px rgba(74,47,52,.18)}
.ts-arr.l{left:-10px}.ts-arr.r{right:-10px}
.ts-arr:hover{background:var(--orange)}
@media (max-width:860px){.ts-arr{display:none}}


/* ---------- Schaufenster Startseite (Claude für Bruno, 03.10.): zwei Blöcke + „Was unseren Kakao ausmacht“ ---------- */
.showcase{padding-top:clamp(40px,6vw,80px)}
.products.sc{max-width:1180px}
.products.sc .product .im{width:min(70%,300px);aspect-ratio:1/1}
.products.sc .product .origin{font-size:14px;color:var(--fg-soft);letter-spacing:.02em;margin-top:-6px}
.products.sc .product .price{font-size:26px}
.products.sc .product .price small{display:block;margin-top:4px}
.products.sc .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.why{max-width:1320px;margin:clamp(40px,6vw,70px) auto 0;background:color-mix(in srgb,var(--bg) 70%,#fff 30%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.35);border-radius:48px;padding:clamp(28px,4vw,48px) clamp(18px,3vw,40px)}
.why-t{text-align:center;font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,38px);color:var(--braun-deep);margin:0 0 clamp(22px,3vw,34px)}
.why-t em{font-style:italic;color:var(--orange)}
.why-in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,36px);text-align:center}
.why .it{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:15px;line-height:1.5;max-width:30ch;margin:0 auto}
.why .it b{font-family:var(--display);font-weight:500;font-size:21px;color:var(--braun-deep);line-height:1.2}
.why .it span{color:var(--fg-soft)}
.why svg{width:60px;height:60px;stroke:var(--braun-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;background:var(--lemon);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;padding:10px}
.chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 6px;margin-top:clamp(26px,3vw,40px);padding-top:clamp(18px,2vw,26px);border-top:1px dashed rgba(110,73,79,.35);font-size:13.5px;font-weight:700;color:var(--braun-deep)}
.chain span{background:color-mix(in srgb,var(--bg) 55%,#fff 45%);border-radius:999px;padding:6px 12px}
.chain i{width:14px;border-top:2px dashed rgba(110,73,79,.5)}
.chain em{font-style:italic;font-weight:600;font-family:var(--display);font-size:15px;color:var(--fg-soft);margin-left:10px;padding-left:12px;border-left:2px solid var(--orange)}
.chain b{background:var(--orange);border-radius:999px;padding:6px 14px;margin-left:6px}
@media (max-width:1000px){.why-in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why-in{grid-template-columns:1fr}.why{border-radius:34px}.chain em{margin-left:0;padding-left:0;border:0;width:100%;text-align:center}}


/* ---------- SEO/UX-Durchgang Startseite (Claude für Bruno, 03.10.): Hero-Überschriften, Vertrauen, FAQ, Bewegung ---------- */
.hero h1.kw{color:var(--orange);font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;text-shadow:none;margin:0 0 10px}
.hero h2.big{color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.35);font-size:clamp(40px,6.4vw,92px);line-height:1;font-weight:400}
.hero h2.big em{font-style:italic;color:var(--orange)}
.trust{max-width:1320px;margin:clamp(30px,4vw,50px) auto 0}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tb{background:color-mix(in srgb,var(--bg) 60%,#fff 40%);border-radius:28px;padding:16px 18px;display:flex;flex-direction:column;gap:3px;text-align:center}
.tb b{font-family:var(--display);font-weight:500;font-size:19px;color:var(--braun-deep)}
.tb span{font-size:13.5px;color:var(--fg-soft);line-height:1.4}
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.voice{margin:0;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:30px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.voice blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:17px;line-height:1.45;color:var(--braun-deep)}
.voice figcaption{font-size:12.5px;color:var(--fg-soft);letter-spacing:.04em}
@media (max-width:900px){.trust-in,.voices{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.trust-in,.voices{grid-template-columns:1fr}}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-list details{background:color-mix(in srgb,var(--bg) 70%,#fff 30%);border:1px solid rgba(255,255,255,.35);border-radius:26px;padding:0 22px;transition:background .3s}
.faq-list details[open]{background:color-mix(in srgb,var(--bg) 55%,#fff 45%)}
.faq-list summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-family:var(--display);font-weight:500;font-size:19px;color:var(--braun-deep);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--orange);color:var(--braun-deep);display:grid;place-items:center;font-weight:800;transition:transform .3s}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list details p{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--fg)}
.faq .blk p a{color:var(--braun-deep);text-decoration:underline;text-underline-offset:3px}
:is(a,button,summary,input):focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.hero video,.farm video,.pv video{display:none}}


/* ---------- Kapitel V als Brücke zum Shop + Kaufbalken Handy (Claude für Bruno, 03.10.) ---------- */
.shopcta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:10px}
.btn.big{font-size:18px;padding:18px 36px}
.shopcta .mini{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700}
.shopcta .mini a{color:var(--braun-deep);text-decoration:underline;text-underline-offset:3px}
.shopcta .mini i{width:4px;height:4px;border-radius:50%;background:var(--orange)}
.buybar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:color-mix(in srgb,var(--rose) 80%,#fff 20%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.5);box-shadow:0 12px 36px rgba(74,47,52,.22);font-size:13.5px;color:var(--braun-deep);transform:translateY(120%);transition:transform .4s}
.buybar b{font-family:var(--display);font-weight:500;font-size:15px}
.buybar .btn{padding:10px 18px;font-size:13px;white-space:nowrap}
.buybar.on{transform:none}
@media (max-width:760px){.buybar{display:flex}}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}


/* ---------- Farmseiten SEO/Lesbarkeit (Claude für Bruno, 03.10.): H2-Panelköpfe, H3-Reihen, Ausgänge ---------- */
.panel-head h2{font-size:clamp(40px,6vw,88px)}
.panels .blk h3{font-size:clamp(30px,3.4vw,46px)}
.panels .row.center .blk h3{font-size:clamp(32px,4vw,56px)}
.pexit{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:1320px;margin:20px auto 70px;padding-top:30px;border-top:1px dashed rgba(110,73,79,.3)}


/* ---------- DaliLeo: Foto-Schritte kleiner (Bruno, 03.10.) ---------- */
/* 05.10. (Bruno): 6 nebeneinander war zu schmal – jetzt zwei Reihen à 3, Bilder wieder 4:3 */
.psteps{grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px) clamp(14px,2.2vw,30px);margin-bottom:30px;max-width:1320px;margin-left:auto;margin-right:auto}
.pv.ps img{aspect-ratio:4/3;height:auto} /* height:auto nötig, weil die HTML-Attribute width/height (SEO) sonst 900px Höhe erzwingen */
.pv.ps .k{font-size:21px}.pv.ps .k b{font-size:30px}
.pv.ps figcaption span{font-size:14px}
.pv.ps .chip{font-size:11px;padding:4px 10px}
@media (max-width:560px){.psteps{grid-template-columns:1fr 1fr}}


/* ---------- „Nach oben“-Knopf, läuft auf allen Seiten mit (Bruno, 05.10.) – Logik in kakaw.js (kakawTopButton) ---------- */
.totop{position:fixed;right:22px;bottom:22px;z-index:45;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.66);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 30px rgba(74,47,52,.14);color:var(--braun-deep);display:grid;place-items:center;cursor:pointer;padding:0;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s,transform .35s,background .25s}
.totop.on{opacity:.92;transform:none;pointer-events:auto}
.totop:hover,.totop:focus-visible{opacity:1;background:var(--orange)}
.totop svg{width:22px;height:22px;display:block}
.totop:hover svg{transform:translateY(-2px)}.totop svg{transition:transform .25s}
@media (max-width:760px){.totop{right:12px;bottom:84px;width:46px;height:46px}body.panels-page .totop{bottom:150px}}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}


/* Fototafeln „Was unseren Kakao ausmacht“ (Claude für Marc, 05.10.) – nur angehängt */
.why-in.photos{align-items:start;text-align:left;gap:clamp(12px,1.6vw,20px)}
.why .it.ph{max-width:none;margin:0;gap:0;align-items:stretch;background:color-mix(in srgb,var(--bg) 40%,#fff 60%);border:1px solid rgba(255,255,255,.55);border-radius:28px;overflow:hidden}
.why .it.ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.why .it.ph .tx{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}
@media (min-width:1001px){.why .it.ph:nth-child(even){margin-top:32px}}
@media (max-width:520px){.why .it.ph img{aspect-ratio:4/3}}

/* Fototafeln: Überschriften groß auf dem Bild (Claude für Marc, 05.10.) */
.why-t{font-size:clamp(32px,4.2vw,56px)}
.why .it.ph .pic{position:relative;display:block}
.why .it.ph .pic::after{content:"";position:absolute;inset:35% 0 0 0;background:linear-gradient(to bottom,rgba(30,16,14,0),rgba(30,16,14,.82));pointer-events:none}
.why .it.ph .pic b{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:flex;flex-direction:column;gap:6px;font-family:var(--display);font-weight:500;font-size:clamp(24px,2.3vw,34px);line-height:1.1;color:#fff;text-wrap:balance}
.why .it.ph .pic b i{font-style:italic;font-weight:400;font-size:.6em;color:var(--lemon)}
.why .it.ph .tx{padding:16px 20px 22px;font-size:16px}

/* Wurzelkette im Schaufenster (Claude für Marc, 05.10.) – ab 901 px ersetzt sie die Pillen-Kette */
.rootchain{display:none}
@media (min-width:901px){
  .why .chain{display:none}
  .rootchain{display:block;margin-top:clamp(26px,3.4vw,44px);background:#33211F;border-radius:36px;overflow:hidden}
  .rootchain svg{display:block;width:100%;height:auto;font-family:inherit}
  .rootchain .rc-serif{font-family:var(--display)}
}

/* Wurzelkette: Icon-Regel `.why svg` (gelbe Blase, Kontur) für die Wurzelgrafik aufheben */
.why .rootchain svg{width:100%;height:auto;background:none;border-radius:0;padding:0;stroke:none}

/* Wurzelkette auch schmal: bis 900 px senkrechte Wurzel (.rc-tall), Pillen-Kette entfällt */
.rootchain{display:block;margin-top:clamp(22px,3.4vw,44px);background:#33211F;border-radius:30px;overflow:hidden}
.why .chain{display:none}
.why .rootchain .rc-tall{display:none}
.rootchain .rc-serif{font-family:var(--display)}
@media (max-width:900px){
  .why .rootchain .rc-wide{display:none}
  .why .rootchain .rc-tall{display:block;max-width:400px;margin:0 auto;font-family:inherit}
}

/* Schaufenster „Zwei Welten“ + Fakten mit Icons (Claude für Marc, 05.10.) – nur angehängt */
.showcase .duo{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:40px;overflow:hidden}
.duo .duo-h{display:flex;flex-direction:column;gap:28px;padding:clamp(26px,3.6vw,52px);padding-bottom:clamp(22px,3vw,40px);background:#fff6ec;color:var(--braun-deep)}
.duo .duo-h.dark{background:#33211f;color:#fcebdd}
.duo .duo-top{flex:1;display:flex;align-items:center;gap:clamp(20px,2.6vw,36px)}
.duo .duo-top img:not(.wm){width:clamp(150px,16vw,220px);height:auto;aspect-ratio:11/14;flex-shrink:0;object-fit:cover;border-radius:999px 999px 28px 28px;display:block}
.duo .duo-tx{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left}
.duo .duo-badge{background:var(--orange);color:var(--braun-deep);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.duo h3{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,34px);line-height:1.12;margin:0;color:inherit}
.duo .duo-origin{margin:0;font-size:15px;color:var(--braun-soft)}
.duo .dark .duo-origin{color:#dcc6b8}
.duo .duo-taste{margin:6px 0 0;font-family:var(--display);font-style:italic;font-size:clamp(19px,1.7vw,24px);line-height:1.3;color:#b37d0e}
.duo .dark .duo-taste{color:var(--orange)}
.duo .duo-buy{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 20px;padding-top:24px;border-top:1px solid #ebd3bf}
.duo .dark .duo-buy{border-top-color:#5a423f}
.duo .duo-price{display:flex;align-items:baseline;gap:14px}
.duo .duo-price b{font-family:var(--display);font-weight:500;font-size:40px;line-height:1}
.duo .duo-price span{font-size:15px;color:var(--braun-soft)}
.duo .dark .duo-price span{color:#dcc6b8}
.duo .duo-acts{display:flex;align-items:center;gap:18px}
.duo .duo-link{font-weight:700;font-size:16px;color:inherit;text-decoration:underline;text-underline-offset:4px}
.trust .facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;max-width:1320px;margin:0 auto clamp(22px,3vw,34px)}
.trust .fact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.trust .fact i{width:52px;height:52px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center}
.trust .fact svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust .fact b{font-family:var(--body);font-weight:700;font-size:15px;line-height:1.3;color:var(--braun-deep)}
@media (max-width:900px){.showcase .duo{grid-template-columns:1fr;border-radius:32px}.trust .facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.duo .duo-top{flex-direction:column;align-items:flex-start}.trust .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Wurzelkette Fassung „Kette 5“: botanisch gezeichnet, ohne dunkles Band */
.why .rootchain{background:none;border-radius:0;overflow:visible}

/* Zwei Welten, gestapelt (bis 900 px): Bild, Texte, Preis und Knöpfe mittig */
@media (max-width:900px){
  .duo .duo-top{flex-direction:column;align-items:center}
  .duo .duo-tx{align-items:center;text-align:center}
  .duo .duo-buy{flex-direction:column;justify-content:center;align-items:center}
  .duo .duo-price,.duo .duo-acts{justify-content:center}
}

/* Logo-Schote im Punktstich („Schote 8“, Claude für Marc 05.10.): orange gefüllt, dunkle Kontur, Punkte, Logo weiß */
.hdr .pod-body{fill:#e08a2e;fill-opacity:1;stroke:#3b2620;stroke-width:2.8}
.hdr .pod-ridge{stroke:#3b2620;stroke-width:1.5;opacity:1}
.hdr .pod .pod-dots{fill:none;stroke:#3b2620;stroke-width:1.5;stroke-linecap:round;vector-effect:none}
.hdr .pod-stem .stalk,.hdr .pod-stem .node{stroke:#3b2620}
.hdr .pod-stem .cushion{stroke:#3b2620}
.hdr .logo:hover .pod-body{fill:#e8962f;fill-opacity:1}
.hdr .logo-halo{display:none}
.hdr .logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(59,38,32,.35))}

/* Schote 8 reift wieder: Füllung folgt --ripe (grün → gelb → orange → rotorange); Logo weiß mit feiner dunkler Kontur, damit es auf jeder Stufe lesbar bleibt */
.hdr .pod-body{fill:var(--ripe,#628e38);transition:fill .6s}
.hdr .logo:hover .pod-body{fill:var(--ripe,#628e38);filter:brightness(1.06)}
.hdr .logo img{filter:brightness(0) invert(1) drop-shadow(.7px 0 0 rgba(59,38,32,.6)) drop-shadow(-.7px 0 0 rgba(59,38,32,.6)) drop-shadow(0 .7px 0 rgba(59,38,32,.6)) drop-shadow(0 -.7px 0 rgba(59,38,32,.6))}

/* Stielansatz „Stummel 4“ */
.hdr .pod-stem .stub{fill:#b9925e;stroke:#3b2620;stroke-width:2.2}
.hdr .pod-stem .face{fill:#e8d2ac;stroke:#3b2620;stroke-width:1.8}
.hdr .pod-stem .grain{fill:none;stroke:#3b2620;stroke-width:1}

/* Logo-Schote durchgängig in der reifen Farbe (kein Reifen beim Scrollen mehr) */
.hdr .pod-body,.hdr .logo:hover .pod-body{fill:#bc522a}

/* Logo-Schote: Rippen in abgestuften Stärken (außen kräftig, innen mittel, Spitze fein) */
.hdr .pod-ridge.r-outer{stroke-width:2.6}
.hdr .pod-ridge.r-inner{stroke-width:2}
.hdr .pod-ridge.r-tip{stroke-width:1.6}

/* Handy-Menü (Claude für Marc 05.10.): bis 860 px Burger links, Schote mittig, Warenkorb rechts; Menü klappt als Glasfläche unter der Leiste auf */
.hdr .burger,.hdr .mnav{display:none}
@media (max-width:860px){
  .hdr{margin-left:12px;margin-right:12px;--pw:clamp(150px,48vw,190px);--ph:calc(var(--pw) * .59)}
  .hdr .logo img{width:calc(var(--pw) * .44)}
  .hdr nav.l>a{display:none}
  .hdr .burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:2px;padding:0;border:0;border-radius:50%;background:none;color:var(--braun-deep);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
  .hdr .burger svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .hdr .burger path{transition:transform .25s,opacity .2s;transform-origin:12px 12px}
  .hdr.open .burger .b1{transform:translateY(5px) rotate(45deg)}
  .hdr.open .burger .b2{opacity:0}
  .hdr.open .burger .b3{transform:translateY(-5px) rotate(-45deg)}
  .hdr nav.r{justify-content:flex-end}
  .hdr nav a.cart{min-width:44px;min-height:44px;padding:8px 12px}
  .hdr .mnav{position:absolute;left:0;right:0;top:calc(var(--bh) + (var(--ph) - var(--bh)) / 2 + 10px);display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:28px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 18px 40px -18px rgba(74,47,52,.45);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;max-height:calc(100vh - 170px);overflow:auto}
  .hdr.open .mnav{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .hdr .mnav a{display:flex;align-items:center;min-height:46px;padding:0 16px;border-radius:16px;font-family:var(--body);font-weight:700;font-size:17px;color:var(--braun-deep);text-decoration:none}
  .hdr .mnav a.sub{font-weight:600;font-size:16px;padding-left:28px;min-height:42px}
  .hdr .mnav a:active,.hdr .mnav a:focus-visible{background:var(--orange)}
  .hdr .mnav .mnav-h{padding:12px 16px 2px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--braun-soft)}
  .hdr .mnav a.shop{margin-top:8px;justify-content:center;background:var(--orange)}
}
@media (prefers-reduced-motion:reduce){.hdr .mnav,.hdr .burger path{transition:none}}

/* Logo-Schote wieder durchgängig orange (wie Entwurf „Schote 8“) */
.hdr .pod-body,.hdr .logo:hover .pod-body{fill:#e08a2e}

/* Startseite Hero (Bruno, 07.10.): Scroll-Aufforderung als eigener Absatz */
.hero .lead.scrollcta{margin-top:8px;font-weight:700}

/* ---------- Startseite: vier Eigenschaften als geviertelter 16:9-Block (Bruno, 07.10.) – ersetzt Fotokarten + Wurzelkette ---------- */
.why.quadbox{padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.why.quadbox .why-t{margin-bottom:clamp(18px,2.4vw,28px)}
.quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-auto-flow:column;gap:0;aspect-ratio:16/9;width:100%;border-radius:36px;overflow:hidden;background:var(--braun)}
.qt{position:relative;display:block;overflow:hidden;color:var(--rose);text-decoration:none;background:var(--braun-deep)}
.qt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.qt:hover img{transform:scale(1.04)}
.qt::after{content:"";position:absolute;inset:30% 0 0 0;background:linear-gradient(to bottom,rgba(30,16,14,0),rgba(30,16,14,.86));pointer-events:none}
.qtx{position:absolute;left:clamp(16px,2.4vw,34px);right:clamp(16px,2.4vw,34px);bottom:clamp(14px,2vw,28px);z-index:1;display:flex;flex-direction:column;gap:6px}
.qtx b{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,32px);line-height:1.15;color:#fff;display:flex;flex-direction:column;gap:4px}
.qtx b i{font-style:italic;font-weight:400;font-size:.6em;color:var(--lemon)}
.qtx span{font-size:clamp(13.5px,1.1vw,16px);line-height:1.45;color:var(--rose);max-width:44ch;opacity:.95}
.quad .qt:nth-child(1){border-radius:36px 0 0 0}.quad .qt:nth-child(2){border-radius:0 0 0 36px}.quad .qt:nth-child(3){border-radius:0 36px 0 0}.quad .qt:nth-child(4){border-radius:0 0 36px 0}
@media (max-width:760px){
  .quad{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;aspect-ratio:auto;border-radius:28px}
  .qt{aspect-ratio:16/9}
  .quad .qt{border-radius:0}.quad .qt:first-child{border-radius:28px 28px 0 0}.quad .qt:last-child{border-radius:0 0 28px 28px}
}

/* ---------- Team-Seite „Das sind wir“ (Bruno, 07.10.) – Stil angelehnt an Team-Seite MIYA forest ---------- */
.team-hero{min-height:72vh;height:auto;padding:clamp(120px,18vh,200px) clamp(16px,4vw,56px) clamp(60px,8vw,90px);align-items:center;justify-content:center}
.team-hero .team-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.team-hero .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(30,16,14,.25),rgba(30,16,14,.72))}
.team-hero .row.center .blk{background:rgba(30,16,14,.42);border:1px solid rgba(255,255,255,.18);color:var(--rose)}
.team-hero .big{color:#fff;text-align:center}
.team-hero .lead{color:var(--rose)}
.team-sub{position:sticky;top:0;z-index:5;display:flex;justify-content:center;gap:clamp(14px,3vw,40px);padding:12px clamp(16px,4vw,56px);background:var(--braun);color:var(--rose);font-weight:700;font-size:14px;letter-spacing:.02em;flex-wrap:wrap}
.team-sub a{color:inherit;text-decoration:none;padding:8px 14px;border-radius:999px}
.team-sub a:hover,.team-sub a:focus-visible{background:var(--orange);color:var(--braun-deep)}
.founders{max-width:1100px;margin:clamp(36px,5vw,64px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px)}
.founders .person .im.ph-missing{display:grid;place-items:center;background:var(--lemon);color:var(--braun);font-family:var(--display);font-size:28px;border:1px dashed rgba(110,73,79,.4)}
.founders .person .im.ph-missing span::after{content:" · Foto folgt";font-size:14px;font-family:var(--body);opacity:.7}
@media (max-width:760px){.founders{grid-template-columns:1fr}}
/* Botschafter: dunkle Fläche mit Blattadern-Muster, Porträts als Schoten (wie die Blattform bei MIYA) */
.ambassadors{background:#33211F;color:var(--rose);overflow:hidden}
.ambassadors::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;background:
  radial-gradient(ellipse 36% 22% at 18% 30%,transparent 62%,rgba(255,228,206,.9) 63%,transparent 65%),
  radial-gradient(ellipse 30% 20% at 70% 18%,transparent 62%,rgba(255,228,206,.9) 63%,transparent 65%),
  radial-gradient(ellipse 40% 26% at 85% 70%,transparent 62%,rgba(255,228,206,.9) 63%,transparent 65%),
  radial-gradient(ellipse 34% 24% at 30% 80%,transparent 62%,rgba(255,228,206,.9) 63%,transparent 65%),
  radial-gradient(ellipse 26% 18% at 55% 55%,transparent 62%,rgba(255,228,206,.9) 63%,transparent 65%)}
.ambassadors .row.center .blk{background:rgba(255,228,206,.08);border:1px solid rgba(255,255,255,.14);color:var(--rose)}
.ambassadors h2{color:#fff}.ambassadors h2 em{color:var(--orange)}
.ambassadors .blk p{color:var(--rose)}
.ambassadors .num{background:var(--orange);color:var(--braun-deep)}
.amb-grid{position:relative;max-width:1100px;margin:clamp(40px,5vw,70px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px) clamp(18px,3vw,40px);text-align:center}
.amb{display:flex;flex-direction:column;align-items:center;gap:8px}
.amb-im{width:min(100%,240px);aspect-ratio:1/1.12;border-radius:var(--pod);overflow:hidden;background:var(--braun);box-shadow:0 18px 44px rgba(0,0,0,.35);margin-bottom:8px}
.amb:nth-child(even) .amb-im{border-radius:var(--pod2)}
.amb-im img{width:100%;height:100%;object-fit:cover;display:block}
.amb h3{font-family:var(--display);font-weight:500;font-size:26px;color:#fff;margin:0}
.amb-role{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.amb-q{font-family:var(--display);font-style:italic;font-size:17px;line-height:1.5;color:var(--rose);max-width:34ch;margin:6px 0 0}
.amb-open .amb-im.amb-plus{display:grid;place-items:center;background:rgba(255,228,206,.08);border:1px dashed rgba(255,228,206,.45);box-shadow:none;color:var(--orange);font-family:var(--display);font-size:72px;font-weight:300}
.amb-open .amb-q{font-style:normal;font-family:var(--body);font-size:15px}
.amb-open .btn{margin-top:10px}
@media (max-width:900px){.amb-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.amb-grid{grid-template-columns:1fr}}

/* Menü rechts: „Das sind wir“ + „Shop“ nebeneinander in der Mittelspalte (Bruno, 07.10.) */
.hdr nav.r .rlinks{grid-column:2;display:flex;gap:4px;align-items:center}

/* Botschafter: kurze Bio + Link unter dem Zitat (Bruno, 07.10.) */
.amb-bio{font-size:14px;line-height:1.5;color:var(--rose);opacity:.85;max-width:36ch;margin:8px 0 0}
.amb-link{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--orange);text-decoration:none;margin-top:6px;border-bottom:1px solid transparent}
.amb-link:hover{border-bottom-color:var(--orange)}

/* Jun Ajpu, Werkstatt-Block: Foto über dem Text (Bruno, 08.10.) */
.jcenter .wimg{margin:6px 0 4px;width:100%;max-width:680px;aspect-ratio:4/3;border-radius:var(--pod2);overflow:hidden;box-shadow:0 24px 60px rgba(74,47,52,.18)}
.jcenter .wimg img{width:100%;height:100%;object-fit:cover;display:block}

/* Kapitel II: zwei Buttons je Farm-Karte nebeneinander (Bruno, 09.10.) */
.farm .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.farm .acts .btn{margin-top:0}
.farm .btn.ghost{border-color:rgba(255,228,206,.7);color:var(--rose)}
/* Größere Menüschrift: zwischen 1121 und 1220 px „Weisheit“ ohne „des Kakaos“, damit nichts in die Schote läuft (Bruno, 09.10.) */
@media (min-width:1201px) and (max-width:1460px){.hdr .lg{display:none}}

/* Zubereitung als Stichpunkte (Bruno, 09.10.) */
.recipe ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}.recipe li{padding-left:2px}.recipe li::marker{color:var(--orange)}

/* DaliLeo-Wortmarke als Bild (ersetzt durch Schrift DK Jambo, s. u.) */
.wm{display:block;height:1.15em;width:auto;max-width:100%}
h3 .wm{margin-bottom:.15em}
.duo-tx h3 span{display:block}

/* DaliLeo-Logoschrift „DK Jambo“ (Datei von Bruno, 09.10.) – nur für den Namen DaliLeo als Überschrift */
@font-face{font-family:"DK Jambo";src:url("fonts/DKJambo.woff2") format("woff2"),url("fonts/DKJambo.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
.ff-dalileo{font-family:"DK Jambo",var(--display);font-weight:400;letter-spacing:.01em}
h3.ff-dalileo{font-size:1.25em}
.duo-tx h3 .ff-dalileo{display:block;font-size:1.3em;line-height:1.1}

/* Jun-Ajpu-Logo (transparent, Originalfarbe) statt Textname; DaliLeo-Name in DK Jambo im Hero (Bruno, 09.10.) */
.wm-ja{height:auto;width:min(100%,260px)}
.duo-tx h3 .wm-ja{width:min(100%,220px)}
.farm .t h3 .wm-ja{width:min(100%,240px);filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.wm-hero{width:min(60%,300px);margin:6px 0 10px}
.wm-hero-txt{font-size:clamp(34px,4.5vw,60px);line-height:1;margin:4px 0 8px;color:var(--rose)}

/* Logo in der Produktkarte: unbeschnitten, kein Schoten-Zuschnitt (Bruno, 09.10.) */
.duo .duo-top .wm-ja{width:min(100%,240px);height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;display:block}
/* Produktkarte DaliLeo: Name so groß wie das Jun-Ajpu-Logo, „100 % Kakao Block“ klein in einer Zeile (Bruno, 09.10.) */
.duo-tx h3 .ff-dalileo{font-size:clamp(40px,4.2vw,58px);line-height:1;margin-bottom:6px}
.duo-tx h3 span:not(.ff-dalileo){font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.04em;white-space:nowrap;opacity:.9}

/* Popups: Zwischenüberschrift + Stichpunkte (Bruno, 09.10.) */
.modal-txt h4{font-family:var(--display);font-weight:500;font-size:20px;margin:4px 0 -4px;color:var(--braun-deep)}
.modal-txt ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;max-width:60ch}
.modal-txt li::marker{color:var(--orange)}

/* Panel-Kopf breiter, damit die Einleitung in den gewünschten Zeilen bricht (Bruno, 10.10.) */
.panel-head.wide p{max-width:88ch}
/* Link im Fakten-Kasten (Bruno, 10.10.) */
.infobox li a{color:var(--braun-deep);font-weight:800;text-decoration:none;border-bottom:2px solid var(--orange)}
.infobox li a:hover{color:var(--orange)}

/* Foto-Schritte: Chip + kleiner „Mehr“-Knopf nebeneinander (Bruno, 10.10.) */
.pv.ps .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.pv.ps .chips .chip{margin-top:0}
.pv.ps .chip.more{background:var(--orange);cursor:pointer;border:0;font-family:inherit;text-transform:none;letter-spacing:.02em;font-size:12px;font-weight:800}
.pv.ps .chip.more:hover{background:var(--braun);color:var(--lemon)}
/* Popups: Textspalte scrollt sicher (Grid-Kind braucht min-height:0) (Bruno, 10.10.) */
.modal-in{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
.modal-txt{min-height:0;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal-im{min-height:0}

/* Breite Schote für Querformat-Fotos, z. B. die drei Frauen bei DaliLeo (Bruno, 11.10.) */
.wrow .podimg.wide{aspect-ratio:3/2;max-width:600px;border-radius:50% 50% 48% 52% / 58% 58% 42% 42%}
.wrow .podimg.wide img{object-position:50% 40%}
@media (max-width:860px){.wrow .podimg.wide{max-width:100%}}

.nowrap{white-space:nowrap}

/* Tier-Slider: ein Bild pro Ansicht, volles Querformat, Text im Bild (Bruno, 11.10.) */
.ts-track{gap:0;padding:0;border-radius:40px;scroll-snap-type:x mandatory}
.ts{flex:0 0 100%;scroll-snap-align:center;position:relative;padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;gap:0}
.ts img,.ts:nth-child(odd) img{aspect-ratio:16/9;max-height:min(70vh,680px);border-radius:0}
.ts figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,34px) clamp(20px,4vw,48px);background:linear-gradient(to top,rgba(30,16,14,.78),rgba(30,16,14,0));gap:4px}
.ts b{color:#fff;font-size:clamp(22px,2.6vw,34px)}
.ts span{color:var(--rose);font-size:clamp(14px,1.2vw,17px)}
.ts-arr{top:50%;transform:translateY(-50%)}
.ts-arr.l{left:14px}.ts-arr.r{right:14px}
@media (max-width:860px){.ts-arr{display:grid;place-items:center;width:40px;height:40px}.ts img,.ts:nth-child(odd) img{aspect-ratio:4/3}}

/* Mini-Galerie mit getauschten Formen: links Schote, rechts Rechteck (Bruno, 11.10.) */
.minigal.flip div:nth-child(odd) img{border-radius:var(--pod2)}
.minigal.flip div:nth-child(even) img{border-radius:30px}

/* Lightbox zum Vergrößern von Fotos (Bruno, 11.10.) */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;display:none;align-items:center;justify-content:center}
.lightbox[open]{display:flex}
.lightbox::backdrop{background:rgba(30,16,14,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lightbox figure{margin:0;max-width:min(96vw,1500px);max-height:94vh;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:zoom-out}
.lightbox img{max-width:96vw;max-height:86vh;width:auto;height:auto;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.5);cursor:default}
.lightbox figcaption{color:var(--rose);font-size:14px;text-align:center;max-width:70ch}
.lightbox .lb-x{position:fixed;top:18px;right:18px;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;backdrop-filter:blur(8px)}
.lightbox .lb-x:hover{background:var(--orange);color:var(--braun-deep)}

/* Criollo-Frucht groß (Bruno, 11.10.) */
.wrow .podimg.wide.b{border-radius:52% 48% 50% 50% / 42% 42% 58% 58%;max-width:640px}

/* ---------- Agroforst-Block DaliLeo (Bruno, 11.10.): große Überschrift, Stockwerke, Zahlenleiste ---------- */
.agro-head{padding-top:clamp(50px,8vh,100px)}
.agro-head p{max-width:72ch}
.strata{max-width:1100px;margin:clamp(20px,3vw,36px) auto 0;display:flex;flex-direction:column;gap:12px}
.stratum{display:grid;grid-template-columns:88px minmax(0,1fr) 220px;gap:clamp(14px,2vw,28px);align-items:center;padding:clamp(14px,2vw,22px) clamp(16px,2.4vw,30px);border-radius:28px;border:1px solid rgba(255,255,255,.5);background:color-mix(in srgb,var(--bg) 70%,#fff 30%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stratum.s1{background:color-mix(in srgb,#5f8f5a 22%,var(--bg) 78%)}
.stratum.s2{background:color-mix(in srgb,#7fae5f 18%,var(--bg) 82%)}
.stratum.s3{background:color-mix(in srgb,#b7c86a 22%,var(--bg) 78%)}
.stratum.s4{background:color-mix(in srgb,var(--braun) 16%,var(--bg) 84%)}
.stratum .s-h{font-family:var(--display);font-size:clamp(18px,1.8vw,24px);color:var(--braun-deep);text-align:center;line-height:1.1}
.stratum .s-tx{display:flex;flex-direction:column;gap:4px}
.stratum .s-tx b{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,26px);color:var(--braun-deep)}
.stratum .s-tx span{font-size:15px;line-height:1.5;color:var(--fg-soft)}
.stratum img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:20px;display:block;cursor:zoom-in}
.agro-facts{max-width:1100px;margin:22px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.agro-facts div{background:var(--lemon);border-radius:24px;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.agro-facts b{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,34px);color:var(--orange)}
.agro-facts span{font-size:13.5px;color:var(--braun-deep)}
@media (max-width:860px){.stratum{grid-template-columns:64px minmax(0,1fr)}.stratum img{grid-column:1/-1}.agro-facts{grid-template-columns:1fr 1fr}}

.stratum .s-h{display:flex;flex-direction:column;gap:2px}.stratum .s-h small{font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft)}

/* Großes Einzelbild unter einem zentrierten Textblock (Bruno, 11.10.) */
.bigimg{max-width:880px;margin:22px auto 70px;border-radius:40px;overflow:hidden;box-shadow:0 24px 60px rgba(74,47,52,.16)}
.bigimg img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;cursor:zoom-in}

/* Bohnen-Legende unter dem Criollo-Foto (Bruno, 11.10.) */
.wrow .media{flex-direction:column;align-items:center;gap:14px}
.wrow .media .white-bean{justify-content:center;margin-top:0}

.bigimg.square{max-width:560px}.bigimg.square img{aspect-ratio:1/1}

/* Bilder im Originalformat, halbe Breite (Bruno, 11.10.) */
.bigimg.half{max-width:550px}.bigimg.half img{aspect-ratio:auto;height:auto}

/* Randpfeile (Panel-Seiten): Pfeil und Beschriftung mit eigener Glasfläche, weniger durchsichtig – damit nichts im Foto untergeht (Bruno, 11.10.) */
.edge .arr{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(74,47,52,.2)}
.edge .lbl{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:14px 8px;box-shadow:0 8px 24px rgba(74,47,52,.14)}
.edge{opacity:1}
/* Randpfeile ausgeblendet (Bruno, 11.10.) – Panelwechsel über Pillen-Leiste und Pfeiltasten */
.edge{display:none !important}

/* Schote dicker (Bruno, 11.10.): --ph 176→200 px; die Kontur-SVG wird in der Höhe gestreckt */
.hdr .pod{}
.hdr svg.pod{preserveAspectRatio:none}

/* Leitsatz unter dem Panel-Kopf (Jun Ajpu, 11.10.) */
.panel-head .q-line{font-family:var(--display);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--orange);margin-top:4px}

/* Jun Ajpu: Maya-Kreuz + Button zum Kalender unter den vier Schritten (Bruno, 11.10.) */

/* Quadratisches Porträt, Bild unbeschnitten (Gg, 11.10.) */
.wrow .podimg.square{aspect-ratio:1/1;border-radius:34px;max-width:460px;animation:none}
.wrow .podimg.square img{object-fit:cover;object-position:50% 0}
.wrow .blk .q{font-family:var(--display);font-style:italic;font-size:17px;color:var(--braun-deep);border-left:3px solid var(--orange);padding-left:14px}

/* Maya-Kreuz links, Gg rechts (Bruno, 11.10.) */
.nawal-row{margin-top:-30px}
.nawal-row .media .nawal-img{width:min(80%,380px);height:auto;cursor:zoom-in}
.nawal-row .acts{display:flex;flex-wrap:wrap;gap:10px}
.nawal-row .btn.ghost{border-color:var(--braun);color:var(--braun-deep)}

/* Größere 3er-Galerie unter zentriertem Block (Jun Ajpu, 11.10.) */
.minigal.big{gap:18px;margin:10px auto 80px}
.minigal.big img,.minigal.big div:nth-child(even) img{aspect-ratio:4/5;border-radius:30px}
.minigal.big div:nth-child(even) img{border-radius:var(--pod2)}

.bigimg figcaption{text-align:center;font-size:14px;color:var(--fg-soft);padding:10px 12px 0}

/* Bild im Originalformat in einer Reihe, abgerundet (Jun Ajpu, 11.10.) */
.wrow .podimg.natural{aspect-ratio:auto;max-width:520px;border-radius:34px;animation:none}
.wrow .podimg.natural img{height:auto;object-fit:contain}

/* Werkstatt-Bild unter dem Leitsatz: enger Abstand oben/unten (Jun Ajpu, 11.10.) */
.panel-head + .bigimg.tight{margin-top:14px}
.bigimg.tight{margin-bottom:22px}

/* Bild-Switcher (Bruno, 11.10.): zwei Fotos an einer Stelle, Pfeile/Punkte zum Wechseln (Gg auf junajpu.html) */
.pswitch{position:relative}
.pswitch img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease;pointer-events:none}
.pswitch img.on{position:relative;opacity:1;pointer-events:auto}
.ps-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:color-mix(in srgb,var(--bg) 70%,#fff 30%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--braun-deep);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(74,47,52,.18)}
.ps-arr.l{left:12px}.ps-arr.r{right:12px}
.ps-arr:hover{background:var(--orange)}
.ps-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:8px}
.ps-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(74,47,52,.35);transition:background .3s}
.ps-dots i.on{background:var(--orange)}

/* Bildnachweis unter Fotos (Bruno, 12.10.) */
.media .credit{font-size:12px;color:var(--fg-soft);text-align:center;margin:8px 0 0;line-height:1.4}
.media .credit a{color:inherit;text-decoration:underline}

/* Weisheit – Kakaoarten & Geschichte als Erzählung (Bruno/Claude, 12.10.) */
.varieties{max-width:1180px;margin:clamp(18px,3vw,32px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.vcard{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.6vw,30px);border-radius:34px;border:1px solid rgba(255,255,255,.5);background:color-mix(in srgb,var(--bg) 70%,#fff 30%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vcard.hl{background:color-mix(in srgb,var(--orange) 14%,var(--bg) 86%);border-color:color-mix(in srgb,var(--orange) 50%,transparent)}
.vcard .v-k{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:700}
.vcard h3{font-family:var(--display);font-weight:500;font-size:clamp(26px,2.6vw,34px);color:var(--braun-deep);margin:0;line-height:1.05}
.vcard .share{display:flex;align-items:center;gap:12px;margin-top:6px}
.vcard .share i{flex:1;height:12px;border-radius:999px;background:rgba(74,47,52,.12);position:relative;overflow:hidden}
.vcard .share i::after{content:"";position:absolute;inset:0;width:var(--w);min-width:6px;border-radius:999px;background:var(--orange)}
.vcard .share b{font-family:var(--display);font-weight:500;font-size:22px;color:var(--braun-deep);white-space:nowrap}
.vcard small{font-size:13px;color:var(--fg-soft);margin-top:-4px}
.vcard p{font-size:15px;line-height:1.55;margin:6px 0 0}
@media (max-width:900px){.varieties{grid-template-columns:1fr}}
.story{max-width:76ch;margin:clamp(18px,3vw,32px) auto 0;display:flex;flex-direction:column;gap:12px}
.story h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,28px);color:var(--braun-deep);margin:18px 0 0;line-height:1.15}
.story p{margin:0;line-height:1.65}
.story .note{font-size:15px;color:var(--fg-soft)}
.story .src{display:block;margin-top:8px;font-size:13px}
.story .src a{color:inherit;text-decoration:underline}
.story .bigimg{margin:22px auto}

/* Zeitstrahl Kakao-Geschichte (Bruno, 12.10.) */
.timeline{list-style:none;margin:26px 0 10px;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:calc(150px + 16px + 6px);top:8px;bottom:8px;width:2px;background:color-mix(in srgb,var(--orange) 45%,transparent)}
.timeline li{display:grid;grid-template-columns:150px 16px minmax(0,1fr);gap:0 16px;align-items:start;padding:7px 0;position:relative}
.timeline li::before{content:"";grid-column:2;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--orange);margin-top:5px;box-sizing:border-box}
.timeline .t-y{grid-column:1;text-align:right;font-family:var(--display);font-weight:500;font-size:18px;color:var(--braun-deep);line-height:1.3}
.timeline .t-t{grid-column:3;font-size:15px;line-height:1.5;color:var(--fg)}
.timeline li.hl::before{background:var(--orange)}
.timeline li.hl .t-t{font-weight:700;color:var(--braun-deep)}
@media (max-width:600px){.timeline::before{left:7px}.timeline li{grid-template-columns:16px minmax(0,1fr);gap:4px 14px}.timeline li::before{grid-column:1;grid-row:1/3}.timeline .t-y{grid-column:2;text-align:left;font-size:16px}.timeline .t-t{grid-column:2}}
.bigimg figcaption .credit{display:block;font-size:12px;color:var(--fg-soft);margin-top:4px}
.bigimg figcaption .credit a{color:inherit;text-decoration:underline}

/* Wissenschaft: zwei Spalten Nährstoffe / Wirkstoffe (Bruno/Claude, 12.10.) */
.twocol{max-width:1180px;margin:clamp(18px,3vw,32px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);align-items:start}
.twocol .vcard h3 small{display:block;font-family:var(--body);font-size:13px;font-weight:400;color:var(--fg-soft);letter-spacing:.02em;margin-top:4px}
.nlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.nlist li{font-size:14.5px;line-height:1.5;padding-left:14px;position:relative}
.nlist li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.nlist li b{display:block;font-family:var(--display);font-weight:500;font-size:17px;color:var(--braun-deep);line-height:1.2;margin-bottom:2px}
@media (max-width:900px){.twocol{grid-template-columns:1fr}}
.srclist{list-style:none;margin:10px 0 0;padding:0;font-size:13px;color:var(--fg-soft);line-height:1.5}
.srclist li{padding-left:12px;position:relative}
.srclist li:first-child{padding-left:0;font-weight:700}
.srclist li:not(:first-child)::before{content:"–";position:absolute;left:0}
.srclist a{color:inherit;text-decoration:underline}

/* SEO-Hierarchie Weisheit (12.10.): Kicker als H1, Panel-Titel H2, Zwischenköpfe H3, Karten/Story H4 */
.panel-head h1.num{font-size:13px;margin:0;font-weight:400}
.panel-head h3{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,72px);line-height:1.02;color:var(--braun-deep);margin:0}
.panel-head h3 em{font-style:italic;color:var(--orange)}
.vcard h4{font-family:var(--display);font-weight:500;font-size:clamp(26px,2.6vw,34px);color:var(--braun-deep);margin:0;line-height:1.05}
.twocol .vcard h4 small{display:block;font-family:var(--body);font-size:13px;font-weight:400;color:var(--fg-soft);letter-spacing:.02em;margin-top:4px}
.story h4{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,28px);color:var(--braun-deep);margin:18px 0 0;line-height:1.15}

/* Breites Bild mit Bildunterschrift (Bruno, 13.10.): volle Inhaltsbreite, runde Ecken, Text darunter, per Klick vergrößerbar (Lightbox über .bigimg img) */
.bigimg.full{max-width:none;width:100%;margin:clamp(26px,4vw,48px) 0}
.bigimg.full img{width:100%;height:clamp(320px,58vh,600px);object-fit:cover;display:block}
@media (max-width:760px){.bigimg.full img{height:clamp(220px,42vh,380px)}}
.bigimg.full.natural img{height:auto;aspect-ratio:auto;object-fit:contain}
img.mirror{transform:scaleX(-1)}

/* Farm-Karten Startseite (Bruno, 14.10.): Text hebt sich besser ab – kräftigerer Verlauf, hellere Schrift, weicher Schatten */
.farm::after{background:linear-gradient(to top,rgba(52,30,34,.94) 0%,rgba(52,30,34,.82) 30%,rgba(52,30,34,.4) 45%,rgba(52,30,34,0) 55%)}
.farm .t p{color:#fff6ee;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.farm .t .q{color:var(--lemon);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.farm h3.ff-dalileo{font-size:clamp(42px,4.4vw,64px);line-height:.9;margin:0 0 -8px}
.bigimg.square img{height:auto}
/* SEO-Zeile in der H1 der Farmseiten (14.10.) */
.phero h1 .h1-kw{display:block;font-family:var(--body);font-weight:700;font-style:normal;font-size:clamp(13px,1.1vw,16px);letter-spacing:.14em;text-transform:uppercase;color:var(--lemon);text-shadow:0 1px 6px rgba(0,0,0,.45);margin:0 0 10px}
.phero h1{hyphens:manual;overflow-wrap:break-word}

/* Zweisprachigkeit (14.10.) */
:lang(en) .founders .person .im.ph-missing span::after{content:" · photo to follow"}
.hdr .rlinks a.lang{font-weight:800;letter-spacing:.06em;padding:4px 10px;border:1.5px solid currentColor;border-radius:999px;font-size:.8em;line-height:1.2}
.mnav a.lang{font-size:.9em;opacity:.85}

/* Jun Ajpu: Maya-Weltenbaum als ruhiger Hintergrund hinter allen Panels (Bruno, 14.10.) – wie der Kakaobaum auf der Startseite */
.ja-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.ja-backdrop img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;opacity:.14;filter:saturate(.85);transform:translate3d(0,var(--jy,0px),0);will-change:transform;cursor:default !important}
.facts-end{margin:clamp(30px,5vw,60px) auto 10px}.facts-end .infobox{min-width:min(100%,460px)}
.facts-end .blk{background:none !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;padding:0 !important}.facts-end .infobox{text-align:left}

/* Footer auf den Panel-Seiten (14.10.): bündig am Seitenende und über die volle Breite – Panels erben sonst das section-Padding */
.panels section.panel{padding-bottom:0}
.panel footer{align-self:center;width:100vw;max-width:none;margin:auto 0 0}
.ja-backdrop.bd-ja img{opacity:.28;filter:none}

/* Jun Ajpu (14.10.): freie Texte auf dem kräftigeren Weltenbaum lesbar halten – ohne Box: dunklere Schrift + weicher heller Lichthof */
.page-ja .panel-head > p,.page-ja .pv figcaption b,.page-ja .pv figcaption span,.page-ja .panel-head .q-line{text-shadow:0 0 2px rgba(253,232,214,.95),0 0 10px rgba(253,232,214,.95),0 0 22px rgba(253,232,214,.85)}
.page-ja .panel-head > p,.page-ja .pv figcaption span{color:var(--braun-deep);font-weight:600}
.page-ja .pv figcaption b{font-weight:600}
.page-ja .panel-head .q-line{color:var(--orange);font-weight:600;text-shadow:0 1px 2px rgba(74,47,52,.6),0 0 16px rgba(74,47,52,.35)}
.page-ja .bigimg figcaption{font-size:clamp(16px,1.3vw,19px);color:#1b1214;font-weight:600;text-shadow:0 0 2px rgba(253,232,214,.95),0 0 12px rgba(253,232,214,.9);padding-top:14px}
.page-ja .panel-head .q-line{text-shadow:none;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.page-dl .bigimg figcaption{font-size:clamp(16px,1.3vw,19px);color:var(--braun-deep);font-weight:600;text-shadow:0 0 2px rgba(253,232,214,.95),0 0 12px rgba(253,232,214,.9);padding-top:14px}

/* DaliLeo (14.10.): freie Texte auf dem Kakaowald-Hintergrund lesbar halten – wie bei Jun Ajpu, ohne Box */
.page-dl .panel-head > p,.page-dl .pv figcaption > span:not(.chips),.page-dl .pv figcaption .k{text-shadow:0 0 2px rgba(253,232,214,.95),0 0 10px rgba(253,232,214,.95),0 0 22px rgba(253,232,214,.85)}
.page-dl .panel-head > p,.page-dl .pv figcaption > span:not(.k):not(.chips){color:var(--braun-deep);font-weight:600}
.page-dl .pv figcaption .k{color:var(--braun-deep)}
.page-dl .pv figcaption .k b{-webkit-text-stroke:1px var(--braun-deep);paint-order:stroke fill}
.page-dl .bigimg figcaption{font-size:clamp(18px,1.7vw,24px);line-height:1.4}

/* Weisheit (14.10.): Maya-Codex-Szene als mitscrollender Hintergrund; helles Bild → etwas mehr Deckkraft, freie Texte mit Lichthof */
.ja-backdrop.bd-wh img{opacity:.2;filter:none}
.page-wh .panel-head > p,.page-wh .story p,.page-wh .story h3,.page-wh .story h4,.page-wh .timeline .t-t,.page-wh .timeline .t-y{text-shadow:0 0 2px rgba(253,232,214,.95),0 0 10px rgba(253,232,214,.9)}
.page-wh .panel-head > p,.page-wh .story p{color:var(--braun-deep)}
.page-wh .bigimg figcaption,.page-wh .media .credit{color:var(--braun-deep);font-size:clamp(14px,1.1vw,16px);text-shadow:0 0 2px rgba(253,232,214,.95),0 0 10px rgba(253,232,214,.9)}
/* Weisheit (14.10.): Erzähl-Blöcke und Zeitstrahl in einer leichten Glasbox, damit der Text auf dem Codex-Hintergrund gut lesbar ist */
.page-wh .story{background:rgba(253,240,228,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.55);border-radius:32px;padding:clamp(20px,3vw,40px) clamp(20px,3.2vw,44px);box-shadow:0 12px 40px rgba(74,47,52,.08);max-width:min(84ch,100%)}
.page-wh .story p,.page-wh .story h3,.page-wh .story h4,.page-wh .timeline .t-t,.page-wh .timeline .t-y{text-shadow:none}
.page-wh .timeline .t-t{color:var(--braun-deep)}