/*
Theme Name: YNM Theme
Theme URI: https://www.lake.productions/
Author: Stefan + noe
Description: Schlankes Custom-Theme für Yuu'n Mee (YNM) – Basis für den Relaunch 2026.
Version: 0.1.9
Text Domain: ynm
*/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('OpenSans-Regular-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('OpenSans-Semibold-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('OpenSans-Bold-webfont.woff2') format('woff2');
}

:root {
  --ynm-bg: #ffffff;
  --ynm-text: #333333;
  --ynm-accent: #c8102e; /* Yuu'n Mee Rot Placeholder */
  --ynm-main-bg: #fff9c4; /* Hintergrundfarbe für Content-Bereich (per body-Klasse steuerbar) */
}

/* Template-spezifische Hintergründe über Body-Klassen */
body.ynm-front {
  --ynm-bg: #913142;        /* Rot-Ton für Startseite */
  --ynm-main-bg: #913142;  /* Content-Bereich ebenfalls rot hinterlegen */
}

body.ynm-philosophie {
  --ynm-bg: #0b4f9c;        /* sattes Blau für Philosophie-Seite */
  --ynm-main-bg: #0b4f9c;  /* Content-Bereich blau hinterlegen */
}

body.ynm-nachhaltigkeit {
  /* Nachhaltigkeitsseite: Grundhintergrund wieder neutral weiß */
  --ynm-bg: #ffffff;
  --ynm-main-bg: #ffffff;
}

body.ynm-ueber-uns {
  /* Über-uns-Seiten: ebenfalls neutral weiß (graue Keile via Layout) */
  --ynm-bg: #ffffff;
  --ynm-main-bg: #ffffff;
}

body.ynm-produkte {
  /* Produktseite Desktop: weißer Seitenhintergrund, Content-Bereich weiß */
	--ynm-bg: #ffffff;
	--ynm-main-bg: #ffffff;
}

body.ynm-videothek,
body.ynm-presse,
body.ynm-kontakt,
body.ynm-impressum,
body.ynm-datenschutz,
body.ynm-agb {
  /* Videothek, Presse, Kontakt, Impressum, Datenschutz & AGB: neutral weiß,
     gleiche Keil-Logik wie Über uns/Nachhaltigkeit */
  --ynm-bg: #ffffff;
  --ynm-main-bg: #ffffff;
}

body.ynm-rezepte,
body.ynm-blog {
  /* Rezepte- und Blog-Übersicht: neutral weiß, Keilhintergrund nur auf Desktop */
  --ynm-bg: #ffffff;
  --ynm-main-bg: #ffffff;
}

/* Produkte Mobile/Tablet: Seitenhintergrund differenziert steuern */
@media (max-width: 1023px) {
	/* Produktübersicht: neutral weiß, Keile übernehmen die Struktur */
	body.ynm-produkte:not(.ynm-product-detail) {
		--ynm-bg: #ffffff;
		--ynm-main-bg: #ffffff;
	}

	body.ynm-produkte.ynm-product-detail {
		--ynm-bg: #D1CECC;   /* ruhiger Beige-Grau-Ton für Detailseite */
		--ynm-main-bg: #ffffff;
	}

	/* Produktseiten Mobile: Theme-Keile/Backgrounds liegen auf site-main,
	   deshalb Hintergrund hier transparent lassen. */
	body.ynm-produkte .site-main {
		background-color: transparent;
	}
}

/* Mobile: Rezepte & Blog – Keile aktivieren (vereinfachte Variante) */
@media (max-width: 1023px) {
	body.ynm-rezepte .site-main,
	body.ynm-blog .site-main {
		background-image: url('assets/images/ynm-keil-tile.svg');
		background-repeat: repeat-y;
		background-size: 100% 2600px;
		background-position: center 200px;
	}
}

/* Mobile: Videothek, Presse, Kontakt, Impressum, Datenschutz & AGB –
   Keil-Tile auch auf kleineren Viewports anzeigen. */
@media (max-width: 1023px) {
	body.ynm-videothek .site-main,
	body.ynm-presse .site-main,
	body.ynm-kontakt .site-main,
	body.ynm-impressum .site-main,
	body.ynm-datenschutz .site-main,
	body.ynm-agb .site-main {
		background-image: url('assets/images/ynm-keil-tile.svg');
		background-repeat: repeat-y;
		background-size: 120% 2600px;
		background-position: center 260px;
	}
}

/* Mobile: Produktübersicht – Keil-Teppich auch auf Mobile anzeigen. */
@media (max-width: 1023px) {
	body.ynm-produkte:not(.ynm-product-detail) .site-main {
		background-image: url('assets/images/ynm-keil-tile.svg');
		background-repeat: repeat-y;
		background-size: 120% 2600px;
		background-position: center 360px;
	}
}

/* Mobile: Keil-Seiten – unteren Außenabstand entfernen, damit der letzte Keil
   bündig an den Footer anschließt (Luft kommt nur noch aus dem Padding). */
@media (max-width: 1023px) {
	body.ynm-produkte:not(.ynm-product-detail) .site-main,
	body.ynm-rezepte .site-main,
	body.ynm-blog .site-main,
	body.ynm-videothek .site-main,
	body.ynm-presse .site-main,
	body.ynm-kontakt .site-main,
	body.ynm-impressum .site-main,
	body.ynm-datenschutz .site-main,
	body.ynm-agb .site-main,
	body.ynm-nachhaltigkeit .site-main,
	body.ynm-ueber-uns .site-main {
		margin-bottom: 0;
	}
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--ynm-bg); /* zurück zum neutralen Body-Hintergrund */
  color: var(--ynm-text);
}

/* Vollflächiger Loader beim Initial-Laden (Desktop & Mobile) */
.ynm-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #9d2640, #cd163d);
  z-index: 3000; /* über Header, Suche, Mobile-Nav */
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.5s ease;
}

.ynm-loader--hidden {
  opacity: 0;
  pointer-events: none;
}

.ynm-loader__logo {
	max-width: min(384px, 72vw); /* ~20% größer als 320px/60vw */
	height: auto;
	display: block;
}

/* Sticky-Subnav standardmäßig ausblenden; nur auf Desktop aktivieren */
.ynm-sticky-subnav {
  display: none;
}

/* Mobile/Tablet: horizontales Scrollen unterbinden, falls einzelne Elemente leicht überlaufen */
@media (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden;
  }
}


/* Standard: Social-Bar verstecken, nur auf Desktop explizit einblenden */
.ynm-social-bar {
  display: none;
}

/* Topbar (Presse / Kontakt / Sprache) */
.ynm-topbar {
  background: linear-gradient(to right, #9d2640, #cd163d);
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ynm-topbar__inner {
	max-width: none;
	margin: 0;
	padding: 4px 32px 8px; /* gleiche Gesamthöhe, Text etwas tiefer im Balken */
	display: flex;
	align-items: flex-end; /* Links etwas tiefer im Topbar-Balken, ohne Gesamthöhe zu ändern */
	justify-content: flex-start;
	gap: 16px;
}

/* Mobile: Topbar komplett ausblenden, Inhalte wandern ins Vollbild-Menü */
@media (max-width: 1023px) {
  .ynm-topbar {
    display: none;
  }
}

/* Mobile-Fullscreen-Menü: Topbar-Links im Menü als horizontale Zeile über der Suche */
.ynm-mobile-nav__toplinks {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 16px;
}

.ynm-mobile-nav__toplinks a {
  color: rgba(45, 44, 44, 1); /* gleiche Farbe wie Desktop-Topbar-Links */
  text-decoration: none;
}

.ynm-mobile-nav__social {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.ynm-mobile-nav__social-icon {
  width: 30px;
  height: 30px;
  display: block;
}

.ynm-topbar__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: 336px;
	transform: translateY(4px); /* Text optisch etwas tiefer, ohne Layout zu verschieben */
}

.ynm-topbar a {
	text-decoration: none;
	color: rgba(45, 44, 44, 1);
	font-weight: 700;
}

.ynm-topbar__lang a {
  opacity: 0.6;
}

.ynm-topbar__lang a.is-active {
  opacity: 1;
  font-weight: 600;
}

.ynm-topbar a:hover,
.ynm-topbar a:focus-visible {
	color: rgba(195, 203, 66, 1);
}

/* Haupt-Navigation (sticky) */
.ynm-header-stick {
  position: -webkit-sticky; /* Safari iOS Fix */
  position: sticky;
  top: 0;
  z-index: 900; /* kompletter Kopfbereich (Topbar + Header + Sticky-Menü) ist sticky */
}

.site-header-main {
  position: relative;
  color: #ffffff;
  box-shadow: none;
  background: transparent;
  overflow: visible; /* Basis: nichts clippen, Mobile/Allgemein */
}

.site-header-main::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 165px;
  /* Header-Hintergrund mit schräger Unterkante */
  background: linear-gradient(to right, #9d2640, #cd163d);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
  box-shadow: none;
  z-index: 1; /* über dem Schatten, unter Logo/Navi */
}

/* Duplizierte Schräge als „Fake-Schatten“ knapp unterhalb des Headers – Variante mit leicht gedrehtem Schattenband */
.site-header-main::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 23px;
	height: 130px;
	background: linear-gradient(
		0deg,
		rgba(212, 113, 113, 0) 0%,
		rgba(0, 0, 0, 0.3) 28%,
		rgba(0, 0, 0, 0.10) 55%,
		rgba(0, 0, 0, 0.0) 100%
	);
	pointer-events: none;
	z-index: 0;
	rotate: -1.8deg;
}

/* Feintuning: Rotation des Schattenkeils je nach Desktop-Breite leicht anpassen */
@media (min-width: 1024px) and (max-width: 1299px) {
  /* Startseite, kleinere Desktop-Breite → Schatten stärker nach links kippen */
  body.ynm-front .site-header-main::after {
    rotate: -2.3deg;
  }
}

@media (min-width: 1024px) and (max-width: 1299px) {
  /* Startseite Tablet-Quer: minimal schmalerer Schatten, um horizontales Scrollen zu vermeiden */
  body.ynm-front .site-header-main::after {
    left: -1px;
    right: 2px;
  }
}

@media (min-width: 1300px) and (max-width: 1679px) {
  /* Startseite, mittlere Breite → mittlere Neigung (Basiswert) */
  body.ynm-front .site-header-main::after {
    rotate: -1.9deg;
  }
}

@media (min-width: 1680px) and (max-width: 1949px) {
  /* Startseite, sehr breite Screens → leicht nach links geneigt */
  body.ynm-front .site-header-main::after {
    rotate: -1.5deg;
  }
}

@media (min-width: 1950px) {
  /* Extra-breite Screens: Startseite: Schatten etwas flacher und minimal weiter nach unten,
     damit er nicht in die Topbar läuft */
  body.ynm-front .site-header-main::after {
    rotate: -1.2deg;
    top: 28px;
  }

  /* Extra-breite Screens: Unterseiten analog anpassen, damit der Keil nicht in die Topbar läuft */
  body:not(.ynm-front) .site-header-main::after {
    rotate: -1.2deg;
    top: 28px;
  }
}

/* Unterseiten: etwas stärkerer Schattenverlauf, da der Kontrast geringer ist
   + minimal schmalerer Schatten, um horizontales Scrollen zu vermeiden */
body:not(.ynm-front) .site-header-main::after {
	background: linear-gradient(
		0deg,
		rgba(212, 113, 113, 0) 0%,
		rgba(0, 0, 0, 0.4) 28%,
		rgba(0, 0, 0, 0.18) 55%,
		rgba(0, 0, 0, 0.0) 100%
	);
	left: -1px;
	right: 2px;
}

.site-header-main__inner {
	max-width: none;
	margin: 0;
	/* Top | Right | Bottom | Left – rechts etwas mehr Innenabstand, damit die Hauptnavi optisch weiter nach links rückt */
	padding: 24px 80px 18px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	position: relative;
	z-index: 2; /* Content klar über Header-Background + Schatten-Layer */
}

/* Bei schmaleren/mittleren Desktops etwas weniger rechten Header-Padding,
	   damit "Über uns" nicht umbricht. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-header-main__inner {
		padding-right: 34px; /* statt 80px – mehr Platz für die Hauptnavi */
	}
}

.site-branding {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  z-index: 2; /* Logo/Navi klar über Header + Schatten */
}

.site-branding img {
  height: 186px; /* ~15% kleiner als 218px */
  width: auto;
  display: block;
  margin-top: -62px; /* 38px weiter nach oben als -24px */
}

/* Mobile: Logo verkleinern, damit Header mehr Platz hat */
@media (max-width: 1023px) {
  .site-branding img {
	  height: 160px;
	  margin-top: -30px; /* 20px weiter nach unten als zuvor */
	  margin-left: -20px; /* Logo auf Mobile 20px weiter nach links schieben */
  }
}

.site-branding a {
  text-decoration: none;
  color: inherit;
}

.ynm-burger {
  display: flex; /* Standard: sichtbar, wird auf Desktop wieder versteckt */
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 56px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 3; /* sicher vor dem Logo sichtbar */
}

.ynm-burger span {
  display: block;
  height: 4px;
  width: 100%;
  background: rgba(195, 203, 66, 1);
  border-radius: 999px;
}

.ynm-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 12px;
  border: none;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

/* Mobile: Such-Icon im Header ausblenden (Suche wandert ins Vollbild-Menü) */
@media (max-width: 1023px) {
  .site-header-main .ynm-search-toggle {
    display: none;
  }

	/* Mobile: Header-Inhalt mit 30px Abstand zum rechten Rand, damit der Burger
	   sauber sichtbar ist und nicht vom Logo verdeckt wirkt. */
	.site-header-main__inner {
		padding-right: 30px;
		padding-left: 24px;
	}

  /* Mobile: kompletter Kopfbereich fix am oberen Rand */
  body {
    padding-top: 140px; /* Platz für Kopfbereich auf mobilen Viewports */
  }

  .ynm-header-stick {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* über dem restlichen Content */
  }

  .site-header-main {
    position: relative; /* lokal, nicht mehr sticky auf Mobile */
  }

  /* Mobile: Header-Hintergrund etwas höher ziehen, um den wegfallenden
     Topbar-Bereich auszugleichen (ca. 24px zusätzliche Höhe). */
  .site-header-main::before {
	  height: 201px; /* feinjustiert: 165px + ~36px */
  }
}

.ynm-search-toggle svg {
  width: 18px;
  height: 18px;
}

.main-nav {
  display: none; /* Standard: versteckt, nur auf Desktop sichtbar */
  gap: 20px;
  font-size: 16px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
	margin-top: -60px; /* Desktop-Navi-Links inkl. Suchlupe insgesamt 20px weiter nach oben gezogen */
  align-items: center; /* Suche-Icon vertikal mit den Links ausrichten */
}

/* Breitere Desktops: Abstand zwischen den Hauptnavi-Links etwas erhöhen */
@media (min-width: 1200px) {
	.main-nav {
		gap: 28px;
	}
}

/* Home-Link in der Hauptnavi nur ab 1232px anzeigen */
.ynm-nav-home-desktop {
	display: none;
}

@media (min-width: 1250px) {
	.ynm-nav-home-desktop {
		display: inline-block;
	}
}

.main-nav a {
  text-decoration: none;
  color: inherit;
	font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.main-nav a:hover,
.main-nav a:focus-visible {
	border-bottom-color: rgba(195, 203, 66, 1); /* gleiche Grünfarbe wie der Burger */
}

/* Desktop: Dropdown unter "Produkte" (Einzelhandel/Grosshandel) */
.main-nav__item--products {
	position: relative;
}

.main-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	background: transparent; /* kein eigener Hintergrund für die zweite Zeile */
	padding-top: 8px; /* optischer Abstand nach unten, ohne Hover-Lücke */
	margin-top: 0;
	box-shadow: none;
	border-radius: 0;
	display: none;
	z-index: 20;
}

.main-nav__submenu a {
	display: inline-block;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: #ffffff;
	border-bottom: none;
}

.main-nav__submenu a:hover,
.main-nav__submenu a:focus-visible {
	background: transparent; /* Hover ohne Hintergrund, nur Farbwechsel */
	color: rgba(195, 203, 66, 1);
}

@media (min-width: 1024px) {
	.main-nav__item--products:hover .main-nav__submenu,
	.main-nav__item--products:focus-within .main-nav__submenu {
		display: flex;      /* Links nebeneinander */
		gap: 12px;
	}

	/* Submenü leicht nach links schieben, damit "Einzelhandel" bündig unter "Produkte" steht */
	.main-nav__item--products .main-nav__submenu {
		margin-left: -14px; /* 10px weiter nach links als vorher */
	}

	/* Platz für den Caret-Pfeil rechts neben "Produkte" reservieren */
	.main-nav__item--products > a {
		position: relative;
		padding-right: 14px;
	}

	/* Kleiner Keil rechts neben "Produkte" nur auf Desktop */
	.main-nav__item--products > a::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid rgba(195, 203, 66, 1);
		transform: translateY(-50%);
		transform-origin: center;
		transition: transform 0.15s ease-out;
	}

	.main-nav__item--products:hover > a::after,
	.main-nav__item--products:focus-within > a::after {
		transform: translateY(-50%) rotate(180deg);
	}

	/* Feinausrichtung: Alle Hauptnavi-Links minimal nach oben ziehen,
	   damit Nachhaltigkeit/Produkte optisch exakt auf einer Linie liegen. */
	.main-nav > a,
	.main-nav__item--products > a {
		position: relative;
		top: -2px;
	}

	/* Extra-Feintuning: "Produkte" minimal höher als die anderen Links,
	   damit es trotz Caret/Subzeile exakt auf einer Linie sitzt. */
	.main-nav__item--products > a {
		top: -4px;
	}

	/* Lupe in der Hauptnavi ebenfalls leicht nach oben ziehen */
	.main-nav .ynm-search-toggle {
		position: relative;
		top: -3px;
	}
}

