/* ═══════════════════════════════════════════════════════════════
   Calendula Naturkost · styles.css
   ═══════════════════════════════════════════════════════════════ */

/* ── SELF-HOSTED FONTS ──────────────────────────────────────────── */
@font-face {
  font-family: 'Borel';
  src: url('../fonts/Borel-Regular.woff') format('woff'),
       url('../fonts/Borel-Regular.ttf')  format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LilitaOne';
  src: url('../fonts/LilitaOne-Regular.woff') format('woff'),
       url('../fonts/LilitaOne-Regular.ttf')  format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pacifico';
  src: url('../fonts/Pacifico-Regular.woff') format('woff'),
       url('../fonts/Pacifico-Regular.ttf')  format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Regular.woff') format('woff'),
       url('../fonts/Nunito-Regular.ttf')  format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Italic.woff') format('woff'),
       url('../fonts/Nunito-Italic.ttf')  format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-SemiBold.woff') format('woff'),
       url('../fonts/Nunito-SemiBold.ttf')  format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-Bold.woff') format('woff'),
       url('../fonts/Nunito-Bold.ttf')  format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-ExtraBold.woff') format('woff'),
       url('../fonts/Nunito-ExtraBold.ttf')  format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-ExtraBoldItalic.woff') format('woff'),
       url('../fonts/Nunito-ExtraBoldItalic.ttf')  format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Light.woff') format('woff'),
       url('../fonts/Lato-Light.ttf')  format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Regular.woff') format('woff'),
       url('../fonts/Lato-Regular.ttf')  format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Italic.woff') format('woff'),
       url('../fonts/Lato-Italic.ttf')  format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Bold.woff') format('woff'),
       url('../fonts/Lato-Bold.ttf')  format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── RESET & VARIABLES ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --salmon:         #E8795A;
  --salmon-light:   #F2A08A;
  --salmon-dark:    #C4573A;
  --green:          #8DC89A;
  --green-mid:      #5A8A2A;
  --green-dark:     #3A6018;
  --brown:          #6B5044;
  --brown-light:    #9A7A6A;
  --lavender:       #6B6A8E;
  --lavender-light: #A8A7C4;
  --lavender-pale:  #E8E8F2;
  --sky:            #C8E8F4;
  --amber:          #E8951A;
  --cream:          #FAF8F4;
  --cream-dark:     #F0EBE0;
  --white:          #FFFFFF;
  --text-dark:      #3A2E28;
  --text-mid:       #6B5044;
  --text-light:     #9A8A80;
  --font-brand:     'Nunito', sans-serif;
  --font-body:      'Lato', sans-serif;
  --font-lilita:    'LilitaOne', sans-serif;
  --font-pacifico:  'Pacifico', cursive;
  --radius:         12px;
  --radius-sm:      8px;
  --shadow-sm:      0 2px 8px rgba(107,106,142,0.10);
  --shadow-md:      0 6px 24px rgba(107,106,142,0.14);
}

html  { scroll-behavior: smooth; }
body  { font-family: var(--font-body); background: var(--cream); color: var(--text-dark); line-height: 1.6; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: var(--salmon); }

