/* =========================================================
   Fragen-Leiste  (.hof-fragen)

   Heller Balken mit drei nummerierten Fragen und einem Fazit
   mit Blatt-Symbol, getrennt durch feine senkrechte Linien.

   Die Fragen nehmen ihre natuerliche Breite, das Fazit fuellt
   den Rest und bricht bei Bedarf um - wie im Entwurf. Eine
   gleich breite Aufteilung liess die laengeren Fragen in zwei
   Zeilen umbrechen (gemessen).

   Markup: div.hof-fragen > ol.hof-fragen__liste > li.__item
   (span.__nummer + span.__text) und p.__fazit (svg.__icon +
   span). Die Liste bleibt fuer Screenreader eine echte
   Aufzaehlung; die sichtbaren Nummern sind aria-hidden.

   Avada gibt ol und p Einzug, Nummerierung und Abstaende mit
   (gemessen: ol 40px Einzug, p 20px Abstand unten). Die Regeln
   unten setzen das mit zwei Klassen zurueck, ohne !important.
   ========================================================= */

.hof-fragen {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 18px 24px;
	border: 1px solid rgba(81, 69, 62, 0.06);
	border-radius: 16px;
	background: #f2e8da;
	box-shadow: 0 2px 12px rgba(81, 69, 62, 0.05);
}