/* Schmalere/mittlere Desktop-Breiten: Hauptnavigation leicht "stauchen",
   damit "Über uns" nicht umbricht. Ab ~1200px wieder volles Layout. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.main-nav {
		gap: 18px; /* etwas engerer Abstand zwischen den Links */
	}

	.main-nav a {
		white-space: nowrap;   /* Links nicht umbrechen */
		letter-spacing: 0.06em; /* leicht reduzierter Buchstabenabstand */
	}
}

/* Sehr schmale Desktop-Breiten: Lupe in der Hauptnavi ausblenden,
   ohne die restlichen Links zu verschieben. */
@media (min-width: 1024px) and (max-width: 1058px) {
	.main-nav .ynm-search-toggle {
		display: none;
	}
}

/* Mobile Vollbild-Navigation */
.ynm-mobile-nav {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, #913142, #BC2F41);
  display: none;
  align-items: flex-start;   /* Inhalt oben ausrichten */
  justify-content: center;  /* horizontal mittig lassen */
  padding-top: 96px;        /* Abstand zum oberen Rand / Notch */
  z-index: 2000; /* liegt über dem Header */
}

.ynm-mobile-nav__close {
  position: fixed;
  top: 24px;
  right: 32px;
  border: none;
  background: transparent;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  color: rgba(195, 203, 66, 1); /* YNM-Grün */
  z-index: 2100;
}

.ynm-mobile-nav__close:hover,
.ynm-mobile-nav__close:focus-visible {
  color: #ffffff;
}

.ynm-mobile-nav__inner {
  display: flex;
  flex-direction: column;
  gap: 22px; /* etwas mehr Luft zwischen den Top-Level-Einträgen */
  text-align: center;
  font-size: 22px;
  text-transform: uppercase;
}

/* Alle direkten Kinder (Home, Gruppen, Blog, Videothek, Toplinks-Block) ohne zusätzliche Außenabstände */
.ynm-mobile-nav__inner > * {
  margin: 0;
}

.ynm-mobile-nav__inner a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700; /* alle Mobile-Links fett */
  line-height: 1.2;
  display: inline-block;
}

/* Topbar-Links im mobilen Menü (Presse/Kontakt/DE/EN) mit dunkler Schriftfarbe */
.ynm-mobile-nav__toplinks a {
  color: rgba(45, 44, 44, 1);
}

/* Top-Level-Links im mobilen Menü: große Typo behalten */
.ynm-mobile-nav__inner > a {
  font-size: 22px;
}

/* Sub-Links unter Nachhaltigkeit: kleinere Typo */
.ynm-mobile-nav__group-items a {
  font-size: 16px;
}

/* Gruppierte Einträge im mobilen Menü (z.B. Nachhaltigkeit + Unterlinks)
   → kein internes gap, damit das Label wie ein normaler Link wirkt; Abstand
   zu den Sublinks kommt nur beim Öffnen über margin-top. */
.ynm-mobile-nav__group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Über-uns-Gruppe: kein individueller Offset, gleiche Vertikalität wie die anderen */
.ynm-mobile-nav__group--ueberuns {
  margin-top: 0;
}

.ynm-mobile-nav__group-label {
  font-size: inherit; /* gleiche Font-Size wie die anderen Mobile-Links (22px) */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #ffffff;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700; /* gleiches Gewicht wie die übrigen Mobile-Links */
  line-height: 1.2; /* gleiche vertikale Rhythmik wie die Links */
}

.ynm-mobile-nav__group-label::after {
  content: "▾";
  display: inline-block;
  margin-left: 8px;
  font-size: 0.8em;
}

.ynm-mobile-nav__group-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  margin-top: 0; /* geschlossen: kein Abstand unter dem Label */
  transition: max-height 0.22s ease-out, opacity 0.18s ease-out, transform 0.22s ease-out, margin-top 0.22s ease-out;
}

.ynm-mobile-nav__group--open .ynm-mobile-nav__group-items {
  max-height: 400px; /* genug für die Sublinks */
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px; /* Abstand zwischen Label und ersten Sublink nur im offenen Zustand */
}

.ynm-mobile-nav__group--open .ynm-mobile-nav__group-label::after {
  content: "▴";
}

.ynm-mobile-nav__search {
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
}

.ynm-search-toggle--mobile {
  width: auto;
  height: auto;
  margin-left: 0;
}

body.ynm-mobile-open .ynm-mobile-nav {
  display: flex;
}

body.ynm-mobile-open,
body.ynm-search-open {
  overflow: hidden;
}

.ynm-search-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: rgba(0, 0, 0, 0.76);
  z-index: 2100;
}

body.ynm-search-open .ynm-search-overlay {
  display: flex;
}

.ynm-search-overlay__inner {
  position: relative;
  max-width: 600px;
  width: 100%;
  background: transparent; /* Formular selbst ohne Kasten, nur Overlay dahinter */
  padding: 24px 24px 28px;
  border-radius: 0;
}

.ynm-search-close {
  position: fixed;           /* relativ zum Viewport, nicht zum Formular */
  top: 24px;                /* Abstand zur Browser-Oberkante */
  right: 32px;              /* Abstand vom rechten Browserrand */
  border: none;
  background: transparent;
  font-size: 68px;          /* doppelt so großes X */
  line-height: 1;
  cursor: pointer;
  color: rgba(195, 203, 66, 1); /* Close-X im YNM-Grün */
  z-index: 2200;            /* sicher über dem Overlay-Inhalt */
}

.ynm-search-close:hover,
.ynm-search-close:focus-visible {
  color: #ffffff; /* kurz weiß bei Hover/Fokus für Feedback */
}

.ynm-search-form {
  display: flex;
  gap: 62px; /* 12px Basis + 50px zusätzlicher Abstand zwischen Feld und Button */
  margin-top: 16px;
}

.ynm-search-form input[type="search"] {
	flex: 1 1 auto;
	padding: 8px 0 4px;
	font-size: 16px;
	border-radius: 0;
	border: none;
	border-bottom: 2px solid rgba(195, 203, 66, 1); /* YNM-Grün als Unterstreichung */
	background: transparent;
	color: #ffffff; /* Suchtext sichtbar auf dunklem Overlay */
	outline: none;
}

.ynm-search-form input[type="search"]:focus-visible {
	border-bottom-color: rgba(195, 203, 66, 1); /* auch im Fokus YNM-Grün beibehalten */
}

.ynm-search-form input[type="search"]::placeholder {
	color: #666666; /* etwas helleres Grau für den Placeholder */
	text-transform: uppercase;
}

.ynm-search-form button[type="submit"] {
  padding: 10px 16px;
  font-size: 14px;
  text-transform: uppercase;
	background: transparent;
	color: rgba(195, 203, 66, 1);
	border: 3px solid rgba(195, 203, 66, 1); /* deutlichere Outline im gleichen Grün */
	border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}

.ynm-search-form button[type="submit"]:hover,
.ynm-search-form button[type="submit"]:focus-visible {
	background: rgba(195, 203, 66, 1); /* Button füllt sich mit Grün */
	color: #ffffff; /* Text in Weiß bei Hover */
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (min-width: 1024px) {
  .main-nav {
    display: flex;
  }

  .ynm-burger {
    display: none;
  }

  /* Sticky-Subnav nur auf Desktop anzeigen */
  .ynm-sticky-subnav {
    display: block;
  }
}

.site-main {
  max-width: none; /* volle Breite */
  margin: -160px 0 40px; /* Startseiten/Slider-Setup: Content näher an den Header ziehen */
  padding: 0 32px 40px; /* etwas Abstand zum Rand auf Desktop */
  background-color: var(--ynm-main-bg); /* Content-Hintergrund, Standard in :root definiert */
}

/* Startseite: keinen zusätzlichen Abstand zwischen letztem Slider (#14) und Footer */
body.ynm-front .site-main {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Desktop: Auf der Produktübersicht soll der Keil-Hintergrund sichtbar sein,
   daher site-main-Hintergrund für Produkte transparent setzen. Body bleibt weiß. */
@media (min-width: 1024px) {
  body.ynm-produkte .site-main {
    background-color: transparent;
  }
}

/* Mobile: Nachhaltigkeit (inkl. Aufforstung/Farm) – Padding an Produktdetail-Breite angleichen */
@media (max-width: 900px) {
  body.ynm-nachhaltigkeit .site-main {
    padding: 0 32px 32px; /* gleiche Breite wie Produktdetail-Seite auf Mobile */
  }
}

/* Mobile: Keil-Teppich für Nachhaltigkeit & Über uns analog Legal/Rezepte. */
@media (max-width: 1023px) {
	body.ynm-nachhaltigkeit .site-main,
	body.ynm-ueber-uns .site-main {
		background-image: url('assets/images/ynm-keil-tile.svg');
		background-repeat: repeat-y;
		background-size: 120% 2600px;
		background-position: center 320px;
	}
}

/* Produkte: ohne Slider – Content deutlich weiter nach unten setzen, damit er nicht unter dem Header verschwindet */
body.ynm-produkte .site-main {
  margin: 90px 0 40px; /* 150px höher als vorher → feiner eingependelt */
}

/* Philosophie – Einleitungssektion */
.ynm-philo-intro {
  margin: 40px 0 80px;
}

/* Farm-Intro-Section: Abstand nach unten für direkte Nachbar-Section auf 0px setzen */
.ynm-philo-intro--farm-intro {
  /* Intro-Block auf der Mangrovenwald-Farm-Seite etwas nach oben ziehen,
     damit nach Entfernen von "Enjoy the Difference:" kein zu großer Weißraum bleibt. */
  margin-top: -50px; /* leichter nach oben gezogen, dezenter Offset */
  margin-bottom: 0;
}

/* Erste Bild/Text-Section direkt nach der Farm-Intro-Section: Standard-Abstand beibehalten */
.ynm-philo-intro--farm-intro + .ynm-philo-intro {
  margin-top: 0;
}

/* Aufforstung-Intro-Section: gleiches Verhalten wie Farm-Intro (kein Gap zur ersten Section)
   – aktuell entfällt die separate Intro-Section, daher keine speziellen Margins nötig. */
.ynm-philo-intro--aufforstung-intro {
  margin-bottom: 0;
}

.ynm-philo-intro--aufforstung-intro + .ynm-philo-intro {
  margin-top: 0;
}

/* Versprechen-Intro-Section: gleiches Verhalten wie Farm-Intro (kein Gap zur ersten Section) */
.ynm-philo-intro--versprechen-intro {
  margin-bottom: 0;
}

.ynm-philo-intro--versprechen-intro + .ynm-philo-intro {
  margin-top: 0;
}

/* Aufforstung-Seite: nach Entfernen der Intro-Headline "Für ein besseres Klima:" den
   ersten Inhaltsblock näher an den Slider rücken und Headlines schwarz setzen. */
body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung + .ynm-philo-intro {
  margin-top: 10px; /* weniger Weißraum als der Standardabstand */
}

body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung ~ .ynm-philo-intro .ynm-philo-intro__headline {
  color: #333333;
}

.ynm-affo-headline-mobile {
  display: none;
}

@media (max-width: 900px) {
  .ynm-affo-headline-desktop {
    display: none;
  }

  .ynm-affo-headline-mobile {
    display: inline;
  }
}

/* Kontakt- & Videothek-Intro-Sections: gleiches Verhalten wie Presse-Intro
   (fester Abstand nach oben, kein Gap zur ersten Section) */
.ynm-philo-intro--presse-intro,
.ynm-philo-intro--kontakt-intro,
.ynm-philo-intro--videothek-page-intro,
.ynm-philo-intro--impressum-intro,
.ynm-philo-intro--datenschutz-intro,
.ynm-philo-intro--agb-intro {
	margin-top: 40px;
	margin-bottom: 0;
}

.ynm-philo-intro--presse-intro + .ynm-philo-intro,
.ynm-philo-intro--kontakt-intro + .ynm-philo-intro,
.ynm-philo-intro--videothek-page-intro + .ynm-philo-intro,
.ynm-philo-intro--impressum-intro + .ynm-philo-intro,
.ynm-philo-intro--datenschutz-intro + .ynm-philo-intro,
.ynm-philo-intro--agb-intro + .ynm-philo-intro {
	margin-top: 0;
}

/* Presse-Intro-Section: kein Gap zur ersten Section, Headline innen nach unten gepolstert */
.ynm-philo-intro--presse-intro {
	margin-top: 40px;  /* Basiswert wie normale .ynm-philo-intro */
	margin-bottom: 0;
}

.ynm-philo-intro--presse-intro + .ynm-philo-intro {
	margin-top: 0;
}

/* Letzte Aufforstung-Doppelbild-Section mit 100px Abstand zur vorherigen Bild/Text-Section */
.ynm-philo-intro--aufforstung-last {
  margin-top: -20px; /* Standard-Gap 120px (80 + 40) → minus 20 ergibt ~100px Restabstand */
}

.ynm-auffo-mobile-final-gallery,
.ynm-affo-text-mobile-main,
.ynm-affo-mobile-more,
.ynm-affo-mobile-block-4 {
  display: none;
}

/* Aufforstung: In der Abschluss-Section sollen die beiden linken Bilder untereinander stehen */
.ynm-philo-intro--aufforstung-last .ynm-philo-intro__col--image {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ynm-philo-intro--aufforstung-last .ynm-philo-intro__col--image .ynm-philo-intro__figure + .ynm-philo-intro__figure {
  margin-top: 40px;
}

.ynm-philo-intro__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 40px;
  align-items: center;
}

/* Kontakt-Seite: Bild/Text-Sections generell oben ausrichten */
body.ynm-kontakt .ynm-philo-intro__inner {
  align-items: flex-start;
}

/* Datenschutz: Bild in der linken Content-Column oben am Text ausrichten */
body.ynm-datenschutz .ynm-philo-intro--videothek-intro .ynm-philo-intro__inner {
  align-items: flex-start;
}

.ynm-philo-intro__col--image {
  display: flex;
  justify-content: center;
}

.ynm-philo-intro__col--text {
  position: relative;
}

/* Meilensteine/Zertifizierungen – Variante mit doppelt gestapeltem Bild links */
.ynm-philo-intro--milestone-double .ynm-philo-intro__inner {
  align-items: flex-start; /* Text- und Bildspalte oben ausrichten */
}

/* Presse-Seite: Bild/Text-Section mit Keyvisual + Fließtext oben ausrichten */
body.ynm-presse .ynm-philo-intro--videothek-intro .ynm-philo-intro__inner {
  align-items: flex-start;
}

/* Videothek-Seite: Bild/Text-Section mit Keyvisual + Intro-Text oben ausrichten */
body.ynm-videothek .ynm-philo-intro--videothek-intro .ynm-philo-intro__inner {
  align-items: flex-start;
}

body.ynm-videothek .ynm-philo-intro--videothek-intro .ynm-philo-intro__text {
  margin-bottom: 40px;
}

.ynm-philo-intro--milestone-double .ynm-philo-intro__col--image {
  flex-direction: column;
  align-items: center;
}

.ynm-philo-intro--milestone-double .ynm-philo-intro__col--image .ynm-philo-intro__figure + .ynm-philo-intro__figure {
  margin-top: 32px;
}

/* Meilensteine – Jahreszahl als grafisches Element zwischen Headline und Text */
.ynm-milestone-year {
  position: absolute;
  top: 32px;
  font-family: var(--font-heading);
  font-size: 190px;
  font-weight: 700;
  letter-spacing: 0.03rem;
  color: #7c807c40;
  line-height: 0.8;
  z-index: 0;
  pointer-events: none;
}

.ynm-milestone-year--left {
  left: 0;
  right: auto;
  text-align: left;
}

.ynm-milestone-year--right {
  left: auto;
  right: 0;
  text-align: right;
}

/* Meilensteine – Jahreszahlen auf Mobile etwas kleiner, damit sie nicht aus dem Bild laufen */
@media (max-width: 900px) {
  .ynm-milestone-year {
    font-size: 120px;
    top: 16px;
  }
}

@media (max-width: 600px) {
  .ynm-milestone-year {
    font-size: 88px;
    top: 12px;
  }
}

.ynm-philo-intro__col--text .ynm-philo-intro__headline,
.ynm-philo-intro__col--text .ynm-philo-intro__text {
  position: relative;
  z-index: 1;
}

/* Meilensteine 2021: Textbereich etwas unter die Jahreszahl schieben */
body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2021 .ynm-philo-intro__text {
  margin-top: 140px;
}

/* Farm-Extra-Section: zwei Bilder links vertikal mit Abstand (einfaches Flex-Layout) */
.ynm-philo-intro--farm-extra {
  padding-top: 100px; /* 100px Abstand vom vorherigen Block */
}

.ynm-philo-intro--farm-extra .ynm-philo-intro__col--image,
.ynm-philo-intro--farm-double-left .ynm-philo-intro__col--image {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ynm-philo-intro--farm-extra .ynm-philo-intro__col--image .ynm-philo-intro__figure {
  margin: 0;
}

.ynm-philo-intro--farm-extra .ynm-philo-intro__col--image .ynm-philo-intro__figure + .ynm-philo-intro__figure {
	margin-top: 200px; /* 200px Abstand zwischen Bild 1 und Bild 2 */
}

/* Aufforstung-Block: 5 Bilder links untereinander, rechts Text/Media */
.ynm-philo-intro--aufforstung {
  padding-top: 120px; /* etwas Luft über dem Block */
}

.ynm-philo-intro--aufforstung .ynm-philo-intro__col--image {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ynm-philo-intro--aufforstung .ynm-philo-intro__col--image .ynm-philo-intro__figure {
  margin: 0 0 40px;
}

.ynm-philo-intro--aufforstung .ynm-philo-intro__col--image .ynm-philo-intro__figure:last-of-type {
  margin-bottom: 0;
}

.ynm-auffo-subline {
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: #9d2640;
}

.ynm-auffo-text {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
}

.ynm-auffo-text-block + .ynm-auffo-text-block {
  margin-top: 32px;
}

.ynm-auffo-text-block__headline {
  font-family: var(--font-heading);
  font-size: 32px; /* wie .ynm-philo-intro__headline */
  font-weight: 700;
  letter-spacing: 0.03rem;
  margin: 0 0 12px;
}

.ynm-auffo-text h2,
.ynm-auffo-text h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.03rem;
  margin: 40px 0 12px;
}

.ynm-auffo-text p {
  margin: 0 0 16px;
}

/* Aufforstung: Links im Block "Erfahren Sie mehr" im Yuu'n Mee Rot einfärben */
.ynm-auffo-text a {
  color: #9d2640; /* dunkles Yuu'n Mee Rot */
  text-decoration: underline;
}

.ynm-auffo-text a:hover,
.ynm-auffo-text a:focus-visible {
  color: #cd163d; /* helleres Yuu'n Mee Rot auf Hover/Fokus */
}

/* Aufforstung: Links in den Text-Sections nach dem Aufforstungs-Slider einfärben */
body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung ~ .ynm-philo-intro .ynm-philo-intro__text a,
body.ynm-ueber-uns.ynm-ueber-uns-zertifizierungen .ynm-philo-intro__text a {
  color: #9d2640; /* dunkles Yuu'n Mee Rot */
  text-decoration: underline;
}

body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung ~ .ynm-philo-intro .ynm-philo-intro__text a:hover,
body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung ~ .ynm-philo-intro .ynm-philo-intro__text a:focus-visible,
body.ynm-ueber-uns.ynm-ueber-uns-zertifizierungen .ynm-philo-intro__text a:hover,
body.ynm-ueber-uns.ynm-ueber-uns-zertifizierungen .ynm-philo-intro__text a:focus-visible {
  color: #cd163d; /* helleres Yuu'n Mee Rot auf Hover/Fokus */
}

.ynm-auffo-media {
  margin-top: 40px;
}

.ynm-auffo-media iframe {
  max-width: 100%;
}

.ynm-philo-intro__figure {
  margin: 0;
}

.ynm-philo-intro__image {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 0;
  transform: translateX(-120px); /* weiter von links außerhalb des Viewports */
}

/* Aufforstungsprojekt: Bilder in der linken Spalte mit 20px Border-Radius anzeigen */
.ynm-philo-intro--aufforstung .ynm-philo-intro__col--image .ynm-philo-intro__image,
.ynm-philo-intro--aufforstung-last .ynm-philo-intro__col--image .ynm-philo-intro__image,
/* Alle Bild/Text-Sections auf der Aufforstungs-Seite (nach dem Aufforstungs-Slider) */
body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung ~ .ynm-philo-intro .ynm-philo-intro__col--image .ynm-philo-intro__image {
	border-radius: 20px;
}

/* Zertifizierungen – zweites Bild auf Desktop im ersten Block, auf Mobile später vor dem Abschlussbild */
.ynm-zert-image-2-mobile {
  display: none;
}

/* Zertifizierungen – Text im Weißraum unten links des letzten Bildes */
.ynm-zert-bottom-figure {
	position: relative;
}

.ynm-zert-bottom-caption {
	position: absolute;
	left: calc(8% - 60px);
	bottom: 18%;
	max-width: 50%;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.4;
	color: #9d2640; /* gleiches Rot wie .ynm-auffo-subline */
	text-align: left;
}

@media (max-width: 900px) {
	.ynm-zert-bottom-caption {
		position: static;
		left: auto;
		bottom: auto;
		max-width: 100%;
		margin-top: 12px;
		font-size: 13px;
	}

	.ynm-zert-bottom-caption br {
		display: none;
	}
}

/* Nachhaltigkeit – zusätzliche 2+2-Bilder-Galerie auf der Mangrovenwald-Farm-Seite */
.ynm-nachhaltigkeit-gallery-marker-2026-07-12 { /* marker for deploy check */ }
.ynm-nachhaltigkeit-gallery {
  margin: 40px 0 80px;
}

.ynm-nachhaltigkeit-gallery__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 32px;
}

.ynm-nachhaltigkeit-gallery__col--left {
  display: flex;
  flex-direction: column;
  align-items: center; /* wie .ynm-philo-intro__col--image */
}

.ynm-nachhaltigkeit-gallery__col--right {
  display: flex;
  flex-direction: column;
  justify-content: center; /* ähnliches vertikales Verhalten wie Textspalte */
}

.ynm-nachhaltigkeit-gallery__figure {
  margin: 0 0 24px;
}

.ynm-nachhaltigkeit-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.ynm-nachhaltigkeit-gallery__caption {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 900px) {
  .ynm-nachhaltigkeit-gallery__inner {
    grid-template-columns: 1fr;
  }
}

.ynm-philo-intro__headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.03rem;
  margin: 0 0 16px;
}

/* Spezielle Farbgebung für Farm-Intro-Headline ("Enjoy the Difference:") */
.ynm-philo-intro--farm-intro .ynm-philo-intro__headline {
  color: #333333; /* Farm-Inhaltsheadline: neutral schwarz statt Rot */
}

/* Spezielle Farbgebung für Aufforstung-Intro-Headline ("Für ein besseres Klima:") –
   aktuell nicht genutzt */
.ynm-philo-intro--aufforstung-intro .ynm-philo-intro__headline {
  color: #333333;
}

/* Spezielle Farbgebung für Versprechen-Intro-Headline ("Unser Nachhaltigkeitsversprechen") */
.ynm-philo-intro--versprechen-intro .ynm-philo-intro__headline {
  color: #9d2640;
}

/* Spezielle Farbgebung für Presse/Kontakt/Videothek/Impressum/Datenschutz/AGB-Intro-Headlines */
.ynm-philo-intro--presse-intro .ynm-philo-intro__headline,
.ynm-philo-intro--kontakt-intro .ynm-philo-intro__headline,
.ynm-philo-intro--videothek-page-intro .ynm-philo-intro__headline,
.ynm-philo-intro--impressum-intro .ynm-philo-intro__headline,
.ynm-philo-intro--datenschutz-intro .ynm-philo-intro__headline,
.ynm-philo-intro--agb-intro .ynm-philo-intro__headline {
	color: #9d2640;
	margin-top: 150px;
}

/* Presse-Intro: erste Headline nur als Platzhalter verwenden (unsichtbar) */
body.ynm-presse .ynm-philo-intro--presse-intro .ynm-philo-intro__headline {
	color: transparent;
}

/* Pressebereich: sichtbare Hauptheadline im zweiten Block in YNM-Rot */
body.ynm-presse .ynm-philo-intro--videothek-intro .ynm-philo-intro__headline--presse-main {
	color: #9d2640;
}

.ynm-philo-intro__text {
  font-family: var(--font-body);
}

/* Nachhaltigkeit: Inline-H1s in den Intro-Textblöcken wie die Haupt-Intro-Headlines stylen,
   ohne globale H1/H2-Typo zu verändern. So können wir z.B. "Aufzucht im Mangrovengebiet"
   und "Besonders im Geschmack" im Fließtext optisch wie die Intro-Headline setzen. */
body.ynm-nachhaltigkeit .ynm-philo-intro .ynm-philo-intro__text h1 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.03rem;
  margin: 0 0 16px;
}