/* ── NAVIGATION ─────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 2px solid var(--cream-dark);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem; height: 72px;
  box-shadow: var(--shadow-sm);
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 65px; width: auto; }

.nav-links { display: flex; gap: 0.2rem; }
.nav-links a {
  color: var(--brown); font-size: 13px; letter-spacing: 0.04em;
  text-decoration: none; padding: 7px 14px; border-radius: 24px;
  font-weight: 600; transition: all 0.2s; white-space: nowrap;
}
.nav-links a:hover  { background: var(--cream-dark); color: var(--salmon); }
.nav-links a.active { background: var(--salmon); color: var(--white); }

.nav-mobile-btn {
  display: none; background: none; border: none;
  cursor: pointer; padding: 6px;
}
.nav-mobile-btn span {
  display: block; width: 24px; height: 2px;
  background: var(--brown); margin: 5px 0;
  border-radius: 2px; transition: all 0.2s;
}

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block; background: var(--salmon); color: var(--white);
  padding: 13px 28px; border-radius: 28px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; cursor: pointer; border: none;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none; font-family: var(--font-body);
}
.btn-primary:hover { background: var(--salmon-dark); transform: translateY(-2px); color: var(--white); }

.btn-outline {
  display: inline-block; background: transparent; color: var(--white);
  padding: 13px 28px; border-radius: 28px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.65);
  transition: border-color 0.2s, transform 0.15s;
  text-decoration: none; font-family: var(--font-body);
}
.btn-outline:hover { border-color: var(--white); transform: translateY(-2px); color: var(--white); }

.btn-small {
  display: inline-block; background: var(--salmon); color: var(--white);
  padding: 7px 16px; border-radius: 16px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  border: none; text-decoration: none; font-family: var(--font-body);
  transition: background 0.2s;
}
.btn-small:hover { background: var(--salmon-dark); color: var(--white); }

/* ── PAGE HERO (Unterseiten-Header) ─────────────────────────────── */
.page-hero {
  background: linear-gradient(170deg,
    #6DC4E8 0%, #6DC4E8 20%, #7ECDE8 28%, #90D4DF 34%,
    #A2D8D0 40%, #AEDABC 46%, #A8D8A0 52%, #8DC89A 62%, #5A8A2A 100%);
  min-height: 180px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 2rem 5rem; text-align: center;
}
.page-hero-hills {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 100px; pointer-events: none;
}
.page-hero-hills .ph-hill {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.page-hero-hills .ph-hill-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,20 400,80 600,50 C800,20 1100,70 1440,40 L1440,100 L0,100 Z' fill='%235A8A2A' opacity='0.45'/%3E%3C/svg%3E"); }
.page-hero-hills .ph-hill-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C300,30 600,80 900,50 C1100,30 1300,70 1440,55 L1440,100 L0,100 Z' fill='%235A8A2A' opacity='0.65'/%3E%3C/svg%3E"); }
.page-hero-hills .ph-hill-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,82 C360,44 720,90 1080,60 C1260,42 1380,75 1440,65 L1440,100 L0,100 Z' fill='%233A6018' opacity='0.85'/%3E%3C/svg%3E"); }
.page-hero-inner { position: relative; z-index: 2; }
/* Wolken im Page-Hero: 2 rechts, 1 links */
.ph-bc1, .ph-bc2, .ph-bc3 {
  position: absolute; background: rgba(255,255,255,.62);
  border-radius: 50px; z-index: 1; /* hinter dem Text (z-index:2) */
}
.ph-bc1::before, .ph-bc1::after,
.ph-bc2::before, .ph-bc2::after,
.ph-bc3::before, .ph-bc3::after {
  content: ''; position: absolute;
  background: rgba(255,255,255,.62); border-radius: 50%;
}
/* Wolke 1 — groß, rechts oben */
.ph-bc1 { width: 100px; height: 38px; top: 22px; right: 70px; }
.ph-bc1::before { width: 60px; height: 52px; top: -22px; left: 16px; }
.ph-bc1::after  { width: 42px; height: 36px; top: -14px; right: 10px; }
/* Wolke 2 — klein, rechts darunter */
.ph-bc2 { width: 66px; height: 24px; top: 52px; right: 200px; }
.ph-bc2::before { width: 38px; height: 32px; top: -14px; left: 12px; }
.ph-bc2::after  { width: 26px; height: 22px; top: -9px;  right: 8px; }
/* Wolke 3 — mittel, links */
.ph-bc3 { width: 82px; height: 30px; top: 18px; left: 80px; opacity: .55; }
.ph-bc3::before { width: 48px; height: 42px; top: -18px; left: 14px; }
.ph-bc3::after  { width: 32px; height: 28px; top: -11px; right: 8px; }

/* Wolke 2 (klein, rechts unten) sanft ausblenden zwischen 500px und 670px */
@media (max-width: 670px) {
  .ph-bc2 {
    opacity: clamp(0, (100vw - 500px) / (670px - 500px), 1);
  }
}
@media (max-width: 500px) {
  .ph-bc2, .ph-bc2::before, .ph-bc2::after { opacity: 0; pointer-events: none; }
}
.page-hero h1 {
  font-family: var(--font-lilita); font-size: 38px; margin-bottom: 0.4rem; font-weight: 400;
  color: var(--white); text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(30,80,20,.55), 0 1px 3px rgba(0,0,0,.3);
}
.page-hero p {
  font-size: 15px; color: var(--white);
  text-shadow: 0 1px 6px rgba(20,60,15,.7), 0 1px 2px rgba(0,0,0,.4);
}

/* ── STRIP ──────────────────────────────────────────────────────── */
.strip {
  background: var(--white); border-bottom: 2px solid var(--cream-dark);
  padding: 1.8rem 2rem; display: flex; gap: 2.5rem;
  justify-content: center; flex-wrap: wrap;
}
.strip-item   { text-align: center; }
.strip-num    { font-family: var(--font-lilita); font-size: 30px; color: var(--salmon); font-weight: 400; }
.strip-label  { font-size: 11px; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

/* ── CONTENT BLOCKS ─────────────────────────────────────────────── */
.content-block { max-width: 760px; margin: 0 auto; padding: 3rem 2rem; }

.content-block h2 {
  font-family: var(--font-brand); font-size: 28px; color: var(--text-dark);
  margin-bottom: 1rem; font-weight: 800;
}
.content-block h3 {
  font-family: var(--font-brand); font-size: 24px; color: var(--green-mid);
  margin: 2rem 0 0.8rem; padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--green); font-weight: 800;
}
.content-block h3:first-child { margin-top: 0; }
.content-block p  { font-size: 15px; line-height: 1.85; color: var(--text-mid); margin-bottom: 1.2rem; }
.content-block ul { margin: 0 0 1.2rem 1.4rem; }
.content-block li { font-size: 15px; line-height: 1.85; color: var(--text-mid); margin-bottom: 0.4rem; }

.quote-box {
  background: var(--lavender); color: var(--white);
  border-radius: var(--radius); padding: 2rem 2.5rem; margin: 2rem 0;
  border-left: 5px solid var(--salmon);
}
.quote-box p    { font-family: var(--font-brand); font-size: 19px; font-style: italic; margin-bottom: 0.5rem; font-weight: 600; color: var(--white); }
.quote-box cite { font-size: 13px; color: var(--lavender-pale); letter-spacing: 0.04em; }

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.value-card {
  background: var(--white); border: 2px solid var(--cream-dark);
  border-top: 4px solid var(--salmon); border-radius: var(--radius); padding: 1.4rem;
}
.value-card h4 { font-family: var(--font-brand); color: var(--brown); margin-bottom: 0.4rem; font-size: 16px; font-weight: 800; }
.value-card p  { font-size: 13px; color: var(--text-mid); margin: 0; line-height: 1.65; }

/* ── HERO (Startseite) ──────────────────────────────────────────── */
.hero {
  background: linear-gradient(170deg,
    #6DC4E8 0%,
    #6DC4E8 25%,
    #7ECDE8 32%,
    #90D4DF 38%,
    #A2D8D0 44%,
    #AEDABC 49%,
    #A8D8A0 54%,
    #98D298 60%,
    #8DC89A 66%,
    #72A878 78%,
    #5A8A2A 100%);
  min-height: 500px; display: flex; align-items: center;
  padding: 5rem 2.5rem 8rem; position: relative; overflow: hidden;
}
.hero-clouds { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
.cloud { position: absolute; background: rgba(255,255,255,0.65); border-radius: 50px; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: rgba(255,255,255,0.65); border-radius: 50%; }
.cloud1 { width: 110px; height: 42px; top: 30px; right: 80px; }
.cloud1::before { width: 65px; height: 55px; top: -22px; left: 16px; }
.cloud1::after  { width: 45px; height: 40px; top: -14px; right: 10px; }
.cloud2 { width: 75px; height: 28px; top: 65px; right: 230px; }
.cloud2::before { width: 42px; height: 38px; top: -16px; left: 14px; }
.cloud2::after  { width: 30px; height: 26px; top: -10px; right: 8px; }
.cloud3 { width: 90px; height: 34px; top: 20px; left: 120px; opacity: 0.5; }
.cloud3::before { width: 50px; height: 46px; top: -18px; left: 18px; }
.hero-hills { position: absolute; bottom: 0; left: 0; right: 0; height: 140px; }
.hero-content { max-width: 580px; position: relative; z-index: 2; }
.original-badge {
  display: inline-block;
  margin-bottom: 1.5rem;
  background: none;
}
.orig-badge-svg { width: 108px; height: 108px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.25)); display: block; }
.hero h1 {
  font-family: var(--font-lilita); font-size: 52px; color: var(--white);
  line-height: 1.15; margin-bottom: 1rem; font-weight: 400;
  text-shadow: 0 2px 10px rgba(58,96,24,0.25);
}
.hero h1 .h1-main { text-transform: uppercase; display: block; }
.hero h1 .h1-sub  { font-size: .72em; font-style: italic; display: block; opacity: .92; }
.hero p {
  font-size: 17px; color: rgba(255,255,255,0.92);
  line-height: 1.75; margin-bottom: 2rem; max-width: 460px;
}
.hero .btn-outline { margin-left: 1rem; }

/* ── COMEBACK SECTION ───────────────────────────────────────────── */
.comeback {
  background: linear-gradient(135deg, var(--salmon) 0%, var(--salmon-dark) 100%);
  padding: 3.5rem 2.5rem; text-align: center;
}
.comeback .overline {
  font-family: var(--font-brand); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.75); font-weight: 700; margin-bottom: 0.8rem;
}
.comeback h2 { font-family: var(--font-pacifico); font-size: 34px; color: var(--white); margin-bottom: 1rem; font-weight: 400; }
.comeback p  { font-size: 16px; color: rgba(255,255,255,0.9); line-height: 1.75; max-width: 620px; margin: 0 auto 2rem; }

/* ── highlight PRODUCT SECTION ───────────────────────────────────────────── */
.highlight-product {
  background: linear-gradient(135deg, var(--salmon) 0%, var(--salmon-dark) 100%);
  padding: 2.5rem 2.5rem; text-align: left;
  border-radius: var(--radius);
}
.highlight-product .overline {
  font-family: var(--font-brand); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.75); font-weight: 700; margin-bottom: 0.8rem;
}
.highlight-product h2 { font-family: var(--font-pacifico); font-size: 34px; color: var(--white); margin-bottom: 1rem; font-weight: 400; }
.highlight-product p { font-size: 16px; color: rgba(255,255,255,0.9); line-height: 1.75; max-width: 620px; margin: 0 auto 2rem; }
.highlight-product li { font-size: 16px; color: rgba(255,255,255,0.9); }

