: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{
    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);
  }

  /* ---------- Hero-CTA "Entdecken →": Farbe kommt aus dem Logo, wie
     es im Home-Hero selbst zu sehen ist (aromaneo_logo_beige.png),
     nicht aus dem dunkelgruenen Icon oben links im Menue. Per-Pixel-
     Analyse dieser Datei ergibt exakt zwei Farben: #8f6d3f (das
     Blatt/der Akzent) und #e2d2ac (die Schrift) - beides bereits
     bestehende Variablen hier (--beige-deep und --beige), keine neu
     erfundene Farbe. Gilt fuer Web UND Mobil, da .hero-actions
     .btn-primary auf beiden Breakpoints dieselbe Klasse ist. */
  .hero-actions .btn-primary{
    background:var(--beige-deep);
    border-color:var(--beige-deep);
    color:var(--cream);
  }
  .hero-actions .btn-primary:hover{
    background:var(--beige-darkest);
    border-color:var(--beige-darkest);
    color:var(--cream);
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
  }

  /* ---------- Mobile-only Zusatzelemente (Über-uns-CTA, Produkt-USP/
     Preis/CTA) - stehen im HTML immer im DOM, sind aber standardmaessig
     ausgeblendet und werden ausschliesslich im Mobil-Media-Query weiter
     unten sichtbar gemacht. So bleibt der Desktop-Aufbau unangetastet,
     unabhaengig davon, wo genau der Mobil-Breakpoint liegt. */
  .story-cta-mobile,
  .mobile-usp,
  .mobile-price,
  .mobile-product-cta{
    display:none;
  }

  /* ---------- 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:14px;
    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:12.5px;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:100px 32px;
  }
  .story-grid{
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:64px;
    align-items:start;
    max-width:1140px;
    margin:0 auto;
    text-align:left;
  }
  .story-photo img{
    width:100%;
    border-radius:14px;
    box-shadow:0 24px 60px rgba(47,61,40,.22);
  }
  @media (min-width:901px){
    .story-photo{position:sticky;top:110px;}
  }
  .story h2{color:var(--dark-green);font-size:clamp(28px,3.5vw,40px);margin-bottom:22px;text-align:left;}
  .story p{color:#5c5c50;margin-bottom:16px;font-size:15.5px;text-align:left;}
  .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);}

  /* ---------- Section heading ---------- */
  .section-head{
    text-align:center;
    max-width:600px;
    margin:0 auto 56px;
  }
  /* Bio-Siegel über "Unsere Kollektion" – etwas größer als das EU-Bio-Logo
     im Über-uns-Bereich (.story-badge .eu-logo, width:130px). */
  .collection-bio-badge{
    display:block;
    width:160px;
    height:auto;
    margin:0 auto 18px;
  }
  .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%);}
  /* Discovery-Element statt reinem Text-Link: soll neugierig machen
     ("was steckt dahinter?"), nicht wie ein Kaufbutton wirken. Dezente
     Pille mit duennem Rand + leichtem Beige-Ton, kein Vollton, keine
     Animation ausser dem sanften Pfeil-Nudge beim Hover. */
  .product-link{
    font-size:12.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--beige-deep);
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:500;
    padding:10px 18px;
    border-radius:30px;
    border:1px solid rgba(143,109,63,.32);
    background:rgba(143,109,63,.06);
    transition:background .25s ease, border-color .25s ease, color .25s ease;
  }
  .product-link:hover{
    background:rgba(143,109,63,.13);
    border-color:rgba(143,109,63,.5);
    color:var(--dark-green);
  }
  .product-link .arrow{transition:transform .25s ease;}
  .product-link:hover .arrow{transform:translateX(3px);}

  /* ---------- Featured products ---------- */
  .featured-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-bottom:30px;
  }
  .products-more{
    text-align:center;
    margin-top:8px;
  }
  .featured-card{
    background:#fbf7ec;
    border:none;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(90,68,42,.16);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .featured-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 55px rgba(90,68,42,.22);
  }
  .featured-media{
    background:var(--blend-2);
    aspect-ratio:16/9;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    border-radius:0;
    transition:box-shadow .3s ease;
  }
  .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 28px 28px;}
  .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);}

  /* ---------- Kontakt ---------- */
  .contact{
    background:var(--cream);
    padding:100px 32px;
  }
  .contact-form{
    max-width:640px;
    margin:0 auto;
  }
  .contact-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .contact-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
  }
  .contact-field label{
    font-size:12.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--dark-green);
    font-weight:500;
  }
  .contact-field input[type="text"],
  .contact-field input[type="email"],
  .contact-select-wrap select,
  .contact-field textarea{
    width:100%;
    font-family:'Jost',sans-serif;
    font-size:15px;
    color:var(--ink);
    background:var(--white);
    border:1.5px solid rgba(47,61,40,.22);
    border-radius:var(--radius);
    padding:14px 16px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .contact-field input::placeholder,
  .contact-field textarea::placeholder{
    color:#9a9585;
  }
  .contact-field input[type="text"]:focus,
  .contact-field input[type="email"]:focus,
  .contact-select-wrap select:focus,
  .contact-field textarea:focus{
    outline:none;
    border-color:var(--dark-green);
    box-shadow:0 0 0 3px rgba(47,61,40,.08);
  }
  .contact-field textarea{
    resize:vertical;
    min-height:140px;
    line-height:1.6;
  }
  .contact-select-wrap{
    position:relative;
  }
  .contact-select-wrap select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:40px;
    cursor:pointer;
  }
  .contact-select-wrap::after{
    content:'';
    position:absolute;
    right:18px;
    top:50%;
    width:8px;
    height:8px;
    border-right:1.5px solid var(--dark-green);
    border-bottom:1.5px solid var(--dark-green);
    transform:translateY(-65%) rotate(45deg);
    pointer-events:none;
  }
  /* Honeypot-Feld gegen Spam-Bots: für Menschen unsichtbar (nicht per
     display:none, das ignorieren manche Bots), bleibt aber technisch im
     Formular vorhanden. */
  .contact-honeypot{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
  }
  .contact-submit{
    margin-top:8px;
    min-width:200px;
  }
  .contact-submit.is-sending{
    opacity:.65;
    cursor:wait;
    pointer-events:none;
  }
  .contact-status{
    margin-top:16px;
    font-size:14px;
    min-height:20px;
  }
  .contact-status.is-success{
    color:var(--dark-green);
    font-weight:500;
  }
  .contact-status.is-error{
    color:#a3402f;
    font-weight:500;
  }
  .contact-disclaimer{
    margin-top:18px;
    font-size:12.5px;
    color:#8b8b7d;
  }
  .contact-disclaimer a{
    color:var(--beige-deep);
    text-decoration:underline;
  }
  .contact-disclaimer a:hover{
    color:var(--dark-green);
  }

  /* ---------- Footer ---------- */
  /* Hintergrundbild nochmal deutlich sichtbarer gemacht (Overlay von
     .55-.62 auf .35-.42 abgeschwächt - Bild war laut Rückmeldung immer
     noch kaum zu erkennen). Damit Text/Links trotzdem lesbar bleiben,
     wurde der text-shadow verstärkt (kräftiger + etwas mehr Weichzeichnung
     statt nur 1px Versatz) - kompensiert den nochmals helleren
     Hintergrund. */
  footer{
    background:
      linear-gradient(180deg, rgba(43,53,36,.35), rgba(43,53,36,.42)),
      /* aromaneo: Bildausschnitt auf den unteren Bildbereich verschoben
         (statt Bildmitte) - das Foto besteht oben zu einem Großteil aus
         leerem Himmel, die Felder/Reihen befinden sich im unteren Drittel.
         "center bottom" zeigt diesen unteren Bereich statt der Bildmitte,
         damit die Felder tatsächlich sichtbar sind. */
      url('footer-illustration.jpg') center bottom/cover no-repeat;
    color:#c3b696;
    /* aromaneo: Vertikales Padding jetzt mit vw-Anteil (statt fixer px-
       Werte), damit der Footer auf breiteren Bildschirmen etwas höher
       wird. Grund: bei "background-size:cover" + fester Footer-Höhe wird
       das Bild umso staerker vertikal beschnitten, je breiter der
       Bildschirm wird (man sieht dann kaum noch die Landschaft, nur noch
       die naechstgelegenen Pflanzenreihen). Die vw-Komponente gleicht das
       aus, indem die Footer-Hoehe mit der Breite mitwaechst. Untere
       Grenze (60px/30px) = unveraendertes Mobil-Verhalten, obere Grenze
       verhindert einen übermäßig hohen Footer auf sehr breiten Screens. */
    padding:clamp(60px, 10vw, 200px) 32px clamp(30px, 5vw, 100px);
    /* text-shadow wird an alle Footer-Textelemente vererbt (CSS-Standard-
       verhalten) - gleicht den helleren Hintergrund lesbarkeitsmäßig aus,
       ohne jede einzelne Footer-Textregel separat anfassen zu müssen. */
    text-shadow:0 1px 4px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6);
  }
  .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;}
  /* Logo + Kurztext in der ersten Footer-Spalte mittig übereinander */
  .footer-brand{display:flex;flex-direction:column;align-items:center;text-align:center;}
  .footer-brand p{max-width:230px;}
  .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);}
  /* Navigation-Liste im Footer: links Über uns/Produkte/Qualität/Shop,
     rechts Gericht des Monats/Blog. Reihenfolge im HTML bleibt
     unverändert (wichtig für Mobil, siehe Media-Query weiter unten), die
     Aufteilung passiert rein per Grid-Platzierung. */
  .footer-nav-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px;
  }
  .footer-nav-grid li:nth-child(1){grid-column:1;grid-row:1;}
  .footer-nav-grid li:nth-child(2){grid-column:1;grid-row:2;}
  .footer-nav-grid li:nth-child(3){grid-column:2;grid-row:1;}
  .footer-nav-grid li:nth-child(4){grid-column:2;grid-row:2;}
  .footer-nav-grid li:nth-child(5){grid-column:1;grid-row:3;}
  .footer-nav-grid li:nth-child(6){grid-column:1;grid-row:4;}
  .footer-col p{font-size:13.5px;line-height:1.6;color:#ac9f80;margin-bottom:14px;}
  /* Instagram-Pill auffälliger: echter Instagram-Farbverlauf statt
     schlichtem Outline, größeres Icon. */
  .footer-col .footer-social{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:14.5px;
    color:#fff;
    font-weight:600;
    border:none;
    border-radius:30px;
    padding:10px 20px 10px 12px;
    background:linear-gradient(90deg,#4f5bd5,#962fbf,#d62976,#fa7e1e,#feda75);
    box-shadow:0 4px 14px rgba(214,41,118,.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .footer-col .footer-social svg{width:23px;height:23px;flex-shrink:0;}
  .footer-col .footer-social:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(214,41,118,.4);
  }
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:26px;
    font-size:12.5px;
    color:#8f8264;
    flex-wrap:wrap;
    gap:10px;
  }

  /* ---------- Lesezeichen-Tab am rechten Bildschirmrand (Desktop + Mobil):
     zeigt nur an, wenn der Shop-Warenkorb bereits Artikel enthält.
     Gleiche Optik + Position wie das Lesezeichen-Icon im Shop (Tab am
     rechten Rand, direkt unter dem Banner). Vorher nur bis 900px Breite
     sichtbar (per @media), jetzt bewusst auf allen Bildschirmgrößen
     gleich - auf Desktop gab es sonst gar keinen Warenkorb-Hinweis auf
     der Landingpage, obwohl der Shop-Warenkorb schon Artikel enthielt. */
  .aromaneo-cart-mid{
    position:fixed;
    right:0;
    top:calc(var(--header-h, 70px) + var(--banner-h, 40px) + 14px);
    z-index:260;
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--dark-green);
    color:var(--cream);
    padding:12px 10px 12px 14px;
    border-radius:14px 0 0 14px;
    box-shadow:-4px 4px 16px rgba(0,0,0,.25);
    text-decoration:none;
    opacity:0;
    transform:translateX(12px);
    pointer-events:none;
    transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
  }
  .aromaneo-cart-mid.show{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
  }
  .aromaneo-cart-mid:hover{
    box-shadow:-6px 6px 20px rgba(0,0,0,.32);
  }
  /* aromaneo: eigenes Gewuerzbeutel-Icon (warenkorbneu.ai) - schwarze
     Zeichnung, deshalb auf einem hellen Kreis-Chip platziert (sonst kaum
     Kontrast auf dem dunkelgruenen Hintergrund). Auf der Landingpage
     bewusst gut doppelt so gross wie im Shop (52px/38px statt 24px/17px) -
     hier ausdruecklich gewuenscht, waehrend die Variante im Shop (WPCode
     Snippet "Cart Bookmark Tab") unveraendert klein bleibt. */
  .aromaneo-cart-mid-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
  }
  .aromaneo-cart-mid-icon img{
    width:38px;
    height:auto;
    display:block;
  }
  .aromaneo-cart-mid-count{
    background:var(--cream);
    color:var(--dark-green);
    font-family:'Jost',sans-serif;
    font-size:11px;
    font-weight:700;
    min-width:18px;
    height:18px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
  }
  /* Sofortiges Zusammendrücken beim Antippen (Klasse wird per JS in
     initPageLeaveTransition() gesetzt/entfernt) – sorgt dafür, dass
     ein Tap auf das Icon sich überhaupt wie ein Klick anfühlt. */
  .aromaneo-cart-mid.is-pressed{
    transform:scale(.92);
  }
  /* Überblende in Cremeweiß mit Lade-Spinner beim Wechsel zum Shop –
     kaschiert den leeren/weißen Blitz, während die Zielseite lädt. */
  .aromaneo-page-leave-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    background:var(--cream);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .aromaneo-page-leave-overlay.show{
    opacity:1;
    pointer-events:auto;
  }
  .aromaneo-page-leave-spinner{
    width:40px;
    height:40px;
    border-radius:50%;
    border:3px solid rgba(47,61,40,.2);
    border-top-color:var(--dark-green);
    animation:aromaneoSpin .7s linear infinite;
  }
  @keyframes aromaneoSpin{
    to{transform:rotate(360deg);}
  }

  /* ---------- 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;
    }
    /* Gleiche Höhe wie das Header-Logo im Shop auf Mobil (dort
       .site-branding img{height:64px !important} in
       shop-design-update.css) – vorher war das Landingpage-Logo auf
       Mobil mit 32px nur halb so groß. Zusätzlicher Abstand von der
       linken Kante, damit es wie im Shop nicht ganz am Rand klebt,
       sondern etwas mehr Richtung Mitte der Menüzeile rückt. */
    header .logo-mark{
      height:64px;
      margin-left:6px;
    }
    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);
    }

    /* Auf-/Zuklappen jetzt als reine CSS-Grid-Animation (0fr -> 1fr) statt
       der vorherigen max-height-Transition mit per JS gemessenem
       scrollHeight – gleiches Prinzip wie beim Shop-Mini-Warenkorb (dort
       CSS Grid statt fragilem Flex+order). Vorteil: kein Timing-Problem
       mehr, wenn JS die Höhe zu einem Zeitpunkt misst, an dem Layout/
       Webfonts sich gerade noch ändern – das konnte beim wiederholten
       Öffnen/Schließen zu einer falsch gemessenen, "durcheinander"
       wirkenden Höhe führen. Der Browser berechnet die Zielhöhe jetzt bei
       jedem Frame selbst aus dem echten Inhalt. */
    nav{
      display:grid;
      grid-template-rows:0fr;
      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;
      /* Fast deckender Hintergrund, damit die Menüpunkte klar lesbar vor
         dem Hero-Foto stehen. Bewusst NICHT mehr von backdrop-filter
         abhängig: iOS Safari rendert backdrop-filter auf einem Element,
         das gleichzeitig overflow:hidden UND eine Höhen-Transition hat,
         unzuverlässig/gar nicht – dadurch schien der Hero-Text
         (z.B. "Von Hand. Von uns.") beim Test auf echtem iPhone scharf
         und unverschwommen durch die Menübox durch (sah kaputt/"leer"
         aus). Deckkraft daher auf nahezu 100% erhöht statt auf den Blur
         zu vertrauen; blur bleibt als Bonus für Browser, die es können. */
      background:rgba(240,230,210,.99);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      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);
      opacity:0;
      transition:grid-template-rows .35s ease, opacity .25s ease;
    }
    nav.nav-open{
      grid-template-rows:1fr;
      opacity:1;
      transition:grid-template-rows .35s ease, opacity .3s ease .05s;
    }
    /* Das <ul> ist das einzige Grid-Kind von <nav> und bekommt daher das
       Padding + overflow:hidden + min-height:0 (letzteres nötig, damit
       Grid-Kinder unter 0fr wirklich auf 0 zusammenschrumpfen können). */
    nav > ul{
      overflow:hidden;
      min-height:0;
      padding:0 28px;
      transition:padding .35s ease;
    }
    nav.nav-open > ul{
      padding:22px 28px 26px;
    }
    /* WICHTIG: an "nav ul" (nicht an "nav.nav-open ul") gebunden, also
       IMMER aktiv auf Mobil, unabhängig vom Öffnen/Schließen-Zustand.
       Vorher war die Spalten-Anordnung nur an .nav-open gekoppelt – beim
       Schließen verschwindet diese Klasse aber SOFORT per JS, während die
       Box selbst noch ca. 350ms sichtbar zuklappt. In diesem Moment fiel
       das <ul> zurück auf die Desktop-Grundregel (zeilenweise, mehrere
       Spalten nebeneinander, Text bricht um) – genau das sah wie eine
       "durcheinandergewürfelte" Reihenfolge aus. Jetzt bleibt die Liste
       während der gesamten Animation einspaltig. */
    nav 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;}
    /* Etwas größer als am Desktop (26px) und ein Stück von der rechten
       Kante nach links gerückt, statt genau am Rand zu kleben – zusammen
       mit dem nach rechts gerückten Logo wirkt die Menüzeile dadurch
       ausgewogener, ähnlich wie im Shop-Header. */
    .burger{
      display:block;
      font-size:32px;
      margin-right:10px;
    }
    .story-grid{grid-template-columns:1fr;gap:36px;}
    .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;}
    /* Navigation bleibt auf Mobil eine einzelne Liste, exakt wie zuvor
       (keine 2-Spalten-Aufteilung dort). */
    .footer-nav-grid{display:block;}
    .partner-card{flex-direction:column;align-items:flex-start;}
    .contact{padding:70px 24px;}
    .contact-row{grid-template-columns:1fr;gap:0;}
  }
  @media (max-width:560px){
    .mini-grid{grid-template-columns:1fr;}
    .quality-grid{grid-template-columns:1fr;}
    .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;}
  }

