/* ===== Self-hosted fonts ===== */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Tokens ===== */
:root{
  --orange:#DC682D;
  --orange-dark:#B8521F;
  --orange-soft:#F9C9A6;
  --green:#7CB04E;
  --green-dark:#5E8B36;
  --green-soft:#C7E1A8;
  --cream:#FFF8F0;
  --cream-deep:#FAEDD8;
  --ink:#2A2118;
  --ink-soft:#5a4a3a;
  --white:#ffffff;
  --shadow-sm: 0 2px 8px rgba(42,33,24,.06);
  --shadow-md: 0 10px 30px rgba(42,33,24,.08);
  --shadow-lg: 0 24px 60px rgba(42,33,24,.14);
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1200px;
}

/* ===== Reset / base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  text-wrap:pretty;
}
h1,h2,h3,h4{font-family:'Fredoka', system-ui, sans-serif; font-weight:600; line-height:1.1; margin:0 0 .4em; color:var(--ink); letter-spacing:-.01em}
h1{font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:700}
h2{font-size:clamp(2rem, 4vw, 3rem); font-weight:600}
h3{font-size:1.35rem; font-weight:600}
p{margin:0 0 1em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}

.container{max-width:var(--max); margin:0 auto; padding:0 24px}

section{padding:96px 0; position:relative; scroll-margin-top:88px}
@media(max-width:640px){section{padding:64px 0; scroll-margin-top:72px}}

.section-cream{background:var(--cream)}
.eyebrow{
  display:inline-block;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green-dark);
  background:var(--green-soft);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}
.eyebrow.orange{color:var(--orange-dark); background:var(--orange-soft)}

/* ===== NAV ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px 0;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  background:rgba(255,255,255,0);
}
.nav.scrolled{
  background:rgba(255,255,255,.96);
  box-shadow:0 4px 24px rgba(42,33,24,.08);
  padding:10px 0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav-inner{
  display:flex; align-items:center;
  max-width:var(--max); margin:0 auto; padding:0 24px;
  position:relative;
}
.nav-logo img{height:74px; width:auto; transition:height .25s ease; display:block}
.nav.scrolled .nav-logo img{height:62px}
@media(max-width:640px){
  .nav-logo img{height:60px}
  .nav.scrolled .nav-logo img{height:50px}
}
.nav-links{
  display:flex; gap:6px; list-style:none; margin:0; padding:0;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  pointer-events:auto;
}
.nav-links a{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:.98rem;
  color:var(--ink);
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a:hover{background:var(--orange-soft); color:var(--orange-dark); transform:translateY(-1px)}
.nav-cta{
  background:var(--orange) !important; color:#fff !important;
  padding:10px 20px !important;
  box-shadow:0 6px 16px rgba(220,104,45,.35);
}
.nav-cta:hover{background:var(--orange-dark) !important; color:#fff !important}

/* Language toggle */
.lang-btn{
  flex-shrink:0;
  background:transparent;
  border:2px solid var(--orange);
  color:var(--orange);
  border-radius:999px;
  padding:5px 13px;
  font-family:var(--ff-body);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.07em;
  cursor:pointer;
  transition:background .2s, color .2s, transform .15s;
  margin-left:10px;
}
.lang-btn:hover,.lang-btn:focus-visible{
  background:var(--orange);
  color:#fff;
  outline:none;
  transform:scale(1.06);
}

/* Instagram icon in nav */
.nav-ig{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--orange);
  opacity:.75;
  margin-left:auto;
  margin-right:10px;
  transition:opacity .2s, transform .15s;
}
.nav-ig:hover,.nav-ig:focus-visible{opacity:1; transform:scale(1.1); outline:none}

.hamburger{display:none; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; background:var(--cream)}
.hamburger span{display:block; width:22px; height:2.5px; background:var(--ink); border-radius:2px; position:relative; transition:transform .25s, opacity .2s}
.hamburger span::before, .hamburger span::after{
  content:""; position:absolute; left:0; width:22px; height:2.5px; background:var(--ink); border-radius:2px;
  transition:transform .25s;
}
.hamburger span::before{top:-7px}
.hamburger span::after{top:7px}
.hamburger.open span{background:transparent}
.hamburger.open span::before{top:0; transform:rotate(45deg)}
.hamburger.open span::after{top:0; transform:rotate(-45deg)}

@media(max-width:860px){
  .hamburger{display:flex}
  /* On mobile: push logo left, lang-btn + hamburger float right */
  .nav-logo{margin-right:auto}
  .nav-ig{margin-left:0; margin-right:8px}
  .lang-btn{margin-left:0; padding:4px 10px; font-size:.72rem}
  .hamburger{margin-left:12px}
  .nav-links{
    position:absolute; top:100%; right:16px; left:16px;
    flex-direction:column; gap:4px;
    background:#fff; border-radius:20px;
    box-shadow:var(--shadow-lg);
    padding:14px; margin-top:8px;
    transform:translate(0,-10px); opacity:0; pointer-events:none;
    transition:opacity .2s, transform .2s;
  }
  .nav-links.open{transform:translate(0,0); opacity:1; pointer-events:auto}
  .nav-links a{display:block; padding:14px 18px; border-radius:14px}
}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  padding:140px 0 80px;
  position:relative;
  overflow:hidden;
  /* Placeholder background matched to the hero video's neutral-warm grey
     studio bg so there's no dark flash before the video paints */
  background:linear-gradient(180deg, #c8c5be 0%, #d6d3cc 60%, #e2dfd8 100%);
  display:flex; align-items:center;
  color:#fff;
}

