:root{
    --dark-green:#2f3d28;
    --beige:#e2d2ac;
    --beige-deep:#8f6d3f;
    --beige-darkest:#6b4f30;
    --cream:#f0e6d2;
    --ink:#2a2a24;
    --white:#ffffff;
    --radius:2px;
    --blend-1:linear-gradient(135deg, rgba(226,210,172,.65), rgba(143,109,63,.28));
    --blend-2:linear-gradient(135deg, rgba(226,210,172,.55), rgba(143,109,63,.16));
    --blend-3:linear-gradient(180deg, var(--cream), var(--beige));
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html{scroll-behavior:smooth;scroll-padding-top:80px;}
  /* Verhindert, dass iOS Safari die Seite eigenmächtig auto-skaliert
     (Textgrößen-Anpassung), was sich wie "beim Öffnen falsch gezoomt"
     anfühlen kann. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

  body{
    font-family:'Jost', sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    font-weight:400;
  }

  h1,h2,h3,.serif{
    font-family:'Playfair Display', serif;
    font-weight:600;
    color:var(--dark-green);
  }

  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}
  .container{max-width:1140px;margin:0 auto;padding:0 32px;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-block;
    padding:14px 32px;
    border-radius:var(--radius);
    font-family:'Jost',sans-serif;
    font-size:15px;
    letter-spacing:.06em;
    text-transform:uppercase;
    border:1.5px solid var(--dark-green);
    transition:all .25s ease;
    cursor:pointer;
  }
  .btn-primary{
    background:var(--dark-green);
    color:var(--cream);
  }
  .btn-primary:hover{
    background:var(--beige-deep);
    border-color:var(--beige-deep);
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
  }
  .btn-outline{
    background:transparent;
    color:var(--dark-green);
  }
  .btn-outline:hover{
    background:var(--dark-green);
    color:var(--cream);
    transform:translateY(-2px);
  }
  .btn-cream{
    border-color:var(--cream);
    color:var(--cream);
  }
  .btn-cream:hover{
    background:var(--beige-deep);
    border-color:var(--beige-deep);
    color:var(--cream);
    transform:translateY(-2px);
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    background:rgba(240,230,210,.28);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(240,230,210,.15);
  }
  .nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 32px;
    max-width:1140px;
    margin:0 auto;
  }
  .logo-mark{height:40px;}
  nav ul{
    display:flex;
    gap:38px;
    list-style:none;
  }
  nav ul li a{
    font-size:14px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--dark-green);
    position:relative;
    padding-bottom:4px;
  }
  nav ul li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0%;
    height:1.5px;
    background:var(--beige-deep);
    transition:width .3s ease;
  }
  nav ul li a:hover::after{width:100%;}
  .nav-cta{display:flex;align-items:center;gap:28px;}
  .nav-cta .btn{padding:10px 22px;font-size:13px;}

  .burger{display:none;font-size:26px;background:none;border:none;color:var(--dark-green);cursor:pointer;}
  .nav-shop-mobile{display:none;}
  .nav-lang-mobile{display:none;}

  .lang-switch{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.03em;color:#8b8b7d;}
  .lang-switch .lang-current{color:var(--dark-green);font-weight:600;}
  .lang-switch a{color:#8b8b7d;transition:color .2s ease;}
  .lang-switch a:hover{color:var(--dark-green);}
  .lang-switch .sep{color:#cbbfa0;}

  /* ---------- Schmales Ankündigungs-Banner: hängt fest unter dem
     fixierten Header (Web UND Mobil) und bewegt sich beim Scrollen mit
     dem Menü mit, statt mit der Seite wegzuscrollen. body braucht
     entsprechend Platz in Höhe von Header + Banner zusammen (beide Werte
     werden per JS gemessen, siehe --header-h/--banner-h), damit der
     fixierte Block nichts verdeckt. Auf Mobil wird das weiter unten
     gezielt wieder auf 0 gesetzt, da dort stattdessen das Hero-Bild
     bewusst bis unter Header+Banner reicht. ---------- */
  body{padding-top:calc(var(--header-h, 74px) + var(--banner-h, 58px));}
  .aromaneo-banner{
    position:fixed;
    top:var(--header-h, 74px);
    left:0;
    right:0;
    z-index:90;
    overflow:hidden;
    background:var(--dark-green);
    color:var(--cream);
    text-align:center;
    padding:9px 20px;
    font-family:'Jost',sans-serif;
    font-size:12.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .aromaneo-banner strong{color:var(--beige);font-weight:600;}
  .aromaneo-banner .banner-text{position:relative;z-index:1;}
  /* Kleine, helle Rosmarin-/Oregano-Blätter, die dezent durchs Banner
     fallen. Emoji lassen sich nicht direkt umfärben, deshalb per Filter
     (entsättigt + aufgehellt + leicht sepiafarben) auf ein helles Beige
     getrimmt statt im natürlichen Grün. */
  .aromaneo-banner .leaf{
    position:absolute;
    top:-30%;
    font-size:10px;
    line-height:1;
    pointer-events:none;
    filter:grayscale(1) brightness(1.9) sepia(.4);
    opacity:.45;
    z-index:0;
    animation:aromaneoLeafFall linear infinite;
  }
  /* Sanftes Wehen/Fliegen statt geradem Fallen: Blätter driften seitlich
     hin und her, während sie durchs Banner ziehen. */
  @keyframes aromaneoLeafFall{
    0%{transform:translate(0,0) rotate(0deg);opacity:0;}
    12%{opacity:.5;}
    30%{transform:translate(12px,70%) rotate(35deg);}
    55%{transform:translate(-14px,140%) rotate(-15deg);}
    80%{transform:translate(10px,205%) rotate(45deg);}
    88%{opacity:.5;}
    100%{transform:translate(-8px,260%) rotate(20deg);opacity:0;}
  }
  @media (max-width:780px){
    .aromaneo-banner{font-size:11px;padding:8px 14px;}
    .aromaneo-banner .leaf{font-size:8px;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 32px 100px;
    text-align:center;
    color:var(--cream);
    overflow:hidden;
  }
  .hero-slides{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1.8s ease;
  }
  .hero-slide.active{opacity:1;}
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(ellipse 60% 55% at 50% 38%, rgba(20,18,12,.60), rgba(20,18,12,.05) 70%),
      linear-gradient(180deg, rgba(30,28,20,.42), rgba(30,28,20,.52));
  }
  .hero-content{
    position:relative;
    z-index:2;
  }
  .hero .logo-hero-wrap{
    position:relative;
    display:inline-block;
    margin:0 auto 28px;
  }
  .hero .logo-hero{
    position:relative;
    z-index:1;
    height:clamp(100px, 24vw, 190px);
    display:block;
  }
  .hero-eyebrow{
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:13px;
    color:var(--beige-deep);
    margin-bottom:18px;
    font-weight:500;
  }
  .hero .hero-eyebrow{color:var(--beige);font-size:clamp(12px, 3vw, 16px);}
  .hero h1{
    font-size:clamp(32px,5vw,54px);
    max-width:820px;
    margin:0 auto 22px;
    line-height:1.2;
    color:var(--cream);
  }
  .hero p.lead{
    max-width:560px;
    margin:0 auto 38px;
    font-size:17px;
    color:var(--cream);
    opacity:.92;
  }
  .hero-actions{
    display:flex;
    gap:18px;
    justify-content:center;
    flex-wrap:wrap;
  }

  @media (min-width:860px){
    .hero-content{
      display:flex;
      align-items:center;
      gap:64px;
      max-width:1080px;
      margin:0 auto;
      text-align:left;
    }
    .hero-content .logo-hero-wrap{
      margin:0;
      flex-shrink:0;
    }
    .hero-content .hero-text{flex:1;}
    .hero-content .hero-eyebrow{margin-bottom:16px;}
    .hero-content h1{margin:0 0 22px;max-width:none;}
    .hero-content p.lead{margin:0 0 34px;max-width:480px;}
    .hero-content .hero-actions{justify-content:flex-start;}
  }

  /* ---------- Story ---------- */
  .story{
    background:var(--blend-3);
    color:var(--ink);
    padding:90px 32px;
  }
  .story-grid{
    display:grid;
    max-width:720px;
    margin:0 auto;
    text-align:center;
  }
  .story h2{color:var(--dark-green);font-size:clamp(26px,3.5vw,38px);margin-bottom:22px;text-align:center;}
  .story p{color:#5c5c50;margin-bottom:16px;font-size:15.5px;text-align:left;}
  .story-chapter{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--beige-deep);font-weight:600;margin:32px 0 10px;text-align:left;}
  .story-chapter:first-of-type{margin-top:4px;}
  .story-image-break{
    display:flex;
    gap:20px;
    align-items:center;
    background:rgba(143,109,63,.08);
    border-radius:var(--radius);
    padding:16px;
    margin:8px 0 24px;
    text-align:left;
  }
  .story-image-break img{width:150px;height:112px;object-fit:cover;border-radius:6px;flex-shrink:0;}
  .story-image-break p{margin:0;font-size:13px;color:#6b6355;font-style:italic;}
  .story-quote{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:22px;
    color:var(--dark-green);
    border-left:3px solid var(--beige-deep);
    padding-left:20px;
    margin:12px 0 28px;
    line-height:1.4;
    text-align:left;
  }
  @media (max-width:560px){
    .story-image-break{flex-direction:column;align-items:stretch;}
    .story-image-break img{width:100%;height:160px;}
  }
  .story-badge{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  background:rgba(47,61,40,.06);
  border:1px solid rgba(90,68,42,.18);
  padding:16px 22px;
  border-radius:8px;
  margin-bottom:24px;
}
.story-badge .eu-logo{width:130px;height:auto;margin-bottom:8px;}
.story-badge .cert-number{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;color:var(--dark-green);}
.story-badge .cert-text{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--beige-deep);}
  .story-facts{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:36px;
    padding-top:36px;
    border-top:1px solid rgba(90,68,42,.16);
    text-align:left;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
  .story-facts div{text-align:left;}
  .story-facts .num{
    font-family:'Playfair Display',serif;
    font-size:32px;
    color:var(--dark-green);
    display:block;
    margin-bottom:4px;
  }
  .story-facts .lbl{font-size:13px;color:#6b6355;letter-spacing:.03em;}

  /* ---------- Section heading ---------- */
  .section-head{
    text-align:center;
    max-width:600px;
    margin:0 auto 56px;
  }
  .section-head .hero-eyebrow{margin-bottom:14px;}
  .section-head h2{font-size:clamp(26px,3.5vw,36px);margin-bottom:14px;}
  .section-head p{color:#5c5c50;font-size:15.5px;}

  /* ---------- Products ---------- */
  .products{padding:100px 32px;background:linear-gradient(180deg, var(--cream) 0%, #ece0c5 100%);}
  .product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
  }
  .product-card{
    background:var(--beige);
    border:1px solid rgba(90,68,42,.18);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display:flex;
    flex-direction:column;
  }
  .product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(90,68,42,.15);
    border-color:var(--beige-deep);
  }
  .product-media{
    background:var(--blend-2);
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .product-media svg{width:64px;height:64px;transition:transform .4s ease;}
  .product-card:hover .product-media svg{transform:scale(1.12) rotate(-4deg);}
  .product-weight{
    position:absolute;
    top:14px;
    right:14px;
    background:var(--dark-green);
    color:var(--cream);
    font-size:11.5px;
    letter-spacing:.05em;
    padding:5px 10px;
    border-radius:20px;
  }
  .product-body{padding:26px 24px 28px;flex:1;display:flex;flex-direction:column;}
  .product-body h3{font-size:20px;margin-bottom:8px;}
  .product-body p{font-size:14px;color:#63635a;margin-bottom:18px;flex:1;}
  .product-link{
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--beige-deep);
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:500;
  }
  .product-link .arrow{transition:transform .25s ease;}
  .product-card:hover .product-link .arrow{transform:translateX(5px);}

  /* ---------- Featured products ---------- */
  .featured-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-bottom:30px;
  }
  .featured-card{
    background:transparent;
    border:none;
    border-radius:0;
    overflow:visible;
    transition:transform .3s ease;
  }
  .featured-card:hover{
    transform:translateY(-6px);
  }
  .featured-media{
    background:var(--blend-2);
    aspect-ratio:16/9;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    box-shadow:0 20px 40px rgba(90,68,42,.2);
    transition:box-shadow .3s ease;
  }
  .featured-card:hover .featured-media{
    box-shadow:0 26px 48px rgba(90,68,42,.28);
  }
  .featured-media svg{width:70px;height:70px;}
  .featured-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  .featured-oil-badge{z-index:2;}
  .featured-oil-badge{
    position:absolute;
    top:16px;
    left:16px;
    background:var(--dark-green);
    color:var(--cream);
    font-size:11px;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:20px;
  }
  .featured-body{padding:24px 0 8px;}
  .featured-body h3{font-size:24px;margin-bottom:4px;}
  .featured-sub{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--beige-deep);margin-bottom:14px;display:block;}
  .featured-body p{font-size:14.5px;color:#63635a;margin-bottom:20px;}
  .featured-body p.note{font-size:12.5px;color:#8b8b7d;font-style:italic;margin-top:-8px;margin-bottom:22px;}

  .mini-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }
  .mini-card{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    text-align:center;
    transition:transform .25s ease;
    overflow:visible;
  }
  .mini-card:hover{
    transform:translateY(-4px);
  }
  .mini-card svg{width:36px;height:36px;margin:0 auto 12px;}
  .mini-media{
    margin:0 0 16px;
    aspect-ratio:4/3;
    overflow:hidden;
    position:relative;
    border-radius:var(--radius);
    box-shadow:0 14px 28px rgba(90,68,42,.2);
    transition:box-shadow .25s ease;
  }
  .mini-card:hover .mini-media{
    box-shadow:0 20px 36px rgba(90,68,42,.28);
  }
  .mini-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
  .mini-card:hover .mini-media img{transform:scale(1.08);}
  .mini-card h4{font-size:15.5px;color:var(--dark-green);font-family:'Playfair Display',serif;margin-bottom:4px;}
  .mini-card .mini-weight{font-size:11.5px;color:#8b8b7d;display:block;margin-bottom:12px;}
  .mini-card .product-link{font-size:11.5px;}

  /* ---------- Quality band ---------- */
  .quality{
    background:var(--blend-3);
    padding:70px 32px;
  }
  .quality-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    text-align:center;
  }
  .quality-item svg{width:38px;height:38px;margin:0 auto 16px;}
  .quality-item h4{font-family:'Playfair Display',serif;font-size:17px;color:var(--dark-green);margin-bottom:8px;}
  .quality-item p{font-size:13.5px;color:#5c5c50;}

  .partner-card{
    margin-top:50px;
    background:var(--beige);
    border:1px solid rgba(90,68,42,.12);
    border-radius:var(--radius);
    padding:36px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
    transition:box-shadow .3s ease, border-color .3s ease;
  }
  .partner-card:hover{
    box-shadow:0 16px 32px rgba(90,68,42,.1);
    border-color:var(--beige-deep);
  }
  .partner-card .partner-text{max-width:640px;}
  .partner-card .hero-eyebrow{margin-bottom:10px;}
  .partner-card h4{font-family:'Playfair Display',serif;font-size:19px;color:var(--dark-green);margin-bottom:8px;}
  .partner-card p{font-size:14px;color:#5c5c50;}
  .partner-card .btn{white-space:nowrap;padding:12px 26px;font-size:13px;}

  /* ---------- CTA banner ---------- */
  .cta-banner{
    background:var(--beige);
    padding:70px 32px;
    text-align:center;
    color:var(--ink);
  }
  .cta-banner h2{color:var(--dark-green);font-size:clamp(24px,3.5vw,34px);margin-bottom:14px;}
  .cta-banner p{margin-bottom:30px;color:#5c5c50;font-size:15.5px;}
  .cta-banner .btn-primary{background:var(--dark-green);border-color:var(--dark-green);}
  .cta-banner .btn-primary:hover{background:var(--beige-deep);color:var(--cream);border-color:var(--beige-deep);}

  /* ---------- Footer ---------- */
  footer{
    background:var(--beige-darkest);
    color:#c3b696;
    padding:60px 32px 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:48px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(240,230,210,.18);
  }
  .footer-grid .logo-mark{height:34px;margin-bottom:16px;filter:drop-shadow(0 0 5px rgba(240,230,210,.45));}
  .footer-grid p{font-size:13.5px;line-height:1.7;color:#ac9f80;max-width:280px;}
  .footer-col h5{
    color:var(--cream);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:18px;
    font-weight:500;
  }
  .footer-col ul{list-style:none;}
  .footer-col ul li{margin-bottom:10px;}
  .footer-col ul li a{font-size:14px;color:#c3b696;transition:color .2s ease;}
  .footer-col ul li a:hover{color:var(--beige);}
  .footer-col p{font-size:13.5px;line-height:1.6;color:#ac9f80;margin-bottom:14px;}
  .footer-col .footer-email{font-size:14px;color:var(--beige);font-weight:500;transition:color .2s ease;}
  .footer-col .footer-email:hover{color:var(--cream);}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:26px;
    font-size:12.5px;
    color:#8f8264;
    flex-wrap:wrap;
    gap:10px;
  }

  /* ---------- View toggle ---------- */
  .view-toggle{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:999;
    background:var(--dark-green);
    color:var(--cream);
    border:none;
    padding:10px 18px;
    border-radius:30px;
    font-family:'Jost',sans-serif;
    font-size:13px;
    letter-spacing:.04em;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
  }
  .view-toggle:hover{background:var(--beige-deep);}

  /* ---------- Schwebendes Warenkorb-Icon mittig unten (nur Mobil):
     zeigt nur an, wenn der Shop-Warenkorb bereits Artikel enthält.
     Gleiche Optik wie das Icon im Shop (Picknickkorb + Wein), aber
     mittig statt unten rechts, da hier keine Filterleiste/Kasse-Seite
     im Weg ist. ---------- */
  .aromaneo-cart-mid{display:none;}
  @media (max-width:900px){
    .aromaneo-cart-mid.show{
      position:fixed;
      right:10px;
      bottom:16px;
      z-index:260;
      width:58px;
      height:58px;
      border-radius:50%;
      background:var(--beige-deep);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 10px 22px rgba(0,0,0,.32);
      text-decoration:none;
    }
    .aromaneo-cart-mid svg{
      width:42px;
      height:42px;
      overflow:visible;
    }
    .aromaneo-cart-mid-count{
      position:absolute;
      top:-2px;
      right:-2px;
      min-width:20px;
      height:20px;
      padding:0 4px;
      border-radius:10px;
      background:var(--dark-green);
      color:var(--cream);
      font-family:'Jost',sans-serif;
      font-size:10.5px;
      font-weight:600;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1.5px solid var(--cream);
    }
  }

  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    /* Hero-Slideshow reicht bis unter den fixierten, transparenten
       Header (statt erst danach zu beginnen) – der Header zeigt dadurch
       geblurrt schon einen Hauch des Fotos. Das (bereits global fixierte)
       Versandbanner bleibt dabei sichtbar im Vordergrund stehen, statt
       vom Hero-Bild überdeckt zu werden. Nur auf Mobil bekommt body
       deshalb keinen Abstand für die Banner-Höhe (anders als am
       Desktop weiter oben). */
    body{padding-top:0;}
    /* Header auf Mobil im Ruhezustand kleiner/schmaler (kompaktere Zeile,
       kleineres Logo) und leicht "milchig" statt komplett durchsichtig,
       damit Logo/Burger-Icon immer einen Mindestkontrast vorm Hero-Foto
       haben. Sobald das Menü offen ist (Klasse "menu-open", per JS
       gesetzt), wird der Hintergrund spürbar kräftiger. */
    header{
      background:rgba(240,230,210,.4);
      backdrop-filter:blur(5px);
      -webkit-backdrop-filter:blur(5px);
      border-bottom-color:rgba(240,230,210,.12);
    }
    header .nav-wrap{
      padding:9px 20px;
    }
    header .logo-mark{
      height:32px;
    }
    header.menu-open{
      background:rgba(240,230,210,.78);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border-bottom-color:rgba(240,230,210,.2);
    }
    nav{
      display:block;
      position:absolute;
      /* Startet erst UNTER dem Versandkosten-Banner (dessen echte, per JS
         gemessene Höhe in --banner-h steht), damit das aufklappende Menü
         das Banner nicht verdeckt, sondern das Banner sichtbar darüber
         bzw. das Menü sichtbar darunter bleibt. 58px Fallback, falls JS
         (noch) nicht gelaufen ist. */
      top:calc(100% + var(--banner-h, 58px));
      left:12px;
      right:12px;
      /* Deutlich kräftigerer, fast deckender Hintergrund (statt nur
         leicht angedeutetem Frosted Glass), damit die Menüpunkte klar
         lesbar vor dem Hero-Foto stehen. Etwas schmaler als volle Breite
         und mit Radius, damit es kompakter statt wie ein voller Balken
         wirkt. */
      background:rgba(240,230,210,.92);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      padding:0 28px;
      border-radius:0 0 12px 12px;
      box-shadow:0 14px 24px rgba(0,0,0,.2);
      border-bottom:1px solid rgba(240,230,210,.4);
      max-height:0;
      opacity:0;
      overflow:hidden;
      transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
    }
    nav.nav-open{
      max-height:600px;
      opacity:1;
      padding:22px 28px 26px;
      transition:max-height .35s ease, opacity .3s ease .05s, padding .35s ease;
    }
    nav.nav-open ul{flex-direction:column;gap:20px;}
    .nav-shop-mobile{display:list-item;margin-top:6px;}
    .nav-shop-mobile a{color:var(--beige-deep) !important;font-weight:500;}
    /* Sprachumschalter zieht auf Mobil ins aufklappende Menü um, damit
       neben dem Burger-Icon nicht mehr der "|"-Trenner als dunkler
       Strich sichtbar ist. */
    .nav-cta .lang-switch{display:none;}
    .nav-lang-mobile{display:list-item;margin-top:14px;}
    .nav-lang-mobile .lang-switch{display:inline-flex;}
    .burger{display:block;}
    .story-grid{grid-template-columns:1fr;gap:36px;}
    .product-grid{grid-template-columns:repeat(2,1fr);}
    .featured-grid{grid-template-columns:1fr;}
    .mini-grid{grid-template-columns:repeat(2,1fr);}
    .quality-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr;gap:32px;}
    .partner-card{flex-direction:column;align-items:flex-start;}
  }
  @media (max-width:560px){
    .product-grid{grid-template-columns:1fr;}
    .mini-grid{grid-template-columns:1fr;}
    .quality-grid{grid-template-columns:1fr;}
    .story-facts{grid-template-columns:repeat(3,1fr);gap:10px;}
    .story-facts .num{font-size:22px;}
    .story-facts .lbl{font-size:10.5px;}
    .nav-cta .btn:not(.btn-primary){display:none;}
    .featured-grid{gap:0;margin-left:-32px;margin-right:-32px;margin-bottom:0;}
    .featured-card{border-radius:0;border-left:none;border-right:none;border-bottom-width:8px;}
    .featured-media{aspect-ratio:4/3;}
  }