: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{
    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-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:#c9a15b;font-weight:600;}
  .aromaneo-banner .banner-text{display:inline-flex;align-items:center;justify-content:center;gap:22px;white-space:nowrap;}
  @media (max-width:780px){
    .aromaneo-banner{font-size:12.5px;padding:8px 14px;}
  }

  /* ---------- 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. */

  .products-more{
    text-align:center;
    margin-top:8px;
  }

  .quality{
    background:var(--blend-3);
    padding:70px 32px;
  }

  /* ---------- 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 ---------- */
  /* Helles Footer-Design (Vorlage: aromavita) - kein Hintergrundbild mehr,
     schlichte weiße Fläche mit dünner Trennlinie oben, dunkle Überschriften,
     grau-uppercase Links in einer Spalte pro Kategorie. */
  footer{
    background:#fff;
    color:var(--dark-green);
    padding:56px 32px 32px;
    border-top:1px solid #e6e2d5;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1.4fr;
    gap:40px;
    padding-bottom:36px;
    align-items:center;
  }
  .footer-grid .logo-mark{height:64px;}
  .footer-brand{display:flex;align-items:center;justify-content:flex-end;}
  .footer-col h5{
    color:var(--dark-green);
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:18px;
    font-weight:700;
  }
  .footer-col ul{list-style:none;}
  .footer-col ul li{margin-bottom:12px;}
  .footer-col ul li a{
    font-size:12.5px;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:#8f8878;
    transition:color .2s ease;
  }
  .footer-col ul li a:hover{color:var(--dark-green);}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:24px;
    border-top:1px solid #e6e2d5;
    font-size:12.5px;
    color:#8f8878;
    flex-wrap:wrap;
    gap:10px;
  }
  .footer-bottom a{color:#8f8878;}
  .footer-bottom a:hover{color:var(--dark-green);}

  /* ---------- 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;}

    /* 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;}

    .footer-grid{grid-template-columns:1fr;gap:32px;}
    
    .contact{padding:70px 24px;}
    .contact-row{grid-template-columns:1fr;gap:0;}
  }
  @media (max-width:560px){

    .nav-cta .btn:not(.btn-primary){display:none;}

  }

/* =================================================================
   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. */

  /* 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). */

  /* 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). */

  /* 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). */

  /* 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). */

}

/* ---------- 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;}
}

/* ---------- Warenkorb-Button in der Kopfzeile (nur Desktop), 1:1 wie im
   Shop-Header (Umriss-Button, Jost 13px, Korb-Symbol aus dem Storefront-
   Iconfont des Shops). Wird per page-interactions.js nur eingeblendet,
   wenn im Shop-Warenkorb Artikel liegen. Auf Desktop ersetzt er den
   Warenkorb-Reiter am rechten Rand; auf Mobil bleibt der Reiter. ---------- */
@font-face{
  font-family:"aromaneo-fa-solid";
  font-style:normal;
  font-weight:900;
  font-display:block;
  src:url("/shop/wp-content/themes/storefront/assets/fonts/fa-solid-900.woff2") format("woff2"),
      url("/shop/wp-content/themes/storefront/assets/fonts/fa-solid-900.woff") format("woff");
}
.nav-cart{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  line-height:1.6;
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dark-green);
  background:transparent;
  border:1.5px solid var(--dark-green);
  border-radius:var(--radius);
  transition:all .25s ease;
  white-space:nowrap;
}
.nav-cart::after{
  content:"\f291";
  font-family:"aromaneo-fa-solid";
  font-weight:900;
  font-size:22px;
  line-height:1;
  display:block;
  color:inherit;
}
.nav-cart:hover{
  background:var(--dark-green);
  color:var(--cream);
  transform:translateY(-2px);
}
@media (max-width:900px){
  .nav-cart{display:none !important;}
}
@media (min-width:901px){
  .aromaneo-cart-mid{display:none !important;}
}

/* ---------- Lesbarkeit (Audit 24.09.2026): Kontrast kleiner Texte auf
   mind. 4.5:1 (WCAG AA) + einheitliche Warenkorb-Badges (gleich wie Shop).
   Farben aus der bestehenden Palette (#5c5c50 = Fliesstext-Grau,
   --beige-darkest = dunkelster Marken-Braunton). ---------- */