/* Background video */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  filter:saturate(1.1);
}

/* Dark + warm overlay so text stands out */
.hero-overlay{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(0,0,0,.15), transparent 80%),
    linear-gradient(180deg, rgba(20,12,5,.55) 0%, rgba(20,12,5,.35) 35%, rgba(20,12,5,.65) 100%);
}

/* slow pour gradient that drifts behind everything (disabled — replaced by video) */
.hero::before{
  content:none;
  position:absolute; inset:-20% -10%;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(220,104,45,.22), transparent 60%),
    radial-gradient(45% 55% at 80% 70%, rgba(124,176,78,.20), transparent 65%),
    radial-gradient(35% 40% at 60% 20%, rgba(220,104,45,.12), transparent 60%);
  filter:blur(20px);
  animation:pour 18s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes pour{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  100%{transform:translate3d(-3%,2%,0) rotate(8deg) scale(1.08)}
}

/* Floating fruit blobs (CSS-drawn) */
.fruit{
  position:absolute; border-radius:50%;
  z-index:1; pointer-events:none;
  filter:blur(.5px);
  opacity:.85;
}
.fruit::after{
  content:""; position:absolute; inset:14% 50% 50% 14%;
  background:radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  border-radius:50%;
}
.fruit.leaf::before{
  content:""; position:absolute; top:-12%; left:38%;
  width:24%; height:30%;
  background:var(--green-dark);
  border-radius:0 100% 0 100%;
  transform:rotate(20deg);
}
.fruit.orange{background:radial-gradient(circle at 35% 30%, #ff8a48, var(--orange) 60%, var(--orange-dark));}
.fruit.lime{background:radial-gradient(circle at 35% 30%, #b6dd83, var(--green) 60%, var(--green-dark));}
.fruit.berry{background:radial-gradient(circle at 35% 30%, #e98d63, #c8501f 70%, #8a2e0a);}
.fruit.apple{background:radial-gradient(circle at 35% 30%, #ff9a6a, #d65a2a 70%);}

.fruit.f1{width:170px; height:170px; top:8%;  left:6%;  animation:float 13s ease-in-out infinite}
.fruit.f2{width:110px; height:110px; top:20%; right:10%; animation:float 16s ease-in-out infinite -3s}
.fruit.f3{width:80px;  height:80px;  bottom:18%; left:12%; animation:float 11s ease-in-out infinite -5s}
.fruit.f4{width:140px; height:140px; bottom:8%;  right:18%; animation:float 17s ease-in-out infinite -7s}
.fruit.f5{width:60px;  height:60px;  top:55%; left:48%; animation:float 9s  ease-in-out infinite -2s}
.fruit.f6{width:90px;  height:90px;  top:12%; left:60%; animation:float 14s ease-in-out infinite -4s}

@keyframes float{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(14px,-22px) rotate(8deg)}
  66%{transform:translate(-12px,16px) rotate(-6deg)}
}

@media(max-width:640px){
  .fruit.f1{width:110px; height:110px}
  .fruit.f2{width:80px; height:80px}
  .fruit.f4{width:90px; height:90px; right:8%}
  .fruit.f6{display:none}
}

.hero-inner{
  position:relative; z-index:2;
  max-width:880px; margin:0 auto;
  text-align:center;
  padding:0 24px;
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.14);
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:8px 16px 8px 10px; border-radius:999px;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:.92rem;
  color:#fff;
  opacity:0; transform:translateY(20px); animation:rise .8s .1s forwards ease-out;
}
.hero-kicker .dot{width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(124,176,78,.25)}
.hero-kicker .kicker-emoji{
  font-size:1.2rem; line-height:1;
  display:inline-block;
  transform:translateY(-1px) rotate(-8deg);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.hero h1{
  margin-top:22px;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  opacity:0; transform:translateY(28px); animation:rise .9s .25s forwards ease-out;
}
.hero h1 .accent-o{color:#FFB070; text-shadow:0 2px 30px rgba(220,104,45,.5)}
.hero h1 .accent-g{color:#B8D98B; text-shadow:0 2px 30px rgba(124,176,78,.5)}
.hero-sub{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 12px rgba(0,0,0,.4);
  max-width:600px; margin:14px auto 36px;
  opacity:0; transform:translateY(20px); animation:rise .9s .4s forwards ease-out;
}
.hero-cta-wrap{
  opacity:0; transform:translateY(20px); animation:rise .9s .55s forwards ease-out;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
@keyframes rise{to{opacity:1; transform:translateY(0)}}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 32px; border-radius:999px;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.05rem;
  transition:transform .2s ease, box-shadow .25s ease, background .2s ease;
  border:2px solid transparent;
  white-space:nowrap;
}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 10px 24px rgba(220,104,45,.38)}
.btn-primary:hover{background:var(--orange-dark); transform:translateY(-3px); box-shadow:0 16px 32px rgba(220,104,45,.45)}
.btn-primary .arrow{transition:transform .2s}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.32); transform:translateY(-2px)}

/* ===== HERO SAFE-AREA STICKER ===== */
.hero-sticker{
  position:absolute;
  top:max(104px, calc(50vh - 313px)); right:max(12px, calc(50vw - 379px));
  z-index:3;
  width:120px; height:120px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:0;
  transform:rotate(-14deg) scale(.4) translateY(20px);
  animation:stickerPop .9s 1.1s cubic-bezier(.34,1.56,.64,1) forwards,
            stickerWobble 4.5s 2.2s ease-in-out infinite;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));
}
@keyframes stickerPop{
  to{opacity:1; transform:rotate(-14deg) scale(1) translateY(0)}
}
@keyframes stickerWobble{
  0%,100%{transform:rotate(-14deg) scale(1)}
  50%{transform:rotate(-9deg) scale(1.05)}
}
.sticker-disc{
  width:100%; height:100%;
  border-radius:50%;
  background:var(--orange);
  border:2px solid #fff;
  box-shadow:
    inset 0 0 0 4px var(--orange),
    inset 0 0 0 6px #fff,
    inset 0 0 0 8px var(--orange),
    0 6px 18px rgba(220,104,45,.4);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  font-family:'Fredoka', sans-serif;
  color:#fff;
  padding:10px 8px;
  position:relative;
}
.sticker-disc::before, .sticker-disc::after{
  content:"✨";
  position:absolute;
  font-size:.64rem;
  opacity:.95;
}
.sticker-disc::before{top:14px; left:18px}
.sticker-disc::after{bottom:14px; right:18px}
.sticker-top{
  font-size:.52rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.92;
  margin-bottom:3px;
}
.sticker-big{
  font-size:.95rem;
  font-weight:700;
  line-height:1.05;
}
.sticker-amp{
  font-size:.75rem;
  font-weight:600;
  color:#FFF8F0;
  margin:1px 0;
  font-family:'Fredoka', sans-serif;
  font-style:italic;
}
@media(max-width:760px){
  .hero{padding-top:220px}
  .hero-sticker{width:88px; height:88px; top:245px; right:12px; left:auto}
  .sticker-big{font-size:.75rem}
  .sticker-top{font-size:.48rem; margin-bottom:1px}
  .sticker-amp{font-size:.65rem; margin:0}
  .sticker-disc::before, .sticker-disc::after{font-size:.53rem}
  .sticker-disc::before{top:9px; left:13px}
  .sticker-disc::after{bottom:9px; right:13px}
}
@media(max-width:420px){
  .hero{padding-top:205px}
  .hero-sticker{width:72px; height:72px; top:225px; right:10px; left:auto}
  .sticker-big{font-size:.62rem}
  .sticker-top{display:none}
  .sticker-disc::before, .sticker-disc::after{display:none}
}

/* ===== Press "Bekannt aus" ===== */
.press{
  position:relative; z-index:2;
  margin-top:52px;
  display:inline-flex; align-items:center; gap:22px;
  flex-wrap:wrap;
  justify-content:center;
  opacity:0; transform:translateY(20px);
  animation:rise .9s .7s forwards ease-out;
}
.press-label{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#fff;
  display:flex; align-items:center; gap:14px;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.press-label::after{
  content:""; width:1px; height:22px; background:rgba(255,255,255,.35);
}
.press-logos{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center;
}
.press-logos img{
  height:46px; width:auto;
  background:#fff;
  padding:8px 14px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  opacity:1;
  transition:transform .25s ease, box-shadow .25s ease;
}
.press-logos a:hover img, .press-logos img:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
@media(max-width:520px){
  .press{padding:12px 18px; gap:14px}
  .press-label{font-size:.78rem; letter-spacing:.18em}
  .press-label::after{height:18px}
  .press-logos img{height:52px; padding:8px 16px}
}
@media(max-width:520px){
  .press-label::before, .press-label::after{display:none}
  .press-logos img{height:44px; padding:7px 14px}
}

.hero-bottom{
  position:relative; z-index:2;
  margin-top:36px;
  display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  font-family:'Fredoka', sans-serif; font-weight:500;
  color:rgba(255,255,255,.85); font-size:.95rem;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
  opacity:0; transform:translateY(20px); animation:rise 1s .9s forwards ease-out;
}
.hero-bottom .stat strong{
  display:block; font-size:1.6rem; color:#FFB070;
  font-weight:700;
  text-shadow:0 1px 12px rgba(220,104,45,.4);
}
.hero-bottom .stat{ text-align:center; }
@media(max-width:760px){
  .hero-bottom{
    flex-wrap:nowrap;
    gap:14px;
    padding:0 12px;
    font-size:.78rem;
    line-height:1.25;
  }
  .hero-bottom .stat{ flex:1 1 0; min-width:0; }
  .hero-bottom .stat strong{ font-size:1.25rem; }
}
@media(max-width:420px){
  .hero-bottom{
    gap:8px;
    padding:0 8px;
    font-size:.68rem;
  }
  .hero-bottom .stat strong{ font-size:1.05rem; }
}

/* ===== Scroll reveal ===== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:translateY(0)}
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.3s}

/* ===== Section header ===== */
.section-head{text-align:center; max-width:680px; margin:0 auto 56px}
.section-head p{color:var(--ink-soft); font-size:1.1rem; margin-top:8px}

/* ===== GESCHICHTE ===== */
.story-grid{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:60px;
  align-items:start;
}
@media(max-width:880px){.story-grid{grid-template-columns:1fr; gap:40px}}

.timeline{
  position:relative;
  padding-left:32px;
  border-left:3px dashed var(--orange-soft);
}
.tl-item{position:relative; padding-bottom:36px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:""; position:absolute; left:-43px; top:6px;
  width:22px; height:22px; border-radius:50%;
  background:var(--orange); border:4px solid var(--cream);
  box-shadow:0 0 0 3px var(--orange-soft);
}
.tl-item.green::before{background:var(--green); box-shadow:0 0 0 3px var(--green-soft)}
.tl-year{
  font-family:'Fredoka', sans-serif; font-weight:700;
  font-size:1.7rem; color:var(--orange); line-height:1; margin-bottom:6px;
}
.tl-item.green .tl-year{color:var(--green-dark)}
.tl-title{font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.05rem; margin-bottom:4px}
.tl-text{color:var(--ink-soft); font-size:.97rem; margin:0}

/* === EDITABLE: Geschichte-Texte — owner can edit the three paragraphs in the HTML === */
.story-text p{
  font-size:1.08rem;
  color:var(--ink-soft);
  margin-bottom:1.1em;
}
.story-text p::first-letter{
  font-family:'Fredoka', sans-serif;
}
.story-quote{
  border-left:4px solid var(--green);
  padding:6px 0 6px 20px;
  margin:24px 0;
  font-family:'Fredoka', sans-serif;
  font-weight:500;
  font-size:1.15rem;
  color:var(--ink);
}

/* ===== SÄFTE — Variety showcase ===== */
.variety-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-bottom:48px;
}
@media(max-width:880px){.variety-grid{grid-template-columns:1fr; max-width:520px; margin:0 auto 48px}}

.variety-card{
  position:relative;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:32px 28px 28px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(42,33,24,.05);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s;
  display:flex; flex-direction:column;
}
.variety-card::before{
  content:"";
  position:absolute;
  inset:auto -30% -30% auto;
  width:60%; aspect-ratio:1;
  border-radius:50%;
  opacity:.5;
  transition:transform .5s ease, opacity .3s ease;
}
.variety-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--orange-soft)}
.variety-card:hover::before{transform:scale(1.2) translate(-8%, -8%); opacity:.75}
.variety-saft::before{background:var(--orange-soft)}
.variety-smoothie::before{background:var(--green-soft)}
.variety-bowl::before{background:#f3d8a8}

.variety-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:12px;
  position:relative; z-index:2;
}
.variety-icon{
  font-size:2rem;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px;
  background:var(--cream);
  transition:transform .3s ease;
}
.variety-card:hover .variety-icon{transform:rotate(-8deg) scale(1.05)}
.variety-head h3{margin:0; font-size:1.5rem}

.variety-desc{
  position:relative; z-index:2;
  color:var(--ink-soft);
  font-size:.98rem;
  margin:0 0 18px;
  flex:1;
}
.variety-chips{
  position:relative; z-index:2;
  list-style:none; padding:0; margin:0 0 18px;
  display:flex; flex-wrap:wrap; gap:6px;
}
.variety-chips li{
  background:var(--cream);
  color:var(--ink);
  font-size:.82rem;
  font-weight:700;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(42,33,24,.06);
  white-space:nowrap;
  transition:background .25s, color .25s, transform .25s;
}
.variety-card .variety-chips li:nth-child(3n){background:#fff}
.variety-card:hover .variety-chips li:hover{transform:translateY(-2px)}
.variety-saft .variety-chips li:hover{background:var(--orange-soft); color:var(--orange-dark)}
.variety-smoothie .variety-chips li:hover{background:var(--green-soft); color:var(--green-dark)}
.variety-bowl .variety-chips li:hover{background:#f3d8a8; color:#9a5e1f}

.variety-foot{
  position:relative; z-index:2;
  font-family:'Fredoka', sans-serif;
  font-size:.85rem; font-weight:600;
  color:var(--ink-soft);
  padding-top:14px;
  border-top:1px dashed rgba(42,33,24,.1);
  display:flex; align-items:center; gap:8px;
}
.variety-foot::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px var(--green-soft);
  flex:none;
}

/* ===== Ingredient marquee ===== */
.ingredient-marquee{
  position:relative;
  margin:0 -24px 48px;
  overflow:hidden;
  padding:8px 0;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; gap:14px;
  width:max-content;
  animation:marquee 50s linear infinite;
}
.marquee-track span{
  flex:none;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:1rem;
  padding:10px 18px;
  background:#fff;
  border:1px solid rgba(42,33,24,.08);
  border-radius:999px;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.ingredient-marquee:hover .marquee-track{animation-play-state:paused}

/* ===== Recipe hook panel ===== */
.recipe-hook{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  background:linear-gradient(135deg, var(--cream) 0%, #fff 60%);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(42,33,24,.05);
}
@media(max-width:760px){.recipe-hook{grid-template-columns:1fr}}
.recipe-hook-art{
  position:relative;
  /* Placeholder background while video loads — warm cream gradient matching brand */
  background:
    linear-gradient(135deg, #FFF8F0 0%, #FAEDD8 45%, #F4D2A8 100%);
  min-height:280px;
  overflow:hidden;
}
.recipe-hook-art::before{
  /* Subtle shimmer to signal loading; fades out once video plays */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 30% 40%, rgba(220,104,45,.12), transparent 70%),
    radial-gradient(50% 50% at 75% 70%, rgba(124,176,78,.10), transparent 70%);
  opacity:1;
  transition:opacity 1.2s ease;
  pointer-events:none;
  animation:hookPulse 4s ease-in-out infinite;
}
@keyframes hookPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}
.recipe-hook-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:1;
  transition:opacity 1.6s ease;
}
.recipe-hook-body{
  padding:44px 44px 44px 40px;
  display:flex; flex-direction:column; gap:20px;
  align-items:flex-start;
  min-width:0;
}
@media(max-width:760px){.recipe-hook-body{padding:32px 28px}}
.recipe-hook-body .eyebrow{white-space:nowrap; margin-bottom:0}
.recipe-hook-body h3{
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  margin:0;
  line-height:1.2;
}
.recipe-hook-body p{color:var(--ink-soft); font-size:1.05rem; margin:0}
.recipe-steps{
  display:flex; gap:16px;
  margin:8px 0 4px;
  flex-wrap:wrap;
}
.recipe-steps .step{display:flex; align-items:center; gap:10px}
.recipe-steps .step-num{
  width:34px; height:34px; border-radius:50%;
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka', sans-serif; font-weight:700;
  font-size:1rem;
  box-shadow:0 4px 10px rgba(220,104,45,.35);
}
.recipe-steps .step:nth-child(2) .step-num{background:var(--green); box-shadow:0 4px 10px rgba(124,176,78,.35)}
.recipe-steps .step:nth-child(3) .step-num{background:var(--ink)}
.recipe-steps .step-text{
  font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:.95rem;
  color:var(--ink);
}

/* ===== BÜRO & EVENTS (Vorbestellen) ===== */
.booking-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:stretch;
}
@media(max-width:920px){.booking-grid{grid-template-columns:1fr}}

.booking-pitch{
  background:linear-gradient(160deg, var(--ink) 0%, #3a2d1f 60%, #4a3825 100%);
  border-radius:var(--radius-lg);
  padding:44px 40px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
}
.booking-pitch::before{
  content:"";
  position:absolute;
  top:-80px; right:-60px;
  width:280px; height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(220,104,45,.45), transparent 70%);
  filter:blur(8px);
  pointer-events:none;
}
.booking-pitch::after{
  content:"";
  position:absolute;
  bottom:-100px; left:-60px;
  width:240px; height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,176,78,.32), transparent 70%);
  filter:blur(10px);
  pointer-events:none;
}
.booking-pitch > *{position:relative; z-index:2}
.booking-pitch h2{color:#fff; margin:14px 0 12px; font-size:clamp(1.8rem, 3.2vw, 2.4rem)}
.booking-pitch .eyebrow{background:rgba(220,104,45,.22); color:#FFB070; align-self:flex-start}
.booking-pitch .sub{
  color:rgba(255,255,255,.85);
  font-size:1.08rem; line-height:1.55;
  margin:0 0 28px;
}

.booking-benefits{
  list-style:none; padding:0; margin:0 0 32px;
  display:flex; flex-direction:column; gap:16px;
}
.booking-benefits li{
  display:flex; align-items:flex-start; gap:14px;
  color:#fff;
  font-weight:600;
  font-size:1rem;
}
.bb-icon{
  flex:none;
  width:42px; height:42px;
  border-radius:13px;
  background:var(--green);
  border:1px solid var(--green);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  font-weight:700;
}
.bb-text{padding-top:10px}

.phone-cta{
  display:flex; align-items:center; gap:18px;
  background:#fff;
  border-radius:18px;
  padding:18px 22px 18px 18px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  color:var(--ink);
  transition:transform .2s ease, box-shadow .25s ease;
  margin-top:auto;
}
.phone-cta:hover{transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,0,0,.34)}
.phone-cta-icon{
  flex:none;
  width:54px; height:54px; border-radius:50%;
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  box-shadow:0 6px 14px rgba(220,104,45,.45);
  animation:phonePulse 2.2s ease-in-out infinite;
}
@keyframes phonePulse{
  0%, 100%{box-shadow:0 6px 14px rgba(220,104,45,.45), 0 0 0 0 rgba(220,104,45,.5)}
  50%{box-shadow:0 6px 14px rgba(220,104,45,.45), 0 0 0 14px rgba(220,104,45,0)}
}
.phone-cta-text{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.phone-cta-text .small{
  font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange-dark);
}
.phone-cta-text .big{
  font-family:'Fredoka', sans-serif; font-weight:700;
  font-size:1.35rem;
  color:var(--ink);
  white-space:nowrap;
}
@media(max-width:520px){
  .phone-cta-text .big{font-size:1.15rem}
  .booking-pitch{padding:36px 28px}
}

/* ===== Form ===== */
.booking-form-card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:40px 36px;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(42,33,24,.06);
  display:flex; flex-direction:column;
}
@media(max-width:520px){.booking-form-card{padding:32px 24px}}
.booking-form-card .form-head{margin-bottom:24px}
.booking-form-card .form-head h3{
  font-size:1.5rem; margin:0 0 6px;
  display:flex; align-items:center; gap:10px;
}
.booking-form-card .form-head h3::before{
  content:"";
  width:10px; height:10px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px var(--green-soft);
  flex:none;
}
.booking-form-card .form-head p{
  color:var(--ink-soft);
  font-size:.95rem;
  margin:0;
}

