/* Eigene Datei (nach kakaw.css geladen), damit diese Regeln ein Überschreiben von kakaw.css überstehen.
   1) Buttons: schlicht und schnittig – klare Pille, Text exakt mittig, nur ein Hauch Tiefe.
   2) Fakten-Chips („Steingemahlen“ usw.): Form einer liegenden Kakaobohne mit feiner Kontur und weicher Schattierung. */

/* ---------- 1) Buttons ---------- */
.btn{justify-content:center;text-align:center;border-radius:999px;background:var(--orange);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px -4px rgba(74,47,52,.25);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn:hover{transform:translateY(-2px);background:#ffc629;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px -6px rgba(74,47,52,.3)}
.btn:active{transform:translateY(0);box-shadow:inset 0 1px 3px rgba(74,47,52,.2)}
.hdr nav a.cart{justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 10px -4px rgba(74,47,52,.25)}

/* ---------- 2) Kakaobohnen-Chips ---------- */
.step .fact{aspect-ratio:auto;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:15px 32px 16px;border-radius:0;box-shadow:none;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--braun-deep);
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 80%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M10 44C6 20 48 5 102 5C156 5 195 18 191 40C187 64 150 76 98 75C46 74 13 66 10 44Z%22 fill=%22%23fff8cf%22 stroke=%22%238f6a70%22 stroke-width=%221.6%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(0 4px 6px rgba(74,47,52,.12));
  transform:rotate(-3deg);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.step:nth-child(even) .fact{transform:rotate(2.5deg)}
.step:hover .fact{transform:rotate(0)}
body.dark .step .fact{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 80%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M10 44C6 20 48 5 102 5C156 5 195 18 191 40C187 64 150 76 98 75C46 74 13 66 10 44Z%22 fill=%22%23fcbc0f%22 stroke=%22%236e494f%22 stroke-width=%221.6%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.btn,.step .fact{transition:none}}

/* ---------- 2b) Chips im Wechsel (Startseite und DaliLeo, Abschnitt mit .chips-mix): Schote, Blatt, geröstete Bohne, Mahlstein ---------- */
.chips-mix .step:nth-child(4n+1) .fact{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 80%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M4 41C16 18 60 5 108 5C152 5 188 18 195 38C200 58 166 74 112 75C60 76 16 64 4 41Z%22 fill=%22%23fcbc0f%22 fill-opacity=%22.28%22 stroke=%22%23d9a400%22 stroke-width=%222%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpath d=%22M18 38C36 22 70 12 108 12C144 12 172 21 184 35M18 45C36 60 70 69 110 69C146 68 172 60 184 47%22 fill=%22none%22 stroke=%22%23d9a400%22 stroke-width=%221.1%22 opacity=%22.7%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");padding:15px 34px 16px 40px}
.chips-mix .step:nth-child(4n+2) .fact{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 80%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 42C28 14 70 4 106 5C146 6 178 18 197 38C176 62 142 76 102 75C64 74 28 66 3 42Z%22 fill=%22%23e9efc9%22 stroke=%22%235c7436%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpath d=%22M3 42C30 47 60 66 100 68M197 38C172 34 150 14 112 12%22 fill=%22none%22 stroke=%22%235c7436%22 stroke-width=%221%22 opacity=%22.55%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");padding:15px 40px 16px;color:#3c4d22}
.chips-mix .step:nth-child(4n+3) .fact{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 80%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M9 46C3 22 40 6 96 6C150 6 196 16 192 38C190 52 172 58 158 62C138 70 118 75 92 75C50 75 14 68 9 46Z%22 fill=%22%236e494f%22 stroke=%22%234a2f34%22 stroke-width=%221.6%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpath d=%22M24 30C44 16 76 12 104 12%22 fill=%22none%22 stroke=%22%23ffe4ce%22 stroke-width=%221.4%22 opacity=%22.55%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpath d=%22M150 64C164 61 178 55 186 46%22 fill=%22none%22 stroke=%22%23fcbc0f%22 stroke-width=%221.2%22 opacity=%22.7%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");padding:15px 34px 17px;color:var(--rose)}
.chips-mix .step:nth-child(4n+4) .fact{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 80%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M12 40C10 20 34 8 70 7C104 4 150 5 176 14C194 20 196 44 186 58C174 72 138 76 100 75C60 76 16 68 12 40Z%22 fill=%22%23ffdcbe%22 stroke=%22%238f6a70%22 stroke-width=%221.6%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpath d=%22M16 43C13 24 38 11 72 10C108 7 148 9 172 17C189 23 192 43 183 55%22 fill=%22none%22 stroke=%22%238f6a70%22 stroke-width=%22.9%22 opacity=%22.45%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cg fill=%22%238f6a70%22 opacity=%22.35%22%3E%3Ccircle cx=%2224%22 cy=%2250%22 r=%221.2%22/%3E%3Ccircle cx=%2234%22 cy=%2262%22 r=%22.9%22/%3E%3Ccircle cx=%22172%22 cy=%2226%22 r=%221.1%22/%3E%3Ccircle cx=%22180%22 cy=%2248%22 r=%22.9%22/%3E%3Ccircle cx=%22160%22 cy=%2266%22 r=%221.2%22/%3E%3Ccircle cx=%2230%22 cy=%2224%22 r=%22.9%22/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- 3) Menüleisten vertikal sauber ausrichten ---------- */
/* alle Punkte der Hauptleiste exakt auf der Mittellinie (auch „Weisheit des Kakaos“ mit Pfeil) */
.hdr nav{align-items:center}
.hdr .dd{display:flex;align-items:center}
.hdr nav a,.hdr .dd>a{display:inline-flex;align-items:center;gap:4px}
.hdr .dd .caret{margin-left:0;line-height:1;transform:translateY(1px)}
/* zweite Leiste (Pillen) mit gleichem Abstand unter der Schote statt an ihr zu kleben */
.subnav{top:calc(164px + 2vh);align-items:center} /* 2 % der Fensterhöhe unter der Schote, wächst mit dem Bildschirm */
.subnav button{display:inline-flex;align-items:center}
@media (min-width:861px) and (max-width:1200px){.subnav{top:calc(138px + 2vh)}}
@media (max-width:860px){.subnav{top:calc(28px + (56px + 98px) / 2 + 14px)}}
@media (max-width:760px){.subnav{top:auto}}
/* Weisheit-Seite: weniger Leerraum zwischen Pillen-Leiste und Inhalt */
@media (min-width:761px){.panels .panel-in{padding-top:calc(74px + 2vh)}.panels .panel-head{padding-top:28px}}
/* Panel mit Foto-Hero (Jun Ajpu): Foto beginnt genau auf der Mittellinie der Pillen-Leiste, die Leiste liegt also zur Hälfte auf dem Foto.
   Oberkante Foto = top der .subnav + halbe Leistenhöhe (26px). Der Abschnitts-Innenabstand der .panel wird dafür auf 0 gesetzt. */
@media (min-width:761px){.panels .panel:has(>.has-hero){padding-top:0}.panels .panel-in.has-hero{padding-top:calc(190px + 2vh)}}
@media (min-width:861px) and (max-width:1200px){.panels .panel-in.has-hero{padding-top:calc(164px + 2vh)}}
@media (min-width:761px) and (max-width:860px){.panels .panel-in.has-hero{padding-top:145px}}
/* Handy (bis 760px): Panel-Seiten (Weisheit, Jun Ajpu) – erster Inhalt sitzt knapp unter der Schote (Unterkante 105px) statt 140px tiefer.
   Abschnitts-Innenabstand der .panel raus, dafür fester Abstand an .panel-in; Foto-Hero bleibt auf seiner bisherigen Höhe (70px). */
@media (max-width:760px){.panels .panel{padding-top:0}.panels .panel-in{padding-top:105px}.panels .panel-head{padding-top:26px}.panels .panel-in.has-hero{padding-top:70px}}

/* Farmseiten: Lücke zwischen Menü und Foto-Hero geschlossen – Hero beginnt wie auf der Startseite oben und liegt hinter der Glasleiste (Bruno, 09.10.) */
.panels .panel:has(>.has-hero){padding-top:0}
/* Hero beginnt exakt an der Unterkante der Menüleiste: Leiste = 40px Abstand oben + 88px Höhe (Zwischenstufe 76px, Handy 28px + 56px) */
.panels .panel-in.has-hero{padding-top:128px !important}
@media (min-width:861px) and (max-width:1200px){.panels .panel-in.has-hero{padding-top:116px !important}}
@media (max-width:860px){.panels .panel-in.has-hero{padding-top:84px !important}}
.panel-in.has-hero .phero{border-radius:0 0 48px 48px}

/* Bruno, 11.10.: weniger Luft zwischen Panel-Kopf und erster Reihe (alle Panel-Seiten) */
.panels .panel-head{padding-bottom:clamp(8px,2vh,20px)}