/* ============================================================================
   PRODUKTE – Ausgabe der Produktgruppen auf der Produktseite
   Wird nur geladen, wenn der Shortcode [hac_produkte] auf der Seite steht.

   GRUNDSÄTZE
   1. Farben und Schrift kommen aus dem bestehenden Erscheinungsbild:
      Markengrün #bac6ae, Text #333333, Trebuchet MS. Kein neues Design.
   2. Die Schrift wird ausdrücklich gesetzt. Das Theme gibt die eingestellte
      Schrift nur auf h1–h6 und p; auf <body> steht weiterhin "Muli".
      Tabellen und Beschriftungen würden sonst Muli erben.
   3. Kein Eingriff in Theme- oder Elementor-Klassen.
   ========================================================================== */

.hacp {
	--hp-gruen:      #bac6ae;
	--hp-gruen-dk:   #667d4f;   /* nur Flaechen und Rahmen – als Schrift: --hp-gruen-tief (T25) */
	--hp-gruen-tief: #4d5f3b;
	--hp-gruen-soft: #f4f6f2;
	--hp-gruen-tiefer:#eef1e9;

	--hp-text:   #333333;
	--hp-leise:  #6b6b6b;
	--hp-fein:   var(--hac-farbe-text-leise, #6b6b6b); /* vorher #8d9184: 3,2:1 */
	--hp-rand:   #dcdfd6;
	--hp-weiss:  #ffffff;

	--hp-hinweis:      #9c5f1d;
	--hp-hinweis-soft: #f7efe4;

	--hp-radius: 8px;

	font-family: "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif;
	color: var(--hp-text);
	font-size: 16px;
	line-height: 1.65;
}

.hacp *,
.hacp *::before,
.hacp *::after { box-sizing: border-box; }


/* ── Schaltflächen ────────────────────────────────────────────────────────── */

.hacp .hacp-knopf {
	display: inline-block;
	padding: 12px 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--hp-text);
	background: var(--hp-gruen);
	border: 1px solid var(--hp-gruen);
	border-radius: var(--hp-radius);
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.hacp .hacp-knopf:hover,
.hacp .hacp-knopf:focus-visible {
	color: var(--hp-weiss);
	background: var(--hp-gruen-dk);
	border-color: var(--hp-gruen-dk);
}
.hacp .hacp-knopf--schlicht {
	color: var(--hp-gruen-tief);
	background: transparent;
	border-color: var(--hp-rand);
}
.hacp .hacp-knopf--schlicht:hover,
.hacp .hacp-knopf--schlicht:focus-visible {
	color: var(--hp-gruen-tief);
	background: var(--hp-gruen-soft);
	border-color: var(--hp-gruen-dk);
}
.hacp a:focus-visible,
.hacp button:focus-visible {
	outline: 2px solid var(--hp-gruen-dk);
	outline-offset: 3px;
}


/* ── PDF-Block ────────────────────────────────────────────────────────────── */

.hacp-pdf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0 0 26px;
	padding: 18px 22px;
	background: var(--hp-weiss);
	border: 1px solid var(--hp-rand);
	border-left: 4px solid var(--hp-gruen);
	border-radius: 0 var(--hp-radius) var(--hp-radius) 0;
}
.hacp-pdf-text { flex: 1 1 240px; }
.hacp-pdf-text strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--hp-text);
}
.hacp-pdf-text span {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--hp-leise);
}


/* ── Kategorie-Filter ─────────────────────────────────────────────────────── */

.hacp-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}
.hacp-filter button {
	padding: 8px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	color: var(--hp-leise);
	background: var(--hp-weiss);
	border: 1px solid var(--hp-rand);
	border-radius: 999px;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.hacp-filter button:hover {
	color: var(--hp-gruen-tief);
	border-color: var(--hp-gruen-dk);
}
.hacp-filter button[aria-pressed="true"] {
	color: var(--hp-text);
	background: var(--hp-gruen);
	border-color: var(--hp-gruen-dk);
}


/* ── Produktgruppe ───────────────────────────────────────────────────────── */

.hacp-gruppe {
	margin: 0 0 30px;
	background: var(--hp-weiss);
	border: 1px solid var(--hp-rand);
	border-radius: var(--hp-radius);
	overflow: hidden;
}
.hacp-gruppe:last-child { margin-bottom: 0; }

/* Der Filter blendet ueber das hidden-Attribut aus. Das Theme setzt article auf
   display:block und schlaegt damit die Browservorgabe fuer [hidden] – ohne
   diese Zeile bleibt beim Filtern alles stehen. */
.hacp-gruppe[hidden] { display: none; }

.hacp-oben {
	display: grid;
	grid-template-columns: 320px 1fr;
	align-items: stretch;
}
/* Ohne Bild und ohne Video füllt der Textteil die ganze Breite. */
.hacp-oben:not(:has(.hacp-medien)) { grid-template-columns: 1fr; }

.hacp-medien {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--hp-gruen-tiefer);
	border-right: 1px solid var(--hp-rand);
}