/* =================================================================
   Mobile-Relaunch "Über uns" + Produktbereich (nur Mobile, ≤900px)
   -----------------------------------------------------------------
   Vorher hatten .story, .story-grid, .story-badge, .featured-Karten und
   .mini-Karten auf Mobil praktisch KEIN eigenes Styling: all diese Regeln steckten
   ausschliesslich im Desktop-Block "@media (min-width:860px)" weiter
   oben in dieser Datei. Unter 860px liefen Bild, Überschrift, Text und
   Buttons dadurch komplett auf Browser-Grundformatierung (linksbündig,
   unstyled Links, unbeschnittene Bilder in Originalgrösse) - das war
   die Ursache für "nicht zentriert" und "zu textlastig".
   Dieser Block steht bewusst als letzter im File, damit er in allen
   Übernahme-/Kollisionsfällen mit obigen Mobil-Regeln (max-width:900px
   bzw. 560px) gewinnt (gleiche Spezifität, spätere Regel im
   Stylesheet gewinnt).
   ================================================================= */
@media (max-width:900px){

  /* ---------- Über uns: Badge, Überschrift, Text, Bild, Button
     komplett zentriert statt linksbündig ---------- */
  .story{
    padding:64px 24px;
    text-align:center;
  }
  .story-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .story-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .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:14px 20px;
    border-radius:8px;
    margin:0 auto 22px;
  }
  .story h2{
    text-align:center;
    font-size:clamp(24px,6vw,30px);
    margin-bottom:18px;
  }
  .story p{
    text-align:center;
    max-width:480px;
    margin:0 auto 14px;
  }
  .story-photo{
    width:100%;
    max-width:360px;
    margin:10px auto 0;
  }
  .story-photo img{
    width:100%;
    border-radius:14px;
    box-shadow:0 16px 34px rgba(47,61,40,.22);
  }
  /* Zusätzlicher CTA am Ende von "Über uns" (existierte vorher nicht) -
     gibt dem Besucher nach der Markengeschichte eine klare nächste
     Handlung, statt dass die Seite nach dem Lesen "aufhört". */
  .story-cta-mobile{
    display:inline-block;
    margin-top:28px;
  }

  /* ---------- Produktbereich: Kollektions-Intro zentriert ---------- */
  .section-head{
    text-align:center;
    max-width:440px;
    margin:0 auto 36px;
  }
  .collection-bio-badge{
    width:110px;
    margin:0 auto 14px;
  }
  .products{
    padding:56px 20px 66px;
  }
  /* .container bringt normalerweise nochmal 32px eigenes Padding mit -
     zusammen mit dem 20px-Padding von .products ergab das auf Mobil
     unnötig breite Ränder (Karten/Bundle-Box wirkten schmal und
     "eingequetscht" mit viel Leerraum links/rechts). Innerhalb von
     .products übernimmt daher ausschliesslich .products selbst das
     Seitenpadding. */
  .products .container{
    padding-left:0;
    padding-right:0;
  }

  /* ---------- Produktkarten: einheitlich Bild / Name / 1 USP / Preis
     / CTA statt Fliesstext. featured-grid (2 grosse Karten) und
     mini-grid (4 kleinere Karten) werden auf Mobil bewusst gleich
     behandelt, damit alle 6 Produkte gleich schnell verständlich
     sind. */
  .featured-grid,
  .mini-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
  }
  .featured-card,
  .mini-card{
    text-align:center;
  }
  .featured-media,
  .mini-media{
    aspect-ratio:4/3;
    border-radius:12px;
    border-left:none;
    border-right:none;
    border-bottom-width:0;
    overflow:hidden;
    box-shadow:0 16px 32px rgba(90,68,42,.22);
    margin:0 0 18px;
  }
  .featured-media img,
  .mini-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  /* Der Öl-Badge-Sticker auf dem Bild entfällt auf Mobil zugunsten der
     neuen, klareren USP-Zeile unter dem Produktnamen (vermeidet
     doppelte/redundante Info bei minimalem Platz). */
  .featured-oil-badge{
    display:none;
  }
  .featured-body{
    padding:0;
  }
  .featured-body h3,
  .mini-card h4{
    font-family:'Playfair Display',serif;
    font-weight:600;
    color:var(--dark-green);
    font-size:20px;
    margin-bottom:6px;
  }
  /* Alte Detailzeile (Gewicht/Herkunft) und die langen Fliesstext-
     Absätze werden auf Mobil ausgeblendet - ersetzt durch die neue,
     kompakte USP-Zeile + Preis (siehe .mobile-usp/.mobile-price). */
  .featured-sub,
  .mini-weight,
  .featured-body p{
    display:none;
  }
  .mobile-usp{
    display:block;
    font-size:15px;
    color:#5c5c50;
    margin-bottom:10px;
  }
  .mobile-price{
    display:block;
    font-family:'Playfair Display',serif;
    font-weight:600;
    font-size:21px;
    color:var(--dark-green);
    margin-bottom:18px;
  }
  /* Alter kleiner Text-Link ("Zum Shop →") ausgeblendet, ersetzt durch
     einen grossen, eindeutig antippbaren Button - verlinkt direkt auf
     die jeweilige Produktseite statt generisch auf /shop, damit
     Besucher:innen einen Klick weniger bis zur Kaufentscheidung
     brauchen (siehe Conversion-Hinweise). */
  .product-link{
    display:none;
  }
  .mobile-product-cta{
    display:inline-block;
    width:100%;
    max-width:300px;
    text-align:center;
    padding:15px 20px;
  }

  /* Bio-Oregano/Bergtee bekommen auch auf Mobil eine Karte mit
     echter Tiefe statt der frueheren flachen weissen Box mit starrem
     Rand: warmer Creme-zu-Beige-Verlauf (dieselben Marken-Farbtoene
     wie ueberall sonst, kein neuer Farbwert), grosszuegigerer Radius
     und das Produktfoto sitzt randlos/buendig oben in der Karte statt
     mit Abstand eingerahmt - dadurch wirkt das Bild praesenter und die
     Karte organischer, angelehnt an das Yamas-Bundle-Panel ohne es zu
     kopieren (helle Karte statt dunkelgruener Flaeche, damit das
     Bundle weiterhin klar das Highlight bleibt). */
  .products .featured-card{
    background:linear-gradient(165deg, var(--cream) 0%, var(--beige) 130%);
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 18px 38px rgba(74,56,30,.22);
    padding-bottom:24px;
  }
  .products .featured-media{
    border-radius:0;
    box-shadow:none;
    margin:0 0 18px;
  }
  .products .featured-body{
    padding:0 22px;
  }
}