.booking-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-field{display:flex; flex-direction:column; gap:6px; position:relative}
.form-field.full{grid-column:span 2}
@media(max-width:520px){
  .booking-form{grid-template-columns:1fr}
  .form-field.full{grid-column:span 1}
}
.form-field label{
  font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:.85rem;
  color:var(--ink);
}
.form-field label .req{color:var(--orange); margin-left:2px}
.form-field input,
.form-field textarea,
.form-field select{
  font:inherit;
  font-size:.98rem;
  padding:12px 14px;
  border-radius:12px;
  border:1.5px solid rgba(42,33,24,.12);
  background:var(--cream);
  color:var(--ink);
  transition:border-color .2s, background .2s, box-shadow .2s;
  font-family:'Nunito', sans-serif;
  width:100%;
}
.form-field textarea{min-height:90px; resize:vertical}
.form-field input:hover,
.form-field textarea:hover{border-color:rgba(42,33,24,.25)}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline:none;
  border-color:var(--orange);
  background:#fff;
  box-shadow:0 0 0 4px rgba(220,104,45,.15);
}
.form-field.has-error input,
.form-field.has-error textarea{
  border-color:#c8492a;
  background:#fdf1ec;
}
.form-field .err{
  display:none;
  font-size:.82rem;
  color:#c8492a;
  font-weight:600;
  margin-top:2px;
}
.form-field.has-error .err{display:block}