.hacp-video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}

/* Ein Bild steht groß. Ab zwei entsteht eine Reihe – gedacht für Rubriken
   mit mehreren Partnern, etwa Alps Coffee und Kräuterrebellen. */
.hacp-bilder {
	display: grid;
	gap: 2px;
	flex: 1;
}
.hacp-bilder--1 { grid-template-columns: 1fr; }
.hacp-bilder--2,
.hacp-bilder--4 { grid-template-columns: repeat(2, 1fr); }
.hacp-bilder--3,
.hacp-bilder--5 { grid-template-columns: repeat(2, 1fr); }
.hacp-bilder--3 .hacp-bild:first-child,
.hacp-bilder--5 .hacp-bild:first-child { grid-column: 1 / -1; }

.hacp-bild {
	position: relative;
	margin: 0;
	min-height: 120px;
	overflow: hidden;
}
.hacp-bilder--1 .hacp-bild { min-height: 220px; }
.hacp-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Wie das Bild in seiner Flaeche sitzt – je Gruppe im Backend einstellbar.
   „fuellen" beschneidet auf Kante, „ganz" zeigt das vollstaendige Bild.
   Letzteres brauchen Etiketten und Hochformate, bei denen nichts fehlen darf. */
.hacp-sitz--fuellen .hacp-bild img { object-fit: cover; }

.hacp-sitz--ganz .hacp-bild {
	background: var(--hp-gruen-soft);
}
.hacp-sitz--ganz .hacp-bild img {
	object-fit: contain;
	padding: 10px;
}

/* Welcher Teil sichtbar bleibt, wenn beschnitten wird. Bei Personen ist
   „oben" meist richtig, damit keine Koepfe wegfallen. */
.hacp-teil--oben   .hacp-bild img { object-position: 50% 0%; }
.hacp-teil--mittig .hacp-bild img { object-position: 50% 50%; }
.hacp-teil--unten  .hacp-bild img { object-position: 50% 100%; }

.hacp-kopf {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 24px 26px;
}
.hacp-herkunft {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--hp-gruen-tief);
}
.hacp .hacp-titel {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hp-text);
	text-transform: none;
}
.hacp-text { color: var(--hp-leise); }
.hacp-text p { margin: 0 0 8px; color: inherit; }
.hacp-text p:last-child { margin-bottom: 0; }

.hacp-spanne {
	margin: 2px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--hp-gruen-tief);
	font-variant-numeric: tabular-nums;
}
.hacp-hinweis {
	margin: 0;
	font-size: 13px;
	color: var(--hp-fein);
}
.hacp-aktion {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.hacp-aktion .hacp-knopf { font-size: 14px; padding: 9px 16px; }


/* ── Positionen ──────────────────────────────────────────────────────────── */

.hacp-positionen { border-top: 1px solid var(--hp-rand); }

.hacp-positionen-kopf {
	padding: 11px 26px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hp-fein);
	background: var(--hp-gruen-soft);
	border-bottom: 1px solid var(--hp-rand);
}

/* Breite Tabellen scrollen in ihrem eigenen Kasten, nie die Seite. */
.hacp-tabelle-huelle { overflow-x: auto; }

.hacp .hacp-tabelle {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
	background: transparent;
}
.hacp .hacp-tabelle th,
.hacp .hacp-tabelle td {
	padding: 11px 26px;
	border: 0;
	border-bottom: 1px solid var(--hp-rand);
	vertical-align: top;
	text-align: left;
	background: transparent;
}
.hacp .hacp-tabelle thead th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--hp-fein);
	white-space: nowrap;
}
.hacp .hacp-tabelle tbody tr:last-child td { border-bottom: 0; }