.ynm-philo-intro__text {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}

/* Bilder, die im WYSIWYG-Text (z.B. Meilensteine Section 7) eingefügt werden,
   auf sinnvolle Breite begrenzen, damit sie nicht riesig laufen. */
.ynm-philo-intro__text img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Textumfluss für Bilder, die im Über-uns-/Meilensteine-Text platziert werden.
   Nutzt die Standard-WordPress-Klassen alignleft/alignright. */
body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro__text img.alignleft {
  float: left;
  margin: 0 24px 16px 0;
  border-radius: 20px;
}

body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro__text img.alignright {
  float: right;
  margin: 0 0 16px 24px;
  border-radius: 20px;
}

/* Meilensteine 2010: Bild in der linken Spalte ebenfalls mit 20px Border-Radius anzeigen */
body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2010 .ynm-philo-intro__col--image .ynm-philo-intro__image {
  border-radius: 20px;
}

/* Qualitätsprogramm (Über uns): alle Bilder in den Bild/Text-Sections mit 20px Border-Radius */
body.ynm-ueber-uns.ynm-ueber-uns-qualitaetsprogramm .ynm-philo-intro__col--image .ynm-philo-intro__image {
  border-radius: 20px;
}

/* Impressum: Firmenname zweizeilig, auf Mobile kleinere Headline-Größe */
@media (max-width: 900px) {
  .ynm-impressum .ynm-impressum__company {
    font-size: 22px;
    line-height: 1.3;
  }
}

@media (max-width: 900px) {
  .ynm-philo-intro__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Meilensteine mobil: Section 2 (2009) näher an Section 1 rücken */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2009 {
    margin-top: -120px;
  }

  /* Meilensteine mobil: Section mit 2015 näher an die Section davor rücken */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2015 {
    margin-top: -60px;
  }

  /* Meilensteine mobil: Section mit 2015 – Bild und Schrift etwas über die Jahreszahl ziehen */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2015 .ynm-philo-intro__col--image,
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2015 .ynm-philo-intro__headline,
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2015 .ynm-philo-intro__text {
    transform: translateY(-50px);
  }

  /* Meilensteine mobil: Section mit 2016 nach oben schieben */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2016 {
    margin-top: -50px;
  }

  /* Meilensteine mobil: Section mit 2021 nach oben schieben */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2021 {
    margin-top: -50px;
  }

  /* Meilensteine mobil: Section mit 2021 – Bild und Schrift über die Jahreszahl ziehen */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2021 .ynm-philo-intro__col--image,
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2021 .ynm-philo-intro__headline,
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2021 .ynm-philo-intro__text {
    transform: translateY(-60px);
  }

  /* Meilensteine mobil: Section 6 (2018) näher an die Section davor rücken */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2018 {
    margin-top: -100px;
  }

  /* Meilensteine mobil: Section mit 2023 nach oben schieben */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-2023 {
    margin-top: -100px;
  }

  /* Meilensteine mobil: Section 9 näher an die Section davor rücken */
  body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--milestone-section-9 {
    margin-top: -40px;
  }

  /* Farm mobil: erstes Section-Bild mit mehr Abstand zum Slider */
  .ynm-philo-intro--farm-intro .ynm-philo-intro__figure {
    margin-top: 30px;
  }

  /* Farm mobil: erstes Section-Bild sofort zeigen, ohne Hereinfahr-Animation */
  .ynm-philo-intro--farm-intro .ynm-philo-intro__image {
    opacity: 1;
    transform: none;
  }

  .ynm-philo-intro--farm-intro .ynm-philo-intro__image.ynm-philo-intro__image--in-view {
    animation: none;
  }

  /* Farm mobil: hardcodiertes Section-2-Bild abrunden */
  .ynm-philo-intro__image--farm-mobile-section-2 {
    border-radius: 20px;
  }

  /* Farm mobil: Collage in Galerie links Bild 1 so breit wie das rechte Galeriebild anzeigen */
  .ynm-philo-intro--farm-pair .ynm-farm-mobile-collage-image {
    width: 100%;
    max-width: none;
    margin-bottom: 70px;
  }

  /* Farm mobil: Intro-Headlines in den Sections luftiger umbrechen */
  body.ynm-nachhaltigkeit .ynm-home-hero-slider--farm ~ .ynm-philo-intro .ynm-philo-intro__headline {
    line-height: 1.3;
  }

  /* Farm mobil: große Inline-Headlines im Text ebenfalls luftiger, Fließtext unverändert */
  body.ynm-nachhaltigkeit .ynm-home-hero-slider--farm ~ .ynm-philo-intro .ynm-philo-intro__text h1 {
    line-height: 1.3;
  }

  /* Aufforstung mobil: Intro-Headlines in den Sections luftiger umbrechen */
  body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung ~ .ynm-philo-intro .ynm-philo-intro__headline {
    line-height: 1.3;
  }

  /* Aufforstung mobil: erste Section zuerst Text, dann Bild */
  body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung + .ynm-philo-intro .ynm-philo-intro__col--text {
    order: 1;
  }

  body.ynm-nachhaltigkeit .ynm-home-hero-slider--aufforstung + .ynm-philo-intro .ynm-philo-intro__col--image {
    order: 2;
  }

  /* Aufforstung mobil: Content sicher innerhalb des Viewports halten */
  body.ynm-nachhaltigkeit .ynm-philo-intro--aufforstung .ynm-philo-intro__inner {
    max-width: 100%;
    margin: 0;
    padding: 0; /* kein zusätzliches Innenpadding, wir nutzen das von .site-main */
  }

  body.ynm-nachhaltigkeit .ynm-philo-intro--aufforstung .ynm-philo-intro__col--image,
  body.ynm-nachhaltigkeit .ynm-philo-intro--aufforstung .ynm-philo-intro__col--text {
    padding: 0;
  }

  /* Wiederaufforstung mobil: ACF linkes Bild 2 und Bild-1-Unterschrift ausblenden. */
  .ynm-auffo-figure--mobile-hidden,
  .ynm-auffo-subline--mobile-hidden {
    display: none;
  }

  /* Wiederaufforstung mobil: Block 2 näher an die vorherige Section ziehen. */
  .ynm-auffo-block-2-source {
    transform: translateY(-70px);
    margin-bottom: -70px;
  }

  /* Wiederaufforstung mobil: am Seitenende eigene Bildfolge Bild 1–4 anzeigen. */
  .ynm-philo-intro--aufforstung-last .ynm-auffo-last-desktop,
  .ynm-auffo-block-4-source {
    display: none;
  }

  .ynm-affo-text-desktop {
    display: none;
  }

  .ynm-affo-text-mobile-main,
  .ynm-philo-intro--aufforstung-last .ynm-auffo-mobile-final-gallery,
  .ynm-philo-intro--aufforstung-last .ynm-affo-mobile-more,
  .ynm-philo-intro--aufforstung-last .ynm-affo-mobile-block-4 {
    display: block;
  }

  .ynm-philo-intro--aufforstung-last .ynm-auffo-mobile-final-gallery .ynm-philo-intro__figure + .ynm-philo-intro__figure {
    margin-top: 40px;
  }

  .ynm-philo-intro--aufforstung-last .ynm-auffo-mobile-final-gallery .ynm-philo-intro__image {
    border-radius: 20px;
  }

  .ynm-philo-intro--aufforstung-last .ynm-affo-mobile-more,
  .ynm-philo-intro--aufforstung-last .ynm-affo-mobile-block-4 {
    margin-top: 40px;
  }

  .ynm-auffo-media iframe {
    width: 100%;
    max-width: 100%;
  }

  /* Mobile: Intro-Headlines dieser Seiten näher an den Content rücken, Desktop bleibt bei 150px */
  .ynm-philo-intro--presse-intro .ynm-philo-intro__headline,
  .ynm-philo-intro--kontakt-intro .ynm-philo-intro__headline,
  .ynm-philo-intro--videothek-page-intro .ynm-philo-intro__headline,
  .ynm-philo-intro--impressum-intro .ynm-philo-intro__headline,
  .ynm-philo-intro--datenschutz-intro .ynm-philo-intro__headline,
  .ynm-philo-intro--agb-intro .ynm-philo-intro__headline {
    margin-top: 15px;
  }
}

/* Aktivierte Scroll-Animation fürs Philosophie-Bild */
.ynm-philo-intro__image--in-view {
  animation: ynm-philo-image-in 0.8s ease-out forwards;
}

/* Farm-Pair-Testsection: rechtes Bild ohne Hereinfahr-Animation */
.ynm-philo-intro--farm-pair .ynm-philo-intro__col--text .ynm-philo-intro__image {
  opacity: 1;
  transform: none;
}

.ynm-philo-intro--farm-pair .ynm-philo-intro__col--text .ynm-philo-intro__image.ynm-philo-intro__image--in-view {
  animation: none;
}

/* Farm: rechte Bilder in den Bild/Bild-Sections sollen sich auf großen Screens
   genauso mit dem verfügbaren Platz mitvergrößern wie auf Aufforstung/Versprechen. */
@media (min-width: 1024px) {
  .ynm-philo-intro--farm-pair .ynm-philo-intro__col--text .ynm-philo-intro__figure,
  .ynm-philo-intro--farm-pair .ynm-philo-intro__col--text .ynm-philo-intro__image {
    width: 100%;
    max-width: none;
  }
}