/* ── TRUST SECTION ───────────────────────────────────────────── */
.highlight-trust {
  background: linear-gradient(135deg, var(--salmon) 0%, var(--salmon-dark) 100%);
  padding: 1.5rem 1.5rem; text-align: left;
  border-radius: var(--radius);
}
.highlight-trust .overline {
  font-family: var(--font-brand); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.75); font-weight: 700; margin-bottom: 0.8rem;
}
.highlight-trust p { font-size: 16px; color: rgba(255,255,255,0.9); line-height: 1.75; max-width: 620px; margin: 0 auto 2rem; }

/* ── PRODUCTS ───────────────────────────────────────────────────── */
.products-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem; padding: 2.5rem; max-width: 960px; margin: 0 auto;
}
.product-card {
  background: var(--white); border: 2px solid var(--cream-dark);
  border-radius: 16px; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-img-wrap { height: 240px; background: var(--sky); position: relative; overflow: hidden; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-star {
  position: absolute; top: 14px; right: 14px;
  background: var(--salmon); color: var(--white);
  font-size: 11px; font-weight: 800; font-family: var(--font-brand);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px;
}
.orig-badge-svg { width: 108px; height: 108px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.25)); display: block; }

.since-badge {
  position: absolute; bottom: 10px; right: 12px;
}
.since-badge .orig-badge-svg { width: 78px; height: 78px; }
.product-body { padding: 1.5rem; }
.product-name-small { font-size: 11px; color: var(--salmon); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.product-body h2  { font-family: var(--font-lilita); font-size: 22px; color: var(--text-dark); margin-bottom: 0.6rem; font-weight: 400; line-height: 1.2; border: none; padding: 0; text-transform: uppercase; letter-spacing: .03em; }
.product-body p   { font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 1rem; }
.product-tags     { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.tag              { font-size: 11px; padding: 4px 11px; border-radius: 14px; font-weight: 700; letter-spacing: 0.04em; }
.tag.vegan        { background: #E8F5EB; color: var(--green-mid); }
.tag.bio          { background: #FFF0E8; color: var(--salmon-dark); }
.tag.sojafrei     { background: var(--lavender-pale); color: var(--lavender); }
.tag.original     { background: #FFF8E8; color: var(--amber); }
.product-tagline  { font-family: var(--font-brand); font-size: 14px; font-style: italic; color: var(--brown-light); border-top: 1px solid var(--cream-dark); padding-top: 0.9rem; margin-top: 0.4rem; }
.products-cta     { text-align: center; padding: 0.5rem 2rem 3rem; color: var(--text-light); font-size: 14px; }

/* ── TESTIMONIALS ───────────────────────────────────────────────── */
.testi-section { background: var(--white); padding: 3.5rem 2rem; }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title .overline { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--salmon); font-weight: 700; margin-bottom: 6px; }
.section-title h2 { font-family: var(--font-brand); font-size: 30px; color: var(--text-dark); font-weight: 800; }
.testi-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.testi-card   { background: var(--cream); border: 2px solid var(--cream-dark); border-radius: var(--radius); padding: 1.6rem; }
.testi-quote  { font-size: 48px; color: var(--green); font-family: var(--font-brand); line-height: 1; margin-bottom: -8px; font-weight: 800; }
.stars        { color: var(--amber); font-size: 13px; margin-bottom: 6px; }
.testi-text   { font-size: 14px; color: var(--text-dark); line-height: 1.75; margin-bottom: 1.2rem; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--salmon); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 13px; font-weight: 800; flex-shrink: 0; font-family: var(--font-brand); }
.testi-name   { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.testi-since  { font-size: 11px; color: var(--text-light); }

/* ── B2B CTA ────────────────────────────────────────────────────── */
.b2b-cta { background: var(--cream-dark); padding: 3rem 2.5rem; border-top: 2px solid #E0D8CA; text-align: center; }
.b2b-cta .overline { font-family: var(--font-brand); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lavender); font-weight: 700; margin-bottom: 0.5rem; }
.b2b-cta h2 { font-family: var(--font-brand); font-size: 28px; color: var(--text-dark); margin-bottom: 0.7rem; font-weight: 800; }
.b2b-cta p  { font-size: 15px; color: var(--text-mid); line-height: 1.7; margin-bottom: 1.5rem; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ── HAENDLER ───────────────────────────────────────────────────── */
.haendler-wrap  { max-width: 960px; margin: 0 auto; padding: 3rem 2rem; }
.haendler-intro { text-align: center; margin-bottom: 2rem; }
.haendler-intro h2 { font-family: var(--font-brand); font-size: 26px; color: var(--text-dark); margin-bottom: 0.5rem; font-weight: 800; }
.haendler-intro p  { font-size: 14px; color: var(--text-mid); max-width: 560px; margin: 0 auto; }
.haendler-filter { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; }
.filter-btn { background: var(--white); border: 2px solid var(--cream-dark); border-radius: 24px; padding: 8px 20px; font-size: 13px; font-family: var(--font-body); cursor: pointer; color: var(--text-mid); font-weight: 700; transition: all 0.2s; }
.filter-btn.active, .filter-btn:hover { background: var(--salmon); color: var(--white); border-color: var(--salmon); }
.haendler-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.haendler-card { background: var(--white); border: 2px solid var(--cream-dark); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 1.4rem; }
.haendler-type  { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--green-mid); margin-bottom: 5px; }
.haendler-name  { font-family: var(--font-brand); font-size: 17px; color: var(--text-dark); margin-bottom: 4px; font-weight: 800; }
.haendler-addr  { font-size: 13px; color: var(--text-mid); line-height: 1.55; }
.haendler-badge { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 12px; margin-top: 10px; background: var(--lavender-pale); color: var(--lavender); font-weight: 700; }
.haendler-missing { text-align: center; padding: 2.5rem; background: var(--cream-dark); border-radius: var(--radius); margin-top: 2rem; }
.haendler-missing p { font-size: 14px; color: var(--text-mid); margin-bottom: 1.2rem; }

/* ── REZEPTE ────────────────────────────────────────────────────── */
.rezept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; padding: 2.5rem; max-width: 1100px; margin: 0 auto; }
.rezept-card { background: var(--white); border: 2px solid var(--cream-dark); border-radius: var(--radius); overflow: hidden; }
.rezept-img  { height: 140px; background: var(--sky); display: flex; align-items: center; justify-content: center; font-size: 50px; position: relative; }
.community-badge { position: absolute; top: 10px; left: 10px; background: var(--green-mid); color: var(--white); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 12px; }
.rezept-body h3   { font-family: var(--font-brand); font-size: 17px; color: var(--text-dark); margin-bottom: 0.3rem; font-weight: 800; border: none; padding: 0; }
.rezept-meta      { font-size: 12px; color: var(--text-light); margin-bottom: 0.6rem; }
.rezept-body      { padding: 1.2rem; }
.rezept-body p    { font-size: 13px; color: var(--text-mid); line-height: 1.65; margin-bottom: 0.9rem; }

/* ── REZEPT EINREICHEN ──────────────────────────────────────────── */
.rezept-submit { background: linear-gradient(135deg, var(--lavender) 0%, var(--lavender-light) 100%); margin: 0 2.5rem 2.5rem; border-radius: 16px; padding: 2.5rem; color: var(--white); }
.rezept-submit h2  { font-family: var(--font-brand); font-size: 26px; margin-bottom: 0.5rem; font-weight: 800; color: var(--white); border: none; padding: 0; }
.rezept-submit > p { font-size: 14px; opacity: 0.85; margin-bottom: 1.8rem; }
.submit-form        { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.submit-form .full  { grid-column: 1 / -1; }
.submit-form label  { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 6px; font-weight: 700; }
.submit-form input,
.submit-form textarea,
.submit-form select {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid rgba(255,255,255,0.3); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.15); color: var(--white);
  font-family: var(--font-body); font-size: 14px; outline: none;
  transition: border-color 0.2s;
}
.submit-form input:focus,
.submit-form textarea:focus,
.submit-form select:focus  { border-color: rgba(255,255,255,0.7); }
.submit-form input::placeholder,
.submit-form textarea::placeholder { color: rgba(255,255,255,0.4); }
.submit-form textarea { height: 90px; resize: vertical; }
.upload-zone { border: 2px dashed rgba(255,255,255,0.4); border-radius: 10px; padding: 1.8rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.upload-zone:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
.upload-icon   { font-size: 32px; display: block; margin-bottom: 6px; }
.upload-zone strong { font-size: 14px; color: var(--white); }
.upload-zone p { font-size: 12px; opacity: 0.55; margin-top: 4px; }
#upload-preview { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.85); }

/* ── KONTAKT ────────────────────────────────────────────────────── */
.kontakt-outer { padding: 2.5rem; }
.kontakt-wrap  { display: grid; grid-template-columns: 1fr 1.4fr; max-width: 940px; margin: 0 auto; border: 2px solid var(--cream-dark); border-radius: 16px; overflow: hidden; }
.kontakt-info  { background: var(--lavender); color: var(--white); padding: 2.8rem; }
.kontakt-logo { margin-bottom: 1.8rem; }
.kontakt-logo img { height: 80px; width: auto; display: block; }
.kontakt-info h2 { font-family: var(--font-brand); font-size: 26px; margin-bottom: 1.8rem; font-weight: 800; color: var(--white); border: none; padding: 0; }
.kontakt-row   { margin-bottom: 1.6rem; }
.kontakt-row label { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lavender-pale); margin-bottom: 5px; font-weight: 700; }
.kontakt-row span  { font-size: 14px; opacity: 0.92; line-height: 1.6; }
.kontakt-note  { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.2); font-size: 13px; color: rgba(232,232,242,0.7); line-height: 1.7; }
.kontakt-form  { background: var(--white); padding: 2.8rem; }
.kontakt-form h2 { font-family: var(--font-brand); font-size: 24px; color: var(--text-dark); margin-bottom: 1.8rem; font-weight: 800; border: none; padding: 0; }
.form-group    { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 11px; color: var(--text-mid); margin-bottom: 5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 10px 14px;
  border: 2px solid var(--cream-dark); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 14px;
  background: var(--cream); color: var(--text-dark);
  outline: none; transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--salmon); }
.form-group textarea { height: 100px; resize: vertical; }

/* ── LEGAL PAGES ────────────────────────────────────────────────── */
.legal-block { max-width: 760px; margin: 0 auto; padding: 3rem 2rem; }
.legal-block h3 { font-family: var(--font-brand); font-size: 20px; color: var(--green-mid); margin: 2rem 0 0.6rem; font-weight: 800; border: none; padding: 0; }
.legal-block h3:first-of-type { margin-top: 0; }
.legal-block p  { font-size: 14px; line-height: 1.85; color: var(--text-mid); margin-bottom: 0.8rem; }
.legal-back { display: inline-flex; align-items: center; gap: 6px; color: var(--salmon); font-size: 13px; font-weight: 700; margin-bottom: 2rem; text-decoration: none; }
.legal-back:hover { text-decoration: underline; }
.legal-note { margin-top: 2rem; font-size: 13px; color: var(--text-light); border-top: 1px solid var(--cream-dark); padding-top: 1rem; font-style: italic; }

/* ── FOOTER ─────────────────────────────────────────────────────── */
.footer-main { background: var(--text-dark); color: rgba(255,255,255,0.7); padding: 3.5rem 2.5rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 3rem; max-width: 1000px; margin: 0 auto 2.5rem; }
.footer-brand img    { height: 100px; width: auto; margin-bottom: 1rem; }
.footer-claim { font-family: var(--font-brand); font-size: 15px; font-style: italic; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 1.4rem; font-weight: 600; }
.footer-social { display: flex; gap: 10px; }
.social-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: border-color 0.2s, background 0.2s; text-decoration: none; color: inherit; }
.social-btn:hover { border-color: var(--salmon); background: rgba(232,121,90,0.15); }
.footer-col h4 { font-family: var(--font-brand); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--salmon); margin-bottom: 1.1rem; }
.footer-nav    { list-style: none; }
.footer-nav li { margin-bottom: 0.55rem; }
.footer-nav a  { color: rgba(255,255,255,0.65); font-size: 14px; text-decoration: none; transition: color 0.2s; }
.footer-nav a:hover { color: var(--white); }
.footer-contact-item { display: flex; gap: 10px; margin-bottom: 0.8rem; align-items: flex-start; }
.footer-contact-item .icon { font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.footer-contact-item span  { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.55; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); max-width: 1000px; margin: 0 auto; padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; }
.footer-copy   { font-size: 12px; color: rgba(255,255,255,0.35); }
.footer-legal  { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: rgba(255,255,255,0.8); }