.hacp .hacp-tabelle td.hacp-name {
	font-weight: 600;
	color: var(--hp-text);
}
.hacp .hacp-tabelle td.hacp-art {
	font-size: 14px;
	color: var(--hp-leise);
}

.hacp .hacp-tabelle th.hacp-wert,
.hacp .hacp-tabelle td.hacp-wert {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.hacp-wert .hacp-menge {
	display: block;
	font-size: 13px;
	color: var(--hp-fein);
}
.hacp-wert .hacp-preis {
	display: block;
	font-weight: 700;
	color: var(--hp-gruen-tief);
}
.hacp-wert .hacp-leer { color: var(--hp-fein); }

/* Zwischenüberschrift innerhalb einer Gruppe, etwa „Halbtrocken & Feinherb" */
.hacp .hacp-tabelle tr.hacp-zwischen th {
	padding-top: 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hp-gruen-tief);
	background: var(--hp-gruen-soft);
	white-space: normal;
}

/* Nicht vorrätig: bleibt lesbar, tritt aber zurück. */
.hacp .hacp-tabelle tr.hacp-aus td { color: var(--hp-fein); }
.hacp .hacp-tabelle tr.hacp-aus td.hacp-name { font-weight: 500; }
.hacp .hacp-tabelle tr.hacp-aus .hacp-preis { font-weight: 400; color: var(--hp-fein); }

.hacp-chip {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	color: var(--hp-hinweis);
	background: var(--hp-hinweis-soft);
	border: 1px solid rgba(156, 95, 29, .35);
	border-radius: 999px;
}

.hacp-leermeldung {
	padding: 22px 24px;
	color: var(--hp-leise);
	background: var(--hp-gruen-soft);
	border-radius: var(--hp-radius);
}


/* ── Mobil ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.hacp-oben { grid-template-columns: 1fr; }
	.hacp-medien {
		border-right: 0;
		border-bottom: 1px solid var(--hp-rand);
	}
	.hacp-bilder--1 .hacp-bild { min-height: 200px; }
}

@media (max-width: 600px) {
	.hacp-kopf { padding: 20px 16px; }
	.hacp-positionen-kopf { padding-left: 16px; padding-right: 16px; }
	.hacp .hacp-tabelle th,
	.hacp .hacp-tabelle td { padding-left: 16px; padding-right: 16px; }
	.hacp .hacp-titel { font-size: 19px; }
	.hacp-pdf { padding: 16px 18px; }
	.hacp-pdf .hacp-knopf { width: 100%; text-align: center; }
	/* Bei drei und fünf Bildern wird die Reihe auf dem Handy zu klein. */
	.hacp-bilder--3,
	.hacp-bilder--5 { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.hacp * { transition: none !important; }
}


/* ── Sprungziel „Anfragen" ───────────────────────────────────────────────────
   Die Knöpfe der einzelnen Gruppen springen zum Formular am Seitenende. Ohne
   Abstand landet die Überschrift unter der klebenden Kopfleiste. Die Höhe misst
   das Skript und legt sie als --hp-sprung ab; der Wert hier ist nur der
   Rückfall, falls kein JavaScript läuft. */

.hacp-abschluss {
	scroll-margin-top: var(--hp-sprung, 110px);
}

/* Der Block bekommt beim Anspringen den Fokus, damit auch die Tastatur dort
   weitermacht. Ein Rahmen soll dabei aber nicht aufblitzen. */
.hacp-abschluss:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
	html:has(body.hac-produktseite) { scroll-behavior: smooth; }
}

/* ── Videos ──────────────────────────────────────────────────────────────────
   Bis zu fünf Videos je Rubrik, eines je Partner. Ab zwei stehen sie
   nebeneinander – dieselbe Aufteilung wie bei den Bildern. */

.hacp-videos {
	display: grid;
	gap: 14px;
	margin-bottom: 18px;
}

.hacp-videos--2,
.hacp-videos--4 { grid-template-columns: repeat(2, 1fr); }
.hacp-videos--3,
.hacp-videos--5 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 680px) {
	.hacp-videos { grid-template-columns: 1fr; }
}

/* ── Eingebettetes Video über Borlabs Cookie ─────────────────────────────────
   Vor der Einwilligung steht hier der Kasten von Borlabs, danach das Video.
   Beides bekommt dasselbe 16:9-Fenster, damit beim Zustimmen nichts springt.
   Geladen wird von Google erst nach dem Ja – vorher geht keine Besucher-IP
   raus. */