footer .footer-col ul li a,
.footer-bottom,
.footer-bottom a,
.lang-switch a{color:#5c5c50;}
footer .footer-col ul li a:hover,
.footer-bottom a:hover,
.lang-switch a:hover{color:var(--dark-green);}
.contact-disclaimer{color:#5c5c50;}
.contact-disclaimer a{color:var(--beige-darkest);}
.hero-eyebrow{color:var(--beige-darkest);}
.story-badge .cert-text{color:var(--beige-darkest);}

.story-badge .cert-text{font-size:12px;}
.aromaneo-cart-mid-count{font-size:13px;min-width:22px;height:22px;border-radius:11px;}

/* Mobil: Warenkorb-Reiter ausblenden, solange das Menü offen ist (lag sonst darüber) */
body:has(nav.nav-open) .aromaneo-cart-mid{display:none !important;}

/* ---------- Nur Bundles im Produktbereich (24.09.2026): erstes Panel direkt
   unter der Überschrift, kein doppelter Abstand ---------- */
.section-head + .spotlight-panel{margin-top:0;}

/* Menüpunkt „Shop“ leicht hervorgehoben (26.09.2026) */
nav ul li a[href="https://aromaneo.com/shop"]{font-weight:600;}

/* Breiter Header & Inhalt auf großen Bildschirmen (26.09.2026): mehr Breite, größeres Logo und Menü */
@media (min-width:1200px){
  header .nav-wrap{max-width:1320px;padding:16px 48px;}
  header .logo-mark{height:54px;}
  nav ul{gap:clamp(28px,2.4vw,44px);}
  nav ul li a{font-size:15.5px;letter-spacing:.1em;}
  .nav-cta .btn{padding:12px 26px;font-size:14px;}
  .container{max-width:1240px;}
}

/* Obere Leiste (26.09.2026): Grün & Gold, drei Botschaften */
.aromaneo-banner{border-bottom:1px solid rgba(201,161,91,.45);}
.aromaneo-banner .banner-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c9a15b;flex:0 0 5px;}
.aromaneo-banner .banner-claim{font-family:'Playfair Display',serif;font-style:italic;text-transform:none;letter-spacing:.01em;font-size:1.14em;}
.aromaneo-banner a.banner-link{color:#c9a15b;text-decoration:underline;text-underline-offset:4px;font-weight:500;}
.aromaneo-banner a.banner-link:hover{color:var(--cream, #f0e6d2);}
@media (max-width:900px){.aromaneo-banner .banner-claim,.aromaneo-banner .banner-dot--2{display:none;}.aromaneo-banner .banner-text{gap:12px;}}
@media (max-width:600px){.aromaneo-banner .banner-dot,.aromaneo-banner .banner-link{display:none;}}

/* Kopfzeile wie im Shop (26.09.2026): „Mein Konto“ als Textlink, Warenkorb-Button immer sichtbar */
.nav-account{font-family:'Jost',sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--dark-green);position:relative;padding-bottom:4px;line-height:20px;white-space:nowrap;}
.nav-account::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--beige-deep);transition:width .3s ease;}
.nav-account:hover::after{width:100%;}
.nav-account-mobile{display:none;}
@media (max-width:900px){.nav-cta .nav-account{display:none;}.nav-account-mobile{display:list-item;}}
@media (min-width:901px) and (max-width:1150px){nav ul{gap:18px;}nav ul li a,.nav-account{font-size:12.5px;letter-spacing:.06em;}.nav-cta{gap:16px;}.nav-cart{padding:10px 14px;}}
@media (min-width:1200px){.nav-account{font-size:15.5px;letter-spacing:.1em;}.nav-cta{gap:80px;}.nav-cart{padding:12px 26px;font-size:14px;}}

/* Footer-Spalten oben bündig, Logo doppelt so groß (26.09.2026) */
.footer-grid{align-items:start;}
.footer-grid .logo-mark{height:128px;}
@media (max-width:900px){.footer-grid .logo-mark{height:96px;}.footer-brand{justify-content:flex-start;}}

/* ---------- Olivenöl-Wissen (26.09.2026): heller Magazin-Kasten, lädt zum Lesen statt Kaufen ein ---------- */
.spotlight-learn{background:#f8f2e4;border:1px solid rgba(47,61,40,.12);box-shadow:0 24px 56px rgba(74,56,30,.12);}
.spotlight-learn .spotlight-eyebrow{color:#8f6d3f;}
.spotlight-learn .spotlight-content h2{color:var(--dark-green);}
.spotlight-learn .spotlight-content p{color:#3f3d34;}
.spotlight-learn .spotlight-features li{color:var(--dark-green);font-size:15px;}
.spotlight-questions li::before{content:"?";font-family:'Playfair Display',serif;font-size:17px;line-height:1.1;color:#8f6d3f;}
.spotlight-badge.spotlight-badge-soon{display:inline-flex;align-items:center;gap:8px;background:#fdf6ec;color:#9a4d12;}
.soon-leaf{width:16px;height:16px;flex:0 0 16px;background:#d9772b;-webkit-mask:url(aromaneo_leaf_icon.png) center/contain no-repeat;mask:url(aromaneo_leaf_icon.png) center/contain no-repeat;animation:aroLeafPulse 1.8s ease-in-out infinite;}
@keyframes aroLeafPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}
.spotlight-learn-btn{display:inline-flex;align-items:center;gap:10px;background:var(--dark-green);border-color:var(--dark-green);color:var(--cream);font-weight:600;}
.spotlight-learn-btn:hover{background:var(--beige-deep);border-color:var(--beige-deep);color:var(--cream);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.15);}
.spotlight-learn-note{font-size:13.5px;color:#5c5c50;}
@media (min-width:901px){.spotlight-learn .spotlight-media{order:2;}}
@media (prefers-reduced-motion:reduce){.soon-leaf{animation:none;}}

/* Größeres Logo in der Kopfzeile, Kopfzeile bleibt gleich hoch (26.09.2026) */
@media (min-width:901px) and (max-width:1199px){header .logo-mark{height:52px;margin:-6px 0;}}
@media (min-width:1200px){header .logo-mark{height:72px;margin:-9px 0;}}
@media (max-width:900px){header .logo-mark{height:76px;margin:-6px 0 -6px 6px;}}

/* Knöpfe in den Bundle-Kästen (26.09.2026): Kaufen + Mehr erfahren, Öle als Lern-Knopf */
.spotlight-actions{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap;}
.spotlight-more{font-size:14px;letter-spacing:.04em;color:var(--cream);text-decoration:underline;text-underline-offset:4px;}
.spotlight-more:hover{color:var(--gold);}
.spotlight-more-btn{display:inline-flex;align-items:center;gap:10px;background:transparent;border-color:rgba(240,230,210,.75);color:var(--cream);font-weight:600;}
.spotlight-more-btn:hover{background:var(--cream);border-color:var(--cream);color:var(--dark-green);transform:translateY(-2px);}

/* "In den Korb" auf der Landingpage: kurze Rückmeldung am Knopf */
.btn[data-add-to-cart].is-adding{opacity:.7;pointer-events:none;}
.btn[data-add-to-cart].is-added{background:var(--cream);border-color:var(--cream);color:var(--dark-green);}


/* ---------- Bundles: Computer = 3 Karten nebeneinander, Handy/Tablet = wischen (2026-09-26) ---------- */
.spotlight-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;}
.spotlight-rail .spotlight-panel{margin-top:0;display:flex;flex-direction:column;border-radius:24px;box-shadow:0 18px 44px rgba(31,40,26,.20);}
.spotlight-rail .spotlight-learn{box-shadow:0 18px 44px rgba(74,56,30,.12);}
.spotlight-rail .spotlight-media{min-height:0;aspect-ratio:4/3;flex:0 0 auto;}
.spotlight-rail .spotlight-content{padding:30px 28px 32px;justify-content:flex-start;flex:1 1 auto;}
.spotlight-rail .spotlight-content h2{font-size:clamp(24px,2.1vw,30px);margin-bottom:14px;}
.spotlight-rail .spotlight-content p{font-size:15px;margin-bottom:20px;}
.spotlight-rail .spotlight-features{margin-bottom:24px;}
.spotlight-rail .spotlight-footer{margin-top:auto;flex-direction:column;align-items:flex-start;gap:16px;}
.spotlight-dots{display:none;}
.spotlight-rail .spotlight-media{order:-1;}
.spotlight-rail + .spotlight-dots + script + .products-more, .spotlight-rail ~ .products-more{margin-top:40px;}
@media (max-width:1000px){
  #produkte{overflow-x:clip;}
  .spotlight-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(50% - 50vw);padding:6px calc(50vw - 50%) 18px;scroll-padding-inline:calc(50vw - 50%);}
  .spotlight-rail::-webkit-scrollbar{display:none;}
  .spotlight-rail .spotlight-panel{flex:0 0 min(84%,420px);scroll-snap-align:start;border-radius:22px;box-shadow:0 12px 28px rgba(31,40,26,.18);}
  .spotlight-dots{display:flex;justify-content:center;gap:8px;margin-top:6px;}
  .spotlight-dots button{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:rgba(47,61,40,.25);cursor:pointer;transition:width .25s,background .25s;}
  .spotlight-dots button.on{width:24px;background:var(--dark-green);}
}
@media (max-width:560px){ .spotlight-rail .spotlight-content{padding:26px 22px 28px;} }
@media (prefers-reduced-motion:reduce){ .spotlight-dots button{transition:none;} }


/* ---------- Gericht des Monats: Produktkarten mit Kaufen (2026-09-26) ---------- */
.gdm-buy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:980px;margin:40px auto 0;}
.gdm-product{display:grid;grid-template-columns:minmax(120px,38%) 1fr;background:#fff;border:1px solid rgba(47,61,40,.10);border-radius:20px;overflow:hidden;box-shadow:0 14px 36px rgba(74,56,30,.10);}
.gdm-product-img{display:block;background:#f4ecdc;}
.gdm-product-img img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1;}
.gdm-product-body{padding:24px 24px 22px;display:flex;flex-direction:column;gap:8px;min-width:0;}
.gdm-product-tag{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#8f6d3f;}
.gdm-product h3{font-family:'Playfair Display',serif;font-size:24px;line-height:1.2;color:var(--dark-green);margin:0;}
.gdm-product p{font-size:14.5px;line-height:1.5;color:#3f3d34;margin:0;}
.gdm-product-price{font-family:'Playfair Display',serif;font-size:22px;color:var(--dark-green);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:4px;}
.gdm-product-price small{font-family:'Jost',sans-serif;font-size:13px;color:#6b6456;}
.gdm-product-note{font-size:12px;color:#6b6456;}
.gdm-product-note a{color:inherit;}
.gdm-product-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:10px;}
.gdm-product-actions .btn{padding:12px 22px;}
.gdm-product .btn-gold{background:#c9a15b;border:1px solid #c9a15b;color:#2f3d28;}
.gdm-product .btn-gold:hover,.gdm-product .btn-gold:focus-visible{background:#b88f4a;border-color:#b88f4a;color:#2f3d28;}
.gdm-product .btn-gold.is-added{background:#2f3d28;border-color:#2f3d28;color:#f0e6d2;}
.gdm-product-more{font-size:14px;color:var(--dark-green);text-decoration:underline;text-underline-offset:3px;}
.gdm-buy-hint{text-align:center;margin-top:18px;font-size:14px;color:#6b6456;}
@media (max-width:860px){ .gdm-buy{grid-template-columns:1fr;max-width:560px;} }
@media (max-width:480px){ .gdm-product{grid-template-columns:110px 1fr;} .gdm-product-body{padding:18px 16px 18px;} .gdm-product h3{font-size:20px;} .gdm-product-img img{aspect-ratio:auto;} }

/* Bundles am Computer breiter als der Textbereich (2026-09-26) */
@media (min-width:1001px){
  #produkte{overflow-x:clip;}
  #produkte .spotlight-rail{--rail-w:min(1680px,calc(100vw - 96px));width:var(--rail-w);margin-left:calc((100% - var(--rail-w)) / 2);gap:28px;}
  #produkte .spotlight-rail .spotlight-content{padding:34px 34px 36px;}
  #produkte .spotlight-rail .spotlight-media{aspect-ratio:16/11;}
}

/* Bundles mobil: kompakter + Wisch-Hinweis (2026-09-26) */
.spotlight-swipe{display:none;}
@media (max-width:1000px){
  .spotlight-rail .spotlight-media{aspect-ratio:16/10;}
  .spotlight-rail .spotlight-content{padding:22px 20px 24px;}
  .spotlight-rail .spotlight-eyebrow{font-size:12px;margin-bottom:8px;}
  .spotlight-rail .spotlight-content h2{font-size:24px;line-height:1.2;margin-bottom:10px;}
  .spotlight-rail .spotlight-content p{font-size:14.5px;line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .spotlight-rail .spotlight-features:not(.spotlight-questions){display:none;}
  .spotlight-rail .spotlight-questions{margin-bottom:16px;gap:6px;}
  .spotlight-rail .spotlight-questions{display:none;}
  .spotlight-rail .spotlight-footer{gap:12px;}
  .spotlight-rail .spotlight-badge{top:14px;left:14px;font-size:11px;padding:6px 12px;}
  .spotlight-swipe{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6b5a3f;}
  .spotlight-swipe .spotlight-dots{margin-top:0;}
  .spotlight-swipe-hint{display:inline-flex;align-items:center;gap:8px;transition:opacity .4s;}
  .spotlight-swipe-hint svg{width:26px;height:14px;animation:aromaneoSwipe 1.6s ease-in-out infinite;}
  .spotlight-swipe.is-used .spotlight-swipe-hint{opacity:0;width:0;overflow:hidden;gap:0;}
}
@keyframes aromaneoSwipe{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
@media (prefers-reduced-motion:reduce){ .spotlight-swipe-hint svg{animation:none;} }

/* Vierte Karte „Alle Produkte“ (2026-09-26) */
@media (min-width:1001px){ #produkte .spotlight-rail{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1400px){ #produkte .spotlight-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;} #produkte .spotlight-rail .spotlight-content{padding:30px 28px 32px;} }
.spotlight-all .spotlight-media img{object-position:center 60%;}

/* Handy: weniger Leerraum zwischen Story, Aufruf und Kontakt (2026-09-26) */
@media (max-width:700px){
  #story{padding-bottom:28px;}
  #story .story-text{margin-bottom:0;}
  #story .story-text p:last-child{margin-bottom:0;}
  #story .story-photo{margin-top:22px;}
  .cta-banner{padding-top:36px;padding-bottom:40px;}
  .cta-banner h2{margin-bottom:10px;}
  .cta-banner p{margin-bottom:20px;}
  #kontakt.contact{padding-top:44px;padding-bottom:44px;}
  #kontakt .section-head, #kontakt .contact-head{margin-bottom:22px;}
}

/* Banner Handy: die drei Sätze wechseln sich ab statt ausgeblendet zu werden (2026-09-26) */
@media (max-width:900px){.aromaneo-banner .banner-text{display:grid !important;place-items:center;gap:0 !important;}.aromaneo-banner .banner-dot{display:none !important;}.aromaneo-banner .banner-item{grid-area:1/1;display:inline-block !important;opacity:0;visibility:hidden;animation:aroBannerRot 12s infinite;}.aromaneo-banner .banner-claim{animation-delay:4s;}.aromaneo-banner .banner-link{animation-delay:8s;}}
@keyframes aroBannerRot{0%{opacity:0;visibility:visible;transform:translateY(5px);}4%,30%{opacity:1;visibility:visible;transform:none;}34%{opacity:0;visibility:visible;transform:translateY(-5px);}35%,100%{opacity:0;visibility:hidden;}}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.aromaneo-banner .banner-item{animation:none;}.aromaneo-banner .banner-item:first-child{opacity:1;visibility:visible;}}

/* Gericht des Monats: ehrlicher Hinweis über den Produktkarten (2026-09-28) */
.gdm-buy-intro{max-width:680px;margin:40px auto -16px;text-align:center;font-family:'Playfair Display',serif;font-style:italic;font-size:19px;line-height:1.55;color:#3f3d34;}
.gdm-buy-intro strong{font-style:normal;font-weight:600;color:var(--dark-green,#2f3d28);}
@media (max-width:600px){.gdm-buy-intro{font-size:17px;margin-top:28px;}}

/* Produktkarten am Computer kompakter – nicht mehr so lang (2026-09-28) */
@media (min-width:1001px){
  #produkte .spotlight-rail .spotlight-content{padding:24px 26px 26px;}
  #produkte .spotlight-rail .spotlight-eyebrow{font-size:12px;margin-bottom:8px;}
  #produkte .spotlight-rail .spotlight-content h2{font-size:clamp(22px,1.7vw,27px);line-height:1.2;margin-bottom:10px;}
  #produkte .spotlight-rail .spotlight-content p{font-size:14.5px;line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  #produkte .spotlight-rail .spotlight-features{display:none;}
  #produkte .spotlight-rail .spotlight-footer{gap:12px;}
  #produkte .spotlight-rail .spotlight-learn .spotlight-footer, #produkte .spotlight-rail .spotlight-learn .spotlight-actions{gap:10px;}
}
@media (min-width:1001px) and (max-width:1399px){
  #produkte .spotlight-rail .spotlight-panel{flex-direction:row;}
  #produkte .spotlight-rail .spotlight-media{flex:0 0 42%;aspect-ratio:auto;min-height:0;}
  #produkte .spotlight-rail .spotlight-content{flex:1 1 auto;}
}