/* ── 404 PAGE ───────────────────────────────────────────────────── */
.page-404 {
  min-height: 680px;
  background: linear-gradient(160deg, var(--sky) 0%, var(--green) 45%, var(--green-mid) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: 7rem;
  position: relative; overflow: hidden;
}

/* kleine Hintergrundwolken */
.page-404 .bg-cloud { position:absolute; background:rgba(255,255,255,0.62); border-radius:50px; }
.page-404 .bg-cloud::before,
.page-404 .bg-cloud::after { content:''; position:absolute; background:rgba(255,255,255,0.62); border-radius:50%; }
.page-404 .bc1 { width:110px; height:42px; top:28px; right:70px; }
.page-404 .bc1::before { width:65px; height:55px; top:-22px; left:16px; }
.page-404 .bc1::after  { width:45px; height:40px; top:-14px; right:10px; }
.page-404 .bc2 { width:75px; height:28px; top:62px; right:220px; }
.page-404 .bc2::before { width:42px; height:38px; top:-16px; left:14px; }
.page-404 .bc2::after  { width:30px; height:26px; top:-10px; right:8px; }
.page-404 .bc3 { width:88px; height:33px; top:18px; left:110px; opacity:0.5; }
.page-404 .bc3::before { width:50px; height:46px; top:-18px; left:18px; }

.page-404 .hills { position:absolute; bottom:0; left:0; right:0; height:140px; pointer-events:none; }

/* X-Wrapper: seitliche Bewegung */
.float-x {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  animation: floatX 20s ease-in-out infinite;
}
/* Y-Wrapper: sanftes Wiegen */
.float-y {
  display: flex; flex-direction: column; align-items: center;
  animation: floatY 10s ease-in-out infinite;
}

@keyframes floatX {
  0%   { transform: translateX(   0px); }
  25%  { transform: translateX(  60px); }
  50%  { transform: translateX(   0px); }
  75%  { transform: translateX( -60px); }
  100% { transform: translateX(   0px); }
}
@keyframes floatY {
  0%   { transform: translateY(  0px); }
  25%  { transform: translateY( -9px); }
  50%  { transform: translateY(  0px); }
  75%  { transform: translateY(  9px); }
  100% { transform: translateY(  0px); }
}

/* Große Wolke */
.cloud-big { position:relative; width:380px; height:160px; margin-bottom:0.5rem; }
.cb-body { position:absolute; bottom:0; left:40px; right:40px; height:72px; background:rgba(255,255,255,0.82); border-radius:50px; }
.cb-ll { position:absolute; width:88px;  height:88px;  background:rgba(255,255,255,0.82); border-radius:50%; bottom:54px; left:52px; }
.cb-lm { position:absolute; width:116px; height:116px; background:rgba(255,255,255,0.82); border-radius:50%; bottom:60px; left:110px; }
.cb-mm { position:absolute; width:138px; height:138px; background:rgba(255,255,255,0.82); border-radius:50%; bottom:66px; left:121px; }
.cb-rm { position:absolute; width:110px; height:110px; background:rgba(255,255,255,0.82); border-radius:50%; bottom:58px; right:112px; }
.cb-rr { position:absolute; width:84px;  height:84px;  background:rgba(255,255,255,0.82); border-radius:50%; bottom:52px; right:50px; }
.cb-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:16px; z-index:10; }
.cb-text span { font-family:var(--font-brand); font-size:80px; font-weight:800; color:var(--green-mid); letter-spacing:-4px; line-height:1; text-shadow:0 2px 0 rgba(255,255,255,0.5); user-select:none; }

