.elementor-kit-900190{--e-global-color-primary:#292A2A;--e-global-color-secondary:#54595F;--e-global-color-text:#424242;--e-global-color-accent:#8F3829;--e-global-color-311cc8e:#271C15;--e-global-color-8376130:#F7F2ED;--e-global-color-a0b59ee:#D4BC38;--e-global-color-76b4eb8:#4D6957;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"EB Garamond";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-8376130 );}.elementor-kit-900190 button,.elementor-kit-900190 input[type="button"],.elementor-kit-900190 input[type="submit"],.elementor-kit-900190 .elementor-button{background-color:var( --e-global-color-accent );font-family:"EB Garamond", Sans-serif;font-size:16px;font-weight:400;font-style:italic;letter-spacing:0.6px;border-style:solid;border-color:var( --e-global-color-accent );padding:11px 30px 11px 30px;}.elementor-kit-900190 button:hover,.elementor-kit-900190 button:focus,.elementor-kit-900190 input[type="button"]:hover,.elementor-kit-900190 input[type="button"]:focus,.elementor-kit-900190 input[type="submit"]:hover,.elementor-kit-900190 input[type="submit"]:focus,.elementor-kit-900190 .elementor-button:hover,.elementor-kit-900190 .elementor-button:focus{background-color:#9C3C2C;border-style:solid;border-color:#9C3C2C;}.elementor-kit-900190 e-page-transition{background-color:#FFBC7D;}.elementor-kit-900190 h1{font-family:"EB Garamond", Sans-serif;font-size:70px;font-weight:500;font-style:italic;}.elementor-kit-900190 h2{font-family:"EB Garamond", Sans-serif;font-style:italic;}.elementor-kit-900190 img{border-radius:10px 10px 10px 10px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-900190 h1{font-size:45px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================
   Mega-Menü Kategorien
   -> Elementor: Site-Einstellungen > Benutzerdefiniertes CSS
      oder ins style.css vom Child-Theme
   ========================================================== */


/* --- Farben + Schriften (gelten überall, auch für Rezepte später) --- */
:root {
	--gm-ink:     #141110;
	--gm-muted:   #7C7061;
	--gm-ground:  #F1EBE0;
	--gm-warm:    #7A5C3A;
	--gm-ember:   #C56A2C;
	--gm-rule:    #E3DAC5;

	--gm-serif:   "EB Garamond", "Palatino Linotype", Georgia, serif;
	--gm-sans:    "Work Sans", -apple-system, "Segoe UI", Arial, sans-serif;
	--gm-mono:    ui-monospace, Menlo, Consolas, monospace;
}


/* --- Die Liste (immer sichtbar, auch mobil) --- */
.gmmega__eyebrow {
	margin: 0 0 14px;
	font-family: var(--gm-sans);
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gm-muted);
}

.gmmega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gmmega__list li {
	position: relative;
	border-bottom: 1px solid var(--gm-rule);
}

.gmmega__list li:last-child { border-bottom: 0; }

.gmmega__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background: var(--gm-ember);
	transition: width .22s ease;
}

.gmmega__list li.is-active::before { width: 12px; }

.gmmega__list a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 10px 0;
	font-family: var(--gm-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.25;
	color: var(--gm-muted);
	text-decoration: none;
	transition: color .2s ease, padding-left .22s ease;
}

.gmmega__list li.is-active a {
	color: var(--gm-ink);
	padding-left: 24px;
}

.gmmega__list a:focus-visible {
	outline: 2px solid var(--gm-ember);
	outline-offset: 3px;
}

.gmmega__list .n {
	margin-left: auto;
	align-self: center;
	font-family: var(--gm-mono);
	font-style: normal;
	font-size: 10.5px;
	color: var(--gm-muted);
}


/* --- Die Bildkachel: mobil AUS (Hover gibt es am Handy nicht) --- */
.gmmega__stage { display: none; }