@keyframes ynm-philo-image-in {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ynm-home-hero-slider {
	margin: 32px 0 40px;
}

/* Startseiten-Hero: Desktop = Slider 6, Mobile = Slider 22 */
.ynm-home-hero-slider--mobile {
	display: none;
}

@media (max-width: 1023px) {
	.ynm-home-hero-slider--desktop {
		display: none;
	}

	.ynm-home-hero-slider--mobile {
		display: block;
	}
}

/* Farm-Seite: zusätzlicher Abstand zwischen Slider und erster Section (+60px → 140px total) */
.ynm-home-hero-slider--farm {
	margin-bottom: 100px;
}

/* Aufforstung-Seite: gleicher Abstand zwischen Slider und Intro-Headline wie auf der Farm */
.ynm-home-hero-slider--aufforstung {
	margin-bottom: 100px;
}

/* Versprechen-Seite: gleicher Abstand zwischen Slider und Intro-Headline wie auf der Farm */
.ynm-home-hero-slider--versprechen {
	margin-bottom: 100px;
}

/* Philosophie-Seite (CPT): gleicher Abstand zwischen Slider und Intro-Headline wie auf der Farm */
.ynm-home-hero-slider--philo {
	margin-bottom: 100px;
}

/* Frontseite: Slider über volle Breite, Content bleibt eingerückt */
body.ynm-front .ynm-home-hero-slider {
	margin: 32px -32px 0; /* gleicht das 32px-Padding von .site-main aus, kein Extra-Abstand nach unten auf der Startseite */
}

/* Mobile Startseite: mobiler Hero-Slider (22) 150px weiter unten starten lassen,
   mit gleichem seitlichen Offset wie Desktop (-32px) */
@media (max-width: 1023px) {
	body.ynm-front .ynm-home-hero-slider--mobile {
		margin: 150px -32px 0;
	}
}

/* Startseiten-Slider 11–14: Desktop/Mobile-Varianten steuern */
.ynm-home-slider--mobile {
	display: none;
}

@media (max-width: 1023px) {
	.ynm-home-slider--desktop {
		display: none;
	}

	.ynm-home-slider--mobile {
		display: block;
	}
}

/* Startseiten-Slider: wirklich full width, unabhängig von Content-Breite */
.ynm-home-hero-slider .n2-section-smartslider {
	max-width: none !important;
	width: 100%;
}

/* Spezielles Layout für Abschlussbild im Nachhaltigkeitsbereich (z.B. "Nachhaltigkeitsversprechen"). */
.ynm-philo-intro--bottom-image .ynm-philo-intro__inner {
	display: flex;            /* Grid-Layout für diesen Block aufheben */
	justify-content: center; /* Bild mittig ausrichten */
}

.ynm-philo-intro--bottom-image .ynm-philo-intro__col--image {
	margin: 0 auto;
	text-align: center;
}

.ynm-philo-intro--bottom-image .ynm-philo-intro__image {
	display: block;
	margin: 0 auto;
}

/* Versprechen-Intro-Section: gleiches Verhalten wie Farm-Intro (kein Gap zur ersten Section) */
.ynm-philo-intro--versprechen-intro {
  margin-bottom: 0;
}

.ynm-philo-intro--versprechen-intro + .ynm-philo-intro {
  margin-top: 0;
}

/* Philosophie-Intro-Section: gleicher Abstand/Verhalten wie bei den Nachhaltigkeits-Intros */
.ynm-philo-intro--philo-intro {
  margin-bottom: 0;
}

/* Zertifizierungen: gesamten Intro-Content weiter nach unten schieben, damit
   oberer weiße Bereich + Abstand stimmig wirken. */
body.ynm-ueber-uns.ynm-ueber-uns-zertifizierungen .ynm-philo-intro--philo-intro {
	margin-top: 200px;
}

/* Meilensteine: gleicher Abstand wie Zertifizierungen */
body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .ynm-philo-intro--philo-intro {
	margin-top: 200px;
}

.ynm-philo-intro--philo-intro + .ynm-philo-intro {
  margin-top: 0;
}

.ynm-philo-intro--philo-intro .ynm-philo-intro__headline {
  color: #9d2640;
}

/* Produkte – Einstiegsbereich */
.ynm-products-hero {
  margin: 40px 0 40px;
}

.ynm-products-hero__inner {
  max-width: none;
  margin: 0;
}

.ynm-products-hero__headline {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.03rem;
  margin: 0 0 12px;
}

.ynm-products-hero__text {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}

/* Produkte – Grid mit Platzhalter-Karten */
.ynm-products-grid {
  margin: 32px 0 80px;
}

/* Produkte-Übersicht Desktop: deutlicher Abstand zwischen Slider und erstem Grid-Block */
@media (min-width: 1024px) {
  .ynm-products-grid {
	margin: 150px 0 80px;
	}
}

/* Produkte – Intro-Slider (SmartSlider ID 3) direkt unter dem Sticky-Header */
.ynm-products-intro-slider {
	margin: 0 0 60px; /* direkt unter dem Sticky-Header, 60px Abstand vor dem Grid */
	max-width: none;      /* volle Breite wie Über-uns-/Nachhaltigkeits-Content */
}

.ynm-products-intro-slider .n2-section-smartslider {
	border-radius: 0; /* Slider selbst unverändert, Container steuert Breite/Abstand */
}

/* Produkte – zusätzliche Slider zwischen den Grids (Desktop/Mobile gezielt steuerbar) */
.ynm-products-slider {
	margin: 80px 0 40px;
	max-width: none;
}

.ynm-products-slider--mobile {
	display: none;
}

@media (max-width: 1023px) {
	.ynm-products-slider {
		display: none;
	}

	/* Mobile: eigene SmartSlider pro Einzelhandel-Section anzeigen. */
	.ynm-products-slider--mobile {
		display: block;
		margin: 60px 0 32px;
	}
}

.ynm-products-grid__inner {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Produkte-Grid: Auf Desktop auf 1160px begrenzen und zentrieren */
@media (min-width: 1024px) {
  .ynm-products-grid__inner {
    max-width: 1160px;
    margin: 0 auto;
  }
}


/* Headline über dem Grid über alle Spalten laufen lassen */
.ynm-products-grid__header {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

/* Erste Produkte-Headline (Mangrovenwald) – zusätzlicher Abstand nach oben */
#ynm-section-mangrovenwald.ynm-products-grid__header {
  margin-top: 30px;
}

.ynm-products-grid__headline {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

/* Produkte: Mangrovenwald-Headline – "Garnelen" groß, Rest kleiner (nur Desktop) */
@media (min-width: 1024px) {
  #ynm-section-mangrovenwald .ynm-products-grid__headline-main {
    display: block;
    font-size: 30px;
    font-weight: 400;
  }

  #ynm-section-mangrovenwald .ynm-products-grid__headline-sub {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-top: -6px;
    margin-left: 20px; /* 20px Einrückung für die zweite Zeile */
  }

  /* Desktop: zweite Zeile im Mangrovenwald-Block in derselben Zeile halten */
  #ynm-section-mangrovenwald .ynm-products-grid__headline-sub-line2 {
    display: inline;
  }
}

/* Produkte: weitere Headlines (Premium/Frische/Sortiment) –
   erste Zeile klein & fett, zweite Zeile groß & eingerückt (nur Desktop) */
@media (min-width: 1024px) {
  #ynm-section-premium .ynm-products-grid__headline-main,
  #ynm-section-premium-seafood .ynm-products-grid__headline-main,
  #ynm-section-premium-fische .ynm-products-grid__headline-main,
  #ynm-section-frische-sortiment .ynm-products-grid__headline-main,
  #ynm-section-sortiment-deutschland .ynm-products-grid__headline-main {
    display: block;
    font-size: 18px;
    font-weight: 600;
  }

  #ynm-section-premium .ynm-products-grid__headline-sub,
  #ynm-section-premium-seafood .ynm-products-grid__headline-sub,
  #ynm-section-premium-fische .ynm-products-grid__headline-sub,
  #ynm-section-frische-sortiment .ynm-products-grid__headline-sub,
  #ynm-section-sortiment-deutschland .ynm-products-grid__headline-sub {
    display: block;
    font-size: 30px;
    font-weight: 400;
    margin-top: -6px;
    margin-left: 20px;
  }
}

.ynm-products-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.ynm-products-card__figure {
  margin: 0 0 8px;
}

.ynm-products-card__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0; /* reines Produktbild ohne zusätzliche Karte */
}

/* Produkte-Übersicht: sanfter Hover-Zoom nur im Grid, nicht auf Detailseiten */
.ynm-products-grid .ynm-products-card__image {
  transition: transform 0.25s ease-out;
}

/* Produkte Großhandel: kein Hover-Zoom auf den Produktbildern */
body.ynm-produkte-grosshandel .ynm-products-grid .ynm-products-card__image {
  transition: none;
}

/* Grosshandel-Produkte: Hover-Overlay auf dem Produktbild */
body.ynm-produkte-grosshandel .ynm-products-card--gh {
  position: relative;
}

body.ynm-produkte-grosshandel .ynm-products-card__media {
  position: relative;
  overflow: hidden;
}

body.ynm-produkte-grosshandel .ynm-gh-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(195, 203, 66, 0.45) 0%, rgba(195, 203, 66, 0.92) 100%); /* Yuu'n Mee Grün mit vertikalem Transparenzverlauf */
  color: #2d2c2c;
  opacity: 0;
  pointer-events: none;
  border-radius: 20px;
  /* Gesamtes Overlay 25px nach oben schieben */
  transform: translateY(-25px);
  /* Schiefer Anschnitt oben: links deutlich tiefer als rechts */
  clip-path: polygon(0 38%, 100% 20%, 100% 100%, 0% 100%);
}