/* Schatten */
.cloud-shadow { width:240px; height:12px; background:rgba(58,96,24,0.13); border-radius:50%; margin-bottom:2.2rem; animation:shadowPulse 10s ease-in-out infinite; }
@keyframes shadowPulse {
  0%,100% { opacity:0.13; transform:scaleX(1); }
  25%      { opacity:0.08; transform:scaleX(0.88); }
  50%      { opacity:0.13; transform:scaleX(1); }
  75%      { opacity:0.08; transform:scaleX(0.88); }
}

/* Text */
.text-404 { position:relative; z-index:2; text-align:center; color:rgba(255,255,255,0.95); max-width:440px; }
.text-404 h1 { font-family:var(--font-brand); font-size:26px; font-weight:800; margin-bottom:0.6rem; text-shadow:0 2px 8px rgba(58,96,24,0.25); }
.text-404 p  { font-size:15px; line-height:1.75; color:rgba(255,255,255,0.85); margin-bottom:1.8rem; }

.btn-404-back {
  display:inline-block; background:rgba(255,255,255,0.18); color:#fff;
  padding:11px 26px; border-radius:28px; font-size:13px; font-weight:700;
  letter-spacing:0.04em; text-decoration:none;
  border:2px solid rgba(255,255,255,0.55);
  font-family:var(--font-body); cursor:pointer;
  transition:background 0.2s, border-color 0.2s; margin-right:10px;
}
.btn-404-back:hover { background:rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.9); }
.btn-404-home {
  display:inline-block; background:var(--salmon); color:#fff;
  padding:11px 26px; border-radius:28px; font-size:13px; font-weight:700;
  letter-spacing:0.04em; text-decoration:none; border:none;
  font-family:var(--font-body); cursor:pointer;
  transition:background 0.2s, transform 0.15s;
}
.btn-404-home:hover { background:var(--salmon-dark); transform:translateY(-2px); color:#fff; }

/* ── SKALIERBARE HÜGELLANDSCHAFT ────────────────────────────────── */
.hills-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 160px; overflow: hidden; pointer-events: none;
}
.hill {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom center;
}
.hill-1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C200,40 400,130 600,90 C800,50 1100,120 1440,70 L1440,160 L0,160 Z' fill='%235A8A2A' opacity='0.45'/%3E%3C/svg%3E");
}
.hill-2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,110 C300,50 600,130 900,80 C1100,45 1300,110 1440,85 L1440,160 L0,160 Z' fill='%235A8A2A' opacity='0.65'/%3E%3C/svg%3E");
}
.hill-3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,130 C360,70 720,145 1080,95 C1260,65 1380,120 1440,105 L1440,160 L0,160 Z' fill='%233A6018' opacity='0.85'/%3E%3C/svg%3E");
}