/* --- Ab Desktop: zwei Spalten + Bildkachel --- */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {

	.gmmega {
		display: grid;
		grid-template-columns: 320px 1fr;
		gap: 58px;
		align-items: stretch;
	}

	.gmmega__stage {
		display: flex;
		position: relative;
		min-height: 340px;
		border-radius: 6px;
		overflow: hidden;
		background: #241710;
	}

	.gmmega__media {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		/* greift, wenn kein Bild gepflegt ist */
		background-image: linear-gradient(155deg, #241710, #462C1A 45%, #7A4A22);
	}

	/* Dunkler Verlauf: hält weiße Schrift auch auf hellen Fotos lesbar */
	.gmmega__scrim {
		position: absolute;
		inset: 0;
		background: linear-gradient(to top,
			rgba(12,9,8,.9) 0%,
			rgba(12,9,8,.55) 38%,
			rgba(12,9,8,.08) 72%,
			transparent 100%);
	}

	.gmmega__body {
		position: relative;
		margin-top: auto;
		padding: 34px 36px 32px;
		max-width: 46ch;
	}

	.gmmega__lab {
		display: block;
		margin-bottom: 9px;
		font-family: var(--gm-sans);
		font-size: 9.5px;
		letter-spacing: .22em;
		text-transform: uppercase;
		color: var(--gm-ember);
	}

	.gmmega__lab:empty,
	.gmmega__desc:empty { display: none; }

	.gmmega__title {
		margin: 0 0 9px;
		font-family: var(--gm-serif);
		font-style: italic;
		font-weight: 400;
		font-size: 40px;
		line-height: 1.06;
		color: #fff;
	}

	.gmmega__desc {
		margin: 0 0 16px;
		max-width: 38ch;
		font-family: var(--gm-sans);
		font-size: 14px;
		line-height: 1.6;
		color: rgba(255,255,255,.8);
	}

	.gmmega__btn {
		display: inline-flex;
		align-items: center;
		padding: 11px 20px;
		border-radius: 999px;
		background: var(--gm-ground);
		color: var(--gm-ink);
		font-family: var(--gm-sans);
		font-size: 10.5px;
		letter-spacing: .14em;
		text-transform: uppercase;
		text-decoration: none;
		transition: background .2s ease;
	}

	.gmmega__btn:hover { background: #fff; }

	.gmmega__fade { animation: gmFade .34s ease; }

	@keyframes gmFade {
		from { opacity: 0; transform: translateY(6px); }
		to   { opacity: 1; transform: none; }
	}
}


@media (prefers-reduced-motion: reduce) {
	.gmmega__list a,
	.gmmega__list li::before,
	.gmmega__btn { transition: none; }
	.gmmega__fade { animation: none; }
}



/* ==========================================================
   Rezepte-Panel (Variante B)
   -> unten an 2-style.css anhängen.
      Farben und Schriften kommen aus dem :root dort.
   ========================================================== */


.gmrez {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 50px;
	align-items: start;
}


/* --- Kleine Überschrift + "Alle Rezepte" --- */
.gmrez__kl {
	margin: 0 0 14px;
	font-family: var(--gm-sans);
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gm-muted);
}

/* --- Links: die Rezeptarten --- */
.gmrez__arten {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gmrez__arten li {
	position: relative;
	border-bottom: 1px solid var(--gm-rule);
}

.gmrez__arten li:last-child { border-bottom: 0; }

.gmrez__arten li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background: var(--gm-ember);
	transition: width .22s ease;
}

.gmrez__arten li:hover::before,
.gmrez__arten li:focus-within::before { width: 12px; }

.gmrez__arten a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	font-family: var(--gm-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.25;
	color: var(--gm-muted);
	text-decoration: none;
	transition: color .2s ease, padding-left .22s ease;
}

.gmrez__arten li.is-active::before { width: 12px; }

.gmrez__arten a:hover,
.gmrez__arten a:focus-visible,
.gmrez__arten li.is-active a {
	color: var(--gm-ink);
	padding-left: 24px;
}

.gmrez__arten a:focus-visible {
	outline: 2px solid var(--gm-ember);
	outline-offset: 3px;
}

/* Das "Alle →" ganz rechts in der Zeile.
   Liegt immer da, ist nur unsichtbar — so springt die Zeile
   beim Überfahren nicht in der Breite. */
.gmrez__hint {
	flex-shrink: 0;
	font-family: var(--gm-sans);
	font-style: normal;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gm-ember);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s ease, transform .22s ease;
}

.gmrez__arten a:hover .gmrez__hint,
.gmrez__arten a:focus-visible .gmrez__hint,
.gmrez__arten li.is-active .gmrez__hint {
	opacity: 1;
	transform: none;
}

/* Letzte Zeile "Alle Rezepte": Pfeil immer sichtbar.
   Kein eigener border-top — die Linie kommt schon vom
   border-bottom der letzten Kategorie darüber. */
.gmrez__art--alle {
	border-bottom: 0;
}

.gmrez__art--alle a {
	font-style: normal;
	font-family: var(--gm-sans);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gm-ink);
	padding-top: 16px;
}

.gmrez__art--alle .gmrez__hint {
	opacity: 1;
	transform: none;
	color: var(--gm-ink);
}


/* --- Rechts: die Kartensätze ---
   Alle Sätze stecken im HTML, sichtbar ist immer nur einer.
   Deshalb wechselt es beim Überfahren ohne Nachladen. */
.gmrez__set { display: none; }
.gmrez__set.is-active { display: block; }

.gmrez__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Kategorie ohne Rezepte */
.gmrez__leer {
	margin: 0;
	padding: 18px 0;
	font-family: var(--gm-serif);
	font-style: italic;
	font-size: 17px;
	color: var(--gm-muted);
}

.gmrez__karte {
	display: block;
	text-decoration: none;
}

.gmrez__bild {
	aspect-ratio: 4 / 3;
	margin-bottom: 12px;
	border-radius: 5px;
	overflow: hidden;
	background: var(--gm-rule);
	transition: transform .22s ease;
}

.gmrez__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gmrez__karte:hover .gmrez__bild { transform: translateY(-3px); }

.gmrez__karte:focus-visible {
	outline: 2px solid var(--gm-ember);
	outline-offset: 4px;
}

