/* =========================================================
   Imkerei Schwake – Stylesheet
   Farben & Schriften zentral über die Variablen in :root
   ========================================================= */

@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --paper: #fdfaf3;
  --cream: #f4ecdd;
  --sand: #e6d9c2;
  --honey: #d6b07a;
  --gold: #627a43;
  --gold-deep: #7a5232;
  --forest: #46562f;
  --olive: #5d6e3d;
  --brown: #6e4c31;
  --ink: #3a2a1d;
  --bark: #5b4029;
  --moss: #4e5f39;
  --text: #47372a;
  --muted: #7c6a57;
  --line: rgba(58, 42, 29, .13);
  --line-light: rgba(253, 250, 243, .18);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(88px, 12vw, 160px);
  --radius: 6px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1.0625rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; color: var(--ink); letter-spacing: -.015em; font-variation-settings: "opsz" 144, "SOFT" 50; }
h2 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); }
h2 em, h1 em { font-style: italic; color: var(--gold-deep); font-weight: 300; }
h3 { font-size: 1.45rem; letter-spacing: -.005em; }
p { margin: 0 0 1.1em; }
::selection { background: var(--honey); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { left: 8px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 860px; }
.muted { color: var(--muted); }

/* ---------- Eyebrow & Section-Heads ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .7em; font: 600 .78rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 1.6rem; }
.eyebrow--light { color: var(--honey); }
.hex { width: 12px; height: 13px; background: currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); flex: none; }
.section-head { margin-bottom: clamp(48px, 7vw, 88px); max-width: 820px; }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head__lead { font-size: 1.15rem; color: var(--muted); max-width: 560px; margin: 1.5rem auto 0; }
.section-head--light h2 { color: var(--paper); }
.section-head--light h2 em { color: var(--honey); }

/* ---------- Buttons ---------- */
.btn { --bg: var(--ink); --fg: var(--paper); display: inline-flex; align-items: center; justify-content: center; gap: .65em; padding: 17px 30px; border-radius: 3px; background: var(--bg); color: var(--fg); border: 1px solid var(--bg); font: 600 .95rem/1.2 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -12px rgba(60, 40, 10, .45); }
.btn__arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--gold { --bg: var(--gold); --fg: #fffbf4; }
.btn--gold:hover { --bg: var(--gold-deep); }
.btn--dark:hover { --bg: var(--forest); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(58, 42, 29, .35); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ghost-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); color: var(--paper); }
.btn--small { padding: 11px 20px; font-size: .85rem; }
.btn--block { width: 100%; }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s var(--ease), box-shadow .4s var(--ease), color .4s; color: var(--ink); }
.nav__inner { max-width: 1440px; margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding .4s var(--ease); }
.nav.is-scrolled { background: rgba(253, 250, 243, .9); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.nav.is-scrolled .nav__inner { padding-top: 12px; padding-bottom: 12px; }
@media (min-width: 901px) {
  .nav:not(.is-scrolled) { background: linear-gradient(rgba(253, 250, 243, .82), rgba(253, 250, 243, .6)); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand__mark { width: 30px; height: 33px; color: var(--gold); }
.brand__text { font: 400 1.35rem/1 var(--serif); letter-spacing: -.01em; }
.brand__text em { font-style: italic; color: var(--gold-deep); }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav__links a:not(.btn) { position: relative; text-decoration: none; font-size: .92rem; font-weight: 500; padding: 6px 0; }
.nav__links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__links a:not(.btn):hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 1.6px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 26px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--cream); overflow: hidden; }
.hero__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 140px clamp(24px, 6vw, 96px) 72px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); }
.hero__title { font-size: clamp(4rem, 9.5vw, 8.6rem); line-height: .9; font-weight: 350; letter-spacing: -.035em; margin-bottom: 2rem; }
.hero__small { display: block; font-size: .32em; font-style: italic; font-weight: 300; letter-spacing: 0; color: var(--gold-deep); margin-bottom: .25em; padding-left: .12em; }
.hero__lead { font: 300 clamp(1.25rem, 1.9vw, 1.6rem)/1.45 var(--serif); color: var(--text); max-width: 30ch; margin-bottom: 2.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__facts { display: flex; gap: clamp(20px, 3vw, 48px); margin: clamp(48px, 7vh, 80px) 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.hero__facts div { margin: 0; }
.hero__facts dt { font: 400 clamp(1.7rem, 2.6vw, 2.3rem)/1 var(--serif); color: var(--ink); }
.hero__facts dd { margin: 6px 0 0; font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.hero__media { position: relative; }
.hero__media picture, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__media img { animation: heroZoom 18s var(--ease) both; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__badge { position: absolute; left: -62px; bottom: 13%; width: 124px; height: 124px; border-radius: 50%; background: var(--paper); color: var(--gold-deep); display: grid; place-items: center; box-shadow: 0 18px 40px -18px rgba(40, 25, 5, .5); z-index: 3; }
.hero__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.hero__badge text { font: 600 9.2px var(--sans); letter-spacing: .24em; fill: var(--gold-deep); }
.hero__badge span { font: 400 .72rem/1.05 var(--sans); text-align: center; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero__badge b { display: block; font: 400 2rem/1 var(--serif); color: var(--ink); letter-spacing: 0; text-transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Biene ---------- */
.bee { position: absolute; width: 46px; height: 34px; z-index: 4; pointer-events: none; offset-rotate: auto; }
.bee__wing { fill: rgba(255, 255, 255, .7); stroke: rgba(58, 42, 29, .35); stroke-width: .8; transform-box: fill-box; transform-origin: 50% 100%; animation: flap .09s ease-in-out infinite alternate; }
.bee__wing--r { animation-delay: .045s; }
@keyframes flap { to { transform: scaleY(.35); } }
.bee--hero { top: 0; left: 0; offset-path: path("M 40 520 C 220 380 360 640 560 470 S 820 220 1000 360 S 1300 520 1500 260"); animation: fly 22s linear infinite; }
.bee--insights { top: 0; left: 0; width: 34px; offset-path: path("M -60 120 C 200 40 420 220 640 110 S 1000 30 1500 140"); animation: fly 26s linear infinite 3s; }
@keyframes fly { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---------- Video-Highlight ---------- */
.moment { position: relative; background: radial-gradient(ellipse at 50% 30%, #6e5034 0%, var(--bark) 70%); color: var(--sand); padding: calc(var(--section) + 20px) 0 var(--section); overflow: hidden; }
.moment::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 64px; background: var(--honey); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v8c-30 0-34 6-40 18-5 12-14 12-18 0-6-12-16-18-60-18-60 0-70 4-80 32-5 14-18 14-22 0-8-26-30-32-120-32-70 0-90 6-98 22-5 10-15 10-18 0-6-16-26-22-110-22-80 0-96 8-104 40-4 16-18 16-22 0-8-30-26-40-108-40C298 8 286 12 280 26c-4 10-14 10-18 0-6-14-22-18-100-18C82 8 66 12 58 36c-4 12-16 12-20 0C30 14 18 8 0 8Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v8c-30 0-34 6-40 18-5 12-14 12-18 0-6-12-16-18-60-18-60 0-70 4-80 32-5 14-18 14-22 0-8-26-30-32-120-32-70 0-90 6-98 22-5 10-15 10-18 0-6-16-26-22-110-22-80 0-96 8-104 40-4 16-18 16-22 0-8-30-26-40-108-40C298 8 286 12 280 26c-4 10-14 10-18 0-6-14-22-18-100-18C82 8 66 12 58 36c-4 12-16 12-20 0C30 14 18 8 0 8Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat; }
.moment.has-drip::before { content: none; }
.moment__drip { position: absolute; top: 0; left: 0; width: 100%; height: 160px; fill: var(--honey); pointer-events: none; }
.moment__head { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.moment__head h2 { color: var(--paper); }
.moment__head h2 em { color: var(--honey); }
.moment__stage { position: relative; width: min(1280px, 100% - 2 * var(--gutter)); margin: 0 auto; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: #4a3524; box-shadow: 0 40px 100px -40px rgba(214, 176, 122, .35), 0 0 0 1px rgba(214, 176, 122, .15); }
.moment__video { width: 100%; height: 100%; object-fit: cover; }
.moment__replay { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 40px; border: 1px solid rgba(255, 250, 240, .35); background: rgba(58, 42, 29, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fffbf4; font: 500 .82rem var(--sans); cursor: pointer; transition: background .3s, opacity .5s; }
.moment__replay:hover { background: rgba(98, 122, 67, .85); }
.moment__replay svg { width: 16px; height: 16px; }
.moment__foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: clamp(36px, 5vw, 56px); max-width: 1280px; }
.moment__foot p { max-width: 560px; margin: 0; color: rgba(235, 224, 203, .8); font: 300 1.2rem/1.55 var(--serif); }

/* ---------- Über mich ---------- */
.story { padding: var(--section) 0; background: var(--paper); }
.story__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.story__portrait { margin: 0; position: sticky; top: 100px; }
.story__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 40%; border-radius: var(--radius); }
.story__portrait::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--gold); border-radius: var(--radius); z-index: -1; opacity: .5; }
.story__portrait { z-index: 0; }
figcaption { font-size: .82rem; color: var(--muted); margin-top: 14px; letter-spacing: .02em; }
.story__intro { font: 300 clamp(1.5rem, 2.5vw, 2.1rem)/1.35 var(--serif); color: var(--ink); margin-bottom: 1.4em; }
.story__intro::first-letter { float: left; font-size: 3.4em; line-height: .82; padding: .06em .1em 0 0; color: var(--gold); font-style: italic; }
.story__text > p { max-width: 58ch; }
.timeline { list-style: none; margin: 3rem 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--gold), rgba(98, 122, 67, .1)); }
.timeline li { position: relative; padding: 0 0 2.4rem 44px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 14px; background: var(--gold); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.timeline__mark { display: block; font: 600 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .7rem; }
.timeline h3 { margin-bottom: .6rem; }
.timeline p { color: var(--muted); max-width: 52ch; margin: 0; }
.story__second { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 110px); align-items: center; margin-top: clamp(64px, 9vw, 130px); }
.story__second-text { order: -1; }
.story__second-text > p { max-width: 54ch; }
.story__work { margin: 0; }
.story__work img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.quote { margin: 2.6rem 0 2.4rem; padding: 0; }
.quote p { font: italic 300 clamp(1.5rem, 2.6vw, 2.15rem)/1.3 var(--serif); color: var(--ink); margin-bottom: 1rem; }
.quote footer { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }

/* ---------- Produkte ---------- */
.products { padding: var(--section) 0; background: var(--cream); position: relative; }
.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; margin-bottom: clamp(80px, 10vw, 140px); }
.product-hero__media { position: relative; display: grid; place-items: center; padding: 6% 8%; }
.product-hero__glow { position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(circle, rgba(214, 176, 122, .4), rgba(214, 176, 122, 0) 65%); filter: blur(10px); }
.product-hero__media img { position: relative; mix-blend-mode: multiply; width: 100%; max-width: 520px; transition: transform 1.2s var(--ease); }
.product-hero:hover .product-hero__media img { transform: translateY(-8px) rotate(-1deg); }
.product__tag { display: inline-block; font: 600 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--olive); padding: 8px 12px; border: 1px solid rgba(89, 96, 58, .35); border-radius: 40px; margin-bottom: 1.4rem; }
.product-hero h3 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 350; letter-spacing: -.025em; }
.product__claim { font: italic 300 1.35rem var(--serif); color: var(--gold-deep); margin: .6rem 0 1.6rem; }
.product__facts { display: grid; gap: 0; margin: 2rem 0; border-top: 1px solid var(--line); }
.product__facts div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.product__facts dt { font: 600 .74rem/1.9 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.product__facts dd { margin: 0; }
.product__buy { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 1.6rem; }
.price__value { display: block; font: 400 2.2rem/1 var(--serif); color: var(--ink); }
.price__unit { font-size: .82rem; color: var(--muted); }
.product-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
.product-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(60, 40, 10, .4); }
.product-card__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.product-card__media--comb { background: linear-gradient(160deg, #6b4a2e, #3a2a1d); }
.product-card__media--propolis { background: radial-gradient(circle at 50% 60%, #7a5534 0%, #3a2a1d 75%); }
.product-card__note { position: absolute; left: 14px; bottom: 12px; font: 500 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 250, 240, .55); }
.comb { width: 100%; height: 100%; }
.comb polygon { stroke: rgba(224, 190, 140, .55); stroke-width: 1.4; fill: rgba(214, 176, 122, .06); transition: fill .6s var(--ease); }
.comb polygon.is-full { fill: url(#cellG); }
.comb polygon:hover { fill: rgba(224, 190, 140, .9); transition-duration: .15s; }
.drop { width: 34%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .45)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.product-card__body { padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; flex: 1; }
.product-card__body h3 { font-size: 2rem; margin-bottom: 1rem; }
.product-card__body > p { color: var(--text); }
.product__use { font-size: .96rem; color: var(--muted) !important; }
.product-card .product__buy { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.products__note { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 36px; }

/* ---------- Einblicke ---------- */
.insights { position: relative; padding: var(--section) 0; background: var(--paper); overflow: hidden; }
.year { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; max-width: var(--container); margin: 0 auto clamp(64px, 8vw, 110px); padding: 0 var(--gutter); position: relative; }
.year::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 7px; height: 1px; background: linear-gradient(90deg, rgba(98, 122, 67, .15), var(--gold), rgba(98, 122, 67, .15)); }
.year__item { position: relative; padding: 40px 22px 0 0; }
.year__item::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 15px; background: var(--paper); border: 0; box-shadow: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--gold); }
.year__season { display: block; font: 600 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--olive); margin-bottom: .9rem; }
.year__item h3 { font-size: 1.35rem; margin-bottom: .7rem; }
.year__item p { font-size: .94rem; color: var(--muted); margin: 0; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(200px, 22vw, 300px); grid-auto-flow: dense; gap: 14px; }
.tile { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.tile--tall { grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 18px 16px; color: #fffbf4; font: 400 1.05rem/1.3 var(--serif); background: linear-gradient(transparent, rgba(46, 33, 22, .7)); }
.tile--placeholder { background: repeating-linear-gradient(135deg, var(--cream) 0 14px, var(--sand) 14px 15px); border: 1px dashed rgba(122, 82, 50, .35); }
.tile__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--gold-deep); font: 600 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; padding-bottom: 30px; }
.tile__ph svg { width: 30px; height: 30px; opacity: .7; }
.tile--placeholder figcaption { color: var(--ink); background: none; }

/* ---------- Region ---------- */
.region { background: var(--cream); padding: var(--section) 0 0; }
.region__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.region__text h2 { margin-bottom: 2rem; }
.region__text > p { max-width: 54ch; }
.checks { list-style: none; padding: 0; margin: 2rem 0 0; }
.checks li { position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 14px; height: 8px; border-left: 1.8px solid var(--gold); border-bottom: 1.8px solid var(--gold); transform: rotate(-45deg); }
.map { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(14px, 2vw, 24px); }
.map svg { width: 100%; height: auto; color: var(--gold-deep); }
.map__forest { fill: rgba(89, 96, 58, .14); }
.map__area { font: italic 300 13px var(--serif); fill: var(--olive); }
.map__river { fill: none; stroke: #8fa8a6; stroke-width: 7; stroke-linecap: round; opacity: .55; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.6s var(--ease); }
.map.is-visible .map__river { stroke-dashoffset: 0; }
.map__rhein { font: italic 300 13px var(--serif); fill: #5d7a77; }
.map__towns circle { fill: var(--muted); }
.map__towns text { font: 500 10.5px var(--sans); fill: var(--muted); letter-spacing: .02em; }
.map__pin path { fill: var(--gold); }
.map__pin { animation: pinDrop 1s var(--ease) both paused; }
.map.is-visible .map__pin { animation-play-state: running; }
@keyframes pinDrop { from { transform: translate(272px, 120px); opacity: 0; } to { transform: translate(272px, 167px); opacity: 1; } }
.map__glow { animation: pulse 3.2s ease-in-out infinite; transform-origin: 272px 167px; }
@keyframes pulse { 50% { transform: scale(1.25); opacity: .6; } }
.map__home { font: 500 19px var(--serif); fill: var(--ink); }
.map figcaption a { color: var(--gold-deep); }
.region__band { position: relative; margin-top: var(--section); height: clamp(260px, 38vw, 520px); overflow: hidden; }
.region__band img { width: 100%; height: 130%; object-fit: cover; object-position: 50% 60%; will-change: transform; }
.region__band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cream) 0%, rgba(246, 239, 226, 0) 25%, rgba(58, 42, 29, 0) 60%, rgba(58, 42, 29, .55) 100%); }
.region__band p { position: absolute; z-index: 1; left: 0; right: 0; bottom: 24px; text-align: center; margin: 0; color: #fffbf4; font: 600 .74rem var(--sans); letter-spacing: .24em; text-transform: uppercase; }

/* ---------- Philosophie ---------- */
.values { background: var(--forest); color: rgba(253, 250, 243, .78); padding: var(--section) 0; position: relative; overflow: hidden; }
.values::before { content: ""; position: absolute; right: -120px; top: -80px; width: 520px; height: 600px; opacity: .07; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16Z M28 64v33' fill='none' stroke='%23dca643' stroke-width='1.4'/%3E%3C/svg%3E") repeat; }
.values__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(40px, 5vw, 64px); }
.values__list li { border-top: 1px solid var(--line-light); padding-top: 26px; }
.values__no { display: block; font: italic 300 2.6rem/1 var(--serif); color: var(--honey); margin-bottom: 1.2rem; }
.values__list h3 { color: var(--paper); font-size: 1.6rem; margin-bottom: .7rem; }
.values__list p { margin: 0; font-size: .98rem; }

/* ---------- Bewertungen ---------- */
.reviews { padding: var(--section) 0; background: var(--paper); }
.reviews__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.reviews__list:empty { display: none; }
.review { background: var(--cream); border-radius: var(--radius); padding: 32px; margin: 0; }
.review .stars { margin-bottom: 1rem; }
.review p { font: 300 1.15rem/1.5 var(--serif); color: var(--ink); }
.review footer { font-size: .85rem; color: var(--muted); }
.stars { color: var(--gold); letter-spacing: .2em; font-size: 1.1rem; }
.reviews__empty { max-width: 640px; margin: 0 auto; text-align: center; padding: clamp(40px, 6vw, 64px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(var(--cream), var(--paper)); }
.reviews__empty .stars { color: rgba(98, 122, 67, .35); font-size: 1.6rem; margin-bottom: 1.2rem; }
.reviews__empty > p:first-of-type { font: 300 1.4rem/1.4 var(--serif); color: var(--ink); }
.reviews__empty .btn { margin-top: 1rem; }
.reviews__more { text-align: center; margin-top: 32px; }

/* ---------- Bestellung ---------- */
.order { padding: var(--section) 0; background: var(--cream); }
.order__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.order__intro h2 { margin-bottom: 2.4rem; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 2.6rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: italic 300 1.4rem/1.2 var(--serif); color: var(--gold); }
.steps b { font-weight: 600; color: var(--ink); }
.steps span { color: var(--muted); font-size: .95rem; }
.order__info h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.order__info p { color: var(--muted); font-size: .96rem; }
.order-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); box-shadow: 0 30px 60px -40px rgba(60, 40, 10, .35); }
.order-form fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.order-form legend { font: 400 1.6rem var(--serif); color: var(--ink); margin-bottom: 14px; padding: 0; }
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: background .4s; }
.qty-row.is-flash { background: rgba(214, 176, 122, .14); }
.qty-row b { display: block; font-weight: 600; color: var(--ink); }
.qty-row span { font-size: .86rem; color: var(--muted); }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 3px; flex: none; }
.qty button { width: 40px; height: 42px; border: 0; background: transparent; font-size: 1.15rem; color: var(--ink); cursor: pointer; transition: background .25s; }
.qty button:hover { background: var(--cream); }
.qty input { width: 42px; height: 42px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: 600 1rem var(--sans); color: var(--ink); background: transparent; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.order-form__total { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; margin: 16px 0 0; color: var(--muted); flex-wrap: wrap; }
.order-form__total b { font: 400 1.8rem var(--serif); color: var(--ink); }
.order-form__total small { width: 100%; text-align: right; font-size: .78rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field > span { font-size: .82rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1px solid rgba(58, 42, 29, .18); border-radius: 3px; background: #fff; font: 400 1rem var(--sans); color: var(--text); transition: border-color .25s, box-shadow .25s; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214, 176, 122, .2); }
.field input.is-invalid { border-color: #a5432a; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0; font-size: .86rem; color: var(--muted); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold); flex: none; }
.consent a { color: var(--gold-deep); }
.form-error { color: #a5432a; font-size: .9rem; margin: -6px 0 16px; }
.form-success { background: rgba(89, 96, 58, .12); border-left: 3px solid var(--olive); padding: 14px 16px; font-size: .92rem; margin-top: 16px; }
.order-form__hint { font-size: .78rem; color: var(--muted); margin: 14px 0 0; text-align: center; }

/* ---------- FAQ ---------- */
.faq { padding: var(--section) 0; background: var(--paper); }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font: 400 1.3rem/1.3 var(--serif); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.6rem/1 var(--sans); color: var(--gold); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); max-width: 64ch; padding-bottom: 12px; }

/* ---------- Kontakt & Footer ---------- */
.contact { background: var(--moss); color: rgba(253, 250, 243, .75); padding: var(--section) 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.contact h2 { color: var(--paper); margin-bottom: 1.6rem; }
.contact h2 em { color: var(--honey); }
.contact__lead { max-width: 46ch; margin-bottom: 2.2rem; }
.contact__cards { font-style: normal; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.contact__card { background: var(--moss); padding: 28px 24px; text-decoration: none; transition: background .35s; }
a.contact__card:hover { background: #586a41; }
.contact__card span { display: block; font: 600 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--honey); margin-bottom: 10px; }
.contact__card b { font: 400 1.1rem/1.4 var(--serif); color: var(--paper); word-break: break-word; }
.footer { background: var(--bark); color: rgba(253, 250, 243, .6); padding: 64px 0 28px; border-top: 1px solid var(--line-light); font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.brand--footer { color: var(--paper); margin-bottom: 16px; }
.footer nav { display: flex; flex-direction: column; gap: 10px; }
.footer nav a { text-decoration: none; transition: color .3s; }
.footer nav a:hover { color: var(--honey); }
.footer__copy { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-light); font-size: .8rem; }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__links a:not(.btn) { font-size: .86rem; }
  .nav__cta { display: none; }
  .year { grid-template-columns: repeat(5, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
  .year::before { right: auto; width: calc(5 * 220px); }
  .year__item { scroll-snap-align: start; }
  .values__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav__toggle, .brand { display: block; position: relative; z-index: 2; }
  .brand { display: inline-flex; }
  .nav__links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 22px; background: var(--paper); color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; }
  .nav__links a:not(.btn) { font: 400 1.9rem var(--serif); }
  .nav__cta { display: inline-flex; margin-top: 12px; }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; }
  .nav.is-open { color: var(--ink); }
  .nav:not(.is-scrolled):not(.is-open) { color: #fffbf4; }
  .nav:not(.is-scrolled):not(.is-open) .brand__text em { color: var(--honey); }
  .nav:not(.is-scrolled):not(.is-open) .brand__mark { color: var(--honey); }

  .hero { grid-template-columns: 1fr; min-height: 100svh; align-items: end; }
  .hero__media { position: absolute; inset: 0; }
  .hero__media img { object-position: 40% 30%; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 33, 22, .5) 0%, rgba(46, 33, 22, 0) 18%, rgba(46, 33, 22, .3) 30%, rgba(50, 36, 24, .8) 44%, rgba(50, 36, 24, .96) 100%); }
  .hero__text { padding: 44svh var(--gutter) 44px; color: #fffbf4; }
  .hero__text .eyebrow { letter-spacing: .14em; font-size: .7rem; }
  .hero__text .eyebrow { color: var(--honey); }
  .hero__title { color: #fffbf4; font-size: clamp(3.6rem, 17vw, 6rem); margin-bottom: 1.2rem; }
  .hero__small { color: var(--honey); }
  .hero__lead { color: rgba(255, 250, 240, .92); margin-bottom: 1.8rem; }
  .hero .btn--ghost { color: #fffbf4; border-color: rgba(255, 250, 240, .55); }
  .hero__facts { border-color: rgba(255, 250, 240, .25); margin-top: 36px; padding-top: 20px; }
  .hero__facts dt { color: #fffbf4; }
  .hero__facts dd { color: rgba(255, 250, 240, .75); }
  .hero__badge { display: none; }
  .bee--hero { display: none; }

  .story__grid, .story__second, .product-hero, .region__grid, .order__grid, .contact__grid { grid-template-columns: 1fr; }
  .story__portrait { position: relative; top: 0; max-width: 560px; }
  .story__second-text { order: 0; }
  .product-hero__media { max-width: 460px; margin: 0 auto; }
  .product-pair { grid-template-columns: 1fr; }
  .moment__foot { flex-direction: column; align-items: flex-start; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hero__actions .btn { width: 100%; }
  .hero__facts { gap: 18px; }
  .hero__facts dt { font-size: 1.5rem; }
  .hero__facts dd { font-size: .74rem; }
  .moment__stage { width: 100%; border-radius: 0; }
  .moment::before { height: 36px; }
  .moment__drip { height: 90px; }
  .story__portrait::before { inset: 14px -10px -14px 14px; }
  .product__facts div { grid-template-columns: 1fr; gap: 2px; }
  .product__buy .btn { width: 100%; }
  .field-grid { grid-template-columns: 1fr; }
  .values__list { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .tile--tall { grid-row: span 2; }
  .tile--wide { grid-column: auto; }
  .contact__cards { grid-template-columns: 1fr; }
  .bee--insights { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .bee { display: none; }
  .map__river { stroke-dashoffset: 0; }
}

/* ---------- Rechtliche Unterseiten ---------- */
.legal { padding: 150px 0 var(--section); background: var(--paper); }
.legal h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin-bottom: 2.4rem; }
.legal h2 { font-size: 1.6rem; margin: 2.6rem 0 .8rem; }
.legal h3 { font-size: 1.2rem; margin: 1.8rem 0 .5rem; }
.legal p, .legal li { max-width: 72ch; color: var(--text); }
.legal .placeholder { background: rgba(214, 176, 122, .22); padding: 0 4px; border-radius: 2px; }
.legal .back { display: inline-block; margin-bottom: 2rem; color: var(--gold-deep); text-decoration: none; font-weight: 600; }
.nav--solid { background: rgba(253, 250, 243, .94); box-shadow: 0 1px 0 var(--line); color: var(--ink) !important; }

/* Hero: Einblendung beim Laden (unabhängig vom Scrollen) */
.hero .reveal { opacity: 1; transform: none; transition: none; animation: heroIn 1.1s var(--ease) both; }
.hero .reveal:nth-child(2) { animation-delay: .12s; }
.hero .reveal:nth-child(3) { animation-delay: .24s; }
.hero .reveal:nth-child(4) { animation-delay: .36s; }
.hero .reveal:nth-child(5) { animation-delay: .5s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } }

/* Buttons auf grünen Flächen: warmer Karamell statt Grün-auf-Grün */
.contact .btn--gold, .values .btn--gold { --bg: var(--honey); --fg: var(--ink); }
.contact .btn--gold:hover, .values .btn--gold:hover { --bg: var(--cream); }
.footer .brand__text em { color: var(--honey); }