body.ynm-produkte-grosshandel .ynm-gh-hover__inner {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 52px;   /* Content noch etwas weiter unten starten wegen der tieferen Schräge */
  bottom: 50px; /* 50px Platz zwischen Text und Unterkante */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Textblöcke von unten nach oben stapeln */
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

body.ynm-produkte-grosshandel .ynm-gh-hover__block {
  overflow: hidden;
}

body.ynm-produkte-grosshandel .ynm-gh-hover__block--desc {
  font-weight: 600;
}

body.ynm-produkte-grosshandel .ynm-gh-hover__block--prep {
  font-weight: 400;
}

body.ynm-produkte-grosshandel .ynm-gh-hover__label {
  display: block;
  font-size: 14px; /* gleiche Größe wie der Overlay-Text */
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-top: 10px;   /* 10px Abstand nach oben vor der Zubereitung-Headline */
  margin-bottom: 4px;
}

/* Mobile: Großhandel-Hover-Overlay erst nach Touch anzeigen */
@media (max-width: 1023px) {
	body.ynm-produkte-grosshandel .ynm-products-card--gh.ynm-gh-hover--active .ynm-gh-hover {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Hover-Trigger nur auf Desktop */
@media (min-width: 1024px) {
  body.ynm-produkte-grosshandel .ynm-products-card--gh:hover .ynm-gh-hover,
  body.ynm-produkte-grosshandel .ynm-products-card--gh:focus-within .ynm-gh-hover {
    opacity: 1;
    pointer-events: auto;
  }
}

.ynm-videothek__section-headline {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9d2640; /* Yuu'n Mee Rot */
  margin: 40px 0 16px;
}

.ynm-videothek__text {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 24px;
}

.ynm-videothek__video .wp-video,
.ynm-videothek__video iframe,
.ynm-videothek__video video {
  width: 100% !important;
  max-width: 900px;
}

.ynm-videothek__video iframe,
.ynm-videothek__video video {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Videothek: eingebettetes Seitenvideo in Textspalten-Breite direkt unterhalb der Intro-Section */
body.ynm-videothek .ynm-videothek__video-section {
  margin: -80px 0 100px;
}

body.ynm-videothek .ynm-videothek__video-section .ynm-philo-intro__inner {
  align-items: flex-start;
}

body.ynm-videothek .ynm-videothek__video {
  margin: 0;
}

/* Rezepte – Basislayout für die Übersicht & Kategorien */
.ynm-recipes-section {
	max-width: 1160px;
	margin: 40px auto 80px;
}

.ynm-recipes-section__inner {
	max-width: 100%;
	margin: 0;
}

.ynm-recipes-section__headline-main {
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.ynm-recipes-section__headline {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.ynm-recipes-section__text {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
	margin: 0;
}

/* Rezepte – Grid mit Karten (Breite wie Produktübersicht) */
.ynm-recipes-grid {
	margin-top: 74px; /* Desktop-Basiswert */
}

.ynm-recipes-grid__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (min-width: 1024px) {
	.ynm-recipes-grid__inner {
		max-width: 1160px;
		margin: 0 auto;
	}
}

@media (max-width: 900px) {
	.ynm-recipes-grid__inner {
		grid-template-columns: 1fr;
	}

	/* Rezepte-Grid Mobile: zusätzlich 60px Abstand nach oben, damit nichts unter Header/Balken klemmt */
	.ynm-recipes-grid {
		margin-top: 134px; /* 74px Desktop-Basis + 60px Extra für Mobile */
	}
}

.ynm-recipes-card {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.ynm-recipes-card__figure {
	margin: 0 0 8px;
}

.ynm-recipes-card__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	transition: transform 0.25s ease-out;
}

@media (min-width: 1024px) {
	/* Rezepte- & Blog-Übersicht: sanfter Hover-Zoom wie bei den Produkten */
	.ynm-recipes-card:hover .ynm-recipes-card__image,
	.ynm-recipes-card__link:focus-visible .ynm-recipes-card__image {
		transform: scale(1.03);
	}
}

.ynm-recipes-card__category {
	display: block;
	font-family: var(--font-heading);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9d2640;
	margin-bottom: 4px;
}

.ynm-recipes-card__title {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 4px;
}

.ynm-recipes-card__meta {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: #5a5653;
	margin: 0;
}

.ynm-recipes-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

@media (min-width: 1024px) {
	.ynm-recipes-card__link:hover,
	.ynm-recipes-card__link:focus-visible {
		text-decoration: underline;
	}
}

/* Rezept-Detailseite (CPT `rezept`) – dreispaltiges Layout wie Produktdetail */
.ynm-recipe-layout {
	max-width: 1160px;
	margin: 60px auto 80px;
}

.ynm-recipe-layout__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.3fr);
	gap: 40px;
	align-items: flex-start;
}

/* Blog-Artikel: mittlere Spalte breiter machen, Platz von rechts holen.
   Linke Spalte bleibt unverändert als schmale Placeholder-Column. */
@media (min-width: 1024px) {
	body.ynm-blog.single-post .ynm-recipe-layout__inner,
	body.ynm-blog.single .ynm-recipe-layout__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 0.6fr);
	}
}

.ynm-recipe-layout__col--left {
	min-height: 1px; /* reine Platzhalter-Spalte */
}

.ynm-recipe__title {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.04em;
	margin: 0 0 24px;
}

.ynm-recipe__figure {
	margin: 0 0 24px;
}

.ynm-recipe__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.ynm-recipe__description {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
	margin: 0 0 40px;
}

/* Bilder innerhalb des Artikel-/Rezepttexts: gleiche Optik wie das Hauptbild,
   füllen standardmäßig die Breite der mittleren Spalte. */
.ynm-recipe__description img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 20px;
	margin: 0 0 24px;
	margin-left: auto;
	margin-right: auto;
}

.ynm-recipe__share-placeholder,
.ynm-recipe__calculator-placeholder {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
}

.ynm-recipe__share-placeholder h2,
.ynm-recipe__calculator-placeholder h2 {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.ynm-recipe-share {
	margin: 24px 0 0;
}

.ynm-recipe-share__headline {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

/* Rezeptrechner – Grundlayout */
.ynm-recipe-calculator {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	background: #f4f2f0;
	border-radius: 24px;
	padding: 20px 20px 16px;
}

.ynm-recipe-calculator__headline {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.ynm-recipe-calculator__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}

.ynm-recipe-calculator__label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9d2640;
}

.ynm-recipe-calculator__input {
	width: 52px;
	text-align: center;
	border-radius: 999px;
	border: 1px solid #ccc;
	padding: 4px 6px;
	font-size: 14px;
}

.ynm-recipe-calculator__btn {
	border-radius: 999px;
	border: none;
	background: #9d2640;
	color: #fff;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.ynm-recipe-calculator__btn:hover,
.ynm-recipe-calculator__btn:focus-visible {
	background: #c5314d;
}

.ynm-recipe-calculator__list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ynm-recipe-calculator__group-title {
	margin: 10px 0 4px;
	font-family: var(--font-heading);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9d2640;
}

/* Suchergebnisse – Introblock & Typen-Label */
.ynm-search-results__intro {
	max-width: 1160px;
	margin: 40px auto 24px;
	padding: 0 16px 0 32px;
}

.ynm-search-results__headline {
	font-family: var(--font-heading);
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
}

.ynm-search-results__meta {
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #666666;
}

.ynm-search-card__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-top: 8px;
}

.ynm-search-card__type {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9d2640;
}

.ynm-search-results__empty {
	max-width: 1160px;
	margin: 40px auto;
	padding: 0 16px 0 32px;
	font-size: 16px;
}

/* Print-Logo standardmäßig verstecken, nur im Druck anzeigen */
.ynm-print-logo {
	display: none;
}

.ynm-recipe-calculator__item {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.ynm-recipe-calculator__amount {
	white-space: nowrap;
	font-weight: 600;
}

.ynm-recipe-calculator__ingredient {
	flex: 1 1 auto;
	text-align: right;
}

.ynm-recipe-calculator__hint {
	margin: 6px 0 0;
	font-size: 11px;
	color: #777;
}

.ynm-recipe-calculator__group-title {
	margin: 10px 0 4px;
	font-family: var(--font-heading);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9d2640;
}

/* Drucklayout für Rezept-Detailseiten (CPT `rezept`) */
@media print {
	/* Nur auf Rezeptdetail: Kopf/Navi/Sharing ausblenden */
	body.ynm-rezepte-detail .ynm-header-stick,
	body.ynm-rezepte-detail .ynm-topbar,
	body.ynm-rezepte-detail .ynm-social-bar,
	body.ynm-rezepte-detail .ynm-sticky-subnav,
	body.ynm-rezepte-detail .ynm-rezepte-mobile-bar,
	body.ynm-rezepte-detail .ynm-blog-mobile-bar,
	body.ynm-rezepte-detail .ynm-product-nextprev,
	body.ynm-rezepte-detail .ynm-blog-nextprev,
	body.ynm-rezepte-detail .ynm-recipe-share,
	body.ynm-rezepte-detail .ynm-search-overlay,
	body.ynm-rezepte-detail .site-footer {
		display: none !important;
	}

	body.ynm-rezepte-detail {
		background: #ffffff !important;
		color: #000000 !important;
		margin: 0 !important;
		padding-top: 0 !important;
	}

	body.ynm-rezepte-detail::before {
		content: none !important;
		background: none !important;
	}

	body.ynm-rezepte-detail .ynm-print-logo {
		display: block;
		margin: -40px 0 5mm; /* 40px nach oben gezogen, unter Beibehaltung des unteren Abstands */
	}

	body.ynm-rezepte-detail .ynm-print-logo img {
		display: block;
		width: 264px; /* ~20 % größer als vorher (220px → 264px) */
		height: auto;
	}

	body.ynm-rezepte-detail .site-main {
		padding: 0;
		margin: 0;
		background: #ffffff !important;
	}

	body.ynm-rezepte-detail .ynm-recipe-layout {
		max-width: 100%;
		margin: 0;
	}

	body.ynm-rezepte-detail .ynm-recipe-layout__inner {
		display: block;
	}

	body.ynm-rezepte-detail .ynm-recipe-layout__col--left {
		display: none !important;
	}

	body.ynm-rezepte-detail .ynm-recipe-layout__col--middle {
		width: 100%;
	}

	body.ynm-rezepte-detail .ynm-recipe-layout__col--right {
		margin-top: 16px;
	}

	body.ynm-rezepte-detail .ynm-recipe__figure {
		text-align: center;
	}

	body.ynm-rezepte-detail .ynm-recipe__figure img,
	body.ynm-rezepte-detail .ynm-recipe__image {
		max-width: 50%;
		height: auto;
		display: inline-block;
	}

	@page {
		size: A4;
	}

	@page :first {
		margin: 5mm 15mm 15mm 15mm; /* erste Seite: knappes Top-Margin für Logo */
	}

	@page {
		margin: 12mm 15mm 15mm 15mm; /* Folgeseiten: etwas mehr Abstand nach oben */
	}
}

.ynm-recipe-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ynm-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	font-family: var(--font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 999px;
	border: 1px solid #9d2640;
	background: transparent;
	color: #9d2640;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease-out, color 0.15s ease-out;
}

.ynm-share-btn:hover,
.ynm-share-btn:focus-visible {
	background: #9d2640;
	color: #ffffff;
}

/* Kontakt: E-Mail-Button mit Yuu'n Mee Grün statt Rot */
body.page-template-page-kontakt .ynm-share-btn--kontakt {
	border-color: rgba(195, 203, 66, 1);
	background: rgba(195, 203, 66, 1);
	color: #000000;
	font-size: 15px;
}

body.page-template-page-kontakt .ynm-share-btn--kontakt:hover,
body.page-template-page-kontakt .ynm-share-btn--kontakt:focus-visible {
	background: rgba(195, 203, 66, 1);
	color: #ffffff;
}

/* Kontakt: vertikaler Abstand oberhalb & unterhalb des Mail-Buttons */
body.page-template-page-kontakt .ynm-kontakt__actions {
	margin-top: 60px;  /* Abstand zum Text "Schreiben Sie uns gerne:" */
	margin-bottom: 100px;
}

/* Impressum: 100px Spacer unterhalb des Inhalts (ersetzt die alte Blindtext-Section) */
body.page-template-page-impressum .ynm-impressum-spacer {
	height: 100px;
}

/* Meilensteine: zusätzlicher Spacer nach der 2005-Section */
body.ynm-ueber-uns-meilensteine .ynm-milestone-spacer-2005 {
	height: 80px;
}

/* Meilensteine: zusätzlicher Spacer nach der 2023-Section */
body.ynm-ueber-uns-meilensteine .ynm-milestone-spacer-2023 {
	height: 50px;
}

@media (max-width: 900px) {
	.ynm-recipe-layout__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Rezeptdetail Mobile: Bild → Rechner → Beschreibung → Share.
	   Die mittlere Spalte wird aufgelöst, damit der rechte Rechner zwischen
	   Rezeptbild und Beschreibung in die mobile Reihenfolge einsortiert werden kann. */
	body.single-rezept .ynm-recipe-layout__col--left {
		display: none;
	}

	body.single-rezept .ynm-recipe-layout__col--middle {
		display: contents;
	}

	body.single-rezept .ynm-recipe__title {
		order: 1;
	}

	body.single-rezept .ynm-recipe__figure {
		order: 2;
	}

	body.single-rezept .ynm-recipe-layout__col--right {
		order: 3;
		width: 100%;
	}

	body.single-rezept .ynm-recipe__description {
		order: 4;
	}

	body.single-rezept .ynm-recipe-share {
		order: 5;
	}

	/* Blog- & Rezeptdetail: gleiche Content-Breite wie Produktdetail →
	   kein zusätzliches Innen-Padding, Breite kommt nur von .site-main (32px) */
	.ynm-recipe-layout {
		margin: 40px 0 60px;
		padding: 0;
	}

	/* Rezeptdetail Mobile: durch das Ausblenden der leeren linken Grid-Spalte
	   entfällt deren früherer 32px-Grid-Abstand; hier bewusst wieder ausgleichen. */
	body.single-rezept .ynm-recipe-layout {
		margin-top: 72px;
	}
}

@media (min-width: 901px) and (max-width: 1023px) {
	/* Rezeptdetail: rechter Inhalt mit 30px Abstand zum Rand analog zu Produktdetail-Layout */
	.ynm-recipe-layout__col--right {
		padding-right: 30px;
		box-sizing: border-box;
	}
}

/* Rezepte & Blog – Keil-Tile: Basis für alle Rezept- und Blogseiten + Detail-Override */
@media (min-width: 1024px) {
	body.ynm-rezepte .site-main,
	body.ynm-blog .site-main {
		background-image: url('assets/images/ynm-keil-tile.svg');
	}

	/* Rezepte & Blog (Übersicht + Detail): Keil-Tile vertikal wiederholen, damit
	   lange Seiten nach unten weiterlaufen (Keil-Teppich-Effekt) */
	body.ynm-rezepte .site-main,
	body.ynm-blog .site-main {
		background-repeat: repeat-y;
		/* Feste Tile-Höhe, damit die Keile wie auf Mangrovenwald-Farm ~500px/325px hoch wirken */
		background-size: 100% 2250px;
	}

	body.page-template-page-rezepte .site-main,
	body.page-template-page-garnelen-rezepte .site-main,
	body.page-template-page-fisch-rezepte .site-main,
	body.page-template-page-meeresfruechte-rezepte .site-main,
	body.page-template-page-community-rezepte .site-main {
		background-position: center 200px; /* Übersicht: 14px früher als Detail */
	}

	body.single-rezept .site-main {
		background-position: center 200px;
	}

	/* Blog-Übersicht & -Detailseiten: identischer Keil-Offset wie Rezepte-Übersicht. */
	body.ynm-blog .site-main {
		background-position: center 200px;
	}
}

/* Mobile: Rezepte & Blog – Keile aktivieren (vereinfachte Variante) */
@media (max-width: 1023px) {
	body.ynm-rezepte .site-main,
	body.ynm-blog .site-main {
		background-image: url('assets/images/ynm-keil-tile.svg');
		background-repeat: repeat-y;
		background-size: 100% 2600px;
		background-position: center 200px;
	}
}

.ynm-philo-intro__headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.03rem;
  margin: 0 0 16px;
  margin: 40px 0 8px;
}

.ynm-products-grid .ynm-products-card:hover .ynm-products-card__image,
.ynm-products-grid .ynm-products-card__link:focus-visible .ynm-products-card__image {
  transform: scale(1.03);
}

/* Grosshandel-Übersicht: kein Zoom-Effekt auf den Produktbildern */
body.ynm-produkte-grosshandel .ynm-products-grid .ynm-products-card:hover .ynm-products-card__image,
body.ynm-produkte-grosshandel .ynm-products-grid .ynm-products-card__link:focus-visible .ynm-products-card__image {
  transform: none;
}

.ynm-products-card__title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.ynm-products-card__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Produkte-Übersicht Desktop: Produkttitel-Farbe & Underline nur bei Hover */
@media (min-width: 1024px) {
  .ynm-products-grid .ynm-products-card__link {
    text-decoration: none;
  }

  .ynm-products-grid .ynm-products-card__title {
    color: #2F2D2B;
    text-decoration: none;
  }

  .ynm-products-grid .ynm-products-card__link:hover,
  .ynm-products-grid .ynm-products-card__link:focus-visible {
    text-decoration: underline;
    color: #9d2640;
  }

  .ynm-products-grid .ynm-products-card__link:hover .ynm-products-card__title,
  .ynm-products-grid .ynm-products-card__link:focus-visible .ynm-products-card__title {
		color: #9d2640;
  }
}

@media (max-width: 1023px) {
  .ynm-products-grid__inner {
    grid-template-columns: 1fr;
  }

	/* Produkte-Übersicht Mobile: Headlines in #333 auf weißem Hintergrund */
	body.ynm-produkte .ynm-products-grid__headline {
		color: #333333;
	}

  /* Mobile: Mangrovenwald-Headline in drei Zeilen aufbrechen */
  body.ynm-produkte #ynm-section-mangrovenwald .ynm-products-grid__headline-main,
  body.ynm-produkte #ynm-section-mangrovenwald .ynm-products-grid__headline-sub,
  body.ynm-produkte #ynm-section-mangrovenwald .ynm-products-grid__headline-sub-line2 {
    display: block;
  }

  /* Mobile: restliche Headlines jeweils in zwei Zeilen brechen */
  body.ynm-produkte #ynm-section-premium .ynm-products-grid__headline-main,
  body.ynm-produkte #ynm-section-premium-seafood .ynm-products-grid__headline-main,
  body.ynm-produkte #ynm-section-premium-fische .ynm-products-grid__headline-main,
  body.ynm-produkte #ynm-section-frische-sortiment .ynm-products-grid__headline-main,
  body.ynm-produkte #ynm-section-sortiment-deutschland .ynm-products-grid__headline-main,
  body.ynm-produkte #ynm-section-premium .ynm-products-grid__headline-sub,
  body.ynm-produkte #ynm-section-premium-seafood .ynm-products-grid__headline-sub,
  body.ynm-produkte #ynm-section-premium-fische .ynm-products-grid__headline-sub,
  body.ynm-produkte #ynm-section-frische-sortiment .ynm-products-grid__headline-sub,
  body.ynm-produkte #ynm-section-sortiment-deutschland .ynm-products-grid__headline-sub {
    display: block;
  }

	/* Typo auf Mobile an Desktop-Hierarchie angleichen */
	body.ynm-produkte #ynm-section-mangrovenwald .ynm-products-grid__headline-main {
		font-size: 30px;
		font-weight: 400;
	}

	body.ynm-produkte #ynm-section-mangrovenwald .ynm-products-grid__headline-sub,
	body.ynm-produkte #ynm-section-mangrovenwald .ynm-products-grid__headline-sub-line2 {
		font-size: 18px;
		font-weight: 600;
	}

	body.ynm-produkte #ynm-section-premium .ynm-products-grid__headline-main,
	body.ynm-produkte #ynm-section-premium-seafood .ynm-products-grid__headline-main,
	body.ynm-produkte #ynm-section-premium-fische .ynm-products-grid__headline-main,
	body.ynm-produkte #ynm-section-frische-sortiment .ynm-products-grid__headline-main,
	body.ynm-produkte #ynm-section-sortiment-deutschland .ynm-products-grid__headline-main {
		font-size: 18px;
		font-weight: 600;
	}

	body.ynm-produkte #ynm-section-premium .ynm-products-grid__headline-sub,
	body.ynm-produkte #ynm-section-premium-seafood .ynm-products-grid__headline-sub,
	body.ynm-produkte #ynm-section-premium-fische .ynm-products-grid__headline-sub,
	body.ynm-produkte #ynm-section-frische-sortiment .ynm-products-grid__headline-sub,
	body.ynm-produkte #ynm-section-sortiment-deutschland .ynm-products-grid__headline-sub {
		font-size: 30px;
		font-weight: 400;
	}

	/* Produkte-Übersicht Mobile: Produkttitel-Farbe & Underline nur bei Hover/Fokus */
	body.ynm-produkte .ynm-products-grid .ynm-products-card__link {
		text-decoration: none;
	}

	body.ynm-produkte .ynm-products-grid .ynm-products-card__title {
	color: #333333;
	text-decoration: none;
	margin-left: 30px;
	}

  body.ynm-produkte .ynm-products-grid .ynm-products-card__link:hover,
  body.ynm-produkte .ynm-products-grid .ynm-products-card__link:focus-visible {
	    text-decoration: underline;
  }
}

/* Produkte: SmartSlider nur auf Desktop/Desktop-Tablet anzeigen, auf Mobile ausblenden */
@media (max-width: 1023px) {
  .ynm-products-intro-slider {
    display: none;
  }
}

.site-footer {
  height: 85px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(to right, #9d2640, #cd163d); /* gleicher Verlauf wie Header */
  position: relative;
  z-index: 20; /* Footer liegt garantiert über allen Content-Shapes */
}

.ynm-footer-legal {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 4px;
}

.ynm-footer-legal a {
	color: inherit;
	text-decoration: none;
}

.ynm-footer-legal a:hover,
.ynm-footer-legal a:focus-visible {
	text-decoration: underline;
}

.ynm-footer-legal__sep {
	opacity: 0.7;
}

/* Newsletter-Seite: Contact Form 7 im Look der Rezept-Share-Buttons (global, alle Viewports) */
body.page-template-page-newsletter .wpcf7 form {
  max-width: 520px;
  margin: 0;
}

body.page-template-page-newsletter .wpcf7-form p {
  margin: 0 0 16px;
}

body.page-template-page-newsletter .wpcf7-form label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* Checkbox-/DSGVO-Text: normale Schreibweise, kein Uppercase */
body.page-template-page-newsletter .wpcf7-form .wpcf7-list-item-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-text,
body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-email,
body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid #9d2640;
  background: #ffffff;
  color: #9d2640;
  font-size: 15px;
  font-family: var(--font-body);
}

body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-textarea {
  border-radius: 18px;
}

body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-text:focus,
body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-email:focus,
body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-textarea:focus {
  outline: none;
  border-color: #9d2640;
  box-shadow: 0 0 0 1px rgba(157, 38, 64, 0.18);
}

body.page-template-page-newsletter .wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: 1px solid #9d2640;
  background: #ffffff;
  color: #9d2640;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}

body.page-template-page-newsletter .wpcf7-form .wpcf7-submit:hover,
body.page-template-page-newsletter .wpcf7-form .wpcf7-submit:focus-visible {
  background: #9d2640;
  color: #ffffff;
}

@media (max-width: 1023px) {
  body.page-template-page-newsletter .wpcf7 form {
    max-width: 100%;
  }

  body.page-template-page-newsletter .ynm-philo-intro__col--text .wpcf7 {
    margin-top: 16px;
  }
}

/* Desktop: "Sticky-Footer"-Layout NUR für kurze Seiten (Presse, Kontakt, Legal, Videothek, Blog- & Rezept-Übersicht) */
@media (min-width: 1024px) {
  html,
  body.ynm-presse,
  body.ynm-kontakt,
  body.ynm-impressum,
  body.ynm-datenschutz,
  body.ynm-agb,
  body.ynm-videothek,
  body.ynm-blog,
  body.ynm-rezepte {
    min-height: 100vh; /* Dokumenthöhe mindestens Viewport-Höhe → unterer Bereich füllt den Screen */
  }

  body.ynm-presse,
  body.ynm-kontakt,
  body.ynm-impressum,
  body.ynm-datenschutz,
  body.ynm-agb,
  body.ynm-videothek,
  body.ynm-blog,
  body.ynm-rezepte {
    display: flex;
    flex-direction: column;
    background: var(--ynm-bg); /* Seitenhintergrund weiß lassen, Verlauf nur im Footer */
  }

  body.ynm-presse .site-main,
  body.ynm-kontakt .site-main,
  body.ynm-impressum .site-main,
  body.ynm-datenschutz .site-main,
  body.ynm-agb .site-main,
  body.ynm-videothek .site-main,
  body.ynm-blog .site-main,
  body.ynm-rezepte .site-main {
    flex: 1 0 auto; /* Content-Bereich dehnt sich, Footer rutscht ans untere Ende */
  }

  body.ynm-presse .site-footer,
  body.ynm-kontakt .site-footer,
  body.ynm-impressum .site-footer,
  body.ynm-datenschutz .site-footer,
  body.ynm-agb .site-footer,
  body.ynm-videothek .site-footer,
  body.ynm-blog .site-footer,
  body.ynm-rezepte .site-footer {
    flex-shrink: 0; /* Footer bleibt am Dokumentende, scrollt normal mit */
  }
}