/* ---------- Bestseller Spotlight (Yamas Bundle) — v0-inspired Baustein ---------- */
.spotlight-panel{
  --gold:#c9a15b;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  background:var(--dark-green);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(31,40,26,.28);
  margin-top:44px;
}
.spotlight-media{position:relative;min-height:420px;}
.spotlight-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.spotlight-badge{
  position:absolute;
  top:24px;
  left:24px;
  z-index:2;
  background:var(--gold);
  color:var(--dark-green);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  padding:8px 16px;
  border-radius:30px;
}
.spotlight-content{
  padding:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:var(--cream);
}
.spotlight-eyebrow{
  font-family:'Jost',sans-serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.spotlight-content h2{color:var(--cream);font-size:clamp(28px,3.2vw,38px);margin-bottom:18px;}
.spotlight-content p{color:rgba(240,230,210,.82);font-size:15.5px;margin-bottom:24px;}
.spotlight-features{list-style:none;margin-bottom:28px;display:flex;flex-direction:column;gap:10px;}
.spotlight-features li{font-size:14px;color:var(--cream);padding-left:26px;position:relative;}
.spotlight-features li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:700;}
.spotlight-footer{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.spotlight-price{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold);}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--dark-green);font-weight:600;}
.btn-gold:hover{background:#dab671;border-color:#dab671;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25);}

@media (max-width:900px){
  .spotlight-panel{grid-template-columns:1fr;border-radius:22px;margin-top:32px;}
  .spotlight-media{min-height:280px;}
  .spotlight-content{padding:40px 28px;}
}
@media (max-width:560px){
  .spotlight-content{padding:32px 22px;}
  .spotlight-footer{flex-direction:column;align-items:flex-start;gap:16px;}
}