/* ── PRODUKT-DRAWER ─────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(30,20,16,.45);
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--white); z-index: 201;
  transform: translateX(110%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(30,20,16,.18);
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.6rem; border-bottom: 2px solid var(--cream-dark); flex-shrink: 0;
}
.drawer-header h2 { font-family: var(--font-lilita); font-size: 18px; font-weight: 400; color: var(--text-dark); text-transform: uppercase; letter-spacing: .03em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.6rem; }

.drawer-header-btns { display: flex; gap: 8px; align-items: center; }
.modal-header-left  { display: flex; align-items: center; gap: 10px; }
.modal-logo         { display: flex; align-items: center; gap: 8px; }
.modal-logo img     { height: 36px; width: auto; }

.panel-close {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: none;
  font-size: 18px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  color: var(--text-mid); transition: color .2s, transform .15s;
  padding: 0; line-height: 1;
}
.panel-close:hover { color: var(--salmon); transform: scale(1.2); background: none; }

/* ── ROLLENDE FRIKADELLE ────────────────────────────────────────── */
.frikadelle {
  position: absolute;
  bottom: 20px; right: -130px;
  width: 110px; height: 110px;
  z-index: 6; opacity: 0;
  will-change: transform;
}
.frikadelle svg { width: 100%; height: 100%; display: block; }