.form-submit{
  grid-column:span 2;
  margin-top:8px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
@media(max-width:520px){.form-submit{grid-column:span 1}}
.form-submit .btn{padding:16px 28px}
.form-meta{
  font-size:.85rem;
  color:var(--ink-soft);
  line-height:1.5;
  text-align:center;
}
.form-meta strong{color:var(--ink)}

/* Success state */
.form-success{
  display:none;
  text-align:center;
  padding:24px 20px;
  animation:successIn .5s ease;
}
.form-success.shown{display:block}
.booking-form.hidden{display:none}
.form-success .check{
  width:72px; height:72px; border-radius:50%;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
  font-size:2.2rem;
  box-shadow:0 10px 24px rgba(124,176,78,.4);
  animation:checkBounce .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes checkBounce{
  0%{transform:scale(.3); opacity:0}
  100%{transform:scale(1); opacity:1}
}
@keyframes successIn{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
.form-success h3{margin:0 0 8px; font-size:1.4rem}
.form-success p{color:var(--ink-soft); margin:0 0 18px; font-size:1rem}
.form-success .reset{
  font-family:'Fredoka', sans-serif; font-weight:600;
  color:var(--orange-dark); font-size:.92rem;
  border-bottom:2px solid var(--orange-soft); padding-bottom:1px;
}
.form-success .reset:hover{border-color:var(--orange)}

/* ===== STIMMEN (Reviews) ===== */
.reviews-wrap{
  position:relative;
  max-width:760px;
  margin:0 auto;
}
.review-summary{
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap;
  margin-bottom:34px;
}
.review-score{
  display:flex; align-items:baseline; gap:8px;
  font-family:'Fredoka', sans-serif;
}
.review-score .num{font-size:2.4rem; font-weight:700; color:var(--ink); line-height:1}
.review-score .max{color:var(--ink-soft); font-weight:600}
.review-stars{display:inline-flex; gap:3px; color:#F5A623; font-size:1.2rem; line-height:1}
.review-meta{
  font-family:'Nunito', sans-serif;
  font-size:.92rem;
  color:var(--ink-soft);
  display:flex; gap:6px; align-items:center;
}
.google-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff;
  border:1px solid rgba(42,33,24,.1);
  border-radius:999px;
  padding:6px 14px 6px 8px;
  box-shadow:var(--shadow-sm);
  font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:.85rem;
  color:var(--ink);
  white-space:nowrap;
}
.google-G{
  width:22px; height:22px; border-radius:50%;
  background:
    conic-gradient(from -45deg,
      #4285F4 0 25%,
      #34A853 25% 50%,
      #FBBC05 50% 75%,
      #EA4335 75% 100%);
  position:relative;
  display:inline-block;
  flex:none;
}
.google-G::after{
  content:"G";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:.85rem;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
}

.review-stage{
  position:relative;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:48px 56px 40px;
  min-height:280px;
  overflow:hidden;
  border:1px solid rgba(42,33,24,.05);
}
.review-stage::before{
  content:"\201C";
  position:absolute;
  top:-30px; left:24px;
  font-family:'Fredoka', sans-serif;
  font-size:11rem; line-height:1;
  color:var(--orange-soft);
  font-weight:700;
  user-select:none;
  pointer-events:none;
}
@media(max-width:640px){
  .review-stage{padding:40px 24px 30px}
  .review-stage::before{font-size:7rem; top:-10px; left:14px}
}

.review-slide{
  position:absolute;
  inset:48px 56px 40px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s ease, transform .55s ease;
  pointer-events:none;
  display:flex; flex-direction:column;
}
@media(max-width:640px){
  .review-slide{inset:40px 24px 30px}
}
.review-slide.active{opacity:1; transform:translateY(0); pointer-events:auto; position:relative; inset:auto}
.review-stars-row{display:inline-flex; gap:3px; color:#F5A623; font-size:1.05rem; margin-bottom:14px}
.review-text{
  font-size:1.15rem;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 22px;
  font-weight:500;
  flex:1;
}
@media(max-width:640px){.review-text{font-size:1rem}}
.review-author{
  display:flex; align-items:center; gap:14px;
  margin-top:auto;
}
.review-avatar{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka', sans-serif; font-weight:700;
  color:#fff; font-size:1.05rem;
  flex:none;
  background:var(--orange);
  overflow:hidden;
}
.review-avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.review-slide:nth-child(2n) .review-avatar{background:var(--green)}
.review-slide:nth-child(3n) .review-avatar{background:#c2842d}
.review-name{font-family:'Fredoka', sans-serif; font-weight:600; font-size:1rem; color:var(--ink); line-height:1.2}
.review-when{font-size:.85rem; color:var(--ink-soft)}

.review-controls{
  margin-top:20px;
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.review-dots{display:flex; gap:8px}
.review-dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(42,33,24,.18);
  border:0; padding:0; cursor:pointer;
  transition:background .2s, transform .2s, width .25s;
}
.review-dot:hover{background:rgba(42,33,24,.35)}
.review-dot.active{background:var(--orange); width:24px; border-radius:5px}
.review-arrow{
  width:38px; height:38px; border-radius:50%;
  background:#fff;
  border:1px solid rgba(42,33,24,.1);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:1rem; font-weight:700;
  transition:background .2s, color .2s, transform .2s;
}
.review-arrow:hover{background:var(--orange); color:#fff; transform:translateY(-1px)}

.reviews-cta{
  text-align:center;
  margin-top:38px;
}
.review-cta-btn{
  display:inline-flex; align-items:center; gap:12px;
  background:#fff;
  color:var(--ink);
  font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:1.02rem;
  padding:14px 26px 14px 18px;
  border-radius:999px;
  border:1px solid rgba(42,33,24,.08);
  box-shadow:0 8px 22px rgba(42,33,24,.12), 0 1px 3px rgba(42,33,24,.06);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.review-cta-btn .google-G{ width:26px; height:26px; }
.review-cta-btn .google-G::after{ font-size:1rem; }
.review-cta-btn .arrow{
  display:inline-block; transition:transform .2s ease;
  color:var(--orange);
}
.cta-heart{
  display:inline-block;
  color:#E2434B;
  margin-left:4px;
  transform-origin:center;
  animation:ctaHeartBeat 1.6s ease-in-out infinite;
}
@keyframes ctaHeartBeat{
  0%, 60%, 100%{ transform:scale(1); }
  15%{ transform:scale(1.22); }
  30%{ transform:scale(.96); }
  45%{ transform:scale(1.12); }
}
.review-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(42,33,24,.18), 0 2px 4px rgba(42,33,24,.08);
  background:#fffaf2;
}
.review-cta-btn:hover .arrow{ transform:translate(3px,-3px); }
.review-cta-note{
  display:block;
  margin-top:14px;
  font-family:'Nunito', sans-serif;
  font-size:.9rem;
  color:var(--ink-soft);
}
@media(max-width:480px){
  .review-cta-btn{ font-size:.94rem; padding:12px 22px 12px 16px; gap:10px; }
  .review-cta-btn .google-G{ width:22px; height:22px; }
  .review-cta-btn .google-G::after{ font-size:.85rem; }
}

/* ===== GALERIE ===== */
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:220px;
  gap:14px;
}
@media(max-width:860px){.gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:200px}}
@media(max-width:480px){.gallery{grid-template-columns:1fr; grid-auto-rows:220px}}

.gallery .g{
  border-radius:var(--radius);
  overflow:hidden;
  cursor:zoom-in;
  position:relative;
  background:#eee;
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex; align-items:flex-end;
  border:0; padding:0;
}
.gallery .g:hover{transform:scale(1.02); box-shadow:var(--shadow-md); z-index:2}
.gallery .g img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.gallery .g:hover img{transform:scale(1.06)}
.gallery .g .label{
  position:relative; z-index:2;
  width:100%;
  padding:16px 18px;
  color:#fff;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:.95rem;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 100%);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  pointer-events:none;
}

/* Asymmetric 4-image layout */
.gallery .g-wide{grid-column:span 2; grid-row:span 2}
.gallery .g-full{grid-column:span 3}
@media(max-width:860px){
  .gallery .g-wide{grid-column:span 2; grid-row:span 1}
  .gallery .g-full{grid-column:span 2}
}
@media(max-width:480px){
  .gallery .g-wide,
  .gallery .g-full{grid-column:span 1}
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(20,15,10,.86);
  display:none; align-items:center; justify-content:center;
  padding:24px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.lightbox.open{display:flex; animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox-content{
  max-width:1000px; max-height:80vh; width:100%;
  aspect-ratio:4/3;
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  position:relative;
}
.lightbox-close{
  position:absolute; top:-50px; right:0;
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--ink);
  font-size:1.4rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-label{
  position:absolute; bottom:20px; left:24px; right:24px;
  color:#fff;
  font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:1.1rem;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

/* ===== STANDORT ===== */
.location-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:stretch;
}
@media(max-width:860px){.location-grid{grid-template-columns:1fr}}

.map-card{
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column;
}
.map-iframe{
  width:100%; height:320px; border:0; display:block;
}
.contact-info{padding:24px 28px}
.contact-row{
  display:flex; gap:14px; align-items:flex-start;
  padding:12px 0;
  border-bottom:1px dashed rgba(42,33,24,.1);
}
.contact-row:last-of-type{border-bottom:0}
.contact-row .icon{
  width:42px; height:42px; flex:none;
  border-radius:12px;
  background:var(--orange-soft); color:var(--orange-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.contact-row .icon.green{background:var(--green-soft); color:var(--green-dark)}
.contact-row .lbl{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px}
.contact-row .val{font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink)}
.contact-row a.val:hover{color:var(--orange)}

.route-link{
  display:inline-flex; gap:8px; align-items:center;
  margin-top:18px;
  color:var(--green-dark); font-weight:700;
  border-bottom:2px solid var(--green-soft);
  padding-bottom:2px;
  transition:border-color .2s, color .2s;
}
.route-link:hover{color:var(--orange); border-color:var(--orange)}

.hours-card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:34px 32px;
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column;
}
.hours-card h3{font-size:1.4rem; margin-bottom:18px; display:flex; align-items:center; gap:10px}
.hours-card h3::before{
  content:""; width:12px; height:12px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px var(--green-soft);
}
.hours-table{
  width:100%; border-collapse:collapse;
}
.hours-table td{
  padding:13px 4px;
  border-bottom:1px dashed rgba(42,33,24,.1);
  font-size:1rem;
}
.hours-table tr:last-child td{border-bottom:0}
.hours-table .day{font-family:'Fredoka', sans-serif; font-weight:600; color:var(--ink)}
.hours-table .hrs{text-align:right; color:var(--ink-soft); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.hours-table .closed .hrs{color:#b14a2b}
.hours-table tr.today{
  background:linear-gradient(90deg, var(--cream-deep), transparent);
  border-radius:12px;
}
.hours-table tr.today td{border-bottom-color:transparent}
.hours-table tr.today .day,
.hours-table tr.today .hrs{color:var(--orange-dark)}
.hours-status{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:10px;
  font-family:'Fredoka', sans-serif;
  font-size:.78rem; font-weight:600;
  padding:4px 11px 4px 10px;
  border-radius:999px;
  vertical-align:middle;
  letter-spacing:.01em;
  white-space:nowrap;
}
.hours-status::before{
  content:""; width:8px; height:8px; border-radius:50%;
  flex:none;
}
.hours-status.open{ background:var(--green-soft); color:var(--green-dark); }
.hours-status.open::before{ background:var(--green); box-shadow:0 0 0 3px rgba(124,176,78,.25); }
.hours-status.soon{ background:#fde9c8; color:#8a5a1a; }
.hours-status.soon::before{ background:#e6a23c; box-shadow:0 0 0 3px rgba(230,162,60,.25); }
.hours-status.shut{ background:var(--orange-soft); color:var(--orange-dark); }
.hours-status.shut::before{ background:var(--orange-dark); box-shadow:0 0 0 3px rgba(184,82,31,.18); }
@media (max-width:640px){
  .hours-status{ font-size:.72rem; padding:3px 9px; margin-left:6px; }
}
.hours-note{
  margin-top:18px;
  padding:12px 16px;
  background:var(--cream);
  border-radius:14px;
  font-size:.88rem;
  color:var(--ink-soft);
  display:flex; gap:8px; align-items:flex-start;
}
.hours-note::before{content:"ℹ"; color:var(--orange); font-weight:700; font-size:1.1rem; line-height:1}

/* ===== FOOTER ===== */
footer{
  background:var(--ink);
  color:#e9e1d3;
  padding:64px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
@media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr; gap:30px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

footer .footer-logo{
  background:#fff; border-radius:18px; padding:6px 10px;
  display:inline-block;
}
footer .footer-logo img{height:84px; width:auto; display:block}
footer h4{
  color:#fff;
  font-family:'Fredoka', sans-serif;
  font-size:1rem;
  margin-bottom:14px;
  font-weight:600;
}
footer p, footer li{font-size:.92rem; line-height:1.7; color:#cdbfa8; margin:0}
footer ul{list-style:none; padding:0; margin:0}
footer a{color:#cdbfa8; transition:color .2s}
footer a:hover{color:var(--orange-soft)}
.social{display:flex; gap:10px; margin-top:10px}
.social a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:700; color:#fff;
  font-family:'Fredoka', sans-serif;
  transition:background .2s, transform .2s;
}
.social a:hover{background:var(--orange); transform:translateY(-2px)}
.copyright{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.85rem; color:#b0a090;
}
.made-by{display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.28); font-size:.78rem}
.made-by a{display:flex; align-items:center; opacity:.55; transition:opacity .2s}
.made-by a:hover{opacity:1}
.made-by img{height:22px; width:auto; display:block}

/* ===== Legal Modals (Impressum + Datenschutz) ===== */
.legal-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-start; justify-content:center;
  background:rgba(42,33,24,.65);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  overflow-y:auto;
  padding:40px 20px 60px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.legal-modal.open{opacity:1; pointer-events:auto}
.legal-modal-inner{
  background:#fff;
  border-radius:var(--radius-lg);
  max-width:760px;
  width:100%;
  padding:52px 56px;
  position:relative;
  box-shadow:var(--shadow-lg);
  margin:auto;
}
.legal-modal-close{
  position:absolute; top:20px; right:20px;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--cream);
  font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .2s;
}
.legal-modal-close:hover{background:var(--orange-soft); transform:scale(1.1)}
.legal-modal h2{font-size:1.9rem; margin-bottom:28px; padding-right:44px}
.legal-modal h3{
  font-size:1rem; font-weight:700;
  color:var(--orange-dark);
  margin:28px 0 8px;
  font-family:'Nunito', sans-serif;
  letter-spacing:0;
}
.legal-modal h3:first-of-type{margin-top:0}
.legal-modal p,.legal-modal li{font-size:.93rem; line-height:1.75; color:var(--ink-soft); margin:0 0 .6em}
.legal-modal ul{padding-left:20px; margin:0 0 .8em}
.legal-modal a{color:var(--orange-dark); text-decoration:underline; text-underline-offset:2px}
.legal-modal a:hover{color:var(--orange)}
@media(max-width:640px){
  .legal-modal{padding:20px 12px 40px}
  .legal-modal-inner{padding:36px 24px}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important}
  .hero::before, .fruit{animation:none !important}
}