.hacp-einbau {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: #14170f;
}

.hacp-einbau > * {
	max-width: 100%;
}

.hacp-einbau iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Borlabs setzt seinen Kasten in eigene Hüllen. Ohne Mindesthöhe fällt er
   auf manchen Geräten zu flach aus und der Knopf klebt am Rand. */
.hacp-einbau .borlabs-cookie-content-blocker,
.hacp-einbau .brlbs-cmpnt-container,
.hacp-einbau .brlbs-cmpnt-content-blocker {
	min-height: 200px;
}

/* ── YouTube-Vorschau (Rückfallebene ohne Borlabs) ───────────────────────────
   Ist Borlabs nicht aktiv, wird nichts eingebettet: Das Vorschaubild liegt auf
   unserem Server, der Klick öffnet das Video drüben. Solange niemand klickt,
   geht keine Besucher-IP an Google. */

.hacp-yt {
	position: relative;
	display: block;
	min-height: 180px;
	background: #14170f;
	text-decoration: none;
	overflow: hidden;
}
.hacp-yt img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .82;
	transition: opacity .18s ease, transform .18s ease;
}
.hacp-yt:hover img,
.hacp-yt:focus-visible img { opacity: 1; transform: scale(1.02); }

.hacp-yt-knopf {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.hacp-yt-flaeche { fill: rgba(20, 23, 15, .78); transition: fill .18s ease; }
.hacp-yt-pfeil   { fill: #ffffff; }
.hacp-yt:hover .hacp-yt-flaeche,
.hacp-yt:focus-visible .hacp-yt-flaeche { fill: #c00; }

.hacp-yt-text {
	position: absolute;
	inset: auto 0 0 0;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(to top, rgba(0, 0, 0, .68), transparent);
}


/* ── Abschluss mit Kontakt ───────────────────────────────────────────────── */

.hacp-abschluss {
	margin: 34px 0 0;
	padding: 30px 32px;
	background: var(--hp-gruen-tiefer);
	border-radius: var(--hp-radius);
}
.hacp .hacp-abschluss-titel {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hp-text);
	text-transform: none;
}
.hacp-abschluss-text {
	margin: 0 0 18px;
	max-width: 58ch;
	color: var(--hp-leise);
}
/* Das Formular bringt sein eigenes Aussehen über hac-formulare mit –
   hier nur Platz schaffen, nichts überschreiben. */
.hacp-formular { margin-top: 4px; }

@media (max-width: 600px) {
	.hacp-abschluss { padding: 24px 18px; }
	.hacp-abschluss .hacp-knopf { width: 100%; text-align: center; }
}


/* ── Breite an das Theme-Raster angleichen ───────────────────────────────────
   Die Produktseite laeuft unter der Vorlage „Volle Breite". Die begrenzt den
   Inhalt bewusst nicht – bisher fing Elementor das mit eigenen Containern ab.
   Ohne Elementor liefe alles bis an den Bildschirmrand.

   Die Breite wird aus der Theme-Einstellung abgeleitet, nicht fest gesetzt:
   Das Theme haengt sie als Klasse an den <body>. Stellst du das Raster im
   Theme um, zieht diese Seite mit.

   Greift nur auf Seiten mit der Produktliste (Klasse hac-produktseite), damit
   andere Vollbreiten-Seiten unberuehrt bleiben.

   Begrenzt wird .eltdf-full-width-inner, nicht der Inhaltshalter darunter:
   Der ist gefloatet, dort bliebe margin:auto wirkungslos. Eine Ebene hoeher
   zentriert der Browser normal – und die Innenabstaende des Theme-Rasters
   (-15px am Raster, +15px am Halter) bleiben unangetastet. */

body.hac-produktseite .eltdf-full-width-inner {
	margin-left: auto;
	margin-right: auto;
}

body.hac-produktseite.eltdf-grid-800  .eltdf-full-width-inner { max-width:  800px; }
body.hac-produktseite.eltdf-grid-1000 .eltdf-full-width-inner { max-width: 1000px; }
body.hac-produktseite.eltdf-grid-1100 .eltdf-full-width-inner { max-width: 1100px; }
body.hac-produktseite.eltdf-grid-1200 .eltdf-full-width-inner { max-width: 1200px; }
body.hac-produktseite.eltdf-grid-1300 .eltdf-full-width-inner { max-width: 1300px; }