/* Rechter roter Balken auf Desktop, hinter dem Header */
@media (min-width: 1024px) {
  body {
    position: relative;
  }

  /* Rezepte, Blog & Legal-Pages: kleine horizontale Überläufe (Header-/Keil-Shapes) ausblenden */
  body.ynm-rezepte,
  body.ynm-blog,
  body.ynm-videothek,
  body.ynm-presse,
  body.ynm-kontakt,
  body.ynm-impressum,
  body.ynm-datenschutz,
  /* Rezepte, Blog, Legal-Pages & Produktdetail: kleine horizontale Überläufe (Header-/Keil-Shapes) ausblenden */
  body.ynm-rezepte,
  body.ynm-blog,
  body.ynm-videothek,
  body.ynm-presse,
  body.ynm-kontakt,
  body.ynm-impressum,
  body.ynm-datenschutz,
  body.ynm-agb,
  body.ynm-produkte.ynm-product-detail {
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 100vh;
    background: #cd163d;
    z-index: 5; /* über dem Content, aber unter dem Header */
  }

  .ynm-topbar,
  .site-header-main {
    position: relative;
    z-index: 10; /* Kopfbereich bleibt über dem Balken */
  }

  /* Desktop: Header-Wrapper lässt Schatten/Schrägen frei laufen */
  .ynm-header-stick {
    overflow: visible;
  }

  /* Desktop: Header selbst sticky halten */
  .site-header-main {
    position: sticky;
    top: 0;
  }

  /* Horizontales Sticky-Menü direkt unter dem Header */
  .ynm-sticky-subnav {
    position: sticky;
    top: 0; /* hängt am oberen Viewport und „klebt“ unter dem Header */
    z-index: 6; /* über Content, unter Header */
    width: calc(100% - 50px); /* endet vor dem rechten roten Balken (50px) */
    margin: -62px 0 0 0; /* Block 62px nach oben ziehen */
    padding: 60px 24px 26px 24px; /* ~20% schlanker als 75/32 */
    background: none; /* Verlauf wandert in das Pseudo-Element */
    overflow: hidden; /* für die Schräge als Gegenpart */
  }

  /* Desktop: Content-Bereich mit extra Abstand zum rechten Social-Balken (global für alle Seiten) */
  .site-main {
    /* Basis war padding: 0 32px 40px; → rechts jetzt 80px, links bleibt 32px */
    padding: 0 80px 40px 32px;
    position: relative; /* Basis für pseudo-Background-Shapes */
    z-index: 0;
  }

  /* Produkte Desktop: Content nur 40px unter dem Kopfbereich starten lassen */
  body.ynm-produkte .site-main {
		margin-top: 10px; /* vorher 40px – jetzt 30px näher an den Sticky-Header gerückt */
	}

  /* Über uns, Nachhaltigkeit, Videothek, Presse, Kontakt, Impressum, Datenschutz, AGB & Produkte:
     keinen zusätzlichen Weißraum vor dem Footer */
  body.ynm-nachhaltigkeit .site-main,
  body.ynm-ueber-uns .site-main,
  body.ynm-videothek .site-main,
  body.ynm-presse .site-main,
  body.ynm-kontakt .site-main,
  body.ynm-impressum .site-main,
  body.ynm-datenschutz .site-main,
  body.ynm-agb .site-main,
  body.ynm-produkte .site-main {
    margin-bottom: 0;
  }

  /* Produkte: Keile dürfen nicht in den Footer ragen → innerhalb von site-main clippen */
  body.ynm-produkte .site-main {
    overflow: hidden;
  }

  /* Nachhaltigkeit & Über uns: keilförmige Background-Shapes hinter dem Content.
     Positionierung relativ zum Footer (bottom), damit sie bei jeder Fensterhöhe
     sauber vor dem Footer enden. Abstand zwischen den Keilen: ca. 650px. */
  body.ynm-nachhaltigkeit .site-main::before,
  body.ynm-ueber-uns .site-main::before {
    content: "";
    position: absolute;
    bottom: 935px; /* vorher 1135px: 200px mehr Luft nach oben, Abstand zum unteren Keil jetzt ca. 450px */
    left: 0;
    right: 0;
    height: 400px; /* links 400px, rechts 200px */
    background: url('assets/images/ynm-nachhaltigkeit-keil.svg') no-repeat center top;
    background-size: 100% 100%;
    z-index: -1; /* hinter dem eigentlichen Content */
  }

  /* Videothek, Presse, Kontakt, Impressum, Datenschutz & AGB:
     Keile als wiederholender Hintergrund auf .site-main.
     Das SVG assets/images/ynm-keil-tile.svg enthält genau ein Keil-Paar:
     - oben: links höher als rechts (400px hoch)
     - 500px Abstand
     - unten: rechts höher als links (400px hoch)
     - 500px Abstand

	     Höhe des Tiles: 1800px. Mit background-repeat: repeat-y und
	     background-position-y: 220px ergibt sich exakt der gewünschte Verlauf:
	     A (links hoch) bei 220px, B (rechts hoch) bei 1120px, dann wieder A/B usw.
	 */
	  body.ynm-videothek .site-main,
	  body.ynm-presse .site-main,
	  body.ynm-kontakt .site-main,
	body.ynm-impressum .site-main,
	body.ynm-datenschutz .site-main,
	body.ynm-agb .site-main {
	    background-image: url('assets/images/ynm-keil-tile.svg');
	    background-repeat: repeat-y;
	    background-position: center 400px; /* 30px später als vorher (370px) für etwas mehr Luft oben */
			/* Feste Tile-Höhe, damit die Keile wie auf Mangrovenwald-Farm ~500px/325px hoch wirken */
	    background-size: 100% 2250px;
	  }
	
	  /* Newsletter-Seite: Contact Form 7 im Look der Rezept-Share-Buttons */
  body.page-template-page-newsletter .wpcf7 form {
    max-width: 520px;
    margin: 0;
  }

  body.page-template-page-newsletter .wpcf7-form p {
    margin: 0 0 16px;
  }

  body.page-template-page-newsletter .wpcf7-form label {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }

  /* Checkbox-/DSGVO-Text: normale Schreibweise, kein Uppercase */
  body.page-template-page-newsletter .wpcf7-form .wpcf7-list-item-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
  }

  body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-text,
  body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-email,
  body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid #9d2640;
    background: #ffffff;
    color: #9d2640;
    font-size: 15px;
    font-family: var(--font-body);
  }

  body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-textarea {
    border-radius: 18px;
  }

  body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-text:focus,
  body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-email:focus,
  body.page-template-page-newsletter .wpcf7-form .wpcf7-form-control.wpcf7-textarea:focus {
    outline: none;
    border-color: #9d2640;
    box-shadow: 0 0 0 1px rgba(157, 38, 64, 0.18);
  }

  body.page-template-page-newsletter .wpcf7-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px;
    font-family: var(--font-body);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    border: 1px solid #9d2640;
    background: #ffffff;
    color: #9d2640;
    cursor: pointer;
    transition: background 0.15s ease-out, color 0.15s ease-out;
  }

  body.page-template-page-newsletter .wpcf7-form .wpcf7-submit:hover,
  body.page-template-page-newsletter .wpcf7-form .wpcf7-submit:focus-visible {
    background: #9d2640;
    color: #ffffff;
  }

  /* Mobile: Newsletter-Formular vollbreit und mit etwas Luft zum Rand */
  @media (max-width: 1023px) {
    body.page-template-page-newsletter .wpcf7 form {
      max-width: 100%;
    }

    body.page-template-page-newsletter .ynm-philo-intro__col--text .wpcf7 {
      margin-top: 16px;
    }
  }

  /* Rezepte & Blog: eigener Keil-Stack / Keil-Hintergrund; Basis-Setup */
  body.ynm-rezepte .site-main,
  body.ynm-blog .site-main {
    position: relative;
    margin-bottom: 0;
  }

  /* Produkte: mehrere Keile, relativ zur ersten und zweiten Headline positioniert */
  body.ynm-produkte #ynm-section-mangrovenwald,
  body.ynm-produkte #ynm-section-premium {
    position: relative;
    z-index: 0;
  }

  /* Erster Keil: beginnt an der Mangrovenwald-Headline */
  body.ynm-produkte #ynm-section-mangrovenwald::before {
    content: "";
    position: absolute;
    left: -80px;
    right: -80px;
    top: -40px;
    height: 400px;
    background: url('assets/images/ynm-nachhaltigkeit-keil.svg') no-repeat center top;
    background-size: 100% 100%;
    z-index: -1;
  }

  /* Zweiter Keil: ca. 550px unterhalb der ersten Headline */
  body.ynm-produkte #ynm-section-mangrovenwald::after {
    content: "";
    position: absolute;
    left: -80px;
    right: -80px;
    top: 510px; /* ~550px Abstand ab Headline minus 40px Offset */
    height: 400px;
    background: url('assets/images/ynm-nachhaltigkeit-keil-2.svg') no-repeat center top;
    background-size: 100% 100%;
    z-index: -1;
  }

  /* Dritter Keil: an der Premium-Headline */
  body.ynm-produkte #ynm-section-premium::before {
    content: "";
    position: absolute;
    left: -80px;
    right: -80px;
    top: -40px;
    height: 400px;
    background: url('assets/images/ynm-nachhaltigkeit-keil.svg') no-repeat center top;
    background-size: 100% 100%;
    z-index: -1;
  }

  /* Vierter Keil: weiterer Verlauf ca. 550px unter der Premium-Headline */
  body.ynm-produkte #ynm-section-premium::after {
    content: "";
    position: absolute;
    left: -80px;
    right: -80px;
    top: 510px;
    height: 400px;
    background: url('assets/images/ynm-nachhaltigkeit-keil-2.svg') no-repeat center top;
    background-size: 100% 100%;
    z-index: -1;
  }

  /* Philosophie (Seiten-Template): nur die rechte Text-Spalte weiter nach innen ziehen,
     damit nichts hinter den Balken läuft */
  body.ynm-philosophie .ynm-philo-intro__col--text {
    padding-right: 40px;
  }

  /* Philosophie (Seiten-Template): Section-Content auf volle Breite ziehen,
     mit Innenabstand links/rechts */
  body.ynm-philosophie .ynm-philo-intro__inner {
    max-width: none;
    margin: 0;
    padding: 0 80px;
  }

  /* Über uns (CPT, inkl. Philosophie-Detailseite): gleiche Layout-Logik wie Farm/Nachhaltigkeit */
  body.ynm-ueber-uns .ynm-philo-intro__inner {
    max-width: none;
    margin: 0;
    padding: 0 80px;
  }

  /* Nachhaltigkeit (Mangrovenwald Farm): gleiche Layout-Logik wie Über uns */
  body.ynm-nachhaltigkeit .ynm-philo-intro__inner {
    max-width: none;
    margin: 0;
    padding: 0 80px;
  }

  /* Videothek, Presse, Kontakt, Impressum, Datenschutz & AGB:
     gleiche Layoutbreite wie Über uns/Nachhaltigkeit (volle Breite mit Innenabstand) */
  body.ynm-videothek .ynm-philo-intro__inner,
  body.ynm-presse .ynm-philo-intro__inner,
  body.ynm-kontakt .ynm-philo-intro__inner,
  body.ynm-impressum .ynm-philo-intro__inner,
  body.ynm-datenschutz .ynm-philo-intro__inner,
  body.ynm-agb .ynm-philo-intro__inner {
    max-width: none;
    margin: 0;
    padding: 0 80px;
  }

  /* Videothek: Bild/Text-Einstieg tiefer, Bild/Video-Sektion 100px näher heranrücken */
  .ynm-philo-intro--videothek-intro {
    margin: 150px 0 80px;
  }

  .ynm-philo-intro--videothek {
    margin: 50px 0 80px;
  }

  /* Newsletter-Seite: Newsletter-Anmeldung näher an den Einleitungstext rücken */
  body.page-template-page-newsletter .ynm-philo-intro--videothek-intro {
    margin-bottom: 20px; /* vorher 80px */
  }

  body.page-template-page-newsletter .ynm-philo-intro--videothek {
    margin-top: -20px; /* noch 20px näher an den Einleitungstext heran */
  }

  /* Newsletter-Intro: Text/Bild oben ausrichten statt mittig */
  body.page-template-page-newsletter .ynm-philo-intro--videothek-intro .ynm-philo-intro__inner {
    align-items: flex-start;
  }

  /* Kontakt-Intro (zweite Section mit Bild+Text): ebenfalls oben ausrichten */
  body.page-template-page-kontakt .ynm-philo-intro--videothek-intro .ynm-philo-intro__inner {
    align-items: flex-start;
  }

  .ynm-sticky-subnav::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Verlauf: links weiß, nach rechts transparent auslaufend */
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    /* leichte Gegen-Schräge, an flacheren Balken angepasst */
    clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%);
    z-index: -2; /* ganz hinten */
  }

  .ynm-sticky-subnav::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px; /* 1px nach links erweitert, damit kein weißer Rand durchscheint */
    width: 301px; /* entsprechend 1px breiter als vorher */
    background: linear-gradient(to right, #D1CECC 0%, #9B8F89 70%); /* grauer Verlauf links */
    border-bottom-right-radius: 20px; /* abgerundete rechte untere Ecke */
    z-index: -1; /* über dem Verlauf, unter dem Text */
  }

  .ynm-sticky-subnav-label {
    position: absolute;
		top: 73px; /* Basis-Offset; einzelne Templates passen das bei Bedarf an */
    left: 0;
    width: 300px; /* gleiche Breite wie der graue Block */
    padding-right: 20px;
    text-align: right;
		font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 1px; /* Globales Tracking für alle Desktop-Labels (Legal, Videothek, Über uns, etc.) */
  }

  .ynm-sticky-subnav-label__desktop,
  .ynm-sticky-subnav-label__mobile {
    display: inline-block;
  }

  /* Desktop-Label im grauen Sticky-Balken: mehr Letter-Spacing */
  .ynm-sticky-subnav-label__desktop {
    letter-spacing: 1px;
  }

  /* Standard: Mobile-Variante der Headline nicht anzeigen,
     wird gezielt über Media-Query für die Produktseite aktiviert */
  .ynm-sticky-subnav-label__mobile {
    display: none;
  }

  /* Produkte: zweizeilige Sticky-Headline etwas kleiner & tiefer setzen,
     damit sie sauber im grauen Block sitzt */
  body.ynm-produkte .ynm-sticky-subnav-label {
		top: 65px; /* 8px höher als 73px-Stand, Feintuning */
		line-height: 1.3; /* behält 18px Font-Size vom Basis-Label, nur Zeilenabstand angepasst */
  }

  .ynm-sticky-subnav nav {
    max-width: none;
    margin: 0; /* nicht mehr zentrieren, an den linken Rand binden */
		padding-left: 320px; /* 300px grauer Block + 20px Abstand – bleibt konstant */
		padding-top: 15px;   /* Feintuning: passt zu aktueller Label-Position */
  }

  .ynm-sticky-subnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Standard: Links dürfen umbrechen, wenn es enger wird */
    column-gap: 24px;
    row-gap: 6px;
  }

  /* Spacer-Element, um auf Seiten ohne echte Links (z.B. Suche)
     die Höhe/Optik des Sticky-Menüs beizubehalten. */
  .ynm-sticky-subnav__spacer {
		display: block;
		height: 18px; /* entspricht ungefähr der Link-Höhe */
		min-width: 1px;
	}

  .ynm-sticky-subnav a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 600; /* Standard: bereits fett, damit sich beim Active-State nichts verschiebt */
    text-transform: uppercase;
    white-space: normal; /* Text innerhalb der Links darf umbrechen */
  }

  /* Hover/Fokus & Active-State für alle Sticky-Menü-Links */
  .ynm-sticky-subnav a:hover,
  .ynm-sticky-subnav a:focus-visible,
  .ynm-sticky-subnav a.ynm-sticky-subnav__link--active {
    color: #9d2640;
  }

  /* Newsletter: Platzhalter-Punkt in der Sticky-Subnav unsichtbar & nicht klickbar lassen */
  body.page-template-page-newsletter .ynm-sticky-subnav__link--newsletter-placeholder {
		color: transparent;
		pointer-events: none;
		cursor: default;
	}

  /* Presse: Platzhalter-Punkt in der Sticky-Subnav unsichtbar & nicht klickbar lassen */
  body.page-template-page-presse .ynm-sticky-subnav__link--presse-placeholder {
		color: transparent;
		pointer-events: none;
		cursor: default;
	}

  /* Kontakt: Platzhalter-Punkt in der Sticky-Subnav unsichtbar & nicht klickbar lassen */
  body.page-template-page-kontakt .ynm-sticky-subnav__link--kontakt-placeholder {
		color: transparent;
		pointer-events: none;
		cursor: default;
	}

  /* Videothek: Platzhalter-Punkt in der Sticky-Subnav unsichtbar & nicht klickbar lassen */
  body.page-template-page-videothek .ynm-sticky-subnav__link--videothek-placeholder {
		color: transparent;
		pointer-events: none;
		cursor: default;
	}

  /* Datenschutz: Platzhalter-Punkt in der Sticky-Subnav unsichtbar & nicht klickbar lassen */
  body.page-template-page-datenschutz .ynm-sticky-subnav__link--datenschutz-placeholder {
		color: transparent;
		pointer-events: none;
		cursor: default;
	}

  /* Impressum: Platzhalter-Punkt in der Sticky-Subnav unsichtbar & ohne Link lassen */
  body.page-template-page-impressum .ynm-sticky-subnav__link--impressum-placeholder {
		display: block;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		opacity: 0;
		pointer-events: none;
		cursor: default;
	}

  /* Produkte: Sticky-Links etwas kompakter darstellen */
  body.ynm-produkte .ynm-sticky-subnav a {
    font-size: 12px;
  }

  /* Vertikale Social-Icons im rechten roten Balken */
  .ynm-social-bar {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px; /* Icons 50px weiter nach unten verschoben */
    gap: 24px; /* vertikaler Abstand zwischen den Icons */
    z-index: 7; /* über dem roten Balken, unter Header/Topbar */
  }

  .ynm-social-bar__link {
    display: block;
  }

  .ynm-social-bar__icon {
    display: block;
    width: 24px;
    height: auto;
  }

  /* Desktop: Tooltips für Social-Icons (Label aus aria-label, links neben dem Icon) */
  .ynm-social-bar__link {
    position: relative;
    cursor: pointer;
  }

  .ynm-social-bar__link::before {
    content: attr(aria-label);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: #ffffff;
    color: #9d2640;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
    z-index: 8;
  }

  .ynm-social-bar__link::after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
    opacity: 0;
    transition: opacity 150ms ease-out;
    z-index: 8;
  }

  .ynm-social-bar__link:hover::before,
  .ynm-social-bar__link:focus-visible::before,
  .ynm-social-bar__link:hover::after,
  .ynm-social-bar__link:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  /* Produkte: zusätzliche Hintergrund-Keile über site-main, hinter dem ganzen Content */
  body.ynm-produkte .site-main {
    position: relative;
    z-index: 0;
  }

  /* Header-basierte Keile für Produkte deaktivieren, damit nur die Hintergrund-Keile sichtbar sind */
  body.ynm-produkte #ynm-section-mangrovenwald::before,
  body.ynm-produkte #ynm-section-mangrovenwald::after,
  body.ynm-produkte #ynm-section-premium::before,
  body.ynm-produkte #ynm-section-premium::after {
    content: none;
  }

  /* Produkte: Scroll-Offset für Section-Header, damit Ankerlinks
     (auch von Produktdetailseiten kommend) nicht unter dem Header/Sticky-Menü landen. */
  body.ynm-produkte #ynm-section-mangrovenwald,
  body.ynm-produkte #ynm-section-premium,
  body.ynm-produkte #ynm-section-premium-seafood,
  body.ynm-produkte #ynm-section-premium-fische,
  body.ynm-produkte #ynm-section-frische-sortiment,
  body.ynm-produkte #ynm-section-sortiment-deutschland {
    scroll-margin-top: 170px;
  }

  /* Produkte: großflächige Keile hinter dem gesamten site-main
     (wie im ursprünglichen Layout), damit die Übersicht wieder den
     durchgehenden grauen Keil-Hintergrund hat. */
  body.ynm-produkte .site-main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 450px; /* Keile beginnen unterhalb des Kopfbereichs */
    height: 8200px; /* ausreichend, um die ganze Seite zu füllen */
    background-repeat: no-repeat;
    background-image:
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg');
    background-position:
      center 0,
      center 800px,
      center 1600px,
      center 2400px,
      center 3200px,
      center 4000px,
      center 4800px,
      center 5600px,
      center 6400px,
      center 7200px; /* jeweils ca. 800px Abstand */
    background-size:
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px;
    z-index: -1;
  }

  /* Nachhaltigkeit: Hintergrund-Keile analog Produkte, aber über gesamte Seite verteilt
     (statt nur zwei Keilen am unteren Ende). Alte ::before/::after-Keile werden deaktiviert. */