@keyframes frikRoll {
  0%   { transform: translateX(0)      rotate(0deg); }
  100% { transform: translateX(-140vw) rotate(-900deg); }
}

/* ── LOGO-OVERLAY IM HERO ───────────────────────────────────────── */
.hero-logo-overlay {
  position: absolute;
  top: 50%; right: 12%;
  transform: translateY(-50%);
  z-index: 4; opacity: 0; pointer-events: none;
  display: none;
}
.hero-logo-overlay img {
  height: clamp(200px, 30vh, 320px); width: auto;
  filter: drop-shadow(0 4px 24px rgba(58,96,24,.45));
}
@media (min-width: 1200px) {
  .hero-logo-overlay {
    right: 14%;
  }
  .hero-logo-overlay img {
    height: clamp(260px, 34vh, 400px);
  }
}
/* Mobile/Tablet: Logo als Sonne oben rechts, größer, per JS eingeblendet */
@media (max-width: 999px) {
  .hero-logo-overlay {
    top: 16px; right: 14px;
    bottom: auto; left: auto;
    transform: none;
  }
  .hero-logo-overlay img {
    height: 140px;
    filter: drop-shadow(0 2px 10px rgba(58,96,24,.35));
  }
}
@keyframes herLogoPop {
  0%   { opacity: 0; transform: translateY(-50%) scale(.88); }
  30%  { opacity: 1; transform: translateY(-50%) scale(1.02); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes herLogoPopMobile {
  0%   { opacity: 0; transform: scale(.88); }
  30%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

.panel-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.4rem; }
.panel-img-main { grid-column: 1/-1; height: 200px; border-radius: 12px; overflow: hidden; }
.panel-img-main img { width: 100%; height: 100%; object-fit: cover; }
.panel-img-thumb { height: 100px; border-radius: 8px; overflow: hidden; background: var(--cream-dark); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.panel-img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.panel-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.2rem; }
.panel-section { margin-bottom: 1.4rem; }
.panel-section h3 { font-family: var(--font-brand); font-size: 14px; font-weight: 800; color: var(--green-mid); border-bottom: 2px solid var(--green); padding-bottom: 4px; margin-bottom: .7rem; }
.panel-section p { font-size: 14px; color: var(--text-mid); line-height: 1.8; }
.panel-section ul { margin-left: 1.2rem; }
.panel-section li { font-size: 14px; color: var(--text-mid); line-height: 1.8; }
.panel-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.panel-meta-item { background: var(--cream); border-radius: 8px; padding: .7rem 1rem; }
.panel-meta-item .label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--text-light); margin-bottom: 3px; }
.panel-meta-item .value { font-size: 14px; font-weight: 700; color: var(--text-dark); }