.gmrez__kat {
	display: block;
	margin-bottom: 5px;
	font-family: var(--gm-sans);
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gm-ember);
}

.gmrez__titel {
	margin: 0 0 5px;
	font-family: var(--gm-serif);
	font-style: italic;
	font-size: 19px;
	line-height: 1.15;
	color: var(--gm-ink);
}

.gmrez__aus {
	margin: 0;
	font-family: var(--gm-sans);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gm-muted);
}


/* --- Tablet: Karten unter die Liste --- */
@media (max-width: 1024px) {

	.gmrez {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}


/* --- Handy: Karten untereinander --- */
@media (max-width: 600px) {

	.gmrez__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}


@media (prefers-reduced-motion: reduce) {

	.gmrez__arten a,
	.gmrez__arten li::before,
	.gmrez__bild { transition: none; }
}





/* ==========================================================
   Sortiment-Seite: Kategorie-Raster
   Heller Schleier unten, dunkle Schrift.

   -> Elementor: Site-Einstellungen > Benutzerdefiniertes CSS

   EIGENSTÄNDIG: Diese Datei bringt ihre eigenen Farben und
   Schriften mit. Sie funktioniert auch dann, wenn 2-style.css
   fehlt oder überschrieben wurde.
   ========================================================== */


.gmsort {
	/* Eigene Werte, damit nichts von außen fehlen kann */
	--gms-ink:    #141110;
	--gms-muted:  #7C7061;
	--gms-ground: #F1EBE0;
	--gms-ember:  #C56A2C;
	--gms-serif:  "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--gms-sans:   "Work Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--gms-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Waagrechter Bildausschnitt — wird vom Shortcode gesetzt */
	--gmsort-x: 78%;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* --- Die Kachel --- */
.gmsort .gmsort__kachel {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	background: var(--gms-ground);
	box-shadow: none;
	transition: transform .24s ease, box-shadow .24s ease;
}

.gmsort .gmsort__kachel:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 40px -22px rgba(20, 17, 16, .4);
}

.gmsort .gmsort__kachel:focus-visible {
	outline: 2px solid var(--gms-ember);
	outline-offset: 4px;
}


/* --- Das Kategoriebild ---

   Die doppelte Klasse .gmsort .gmsort__bild ist Absicht:
   viele Themes setzen "img { height: auto }" oder
   ".entry-content img { ... }". Ohne die höhere Spezifität
   gewinnt die Theme-Regel und die Kachel bricht auseinander.

   object-position:
     X = --gmsort-x  (50% Mitte · kleiner links · größer rechts)
     Y = bottom      (Ausschnitt sitzt an der Unterkante)
   Der X-Wert wirkt nur bei Bildern, die BREITER sind als 4:5 —
   bei den 4:5-Kategoriebildern ändert er also nichts. */
.gmsort .gmsort__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: var(--gmsort-x, 78%) bottom;
	display: block;
}

/* Ohne gepflegtes Bild bleibt diese helle Fläche stehen —
   die dunkle Schrift ist darauf trotzdem lesbar. */
.gmsort .gmsort__bild--leer {
	background: var(--gms-ground);
}


/* --- Der helle Schleier ---
   Kein dunkler Balken: das Bild wird unten AUFGEHELLT.
   Nur so bleibt dunkle Schrift auf hellen Fotos lesbar.
   Deckender geht auch: .96 / .72 / 0 */
.gmsort .gmsort__schleier {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top,
		rgba(251, 248, 241, .88)   0%,
		rgba(251, 248, 241, .60)  30%,
		rgba(251, 248, 241, 0)    58%);
}


/* --- Der Text --- */
.gmsort .gmsort__txt {
	position: relative;
	width: 100%;
	padding: 24px;
}

.gmsort .gmsort__n {
	display: block;
	margin: 0 0 6px;
	font-family: var(--gms-mono);
	font-size: 10px;
	line-height: 1.4;
	color: var(--gms-muted);
	font-variant-numeric: tabular-nums;
	text-transform: none;
	letter-spacing: 0;
}

.gmsort .gmsort__titel {
	margin: 0;
	font-family: var(--gms-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.05;
	color: var(--gms-ink);
	text-transform: none;
	letter-spacing: 0;
}

.gmsort .gmsort__go {
	display: inline-block;
	margin-top: 12px;
	padding: 0 0 2px;
	border-bottom: 1px solid var(--gms-ink);
	font-family: var(--gms-sans);
	font-size: 9.5px;
	font-style: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gms-ink);
}


/* --- Tablet: 2 in Reihe --- */
@media (max-width: 1024px) {

	.gmsort {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}


/* --- Handy: 1 in Reihe --- */
@media (max-width: 640px) {

	.gmsort {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* aspect-ratio bleibt 4:5 wie oben — die Kategoriebilder
	   sind auf genau dieses Format zugeschnitten. */

	.gmsort .gmsort__titel {
		font-size: 26px;
	}
}


@media (prefers-reduced-motion: reduce) {

	.gmsort .gmsort__kachel { transition: none; }
}/* End custom CSS */