/* =========================================================
   myTEXTURAS – Startseite (Layout 1:1 nach mytexturas_layout_1zu1.html)
   Eigenes Stylesheet: die Startseite laedt style.css bewusst nicht,
   damit die generischen Klassennamen (.btn, .section, .cat, .product,
   .news, header, footer) sich nicht mit dem Rest der Seite beissen.
   ========================================================= */
:root{
  --cream:#f7f2e9;
  --paper:#fffdf9;
  --ink:#11100e;
  --gold:#c89a56;
  --muted:#777067;
  --line:#ded6ca;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
img{display:block;width:100%}
.shell{width:min(1180px,94vw);margin:auto}
header{
  height:72px;
  display:flex;align-items:center;
  background:#fffdf9;
  border-bottom:1px solid rgba(0,0,0,.04);
  position:sticky;top:0;z-index:50;
}
.nav{
  width:min(1180px,94vw);margin:auto;
  display:grid;grid-template-columns:260px 1fr 180px;align-items:center;gap:24px;
}
/* Die Wortmarke ist ein freigestelltes Bild, keine nachgebaute Schrift.
   Der Entwurf hatte sie mit einer Schreibschrift imitiert - das traf weder
   den Schwung des goldenen „my" noch die Laufweite der Versalien. */
.brand{display:flex;align-items:center}
.brand img{width:auto;height:30px}
.footer-grid .brand img{height:42px}
.menu{display:flex;justify-content:center;gap:28px;font-size:12px}
.menu a{opacity:.82}
.icons{display:flex;justify-content:flex-end;gap:18px;font-size:15px}
.hero{
  background:#090909;
  color:#fff;
}
.hero-grid{
  width:min(1180px,94vw);margin:auto;
  min-height:480px;
  display:grid;grid-template-columns:.92fr 1.08fr;
}
.hero-copy{
  padding:62px 38px 54px 0;
  display:flex;flex-direction:column;justify-content:center;
}
.kicker{
  color:var(--gold);font-size:14px;line-height:1.55;font-weight:700;letter-spacing:.12em;text-transform:uppercase
}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;
  /* Mitwachsend statt in zwei Stufen: „Geschmackserlebnis." ist 19 Zeichen
     und lief bei 42 px aus einem 360-px-Fenster heraus. */
  font-size:clamp(30px, 8.4vw, 52px);
  line-height:1.02;font-weight:400;letter-spacing:-.035em;margin:16px 0 18px
}
.hero p{font-size:16px;line-height:1.55;color:#e7e2db;max-width:520px;margin:0 0 24px}
.hero-actions{display:flex;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;border:1px solid rgba(255,255,255,.5);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase
}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#111}
.hero-image{
  background:url("../img/hero.jpg?v=559533") center/cover no-repeat;
  min-height:480px;position:relative
}
.hero-image:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#090909 0%,transparent 24%)
}
.trust{
  background:#fffdf9;border-bottom:1px solid var(--line)
}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{padding:20px 16px;text-align:center}
.trust-item .ico{font-size:26px;margin-bottom:8px}
.trust-item b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.trust-item span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.categories{padding:26px 0 6px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat{
  min-height:160px;position:relative;overflow:hidden;color:#fff;
  background-size:cover;background-position:center;
}
.cat:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.10))}
.cat .inner{position:absolute;z-index:2;left:24px;bottom:20px;right:20px}
.cat h3{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:0 0 8px}
.cat p{font-size:12px;line-height:1.45;margin:0 0 12px}
.arrow{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center}
.section{padding:22px 0 34px}
.section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}
.section-title h2{font-family:Georgia,serif;font-size:31px;font-weight:400;margin:0}
.section-title a{font-size:12px}
.products{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.product{text-align:center}
.product-photo{
  height:230px;background:transparent;border-radius:4px;overflow:hidden;
  display:flex;align-items:center;justify-content:center
}
/* Freisteller: die ganze Flasche zeigen, nicht den Ausschnitt fuellen.
   Die Bilddatei hat einen Alphakanal, der Studiohintergrund ist entfernt
   (siehe cutout() in build_images.py). Die Kachel bleibt deshalb durchsichtig -
   die Flasche steht direkt auf der Flaeche der Seite. */
.product-photo img{height:100%;width:100%;object-fit:contain}
.product h4{font-size:12px;margin:10px 0 4px;text-transform:uppercase}
.product span{font-size:11px;color:var(--muted)}
.audiences{padding:10px 0 12px}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.aud{
  min-height:230px;background-size:cover;background-position:center;position:relative;color:#fff;overflow:hidden
}
.aud:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18))}
.aud .copy{position:absolute;z-index:2;left:24px;right:24px;top:18px}
.aud small{font-family:Georgia,serif;color:#d7b477;font-size:18px}
.aud h3{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:4px 0 10px}
.aud p{font-size:12px;line-height:1.45;max-width:210px}
.aud .btn{background:rgba(200,154,86,.95);border-color:var(--gold);color:#111;margin-top:8px}
.recipes{padding:10px 0 36px}
.recipe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.recipe img{height:120px;object-fit:cover}
.recipe h4{font-family:Georgia,serif;font-weight:400;font-size:16px;margin:8px 0 3px}
.recipe p{font-size:11px;color:var(--muted);margin:0}
.news{
  background:#10110f;color:#fff;padding:34px 0
}
.news-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.news h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:0 0 8px}
.news p{font-size:12px;color:#bbb5ad}
.signup{display:flex;max-width:480px}
.signup input{flex:1;background:transparent;border:1px solid #6d6d68;color:#fff;padding:14px}
.signup button{width:46px;border:0;background:#fff;font-size:18px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}
.values b{display:block;color:#d6b47a;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.values span{display:block;font-size:10px;color:#b6afa6;margin-top:4px}
footer{background:#fffdf9;padding:22px 0}
.footer-grid{display:grid;grid-template-columns:260px 1fr 160px;align-items:center;gap:20px}
.footer-nav{display:flex;justify-content:center;gap:24px;font-size:11px}
.social{text-align:right;font-size:14px;letter-spacing:.35em}
@media(max-width:900px){
  .nav{grid-template-columns:1fr auto}.menu{display:none}
  .hero-grid{grid-template-columns:1fr}.hero-copy{padding:48px 0}
  /* Das Hero-Motiv ist ein breites Banner. Ein hochkanter Ausschnitt zeigte nur
     noch die Flaschenmitte. Unter 900 px gilt deshalb ein eigener Zuschnitt im
     Querformat, und die Hoehe folgt seinem Seitenverhaeltnis - so ist immer die
     ganze Szene zu sehen statt eines beliebigen Ausschnitts. */

  .hero-image{min-height:0;aspect-ratio:1100/760;background-image:url("../img/hero-m.jpg?v=559533")}
  .trust-grid{grid-template-columns:1fr 1fr}.cat-grid,.aud-grid{grid-template-columns:1fr}
  .products{grid-template-columns:repeat(2,1fr)}.recipe-grid{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-nav{flex-wrap:wrap}.social{text-align:center}
}
@media(max-width:560px){
  .brand img{height:24px}.footer-grid .brand img{height:36px}.icons{gap:11px}
  .section-title{align-items:flex-start;gap:12px}
}

/* =========================================================
   Ergaenzungen gegenueber der Mockup-Datei
   Alle Regeln hier sind entweder pixelneutral (unsichtbar bis Fokus /
   nur bei abweichender Kachelzahl aktiv) oder technisch erzwungen.
   ========================================================= */

/* 1. Hintergrundbilder als Klassen statt style="" –
      die Content-Security-Policy laesst style-src 'self' zu, keine
      Inline-Styles. Optisch identisch zum Mockup. */
.bg-aperitifs{background-image:url("../img/aperitifs.jpg?v=559533")}
.bg-aperitifs-card{background-image:url("../img/aperitifs-card.jpg?v=559533")}
.bg-aperitifs-og{background-image:url("../img/aperitifs-og.jpg?v=559533")}
.bg-aperitifs-sheet{background-image:url("../img/aperitifs-sheet.jpg?v=559533")}
.bg-apple-touch-icon{background-image:url("../img/apple-touch-icon.png?v=553629")}
.bg-aud-home{background-image:url("../img/aud-home.jpg?v=559532")}
.bg-aud-pro{background-image:url("../img/aud-pro.jpg?v=559532")}
.bg-aud-trade{background-image:url("../img/aud-trade.jpg?v=559532")}
.bg-bar{background-image:url("../img/bar.jpg?v=116745")}
.bg-cat-kitchen{background-image:url("../img/cat-kitchen.jpg?v=559532")}
.bg-cat-nut{background-image:url("../img/cat-nut.jpg?v=559532")}
.bg-cat-smoke{background-image:url("../img/cat-smoke.jpg?v=559532")}
.bg-favicon-32{background-image:url("../img/favicon-32.png?v=553629")}
.bg-hero{background-image:url("../img/hero.jpg?v=559533")}
.bg-hero-m{background-image:url("../img/hero-m.jpg?v=559533")}
.bg-hero-og{background-image:url("../img/hero-og.jpg?v=559533")}
.bg-holzkohleoel{background-image:url("../img/holzkohleoel.png?v=559560")}
.bg-holzkohleoel-card{background-image:url("../img/holzkohleoel-card.png?v=559569")}
.bg-holzkohleoel-og{background-image:url("../img/holzkohleoel-og.jpg?v=559583")}
.bg-holzkohleoel-sheet{background-image:url("../img/holzkohleoel-sheet.png?v=559577")}
.bg-icon-512{background-image:url("../img/icon-512.png?v=553629")}
.bg-idea-burger{background-image:url("../img/idea-burger.jpg?v=116746")}
.bg-idea-dressing{background-image:url("../img/idea-dressing.jpg?v=116746")}
.bg-idea-pizza{background-image:url("../img/idea-pizza.jpg?v=116746")}
.bg-idea-potatoes{background-image:url("../img/idea-potatoes.jpg?v=116746")}
.bg-idea-steak{background-image:url("../img/idea-steak.jpg?v=116746")}
.bg-idea-veggies{background-image:url("../img/idea-veggies.jpg?v=116746")}
.bg-kitchen{background-image:url("../img/kitchen.jpg?v=116745")}
.bg-kuerbiskernoel{background-image:url("../img/kuerbiskernoel.png?v=559626")}
.bg-kuerbiskernoel-card{background-image:url("../img/kuerbiskernoel-card.png?v=559634")}
.bg-kuerbiskernoel-og{background-image:url("../img/kuerbiskernoel-og.jpg?v=559648")}
.bg-kuerbiskernoel-sheet{background-image:url("../img/kuerbiskernoel-sheet.png?v=559642")}
.bg-logo-full-dark{background-image:url("../img/logo-full-dark.png?v=553626")}
.bg-logo-light{background-image:url("../img/logo-light.png?v=553623")}
.bg-louperitif-bitter{background-image:url("../img/louperitif-bitter.jpg?v=559534")}
.bg-louperitif-bitter-card{background-image:url("../img/louperitif-bitter-card.jpg?v=559534")}
.bg-louperitif-bitter-og{background-image:url("../img/louperitif-bitter-og.jpg?v=559534")}
.bg-louperitif-bitter-sheet{background-image:url("../img/louperitif-bitter-sheet.jpg?v=559534")}
.bg-louperitif-lowle{background-image:url("../img/louperitif-lowle.jpg?v=559533")}
.bg-louperitif-lowle-card{background-image:url("../img/louperitif-lowle-card.jpg?v=559534")}
.bg-louperitif-lowle-og{background-image:url("../img/louperitif-lowle-og.jpg?v=559534")}
.bg-louperitif-lowle-sheet{background-image:url("../img/louperitif-lowle-sheet.jpg?v=559534")}
.bg-pistazienoel{background-image:url("../img/pistazienoel.png?v=559584")}
.bg-pistazienoel-card{background-image:url("../img/pistazienoel-card.png?v=559593")}
.bg-pistazienoel-og{background-image:url("../img/pistazienoel-og.jpg?v=559606")}
.bg-pistazienoel-sheet{background-image:url("../img/pistazienoel-sheet.png?v=559600")}
.bg-rauchoel{background-image:url("../img/rauchoel.png?v=559536")}
.bg-rauchoel-card{background-image:url("../img/rauchoel-card.png?v=559545")}
.bg-rauchoel-og{background-image:url("../img/rauchoel-og.jpg?v=559559")}
.bg-rauchoel-sheet{background-image:url("../img/rauchoel-sheet.png?v=559553")}
.bg-smoke{background-image:url("../img/smoke.jpg?v=116745")}
.bg-walnussoel{background-image:url("../img/walnussoel.png?v=559607")}
.bg-walnussoel-card{background-image:url("../img/walnussoel-card.png?v=559612")}
.bg-walnussoel-og{background-image:url("../img/walnussoel-og.jpg?v=559625")}
.bg-walnussoel-sheet{background-image:url("../img/walnussoel-sheet.png?v=559619")}

/* 2. Sprungmarke zum Inhalt – ausserhalb des Viewports, kein Pixel Unterschied. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:#111;padding:12px 18px;font-weight:700
}
.skip:focus{left:12px;top:12px}

/* 3. Sichtbarer Tastaturfokus – erscheint nur bei Bedienung ohne Maus. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* 4. Hochgestelltes Markenzeichen aus et() – gleiche Groesse wie .brand sup. */
.tm{font-size:.5em;vertical-align:super;line-height:0;letter-spacing:0;margin-left:.06em;font-weight:inherit}

/* 5. Kachelzahlen aus der Datenbank. Die Basisregeln oben bleiben unveraendert;
      diese Modifier greifen nur, wenn die Zahl vom Mockup abweicht. */
.cat-grid.is-1{grid-template-columns:1fr}
.cat-grid.is-2{grid-template-columns:repeat(2,1fr)}
.cat-grid.is-4{grid-template-columns:repeat(4,1fr)}
.products.is-2{grid-template-columns:repeat(2,1fr)}
.products.is-3{grid-template-columns:repeat(3,1fr)}
.products.is-4{grid-template-columns:repeat(4,1fr)}
.recipe-grid.is-2{grid-template-columns:repeat(2,1fr)}
.recipe-grid.is-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
  .cat-grid.is-1,.cat-grid.is-2,.cat-grid.is-4{grid-template-columns:1fr}
  .products.is-2,.products.is-3,.products.is-4{grid-template-columns:repeat(2,1fr)}
  .recipe-grid.is-2,.recipe-grid.is-3{grid-template-columns:1fr 1fr}
}
/* Unter 560 px greift der Mobilblock am Dateiende: dort stehen Produkte und
   Rezepte zweispaltig, unabhaengig von der Anzahl. Eine einspaltige Regel
   stand hier frueher und widersprach dem. */

/* 6. Pflichtangaben in der Fusszeile: Alkoholhinweis, Markenhinweis, Copyright.
      Das Mockup hat dafuer keine Zeile vorgesehen, weglassen waere aber ein
      rechtlicher Rueckschritt (siehe README, settings.alcohol_notice). */
.legal{
  border-top:1px solid var(--line);margin-top:18px;padding-top:14px;
  font-size:10px;line-height:1.6;color:var(--muted)
}
.legal p{margin:0 0 4px}
.legal p:last-child{margin:0}

/* 7. Flash-Meldungen (Login, Formulare) – uebernommen aus dem Seitengeruest. */
.flash{background:var(--paper);border-bottom:1px solid var(--line);padding:12px 0;font-size:12px}
.flash--err{background:#f6e7e3;color:#8a2f1c}
.flash--ok{background:#eaf1e6;color:#33562a}

/* 8. Formularfeld im Newsletter: Platzhalterfarbe, sonst kaum lesbar auf #10110f. */
.signup input::placeholder{color:#8f8a83;opacity:1}
.signup button{cursor:pointer}

/* 8b. Fertige Kachelgrafiken: Beschriftung, Unterzeile und Pfeil stecken im
       Bild. Der Verlauf des Entwurfs entfaellt hier - die Grafiken bringen
       ihre eigene Abdunklung mit, zwei Lagen uebereinander lassen das Motiv
       absaufen. Bei .aud steht nur noch die Schaltflaeche im HTML; sie rueckt
       an den unteren Rand, wo die Grafik Platz laesst. */
.cat--art:after,.aud--art:after{content:none}
.aud--art .copy{top:auto;bottom:20px}
@media(max-width:900px){
  /* Einspaltig wird die Kachel sehr breit und flach - bei 860 px waere sie
     5:1 und wuerde die eingebrannte Schrift oben und unten abschneiden.
     Unterhalb des Umbruchs richtet sich die Hoehe deshalb nach dem Bild:
     die Grafik ist damit auf jeder Breite vollstaendig zu sehen. */
  .cat--art{min-height:0;aspect-ratio:880/364}
  .aud--art{min-height:0;aspect-ratio:880/522}
}
}

/* 8c. Strichzeichnungen aus icons.php. Sie erben die Textfarbe, damit ein
       Symbol in heller und dunkler Umgebung ohne zweite Datei funktioniert. */
.ico{display:block;flex:none}
.icons svg{stroke-width:1.4}
.icons a,.icons span{display:inline-flex;align-items:center;gap:2px;color:inherit}
.icons .lang{font-size:13px;letter-spacing:.04em}
.trust-item .ico{margin:0 auto 8px}

/* Rezeptzeile: Titel und Unterzeile links, runder Pfeil rechts. */
.recipe-cap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.recipe-cap h4{margin:8px 0 3px}
.arrow--dark{width:30px;height:30px;border-color:rgba(17,16,14,.28);color:var(--ink);flex:none}

/* Werteblock: Symbol ueber der Beschriftung, Markenschriftzug rechts daneben. */
.values .ico{margin:0 auto 8px;color:#d6b47a}
.values .claim{
  grid-column:-2/-1;margin:0;align-self:center;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:26px;color:#e6dccb;line-height:1.1;text-align:center
}
.news-grid .values{grid-template-columns:repeat(3,1fr) auto;gap:22px}
.values .claim{min-width:0}

/* 9. Kacheln sind jetzt Links statt reiner Container – ohne display:block
      greifen min-height und Positionierung auf einem <a> nicht.
      Optisch identisch, nur klickbar. */
.cat,.product,.recipe{display:block}

/* 10. <picture> aus picture(): das Element ist von Haus aus inline und
       wuerde die Hoehenangaben der Bilder ins Leere laufen lassen. */
.product-photo picture{display:block;width:100%;height:100%}
.recipe picture{display:block}

/* 11. Unterzeile der Abschnittsueberschrift – im Entwurf ein inline-Style,
       hier als Klasse. Gleiche Werte. */
.section-title .sub{font-size:12px;color:var(--muted);margin:4px 0 0}

/* 12. Gold-Auszeichnung aus highlight(): |Wort| in den Einstellungen. */
.gold{color:var(--gold)}

/* 13. Nur fuer Screenreader (Beschriftung des Newsletter-Feldes). */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 14. Rueckfallebene, wenn ein Produkt noch kein Foto hat: product_visual()
       liefert dann die gezeichnete Flasche aus style.css, die hier nicht
       geladen ist. Reduzierte Fassung, damit die Kachel nicht bricht. */
.bottle{
  width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(180deg,#2a2723,#14120f);color:#f3ede1
}
.bottle__label{
  background:#f7f2e9;color:#11100e;width:74%;margin-bottom:16%;padding:10px 6px;
  text-align:center;line-height:1.25
}
.bottle__label b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.bottle__label small{display:block;font-size:8px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

/* =========================================================
   15. Schmale Fenster
   Der Entwurf war fuer den Schreibtisch gezeichnet. Unter 900 px
   stimmten die Verhaeltnisse nicht mehr: Produkte und Rezepte standen
   einzeln untereinander, die freigestellte Flasche verlor sich in einer
   viel zu breiten Kachel, und die Hauptnavigation war gar nicht
   erreichbar. Dieser Block korrigiert das, ohne die Ansicht am
   Schreibtisch anzufassen.
   ========================================================= */

/* --- Menue fuer schmale Fenster ------------------------------------- */
.menuBtn{
  display:none;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:0;background:none;
  color:inherit;cursor:pointer
}
.menuBtn .ico--close{display:none}
body.menu-offen .menuBtn .ico--menu{display:none}
body.menu-offen .menuBtn .ico--close{display:block}

@media(max-width:900px){
  .menuBtn{display:inline-flex}

  /* Die Leiste wird zur Klappliste unter der Kopfzeile. */
  .menu{
    display:none;position:absolute;left:0;right:0;top:72px;
    flex-direction:column;justify-content:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(17,16,14,.10);
    padding:6px 0;z-index:60
  }
  body.menu-offen .menu{display:flex}
  .menu a{
    padding:13px min(3vw,24px);font-size:14px;opacity:1;
    border-top:1px solid rgba(0,0,0,.05)
  }
  .menu a:first-child{border-top:0}

  /* Die Sprachwahl hat nur einen Eintrag und kostet in der schmalen
     Kopfzeile den Platz, den der Menueschalter braucht. */
  .icons .lang{display:none}
  .icons{gap:14px}
}

/* --- Verhaeltnisse --------------------------------------------------- */
@media(max-width:560px){
  /* Zwei Spalten statt einer: eine Flasche allein in voller Breite laesst
     rechts und links so viel Leerraum, dass das Produkt verschwindet. */
  .products,.products.is-2,.products.is-3,.products.is-4,
  .recipe-grid,.recipe-grid.is-2,.recipe-grid.is-3{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}

  .products{gap:12px}
  .recipe-grid{gap:10px}

  /* Kachelhoehe an die schmalere Spalte anpassen, sonst steht die Flasche
     wieder in einem zu hohen Kasten. */
  .product-photo{height:min(52vw,200px)}
  .product h4{font-size:11px;margin:8px 0 3px}
  .product span{font-size:10px}

  .recipe img{height:min(30vw,120px)}
  .recipe h4{font-size:14px}
  .recipe p{font-size:10px}
  .recipe-cap{gap:6px}
  .arrow--dark{width:26px;height:26px}
  .arrow--dark svg{width:13px;height:13px}

  .trust-item{padding:16px 10px}
  .trust-item b{font-size:10px}
  .trust-item span{font-size:10px}

  /* Zwei Schaltflaechen nebeneinander passen nicht in 360 px. */
  .hero-actions{flex-wrap:wrap;gap:10px}
  .hero-actions .btn{flex:1 1 auto;min-width:150px}
  .kicker{font-size:12px;letter-spacing:.1em}
  .hero p{font-size:15px}

  .section-title h2,.recipes h2{font-size:26px}
  .section-title a{font-size:11px}
}

/* --- Newsletter und Werte -------------------------------------------- */
@media(max-width:900px){
  /* Die Schriftzeile stand als eigene Rasterspalte und erzwang ueber ihre
     Mindestbreite einen waagerechten Ueberlauf der ganzen Seite. Unter
     900 px steht sie deshalb unter den drei Werten. */
  .news-grid .values{grid-template-columns:repeat(3,1fr);gap:16px}
  .values .claim{grid-column:1/-1;font-size:24px;margin-top:4px}
  .values b{font-size:9px}
  .values span{font-size:9px;line-height:1.45}
  .signup{max-width:none}
  .news{padding:28px 0}
}

/* --- Sehr schmale Geraete --------------------------------------------- */
@media(max-width:400px){
  /* Wortmarke plus vier Symbole passen bei 320 px nicht in die Zeile.
     Die Marke wird kleiner, der funktionslose Warenkorb entfaellt. */
  .brand img{height:21px}
  .footer-grid .brand img{height:32px}
  .icons{gap:12px}
  .icons .ico-warenkorb{display:none}
}

/* --- Fusszeile -------------------------------------------------------- */
@media(max-width:900px){
  .footer-grid{gap:16px;justify-items:center}
  .footer-nav{gap:14px 18px}
  .social{display:flex;gap:16px;justify-content:center}
  .legal{text-align:center}
}

/* =========================================================
   16. Produktseite
   Gleiche helle Flaeche wie die Startseite, gleiche Kopf- und Fusszeile.
   Aufbau nach Vorlage: Brotkrume, Hero mit Bild links und Text rechts,
   Anwendungsteil, drei Kacheln, drei Faktenspalten, Listungsangaben,
   Anfrage, Querverweis.
   ========================================================= */

.crumbs{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0 10px;font-size:12px;color:var(--muted)
}
.crumbs__path{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.crumbs__path a:hover{color:var(--ink)}
.crumbs__path [aria-current]{color:var(--ink)}
.crumbs__claim{
  color:var(--gold);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-align:right
}

.rule{border:0;border-top:1px solid var(--gold);width:72px;margin:20px 0}

/* --- Hero ------------------------------------------------------------ */
.pHero{padding:4px 0 40px}
.pHero-grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:48px;align-items:center}
.pHero-media{
  position:relative;background:#e9decd;border-radius:2px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(320px,38vw,470px);padding:14px
}
.pHero-media picture{display:block;max-height:100%}
/* Freisteller: ganz zeigen, nicht die Flaeche fuellen. Sonst laeuft die
   Flasche unten aus dem Bild. */
.pHero-media img{
  width:auto;max-width:100%;height:clamp(290px,37vw,440px);
  object-fit:contain;display:block
}
.script{
  position:absolute;left:24px;top:22px;margin:0;max-width:9.5em;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:19px;line-height:1.35;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45)
}
/* Auf der hellen Flaeche des Hero traegt weisse Schrift nicht - dort
   steht sie dunkel, ohne Schatten. */
.script--hell{color:#6b5a3f;text-shadow:none}

.pHero-copy .eyebrow{
  display:block;color:var(--muted);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:6px
}
.pHero h1{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  /* 74 px waren zu gross: „KUERBISKERNOEL" lief aus der Spalte. */
  font-size:clamp(34px,5.2vw,64px);line-height:1;letter-spacing:-.03em;
  margin:0;text-transform:uppercase;overflow-wrap:anywhere
}
/* In der Schlagzeile waere das ® bei 0.5em ganze 37 px gross. */
.pHero h1 .tm{font-size:.2em;vertical-align:.9em;margin-left:.12em}
/* Stimmungsbild statt Freisteller: die Flaeche fuellen, nicht einpassen. */
.pHero-media--foto{padding:0;background:none;min-height:0}
.pHero-media--foto picture{display:block;width:100%}
.pHero-media--foto img{width:100%;height:auto;aspect-ratio:1100/950;object-fit:cover}
.pUse-media--foto img{height:auto;aspect-ratio:1100/760}

.pHero-sub{
  font-family:Georgia,serif;font-size:clamp(17px,2.1vw,24px);
  font-weight:400;margin:10px 0 0;color:var(--ink);max-width:22ch
}
.pHero-lead{font-size:15px;line-height:1.65;max-width:44ch}
.prose{font-size:14px;line-height:1.62;color:#3d3831}
.prose p{margin:0 0 .8em}
.prose p:last-child{margin:0}

.badges{
  display:grid;grid-template-columns:repeat(4,minmax(0,86px));gap:16px;
  margin-top:30px;justify-content:start
}
.badges li{text-align:center;font-size:10.5px;line-height:1.35}
.badges b{min-height:2.6em;display:flex;align-items:center;justify-content:center;text-align:center}
.badges__ring{
  width:54px;height:54px;margin:0 auto 9px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)
}
.badges b{font-weight:700;font-size:11px}
.badges span{display:block;color:var(--muted)}

/* --- Anwendung ------------------------------------------------------- */
.pUse{padding:8px 0 18px}
.pUse-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.kicker-ink{
  display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:12px
}
.pUse h2{
  font-family:Georgia,serif;font-weight:400;font-size:clamp(28px,4.4vw,44px);
  line-height:1.06;letter-spacing:-.02em;margin:0 0 14px
}
.pUse-copy p{font-size:14px;line-height:1.62;color:#3d3831;margin:0}
/* Die Regel darueber setzt margin:0 - im Fliesstext braucht es aber den
   Absatzabstand, sonst laufen die Absaetze zu einem Block zusammen. */
.pUse-copy .prose{font-size:13.5px}
.pUse-copy .prose p{margin:0 0 .85em}
.pUse-copy .prose p:last-child{margin:0}
.pUse-media{position:relative;overflow:hidden;border-radius:2px}
.pUse-media img{width:100%;height:clamp(220px,30vw,320px);object-fit:cover;display:block}
.pUse-media .script{left:auto;right:26px;top:26px;text-align:right;max-width:40%}

/* --- Anwendungskacheln ----------------------------------------------- */
.pTiles{padding:14px 0 26px}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.useTile{position:relative;overflow:hidden;border-radius:2px}
.useTile img{width:100%;height:180px;object-fit:cover;display:block}
.useTile:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62))
}
.useTile b{
  position:absolute;z-index:2;left:0;right:0;bottom:14px;text-align:center;
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase
}

/* --- Fakten ---------------------------------------------------------- */
.pFacts{padding:24px 0 34px;border-top:1px solid var(--line)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.fact h2{
  font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px
}
.fact h2.fact__more{margin-top:18px}
.fact p{font-size:13px;line-height:1.6;color:#3d3831;margin:0}
.fact__note{color:var(--muted);font-size:12px;margin-top:6px}
.fact__packs{font-size:14px}
.fact__packs span{color:var(--line);margin:0 8px}
.checks{display:grid;gap:9px}
.checks li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45}
.checks svg{color:var(--gold);margin-top:2px;flex:none}
.tipp{
  display:flex;gap:12px;background:#efe8dd;padding:16px 18px;border-radius:2px
}
.tipp svg{color:var(--ink);flex:none;margin-top:2px}
.tipp .prose{font-size:13px}

/* --- Listungsangaben -------------------------------------------------- */
.pData{padding:30px 0;background:var(--paper);border-top:1px solid var(--line)}
.pData > .shell > h2{
  font-family:Georgia,serif;font-weight:400;font-size:26px;margin:0 0 18px
}
.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.dataCol h3{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 10px
}
.dataCol h3 small{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.dataTable{width:100%;border-collapse:collapse;font-size:13px}
.dataTable th,.dataTable td{
  text-align:left;padding:7px 0;border-bottom:1px solid var(--line);font-weight:400
}
.dataTable td{text-align:right;color:var(--muted)}
.dataTable tr.is-sub th{padding-left:14px;color:var(--muted)}
.legalNote{font-size:11px;color:var(--muted);margin:18px 0 0;line-height:1.55}

/* --- Anfrage ---------------------------------------------------------- */
.pAsk{padding:32px 0;border-top:1px solid var(--line)}
.pAsk-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.pAsk h2{font-family:Georgia,serif;font-weight:400;font-size:28px;margin:0 0 6px}
.pAsk p{font-size:13px;color:var(--muted);margin:0;max-width:52ch}
.pAsk-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn--ink{border-color:rgba(17,16,14,.35);color:var(--ink)}
.pAsk-actions .link{font-size:12px;text-decoration:underline;text-underline-offset:3px}

/* --- Querverweis ------------------------------------------------------ */
.pMore{background:#efe8dd;padding:26px 0}
.pMore-grid{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center}
.pMore h2{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:0 0 4px}
.pMore p{font-size:13px;color:var(--muted);margin:0}
.pMore-list{display:flex;gap:14px;align-items:flex-end}
.pMore-item{display:block;text-align:center;width:112px}
.pMore-item img{width:100%;height:120px;object-fit:contain;display:block}
.pMore-item span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.pMore-all{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(17,16,14,.3);color:var(--ink)
}

/* --- Schmale Fenster --------------------------------------------------- */
@media(max-width:900px){
  .pHero-grid,.pUse-grid{grid-template-columns:1fr;gap:26px}
  .pUse-media .script{max-width:52%}
  .facts-grid{grid-template-columns:1fr 1fr;gap:26px}
  .pAsk-grid{grid-template-columns:1fr;gap:16px}
  .pMore-grid{grid-template-columns:1fr;gap:18px}
  .pMore-all{display:none}
  /* Raster statt Flexbox: flex:1 1 0 schrumpft nicht unter die Breite der
     laengsten Beschriftung, dadurch lief die Reihe bei 320 px heraus. */
  .pMore-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .pMore-item{width:auto;min-width:0}
}
@media(max-width:560px){
  .pMore-item span{font-size:9px;letter-spacing:.03em;overflow-wrap:anywhere}
}
@media(max-width:400px){
  .pMore-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pMore-item span{font-size:10px}
}
@media(max-width:560px){
  .crumbs{flex-direction:column;gap:6px}
  .crumbs__claim{text-align:left}
  .badges{grid-template-columns:1fr 1fr;gap:18px}
  .facts-grid{grid-template-columns:1fr}
  .tile-grid{grid-template-columns:1fr 1fr}
  .tile-grid .useTile:nth-child(3){grid-column:1/-1}
  .useTile img{height:140px}
  .script{font-size:21px;left:16px;top:16px;max-width:56%}
  .pUse-media .script{right:16px}
  .pMore-item img{height:88px}
}