/* ── REZEPT-MODAL ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(30,20,16,.5);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--white); border-radius: 20px;
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  transform: translateY(24px) scale(.97); opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.3,.64,1), opacity .3s ease;
  box-shadow: 0 24px 80px rgba(30,20,16,.22);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.6rem; border-bottom: 2px solid var(--cream-dark);
  position: sticky; top: 0; background: var(--white); z-index: 10;
  border-radius: 20px 20px 0 0;
}
.modal-header h2 { font-family: var(--font-brand); font-size: 18px; font-weight: 800; color: var(--text-dark); }
.modal-header-btns { display: flex; gap: 8px; align-items: center; }
.modal-body { padding: 1.6rem; }

.btn-pdf {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-mid); color: var(--white);
  border: none; padding: 7px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; transition: background .2s; white-space: nowrap;
}
.btn-pdf:hover { background: var(--green-dark); color: var(--white); }

.rezept-hero {
  background: linear-gradient(135deg, var(--lavender), var(--lavender-light));
  border-radius: 12px; padding: 1.8rem; text-align: center;
  margin-bottom: 1.4rem; color: var(--white);
}
.rezept-hero .emoji { font-size: 52px; display: block; margin-bottom: .5rem; }
.rezept-hero h3 { font-family: var(--font-brand); font-size: 20px; font-weight: 800; margin-bottom: .3rem; }
.rezept-hero .meta { font-size: 13px; opacity: .85; }

.step { display: flex; gap: .9rem; margin-bottom: .9rem; align-items: flex-start; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--salmon); color: var(--white); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.step p { font-size: 14px; color: var(--text-mid); line-height: 1.75; }

.open-hint { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: .8rem; font-size: 12px; color: var(--lavender); font-weight: 700; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .hero h1         { font-size: 36px; }
  .hero            { padding: 3.5rem 1.5rem 7rem; }
  .hero .btn-outline { margin-left: 0; margin-top: 0.8rem; display: inline-block; }
  .nav-links       { display: none; }
  .nav-mobile-btn  { display: block; }
  .nav-links.open  {
    display: flex; flex-direction: column;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--white); border-bottom: 2px solid var(--cream-dark);
    padding: 1rem; gap: 0.4rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .kontakt-wrap    { grid-template-columns: 1fr; }
  .submit-form     { grid-template-columns: 1fr; }
  .products-grid   { grid-template-columns: 1fr; padding: 1.5rem; }
  .rezept-submit   { margin: 0 1rem 2rem; }
  .footer-grid     { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero h1    { font-size: 28px; }
}