body.ynm-nachhaltigkeit .site-main,
  body.ynm-ueber-uns .site-main {
    position: relative;
    z-index: 0;
    overflow: hidden;
  }

  /* alte, footer-basierten Keile deaktivieren */
  body.ynm-nachhaltigkeit .site-main::before,
  body.ynm-nachhaltigkeit .site-main::after,
  body.ynm-ueber-uns .site-main::before,
  body.ynm-ueber-uns .site-main::after {
    content: none;
  }

body.ynm-nachhaltigkeit .site-main::before,
  body.ynm-ueber-uns .site-main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
		height: min(50vw + 62px, 850px); /* Sliderhöhe (2:1, ~50vw) + ca. 30px Reserve, max. ~850px */
    background: linear-gradient(to right, #9d2640, #cd163d);
    z-index: -1;
  }

body.ynm-nachhaltigkeit .site-main::after,
  body.ynm-ueber-uns .site-main::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
		top: calc(min(50vw + 62px, 850px) + 250px); /* 250px Abstand nach dem roten Block vor dem ersten Keil (Offset wie oben) */
    height: 7000px; /* etwas höher, damit alle vergrößerten Keile vollständig vor dem Footer liegen */
    background-repeat: no-repeat;
    background-image:
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil.svg'),
      url('assets/images/ynm-nachhaltigkeit-keil-2.svg');
    background-position:
      center 0,
      center 800px,
      center 1600px,
      center 2400px,
      center 3200px,
      center 4000px,
      center 4800px,
      center 5600px; /* Abstand der Keile (800px) bleibt gleich, nur die Keilhöhe steigt auf 500px */
    background-size:
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px,
      100% 500px;
    z-index: -1;
  }

  /* Spezialfall: Über-uns-Unterseite "Zertifizierungen" –
     roter Block deutlich flacher, Keile beginnen entsprechend früher. */
  body.ynm-ueber-uns.ynm-ueber-uns-zertifizierungen .site-main::before {
		height: 50px;
		background: #ffffff; /* Zertifizierungen: oberer Block weiß statt Verlauf */
  }

  body.ynm-ueber-uns.ynm-ueber-uns-zertifizierungen .site-main::after {
		/* 250px roter Block + ca. 250px Luft bis zum ersten Keil */
		top: 500px;
  }

	/* Spezialfall: Über-uns-Unterseite "Meilensteine" –
	   kein zusätzlicher Farbblock, Keile beginnen dennoch früher. */
	body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .site-main::before {
		content: none;
	}

	body.ynm-ueber-uns.ynm-ueber-uns-meilensteine .site-main::after {
		top: 500px;
	}
}

/* Produkt-Detailseite – dreispaltiges Layout (volle Breite wie Über uns) */
.ynm-product {
  max-width: none;
  margin: 40px 0 80px;
}

@media (min-width: 1024px) {
  .ynm-product {
    padding-right: 40px; /* Sicherheitsabstand zum rechten roten Social-Balken */
  }
}


.ynm-product-layout {
  margin-top: 24px;
}

.ynm-product-layout__inner {
  display: grid;
  grid-template-columns: 22% 43% 35%;
  gap: 32px;
  align-items: flex-start;
}

.ynm-product-layout__col--nav {
  font-family: var(--font-body);
  font-size: 14px;
  margin-top: 120px;
}

.ynm-product-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px; /* mehr Luft zwischen den Produktlinks */
  align-items: flex-end; /* rechtsbündig */
}

.ynm-product-nav__link {
  display: block;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 17px;
  color: #333;
  text-align: right;
}

.ynm-product-nav__link:hover,
.ynm-product-nav__link:focus-visible {
  color: #9d2640;
}

.ynm-product-nav__label {
  font-weight: 600;
  margin-right: 4px;
}

/* Standard: Mobile-Liste der neuesten Beiträge zuerst ausblenden,
   nur gezielt über Media-Query einblenden. */
.ynm-blog-latest--mobile {
	display: none;
}

/* Blog-Detail Desktop: "Neueste Beiträge"-Label rechtsbündig, uppercase */
body.ynm-blog.single-post .ynm-blog-latest--desktop .ynm-product-nav__label,
body.ynm-blog.single .ynm-blog-latest--desktop .ynm-product-nav__label {
	display: block;
	width: 100%;
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 16px;
	margin: 0 0 10px;
}

/* Blog-Detail Desktop: Linksliste 130px tiefer starten lassen, ohne Produktlayout zu beeinflussen */
@media (min-width: 1024px) {
	body.ynm-blog.single-post .ynm-recipe-layout__col--left,
	body.ynm-blog.single .ynm-recipe-layout__col--left {
		margin-top: 250px; /* 120px Basis + 130px zusätzlicher Offset */
	}
}

/* Blog-Detail mobile: "Neueste Beiträge"-Liste unter dem Artikel platzieren */
@media (max-width: 1023px) {
	body.ynm-blog.single-post .ynm-blog-latest--mobile,
	body.ynm-blog.single .ynm-blog-latest--mobile {
		display: block;
		margin: 40px 16px 0;
	}

	body.ynm-blog.single-post .ynm-blog-latest--mobile .ynm-product-nav__list,
	body.ynm-blog.single .ynm-blog-latest--mobile .ynm-product-nav__list {
		align-items: flex-end; /* wie Produktdetail – rechtsbündige Links */
	}

	body.ynm-blog.single-post .ynm-blog-latest--desktop,
	body.ynm-blog.single .ynm-blog-latest--desktop {
		display: none; /* linke Spalte-Navi auf Mobile ausblenden */
	}
}

/* Kategorie-Zeile im linken Menü auf Produktdetailseiten ausblenden */
.ynm-product-nav__item--current {
  display: none;
}


/* Next/Prev-Navigation auf Produktdetailseiten */
.ynm-product-nextprev {
  margin: 40px auto 0;
  max-width: 1160px;
  display: none; /* Standard: nur mobil sichtbar */
  justify-content: space-between;
  gap: 16px;
}

.ynm-product-nextprev__link {
  flex: 1 1 0;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 16px;
  background: #f4f2f0;
  color: #333;
  display: flex;
  flex-direction: column;
}

.ynm-product-nextprev__kicker {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9d2640;
  margin-bottom: 4px;
}

.ynm-product-nextprev__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: -4px;
}



.ynm-product-hero__figure {
  margin: 0 0 16px;
}

.ynm-product-hero__image {
  display: block;
  width: 100%;
  height: auto;
}

.ynm-product-hero__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03rem;
  margin: 0 0 24px;
  color: #9d2640;
}

/* Produktname: Standard (Desktop) – Mobile-Variante ausblenden */
.ynm-product-hero__title--mobile {
  display: none;
}

.ynm-product-hero__title--desktop {
  display: block;
}

.ynm-product-block {
  margin-bottom: 24px;
}

.ynm-product-block__headline {
  font-family: var(--font-heading);
  font-size: 14px;
  font-style: italic;
  color: #9d2640;
  margin: 0 0 8px;
}

.ynm-product-block__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}

.ynm-product-map__image {
  display: block;
  width: 68%; /* ca. 15% kleiner als bisher (80% → 68%) */
  margin: 0 auto;
  height: auto;
  border-radius: 8px;
}

.ynm-product-certificates__inner {
  margin-top: 16px;
}

.ynm-product-certificates__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ynm-product-certificates__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ynm-product-certificates__image {
  display: block;
  max-width: 75%;
  height: auto;
}

/* Zertifikate: Standard (Desktop) – nur Desktop-Variante anzeigen */
.ynm-product-certificates--mobile {
  display: none;
}

.ynm-product-certificates--desktop {
  display: block;
}

@media (max-width: 900px) {
  /* Mobile: Content-Blöcke übereinander stapeln, Menü ans Ende schieben */
  .ynm-product-layout__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .ynm-product-layout__col--middle {
    order: 1;
  }

  .ynm-product-layout__col--right {
    order: 2;
  }

  .ynm-product-layout__col--nav {
		order: 3;
		margin-top: 16px;
		display: none; /* Mobil: altes Menü ausblenden, wir nutzen Next/Prev */
  }

  .ynm-product {
    margin: 20px auto 60px;
  }

  /* Zertifikate unter Map/Bild in 3 Spalten (2 belegt, 1 Platzhalter) */
  .ynm-product-certificates__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Mobile: Nur mobile Zertifikate-Version zeigen, Desktop-Version ausblenden */
  .ynm-product-certificates--mobile {
    display: block;
  }

  .ynm-product-certificates--desktop {
    display: none;
  }

	/* Mobile: Padding links bei Zubereitung/Herkunft entfernen */
	.ynm-product-layout__col--right .ynm-product-hero__title,
	.ynm-product-layout__col--right .ynm-product-block {
		padding-left: 0;
	}

  /* Mobile: Produktname zwischen Zertifikaten und Beschreibung, mit Luft */
  .ynm-product-hero__title--mobile {
    display: block;
    margin: 24px 0 16px;
    text-align: left;
		font-size: 26px;   /* deutlich größer als Desktop (16px) */
		line-height: 1.3;
  }

  .ynm-product-hero__title--desktop {
    display: none;
  }

  /* Mobile: Next/Prev unter dem Content, einspaltig mit Abstand zum Inhalt */
  .ynm-product-nextprev {
    display: flex;
    margin: 32px 16px 0;
    max-width: none;
    flex-direction: column;
  }

  .ynm-product-nextprev__link {
    max-width: 80%;
  }

  .ynm-product-nextprev__link--prev {
    align-self: flex-start;
    align-items: flex-start;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* sehr leichter Schatten nur hinter dem vorherigen Link */
  }

  .ynm-product-nextprev__link--next {
    align-self: flex-end;
    align-items: flex-end;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* gleicher, sehr leichter Schatten wie bei prev */
  }

  /* Mobile: Map links, Produktbild rechts, Bild leicht überlappend */
  .ynm-product-layout {
    position: relative;
  }

  .ynm-product-block--map {
    position: relative;
    padding-right: 45%; /* etwas weniger Platz freihalten, Map wird größer */
    margin-top: -50px; /* Map allein 50px weiter nach oben ziehen */
  }

  .ynm-product-block--map .ynm-product-map__image {
    width: 120%;        /* ~20 % größer als vorher */
    margin-left: -10%;  /* leicht nach links rausziehen, damit sie zentriert wirkt */
  }

  .ynm-product-hero__figure {
    position: absolute;
    top: 0;
		right: -17px;      /* 25px weiter nach rechts als zuvor */
    width: 65%;        /* ~40 % größer als vorher (45% → 65%) */
    max-width: 280px;
    z-index: 1;
  }

  /* Restlicher Content rechts direkt nach dem Beschreibungstext starten lassen */
  .ynm-product-layout__col--right {
		margin-top: 0;
  }
}

/* Tablet (z.B. 11"), Produktbild deutlich größer als auf Phone */
@media (min-width: 768px) and (max-width: 1023px) {
  .ynm-product-hero__figure {
    width: 100%;      /* auf Tablets voll ausnutzen */
    max-width: 460px; /* noch einmal ~20 % größer */
  }
}

/* Standard: Produkte-, Nachhaltigkeits-, Über-uns-, Rezepte-, Blog- und Legal-Balken
   global ausblenden – werden nur gezielt auf den jeweiligen Seiten/Mobile aktiviert */
.ynm-products-mobile-bar,
.ynm-nachhaltigkeit-mobile-bar,
.ynm-ueberuns-mobile-bar,
.ynm-rezepte-mobile-bar,
.ynm-blog-mobile-bar,
.ynm-product-mobile-bar,
.ynm-legal-mobile-bar {
  display: none;
}