.hof-fragen .hof-fragen__liste {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hof-fragen .hof-fragen__item {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 6px 18px;
	border-left: 1px solid rgba(81, 69, 62, 0.28);
}

.hof-fragen .hof-fragen__item:first-child {
	padding-left: 0;
	border-left: 0;
}

/* Goldener Zahlenkreis */
.hof-fragen .hof-fragen__nummer {
	display: inline-flex;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--awb-color4, #d6a047);
	color: #fff;
	font-family: var(--h3_typography-font-family, sans-serif);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
}

.hof-fragen .hof-fragen__text {
	color: var(--awb-color3, #51453e);
	font-size: 16px;
	line-height: 1.4;
}

/* Fazit mit Blatt-Symbol */
.hof-fragen .hof-fragen__fazit {
	display: flex;
	flex: 1 1 260px;
	align-items: center;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 6px 0 6px 22px;
	border-left: 1px solid rgba(81, 69, 62, 0.28);
	color: var(--awb-color3, #51453e);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
}

.hof-fragen .hof-fragen__icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	color: var(--awb-color4, #d6a047);
}


/* Tablet: drei Fragen nebeneinander, Fazit darunter */
@media only screen and (max-width: 1024px) {

	.hof-fragen {
		flex-wrap: wrap;
		padding: 18px 22px;
	}

	.hof-fragen .hof-fragen__liste,
	.hof-fragen .hof-fragen__fazit {
		flex: 1 1 100%;
	}

	.hof-fragen .hof-fragen__item {
		flex: 1 1 0;
		gap: 12px;
		padding: 6px 16px;
	}

	.hof-fragen .hof-fragen__nummer {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		font-size: 15px;
	}

	.hof-fragen .hof-fragen__fazit {
		margin-top: 14px;
		padding: 16px 0 2px;
		border-top: 1px solid rgba(81, 69, 62, 0.2);
		border-left: 0;
	}
}


/* Smartphone: alles untereinander, Trennlinien waagerecht */
@media only screen and (max-width: 640px) {

	.hof-fragen {
		padding: 8px 20px 16px;
	}

	.hof-fragen .hof-fragen__liste {
		flex-direction: column;
	}

	.hof-fragen .hof-fragen__item {
		flex: 0 0 auto;
		padding: 12px 0;
		border-top: 1px solid rgba(81, 69, 62, 0.14);
		border-left: 0;
	}

	.hof-fragen .hof-fragen__item:first-child {
		border-top: 0;
	}

	.hof-fragen .hof-fragen__fazit {
		margin-top: 4px;
	}
}


/* =========================================================
   Gruene Herkunfts-Box  (.hof-herkunft)

   Kleine olivgruene Karte mit Zweig-Grafik und kurzem Satz,
   darunter ein feiner heller Strich.

   Liegt unten links auf dem Bild. Das passiert automatisch,
   sobald die Box in derselben Spalte direkt unter einem
   Avada-Bildelement steht - im Builder muss dafuer nichts
   eingestellt werden. Alternativ laesst sich die Lage mit der
   Klasse hof-herkunft--overlay erzwingen.

   Steht die Box ohne Bild davor, bleibt sie ein normales
   Element im Textfluss.
   ========================================================= */

.hof-herkunft {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 260px;
	margin: 0;
	padding: 13px 20px 14px 14px;
	border-radius: 10px;
	background: var(--awb-custom_color_5, #5e602f);
	color: #fff;
	box-shadow: 0 6px 16px rgba(33, 29, 20, 0.2);
}

/* Zweig-Grafik (120 x 200 px, transparent). Feste Breite,
   Hoehe aus dem Seitenverhaeltnis - ergibt rund 26 x 43 px. */
.hof-herkunft .hof-herkunft__icon {
	flex: 0 0 26px;
	width: 26px;
	height: auto;
	max-width: none;
	aspect-ratio: 120 / 200;
	object-fit: contain;
}

.hof-herkunft .hof-herkunft__text {
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.3;
}

/* feiner Strich unter dem Satz */
.hof-herkunft .hof-herkunft__text::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin-top: 8px;
	background-color: var(--awb-color8, #e2c39a);
}

/* Auf dem Bild, unten links.
   Bild und Box teilen sich eine Rasterzelle, die genau so hoch
   ist wie das Bild. Ein absolutes Positionieren reicht hier
   nicht: Avada streckt die Spalte auf die Hoehe der Nachbar-
   spalte (Tablet gemessen: Spalte 625 px, Bild 526 px), die Box
   saesse dann unter dem Bild.
   Selektor-Kette wie bei Avada, sonst gewinnt dessen
   display: flex (.fusion-flex-container ... .fusion-column-wrapper). */
.fusion-flex-container .fusion-row .fusion-flex-column .fusion-column-wrapper:has(> .fusion-image-element + .hof-herkunft) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
}

.fusion-column-wrapper > .fusion-image-element:has(+ .hof-herkunft),
.fusion-column-wrapper > .fusion-image-element + .hof-herkunft {
	grid-area: 1 / 1;
}

.fusion-column-wrapper > .fusion-image-element + .hof-herkunft {
	position: relative;
	z-index: 2;
	align-self: end;
	justify-self: start;
	margin: 0 0 20px 20px;
	max-width: min(260px, calc(100% - 40px));
}

/* Fuer andere Stellen: Lage erzwingen. Das umgebende Element
   braucht dann selbst position: relative. */
.hof-herkunft.hof-herkunft--overlay {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	max-width: min(260px, calc(100% - 40px));
}

/* Smartphone: noch etwas kompakter, naeher an der Bildkante */
@media only screen and (max-width: 640px) {

	.hof-herkunft {
		gap: 10px;
		padding: 11px 16px 12px 12px;
	}

	.hof-herkunft .hof-herkunft__icon {
		flex-basis: 22px;
		width: 22px;
	}

	.hof-herkunft .hof-herkunft__text {
		font-size: 15px;
	}

	.fusion-column-wrapper > .fusion-image-element + .hof-herkunft {
		margin: 0 0 14px 14px;
		max-width: min(260px, calc(100% - 28px));
	}

	.hof-herkunft.hof-herkunft--overlay {
		left: 14px;
		bottom: 14px;
		max-width: min(260px, calc(100% - 28px));
	}
}


/* =========================================================
   Startseiten-Header (.header-start) auf dem Smartphone

   Avada legt ueber das Hintergrundbild einen weissen
   Kreisverlauf von links (weiss bis 61 %). Auf dem breiten
   Desktop bleibt rechts das Bild frei; auf dem schmalen,
   hohen Smartphone deckt er fast alles zu. Dazu schneidet
   "cover" das Hochformat-Bild seitlich ab.

   Bis 640 px (dort nutzt Avada das eigene Mobilbild):
   - Das Bild steht in voller Breite unten im Header.
   - Avadas Kreisverlauf wird nicht geloescht, sondern auf
     Groesse 0 gesetzt (erste Hintergrundebene). Bild und
     Verlauf bleiben so im Avada-Builder gepflegt; ein neues
     Mobilbild erscheint ohne Codeaenderung.
   - Ein senkrechter Verlauf (::before) blendet den Text-
     bereich weiss und laeuft oben im Bild weich aus.
   - Der Text steht im oberen, ruhigen Teil des Bildes; der
     Verlauf haelt ihn lesbar. Das Motiv (Flasche und Teller)
     bleibt unten frei.

   Die vw-Werte gehen von einem Bild im Format ca. 4:5 aus
   (1122 x 1402 px, Bildhoehe = 125vw). Bei einem Bild mit
   anderem Format die Werte unten anpassen.

   ::after bleibt frei - dort sitzt das KI-Label. Die Inhalts-
   zeile liegt mit Avadas z-index 10 ueber dem Verlauf.
   ========================================================= */

@media only screen and (max-width: 640px) {

	.fusion-fullwidth.header-start {
		position: relative;
		padding-bottom: 76vw;
		background-size: 0 0, 100% auto;
		background-position: 0 0, center bottom;
		background-repeat: no-repeat;
	}

	.fusion-fullwidth.header-start::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		/* Senkrecht: An der Bildoberkante (46 % der Hoehe,
		   gemessen) ist der Schleier voll deckend, sonst zeichnet
		   sich dort die Kante des Bildes als Linie ab. Nach unten
		   wird er weicher, bis das Foto frei steht.

		   Waagerecht wirkt zusaetzlich eine runde Maske aus der
		   unteren rechten Ecke: Genau dort steht die Flasche, der
		   Text steht links. Rund statt als Streifen, damit keine
		   sichtbare Kante entsteht.

		   Auf der Live-Seite gemessen (375 x 812), Schleier:
		   Bildoberkante 1,00 (keine Kante), Flasche im Schnitt
		   0,41 statt 0,93. Schlechtester Textkontrast 5,11 : 1.

		   Die Maske sitzt bewusst tief und weit rechts
		   (Mittelpunkt 100 % / 95 %): Dort steht nur die Flasche.
		   Reicht sie hoeher, trifft sie die Bildoberkante und
		   die wird als Linie sichtbar; reicht sie weiter nach
		   links, faellt der Text unter 4,5 : 1. Beides wurde
		   mit rund 40 Varianten durchgemessen.

		   Browser ohne Masken zeigen den vollen Schleier. */
		background: linear-gradient(
			to bottom,
			#fff 0%,
			#fff 50%,
			rgba(255, 255, 255, 0.90) 78%,
			rgba(255, 255, 255, 0.80) 90%,
			rgba(255, 255, 255, 0.35) 100%
		);
		-webkit-mask-image: radial-gradient(
			50% 48% at 100% 95%,
			rgba(0, 0, 0, 0.03) 0%,
			rgba(0, 0, 0, 0.21) 45%,
			#000 100%
		);
		mask-image: radial-gradient(
			50% 48% at 100% 95%,
			rgba(0, 0, 0, 0.03) 0%,
			rgba(0, 0, 0, 0.21) 45%,
			#000 100%
		);
	}
}


/* =========================================================
   Vorteile-Leiste (.hof-vorteile) auf dem Smartphone

   Klasse "hof-vorteile" am Avada-Container der Sektion mit
   "Aus Mittelsachsen", "Familienbetrieb seit 2016" usw.
   (Container -> Allgemein -> CSS-Klasse).

   Auf dem Desktop trennt Avada die vier Spalten mit einer
   Linie rechts (Spalten-Rahmen, 1px). Bis 640px stehen die
   Spalten untereinander; die Linie haengt dann rechts neben
   jedem Block. Dort wird jede Spalte stattdessen zu einer
   Karte mit Rahmen rundum und 10px Radius.

   Der Rahmen sitzt wie bei Avada am .fusion-column-wrapper.
   Avada setzt dort zusaetzlich padding-right:30px fuer den
   Abstand zur Linie - auf der Karte wird das Polster
   gleichmaessig, damit der zentrierte Inhalt mittig steht.
   Der doppelte Klassenname hebt die Regel ueber Avadas
   Spalten-Stile (auf der Stage geprueft: Rahmen rundum,
   auch an der letzten Karte ohne Avada-Linie).
   ========================================================= */

@media only screen and (max-width: 640px) {

	.hof-vorteile .fusion-row .fusion-layout-column .fusion-column-wrapper.fusion-column-wrapper {
		margin-right: 0;
		margin-left: 0;
		padding: 24px 20px;
		border: 1px solid rgba(67, 44, 35, 0.2);
		border-radius: 10px;
	}
}


/* =========================================================
   Kategorie-Raster (.category-grid-home)

   Klasse "category-grid-home" am Avada-Container mit den
   Kategorie-Kacheln (Oele, Essig, Nudeln, Gewuerze ...).

   Die meisten Kategoriebilder haben einen grauen Hintergrund
   im Bild selbst (gemessen: rgb(230, 230, 230) = #e6e6e6),
   einzelne sind freigestellt/transparent (gemessen: Essig,
   Saaten). Diese zeigten dadurch das Beige der Karte und
   fielen aus der Reihe.

   Der Bildrahmen bekommt dasselbe Grau. Deckende Bilder
   verdecken es vollstaendig, transparente stehen auf Grau -
   alle Kacheln sehen gleich aus. Der Rahmen ist genau so gross
   wie das Bild (auf der Stage gemessen, kein Ueberstand).
   ========================================================= */

.category-grid-home .fusion-image-element .fusion-imageframe {
	background-color: #e6e6e6;
}


/* =========================================================
   Produkt-Slider auf der Startseite

   Beim Ueberfahren legt Avada eine goldene Flaeche ueber das
   Produktbild; Titel, Kategorie, Preis und Links stehen darauf
   in Beige (--awb-color8). Gemessen: Kontrast 1,39 : 1, also
   praktisch unlesbar. Auch reines Weiss reicht auf Gold nicht
   (2,34 : 1).

   Deshalb wird die Flaeche dunkelbraun (--awb-custom_color_1)
   und die Schrift weiss: 12,94 : 1. Das Gold bleibt als feiner
   Verlauf nach oben erhalten.

   Nur auf der Startseite, dort steht der einzige Slider
   (geprueft: Shop, Kategorie, Produktseite, Kontakt ohne).

   Spezifitaet: home.css wird VOR Avadas Stylesheet geladen
   (Position 6 gegen 8, auf der Seite gemessen). Bei
   Gleichstand gewinnt dort Avada. Die Flaeche braucht deshalb
   .fusion-image-wrapper mit im Selektor (0,3,0 gegen Avadas
   0,2,0), die Textfarben stehen mit (0,5,1) ohnehin darueber.
   ========================================================= */

.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover {
	background-image: linear-gradient(
		to top,
		rgba(67, 44, 35, 0.95) 0%,
		rgba(67, 44, 35, 0.88) 45%,
		rgba(67, 44, 35, 0.45) 100%
	);
}

/* Eine Kette wie bei Avada plus den Slider davor: Avada faerbt
   ueber .fusion-image-wrapper .fusion-rollover
   .fusion-rollover-content ... (0,4,0) und gewinnt sonst. */
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-title,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-title a,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-categories,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-categories a,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .price,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .price .amount,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .price .woocommerce-Price-currencySymbol,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .hpt-unitprice,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-product-buttons a,
.fusion-woo-product-slider .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-product-buttons a::before {
	color: #fff;
}


/* =========================================================
   Startseiten-Header: Button und Bild ohne Scrollen

   Wer die Seite oeffnet, sah zuerst nur Text auf Weiss. Der
   Button lag bei 939px, das Bild noch tiefer - auf keinem
   Handy sichtbar, ohne zu scrollen.

   Bis 640px werden Schriftgroessen und Abstaende gestrafft
   und der Platz unter dem Text kleiner (58vw statt 76vw, mit
   66vw als Mass fuer die hoeheren Geraete). Der Text bleibt
   vollstaendig, nichts wird ausgeblendet.

   Zusammen mit dem kompakteren Kopfbereich (nav.css)
   gemessen:

     375 x 812  Button sichtbar, 74px Bild, Text 9px ueber dem Motiv
     414 x 896  Button sichtbar, 181px Bild
     375 x 667  Button sichtbar, 44px Bild (zweite Stufe unten)

   Die zweite Stufe greift erst bei flachen Displays bis 720px
   Hoehe. Ohne sie fehlten dort rund 80px.
   ========================================================= */

@media only screen and (max-width: 640px) {

	/* 34vw statt 66vw: Das Bild beginnt dadurch rund 120px
	   weiter oben und ist schon im ersten Bildschirm zu sehen.
	   Der Text liegt jetzt teilweise ueber dem Bild - dafuer
	   sorgt der Verlauf oben fuer genug Kontrast. */
	.fusion-fullwidth.header-start {
		padding-top: 14px !important;
		padding-bottom: 34vw !important;
	}

	.header-start .eyebrow p {
		font-size: 13px;
		letter-spacing: 1.5px;
	}

	.header-start h3 {
		font-size: 17px !important;
	}

	/* !important: Avadas responsive Typografie setzt die
	   Groesse selbst mit !important. */
	.header-start h1 {
		font-size: 22px !important;
		line-height: 1.16;
	}

	.header-start .fusion-text p {
		font-size: 16px;
		line-height: 1.5;
	}

	.header-start .fusion-text {
		margin-bottom: 12px !important;
	}

	.header-start .fusion-button {
		margin-bottom: 22px !important;
	}
}

/* Flache Displays, etwa iPhone SE oder 8 */
@media only screen and (max-width: 640px) and (max-height: 720px) {

	.fusion-fullwidth.header-start {
		padding-top: 6px !important;
	}

	.header-start .eyebrow p {
		font-size: 12px;
	}

	.header-start .fusion-title {
		margin-bottom: 6px !important;
	}

	.header-start h3 {
		font-size: 16px !important;
	}

	.header-start h1 {
		font-size: 20px !important;
		line-height: 1.12;
	}

	.header-start .fusion-text p {
		font-size: 15px;
		line-height: 1.4;
	}

	.header-start .fusion-text {
		margin-bottom: 10px !important;
	}

	.header-start .fusion-button {
		margin-bottom: 14px !important;
	}
}