@media (max-width: 1023px) {
  .ynm-sticky-subnav {
    display: none; /* Sticky-Menü bleibt auf Mobile komplett aus */
  }

  /* Eigenständiger mobiler Produkte-Balken unter dem Header (nur Produkte/Mobile) */

  /* Produkte: Site-Main so weit nach unten, dass nichts vom fixen Balken verdeckt wird */
  body.ynm-produkte:not(.ynm-product-detail) .site-main,
  body.ynm-produkte.ynm-product-detail .site-main {
    margin: 140px 0 40px; /* 20px extra, damit unter Balken wirklich Luft ist */
  }

  /* Produktübersicht: Balken mit Sortiment-Headline */
  body.ynm-produkte:not(.ynm-product-detail) .ynm-products-mobile-bar {
    display: block;
    position: fixed; /* explizit fixiert unter dem Header, Safari-sicher */
    top: 140px; /* direkt unter dem fixen Header */
    left: 0;
    right: 0;
    z-index: 900; /* unter der Topbar, über dem Content */
    /* Verlauf wie im Desktop-Sticky-Grau, aber über die gesamte Balkenbreite */
    background: linear-gradient(to right, #D1CECC 0%, #9B8F89 70%);
		padding: 29px 16px 18px; /* Balkenhöhe beibehalten */
    margin: 0; /* volle Breite des Viewports nutzen */
  }

  .ynm-products-mobile-bar__inner {
    max-width: 1160px;
    margin: 0 auto;
  }

	  .ynm-products-mobile-bar__headline {
	    display: inline-block;
	    width: 100%;
	    text-align: right;
	    font-size: 18px;
	    font-weight: 600;
	    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff; /* weiße Headline im mobilen Produkte-Balken */
  }

  /* Produkt-Detailseite: eigener mobiler Balken mit Produktnamen */
	  body.ynm-produkte.ynm-product-detail .ynm-product-mobile-bar {
	    display: block;
	    position: fixed;
	    top: 140px;
	    left: 0;
	    right: 0;
	    z-index: 900;
	    background: linear-gradient(to right, #D1CECC 0%, #9B8F89 70%);
	    padding: 29px 16px 18px;
	    margin: 0;
	  }

  .ynm-product-mobile-bar__inner {
    max-width: 1160px;
    margin: 0 auto;
  }

  /* Rechtliche Seiten (Presse, Kontakt, Impressum, Datenschutz, AGB) + Videothek:
     einheitlicher mobiler Balken mit Seitentitel */
  body.page-template-page-presse .ynm-legal-mobile-bar,
  body.page-template-page-kontakt .ynm-legal-mobile-bar,
  body.page-template-page-newsletter .ynm-legal-mobile-bar,
  body.page-template-page-impressum .ynm-legal-mobile-bar,
  body.page-template-page-datenschutz .ynm-legal-mobile-bar,
  body.page-template-page-agb .ynm-legal-mobile-bar,
  body.page-template-page-videothek .ynm-legal-mobile-bar {
    display: block;
    position: fixed;
    top: 140px;
    left: 0;
    right: 0;
    z-index: 900;
    background: linear-gradient(to right, #D1CECC 0%, #9B8F89 70%);
    padding: 29px 16px 18px;
    margin: 0;
  }

  .ynm-legal-mobile-bar__inner {
    max-width: 1160px;
    margin: 0 auto;
  }

  .ynm-legal-mobile-bar__headline {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    padding-top: 20px;
  }

  /* Content dieser Seiten leicht nach unten versetzen, damit der Balken nichts überdeckt */
  body.page-template-page-presse .site-main,
  body.page-template-page-kontakt .site-main,
  body.page-template-page-newsletter .site-main,
  body.page-template-page-impressum .site-main,
  body.page-template-page-datenschutz .site-main,
  body.page-template-page-agb .site-main,
  body.page-template-page-videothek .site-main {
    margin: 80px 0 40px;
  }

  .ynm-product-mobile-bar__headline {
    display: inline-block;
    width: 100%;
    text-align: right;
		font-size: 18px;
		font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff; /* weiße Headline im mobilen Produktdetail-Balken */
  }

  /* Nachhaltigkeit: Site-Main so weit nach unten, dass nichts vom fixen Balken verdeckt wird
     → auf Mobile 60px näher an den Header heranrücken (vorher 140px, jetzt 80px)
     + zusätzliche 10px Puffer für den mobil fixierten Balken */
  body.ynm-nachhaltigkeit .site-main {
    margin: 90px 0 40px;
  }

  /* Nachhaltigkeit (Mobile): Abstand zwischen Slider und erstem Content-Block
     um ca. 100px reduzieren – Content näher an den Smart Slider ziehen. */
  body.ynm-nachhaltigkeit .ynm-home-hero-slider {
    margin-bottom: 0; /* vorher 40px bzw. 100px (Farm/Aufforstung/Versprechen) */
  }

  body.ynm-nachhaltigkeit .ynm-home-hero-slider + .ynm-philo-intro {
    margin-top: 10px; /* statt 40px – erster Block rückt zusätzlich 30px näher an den Slider */
  }

  /* Rezepte- und Blog-Übersicht: Content unterhalb des mobilen Balkens starten lassen */
body.ynm-rezepte .site-main,
body.ynm-blog .site-main {
  margin: 80px 0 40px;
}

/* Rezeptdetail Mobile: gleicher Header-Abstand wie Produktdetails,
   damit der Rezeptname nicht hinter den fixen Header/Balken läuft. */
body.single-rezept.ynm-rezepte .site-main {
  margin: 140px 0 40px;
}

/* Kontakt-Seite: zusätzlichen Abstand oberhalb des Fließtexts "Schreiben Sie uns gerne:" */
body.page-template-page-kontakt .ynm-philo-intro--videothek-intro .ynm-philo-intro__text {
  padding-top: 70px;
}

/* Kontakt mobile: Bild mit 40px Abstand zur Intro-Headline */
body.page-template-page-kontakt .ynm-philo-intro--videothek-intro .ynm-philo-intro__figure {
  margin-top: 40px;
}

/* Kontakt mobile: Textbereich unter dem Bild 60px nach oben ziehen */
body.page-template-page-kontakt .ynm-philo-intro--videothek-intro .ynm-philo-intro__col--text {
  transform: translateY(-60px);
}

  /* Rezepte & Blog (Übersicht + Detail): im Bereich 901–1023px zusätzliche 36px Abstand
     zwischen mobiler Bar und Content einfügen */
  @media (min-width: 901px) and (max-width: 1023px) {
		body.ynm-rezepte .site-main,
		body.ynm-blog .site-main {
			margin: 116px 0 40px; /* 80px + 36px */
		}
  }

  /* Über uns: weiterhin 80px Abstand, separater Balken folgt */
  body.ynm-ueber-uns .site-main {
    margin: 80px 0 40px;
  }

  /* Philosophie mobil: erstes Bild der ersten Content-Section mit 50px Abstand nach oben */
  body.ynm-ueber-uns-philosophie .ynm-philo-intro--philo-intro + .ynm-philo-intro .ynm-philo-intro__figure {
    margin-top: 50px;
  }

  /* Philosophie mobil: erstes Bild sofort zeigen, ohne Hereinfahr-Animation */
  body.ynm-ueber-uns-philosophie .ynm-philo-intro--philo-intro + .ynm-philo-intro .ynm-philo-intro__image {
    opacity: 1;
    transform: none;
  }

  body.ynm-ueber-uns-philosophie .ynm-philo-intro--philo-intro + .ynm-philo-intro .ynm-philo-intro__image.ynm-philo-intro__image--in-view {
    animation: none;
  }

  /* Philosophie mobil: Section 2 ("Der Markenname") mit Bild und Text 50px höher ziehen */
  body.ynm-ueber-uns-philosophie .ynm-philo-intro--philo-intro + .ynm-philo-intro + .ynm-philo-intro {
    margin-top: -50px;
  }

  /* Qualitätsprogramm mobil: erstes Bild der ersten Content-Section mit 50px Abstand nach oben */
  body.ynm-ueber-uns-qualitaetsprogramm .ynm-philo-intro--philo-intro + .ynm-philo-intro .ynm-philo-intro__figure {
    margin-top: 50px;
  }

  /* Qualitätsprogramm mobil: erstes Bild sofort zeigen, ohne Hereinfahr-Animation */
  body.ynm-ueber-uns-qualitaetsprogramm .ynm-philo-intro--philo-intro + .ynm-philo-intro .ynm-philo-intro__image {
    opacity: 1;
    transform: none;
  }

  body.ynm-ueber-uns-qualitaetsprogramm .ynm-philo-intro--philo-intro + .ynm-philo-intro .ynm-philo-intro__image.ynm-philo-intro__image--in-view {
    animation: none;
  }

  /* Zertifizierungen mobil: erstes Bild mit etwas Abstand, zweites Bild erst später vor dem Abschlussbild */
  body.ynm-ueber-uns-zertifizierungen .ynm-zert-image-1 {
    margin-top: 40px;
  }

  body.ynm-ueber-uns-zertifizierungen .ynm-zert-image-2-desktop {
    display: none;
  }

  body.ynm-ueber-uns-zertifizierungen .ynm-zert-image-2-mobile {
    display: block;
  }

  /* Über uns (Mobile): Content um ca. 100px näher an den Header/Slider ziehen.
     - Auf Seiten MIT Slider (Philosophie, Qualitätsprogramm, Standard-Über-uns):
       → Abstand zwischen Slider und erster Intro-Section reduzieren.
     - Auf Seiten OHNE Slider (Meilensteine, Zertifizierungen):
       → Intro-Section direkt näher an den Header schieben. */

  /* Philosophie & Qualitätsprogramm: Abstand zwischen Slider und Intro-Headline verringern */
  body.ynm-ueber-uns .ynm-home-hero-slider--philo {
    margin-bottom: 40px; /* statt 100px → 60px näher am Content */
  }

  /* Erste Intro-Section direkt nach dem Slider weiter nach oben ziehen */
  body.ynm-ueber-uns .ynm-home-hero-slider + .ynm-philo-intro--philo-intro {
    margin-top: 10px; /* statt 40px → weitere 30px eingespart */
  }

  /* Meilensteine & Zertifizierungen (ohne Slider): Intro-Block näher an den Header schieben */
  body.ynm-ueber-uns.single-ynm_ueber_uns .ynm-philo-intro--philo-intro {
    margin-top: 0;
  }

  /* Philosophie mobil: Sliderposition behalten, nur Text/Bild-Content 50px höher ziehen */
  body.ynm-ueber-uns.ynm-ueber-uns-philosophie.single-ynm_ueber_uns .ynm-home-hero-slider + .ynm-philo-intro--philo-intro {
    margin-top: -50px;
  }

  /* Qualitätsprogramm mobil: Sliderposition behalten, Text/Bild-Content 30px höher ziehen */
  body.ynm-ueber-uns.ynm-ueber-uns-qualitaetsprogramm.single-ynm_ueber_uns .ynm-home-hero-slider + .ynm-philo-intro--philo-intro {
    margin-top: -30px;
  }

  /* Nachhaltigkeit: mobiler Balken im gleichen Look wie Produkte */
  body.ynm-nachhaltigkeit .ynm-nachhaltigkeit-mobile-bar {
    display: block;
    position: fixed;
    top: 130px; /* 10px näher an den Header heranrücken */
    left: 0;
    right: 0;
    z-index: 900;
    background: linear-gradient(to right, #D1CECC 0%, #9B8F89 70%);
    padding: 29px 16px 18px;
    margin: 0;
  }

  /* Über uns: mobiler Balken im gleichen Look wie Produkte/Nachhaltigkeit */
  body.ynm-ueber-uns .ynm-ueberuns-mobile-bar {
    display: block;
    position: fixed;
    top: 140px; /* direkt unter dem fixen Header */
    left: 0;
    right: 0;
    z-index: 900;
    background: linear-gradient(to right, #D1CECC 0%, #9B8F89 70%);
    padding: 29px 16px 18px;
    margin: 0;
  }

  .ynm-nachhaltigkeit-mobile-bar__inner,
  .ynm-ueberuns-mobile-bar__inner,
  .ynm-rezepte-mobile-bar__inner,
  .ynm-blog-mobile-bar__inner {
    max-width: 1160px;
    margin: 0 auto;
  }

  .ynm-nachhaltigkeit-mobile-bar__headline,
  .ynm-ueberuns-mobile-bar__headline,
  .ynm-rezepte-mobile-bar__headline,
  .ynm-blog-mobile-bar__headline {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 13px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Nachhaltigkeit: Headline-Stil an Produkte-Balken angleichen (nur Mobile) */
  body.ynm-nachhaltigkeit .ynm-nachhaltigkeit-mobile-bar__headline {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin-top: 0; /* zurück auf Basiszustand, kein zusätzlicher Offset */
    padding-top: 20px;
  }

  /* Über uns: Headline-Stil ebenfalls an Produkte-Balken angleichen (nur Mobile) */
  body.ynm-ueber-uns .ynm-ueberuns-mobile-bar__headline {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin-top: 0;
    padding-top: 20px;
  }

  /* Rezepte & Blog: Headline-Stil an Über-uns-/Meilensteine-Balken angleichen (nur Mobile) */
  body.ynm-rezepte .ynm-rezepte-mobile-bar__headline,
  body.ynm-blog .ynm-blog-mobile-bar__headline {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin-top: 0;
    padding-top: 20px;
  }

  /* Rezepte & Blog: mobiler Balken im gleichen Look wie Produkte/Nachhaltigkeit/Über uns */
  body.ynm-rezepte .ynm-rezepte-mobile-bar,
  body.ynm-blog .ynm-blog-mobile-bar {
    display: block;
    position: fixed;
    top: 140px; /* direkt unter dem fixen Header */
    left: 0;
    right: 0;
    z-index: 900;
    background: linear-gradient(to right, #D1CECC 0%, #9B8F89 70%);
    padding: 29px 16px 18px;
    margin: 0;
  }

  /* Schattenkeil unter dem Header auf Produkt-, Nachhaltigkeits-, Über-uns- und Rezepte/Blog-Seiten (Mobile) entfernen */
  body.ynm-produkte .site-header-main::after,
  body.ynm-nachhaltigkeit .site-header-main::after,
  body.ynm-ueber-uns .site-header-main::after,
  body.ynm-rezepte .site-header-main::after,
  body.ynm-blog .site-header-main::after {
    content: "";
    display: none;
    background: none;
    box-shadow: none;
    height: 0;
  }
}

@media (min-width: 1024px) {
  /* Rezepte-Übersicht Desktop: Grid ca. 200px tiefer starten lassen,
     damit nichts vom Header/Sticky-Menü überdeckt wird */
  body.ynm-rezepte .site-main,
  body.ynm-blog .site-main {
    margin: 40px 0 0; /* oben +40px Offset, unten kein zusätzlicher Weißraum zum Footer */
  }
}

/* Zubereitung & Herkunft Styles */
.ynm-product-block--zubereitung .ynm-product-block__headline,
.ynm-product-block--zubereitung .ynm-product-block__text {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  color: #9d2640;
}

/* Zubereitung: Headline enger an Text rücken */
.ynm-product-block--zubereitung .ynm-product-block__headline {
  margin-bottom: 4px;
}

.ynm-product-block--zubereitung .ynm-product-block__text {
  margin-top: 0;
  line-height: 1.2;
}

.ynm-product-block--herkunft .ynm-product-block__headline {
  font-weight: 400; /* nicht fett */
  color: transparent;
}

.ynm-product-block--herkunft .ynm-product-block__text {
  font-size: 14px;
  font-style: italic;
  color: #9d2640;
  line-height: 1.4;
}

@media (min-width: 901px) {
  .ynm-product-layout__col--right .ynm-product-hero__title,
  .ynm-product-layout__col--right .ynm-product-block {
    padding-left: 30px;
  }
}

/* Mangrovenwald-Farm – Doppel-Text im rechten PNG (Bild 2/2) */
.ynm-farm-dual-text {
  position: relative;
}

/* Mangrovenwald-Farm: rechtes erstes Galeriebild mit abgerundeten Ecken */
.ynm-philo-intro--farm-pair .ynm-philo-intro__col--text .ynm-philo-intro__figure:not(.ynm-farm-dual-text) .ynm-philo-intro__image {
  border-radius: 20px;
}

.ynm-farm-dual-text__text {
  position: absolute;
  max-width: 46%;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

.ynm-farm-dual-text__text--top-left {
  top: 10%;
  left: 8%;
}

.ynm-farm-dual-text__text--bottom-right {
  bottom: 10%;
  right: 10%;
  text-align: right;
}

@media (max-width: 900px) {
  .ynm-farm-dual-text__text {
    max-width: 60%;
    font-size: 14px;
  }

  .ynm-farm-dual-text__text--top-left {
    top: 8%;
    left: 6%;
  }

  .ynm-farm-dual-text__text--bottom-right {
    position: static;
    max-width: 100%;
    margin-top: 30px;
    text-align: left;
  }

  .ynm-farm-dual-text__text--bottom-right br {
    display: none;
  }
}

@media (min-width: 901px) and (max-width: 1023px) {
  /* Zusätzlicher rechter Puffer im kritischen Bereich 901–1023px
     für Produktname + Zubereitung + Gewonnen aus + Produktbild + Zertifikate */
  .ynm-product-layout__col--right .ynm-product-hero__title,
  .ynm-product-layout__col--right .ynm-product-block--zubereitung,
  .ynm-product-layout__col--right .ynm-product-block--herkunft {
    padding-right: 40px;
    box-sizing: border-box;
  }

  /* Produktbild in der rechten Spalte mit etwas Abstand zum Rand */
  .ynm-product-layout__col--right .ynm-product-hero__figure {
    padding-right: 15px;
    box-sizing: border-box;
  }

  /* Zertifikate-Block rechts ebenfalls mit Randabstand */
  .ynm-product-layout__col--right .ynm-product-certificates__inner {
    padding-right: 15px;
    box-sizing: border-box;
  }

  /* Nachhaltigkeit, Über uns, Videothek, Presse, Kontakt, Impressum,
     Datenschutz & AGB: Bild/Text-Sections mit rechtem Innenabstand,
     damit Inhalte nicht an den Rand laufen */
  body.ynm-nachhaltigkeit .ynm-philo-intro__inner,
  body.ynm-ueber-uns .ynm-philo-intro__inner,
  body.ynm-videothek .ynm-philo-intro__inner,
  body.ynm-presse .ynm-philo-intro__inner,
  body.ynm-kontakt .ynm-philo-intro__inner,
  body.ynm-impressum .ynm-philo-intro__inner,
  body.ynm-datenschutz .ynm-philo-intro__inner,
  body.ynm-agb .ynm-philo-intro__inner {
    padding-right: 30px;
    box-sizing: border-box;
  }
}

.ynm-product-block__text {
  padding-right: 20px;
}

.ynm-product-layout__col--middle {
  margin-top: 120px;
}

.ynm-product-layout__col--middle .ynm-product-block--beschreibung .ynm-product-block__headline {
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--ynm-text);
  margin-bottom: 32px;
}

@media (max-width: 900px) {
  .ynm-product-layout__col--middle .ynm-product-block--beschreibung .ynm-product-block__headline {
    font-size: 24px;
  }
}

/* Desktop: Produktbild in der rechten Spalte ca. 10 % kleiner als bisher */
@media (min-width: 901px) {
  .ynm-product-hero__image {
	    width: 85%;
	    margin-left: auto;
	    margin-right: auto;
  }
}

.ynm-product-block--zubereitung .ynm-product-block__text,
.ynm-product-block--herkunft .ynm-product-block__text {
  margin-top: 7px;
}

.ynm-product-block--zubereitung .ynm-product-block__text p,
.ynm-product-block--herkunft .ynm-product-block__text p {
  margin-top: 0;
}

/* Mobile-Fix: Keil-Seiten ohne zusätzlichen Außenabstand vor dem Footer,
   damit der letzte Keil bündig am Footer endet. */
@media (max-width: 1023px) {
	body.ynm-produkte:not(.ynm-product-detail) .site-main,
	body.ynm-rezepte .site-main,
	body.ynm-blog .site-main,
	body.ynm-videothek .site-main,
	body.ynm-presse .site-main,
	body.ynm-kontakt .site-main,
	body.ynm-impressum .site-main,
	body.ynm-datenschutz .site-main,
	body.ynm-agb .site-main,
	body.ynm-nachhaltigkeit .site-main,
	body.ynm-ueber-uns .site-main {
		margin-bottom: 0 !important;
	}
}

/* Spezieller Keil-Hintergrund für Produkt-Detailseiten (CPT `produkt`) */
@media (min-width: 1024px) {
  body.ynm-produkte.ynm-product-detail .site-main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 90px; /* Abstand vom oberen Browserrand (angepasst für Detailseite) */
    height: 900px; /* links ~900px, rechts ~800px nach Skalierung */
    background-repeat: no-repeat;
    background-image: url('assets/images/ynm-produkt-keil.svg');
    background-size: 100% 100%;
    z-index: -1;
  }
}


@media (min-width: 1024px) {
  /* Produktdetail: aktiven Mangrovenwald-Link im Sticky-Menü hervorheben */
  body.produktkategorie-mangrovenwald .ynm-sticky-subnav a[href*="ynm-section-mangrovenwald"] {
    color: #9d2640;
  }
}

@media (min-width: 1024px) {
  /* Produktdetail: aktive Kategorie-Links im Sticky-Menü je nach Produktkategorie hervorheben */
  body.produktkategorie-mangrovenwald .ynm-sticky-subnav a[href$="ynm-section-mangrovenwald"],
  body.produktkategorie-premium-garnelen .ynm-sticky-subnav a[href$="ynm-section-premium"],
  body.produktkategorie-premium-seafood .ynm-sticky-subnav a[href$="ynm-section-premium-seafood"],
  body.produktkategorie-premium-fische .ynm-sticky-subnav a[href$="ynm-section-premium-fische"],
  body.produktkategorie-frische-sortiment .ynm-sticky-subnav a[href$="ynm-section-frische-sortiment"],
  body.produktkategorie-sortiment-deutschland .ynm-sticky-subnav a[href$="ynm-section-sortiment-deutschland"] {
    color: #9d2640;
  }
}


/* Aktives Produkt im linken Menü hervorheben */
.ynm-product-nav__item--active .ynm-product-nav__link {
  color: #9d2640;
}


/* 404-Seite: ruhige Yuu'n-Mee-Fehlerseite ohne Sticky-Subnav */
body.error404 .site-main {
  background: #ffffff;
}

.ynm-error404 {
  background: #ffffff;
}

.ynm-error404__section {
  min-height: clamp(520px, 62vh, 760px);
  display: flex;
  align-items: center;
  padding: clamp(72px, 10vw, 132px) 32px;
}

.ynm-error404__inner {
  width: min(760px, 100%);
  margin: 100px auto 0;
  text-align: center;
}

.ynm-error404__eyebrow {
  margin: 0 0 16px;
  color: #9d2640;
  font-size: clamp(44px, 9vw, 96px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
}

.ynm-error404__headline {
  margin: 0;
  color: #9d2640;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.ynm-error404__text {
  max-width: 620px;
  margin: 28px auto 0;
  color: #333333;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.65;
}

.ynm-error404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

.ynm-error404__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border: 2px solid #9d2640;
  border-radius: 999px;
  color: #9d2640;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ynm-error404__button:hover,
.ynm-error404__button:focus-visible,
.ynm-error404__button--primary {
  background: #9d2640;
  color: #ffffff;
}

.ynm-error404__button--primary:hover,
.ynm-error404__button--primary:focus-visible {
  background: #7f1f34;
  border-color: #7f1f34;
}

@media (max-width: 700px) {
  .ynm-error404__section {
    min-height: auto;
    padding: 72px 24px 92px;
  }

  .ynm-error404__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ynm-error404__button {
    width: 100%;
  }
}