/*
Theme Name: flint Med Child
Theme URI: https://flintmed.de
Description: Child-Theme für flintmed.de auf Basis von Divi. Enthält alle projektspezifischen Anpassungen (Katalog-Modus, Single-Product-Template, Retailer-Buttons, eigene Styles & Scripts). Bestehende Kunden-Styles bleiben in der Divi-UI (Theme-Optionen → Custom CSS).
Author: woogency
Template: Divi
Version: 1.64.0
Text Domain: flintmed-child
*/

/* =========================================================================
   Eigene Anpassungen (versioniert) ab hier.

   Hinweis zum Kunden-CSS: Es lag als ~13 KB Altbestand aus der efasit-Zeit
   vor und wurde am 2026-07-29 auf 2,5 KB eingedampft (A3). Was blieb, greift
   nachweislich: Grundschrift, Mobile-Menü-Akzent, Ninja-Forms-Kontaktformular,
   Dropdown-Breite, Ratgeber-Positionierung, Selektionsfarbe, Listen-
   Zeilenhöhe, Site-Reviews-Detail. Es wird weiterhin über Divi ausgeliefert
   und NICHT hierher dupliziert.

   ⚠️ Wichtig für alle künftigen Änderungen daran: Dieses CSS liegt
   **dreifach** in der Datenbank und alle drei Stellen müssen gleich sein —
   sonst kommt beim nächsten Cache-Aufbau der alte Stand zurück:
     1. Option  et_divi['divi_custom_css']   (Divi → Theme-Optionen)
     2. custom_css-Post des AKTIVEN Themes   (flintmed-child) ← wird ausgeliefert
     3. custom_css-Post des Parent-Themes    (Divi, inaktiv)
   Ausgeliefert wird Nr. 2, gebacken in wp-content/et-cache/global/
   et-divi-customizer*.min.css. Diese Dateien nach einer Änderung löschen,
   sonst bleibt der alte Stand stehen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Die acht Variablen des Produkt-Templates (E1.1)
   -------------------------------------------------------------------------
   Das Theme-Builder-Layout 4396 ("All Products Body Layout") gestaltet die
   FAQ, die "Noch Fragen?"-Box und die Bewertungs-Box über acht CSS-Variablen,
   die es im ganzen System nie gab: 218 Verwendungen je Produktseite,
   0 Definitionen. Gesucht wurde in allen drei Divi-Kunden-CSS-Ablagen, im
   Child-Theme, unter wp-content, in wp_…posts und wp_…options — und im Backup
   von vor A3. Es ist also ein Altfehler aus der efasit-Vorlage.

   Warum das die Seite zerlegt: Eine undefinierte var() macht nicht nur sich
   selbst ungültig, sondern die ganze Deklaration ("invalid at computed-value
   time"). background-color fällt damit auf transparent, color auf den
   geerbten Wert. Das Layout setzt gleichzeitig Titel UND Antworttext der
   FAQ hart auf #FFFFFF, die Sektion darunter auf #FFFFFF !important — daraus
   entsteht das gemeldete "weiß auf weiß".

   Die Namen stammen aus der Vorlage und sagen nichts darüber, was sie tun.
   Maßgeblich für die Zuordnung ist deshalb die gemessene Verwendung:

     --secondary-color     66x   ausschließlich background-color  → Fläche
     --primary-color       60x   ausschließlich color             → Schrift
     --background-gradient 23x   ausschließlich background-image  → Fläche
     --line-height         22x   ausschließlich line-height
     --light-background    22x   ausschließlich background-color  → Fläche
     --accent-color        20x   ausschließlich color             → Schrift
     --text-shadow          3x   ausschließlich text-shadow
     --text-color           2x   ausschließlich color             → Schrift

   Bewusst auf :root und nicht auf body.single-product: kein einziges CSS oder
   JS unter wp-content benutzt einen dieser acht Namen (nachgezählt: 0 Dateien
   je Name), und die Startseite benutzt sie 0x. Global definiert kann hier also
   nichts kollidieren — dafür greifen die Werte auch dort, wo die body-Klasse
   fehlt, etwa in der Divi-Vorschau des Layouts.

   Die FAQ selbst bekommt weiter unten die Startseiten-Optik und überschreibt
   diese Flächen wieder. Die Werte hier tragen trotzdem: die "Noch Fragen?"-Box
   (.et_pb_code_12_tb_body) und den Bewertungs-Button (.et_pb_code_15_tb_body),
   und sie sind das Netz für jeden Zustand, den die FAQ-Regeln nicht abdecken.
   ------------------------------------------------------------------------- */

:root {
	/* Schrift auf heller Fläche → das Überschriftenblau der Palette.
	   Ausdrücklich NICHT das Marken-Türkis: --primary-color steht im Layout
	   als Titelfarbe auf --light-background, und #35d4cc käme dort auf 1,84:1.
	   #072355 auf #f2f8f8 sind 14,17:1. */
	--primary-color: var(--gcid-heading-color, #072355);

	/* Zweite Schriftfarbe; das Layout benutzt sie für den zugeklappten Titel.
	   Das Magenta ist der Akzent der Marke (Logo-"Med", CTA-Buttons) und
	   kommt auf --light-background auf 4,65:1. */
	--accent-color: var(--gcid-link-color, #db0a5b);

	/* Die farbige Fläche. Sie trägt im Layout hart gesetztes #FFFFFF, muss
	   also mindestens 4,5:1 gegen Weiß schaffen. Das Marken-Türkis #35d4cc
	   schafft nur 1,84:1 und scheidet damit aus. Deshalb derselbe Farbton
	   (177°, gleiche Sättigung) bei 25 % statt 52 % Helligkeit:
	   #0f6f6b → 5,99:1 gegen Weiß. */
	--secondary-color: #0f6f6b;

	/* Helle Fläche darunter. Türkis getönt statt neutralgrau, damit heller
	   und farbiger Kasten erkennbar zusammengehören. */
	--light-background: #f2f8f8;

	/* Schrift auf --secondary-color. */
	--text-color: #ffffff;

	/* Verlauf über derselben Fläche. Beide Endpunkte sind dunkel genug für
	   weiße Schrift (5,99:1 bzw. 15,21:1), der Verlauf ist also auf ganzer
	   Länge lesbar — nicht nur an einem Ende. */
	--background-gradient: linear-gradient(135deg, #0f6f6b 0%, #072355 100%);

	/* Dezente Tiefe für Weiß auf der farbigen Fläche, im Blau der Palette
	   statt in Neutralschwarz. */
	--text-shadow: 0 1px 2px rgba(7, 35, 85, 0.35);

	/* -----------------------------------------------------------------
	   NEUNTE Variable, und die einzige, die nicht aus der efasit-Vorlage
	   stammt: das Flint-Blau als Kanalwerte.

	   Kundentermin 14.09.2026 — das dunkle Overlay im Kopfbereich und die
	   „Noch Fragen?"-Wabe sollen dieselbe Farbe tragen. Als Kanäle notiert
	   (`7 35 85` statt `#072355`), weil das Overlay sie mit Deckkraft
	   braucht: `rgb(var(--flint-blau) / 0.88)`. Ein Hex-Wert ließe sich
	   dort nicht wiederverwenden, und zwei getrennte Schreibweisen für
	   eine Farbe laufen beim nächsten Wunsch auseinander.

	   Bewusst NICHT --primary-color benutzt: das ist die Schriftfarbe des
	   Layouts und hängt an `--gcid-heading-color`, einer Variablen aus
	   Divis Farbverwaltung. Ändert jemand dort die Überschriftenfarbe,
	   färbte sich sonst stillschweigend der Kopfbereich mit um.
	   ----------------------------------------------------------------- */
	--flint-blau: 7 35 85;

	/* Einheitenlos, weil das Layout den Wert auch an <p> weitergibt — mit
	   Einheit würde die geerbte Zeilenhöhe nicht mit der Schriftgröße
	   mitwachsen. 1.7 ist exakt der Wert der Startseiten-FAQ weiter unten;
	   damit liefert schon die Template-eigene Regel die richtige Zeilenhöhe. */
	--line-height: 1.7;
}

/* -------------------------------------------------------------------------
   Produktkacheln (C1)
   -------------------------------------------------------------------------
   Gilt für BEIDE Varianten und für das bestehende Divi-Shop-Modul, weil alle
   dasselbe WooCommerce-Loop-Markup rendern (`content-product.php`):

     .et_pb_shop ul.products   – das Divi-Shop-Modul auf der Startseite
     .flint-pk                 – [flint_produkt_karten] (Raster / Karussell)

   Der frühere Block an dieser Stelle stylte `.et_pb_row[data-loop-item]`,
   also den nativen Divi-5-LOOP. Dieses Markup kommt auf der Startseite gar
   nicht vor (0 Treffer im Render) – der Block war wirkungslos. Gesichert
   unter backup/db-edits-2026-07-29-wpcode/style.css.vor-c1.

   Kern der Sache ist die Bildfläche: die flint-Packshots sind sehr
   hochformatig (0,26:1 bis 0,54:1) und unterscheiden sich untereinander um
   mehr als das Doppelte. Feste Höhe + object-fit:contain heißt deshalb:
   alle Packungen stehen auf gleicher Grundlinie und gleicher Höhe, die
   Breite ergibt sich aus dem Produkt – eine Sprühdose ist eben schmaler als
   eine Pflasterschachtel. Nichts wird mehr angeschnitten.
   ------------------------------------------------------------------------- */

/* Variablen bewusst AUCH auf dem Slider-Wrapper: die Karussell-Pfeile sind
   Geschwister der Liste, keine Nachfahren – ohne diese Zeile erben sie die
   Werte nicht, `var(--flint-pk-akzent)` wäre ungültig und Hintergrund wie
   Rahmen fielen auf transparent zurück (weiße Schrift auf Weiß). */
.flint-pk,
.flint-pk-slider,
.et_pb_shop ul.products {
	--flint-pk-bild: 300px;
	--flint-pk-gap: 28px;
	--flint-pk-radius: 0px;
	--flint-pk-rahmen: #e4e4e4;
	--flint-pk-akzent: #2ad2c9;
}

.flint-pk,
.et_pb_shop ul.products {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* WooCommerce hängt an ul.products einen Clearfix:
     .woocommerce ul.products::before/::after { content:" "; display:table }
   Der stammt aus der Float-Zeit. Sobald die Liste Grid oder Flex wird, zählen
   diese beiden Pseudo-Elemente als vollwertige Items – im Raster belegen sie
   die erste und die letzte Zelle, wodurch die Kacheln verrutschen und die
   erste Spalte leer aussieht. Deshalb ersatzlos abschalten; geclearfixt werden
   muss im Grid/Flex ohnehin nichts. */
.flint-pk::before,
.flint-pk::after,
.et_pb_shop ul.products::before,
.et_pb_shop ul.products::after {
	content: none !important;
	display: none !important;
}

/* --- Die Karte selbst (in beiden Varianten identisch) -------------------- */

.flint-pk li.product,
.et_pb_shop ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 22px 20px 24px !important;
	background: #ffffff;
	border: 1px solid var(--flint-pk-rahmen);
	border-radius: var(--flint-pk-radius);
	text-align: center;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.flint-pk li.product:hover,
.et_pb_shop ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: var(--flint-pk-akzent);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.flint-pk li.product a.woocommerce-LoopProduct-link,
.et_pb_shop ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

/* Bildfläche: für alle Karten gleich hoch, damit die Titel auf einer Linie
   bleiben. Die Packungen stehen darin unten auf einer gemeinsamen Grundlinie
   („im Regal"), ihre individuelle Höhe kommt aus dem Flächenausgleich in
   inc/produkt-karten.php. */
.flint-pk li.product .et_shop_image,
.flint-pk li.product > a > img,
.et_pb_shop ul.products li.product .et_shop_image,
.et_pb_shop ul.products li.product > a > img {
	display: flex !important;
	align-items: flex-end;
	justify-content: center;
	height: var(--flint-pk-bild);
	margin-bottom: 18px;
	overflow: visible;
}

.flint-pk li.product img,
.et_pb_shop ul.products li.product img {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	/* Feinwert je Produkt setzt inc/produkt-karten.php; das hier ist die
	   Obergrenze für Produkte ohne berechneten Wert. */
	max-height: var(--flint-pk-bild);
	object-fit: contain;
	margin: 0 auto;
	display: block;
}

/* Divi-Hover-Overlay (Warenkorb-/Lupen-Icon) – im Katalog-Modus irreführend */
.flint-pk li.product .et_overlay,
.et_pb_shop ul.products li.product .et_overlay {
	display: none !important;
}

/* Titel */
.flint-pk li.product .woocommerce-loop-product__title,
.et_pb_shop ul.products li.product .woocommerce-loop-product__title,
.flint-pk li.product h2,
.et_pb_shop ul.products li.product h2 {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	padding: 0 !important;
	margin: auto 0 0;
	/* Platz für zwei Zeilen freihalten – „Mückenstich Gel Roll On" bricht um,
	   ohne Reserve stünde dessen Titel als einziger tiefer. */
	min-height: 2.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333333;
	transition: color 0.2s ease;
}

.flint-pk li.product:hover .woocommerce-loop-product__title,
.et_pb_shop ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--flint-pk-akzent);
}

/* Preis ist serverseitig entfernt (B4) – hier nur als Netz, falls ein
   anderes Modul ihn doch ausgibt. */
.flint-pk li.product .price,
.et_pb_shop ul.products li.product .price {
	display: none !important;
}

/* --- Variante A: aufgeräumtes Raster ------------------------------------ */

.flint-pk--raster,
.et_pb_shop ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--flint-pk-gap);
	max-width: 1080px;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media only screen and (max-width: 980px) {
	.flint-pk--raster,
	.et_pb_shop ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 600px) {
	.flint-pk--raster,
	.et_pb_shop ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Variante B: Karussell ---------------------------------------------- */

.flint-pk-slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 1160px;
	margin: 0 auto;
}

.flint-pk--karussell {
	display: flex !important;
	gap: var(--flint-pk-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	/* Platz für den Hover-Lift, sonst schneidet overflow ihn ab */
	padding: 6px 2px 12px !important;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

.flint-pk--karussell li.product {
	flex: 0 0 clamp(200px, 30%, 300px);
	scroll-snap-align: start;
}

/* Fallbackwerte in var() bewusst gesetzt: ohne sie wird die Deklaration bei
   fehlender Variable ungültig und fällt auf transparent zurück – der Pfeil
   wäre dann weiß auf Weiß. */
.flint-pk-nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--flint-pk-rahmen, #e4e4e4);
	border-radius: 0;
	background-color: #ffffff;
	color: #333333;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.flint-pk-nav:hover:not(:disabled),
.flint-pk-nav:focus-visible:not(:disabled) {
	background-color: var(--flint-pk-akzent, #2ad2c9);
	border-color: var(--flint-pk-akzent, #2ad2c9);
	color: #ffffff;
}

.flint-pk-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.flint-pk li.product,
	.et_pb_shop ul.products li.product,
	.flint-pk-nav {
		transition: none;
	}
	.flint-pk--karussell {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------
   Retailer-Buttons ("Bei Amazon/Rossmann kaufen") – Katalog-CTA
   ------------------------------------------------------------------------- */
.flint-retailers {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 18px 0 4px;
}
.flint-retailer {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.flint-retailer:hover { transform: translateY(-2px); opacity: 0.92; }
.flint-retailer--amazon   { background: #ff9900; color: #111; }
.flint-retailer--rossmann { background: #ce0e2d; color: #fff; }

/* Retailer-Buttons in der Loop-Karte kompakter/gestapelt */
.et_pb_row[data-loop-item] .flint-retailers { flex-direction: column; align-items: stretch; margin-top: 12px; }
.et_pb_row[data-loop-item] .flint-retailer { text-align: center; padding: 10px 14px; font-size: 14px; }

/* -------------------------------------------------------------------------
   Katalog-Modus: sämtliche WooCommerce-Warenkorb-/Kauf-UI ausblenden
   (Produkte sind nicht kaufbar; Kauf erfolgt extern via Retailer-Buttons)
   ------------------------------------------------------------------------- */
.et_pb_wc_add_to_cart,
.woocommerce div.product form.cart,
.single_add_to_cart_button,
.woocommerce .quantity,
.add_to_cart_button {
	display: none !important;
}

/* -------------------------------------------------------------------------
   FAQ-Optik — Startseite (A3) und Produktseiten (E1.2)
   -------------------------------------------------------------------------
   Die FAQ-Sektion war Divi-Standardoptik: graue Kästen mit Rahmen, dazu eine
   linksbündige Überschrift, während alle anderen Sektionsüberschriften der
   Startseite zentriert sind (`<h2 style="text-align:center">`). Beides fällt
   im Seitenfluss auf.

   Hier stattdessen eine ruhige Liste: keine Kästen, nur feine Trennlinien,
   eckig passend zur Badge-/Kartenrichtung. Die Überschrift bekommt nur
   `text-align: center` — Größe und Farbe erbt sie damit von der globalen
   h2-Regel (26 px) und bleibt automatisch im Gleichklang mit „Unsere
   Produkte" & Co., auch wenn die Divi-Theme-Optionen sich mal ändern.

   DREI GELTUNGSBEREICHE, und warum sie so aussehen, wie sie aussehen:

   `.home`             — die Startseite, seit A3.
   `body.single-product` — die sechs WooCommerce-Produktseiten, seit E1.2.
                         Der Kunde hat die Startseite ausdrücklich als Vorbild
                         genannt. `single-product` trifft genau die neuen
                         Produktseiten und NICHT die alten Einzelseiten (191,
                         1759, …): die sind Post-Typ `page` und behalten ihre
                         eigenen Accordions — genau der Grund, aus dem der
                         Block bis E1.2 auf `.home` beschränkt war.
   `body.parent-pageid-53` — die Ratgeber-Beiträge, seit TCK-0037. Die Kundin
                         hat die Produktseiten als Vorbild genannt; gemeint war
                         die FAQ der WooCommerce-Produktseite, nicht die der
                         gleichnamigen alten Divi-Seite 4018.

   Zwei Unterschiede zum Ratgeber, die die Selektoren erklären:
   1. Dort steht **kein Accordion**, sondern einzelne Toggle-Module
      nebeneinander in der Spalte. Deshalb fehlt `.et_pb_accordion`, und
      deshalb greift auch `:first-child` nicht: vor den Fragen stehen
      Textmodule in derselben Spalte. Die erste Linie kommt darum über eine
      Geschwisterregel statt über `:first-child`.
   2. Zu schlagen ist hier nicht das Layout 4396, sondern Divis Spaltenraster:
      `.et_pb_gutters3 .et_pb_column_4_4.et_block_column .et_pb_module` (0,4,0)
      setzt den Abstand zwischen den Kästen auf 2,75 %. `.et_pb_column` und
      `.et_pb_module` stehen deshalb im Selektor mit — gemessen (0,4,1), und
      damit ohne !important vor der Rasterregel.
   Die zwei Ratgeber außerhalb von `/ratgeber/`
   (`/prellungen-verstauchungen-behandeln/`, `/mueckenstiche-bei-kindern/`)
   tragen `parent-pageid-53` nicht. Beide haben heute keine FAQ; bekommen sie
   eine, greift diese Optik dort nicht. Das ist dieselbe Bruchstelle wie in
   TCK-0020 — unterschiedliche URL-Tiefe für denselben Seitentyp.

   Die Startseiten-Selektoren sind kurz, die Produkt-Selektoren lang. Das ist
   kein Versehen, sondern gemessen: Auf der Startseite steht die FAQ nur gegen
   Divis Grundstil aus dem Eltern-Theme, drei Klassen reichen. Auf der
   Produktseite steht dieselbe Optik gegen die Modul-CSS des Layouts 4396, die
   Divi 5 mit `.et-db #et-boc .et-l` ausgibt — also mit einer ID — und die pro
   FAQ-Eintrag bis (1,6,1) reicht. Deshalb tragen die Produkt-Selektoren
   `#et-boc` und `.et_pb_accordion_item` mit. Gemessen ergibt das (1,5,1) für
   den Kasten, (1,6,1) für den Titel und (1,6,2) für das Icon — `:before`
   zählt als Element, nicht als Klasse. Damit gewinnt der Kasten ohne
   !important.

   Divi 5 gibt den Titel übrigens als <h4> aus, die Startseite als <h3>.
   Deshalb hängt hier nichts an einem Tag, sondern alles an
   `.et_pb_toggle_title`. Die zwei Regeln im Layout 4396, die auf `h5` zielen
   und denen zusätzlich der Punkt vor der Klasse fehlt
   („… et_pb_toggle_close h5"), greifen nie — diese Optik kommt ohne sie aus.

   Die Überschriftenregel bleibt bewusst allein auf `.home`: Die Produktseiten
   haben gar kein `.et_pb_heading`-Modul (0 Treffer im Render), ihre
   FAQ-Überschrift ist ein Textmodul und schon zentriert.
   ------------------------------------------------------------------------- */

:where(.home, .page-id-4742) .et_pb_heading .et_pb_module_header {
	text-align: center;
	margin-bottom: 28px;
}

/* Rahmen/Hintergrund des Standard-Toggles zurücknehmen */
:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle,
:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle.et_pb_toggle_open,
:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle.et_pb_toggle_close,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle_open,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle_close,
body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle {
	background-color: transparent;
	/* Muss mit: Das Layout legt auf den geöffneten Eintrag zusätzlich
	   `background-image: var(--background-gradient)`. Solange die Variable
	   undefiniert war, war diese Regel wirkungslos — mit den Definitionen
	   weiter oben wird sie es nicht mehr und würde einen Farbverlauf in die
	   ruhige Liste legen. Auf der Startseite ist die Zeile ein No-Op:
	   `none` ist dort ohnehin der geltende Wert. */
	background-image: none;
	border: 0;
	border-bottom: 1px solid #e4e4e4;
	border-radius: 0;
	/* Gegenstück zur Zeile darüber: Divi schneidet die Kästen passend zu
	   seinen runden Ecken ab (border-radius: 12px + overflow: hidden). Ohne
	   runde Ecken gibt es nichts zu beschneiden, und die Produktseite steht
	   damit auch hier gleich wie die Startseite — dort ein No-Op, weil
	   `visible` ohnehin der Ausgangswert ist. */
	overflow: visible;
	padding: 20px 44px 20px 2px;
	margin: 0;
}

:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle:first-child,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle:first-child {
	border-top: 1px solid #e4e4e4;
}

/* Ratgeber: `:first-child` greift nicht (siehe Kopf), also bekommt jeder
   Kasten die Linie oben — und jeder, dem ein Toggle vorausgeht, gibt sie
   wieder ab. So teilen sich Nachbarn eine Haarlinie statt zwei. */
body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle {
	border-top: 1px solid #e4e4e4;
}

body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle + .et_pb_module.et_pb_toggle {
	border-top: 0;
}

:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle_title,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title,
body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle .et_pb_toggle_title {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.35;
	/* Rechts Platz für das Aufklapp-Symbol freihalten.

	   Der Grund ist subtil: Divi positioniert das Symbol mit
	   `position: absolute; right: 2px` — und zwar relativ zum TITEL, nicht zum
	   Kasten darum. Die 44px, die der Toggle als `padding-right` mitbringt,
	   rücken deshalb Titel UND Symbol gemeinsam nach innen und trennen sie
	   nicht. Ein Titel, der bis ans Zeilenende läuft, verschwindet dadurch
	   unter dem Plus — auf der Produktseite passiert das bei den langen
	   Fragen („Ich nehme Blutverdünner, kann ich trotzdem …").

	   20px Symbolbreite + 2px Abstand vom Rand + 12px Luft = 34px. */
	padding: 0 34px 0 0;
	cursor: pointer;
	transition: color 0.2s ease;
}

:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title,
:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle_title:hover,
body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title,
body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle .et_pb_toggle_title:hover {
	color: #2ad2c9;
}

/* Divis Aufklapp-Icon behalten, nur Position und Farbe angleichen */
:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle_title:before,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title:before,
body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle .et_pb_toggle_title:before {
	right: 2px;
	color: #2ad2c9;
	font-size: 20px;
}

:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle_content,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item .et_pb_toggle_content,
body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle .et_pb_toggle_content {
	padding-top: 12px;
	font-size: 16px;
	line-height: 1.7;
	color: #555555;
}

:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle_content p:last-child,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item .et_pb_toggle_content p:last-child,
body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle .et_pb_toggle_content p:last-child {
	margin-bottom: 0;
}

/* --- Durchsetzung auf der Produktseite ----------------------------------
   Fünf Deklarationen kommen über Spezifität allein nicht durch. Sie stehen
   deshalb hier, getrennt und nur für die Produktseiten — und ausdrücklich
   NICHT in den geteilten Regeln oben. Sonst würde das !important auch auf
   der Startseite gelten und dort die (nicht wichtige) Hover-Regel des Titels
   aushebeln; der Titel würde beim Überfahren nicht mehr türkis.

   Was jeweils zu schlagen ist, gemessen am gerenderten HTML:

     margin        .et_pb_accordion_item_N_tb_body           (1,4,0) !important
     Titel offen   … .et_pb_toggle_open  h4.et_pb_toggle_title (1,5,1) !important  #FFFFFF
     Titel zu      … .et_pb_toggle_close h4.et_pb_toggle_title (1,5,1) !important  #555960
     Antworttext   … .et_pb_toggle .et_pb_toggle_content       (1,5,0) !important  #FFFFFF
     Zeilenhöhe    … .et_pb_toggle_close h4.et_pb_toggle_title (1,6,1)             1.4em

   Die ersten vier tragen im Layout selbst !important. Die fünfte nicht — sie
   liegt spezifitätsgleich mit der Regel oben (1,6,1) und gewinnt heute nur,
   weil Divi seine Modul-CSS später im Dokument ausgibt als das Child-Theme.
   Ohne sie hätte der zugeklappte Titel 1.4em, der aufgeklappte 1.35: ein
   zweizeiliger Titel würde beim Auf- und Zuklappen um rund ein Pixel
   springen.

   Der Antworttext ist der eigentliche Grund, warum die Reparatur der acht
   Variablen allein nicht gereicht hätte: Nicht nur der Titel des geöffneten
   Eintrags steht hart auf Weiß, sondern der ganze Antworttext. Und die
   Fläche darunter kommt gar nicht von --secondary-color, sondern von der
   spezifischeren Regel `.et_pb_accordion_item_N_tb_body.et_pb_toggle`
   (1,4,0) mit --light-background — die Vorlage schlägt sich hier selbst.
   ------------------------------------------------------------------------ */

body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle_open,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle_close {
	margin: 0 !important;
}

body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title {
	line-height: 1.35 !important;
}

body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle_close .et_pb_toggle_title {
	color: #666666 !important;
}

body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title,
body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title:hover {
	color: #2ad2c9 !important;
}

body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item .et_pb_toggle_content {
	color: #555555 !important;
}

@media (prefers-reduced-motion: reduce) {
	:where(.home, .page-id-4742) .et_pb_accordion .et_pb_toggle_title,
	body.single-product #et-boc .et-l .et_pb_accordion .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title,
	body.parent-pageid-53 .et_pb_column .et_pb_module.et_pb_toggle .et_pb_toggle_title {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Werbespot-Videos auf den Produktseiten (E2.2)
   -------------------------------------------------------------------------
   Markup steht im ACF-Feld `produkt_werbespots` (heute nur beim
   Sprühpflaster gefüllt) und gehört Spur 2. Hier liegt nur die Optik.

   Kein Media Query, sondern flex-basis: Der Umbruch soll sich nach der
   BREITE DES CONTAINERS richten, nicht nach der des Fensters. Zwei Kacheln
   à 335 px plus 30 px Abstand ergeben 700 px — darüber stehen die Videos
   nebeneinander, darunter untereinander. Das bleibt richtig, wenn das Modul
   später in einer schmaleren Spalte landet; ein `@media (min-width:700px)`
   wüsste davon nichts und würde dort zwei gequetschte Videos nebeneinander
   stellen.

   `align-items: stretch` (Vorgabe) gibt beiden Kacheln dieselbe Höhe. Videos
   haben von Haus aus `object-fit: contain`, das Bild wird dabei also nicht
   verzerrt, sondern höchstens oben/unten gefüllt — deshalb der schwarze
   Grund, damit ein solcher Rand wie Absicht aussieht statt wie ein Loch.

   Zu den !important: Sie sitzen genau auf den Eigenschaften, die das
   ACF-Feld heute noch als Inline-Style mitbringt
   (`display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center` am
   Container, `flex:1 1 320px; max-width:100%; border-radius:4px` an den
   Videos). Inline schlägt jeden Selektor — ohne !important würde diese
   Klasse erst wirken, nachdem Spur 2 das Feld umgestellt hat. Danach sind
   die !important wirkungslos, aber unschädlich; die Klasse greift also in
   beiden Zuständen. Nichts hier hängt an einem Inline-Style, der bleiben
   müsste.
   ------------------------------------------------------------------------- */

.flint-produkt-videos {
	/* 30px = --flint-rg-gap des Ratgeber-Rasters; die Produktkacheln liegen
	   mit 28px praktisch gleichauf. Ein eigener Wert wäre ein dritter
	   Abstand im selben Seitenraster. */
	--flint-video-gap: 30px;
	--flint-video-basis: 335px;

	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--flint-video-gap) !important;
	justify-content: center !important;
	align-items: stretch;
}

/* Divi schickt den Feldwert durch `wpautop`; aus dem Zeilenumbruch zwischen
   den beiden <video>-Tags wird dabei ein <br />. Im Flex-Container zählt das
   als vollwertiges Item und schiebt das zweite Video in die nächste Zeile —
   genau das Bild, das der Kunde gemeldet hat. Spur 2 räumt die Quelle auf
   (E2.1); bis dahin fängt diese Zeile es ab, und sie schadet auch danach
   nicht. */
.flint-produkt-videos br {
	display: none;
}

.flint-produkt-videos video {
	flex: 1 1 var(--flint-video-basis) !important;
	/* Ohne min-width:0 kann ein Flex-Item nicht unter seine intrinsische
	   Breite schrumpfen — ein 1280px breites Video würde den Container
	   sprengen, statt sich einzufügen. */
	min-width: 0;
	max-width: 100% !important;
	height: auto;
	/* eckig wie Produktkacheln und Ratgeber-Karten (--flint-*-radius: 0) */
	border-radius: 0 !important;
	background-color: #000000;
	display: block;
}

/* -------------------------------------------------------------------------
   Ratgeber-Übersicht — zwei Varianten
   -------------------------------------------------------------------------
   Markup: [flint_ratgeber_grid] bzw. [flint_ratgeber_grid variante="karte"]
   (siehe inc/ratgeber-grid.php).

   „wabe"  – Wabenstruktur. Die Reihen wechseln 3 / 2 / 3 / 2; weil beide
             Reihentypen zentriert sind, sitzen die Zweier-Kacheln exakt in
             den Lücken der Dreier-Reihe. Der Waben-Rhythmus entsteht also aus
             der Anordnung, nicht aus negativen Margins – das bleibt stabil,
             wenn Ratgeber dazukommen, und lässt der Beschriftung Platz.
             Hexagon-Form und die zweistufige Rahmen-/Flächen-Optik sind
             bewusst dieselben wie bei den Produktkacheln im Mega-Menü
             (.flint-mm-product), damit die Bildsprache zusammenpasst.

   „karte" – aufgeräumte Karte: Bild, Titel, dezenter Textlink. Ersetzt die
             heutigen 10 „mehr erfahren"-Buttons durch eine ruhigere Karte.

   Radius über --flint-rg-radius zentral schaltbar. Steht auf 0 (eckig),
   passend zur Richtung „Google-Badge eckig statt abgerundet" – auf 12px
   setzen, falls doch abgerundet gewünscht ist.
   ------------------------------------------------------------------------- */

.flint-rg {
	--flint-rg-cell: 250px;
	--flint-rg-gap: 30px;
	--flint-rg-radius: 0px;
	--flint-rg-media: 16 / 10;
	--flint-rg-akzent: #2ad2c9;
	--flint-rg-rahmen: #e4e4e4;
	--flint-rg-flaeche: #f6f6f6;
	--flint-rg-text: #333333;
}

/* Achtung Bildmaterial: Alle heutigen Ratgeber-Motive sind Header-Banner
   (2,5:1 bis 4,2:1). Bei object-fit:cover bleibt davon sichtbar:
     Hexagon (1,16:1)   ->  nur 28–46 % der Bildbreite
     Karte   (16:10)    ->  38–64 %
   Solange keine eigenen, eher quadratischen Kachelmotive als Beitragsbild
   gepflegt sind, ist --flint-rg-media der Hebel: z. B. „21 / 9" schneidet die
   vorhandenen Banner deutlich schonender an. */

.flint-rg a,
.flint-rg a:hover {
	text-decoration: none;
}

/* --- Variante „wabe" ---------------------------------------------------- */

.flint-rg--wabe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--flint-rg-gap);
}

.flint-rg--wabe .flint-rg__row {
	display: flex;
	justify-content: center;
	gap: var(--flint-rg-gap);
}

.flint-rg__cell {
	display: block;
	width: var(--flint-rg-cell);
	color: var(--flint-rg-text);
}

/* Hexagon: äußere Fläche = Rahmen, innere = Bildmaske (wie im Mega-Menü) */
.flint-rg__hex {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 0.866;
	background-color: var(--flint-rg-rahmen);
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	transition: background-color 0.2s ease;
}

.flint-rg__hex::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--flint-rg-flaeche);
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	transform: scale(0.975);
	transform-origin: center;
	z-index: 1;
}

.flint-rg__hex img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	transform: scale(0.95);
	transform-origin: center;
	z-index: 2;
	transition: transform 0.25s ease;
}

.flint-rg__label {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	transition: color 0.2s ease;
}

.flint-rg__cell:hover .flint-rg__hex {
	background-color: var(--flint-rg-akzent);
}

.flint-rg__cell:hover .flint-rg__hex img {
	transform: scale(0.99);
}

.flint-rg__cell:hover .flint-rg__label {
	color: var(--flint-rg-akzent);
}

.flint-rg__cell:focus-visible .flint-rg__hex {
	outline: 3px solid var(--flint-rg-akzent);
	outline-offset: 4px;
}

/* Ab Tablet Reihen auflösen: die Row-Container verschwinden per
   display:contents, die Kacheln werden direkt zu Grid-Items. */
@media only screen and (max-width: 980px) {
	.flint-rg--wabe {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: center;
	}

	.flint-rg--wabe .flint-rg__row {
		display: contents;
	}

	.flint-rg__cell {
		width: 100%;
		max-width: var(--flint-rg-cell);
	}
}

@media only screen and (max-width: 600px) {
	.flint-rg--wabe {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Variante „karte" --------------------------------------------------- */

.flint-rg--karte {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--flint-rg-gap);
}

.flint-rg__card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--flint-rg-rahmen);
	border-radius: var(--flint-rg-radius);
	overflow: hidden;
	color: var(--flint-rg-text);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.flint-rg__media {
	display: block;
	aspect-ratio: var(--flint-rg-media);
	overflow: hidden;
	background: var(--flint-rg-flaeche);
}

.flint-rg__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.flint-rg__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
}

.flint-rg__title {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.25;
}

.flint-rg__more {
	font-size: 15px;
	font-weight: 600;
	color: var(--flint-rg-akzent);
}

.flint-rg__more::after {
	content: " →";
	display: inline-block;
	transition: transform 0.2s ease;
}

.flint-rg__card:hover {
	transform: translateY(-4px);
	border-color: var(--flint-rg-akzent);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.flint-rg__card:hover .flint-rg__media img {
	transform: scale(1.05);
}

.flint-rg__card:hover .flint-rg__more::after {
	transform: translateX(4px);
}

.flint-rg__card:focus-visible {
	outline: 3px solid var(--flint-rg-akzent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.flint-rg__hex,
	.flint-rg__hex img,
	.flint-rg__label,
	.flint-rg__card,
	.flint-rg__media img,
	.flint-rg__more::after {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Mega-Menü: Produkte als Namensliste statt Bildkacheln
   -------------------------------------------------------------------------
   Vorher sechs Hexagon-Kacheln mit Packshot. Jetzt eine ruhige Namensliste
   nach dem Vorbild des efasit-Menüs: kleine graue Rubriküberschrift, feine
   Trennlinie darunter, Produktnamen als schlichte Textlinks. Farben bleiben
   flint (Türkis #2ad2c9 als Hover, Text #333).

   Der türkise Balken über dem Panel existiert bereits als
   `border-top: 3px solid var(--gcid-primary-color)` am Container – das
   Gegenstück zur grünen Linie in der Vorlage.

   Bis 2026-08-19 floss die Liste über `column-count` spaltenweise. Die Kundin
   hat das zurückgewiesen: „die Unterteilung macht wenig Sinn, man denkt sonst
   es wären drei Blöcke." Sie hat zwei benannte Gruppen vorgegeben (Wunden,
   Verletzungen) mit untereinander stehenden Einträgen — die Spalten sind jetzt
   die Gruppen, nicht der Textfluss. Zuordnung und Reihenfolge kommen aus den
   Produktkategorien bzw. der Hauptnavigation, nicht von hier.

   Das Markup liegt im Header-Layout 4230, die übrige Mega-Menü-CSS im
   WPCode-Snippet 4289. Die dortigen `.flint-mm-product`-Regeln (Hexagon-
   Kacheln) sind seitdem ungenutzt und können weg.
   ------------------------------------------------------------------------- */

/* Seit 2026-08-21 eine Spalte je Gruppe (TCK-0018/TCK-0017): die Kundin hat
   die freilaufenden Textspalten zurückgewiesen, weil sie wie drei Blöcke ohne
   Ordnung wirken. `auto-fit` statt einer festen Zahl — kommt eine dritte
   Gruppe hinzu (oder ein Produkt ohne Kategorie), entsteht ihre Spalte von
   selbst, und leere Spuren fallen weg. */
.flint-mega-menu-container .flint-mega-menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	/* Zeilenabstand über das Grid, nicht über einen Rand am zweiten Element:
	   ein Geschwister-Rand hätte die zweite Gruppe auch dann nach unten
	   geschoben, wenn beide nebeneinander stehen — die Rubriküberschriften
	   standen dadurch um 8px versetzt. */
	gap: 24px 40px;
	align-items: start;
}

.flint-mm-liste-titel {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e4e4e4;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: #888888;
}

/* !important nötig: Divis Kunden-CSS setzt `.et-l--header ul` auf
   list-style: disc mit Einzug — das würde hier Aufzählungspunkte erzeugen. */
.flint-mm-liste {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.flint-mm-liste li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ⚠️ `body #et-boc .et-l` davor, und das ist gemessen, nicht vorsorglich:
   Divi gibt die globale Linkfarbe je nach Seite unterschiedlich aus — auf
   /produkt/flint-med-hautrisse-kleber/ als `a` (0,0,1), auf
   /produkt/flint-med-spruehpflaster/ als `a, .et-db #et-boc .et-l a`, und der
   zweite Selektor dieser Liste wiegt 1,2,1. Ohne Vorspann verliert die Regel
   hier deshalb auf der einen Seite und gewinnt auf der anderen — dasselbe
   Menü, einmal magenta, einmal dunkelgrau (gemeldet am 14.09.2026).

   Welche Fassung Divi schreibt, hängt am Zustand seiner erzeugten Dateien.
   Die Farbe kann also bei jeder Cache-Leerung umspringen; das ist der Grund,
   warum es „manchmal" so aussah. Mit Vorspann kommt die Regel auf 1,2,2 und
   gewinnt in beiden Fällen.

   Die Regel im `prefers-reduced-motion`-Block weiter unten bleibt ohne
   Vorspann: sie setzt nur `transition`, und dafür gibt es keine
   konkurrierende Divi-Regel. */
body #et-boc .et-l .flint-mm-liste a {
	display: block;
	padding: 11px 0;
	font-size: 15px;
	line-height: 1.35;
	color: #333333;
	text-decoration: none;
	transition: color 0.2s ease;
}

body #et-boc .et-l .flint-mm-liste a:hover,
body #et-boc .et-l .flint-mm-liste a:focus-visible {
	color: #2ad2c9;
}

@media (prefers-reduced-motion: reduce) {
	.flint-mm-liste a {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Header über den Seiteninhalt heben
   -------------------------------------------------------------------------
   Symptom: Das aufgeklappte Ratgeber-Untermenü verschwand hinter dem Hero.

   Ursache ist eine Divi-Eigenheit: Sektionen mit Trenner bekommen
   `.section_has_divider .et_pb_row { z-index: 5 }`. Der Theme-Builder-Header
   liegt dagegen nur auf `header .et_builder_inner_content { z-index: 2 }` –
   der Seiteninhalt malt also über den Header. Das Mega-Menü-Snippet setzt
   zwar `position: relative` auf den Header, aber keinen z-index, deshalb
   greift dort auch nichts.

   Auf der Startseite fiel es nicht auf, weil deren Divi-5-Hero die
   `section_has_divider`-Regel gar nicht bekommt.

   1000 liegt weit über allem, was Divi im Seiteninhalt vergibt (max. 11).
   Mega-Menü (999999) und mobiles Menü (9999) liegen INNERHALB des Headers
   und bleiben davon unberührt.
   ------------------------------------------------------------------------- */

header.et-l--header {
	position: relative;
	z-index: 1000;
}

/* -------------------------------------------------------------------------
   Hero-Dekoration (Hexagon-Cluster + Linien-Anschnitt)
   -------------------------------------------------------------------------
   Auf der Startseite steckte die Positionierung im Modul-CSS des jeweiligen
   Divi-Moduls. Damit derselbe Hero auch auf anderen Seiten aufgebaut werden
   kann (Ratgeber), liegen die Regeln hier und werden über `module_class`
   zugewiesen – bei Divi 4 wie bei Divi 5.
   ------------------------------------------------------------------------- */

.flint-hero {
	position: relative;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Bildausschnitt und Höhe des Startseiten-Heros
   -------------------------------------------------------------------------
   Das Motiv (Kind und Klettererin) sitzt in den linken 28 % von
   flint-hero.webp (1920 × 551, also 3,48 : 1); die restlichen 72 % sind
   reiner Farbverlauf. Divis Standard `background-position: center` schneidet
   damit zuerst genau das Motiv weg.

   Nachgerechnet für ein Handy: 390 px breit, 600 px hoch, `cover` — das Bild
   wird auf 600 × 3,48 = 2090 px Breite skaliert, sichtbar bleiben 390 px aus
   der Mitte. Das Motiv liegt zwangsläufig außerhalb, übrig bleibt die türkise
   Fläche, die die Kundin am 19.08.2026 beanstandet hat.

   Links unten verankert wird nur weggeschnitten, was ohnehin leer ist — und
   unten, weil die Figuren an der Bildunterkante stehen.

   Die Mindesthöhe galt für jeden Bildschirm: 600 px auch auf einem Handy, also
   gut zwei Drittel der Bildschirmhöhe für eine Motivfläche vor dem ersten
   Inhalt. Sie staffelt jetzt mit.

   `.et_pb_section` mit dazu, weil Divi die Mindesthöhe über die generierte
   Klasse `.et_pb_section_0` ausgibt — gleiche Spezifität, und dann entscheidet
   die Ladereihenfolge.
   ------------------------------------------------------------------------- */

.et_pb_section.flint-hero {
	background-position: left bottom;
}

@media only screen and (max-width: 980px) {
	.et_pb_section.flint-hero {
		min-height: 480px;
	}
}

@media only screen and (max-width: 600px) {
	.et_pb_section.flint-hero {
		min-height: 400px;
	}
}

/* -------------------------------------------------------------------------
   Lesbarkeit der Überschrift auf schmalen Bildschirmen
   -------------------------------------------------------------------------
   Am Rechner steht die weiße Überschrift bewusst in der leeren Verlaufsfläche
   rechts neben dem Motiv — das ist die Anlage des Bildes. Auf einem Handy
   passen nur die linken ~28 % der Bildbreite in den Ausschnitt, und das ist
   genau das Motiv: Helm, Gesicht und weißes Shirt. Weiße Schrift darauf ist
   nicht lesbar (WCGA 2.2 AA verlangt 4,5:1).

   Deshalb eine Abdunklung in der CI-Farbe statt in Grau: das Motiv bleibt
   erkennbar, die Farbstimmung bleibt in der Marke, und die Schrift bekommt
   ihren Kontrast zurück. Nur unterhalb der Umbruchbreite, am Rechner ist sie
   unnötig.

   ⚠️ 14.09.2026, Kundentermin: die Farbe ist entschieden und nicht mehr das
   Türkis. Kathrin Lindenmayr: „Kannst du dieses dunkle Overlay in Flintfarbe
   machen? Also in dem Blau dann […] das Grün, was jetzt da drin liegt, das
   wäre eher so ein Kyberg-Grün, aber das haben wir bei flint nicht."
   Neu ist deshalb #072355 — dasselbe Blau, das --primary-color trägt.

   Die unten gemessenen Deckkraftwerte bleiben gültig und sind jetzt sogar zu
   pessimistisch: #072355 hat eine relative Leuchtdichte von 0,019 gegenüber
   0,055 bei #004a4e, deckt bei gleicher Deckkraft also stärker ab. Der
   Kontrast der weißen Schrift kann dadurch nur steigen.

   Die Deckkraft ist gemessen, nicht geschätzt. Nachgebildeter Ausschnitt samt
   Verlauf im Canvas, Luminanz über der Textfläche, am 2026-08-21:

     Deckkraft 0,35 -> schlechteste Stelle 2,16:1, 49,9 % der Fläche unter 4,5:1
     Deckkraft 0,55 -> 3,43:1, 22 %
     Deckkraft 0,62 -> 4,11:1, 0,7 %
     Deckkraft 0,68 -> 4,80:1, 0 %

   Das ist ein Kompromiss und als solcher zu benennen: bei 0,68 ist das Motiv
   sichtbar, aber deutlich gedämpft. Der Grund liegt im Bild, nicht im CSS —
   1920 × 551 mit dem Motiv links und einer Überschrift, die mittig darüber
   steht. Auf 390 px lässt sich beides nicht gleichzeitig haben.

   Sauber lösen kann das nur eine Entwurfsentscheidung: Motiv als Band unter
   den Text statt dahinter, oder ein eigener Bildausschnitt fürs Handy. Beides
   ist offene Frage in TCK-0014 und nicht stillschweigend zu bauen.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
	.et_pb_section.flint-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: linear-gradient(
			to top,
			rgb(var(--flint-blau) / 0.88),
			rgb(var(--flint-blau) / 0.68)
		);
		pointer-events: none;
	}

}

.flint-hero-hex {
	position: absolute;
	right: -4rem;
	transform: scale(1.3);
}

@media only screen and (max-width: 1700px) {
	.flint-hero-hex {
		transform: scale(1);
		right: -10rem;
	}
}

@media only screen and (max-width: 1350px) {
	.flint-hero-hex {
		transform: scale(0.85);
		right: -20rem;
	}
}

/* Unter 1100px wird der Cluster zur Störung statt zur Zierde */
/* @media only screen and (max-width: 1100px) {
	.flint-hero-hex {
		display: none !important;
	}
} */

/* -------------------------------------------------------------------------
   Sektionskante (".flint-kante")
   -------------------------------------------------------------------------
   Der abgeknickte Übergang zwischen zwei Sektionen: links eine flache, rechts
   eine hohe Fläche, dazwischen eine Schräge.

   Die Form braucht zwei Maße, die sich NICHT gemeinsam skalieren lassen — und
   genau daran ist die Vorgängerfassung gescheitert:

     die Flächenhöhen sind RELATIV (Anteil der Kantenhöhe),
     die Laufweite der Schräge ist ABSOLUT (sonst kippt der Winkel).

   Gebaut war das als vier Elemente: zwei Kästen mit Farbverlauf für die
   Flächen, dazwischen ein 1200px-Fenster mit einem SVG für den Knick. Ein SVG
   mit preserveAspectRatio="none" skaliert aber beide Achsen vollständig
   relativ. Unter 1200px Schirmbreite schrumpfte das Fenster mit, und der Knick
   nahm seine 2% der Breite mit: bei 390px blieben 7,8px Laufweite auf 48px
   Höhenunterschied — eine senkrechte Stufe statt einer Kante (gemessen am
   ausgelieferten Stand, 14.09.2026).

   clip-path: polygon() darf Einheiten mischen. Damit stehen beide Maße im
   selben Ausdruck und die Form bleibt von 320px bis 2560px dieselbe.

   Ein Element, keine Kinder, keine Grafik. Die Farbe ist ein background —
   damit ist --kante-farbe zum ersten Mal wirklich der eine Schalter, den der
   alte Kommentar versprochen hat (dort musste zusätzlich das inline-`fill`
   des SVG mitgezogen werden, sonst blieb die Fläche weiß).
   ------------------------------------------------------------------------- */

.flint-kante {
	--kante-farbe: #fff;
	--kante-hoehe: 80px;

	/* Der Knick sitzt am Rechner 288px rechts der Mitte. Unter 1440px läge er
	   damit irgendwann außerhalb des Bildes (bei 390px rechnerisch auf 483px),
	   deshalb wandert er ab dort prozentual mit.

	   `min()` statt einer Media Query, weil die beiden Terme sich bei genau
	   1440px schneiden: 0,5W + 288 = 0,7W ⇔ W = 1440. Der Übergang ist damit
	   stetig — an keiner Breite springt die Form. Über 1440px gilt weiter der
	   absolute Abstand (der abgestimmte Desktop-Stand), darunter die 70%. */
	--kante-knick: min(calc(50% + 288px), 70%);

	/* Laufweite und Höhe bleiben absolut — daran hängt der Winkel der Schräge,
	   und DER ist das Formmerkmal: 63,4° auf jeder Breite, vom Handy bis zum
	   großen Schirm (entschieden 14.09.2026). Wer hier etwas ändert, ändert die
	   Handschrift, nicht die Größe. */
	--kante-lauf: 24px;               /* Laufweite der Schräge — absolut */
	--kante-flach: 80%;               /* Oberkante der flachen Seite */
	--kante-hoch: 20%;                /* Oberkante der hohen Seite */

	position: absolute;
	inset-inline: 0;
	z-index: 2;
	block-size: var(--kante-hoehe);
	background: var(--kante-farbe);
	pointer-events: none;
	clip-path: polygon(
		0 100%,
		0 var(--kante-flach),
		calc(var(--kante-knick) - var(--kante-lauf) / 2) var(--kante-flach),
		calc(var(--kante-knick) + var(--kante-lauf) / 2) var(--kante-hoch),
		100% var(--kante-hoch),
		100% 100%
	);
}

/* ⚠️ -1px, nicht 0: die Sektion endet fast nie auf einem ganzen Pixel (der
   Kopfbereich darüber ist 151,39px hoch, das Bild skaliert mit der Breite).
   Auf der angeschnittenen Pixelzeile liegen dann Bild und Kante beide nur
   anteilig — das Motiv scheint als Haarlinie über die volle Breite durch.
   Gemessen 24.09.2026 auf /shop/ bei 1900px: eine Zeile mit Farbwert 191 =
   ¾ Weiß über dem fast schwarzen Bildrand; bei 1440px keine — daher
   „manchmal". Ein Pixel Überstand in die Nachbarsektion deckt die Zeile ab;
   die Nachbarsektion trägt ohnehin die Kantenfarbe. */
.flint-kante--unten {
	inset-block-end: -1px;
}

/* Gespiegelt statt zweiter Pfad: eine Form, zwei Einbaulagen. `rotate` als
   eigene Eigenschaft, damit ein späteres `transform` am selben Element sie
   nicht versehentlich überschreibt. */
.flint-kante--oben {
	inset-block-start: -1px;               /* derselbe Grund wie bei --unten */
	rotate: 180deg;
}

/* -------------------------------------------------------------------------
   Verankerung der Kante
   -------------------------------------------------------------------------
   `inset-inline: 0` richtet die Kante am nächsten positionierten Vorfahren
   aus — und das muss die SEKTION sein. Divi setzt Reihe und Spalte aber auf
   `position: relative`, und die Reihe, die nur die Kante trägt, bringt
   zusätzlich Innen- und Außenabstand mit.

   Beides wird hier zurückgenommen, statt es an der Kante gegenzurechnen.
   Damit entfallen ersatzlos:

     - `width: 100vw` + `left: 50%` + `translateX(-50%)` (der Ausbruch aus der
       Reihe) und das `overflow: hidden`, das dessen Overflow einfangen musste;
     - die Sonderregel, die denselben Reihen ihren seitlichen Rand wieder
       abnahm, weil die 50% sonst mit der gewachsenen Elternbreite rechneten —
       samt der `:not()`-Kette, die dort nur der Spezifität wegen stand.

   Die Reihe wird über ihren Inhalt erkannt, nicht über eine Klasse: dann gilt
   die Regel für jeden Einbauort, auch für den nächsten.
   ------------------------------------------------------------------------- */

.et_pb_section:has(.flint-kante) {
	position: relative;
}

:is(.et_pb_row, .et_pb_column, .et_pb_module, .et_pb_code_inner):has(.flint-kante) {
	position: static !important;
	block-size: 0;
	min-block-size: 0;
	margin: 0 !important;
	padding: 0 !important;
}

/* -------------------------------------------------------------------------
   Lokale Web-Fonts (selbst-gehostet, DSGVO-konform – kein Google-CDN).
   Ersetzt den frueheren @font-face-Block aus Divi Custom CSS, der auf den
   fluechtigen ../et-cache/fonts/ zeigte und daher 404 lieferte.
   Dateien: assets/fonts/ (woff2 + woff). Genutzt: Open Sans (Divi
   heading/body) + Roboto Condensed (body-Override). Montserrat als Reserve.
   Open Sans Condensed entfaellt (ungenutzt + von Google eingestellt).
   ------------------------------------------------------------------------- */

/* Open Sans */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/open-sans-v44-latin-300.woff2') format('woff2'),
	     url('assets/fonts/open-sans-v44-latin-300.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'),
	     url('assets/fonts/open-sans-v44-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/open-sans-v44-latin-500.woff2') format('woff2'),
	     url('assets/fonts/open-sans-v44-latin-500.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/open-sans-v44-latin-600.woff2') format('woff2'),
	     url('assets/fonts/open-sans-v44-latin-600.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/open-sans-v44-latin-700.woff2') format('woff2'),
	     url('assets/fonts/open-sans-v44-latin-700.woff') format('woff');
}

/* Roboto Condensed (Original-Mapping: 300 nutzt die Regular-Glyphen) */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/roboto-condensed-v31-latin-regular.woff2') format('woff2'),
	     url('assets/fonts/roboto-condensed-v31-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/roboto-condensed-v31-latin-700.woff2') format('woff2'),
	     url('assets/fonts/roboto-condensed-v31-latin-700.woff') format('woff');
}

/* -------------------------------------------------------------------------
   "Open Sans Condensed" -> Roboto Condensed (Alias)
   -------------------------------------------------------------------------
   Der alte Divi-Custom-CSS-Block deklarierte auch Open Sans Condensed, mit
   Pfaden nach ../fonts/… die 404 liefern. Die Familie wird aber weiterhin
   benutzt: Kontaktseite (Überschrift .et_pb_text_0 h1) und die Legacy-
   Produktseiten (Button). Bisher fiel das dort still auf die System-Sans
   zurück – sichtbar, aber nie aufgefallen.

   Open Sans Condensed hat Google eingestellt; die passende Marken-Alternative
   ist Roboto Condensed, das ohnehin die Grundschrift der Seite ist. Statt in
   18 Beiträgen die Schriftangabe zu ändern, zeigt die Familie hier auf die
   lokalen Roboto-Condensed-Dateien.

   Rückgängig machen = diesen Block löschen; dann greift wieder der
   System-Fallback.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: 'Open Sans Condensed';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/roboto-condensed-v31-latin-regular.woff2') format('woff2'),
	     url('assets/fonts/roboto-condensed-v31-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/roboto-condensed-v31-latin-700.woff2') format('woff2'),
	     url('assets/fonts/roboto-condensed-v31-latin-700.woff') format('woff');
}

/* Montserrat */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'),
	     url('assets/fonts/montserrat-v31-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/montserrat-v31-latin-700.woff2') format('woff2'),
	     url('assets/fonts/montserrat-v31-latin-700.woff') format('woff');
}

/* -------------------------------------------------------------------------
   „Noch Fragen?"-Box der Produkt-FAQ als Wabe (2026-07-30)
   -------------------------------------------------------------------------
   Auf Ansage: der farbige Kasten neben der FAQ-Liste bekommt dieselbe
   Sechseckform wie die Ratgeber-Kacheln und das Mega-Menü. Gleiche Geometrie,
   damit sie sich nicht um ein paar Prozent unterscheidet:
   `polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)` bei
   `aspect-ratio: 1 / 0.866`.

   Angesteuert über `.et_pb_code.colored-bg` statt über die Modulnummer:
   Divi nummeriert die Module beim Speichern des Layouts neu durch — aus
   `et_pb_code_12_tb_body` wurde durch die drei neuen Code-Module in E6 schon
   `et_pb_code_18_tb_body`. Die Klasse `colored-bg` kommt im Layout genau
   einmal an einem Code-Modul vor (geprüft), an der Nummer würde die Regel beim
   nächsten Umbau stillschweigend abreißen.

   Die Fläche wandert vom Modul auf `.contact-container`: Das Modul trägt heute
   den Hintergrund, und ein Zuschnitt auf dem Kind ließe dahinter das
   ursprüngliche Rechteck stehen.

   Zur Innenabmessung: Bei dieser Form ist das Sechseck auf halber Höhe voll
   breit und an Ober- und Unterkante nur halb so breit. Ein Textblock von 60 %
   der Höhe passt deshalb bis etwa 70 % der Breite — daher `padding: 20% 17%`.
   Der Text ist hier etwas kleiner gesetzt als in der Rechteckfassung, sonst
   wird die Wabe unnötig groß.

   Unter 980 px wird die Spalte volle Breite; eine Wabe wäre dort riesig und
   der Text stünde in einem schmalen Schlauch. Ab da also wieder Rechteck.
   ------------------------------------------------------------------------- */

body.single-product .et_pb_code.colored-bg {
	/* Hintergrund und Zuschnitt übernimmt der Container darunter */
	background-color: transparent !important;
	background-image: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

body.single-product .et_pb_code.colored-bg .contact-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	aspect-ratio: 1 / 0.866;
	padding: 20% 17% !important;
	/* 14.09.2026, Kundentermin: dieselbe Farbe wie das Overlay der
	   Startseiten-Überschrift, statt des türkis-blauen Verlaufs. Weiß auf
	   #072355 sind 15,2:1 — der Verlauf begann bei 5,99:1. */
	background-color: rgb(var(--flint-blau));
	background-image: none;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Divis Wellen-Trenner am oberen Rand ergibt in einer Wabe keinen Sinn */
body.single-product .et_pb_code.colored-bg .custom_top_inside_divider {
	display: none !important;
}

body.single-product .et_pb_code.colored-bg .contact-container h3 {
	margin: 0 0 0.5rem;
	font-size: 22px;
	line-height: 1.25;
}

body.single-product .et_pb_code.colored-bg .contact-container p {
	margin: 0;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* Vorspann aus demselben Grund wie beim Mega-Menü weiter oben: ohne ihn steht
   die Adresse auf der einen Produktseite in Magenta auf Dunkelblau und auf der
   nächsten in Weiß. */
body.single-product #et-boc .et-l .et_pb_code.colored-bg .contact-container a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 980px) {
	body.single-product .et_pb_code.colored-bg .contact-container {
		aspect-ratio: auto;
		padding: 2.4rem 2rem !important;
		clip-path: none;
	}
}


/* -------------------------------------------------------------------------
   Absende-Button des Bewertungsformulars (2026-07-30)
   -------------------------------------------------------------------------
   Die Beschriftung war auf der magentafarbenen Fläche kaum zu lesen. Ursache
   ist eine Kette aus zwei Regeln der Site-Reviews-Divi-Integration:

     .et_pb_bg_layout_light .glsr-button_wrapper { color: var(--glsr-divi-color) }
     #page-container .glsr-divi .glsr-button      { color: inherit }

   und `--glsr-divi-color: var(--gcid-primary-color, #2ea3f2)`. Das Plugin
   nimmt also das Marken-Türkis #35d4cc als Schriftfarbe an — gedacht für einen
   hellen Grund. Der Button steht hier aber auf dem Magenta der Marke:
   Türkis auf #db0a5b sind **2,7:1**, weit unter der Schwelle von 4,5:1.
   Weiß auf demselben Grund sind **5,0:1**.

   Spezifität: die Plugin-Regel liegt bei (1,2,0). Diese hier kommt auf
   (1,3,2) — dieselbe ID, eine Klasse und ein Element mehr. Kein `!important`
   nötig, weil das Plugin ebenfalls keins setzt.
   ------------------------------------------------------------------------- */

body.single-product #page-container .glsr-divi button.glsr-button,
body.single-product #page-container .glsr-divi button.glsr-button:hover {
	color: #ffffff;
}

/* -------------------------------------------------------------------------
   Produktbeschreibung: Intro plus Themen-Karten (2026-07-31)
   -------------------------------------------------------------------------
   Umsetzung der abgestimmten Entwürfe 2a/2b. Aufbau: links das Intro (erste
   Überschrift mit ihren Absätzen), darunter je Thema eine helle Karte.

   ⚠️ Der Hintergrund der Sektion wird NICHT angefasst — ausdrücklich so
   gewünscht. Das Intro bleibt deshalb in weißer Schrift auf dem vorhandenen
   Motiv; lesbar wird der eigentliche Fließtext dadurch, dass er in die hellen
   Karten wandert (dunkel auf Weiß, rund 12:1).

   Die Kartenzahl schwankt je Produkt zwischen 2 und 5 — sie steckt als Zahl
   in der Klasse, damit jede Anzahl ihr eigenes Raster bekommt statt eines
   Kompromisses für alle.
   ------------------------------------------------------------------------- */

body.single-product .flint-pb {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	text-align: left;
}

/* Intro auf gut 60 % — eine volle Sektionsbreite ergäbe bei 300–600 Zeichen
   Zeilen von über 120 Anschlägen. */
body.single-product .flint-pb__intro {
	max-width: 62%;
	margin-bottom: 2.8rem;
}

body.single-product .flint-pb__intro h2 {
	text-align: left !important;
	margin-bottom: 1rem;
}

body.single-product .flint-pb__intro p:last-child {
	margin-bottom: 0;
}

/* --- Kartenraster ------------------------------------------------------ */

body.single-product .flint-pb__karten {
	display: grid;
	gap: 24px;
	/* Rückfall für jede nicht eigens behandelte Anzahl. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

body.single-product .flint-pb__karten--2 { grid-template-columns: repeat(2, 1fr); }
body.single-product .flint-pb__karten--3 { grid-template-columns: repeat(3, 1fr); }
body.single-product .flint-pb__karten--4 { grid-template-columns: repeat(2, 1fr); }

/* 3 + 2 für das Sprühpflaster (auf Ansage). Sechs Spalten als Hilfsraster:
   die ersten drei Karten nehmen je zwei Spalten, die letzten beiden je drei.
   Damit füllen BEIDE Reihen die volle Breite — fünf gleich breite Karten
   ließen die zweite Reihe sonst linksbündig und zu schmal stehen. */
body.single-product .flint-pb__karten--5 {
	grid-template-columns: repeat(6, 1fr);
}

body.single-product .flint-pb__karten--5 > .flint-pb__karte {
	grid-column: span 2;
}

body.single-product .flint-pb__karten--5 > .flint-pb__karte:nth-child(4),
body.single-product .flint-pb__karten--5 > .flint-pb__karte:nth-child(5) {
	grid-column: span 3;
}

/* --- Einzelne Karte ---------------------------------------------------- */

body.single-product .flint-pb__karte {
	background-color: #ffffff;
	padding: 1.9rem 1.7rem;
	/* Eckig auf Ansage (Michael, 2026-08-14: „Die Kacheln würde ich nicht
	   abrunden"). Vorher 4px. Damit sind alle Kartenflächen der Seite auf
	   demselben Stand: Produktkacheln (--flint-pk-radius) und Ratgeber-Karten
	   (--flint-rg-radius) stehen ebenfalls auf 0, die Videos auch.
	   FAQ-Aufklapper und Bewertungs-Box behalten ihre 12px — die kommen aus
	   Divi bzw. Site Reviews und waren nicht Teil der Ansage. */
	border-radius: 0;
}

/* Wabe mit Haken — gleiche Geometrie wie überall auf der Seite. */
body.single-product .flint-pb__haken {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	aspect-ratio: 1 / 0.866;
	margin-bottom: 1.1rem;
	background-color: #35d4cc;
	color: #ffffff;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

body.single-product .flint-pb__titel {
	margin: 0 0 0.7rem;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	font-size: 18px !important;
	line-height: 1.3;
	/* Dunkelblau auf Weiß: 15,2:1. */
	color: #072355 !important;
	text-align: left !important;
}

body.single-product .flint-pb__text p,
body.single-product .flint-pb__text li {
	font-size: 15px !important;
	line-height: 1.6 !important;
	/* 9,7:1 auf Weiß. */
	color: #444444 !important;
	text-align: left !important;
}

body.single-product .flint-pb__text p:last-child,
body.single-product .flint-pb__text ul:last-child {
	margin-bottom: 0;
}

/* --- Schmalere Bildschirme --------------------------------------------- */

@media (max-width: 1100px) {
	body.single-product .flint-pb__karten--3,
	body.single-product .flint-pb__karten--5,
	body.single-product .flint-pb__karten--5 > .flint-pb__karte,
	body.single-product .flint-pb__karten--5 > .flint-pb__karte:nth-child(4),
	body.single-product .flint-pb__karten--5 > .flint-pb__karte:nth-child(5) {
		grid-template-columns: repeat(2, 1fr);
		grid-column: auto;
	}

	body.single-product .flint-pb__intro {
		max-width: 100%;
	}
}

@media (max-width: 700px) {
	body.single-product .flint-pb__karten,
	body.single-product .flint-pb__karten--2,
	body.single-product .flint-pb__karten--3,
	body.single-product .flint-pb__karten--4,
	body.single-product .flint-pb__karten--5 {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Beschreibungssektion: 1080er Raster, Hexagone über dem Text (2026-07-31)
   -------------------------------------------------------------------------
   Auf Ansage: Container 1080 px, Intro über die volle Breite, Karten 3 + 2,
   und der Hexagon-Cluster rechts ÜBER dem Text statt daneben. Das Motiv mit
   der Kletterin bleibt als Sektionshintergrund unangetastet.

   ⚠️ Die eigentliche Bremse war nicht das Raster, sondern das Textmodul:
   Divi setzt darauf `max-width: 650px !important`. Solange das steht, hat
   jede Breitenangabe im Inneren keine Wirkung — der Container kann nicht
   breiter werden als sein Modul. Deshalb wird zuerst das Modul geöffnet.

   ⚠️ Angesteuert wird über `:has()` statt über Modulnummern. Divi nummeriert
   bei jedem Layoutumbau neu durch — aus `et_pb_code_12` wurde im Lauf dieses
   Projekts schon `et_pb_code_19`. Wichtig dabei: den Hexagon-Cluster gibt es
   ZWEIMAL auf der Seite (einmal bei den Produkt-Tabs, einmal hier). Deshalb
   die zusätzliche Klammer `.et_pb_section:has(.flint-pb)` — sonst würde der
   Cluster in der Tab-Sektion mitwandern.
   ------------------------------------------------------------------------- */

/* 1. Das Textmodul auf Containerbreite öffnen (überschreibt 650px). */
body.single-product #et-boc .et-l .et_pb_text:has(.flint-pb) {
	max-width: 1080px !important;
}

/* 2. Container und Intro über die volle Breite. */
body.single-product .flint-pb {
	max-width: 1080px;
}

body.single-product .flint-pb__intro {
	max-width: 100%;
}

/* 3. Karten: erste Reihe 3 × 1fr, zweite Reihe 2 × 1fr.
      Umgesetzt über ein Sechs-Spalten-Hilfsraster — drei Karten zu je zwei
      Spalten ergeben Drittel, zwei Karten zu je drei Spalten ergeben Hälften.
      Beide Reihen füllen damit exakt die 1080 px. */
body.single-product .flint-pb__karten {
	width: 100%;
}

/* 4. Hexagon-Cluster rechts über den Text legen.

   Der Cluster ist 599 px breit. Bei 1080 px Container liegt dessen rechte
   Kante 540 px rechts der Mitte. `left: calc(50% + 61px)` setzt den Cluster
   so, dass er rund 120 px über die Containerkante hinausragt — dieselbe
   Anmutung wie in der Vorlage, wo die Waben den Textblock rechts überlappen.

   `z-index: 2` hebt ihn über den Text; ohne Angabe entschiede allein die
   Reihenfolge im Dokument, und die kann sich beim nächsten Umbau drehen. */
body.single-product #et-boc .et-l .et_pb_section:has(.flint-pb) .et_pb_code:has(.hex-cluster) {
	position: absolute !important;
	top: 2rem !important;
	right: auto !important;
	/* AUSSERHALB des Containers: 1080/2 = 540 px rechts der Mitte liegt die
	   Containerkante, dort beginnt der Cluster. Er überlappt damit weder
	   Intro noch Karten — vorher stand er auf `50% + 61px` und lag mitten
	   im Text. */
	left: calc(50% + 540px) !important;
	transform: none !important;
	z-index: 2;
	pointer-events: none;
}

/* Der Cluster ist 599 px breit und ragt über den rechten Rand hinaus.
   `clip` statt `hidden`, weil `overflow-x: hidden` die andere Achse zu
   `auto` zwingt und damit eine Bildlaufleiste erzeugen kann. */
body.single-product #et-boc .et-l .et_pb_section:has(.flint-pb) {
	overflow-x: clip;
}

/* ⚠️ Das Motiv wandert aus dem Hintergrund heraus.

   Als Hintergrundbild lag es zwangsläufig HINTER dem Text, und `cover` hat es
   je nach Sektionshöhe unterschiedlich beschnitten: Das Bild ist 1920x551
   (3,5:1), die Sektion durch Intro und Karten rund 950 px hoch — damit
   skaliert `cover` es auf etwa 3.311 px Breite und schneidet mittig je rund
   935 px weg. Die Kletterin steht ganz links und fiel komplett heraus.

   Das Motiv ist deshalb auf Ansage ganz raus. Die Fläche übernimmt ein
   Verlauf, dessen Werte aus dem Bild abgetastet sind: bei 25 % der Breite
   #86d6d4, ab 40 % flach #3cbac1, rechts #3bb9c0. Die Sektion behält damit
   ihren Farbeindruck, ohne dass ein Bild hinter dem Text liegt.

   ⚠️ 2026-08-14 auf BEIDE Motiv-Sektionen erweitert (Rückmeldung Michael:
   „Wir brauchen für diese Sektionen andere Hintergrundbilder. Vielleicht auch
   erstmal nur einen Farbverlauf."). Vorher stand hier
   `:has(.flint-pb)` — das traf nur die Beschreibungssektion, die Tab-Sektion
   darüber zeigte das Motiv weiter. Beide tragen die Klasse `flint-motiv`,
   also greift jetzt diese.

   Divi setzt das Bild mit `!important` auf `.et-db #et-boc .et-l
   .et_pb_section_13_tb_body` (1 ID + 3 Klassen). Der Selektor hier kommt auf
   1 ID + 4 Klassen und gewinnt deshalb trotz gleichem `!important`.

   Nebeneffekt, der hier erwünscht ist: Weil die Bild-Deklaration überschrieben
   wird, lädt der Browser die 1920×551-Datei gar nicht mehr — auf dem Handy
   gespartes Volumen.

   Der Startseiten-Hero nutzt dasselbe Bild, bleibt aber bewusst ein Foto
   (Entscheidung 2026-08-14): dort ist es Motiv, nicht Füllfläche. Er trägt
   die Klasse `flint-hero`, nicht `flint-motiv`, und ist damit außen vor. */
body.single-product #et-boc .et-l .et_pb_section.flint-motiv {
	background-image: linear-gradient(90deg, #86d6d4 0%, #3cbac1 40%, #3bb9c0 100%) !important;
}

/* @media (max-width: 1180px) {
	body.single-product #et-boc .et-l .et_pb_section:has(.flint-pb) .et_pb_code:has(.hex-cluster) {
		display: none !important;
	}
} */

/* =========================================================================
   Responsive Überarbeitung + Button-/Hover-Korrekturen (2026-08-14)
   =========================================================================
   Umsetzung der Design-Rückmeldung von Michael:

     "mobil passt die Seite noch nicht. Viele Sektionen kleben direkt am Rand
      oder haben zu viel Abstand."
     "In manchen Sektionen hat man keinen Abstand, dann voll den Riesigen, mal
      etwas weniger, komplett uneinheitlich."
     "Startseite mobil passt auch nicht wirklich, siehe overflow"
     "Hier stimmt die Border der Buttons noch nicht + Abstand, sowie der
      :hover bei Apotheke kaufen Sektion."

   ---------------------------------------------------------------------------
   BEFUND (im Browser gemessen, nicht im Stylesheet geraten)

   Warum die Abstände uneinheitlich sind: Divis Standard-Sektionspadding ist
   4% oben/unten — Prozent der VIEWPORTBREITE. Auf 1920px sind das rund 77px,
   auf einem 390px-Handy rund 15px. Sektionen, die im Builder einen festen
   px/rem-Wert bekommen haben, behalten dagegen ihren Desktop-Wert auch auf
   dem Handy. Beide Sorten stehen gemischt auf der Seite, daher der Zickzack.
   Gemessen auf der Produktseite bei 390px (padding oben/unten):

     Hero            80 / 50      USP-Reihe       20 / 20
     Apotheken        0 / 20      Tabs             0 /  0
     FAQ             30 / 60      Videos          32 / 32
     Beschreibung    80 / 80      Bewertungen      4 / 50

   Seitlicher Rand bei 390px: 39px in allen Sektionen, die Divis Reihenbreite
   nutzen (.et_pb_row hat width: 80%) — aber 0px in den beiden
   flint-motiv-Sektionen, weil die ein eigenes Flex-Layout haben und die Reihe
   umgehen. Das ist das "kleben direkt am Rand".

   Der Overflow war ein echter Fehler, keine Geschmacksfrage: 809px bei 390px
   Breite, verursacht vom 1200px-Kasten des damaligen Trenner-Konstrukts. Der
   Punkt ist erledigt, seit die Kante als ein Element mit clip-path gebaut ist
   (siehe "Sektionskante") — sie kann gar nicht mehr breiter werden als ihre
   Sektion.

   ---------------------------------------------------------------------------
   VORGEHEN

   Der Rhythmus wird NUR bei max-width 980px und darunter vereinheitlicht. Der
   Desktop-Stand ist abgestimmt und bleibt unangetastet; beklagt wurde
   ausdrücklich die mobile Ansicht. Zwei Werte, mehr braucht es nicht:

     Tablet (bis 980px)   3.5rem = 56px vertikal, 32px seitlich
     Handy  (bis 767px)   2.5rem = 40px vertikal, 24px seitlich
   ========================================================================= */

/* -------------------------------------------------------------------------
   2. Einheitlicher vertikaler Rhythmus ab Tablet abwärts
   -------------------------------------------------------------------------
   Angesteuert werden die Sektionen der Theme-Builder-Körper (_tb_body) und
   auf der Startseite die Sektionen ohne Builder-Suffix. Kopf- und Fußzeile
   sind ausgenommen: die haben ihre eigene, stimmige Staffelung (8/32px).

   Ausgenommen ist außerdem .flint-hero — der Startseiten-Hero ist eine
   Motivfläche mit eigener Mindesthöhe und einem absolut gesetzten Trenner an
   der Unterkante; ein Innenabstand würde dort nur den Text von seiner
   Bildkante wegschieben.

   Das !important ist nötig, weil Divi die Modulwerte selbst mit !important
   ausgibt.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
	body.single-product #et-boc .et-l .et_pb_section[class*="_tb_body"]:not(.flint-hero),
	:where(body.home, body.page-id-4742) #et-boc .et-l .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]):not(.flint-hero) {
		padding-top: 3.5rem !important;
		padding-bottom: 3.5rem !important;
	}
}

@media only screen and (max-width: 767px) {
	body.single-product #et-boc .et-l .et_pb_section[class*="_tb_body"]:not(.flint-hero),
	:where(body.home, body.page-id-4742) #et-boc .et-l .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]):not(.flint-hero) {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
}

/* -------------------------------------------------------------------------
   3. Einheitlicher seitlicher Rand ab Tablet abwärts
   -------------------------------------------------------------------------
   Divis Reihenbreite von 80% ergibt bei 390px einen Einzug von 39px je Seite
   — reichlich für einen Handyschirm, und die beiden flint-motiv-Sektionen
   umgehen sie ganz (0px). Statt zwei Sorten Einzug nebeneinander bekommen
   alle Reihen die volle Breite plus einen festen Rand. Das rückt einheitlich
   ein UND gibt dem Text auf schmalen Geräten rund 30px mehr Lauflänge.

   Ausgenommen .flint-hero-deko: eine Hilfsreihe mit Höhe 0, die nur Hexagon
   und Anschnitt positioniert. Sie darf keinen Platz einnehmen.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
	body.single-product #et-boc .et-l .et_pb_row[class*="_tb_body"]:not(.flint-hero-deko),
	:where(body.home, body.page-id-4742) #et-boc .et-l .et_pb_row:not([class*="_tb_header"]):not([class*="_tb_footer"]):not(.flint-hero-deko) {
		width: 100% !important;
		max-width: none !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

@media only screen and (max-width: 767px) {
	body.single-product #et-boc .et-l .et_pb_row[class*="_tb_body"]:not(.flint-hero-deko),
	:where(body.home, body.page-id-4742) #et-boc .et-l .et_pb_row:not([class*="_tb_header"]):not([class*="_tb_footer"]):not(.flint-hero-deko) {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* Die Motiv-Sektionen haben keine tragende Reihe — ihr Inhalt hängt direkt in
   der Sektion. Sie brauchen den Rand deshalb an der Sektion selbst. */
@media only screen and (max-width: 980px) {
	body.single-product #et-boc .et-l .et_pb_section.flint-motiv {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

@media only screen and (max-width: 767px) {
	body.single-product #et-boc .et-l .et_pb_section.flint-motiv {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* -------------------------------------------------------------------------
   4. Mindesthöhe der Motiv-Sektionen
   -------------------------------------------------------------------------
   Beide tragen min-height: 600px — sinnvoll auf dem Desktop, wo das Motiv
   Fläche braucht. Auf dem Handy bläht es die Tab-Sektion auf: gemessen 600px
   Höhe bei deutlich kleinerem Inhalt, und weil die Sektion ihren Inhalt
   mittig zentriert, verteilt sich der Überschuss als Leerraum oben und unten.
   Genau die "zu viel Abstand"-Stellen. Ohne Bild braucht die Fläche die Höhe
   ohnehin nicht mehr.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
	body.single-product #et-boc .et-l .et_pb_section.flint-motiv {
		min-height: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   5. Produktkacheln auf dem Handy kompakter
   -------------------------------------------------------------------------
   Die Bildfläche steht auf 300px. Bei einspaltiger Anzeige (bis 600px) wird
   die Produktliste damit sehr lang — gemessen 3910px für die Rastersektion
   der Startseite bei 390px Breite. 200px zeigen den Packshot weiterhin
   vollständig (er wird mit object-fit: contain eingepasst) und verkürzen die
   Strecke deutlich.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 600px) {
	.flint-pk,
	.flint-pk-slider,
	.et_pb_shop ul.products {
		--flint-pk-bild: 200px;
	}
}

/* -------------------------------------------------------------------------
   6. Kauf-Buttons: Rahmen, Mittigkeit, Hover
   -------------------------------------------------------------------------
   Gemessen am Amazon- und am Rossmann-Button:

     Fläche          rgb(219,10,91)      – das flint-Magenta, richtig
     Rahmen          2px solid #333      – ein dunkelgrauer Ring um Magenta
     padding links   40px                – gegen 14px rechts
     :hover          rgba(219,10,91,.5)  – Fläche wird zu 50% durchsichtig

   Alle drei Punkte sind Divi-Vorgaben, nicht Absicht:

   · Der Ring kommt aus der Divi-Buttonvorgabe (border-color: #333). Auf einer
     Magentafläche wirkt er wie ein Kasten um den Button. Er bleibt 2px breit,
     nimmt aber die Buttonfarbe an — so verschwindet er optisch, ohne dass der
     Button 4px an Höhe verliert und alles darunter springt.

   · Die 40px links stehen dort, weil Divi Platz für sein Pfeil-Symbol schafft
     und dieses per margin-left: -1.3em wieder nach links zieht. Ergebnis: die
     Beschriftung sitzt 26px zu weit rechts, sichtbar unmittig. Hier wird der
     Zug am Symbol aufgehoben und stattdessen ein normaler Abstand zum Text
     gesetzt — dann zentriert sich Symbol samt Text von selbst, weil der Button
     text-align: center trägt.

   · Der Hover ließ den Button auf 50% Deckkraft ausbleichen. Auf Weiß sieht
     das nach "nicht anklickbar" aus, also genau verkehrt. Ersetzt durch ein
     dunkleres Magenta — die übliche Lesart für "hier drücke ich gerade".

   Zur Spezifität: Divi schreibt seine Regeln auf
   body.et-db #page-container #et-boc .et-l .et_pb_button_3_tb_body
   (2 IDs, 3 Klassen, 1 Element) und setzt bei den Innenabständen !important.
   Deshalb steht hier derselbe Aufbau plus ein Element mehr — sonst gewinnt
   Divi, weil sein CSS im head NACH dem Child-Stylesheet steht.
   Die Modulnummer (_3_, _4_) wird bewusst NICHT benutzt: Divi vergibt sie bei
   jedem Layoutumbau neu. Die Klasse .affiliate-btn steht fest im Modul.
   ------------------------------------------------------------------------- */

body.single-product #page-container #et-boc .et-l a.affiliate-btn {
	border-color: #db0a5b !important;
	padding-left: 1.2em !important;
	padding-right: 1.2em !important;
}

/* ⚠️ `position: static` ist der eigentliche Hebel, nicht das Margin.
   Divi setzt das Pfeil-Symbol auf `position: absolute`. Es landet damit auf
   seiner statischen Position — bei zentriertem Text also genau dort, wo die
   Beschriftung anfängt — und wird von dort per `margin-left: -1.3em` nach
   links gezogen. Das Padding von 2em links schafft den Platz dafür.

   Nimmt man nur das negative Margin zurück, bleibt das Symbol absolut
   positioniert und liegt AUF dem ersten Buchstaben (erster Versuch: der Pfeil
   verdeckte das J von „Jetzt"). Erst `position: static` gibt es in den
   Textfluss zurück; dann zentriert der Button Symbol und Text gemeinsam, und
   ein gewöhnlicher Abstand nach rechts genügt.

   `display: inline-block` muss mit gesetzt werden: Absolut positionierte
   Elemente werden zu `block` umgerechnet, und ein Block-Element würde hier
   einen Zeilenumbruch erzwingen. */
   ⚠️ `vertical-align: middle` gehört dazu. Ein `inline-block` richtet sich
   sonst an der GRUNDLINIE aus, und Divi gibt dem Symbol `line-height: 1.7em`
   mit — sein Kasten ist damit deutlich höher als das Zeichen darin, das
   Zeichen sitzt oben im Kasten. Nach dem ersten Anlauf stand der Pfeil
   dadurch oberbündig statt auf Texthöhe (gemeldet 2026-08-14). Gegenprobe im
   Browser mit fünf Varianten: `vertical-align: middle` und
   `line-height: inherit` sitzen beide richtig; die erste ist unabhängig
   davon, was Divi bei der Zeilenhöhe noch ändert. */
body.single-product #page-container #et-boc .et-l a.affiliate-btn::before {
	position: static !important;
	display: inline-block !important;
	vertical-align: middle !important;
	margin-left: 0 !important;
	margin-right: 0.45em !important;
}

body.single-product #page-container #et-boc .et-l a.affiliate-btn:hover,
body.single-product #page-container #et-boc .et-l a.affiliate-btn:focus-visible {
	/* #b00849 = dasselbe Magenta, rund 20% abgedunkelt. Weiße Schrift darauf
	   kommt auf 6,3:1 und bleibt damit auch im Hover gut lesbar. */
	background-color: #b00849 !important;
	border-color: #b00849 !important;
}

/* -------------------------------------------------------------------------
   7. Apotheken-Logos: Hover
   -------------------------------------------------------------------------
   Im Modul stand:
     a:hover      { filter: brightness(1) contrast(1) !important; }
     a:hover img  { transform: scale(1.1); }

   Die erste Regel tut nichts — brightness(1) contrast(1) ist die Identität,
   also ein Rest von etwas, das nie fertig wurde. Die zweite vergrößert das
   Logo um 10%; bei --image-gap: 0rem und gemessenen 18px Luft neben dem
   breitesten Logo (Shop Apotheke) wächst es dabei bis an den Nachbarn.

   Ersetzt durch einen ruhigen Hover, der die Fläche nicht verlässt: das Logo
   hebt sich leicht und wird etwas kräftiger. Der Abstand im Raster kommt
   zusätzlich auf einen echten Wert, damit die Logos überhaupt Luft haben.

   Angesteuert über .flint-apotheken — die Klasse setzt
   skripte/g6-apotheken-klasse.js auf die Reihe. Divis eigene
   et_pb_row_15_tb_body wäre keine Grundlage: die Nummer ändert sich beim
   nächsten Layoutumbau.
   ------------------------------------------------------------------------- */

/* ⚠️ `.et_pb_row` gehört in den Selektor, obwohl die Klasse `.flint-apotheken`
   allein eindeutig wäre. Divi gibt sein Modul-CSS auf
   `.et-db #et-boc .et-l .et_pb_row_15_tb_body.et_pb_row` aus — 1 ID und
   4 Klassen. Ohne `.et_pb_row` käme dieser Selektor nur auf 3 Klassen und die
   0rem aus dem Modul würden gewinnen. */
body.single-product #et-boc .et-l .et_pb_row.flint-apotheken {
	--image-gap: 1.5rem;
}

body.single-product #et-boc .et-l .flint-apotheken .et_pb_module a:hover {
	/* Die wirkungslose Identitäts-Filterregel aus dem Modul abschalten. */
	filter: none !important;
}

body.single-product #et-boc .et-l .flint-apotheken .et_pb_module a:hover img,
body.single-product #et-boc .et-l .flint-apotheken .et_pb_module a:focus-visible img {
	transform: translateY(-4px) !important;
	filter: saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
	body.single-product #et-boc .et-l .flint-apotheken .et_pb_module a:hover img {
		transform: none !important;
	}
}

/* -------------------------------------------------------------------------
   8. Nachtrag: das Karussell konnte nicht schrumpfen
   -------------------------------------------------------------------------
   Nach der Trenner-Korrektur blieben auf der Startseite noch 233px Overflow
   bei 390px Breite. Ursache ist dieselbe Flexbox-Falle, die damals auch den
   Trenner aufspannte (dessen Konstrukt es nicht mehr gibt), nur an anderer
   Stelle:

   `.flint-pk--karussell` ist Flex-Item in `.flint-pk-slider` und hat selbst
   `overflow-x: auto`. Ein Flex-Item startet aber mit `min-width: auto` und
   darf deshalb nicht unter seine INHALTSBREITE schrumpfen — sieben Kacheln zu
   je 200px plus Abstände ergeben rund 1600px. Die Liste wird also 1600px
   breit, und ein `overflow-x: auto` auf einem 1600px breiten Kasten schneidet
   nichts ab: es gibt aus seiner Sicht nichts zu scrollen. Stattdessen wächst
   das Dokument.

   `min-width: 0` hebt die Sperre auf, `flex: 1 1 auto` lässt die Liste den
   Platz zwischen den beiden Pfeilen einnehmen. Erst dadurch wird aus dem
   Karussell wirklich ein Scrollbereich.
   ------------------------------------------------------------------------- */

.flint-pk--karussell {
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------
   9. Nachtrag: Hero-Sektion der Produktseite auf denselben Rand
   -------------------------------------------------------------------------
   Die Hero-Sektion bringt 16px eigenen Seitenabstand mit. Zusammen mit den
   24px der Reihe landete ihr Inhalt bei 40px, während alle anderen Sektionen
   auf 24px stehen — gemessen nach dem ersten Durchgang. Der Sektionswert wird
   deshalb mobil zurückgenommen; den Rand stellt einheitlich die Reihe.

   Die Motiv-Sektionen sind ausgenommen: die haben keine tragende Reihe und
   holen sich ihren Rand weiterhin an der Sektion (siehe Punkt 3).
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
	body.single-product #et-boc .et-l .et_pb_section[class*="_tb_body"]:not(.flint-motiv) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   10. Nachtrag: Hexagon-Cluster auf der Startseite
   -------------------------------------------------------------------------
   Nach Trenner und Karussell blieben 233px Overflow auf der Startseite. Der
   Verursacher ist der Wabencluster in der Markengeschichte-Sektion: 599px
   fest, in einer 2/5-Spalte, ohne jede Regel für schmale Schirme.

   Auf den Produktseiten wird derselbe Cluster längst ab 1180px abwärts
   ausgeblendet (siehe Punkt „Beschreibungssektion", weiter oben) — dort war
   die Entscheidung schon gefallen, sie fehlte nur auf der Startseite. Statt
   die Ausnahme ein zweites Mal an einen Einbauort zu binden, gilt sie jetzt
   für jeden Cluster. Unterhalb von 1180px ist er Störung statt Zierde, genau
   wie es der Kommentar bei `.flint-hero-hex` schon festhält.
   ------------------------------------------------------------------------- */

/*@media only screen and (max-width: 1180px) {
	.hex-cluster {
		display: none !important;
	}
}*/

/* -------------------------------------------------------------------------
   12. Nachtrag: Außenabstände der Sektionen
   -------------------------------------------------------------------------
   Nach dem Vereinheitlichen der Innenabstände blieb auf der Startseite eine
   einzelne Lücke von 30px zwischen Markengeschichte und FAQ übrig — ein
   `margin-bottom: 30px`, das zwei Sektionen aus der Divi-Zeit mitbringen.
   Neben lauter 0er-Lücken fällt genau so etwas auf. Der Rhythmus kommt jetzt
   vollständig aus dem Innenabstand.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
	body.single-product #et-boc .et-l .et_pb_section[class*="_tb_body"]:not(.flint-hero),
	:where(body.home, body.page-id-4742) #et-boc .et-l .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]):not(.flint-hero) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   13. Wabencluster: Überstand auf dem Desktop abschneiden
   -------------------------------------------------------------------------
   Beim Nachmessen aufgefallen, NICHT Teil der Rückmeldung und auch nicht von
   den Änderungen oben verursacht: Bei 1280px ragt der Hero-Cluster 275px über
   den rechten Rand, das Dokument wird dadurch 1555px breit. Gegengeprüft mit
   dem Stand VOR dieser Überarbeitung — dort exakt derselbe Wert. Der Fehler
   ist also alt; sichtbar wurde er nur, weil `html { overflow-x: hidden }` die
   Bildlaufleiste verdeckt.

   Für die Beschreibungssektion war das schon gelöst (`overflow-x: clip`, weiter
   oben). Dieselbe Behandlung bekommt jetzt jede Sektion, in der ein Cluster
   steckt — Hero der Startseite, Hero der Produktseiten, Tab-Sektion.

   `clip` und nicht `hidden`: `overflow-x: hidden` zwingt die andere Achse auf
   `auto` und kann dadurch eine senkrechte Bildlaufleiste im Abschnitt
   erzeugen. Der Hinweis steht schon beim Beschreibungs-Block; hier gilt er
   genauso.
   ------------------------------------------------------------------------- */

.et_pb_section:has(.hex-cluster) {
	overflow-x: clip;
}

/* =============================================================================
 * TCK-0015 — Zahlen-Block: Parallax-Hintergrund am Handy
 * -----------------------------------------------------------------------------
 * Kundin am 19.08.2026: „3 Zahlen: Mobile ist hier etwas verzogen." Der
 * Screenshot zeigt das Radfahrer-Motiv oben und unten angeschnitten, die drei
 * Werte sitzen nicht mittig im sichtbaren Ausschnitt.
 *
 * Ursache, am 01.09.2026 an der ausgelieferten Seite gemessen — es ist ein
 * Fehler in Divi selbst, kein Konfigurationsfehler:
 *
 *   .et-pb-parallax-background       { background-position: top; background-size: cover }
 *   .et-pb-parallax-background--css  { background-attachment: fixed }
 *
 * `fixed` bemisst das Bild in mobilen Browsern am Viewport statt am Element.
 * Mit `cover` und der Verankerung oben wird das Motiv dadurch beschnitten, und
 * der Ausschnitt wandert beim Scrollen gegen die Zahlen.
 *
 * Divi bringt für genau diesen Fall eine Gegenregel mit:
 *   .et_mobile_device .et_pb_section_parallax .et_pb_parallax_css { background-attachment: scroll }
 * Sie trifft aber nie zu. `.et_pb_parallax_css` ist der Klassenname aus Divi 4;
 * Divi 5 rendert `.et-pb-parallax-background--css`. Der Hersteller-Fix greift
 * an seinem eigenen Markup vorbei.
 *
 * Deshalb hier, über Spezifität statt über ein zweites `!important`: drei
 * Klassen schlagen die einzelne Klasse der Divi-Regel.
 * ========================================================================== */

@media (max-width: 980px) {

	/* NACHTRAG 14.09.2026 — die Regel oben hat die halbe Ursache behoben und
	 * dabei eine zweite sichtbar gemacht. `background-attachment: scroll` ist
	 * richtig, aber Divis Parallax-JS rechnet weiter für den `fixed`-Fall: es
	 * setzt am Bild ein `top: -253px` und dazu ein scrollabhängiges
	 * `translateY` zwischen 160 und 462px. Ohne `fixed` verschiebt das nicht
	 * mehr den Bildausschnitt, sondern das Element — gemessen klaffte oben je
	 * nach Scrollstand bis zu 209px Sektionshintergrund, und „37 / Jahre
	 * Tradition" stand auf Grau statt im Motiv. Am Rechner tut das JS nichts
	 * (`transform: none`, Lücke 0) — der Effekt existiert faktisch nur am
	 * Handy, und dort ist er kaputt.
	 *
	 * `inset: 0` heftet das Bild an den Wrapper, statt seinen Versatz
	 * gegenzurechnen. Die drei `!important` sind unvermeidbar: das JS schreibt
	 * inline. Es rechnet danach weiter ins Leere — das kostet nichts und ist
	 * ehrlicher, als den Effekt an einer Sektion abzuschalten und die übrigen
	 * Parallax-Abschnitte in einem anderen Zustand zu lassen. Am Handy trägt
	 * Parallax ohnehin nichts: iOS kann `background-attachment: fixed` nicht. */
	.et_pb_section_parallax > .et-pb-parallax-wrapper > .et-pb-parallax-background {
		inset: 0 !important;
		block-size: auto !important;
		transform: none !important;
		background-attachment: scroll;
		background-position: center center;
	}

	/* Luft, damit die Werte im Motiv stehen statt auf dessen Kante. Der Abschnitt
	 * trägt im Layout `padding: 0`. Gebunden an `:has()` statt an
	 * `.et_pb_section_3`: der Index verschiebt sich, sobald jemand eine Sektion
	 * darüber einfügt — Divi benutzt `:has()` in derselben Datei selbst. */
	.et_pb_section_parallax:has(.et_pb_number_counter) {
		padding-block: 3rem;
	}
}


/* =============================================================================
 * TCK-0026 — Mega-Menue, Google-Badge und Markenzeichen (aus WPCode uebernommen)
 * -----------------------------------------------------------------------------
 * Diese Regeln lagen bis zum 01.09.2026 als WPCode-Snippet 4289 in der
 * Datenbank: unversioniert, auf jeder Seite geladen, in keinem Deploy
 * enthalten und in keinem Diff sichtbar. Eine ihrer Regeln hat quer durch die
 * Breakpoints ins Handy-Menue gegriffen und dort jede Produktseite
 * unerreichbar gemacht (TCK-0018) — genau deshalb gehoert Code, der das
 * Frontend bestimmt, ins Repository.
 *
 * Beim Uebernehmen entfernt: alle Regeln zu `.flint-mm-trust` und
 * `.flint-mm-product` — 15 von 60 Bloecken. Sie gestalteten die USP-Spalte
 * „Darum flint® Med" und die Produkt-Bildkacheln im Aufklappmenue; beides ist
 * mit TCK-0017 ersatzlos entfallen. Gegengeprueft an der ausgelieferten Seite:
 * keine dieser Klassen kommt im Markup noch vor. Was tot ist, wandert nicht
 * mit um.
 *
 * Uebernommen und geprueft (alle im Markup vorhanden): `.flint-mega-menu-*`,
 * `.fgb-*` (Google-Badge), die Hexagon-Gruppe `.hex*`/`.spot-*`/`.bg-hex`
 * und `.flint-tm` (das hochgestellte ®).
 *
 * `html { overflow-x: hidden !important }` steht unveraendert am Anfang und
 * ist bewusst nicht angefasst: die Regel wirkt global und kann `position:
 * sticky` aushebeln. Ob sie noch gebraucht wird, ist eine eigene Frage —
 * sie hier stillschweigend zu streichen waere eine Aenderung ohne Messung.
 * ========================================================================== */

html {
	overflow-x: hidden !important;
}

/* Styling für das Mega Menü
***********************************************************/
header.et-l--header {
    position: relative !important;
}

@media (min-width: 981px) {

	/* Das eigene Mega-Menue tritt an die Stelle des Divi-Untermenues — aber nur
	 * am Rechner. Im Snippet galt diese Regel fuer jede Breite; das Handy-Menue
	 * von Divi ist eine Kopie derselben Liste, also waren die Produkte dort
	 * ebenfalls unerreichbar (TCK-0018, gemessen am 2026-08-21).
	 * `inc/mobil-navigation.php` musste das bisher mit hoeherer Spezifitaet
	 * zurueckbiegen. Mit der Breitenbegrenzung hier gibt es nichts mehr
	 * zurueckzubiegen — der Konflikt entsteht gar nicht erst. */
	li.menu-item-682 > ul.sub-menu {
		display: none;
	}
}

/* Haupt-Container des neuen Mega Menüs */
.flint-mega-menu-container {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-top: 3px solid var(--gcid-primary-color);
    padding: 30px;
    
    /* WICHTIG FÜR DESKTOP: Strikt nebeneinander! */
    display: flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    
    gap: 40px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999999;
    pointer-events: none;
    border-radius: 0 0 8px 8px;
}

.flint-mega-menu-container.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0px);
}

.flint-mega-menu-grid {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px 20px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1080px) {
	.flint-mega-menu-container {
		flex-direction: column;
	}
	
	.flint-mega-menu-grid {
		width: clamp(80%, 90%, 100%);
		margin: auto;
	}
	
	.flint-mm-product span {
		bottom: 2%;
	}
}

@media (max-width: 767px) {
	.flint-mega-menu-container {
		flex-direction: column;
	}
	
	.flint-mega-menu-grid {
		grid-template-columns: repeat(2, 1fr);
		width: clamp(80%, 90%, 100%);
		margin: auto;
	}
	
	.flint-mm-product span {
		bottom: 2%;
	}
}

@media (max-width: 480px) {
	.flint-mega-menu-grid {
		width: 100%;
	}
	
	.flint-mm-product span {
		bottom: 0%;
	}
}

/* Styling für das Google Badge 
***********************************************************/
.flint-google-badge {
    display: inline-flex;
	max-width: 270px;
	min-height: 95px;
    align-items: center;
    background: #ffffff;
    padding: 12px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin-bottom: 15px;
}

.fgb-logo {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    flex-shrink: 0;
}

.fgb-logo svg {
    width: 100%;
    height: 100%;
}

.fgb-content {
    display: flex;
    flex-direction: column;
    text-align: left;
	margin-top: -9px;
}

.fgb-rating-row {
    display: flex;
    align-items: center;
    margin-bottom: -4px;
}

.fgb-stars {
    display: flex;
    gap: 2px;
    margin-right: 8px;
}

.fgb-stars svg {
    width: 20px;
    height: 20px;
}

.fgb-score {
    font-weight: 800;
    font-size: 16px;
    color: #202124;
}

.fgb-title {
    font-weight: 700;
    font-size: 14px;
    color: #202124;
    line-height: 1.2;
}

.fgb-verified {
    font-size: 11px;
	line-height: 14px;
    color: #70757a;
    margin-top: 1px;
}

/* Hexagon-Formen */

.hex-cluster {
    position: relative;
    width: 599px;
    height: 532px;
  }

/* === Basis === */
  .hex {
    position: absolute;
    line-height: 0;
  }

.hex svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

.hex img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(100% 50%, 75% 100%, 25% 100%, 0% 50%, 25% 0%, 75% 0%);
  }

/* === GENERELLE SPOT-KLASSE === */
  /* Jeder Spot ist ein eigener Punkt-Glow. Größe, Helligkeit, Weichheit
     werden hier global gesteuert; Position individuell pro Spot unten. */
  .spot {
    position: absolute;
    width: 60px;          /* GRÖSSE ANPASSEN */
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle,
                  rgba(255,255,255,1) 0%,
                  rgba(255,255,255,0.7) 25%,
                  rgba(255,255,255,0.2) 60%,
                  rgba(255,255,255,0) 100%);
    filter: blur(4px);    /* WEICHHEIT ANPASSEN */
    pointer-events: none;
    z-index: 2;
    transform: translate(-50%, -50%); /* zentriert auf die top/left-Koordinate */
  }

/* === EINZELNE SPOT-POSITIONEN ===
     top/left = Mittelpunkt des Spots in Pixeln, RELATIV zum Hex.
     0/0 = obere linke Ecke des Hex-Containers.
     Werte können auch negativ sein (Spot ragt über Hex hinaus) oder größer als Hex-Größe. */

  /* hex-y1 (klein oben-links): Container 100x87px */
  .spot-y1-a {
    top: 2px;       /* nach unten */
    left: 70px;     /* nach rechts */
  }

.spot-y1-b {
    top: 85px;
    left: 30px;
  }

/* hex-y2 (groß mitte-oben): Container 220x191px */
  .spot-y2-a {
    top: -3px;
    left: 162px;
  }

.spot-y2-b {
    top: 190px;
    left: 57px;
  }

/* hex-y3 (unten-links): Container 160x139px */
  .spot-y3-a {
    top: 2px;
    left: 41px;
  }

.spot-y3-b {
    top: 140px;
    left: 120px;
  }

/* === Hintergrund-Hexagons === */
  .bg-hex { opacity: 0.25; filter: blur(1.5px);}

.hex-bg-r1 { top: 60px;  left: 9px;   width: 110px; height: 95px; }

.hex-bg-r2 { top: 65px;  left: 253px; width: 70px;  height: 61px;  opacity: 0.35; }

.hex-bg-r3 { top: 361px; left: 124px; width: 80px;  height: 69px;  opacity: 0.35; }

.hex-bg-r4 { top: 441px; left: 276px; width: 80px;  height: 69px;  opacity: 0.35; }

.hex-bg-w1 { top: 19px;  left: 216px; width: 160px; height: 139px; }

.hex-bg-w2 { top: 97px;  left: 358px; width: 220px; height: 191px; }

.hex-bg-w3 { top: 355px; left: 176px; width: 160px; height: 139px; }

.hex-bg-g1 { top: 143px; left: 214px; width: 260px; height: 225px; }

/* === Vordergrund === */
  .outline-hex .glow {
    position: absolute;
    inset: 0;
    filter: blur(2.5px);
    opacity: 0.55;
  }

.outline-hex .stroke {
    position: relative;
  }

.hex-y1 { top: 125px; left: 42px;  width: 100px; height: 87px; }

.hex-y2 { top: 105px; left: 146px; width: 220px; height: 191px; }

.hex-y3 { top: 267px; left: 36px;  width: 160px; height: 139px; }

/* Styling für das efasit Markenzeichen */
.flint-tm {
    font-size: 0.8em !important; 
    vertical-align: baseline !important;
    position: relative !important;
    top: -0.3em !important; 
    line-height: 1 !important; 
    margin-left: 0.05em !important; 
}

/* =============================================================================
 * TCK-0006 — Produktgalerie: die 48-Prozent-Regel von WooCommerce aushebeln
 * -----------------------------------------------------------------------------
 * Der Galerie-Container des Plugins trägt die Klasse `images`. Damit greift
 * `woocommerce-layout.css`:
 *
 *     .woocommerce div.product div.images { float: left; width: 48% }
 *
 * Diese Regel ist für die Standard-Produktseite gedacht, wo die Galerie die
 * linke Hälfte einer vollen Breite einnimmt. Bei efasit stimmt sie deshalb:
 * 48 % von rund 1060 px Produktbereich sind die 510 px, mit denen ihr Slider
 * rechnet.
 *
 * Unsere Galerie steht aber in einer Divi-Spalte, die bereits die halbe Breite
 * ist — WooCommerce halbiert sie also ein zweites Mal. Gemessen am 01.09.2026:
 * Slide 245 px in einer Spalte von rund 500 px, und der Slider rechnet mit
 * genau dieser falschen Containerbreite.
 *
 * Nur im Galerie-Modul aufgehoben, über die ID aus dem Layout. Damit bleibt
 * die Regel überall dort gültig, wo WooCommerce sie selbst anwendet — auf
 * einer Standard-Produktseite oder im Shop.
 * ========================================================================== */

#product-image-gallery .images.nickx_product_images_with_video,
#product-image-gallery .woocommerce-product-gallery {
	float: none;
	width: 100%;
	max-width: 100%;
}

/* =============================================================================
 * TCK-0015 — Markengeschichte: Produktbilder am Handy
 * -----------------------------------------------------------------------------
 * Kundin am 02.09.2026: „Markengeschichte: Mobile: die Produkte sind zu groß in
 * der Anzeige."
 *
 * Gemeint ist „flint – Eine Marke mit Geschichte" (/ueber-flint/, Seite 500),
 * Abschnitt „Das Produktportfolio". Die Aufnahmen stehen dort in
 * Sechstel-Spalten — am Rechner also klein. Divi stapelt Spalten unterhalb der
 * Umbruchbreite auf volle Breite, und die Dateien sind 982 x 1920 bzw.
 * 812 x 2560: jedes Produkt füllt am Handy den Bildschirm und mehr.
 *
 * Begrenzt auf diese Seite (`page-id-500`), nicht seitenweit: Sechstel-Spalten
 * gibt es hier 35-mal und anderswo aus anderen Gründen.
 *
 * Die 260px sind eine begründete Annahme, keine Messung — sie lassen auf einem
 * 390px-Gerät zwei Packungen nebeneinander stehen statt einer pro Bildschirm.
 * Wenn die Kundin es anders will, ist es genau diese eine Zahl.
 * ========================================================================== */

@media (max-width: 980px) {

	body.page-id-500 .et_pb_column_1_6 .et_pb_image img {
		max-block-size: 260px;
		inline-size: auto;
		margin-inline: auto;
	}

	body.page-id-500 .et_pb_column_1_6 .et_pb_image .et_pb_image_wrap {
		display: block;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
   11. Versandapotheken am Handy: zwei nebeneinander, mittig (TCK-0042)
   -------------------------------------------------------------------------
   Kundentermin 14.09.2026. Kathrin Lindenmayr zur Handyansicht, Michael
   Klünder antwortet:

   > Könnte man vielleicht auch sogar noch zwei nebeneinander darstellen […]
   > Die sind angeschnitten. Das würde ich dann noch korrigieren. Und dann
   > entweder zwei nebeneinander oder eins untereinander, aber dann zentriert
   > dargestellt. — Den Abstand dann auch irgendwie verkleinert, wenn das geht.

   Das Karussell, das hier vorher stand, ist im selben Termin ausdrücklich
   zurückgestellt worden („desktopmäßig ist es auch nicht störend").

   ⚠️ Und es hat ohnehin nie gegriffen — gemessen am 14.09.2026 auf 390 px:
   die Spalte stand auf `display: grid` mit EINER Spur von 310 px, also auf
   Divis eigener Telefonregel. Der Grund ist die Spezifität und er ist eine
   Zeile weiter oben schon einmal aufgeschrieben worden: Divi gibt seine
   Reihenregeln als `.et-db #et-boc .et-l .et_pb_row_15_tb_body.et_pb_row
   .et_pb_column` aus, das sind 1 ID und 5 Klassen. Der alte Selektor hier
   ließ `.et_pb_row` weg und kam nur auf 1 ID und 4 Klassen — er verlor bei
   `display`, `grid-template-columns` und `gap` und gewann nur dort, wo Divi
   gar nichts setzt (`overflow-x`). Genau diese Mischung stand auf der Seite:
   ein Scrollbereich, der untereinander stapelt.

   Deshalb trägt jeder Selektor hier `.et_pb_row.flint-apotheken` und kommt
   damit auf 1 ID, 5 Klassen und ein Element.

   Zweite gemessene Ursache für „angeschnitten": das Bild war mit 200 px
   breiter als sein Modul (118 px) und ragte links heraus. Die Bildregel wird
   deshalb mitgenommen — `max-inline-size: 100%` statt Divis festen 200 px.
   ------------------------------------------------------------------------- */

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

	body.single-product #et-boc .et-l .et_pb_row.flint-apotheken .et_pb_column {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: center;
		align-items: center;
		/* Vorher 24 px aus Divis `--image-gap`-Fallback plus die volle
		   Modulhöhe von 150 px je Zeile. */
		gap: 8px 12px;
		overflow-x: visible;
	}

	body.single-product #et-boc .et-l .et_pb_row.flint-apotheken .et_pb_image {
		inline-size: 100%;
		margin-block-end: 0;
	}

	/* `block-size` statt Divis 150 px, und die Breite darf die Spur nicht
	   verlassen. `object-fit: contain` steht schon in Divis Regel und bleibt:
	   die Dateien sind 625x625 mit Weißraum, der Zuschnitt passiert im Bild. */
	body.single-product #et-boc .et-l .et_pb_row.flint-apotheken .et_pb_image_wrap img {
		block-size: 110px;
		inline-size: 100%;
		max-inline-size: 100%;
		object-fit: contain;
	}

	/* Leere Bildmodule reißen sonst Lücken ins Raster. */
	body.single-product #et-boc .et-l .et_pb_row.flint-apotheken .et_pb_image:not(:has(img)) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   12. Nachtrag: Produktdaten-Tabelle links bündig
   -------------------------------------------------------------------------
   Kundin am 19.08.2026 („Inhalt & Anwendungen nicht auf einer Höhe") und
   präzisiert am 02.09.2026: „PZN / Inhalt / Anwendung nicht zentrieren,
   sondern auf einer Höhe beginnen lassen (vgl. Alte Website)."

   Ursache, gemessen am 02.09.2026: für `.flint-produkt-daten` existiert
   **kein einziges CSS** — weder im Child-Theme noch in der ausgelieferten
   Seite. Die Tabelle läuft auf Browser-Standard, und der zentriert `<th>`.
   Bei „PZN (Artikelnummer)" gegen „Inhalt" fallen die Anfänge dadurch
   auseinander: die kurze Beschriftung rückt ein. Es war also nie eine
   Gestaltungsentscheidung, sondern eine fehlende Angabe.

   `text-align: start` statt `left`, damit die Regel auch dann stimmt, wenn die
   Seite je in eine Sprache mit anderer Leserichtung geht.
   ------------------------------------------------------------------------- */

.flint-produkt-daten {
	inline-size: 100%;
	border-collapse: collapse;
}

.flint-produkt-daten th,
.flint-produkt-daten td {
	text-align: start;
	vertical-align: top;
	padding-block: 0.35rem;
	padding-inline: 0 1rem;
}

/* Die Beschriftungsspalte bekommt eine feste Breite, damit die Werte
   untereinander ebenfalls auf einer Linie beginnen — sonst richtet sich die
   Spalte nach der längsten Beschriftung und springt von Produkt zu Produkt. */
.flint-produkt-daten th {
	inline-size: 45%;
	font-weight: 600;
}

@media only screen and (max-width: 480px) {
	/* Auf sehr schmalen Schirmen reicht die halbe Breite für „PZN
	   (Artikelnummer)" nicht mehr, ohne dass der Wert umbricht. Dann stehen
	   Beschriftung und Wert untereinander — beide weiterhin links bündig. */
	.flint-produkt-daten th,
	.flint-produkt-daten td {
		display: block;
		inline-size: 100%;
		padding-inline: 0;
	}

	.flint-produkt-daten td {
		padding-block-end: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   13. Nachtrag: Preis als UVP, mit den Pflichtangaben darunter
   -------------------------------------------------------------------------
   Kundin am 19.08. und am 02.09.2026: „UVP fehlt." Michael Kluender am
   03.09.2026: „Die Darstellung soll so sein wie bei efasit.de. Das muss also
   nach dem Produkttitel erscheinen."

   Zwei Dinge standen dem im Weg, und beide kamen aus dem efasit-Import des
   Produkt-Layouts (Modul „Woo Produktpreis", builderVersion 4.27.5):

   1. Das Modul trug eigenes CSS mit `.wc-gzd-additional-info { display: none
      !important }`. Auf der Schwestersite ist das richtig — dort zeigt ein
      eigenes Code-Modul dieselben Angaben nochmal. Hier gab es dieses Modul
      nie mit Inhalt, also waren Grundpreis und MwSt.-Hinweis unsichtbar,
      obwohl sie im Quelltext standen.
   2. Dasselbe Modul-CSS setzte `p.price` auf `display: grid` mit einer
      Spalte, damit sich Streichpreis, Aktionspreis und Aktions-Label
      untereinander stapeln. Hier gibt es keinen Aktionspreis, sondern eine
      UVP mit Etikett — das Etikett landete dadurch in einer eigenen Zeile
      ueber dem Betrag.

   Das Modul-CSS ist am 03.09.2026 entfernt (Backup:
   `backups/pages/et_body_layout-4396-2026-09-03-before-price-move.txt`), die
   Gestaltung steht jetzt hier — versioniert, an einer Stelle, und ohne
   Regeln fuer Aktionspreise, die es auf dieser Website nicht gibt.

   `!important` nur dort, wo Divi die Design-Einstellungen des Moduls selbst
   mit `!important` ausgibt (Preisgroesse 44 px, Farbe, Fettung).
   ------------------------------------------------------------------------- */

/* Das Etikett gehoert zum Preis, ist aber keine Zahl: klein, unbetont, auf der
   Mittellinie des Betrags. Dieselbe Groesse wie auf der Schwestersite. */
.flint-uvp-label {
	font-size: 0.5em;
	font-weight: 400;
	margin-inline-end: 4px;
	vertical-align: middle;
}

/* Ab hier steht `.et-db #et-boc .et-l` vor jedem Selektor. Nicht aus Vorliebe:
   Divi gibt die Design-Einstellungen des Moduls mit genau diesem Vorspann aus
   (eine ID und zwei Klassen) und haengt `!important` dran —
   `.et-db #et-boc .et-l .et_pb_wc_price_1_tb_body .price { font-size: 44px
   !important }`. Ohne denselben Vorspann verliert hier jede Regel, auch mit
   `!important`; gemessen am 03.09.2026 am zu grossen Grundpreis. */

/* Euro-Zeichen im Preis etwas kleiner — uebernommen aus dem entfernten
   Modul-CSS. Nur im Preis: in der Grundpreiszeile wirkt das hochgestellte
   Zeichen bei 16 px wie ein Tippfehler. */
.et-db #et-boc .et-l .et_pb_wc_price p.price:not(.price-unit) .woocommerce-Price-currencySymbol {
	font-size: 0.8em;
	vertical-align: top;
}

/* Divi setzt `p { padding-bottom: 1em }`. Bei 44 px Preis sind das 44 px Loch
   zwischen Preis und Pflichtangaben — genau die Luecke, die am 03.09.2026
   beanstandet wurde. Die drei Absaetze stehen stattdessen als Block
   zusammen. */
.et-db #et-boc .et-l .et_pb_wc_price p.price,
.et-db #et-boc .et-l .et_pb_wc_price .legal-price-info p {
	padding-block-end: 0;
	margin-block: 0;
}

.et-db #et-boc .et-l .et_pb_wc_price p.price:not(.price-unit) {
	line-height: 1.2;
	margin-block-end: 0.5rem;
}

/* Grundpreis und MwSt.-Hinweis sind Pflichtangaben, nicht Verkaufsargumente:
   16 px statt 44, normal statt fett. Beides erben sie sonst vom Modul, denn
   der Grundpreis traegt selbst die Klasse `price`. */
.et-db #et-boc .et-l .et_pb_wc_price p.price.price-unit,
.et-db #et-boc .et-l .et_pb_wc_price .legal-price-info .wc-gzd-additional-info {
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #555960 !important;
}

/* Beim Narbenpflaster ist keine UVP gepflegt. Dann gibt WooCommerce einen
   leeren Absatz aus — der soll keinen Abstand hinterlassen. */
.et-db #et-boc .et-l .et_pb_wc_price p.price:empty,
.et-db #et-boc .et-l .et_pb_wc_price .legal-price-info:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   14. Produkt-Reiter: offen statt Fensterrahmen (TCK-0028)
   -------------------------------------------------------------------------
   Meeting 03.09.2026, Hannah Voelker: die Darstellung soll „nicht wie ein
   Browser-Fenster wirken", mit einem Farbverlauf wie auf der Schwestersite.
   Interne Notiz Michael Kluender: „Produkttabs offene Darstellung, siehe
   efasit."

   Die Zusammenfassung nennt es „Tabellendesign" — gemeint sind die vier
   Reiter (Details, Anwendung, Zusammensetzung, Warnhinweise). Ein
   Browser-Fenster hat Reiter, und genau so sah der Block aus: Divi liefert
   `.et_pb_tabs { border: 1px solid #d9d9d9 }`, eine graue Leiste
   (`ul.et_pb_tabs_controls { background-color: #f4f4f4 }`) und einen weissen
   Inhaltskasten (`.et_pb_all_tabs { background-color: #fff }`).

   Der Verlauf ist schon da und war nur zugedeckt: die Sektion um die Reiter
   traegt `.flint-motiv` und damit den tuerkisen Verlauf von weiter oben
   (#86d6d4 → #3bb9c0). Wird der Kasten transparent, scheint er durch — das
   ist dieselbe Loesung wie auf der Schwestersite.

   **Zwei ID-Selektoren, wie bei efasit.** Divi gibt seine Reiter-Regeln mit
   `.et-db #et-boc .et-l` aus, also 1 ID und 4 Klassen. `#product-tabs …`
   allein verliert dagegen; `#page-container #product-tabs …` sind 2 IDs und
   gewinnt. Deshalb steht der Vorspann dran und kein `!important`.

   **Schriftfarbe bewusst NICHT wie auf efasit.** Dort ist die
   Reiter-Beschriftung weiss auf lindgruenem Verlauf (rund 1,6 : 1). Auf dem
   tuerkisen Verlauf hier waere Weiss noch schlechter. `--primary-color`
   (#072355) kommt auf #3bb9c0 auf rund 7 : 1 und ist damit auch fuer den
   laufenden Text im Reiter tragfaehig — dieselbe Optik, ohne den Fehler.
   ------------------------------------------------------------------------- */

#page-container #product-tabs.et_pb_tabs,
#page-container #product-tabs .et_pb_all_tabs,
#page-container #product-tabs .et_pb_tabs_controls,
#page-container #product-tabs .et_pb_tab,
#page-container #product-tabs .et_pb_active_content {
	background-color: transparent;
	border: 0;
}

/* Divi zieht unter der Leiste eine 1px-Linie über ein ::after — das ist die
   Fensterkante, die unter den Reitern durchläuft. */
#page-container #product-tabs .et_pb_tabs_controls::after {
	border-top: 0;
}

#page-container #product-tabs .et_pb_tabs_controls li {
	border: 0;
	background-color: transparent;
}

#page-container #product-tabs .et_pb_tabs_controls li a {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--primary-color);
	padding: 10px 24px;
}

/* Der aktive Reiter als Fläche auf dem Verlauf, nicht als weisses Fenster mit
   Rahmen. `--light-background` statt reinem Weiss: dieselbe getönte Fläche,
   die auch FAQ und Produktdaten benutzen.

   ⚠️ 14.09.2026, Kundentermin: ohne Rundung. Die 10 px kamen aus der ersten
   Fassung als „Pille"; alles andere in diesem Projekt ist rechtwinklig
   (`--flint-pk-radius: 0px` bei den Produktkarten), die Rundung war der
   Ausreißer. */
#page-container #product-tabs .et_pb_tabs_controls li.et_pb_tab_active {
	background-color: var(--light-background);
	border-radius: 0;
}

/* `!important` hier ist eine Antwort, keine Gewalt: Divi gibt im dynamischen
   CSS `.et_pb_tab_active a { color: #333 !important }` aus — niedrige
   Spezifität, aber mit Ausrufezeichen, und dagegen verliert jede noch so
   spezifische Regel ohne. Gemessen 09.09.2026: die drei inaktiven
   Beschriftungen standen auf #072355, die aktive auf #333. */
#page-container #product-tabs .et_pb_tabs_controls li.et_pb_tab_active a {
	color: var(--primary-color) !important;
}

#page-container #product-tabs .et_pb_tab_content,
#page-container #product-tabs .et_pb_tab_content p,
#page-container #product-tabs .et_pb_tab_content li {
	color: var(--primary-color);
}

/* -------------------------------------------------------------------------
   14b. Die Reiter springen nicht mehr (TCK-0040)
   -------------------------------------------------------------------------
   Kundentermin 14.09.2026, Michael Klünder:

   > hier würde ich schauen, dass das einfach oben einfach immer angeordnet
   > ist und der Counter dementsprechend da runter kommt, weil das finde ich
   > persönlich schon sehr störend.

   Die vier Reiter tragen unterschiedlich viel Text. Divi zeigt immer nur
   einen (`display: none` auf den übrigen), also ist der Block so hoch wie der
   gerade offene Reiter — und alles darunter rutscht bei jedem Klick.

   Gelöst ohne Skript: alle vier Inhalte liegen im selben Rasterfeld
   übereinander. Die Höhe des Blocks ist damit die Höhe des LÄNGSTEN Reiters
   und ändert sich beim Wechsel nicht mehr. `align-items: start` hält den
   Inhalt oben, statt ihn in der gemeinsamen Höhe zu zentrieren.

   `visibility: hidden` und nicht `opacity: 0`: der verdeckte Text ist damit
   auch für Vorlesesoftware und für die Seitensuche des Browsers weg. Mit
   `opacity` allein stünde er unsichtbar, aber lesbar im Weg.

   `display: block !important` ist hier kein Holzhammer, sondern die einzige
   Antwort auf Divis Reiter-Skript: es schreibt `display` als Inline-Stil an
   das Element, und ein Inline-Stil schlägt jede Regel aus der Datei ohne
   Ausrufezeichen — egal wie spezifisch sie ist.

   ⚠️ NACHTRAG 14.09.2026, und er ist der eigentliche Kern dieses Abschnitts:
   **Divi verschiebt `et_pb_active_content` nicht.** Die Klasse bleibt für
   immer am ersten Reiterinhalt; umgeschaltet wird ausschließlich über
   Inline-`display`/`opacity`, und `et_pb_tab_active` wandert nur an der
   BESCHRIFTUNG (`li`) mit. Die erste Fassung dieses Abschnitts hat die
   Sichtbarkeit an `et_pb_active_content` gehängt — damit war Reiter 1 immer
   sichtbar und die anderen drei dauerhaft leer.

   Gemeldet von Michael am 14.09. auf der Sprühpflaster-Seite, gemessen am
   selben Tag: nach vier Klicks trug Inhalt 4 `display: block; opacity: 1`,
   stand aber weiter auf `visibility: hidden`, weil `et_pb_active_content`
   unverändert an Inhalt 1 klebte.

   Warum die erste Prüfung das nicht gefunden hat, gehört dazu: gemessen wurde
   nur die HÖHE des Blocks über alle vier Reiter. Die war konstant — und ist
   es auch, wenn gar nichts zu sehen ist. Geprüft wird jetzt der Text, der
   nach dem Klick tatsächlich sichtbar ist.

   Angesteuert wird deshalb über das Signal, das Divi wirklich pflegt: welche
   BESCHRIFTUNG aktiv ist. Beschriftungen und Inhalte stehen in derselben
   Reihenfolge — beide entstehen aus denselben Modulen —, also zeigt
   `li:nth-child(n).et_pb_tab_active` auf den Inhalt `:nth-child(n)`.
   Acht Paare, obwohl es heute vier Reiter sind; ein fünfter soll nicht
   stillschweigend unsichtbar werden.

   Nicht über `[style*="display: block"]` gelöst, obwohl das kürzer wäre: das
   liest die Schreibweise, die jQuery gerade in das Attribut schreibt, samt
   Leerzeichen. Die Reihenfolge der Module ist Struktur, die Schreibweise
   eines fremden Skripts ist Zufall.
   ------------------------------------------------------------------------- */

/* ⚠️ Die konstante Höhe hat eine Folge, die am 14.09.2026 auf
   /produkt/flint-med-hautrisse-kleber/ aufgefallen ist: dort ist der längste
   Reiter („Warnhinweise", 1237 Zeichen) dreimal so lang wie „Details", der
   Block also 646 px hoch statt 340. Die Sektion zentriert ihren Inhalt in
   einer Mindesthöhe von rund 600 px — solange der Block kleiner ist, bleibt
   oben Luft (122 px auf der Sprühpflaster-Seite); sobald er größer ist, steht
   die Reiterleiste hart an der Sektionskante und der aktive Reiter wirkt oben
   abgeschnitten.

   Deshalb bringt das Modul seinen Abstand selbst mit, statt ihn von der
   Zentrierung zu leihen. Das gilt unabhängig davon, wie lang der längste
   Reiter ist — und genau darum geht es. */
#page-container #product-tabs {
	padding-block: 60px;
}

#page-container #product-tabs .et_pb_all_tabs {
	display: grid;
	align-items: start;
}

#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab {
	display: block !important;
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
}

#page-container #product-tabs:has(.et_pb_tabs_controls li:nth-child(1).et_pb_tab_active) .et_pb_all_tabs > .et_pb_tab:nth-child(1),
#page-container #product-tabs:has(.et_pb_tabs_controls li:nth-child(2).et_pb_tab_active) .et_pb_all_tabs > .et_pb_tab:nth-child(2),
#page-container #product-tabs:has(.et_pb_tabs_controls li:nth-child(3).et_pb_tab_active) .et_pb_all_tabs > .et_pb_tab:nth-child(3),
#page-container #product-tabs:has(.et_pb_tabs_controls li:nth-child(4).et_pb_tab_active) .et_pb_all_tabs > .et_pb_tab:nth-child(4),
#page-container #product-tabs:has(.et_pb_tabs_controls li:nth-child(5).et_pb_tab_active) .et_pb_all_tabs > .et_pb_tab:nth-child(5),
#page-container #product-tabs:has(.et_pb_tabs_controls li:nth-child(6).et_pb_tab_active) .et_pb_all_tabs > .et_pb_tab:nth-child(6),
#page-container #product-tabs:has(.et_pb_tabs_controls li:nth-child(7).et_pb_tab_active) .et_pb_all_tabs > .et_pb_tab:nth-child(7),
#page-container #product-tabs:has(.et_pb_tabs_controls li:nth-child(8).et_pb_tab_active) .et_pb_all_tabs > .et_pb_tab:nth-child(8) {
	visibility: visible;
	pointer-events: auto;
}

/* Divi blendet den verlassenen Inhalt mit `opacity: 0` aus und lässt den Wert
   danach im Attribut stehen. Ohne diese Zeile bliebe der Reiter, zu dem man
   zurückkehrt, durchsichtig, sobald `visibility` ihn wieder freigibt. */
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab {
	opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   14c. Ein Reiter ohne Inhalt wird nicht angezeigt (TCK-0045)
   -------------------------------------------------------------------------
   Michael am 14.09.2026 zum Narbengel: „hier ist der Tab Warnhinweise leer.
   Dann sollte idealerweise auch dieser Tab nicht angezeigt werden."

   Gemessen über alle acht Produkte und alle vier Reiterfelder: leer ist
   ausschließlich `warnhinweise_tab_content`, und nur bei Narbengel und
   Kinderpflaster. Der Reiter selbst steht im gemeinsamen Layout 4396, also an
   jedem Produkt — deshalb wird er hier ausgeblendet und nicht dort gelöscht.

   Erkannt wird die Leere nicht geraten, sondern angesagt: `[flint_feld]` gibt
   für ein leeres Feld `<span class="flint-feld-leer" hidden>` aus (siehe
   `inc/produkt-felder.php`). Die Begründung steht dort; kurz: eine
   Strukturprüfung würde einen Reiter mit unformatiertem Fließtext fälschlich
   für leer halten, und genau den Fall gibt es hier.

   Zwei Regeln je Reiter — die Beschriftung steht VOR den Inhalten, ein
   Geschwisterbezug führt also nicht von unten nach oben. `:has()` am
   gemeinsamen Vorfahren löst das: „wenn Inhalt n leer ist, blende
   Beschriftung n aus".

   Der ausgeblendete Inhalt fällt zugleich aus dem Raster von Punkt 14b heraus.
   Die gemeinsame Höhe richtet sich damit nach dem längsten VERBLIEBENEN
   Reiter — auf dem Narbengel spart das genau die Höhe, die der leere Reiter
   sonst beigetragen hätte.

   Acht Paare, obwohl es vier Reiter sind: dieselbe Reserve wie in 14b.
   Der Fall „Reiter 1 ist leer" ist heute keiner (Details, Anwendung und
   Zusammensetzung sind überall gefüllt) und bliebe auch dann harmlos: Divi
   macht den ersten Reiter aktiv, seine Beschriftung wäre unsichtbar und
   niemand könnte ihn anklicken — zu sehen wäre eine leere Fläche statt eines
   leeren Reiters. Wenn das je eintritt, gehört die Reihenfolge im Layout
   geändert, nicht diese Regel.
   ------------------------------------------------------------------------- */

.flint-feld-leer {
	display: none !important;
}

#page-container #product-tabs:has(.et_pb_all_tabs > .et_pb_tab:nth-child(1) .flint-feld-leer) .et_pb_tabs_controls li:nth-child(1),
#page-container #product-tabs:has(.et_pb_all_tabs > .et_pb_tab:nth-child(2) .flint-feld-leer) .et_pb_tabs_controls li:nth-child(2),
#page-container #product-tabs:has(.et_pb_all_tabs > .et_pb_tab:nth-child(3) .flint-feld-leer) .et_pb_tabs_controls li:nth-child(3),
#page-container #product-tabs:has(.et_pb_all_tabs > .et_pb_tab:nth-child(4) .flint-feld-leer) .et_pb_tabs_controls li:nth-child(4),
#page-container #product-tabs:has(.et_pb_all_tabs > .et_pb_tab:nth-child(5) .flint-feld-leer) .et_pb_tabs_controls li:nth-child(5),
#page-container #product-tabs:has(.et_pb_all_tabs > .et_pb_tab:nth-child(6) .flint-feld-leer) .et_pb_tabs_controls li:nth-child(6),
#page-container #product-tabs:has(.et_pb_all_tabs > .et_pb_tab:nth-child(7) .flint-feld-leer) .et_pb_tabs_controls li:nth-child(7),
#page-container #product-tabs:has(.et_pb_all_tabs > .et_pb_tab:nth-child(8) .flint-feld-leer) .et_pb_tabs_controls li:nth-child(8),
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab:nth-child(1):has(.flint-feld-leer),
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab:nth-child(2):has(.flint-feld-leer),
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab:nth-child(3):has(.flint-feld-leer),
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab:nth-child(4):has(.flint-feld-leer),
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab:nth-child(5):has(.flint-feld-leer),
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab:nth-child(6):has(.flint-feld-leer),
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab:nth-child(7):has(.flint-feld-leer),
#page-container #product-tabs .et_pb_all_tabs > .et_pb_tab:nth-child(8):has(.flint-feld-leer) {
	display: none !important;
}

/* Vier Beschriftungen nebeneinander passen auf einem Handy nicht in eine
   Zeile — untereinander und mittig, wie auf der Schwestersite. */
@media only screen and (max-width: 680px) {
	#page-container #product-tabs .et_pb_tabs_controls {
		display: flex;
		flex-direction: column;
	}

	#page-container #product-tabs .et_pb_tabs_controls li {
		display: flex;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   15. Ratgeber: Produktblock am Beitragsende (TCK-0020)
   -------------------------------------------------------------------------
   Der Block kommt aus `inc/ratgeber-produkte.php` und haengt hinter der
   letzten Divi-Sektion — also ausserhalb jeder Sektion und damit ohne deren
   Innenabstaende. Er bringt sie hier selbst mit, sonst klebt er am Rand.

   Ein oder zwei Kacheln: das Raster der Startseite hat drei Spalten und wuerde
   eine einzelne Kachel auf ein Drittel der Breite quetschen. Deshalb eigene
   Spaltenzahl, mittig, und dieselbe Kachelbreite wie im Ratgeber-Raster
   darueber.
   ------------------------------------------------------------------------- */

.flint-ratgeber-produkte {
	padding-block: 3rem 4rem;
	padding-inline: max(1.25rem, calc((100% - 1080px) / 2));
	background-color: #ffffff;
}

.flint-ratgeber-produkte__titel {
	margin-block-end: 1.5rem;
	text-align: center;
	color: var(--primary-color);
}

.flint-ratgeber-produkte .flint-pk--raster {
	grid-template-columns: repeat(2, minmax(0, 320px)) !important;
	justify-content: center;
	max-width: 100%;
}

/* Eine einzige Kachel steht mittig und nicht in einer Zweierspur. */
.flint-ratgeber-produkte .flint-pk--raster:has(li.product:only-child) {
	grid-template-columns: minmax(0, 320px) !important;
}

@media only screen and (max-width: 600px) {
	.flint-ratgeber-produkte .flint-pk--raster {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* -------------------------------------------------------------------------
   16. FAQ: „Noch Fragen?" am Handy hinter die Fragen (TCK-0016)
   -------------------------------------------------------------------------
   Aus dem Feedback vom 19.08.2026: der Block soll am Handy am Ende des
   FAQ-Bereichs stehen. Am Rechner steht er links daneben (Spalte 1/3), und
   unter 980px stapelt Divi die Spalten in DOM-Reihenfolge — der Block stand
   damit VOR den Fragen (gemessen 09.09.2026: Block bei y=5418, erste Frage bei
   y=5664).

   Gedreht wird über die Reihenfolge, nicht über die Divi-Klassennummern:
   `et_pb_column_20_tb_body` ändert sich, sobald jemand im Layout ein Modul
   davor einfügt. `.faq-wrapper` trägt die Zeile selbst und ist stabil.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
	#page-container .faq-wrapper {
		display: flex;
		flex-direction: column;
	}

	/* Die Spalte mit dem Kontaktblock ist die erste im Markup. */
	#page-container .faq-wrapper > .et_pb_column:first-child {
		order: 2;
	}
}

/* -------------------------------------------------------------------------
   17. Markengeschichte am Handy: den Wabencluster mitwachsen lassen (TCK-0015)
   -------------------------------------------------------------------------
   Die Kundin hat den Abschnitt zweimal beanstandet: „Desktop schön, mobile
   sehr plump" (19.08.) und „die Produkte sind zu groß in der Anzeige"
   (02.09.). Gemessen am 09.09.2026 ist die Ursache eine andere als vermutet:
   die drei Produktaufnahmen sind am Handy **gar nicht da**. Abschnitt 10
   blendet `.hex-cluster` unter 1180px mit `display: none !important` aus, und
   ein Element ohne Fläche löst auch das Lazy-Loading nie aus — die Bilder
   standen auf 0×0 mit Platzhalter, auch nach vollständigem Durchscrollen.
   Text ohne Bild: genau das ist „plump".

   Warum nicht einfach einblenden: der Cluster ist eine feste 599×532-Fläche
   mit absolut gesetzten Kindern. Unter 980px ist die Spalte 916 bis 342px
   breit — er würde je nach Gerät passen oder herausragen.

   Also wächst er mit, statt in einer Breakpoint-Leiter zu hängen: die Hülle
   bekommt `aspect-ratio` und die Kinder ihre Positionen in Prozent derselben
   599×532. Dieselbe abgenommene Komposition, nur kleiner — **keine neue
   Mobilgestaltung**, das ist absichtlich so.

   Zwei Dinge bleiben bewusst unberührt:
   * Der **Hero** (`.flint-hero`) behält sein `display: none`. Dort ist die
     Bildfläche die Grenze, nicht das CSS — und die Bandfassung vom 03.09.
     wurde verworfen.
   * Zwischen 1180px und 981px bleibt der Cluster aus. Dort ist die Spalte nur
     301 bis 346px breit, während der Text daneben steht; das ist der Fall,
     den Abschnitt 10 als „Störung statt Zierde" beschreibt.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
	:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-cluster {
		display: block !important;
		width: min(599px, 100%);
		height: auto;
		aspect-ratio: 599 / 532;
		margin-inline: auto;
	}

	/* Die Kinder in Prozent derselben Bezugsfläche, damit die Geometrie
	   erhalten bleibt: links/width auf 599, top/height auf 532. */
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-bg-r1 { top: 11.278%; left: 1.503%; width: 18.364%; height: 17.857%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-bg-r2 { top: 12.218%; left: 42.237%; width: 11.686%; height: 11.466%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-bg-r3 { top: 67.857%; left: 20.701%; width: 13.356%; height: 12.970%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-bg-r4 { top: 82.895%; left: 46.077%; width: 13.356%; height: 12.970%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-bg-w1 { top: 3.571%; left: 36.060%; width: 26.711%; height: 26.128%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-bg-w2 { top: 18.233%; left: 59.766%; width: 36.728%; height: 35.902%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-bg-w3 { top: 66.729%; left: 29.382%; width: 26.711%; height: 26.128%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-bg-g1 { top: 26.880%; left: 35.726%; width: 43.406%; height: 42.293%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-y1 { top: 23.496%; left: 7.012%; width: 16.694%; height: 16.353%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-y2 { top: 19.737%; left: 24.374%; width: 36.728%; height: 35.902%; }
		:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero) .hex-y3 { top: 50.188%; left: 6.010%; width: 26.711%; height: 26.128%; }
}

/* -------------------------------------------------------------------------
   18. Divi-Einblendungen: die fehlende Sichtbarkeits-Regel (TCK-0035)
   -------------------------------------------------------------------------
   Auf neun der zehn Ratgeber-Seiten waren 30 Bilder unsichtbar — geladen, in
   voller Groesse im Layout, aber auf `opacity: 0`. Gemeldet war "die Bilder
   sind nicht eingepflegt"; eingepflegt waren sie alle.

   Divi arbeitet bei Einblend-Animationen in zwei Schritten: eine Regel
   versteckt das Modul (`.et-waypoint:not(.et_pb_counters){opacity:0}`, kommt
   inline mit jeder Seite), eine zweite holt es beim Scrollen zurueck
   (`.et_pb_animation_top.et-animated{opacity:1;animation:fadeTop …}`). Die
   zweite steht in
   `Divi/includes/builder/feature/dynamic-assets/assets/css/legacy_animations.css`
   — und Divis Dynamic-CSS laedt diese Datei auf einer Divi-5-Seite mit
   D4-Modulen nicht mit. Damit versteckt Divi die Module und macht sie nie
   wieder sichtbar.

   Das JavaScript ist unschuldig: die Elemente tragen `et-animated`, es fehlt
   ausschliesslich das CSS dazu (gemessen 14.09.2026: 2543 Regeln in 28
   Stylesheets, 0 Treffer fuer `.et-animated`). Die Keyframes `fadeTop` &
   Co. liefert Divi inline mit, nur die Zuweisung fehlt.

   Deshalb stehen die 15 Regeln hier woertlich so, wie Divi sie ausliefern
   wuerde. Sie bleiben richtig, falls Divi die Datei spaeter wieder mitlaedt —
   dann stehen sie doppelt und identisch da. Die Spezifitaet reicht: drei
   Klassen schlagen die Versteck-Regel mit zwei, unabhaengig von der
   Ladereihenfolge.

   Nicht "einfach sichtbar schalten": ein `opacity: 1` auf der Grundregel
   wuerde jedes Modul erst zeigen und beim Erreichen des Sichtbereichs aus dem
   Nichts neu einblenden lassen.
   ------------------------------------------------------------------------- */

.et-waypoint.et_pb_animation_top.et-animated,
.et-waypoint.et_pb_animation_top_tablet.et-animated,
.et-waypoint.et_pb_animation_top_phone.et-animated,
.et_pb_animation_top.et-animated,
.et_pb_animation_top_tablet.et-animated,
.et_pb_animation_top_phone.et-animated {
	opacity: 1;
	animation: fadeTop 1s cubic-bezier(0.77, 0, 0.175, 1) 1;
}

.et-waypoint.et_pb_animation_bottom.et-animated,
.et-waypoint.et_pb_animation_bottom_tablet.et-animated,
.et-waypoint.et_pb_animation_bottom_phone.et-animated,
.et_pb_animation_bottom.et-animated,
.et_pb_animation_bottom_tablet.et-animated,
.et_pb_animation_bottom_phone.et-animated {
	opacity: 1;
	animation: fadeBottom 1s cubic-bezier(0.77, 0, 0.175, 1) 1;
}

.et-waypoint.et_pb_animation_left.et-animated,
.et-waypoint.et_pb_animation_left_tablet.et-animated,
.et-waypoint.et_pb_animation_left_phone.et-animated,
.et_pb_animation_left.et-animated,
.et_pb_animation_left_tablet.et-animated,
.et_pb_animation_left_phone.et-animated {
	opacity: 1;
	animation: fadeLeft 1s cubic-bezier(0.77, 0, 0.175, 1) 1;
}

.et-waypoint.et_pb_animation_right.et-animated,
.et-waypoint.et_pb_animation_right_tablet.et-animated,
.et-waypoint.et_pb_animation_right_phone.et-animated,
.et_pb_animation_right.et-animated,
.et_pb_animation_right_tablet.et-animated,
.et_pb_animation_right_phone.et-animated {
	opacity: 1;
	animation: fadeRight 1s cubic-bezier(0.77, 0, 0.175, 1) 1;
}

.et-waypoint.et_pb_animation_fade_in.et-animated,
.et-waypoint.et_pb_animation_fade_in_tablet.et-animated,
.et-waypoint.et_pb_animation_fade_in_phone.et-animated,
.et_pb_animation_fade_in.et-animated,
.et_pb_animation_fade_in_tablet.et-animated,
.et_pb_animation_fade_in_phone.et-animated {
	opacity: 1;
	animation: fadeIn 1s cubic-bezier(0.77, 0, 0.175, 1) 1;
}

/* Wer Bewegung abgeschaltet hat, bekommt den Inhalt trotzdem — ohne sie. */
@media (prefers-reduced-motion: reduce) {
	.et-waypoint:not(.et_pb_counters) {
		opacity: 1;
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   19. FAQ: die Ueberschrift ist eine Sektionsueberschrift (TCK-0037)
   -------------------------------------------------------------------------
   Gemeldet war "das Design der FAQs anpassen, orientiere dich an den
   Produktseiten". Gemessen am 14.09.2026 ist alles andere bereits identisch —
   Zeilenbreite, Zeilenabstaende, Balkenfarbe, Rahmen, Abstand zwischen den
   Balken, Innenabstand, Titelschrift, Textschrift, Icon. Der einzige
   Unterschied ist die Ueberschrift: auf der Produktseite 40px, im Ratgeber
   26px, also so gross wie jede Zwischenueberschrift daneben. Genau deshalb
   liest sie sich dort nicht als eigener Abschnitt.

   **Anker ist die Zeile, nicht die Sektion.** Auf der Ratgeberseite liegt der
   komplette Artikel in einer einzigen `.et_pb_section` — eine Regel auf
   Sektionsebene haette alle fuenf Zwischenueberschriften mitvergroessert.
   Ueberschrift und Balken stehen dagegen auf beiden Seitentypen in derselben
   `.et_pb_row`, und nur dort.

   Auf den Produktseiten aendert die Regel nichts: dort steht die 40px bereits.
   Sie beschreibt also den gemeinsamen Standard, statt eine Seite nachzuziehen.
   Die 26px kommen aus einer nackten `h2`-Regel (Spezifitaet 0,0,1) — eine
   Klasse genuegt, `!important` waere hier nur Laerm.
   ------------------------------------------------------------------------- */

.et_pb_row:has(.et_pb_toggle) h2 {
	font-size: 40px;
	line-height: 40px;
}

/* Am Handy geben die Produktseiten keine Vorlage her: dort ist die
   FAQ-Ueberschrift unter 768px auf `display: none` gesetzt, die FAQ steht
   also ueberschriftslos da. Uebernommen wird das nicht — eine Ueberschrift,
   die auf dem Handy verschwindet, ist kein Vorbild, sondern ein eigener
   Mangel (notiert in TCK-0037).
   Stattdessen die Groesse der Seitenueberschrift (30px) und eine Zeilenhoehe,
   die traegt: der Ratgeber-Titel ist laenger als "Haeufig gestellte Fragen"
   und lief bei 40px/1,0 vierzeilig und aneinanderklebend. */
@media only screen and (max-width: 767px) {
	.et_pb_row:has(.et_pb_toggle) h2 {
		font-size: 30px;
		line-height: 1.2;
	}
}

/* -------------------------------------------------------------------------
   20. Markengeschichte: die Überschrift steht auf der Textkante (TCK-0038)
   -------------------------------------------------------------------------
   Kundentermin 14.09.2026: „Markengeschichte" stand mittig über einem
   linksbündigen Fließtext — zwei Kanten für einen Textblock.

   Divi setzt die Zentrierung als Moduleinstellung aus
   (`.et_pb_text_7 { text-align: center }`, gemessen im ausgelieferten
   Seitenquelltext). Angesteuert wird trotzdem NICHT über diese Nummer: Divi
   nummeriert bei jedem Layoutumbau neu durch, und dieselbe Falle ist in
   diesem Projekt schon zweimal zugeschnappt.

   Anker ist stattdessen die Sektion mit dem Wabencluster — derselbe Griff,
   den Punkt 17 für dieselbe Sektion benutzt. `:not(.flint-hero)` schließt den
   Kopfbereich aus, der den Cluster ebenfalls trägt.

   `text-align: start` statt `left`, damit die Regel nicht gegen die
   Schreibrichtung arbeitet — dieselbe Schreibweise, die Divi im Footer
   benutzt.
   ------------------------------------------------------------------------- */

:where(body.home, body.page-id-4742) .et_pb_section:not(.flint-hero):has(.hex-cluster) .et_pb_text h2 {
	text-align: start;
}

/* -------------------------------------------------------------------------
   21. Studienwerte als Kreise (TCK-0039)
   -------------------------------------------------------------------------
   Markup aus `inc/produkt-studie.php`. Die Werte kommen aus der ACF-Gruppe
   „Fortschritt Balken", die seit der efasit-Vorlage an jedem Produkt hängt und
   auf dem Narbengel (4364) vollständig gepflegt war — nur ausgegeben hat sie
   nie jemand.

   Der Ring ist ein SVG-Strich, kein Divi-Zähler. Warum nicht Divi: dessen
   Kreiszähler zeichnet auf ein `<canvas>` und startet über einen Waypoint.
   Genau diese Mechanik hat auf den Ratgeberseiten 30 Bilder unsichtbar gemacht
   (TCK-0035, Punkt 18), weil Divi das CSS, das sie zurückholt, auf einer
   Divi-5-Seite nicht mitlädt. Ein Ring ohne Skript kann diesen Fehler nicht
   machen.

   ⚠️ Bis zum 16.09.2026 war der Bogen ein `conic-gradient` mit einer Maske,
   die die Mitte herausschnitt. Das hat einen Nachteil, den erst die Kundin
   gesehen hat: ein Farbverlauf wird radial abgeschnitten, seine Enden stehen
   also immer quer. **Runde Bogenenden sind damit nicht möglich** — und die
   Vorlage hat runde. Ein Strich kann beides, deshalb jetzt ein `<circle>` mit
   `stroke-linecap: round`. Die Maske entfällt ersatzlos: ein Strich ist von
   sich aus hohl.

   Farben: der Bogen behält das Türkis der alten Seite (#35d4cc, dort als
   `data-bar-bg-color` gesetzt).

   ⚠️ Zwei Entscheidungen von hier sind am 16.09.2026 von der Kundin
   zurückgenommen worden — nachgezogen statt wegdiskutiert:

   1. **Die Spur ist weg.** Sie stand auf 10 % Türkis, damit der Kreis als
      Kreis lesbar bleibt. Genau das war der Einwand: „die Rädchen füllen sich
      nun nicht mehr so wie es auf der alten Seite war". Mit Spur ist der Ring
      immer geschlossen und der Anteil verschwindet in der Form.
   2. **Die Schrift ist grau.** Hier stand, die Zahl bleibe in
      --primary-color, weil die alte Seite grau war und Türkis auf Weiß nur
      1,84:1 erreicht. Der Kontrasteinwand galt dem TÜRKIS, nicht dem Grau:
      `rgba(2,0,0,.68)` kommt auf Weiß auf 7,7:1 und ist damit unbedenklich.
      Der Wert ist aus dem Modul der Entwurfsseite 1759 abgelesen
      (`title_text_color`), die Beschriftungsgröße ebenso (19px statt 14px).

   Die Fußnote steht weiterhin in --primary-color: die Kundin hat „grau ...
   unter den Rädchen" gesagt, das sind die Beschriftungen.

   Zwei Kreise nebeneinander am Handy, wie bei den Apotheken-Logos (Punkt 11).
   `auto-fit` macht daraus von selbst fünf in einer Reihe, sobald der Platz da
   ist — ohne Umbruchpunkt, den später jemand nachziehen müsste.
   ------------------------------------------------------------------------- */

.flint-studie {
	--flint-studie-farbe: #35d4cc;
	/* KEINE Spur. Das ist der eigentliche Befund der Kundin am 16.09.2026:
	   „die Rädchen füllen sich nun nicht mehr so wie es auf der alten Seite
	   war". Mit einer hellen Restspur ist der Ring immer ein geschlossener
	   Kreis, und der Anteil verschwindet in der Form. Die alte Seite zeichnet
	   nur den gefüllten Bogen — deshalb sieht man dort die 83 %. */
	/* Strichstärke in viewBox-Einheiten, also Prozent des Durchmessers —
	   damit bleibt der Ring bei jeder Größe gleich proportioniert. */
	--flint-studie-staerke: 4;
	/* Der Grauwert der Entwurfsseite 1759, aus deren Modul abgelesen
	   (`title_text_color`). Auf Weiß 7,7:1 — der Kontrasteinwand von oben galt
	   dem Türkis, nicht diesem Grau. */
	--flint-studie-schrift: rgba(2, 0, 0, 0.68);

	max-inline-size: 1080px;
	margin-inline: auto;
	padding-block: 1rem;
	text-align: center;
}

.flint-studie__titel {
	/* Dieselben 40px wie die übrigen Sektionsüberschriften (Punkt 19). */
	font-size: 40px;
	line-height: 1.15;
	margin-block-end: 2.5rem;
	color: var(--primary-color);
}

.flint-studie__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 2rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flint-studie__eintrag {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.flint-studie__ring {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: clamp(110px, 30vw, 168px);
	aspect-ratio: 1;
}

.flint-studie__bogen {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	/* Ohne die Drehung begänne der Bogen rechts auf 3 Uhr. Die Vorlage
	   beginnt oben. */
	transform: rotate(-90deg);
}

.flint-studie__bahn {
	fill: none;
	stroke: var(--flint-studie-farbe);
	stroke-width: var(--flint-studie-staerke);
	/* Der Punkt, um den es geht: runde Enden. Ein `conic-gradient` kann das
	   nicht, ein Strich schon. */
	stroke-linecap: round;
	/* `pathLength="100"` im Markup macht den Umfang zu genau 100 Einheiten —
	   der Anteil ist damit wörtlich die Prozentzahl, unabhängig vom Radius. */
	stroke-dasharray: var(--flint-studie-anteil, 0) 100;
}

.flint-studie__wert {
	position: relative;
	font-size: clamp(30px, 8vw, 38px);
	font-weight: 400;
	line-height: 1;
	color: var(--flint-studie-schrift);
}

.flint-studie__text {
	margin: 0;
	/* Die Beschriftung erbt sonst die Fettung des Code-Moduls; auf der alten
	   Seite stand sie in normaler Stärke, und fünf fette Blöcke nebeneinander
	   nehmen den Zahlen die Aufmerksamkeit. */
	font-weight: 400;
	font-size: 19px;
	line-height: 1.4;
	color: var(--flint-studie-schrift);
	max-inline-size: 22ch;
}

.flint-studie__fussnote {
	margin-block-start: 2rem;
	margin-inline: auto;
	font-size: 13px;
	line-height: 1.5;
	color: var(--primary-color);
	opacity: 0.8;
	max-inline-size: 60ch;
}

/* Dazwischen bricht `auto-fit` fünf Kreise auf 4 + 1 um — eine volle Reihe und
   ein Einzelstück darunter. Drei und zwei ist der Umbruch, den die
   Beschreibungskarten weiter oben schon benutzen (3 + 2), und er sieht nach
   Absicht aus statt nach Rest. */
@media only screen and (min-width: 768px) and (max-width: 1100px) {
	.flint-studie__liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 767px) {
	.flint-studie__titel {
		/* Wie in Punkt 19: am Handy die Größe der Seitenüberschrift. */
		font-size: 30px;
	}

	.flint-studie__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   22. Produktbeschreibung: der erste Aufzählungspunkt klebt am Absatz (TCK-0055)
   -------------------------------------------------------------------------
   Kundin am 16.09.2026, zum Screenshot der Sprühpflaster-Seite: „Müsste eig.
   auch ein Zeilenabstand wie darüber sein, sonst ist der erste Bullet Point so
   gequetscht."

   Gemessen im Browser (CDP, 1440px): der Absatz endet bei y=573, die Liste
   beginnt bei y=573 — der Abstand ist exakt NULL, während zwei Absätze
   untereinander 20px auseinanderstehen.

   Die Ursache ist eine Divi-Regel, die hier ins Leere greift:

       p                                  { padding-bottom: 1em }
       p:not(.has-background):last-of-type { padding-bottom: 0 }

   Der letzte Absatz einer Textbox braucht den Abstand nicht — deshalb die
   zweite Regel. Nur ist dieser Absatz gar nicht der letzte Inhalt: nach ihm
   kommt die Aufzählung. `:last-of-type` zählt aber nur `p`-Geschwister, und
   von denen ist er tatsächlich der letzte. Divi nimmt ihm den Abstand also
   genau dort weg, wo er gebraucht wird.

   Repariert wird an der LISTE, nicht am Absatz: `last-of-type` dort zu
   überschreiben würde den Abstand auch hinter dem wirklich letzten Absatz
   wieder einführen, wo die Null richtig ist. `p + ul` trifft ausschließlich
   den gemeldeten Fall — eine Liste unmittelbar hinter einem Absatz.

   Anker ist die Basisklasse `.et_pb_wc_description`, NICHT die durchnummerierte
   `.et_pb_wc_description_1_tb_body`: Divi nummeriert bei jedem Layoutumbau neu
   durch, und dieselbe Falle ist in diesem Projekt schon zweimal zugeschnappt
   (siehe Punkt 20).

   1em statt eines festen Werts, damit der Abstand derselbe bleibt wie der
   zwischen zwei Absätzen — auch am Handy, wo die Schriftgröße kleiner ist.
   ------------------------------------------------------------------------- */

.et-l--body .et_pb_wc_description p + ul {
	margin-block-start: 1em;
}

/* -------------------------------------------------------------------------
   23. Produktseiten: leere Sektionen fallen lassen (TCK-0057)
   -------------------------------------------------------------------------
   Aufgefallen beim Nachmessen von „Mobile ist der Abstand vor & nach den Icons
   zu gross". Die groessere Haelfte dieses Abstands ist gar kein Abstand,
   sondern eine Sektion ohne Inhalt.

   Das Layout 4396 gilt fuer alle acht Produkte, und mehrere seiner Sektionen
   enthalten nur EIN Code-Modul mit einem Shortcode, der fuer Produkte ohne die
   passenden Daten korrekt einen leeren String liefert — `[flint_produkt_studie]`
   etwa fuer sieben von acht Produkten. Der Shortcode verhaelt sich richtig;
   Divis Sektion samt Polsterung bleibt trotzdem stehen.

   Gemessen am 16.09.2026 bei 390px, je Sektion 40px Polsterung oben und unten
   plus 30px der Zeile:

       Narbengel        Sektion 1 Icons, Sektion 2 Studie   — beide gefuellt
       Spruehpflaster   Sektion 2 leer                      — rund 140px nichts
       Kinderpflaster   Sektion 1 UND 2 leer                — rund 280px nichts

   Der Selektor ist gegen drei Produkte geprueft und trifft dort exakt die
   leeren Sektionen — beim Narbengel entsprechend keine. Er verlangt
   ausdruecklich alle drei Bedingungen: ein leeres Code-Modul MUSS da sein, ein
   gefuelltes darf NICHT da sein, und kein anderer Modultyp. `.et_pb_code_inner`
   ist bei diesen Modulen restlos leer, `:empty` greift also.

   `display:none` und nicht nur die Polsterung auf 0: die Sektion hat nichts zu
   zeigen. Bekommt ein Produkt spaeter Studienwerte, ist das Modul nicht mehr
   leer und die Sektion erscheint von selbst wieder — die Regel heilt mit.

   ⚠️ Wirkt auf ALLEN Breiten, nicht nur am Handy. Leerraum ist auch am Desktop
   Leerraum; die Kundin hat nur am Handy hingesehen.
   ------------------------------------------------------------------------- */

.et-l--body .et_pb_section:has(.et_pb_code_inner:empty):not(:has(.et_pb_code_inner:not(:empty))):not(:has(.et_pb_text, .et_pb_image, .et_pb_button, .et_pb_tabs, .et_pb_accordion, [class*="et_pb_wc_"])) {
	display: none;
}

/* -------------------------------------------------------------------------
   24. „Shop finden": Kauf-Buttons und Apotheken-Raster (TCK-0068)
   -------------------------------------------------------------------------
   Markup: [flint_bezugsquellen], inc/bezugsquellen.php. Die Werte sind an der
   Produktseite gemessen (CDP, 24.09.2026); deren Regeln oben (§6, §7) hängen
   an `body.single-product` und an Divi-Moduleinstellungen und greifen hier
   deshalb nicht.

   ⚠️ Spezifität: Divi setzt die Linkfarbe je nach Zustand seiner erzeugten
   Dateien als `a, .et-db #et-boc .et-l a` — Gewicht 1,2,1 (TCK-0046). Die
   Button-Regel muss darüber liegen, sonst ist die Schrift magenta auf
   Magenta. `#et-boc .et-l .flint-bq a.flint-bq__btn` = 1,4,1.
   ------------------------------------------------------------------------- */

#et-boc .et-l .flint-bq .flint-bq__titel {
	/* Divi setzt am h2 im Textmodul `padding-bottom: 10px` und sonst nichts —
	   ohne eigenen Abstand klebt die Überschrift am Button. */
	margin-block-end: 24px;
}

#et-boc .et-l .flint-bq .flint-bq__buttons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 0 0 56px;
}

#et-boc .et-l .flint-bq a.flint-bq__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-block-size: 58px;
	padding: 10px 1.2em;
	border: 2px solid #db0a5b;
	background-color: #db0a5b;
	color: #fff;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 34px;
	text-align: center;
	text-decoration: none;
}

#et-boc .et-l .flint-bq a.flint-bq__btn:hover,
#et-boc .et-l .flint-bq a.flint-bq__btn:focus-visible {
	/* Wie §6: dasselbe Magenta rund 20 % dunkler, 6,3:1 mit Weiß. */
	background-color: #b00849;
	border-color: #b00849;
	color: #fff;
}

#et-boc .et-l .flint-bq .flint-bq__pfeil {
	inline-size: 0.8em;
	block-size: 0.8em;
	flex: none;
}

#et-boc .et-l .flint-bq ul.flint-bq__apotheken {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#et-boc .et-l .flint-bq ul.flint-bq__apotheken li {
	display: flex;
	justify-content: center;
	padding: 0;
}

#et-boc .et-l .flint-bq ul.flint-bq__apotheken li::before {
	content: none;
}

/* Die Logodateien sind 625×625 mit Weißraum; der Zuschnitt passiert im Bild,
   `contain` lässt ihn stehen — wie auf der Produktseite. */
#et-boc .et-l .flint-bq ul.flint-bq__apotheken img {
	display: block;
	inline-size: 200px;
	max-inline-size: 100%;
	block-size: 150px;
	object-fit: contain;
	transition: transform 0.2s ease, filter 0.2s ease;
}

#et-boc .et-l .flint-bq ul.flint-bq__apotheken a:hover img,
#et-boc .et-l .flint-bq ul.flint-bq__apotheken a:focus-visible img {
	transform: translateY(-4px);
	filter: saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
	#et-boc .et-l .flint-bq ul.flint-bq__apotheken img {
		transition: none;
	}

	#et-boc .et-l .flint-bq ul.flint-bq__apotheken a:hover img {
		transform: none;
	}
}

@media only screen and (max-width: 980px) {
	#et-boc .et-l .flint-bq ul.flint-bq__apotheken {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 12px;
	}

	#et-boc .et-l .flint-bq ul.flint-bq__apotheken img {
		inline-size: 100%;
		block-size: 110px;
	}
}


/* -------------------------------------------------------------------------
   25. FAQ auf Divi-4-Seiten: [flint_faq] (inc/faq.php)
   -------------------------------------------------------------------------
   Die Werte sind am Divi-5-Akkordeon der Startseite gemessen (CDP,
   24.09.2026), damit beide FAQ gleich aussehen: Frage Roboto Condensed
   19px/700 #666, offen #2ad2c9; Antwort 16px/500 #555, Zeilenhöhe 1.7;
   Eintrag 20px oben/unten, 44px rechts, 1px #e4e4e4 unten, 10px Abstand;
   Symbol ETmodules e050 (Plus im Kreis) bzw. e04f (Minus), 20px, #2ad2c9.

   Spezifität: Divi schreibt Überschriften und Links mit `#et-boc .et-l`
   (bis 1,2,1, TCK-0046); `#et-boc .et-l .flint-faq …` liegt darüber.
   ------------------------------------------------------------------------- */

#et-boc .et-l .flint-faq .flint-faq__eintrag {
	margin-block-end: 10px;
	padding: 20px 44px 20px 2px;
	border-block-end: 1px solid #e4e4e4;
}

#et-boc .et-l .flint-faq .flint-faq__frage {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
}

#et-boc .et-l .flint-faq .flint-faq__frage::-webkit-details-marker {
	display: none;
}

#et-boc .et-l .flint-faq .flint-faq__frage::after {
	content: "\e050";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: -42px;
	translate: 0 -50%;
	color: #2ad2c9;
	font-family: ETmodules;
	font-size: 20px;
	line-height: 1;
}

#et-boc .et-l .flint-faq .flint-faq__eintrag[open] .flint-faq__frage::after {
	content: "\e04f";
}

#et-boc .et-l .flint-faq .flint-faq__frage:focus-visible {
	outline: 2px solid #2ad2c9;
	outline-offset: 4px;
}

#et-boc .et-l .flint-faq h3.flint-faq__titel {
	margin: 0;
	padding: 0;
	color: #666;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

#et-boc .et-l .flint-faq .flint-faq__eintrag[open] h3.flint-faq__titel,
#et-boc .et-l .flint-faq .flint-faq__frage:hover h3.flint-faq__titel {
	color: #2ad2c9;
}

#et-boc .et-l .flint-faq .flint-faq__antwort {
	padding-block-start: 12px;
	color: #555;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
}

#et-boc .et-l .flint-faq .flint-faq__antwort p {
	padding: 0;
}

#et-boc .et-l .flint-faq .flint-faq__antwort p + p {
	margin-block-start: 1em;
}


/* -------------------------------------------------------------------------
   26. Kontaktformular (Ninja Forms, Kontaktseite 55)
   -------------------------------------------------------------------------
   ⚠️ Das Formular-CSS steht NICHT hier, sondern in Divis Datenbank-Option
   `et_divi.divi_custom_css` („Short contact form", ausgeliefert über
   et-divi-customizer.min.css) — mit `border-radius: 20px !important` an
   jedem Feld. Die Website hat sonst nirgends Rundungen (Michael, 24.09.2026).
   Statt die Datenbank-Option zu ändern, die unversioniert ist und beim Umzug
   eigene Wege geht, wird hier mit höherem Gewicht überschrieben:
   `#et-boc .et-l .nf-form-content …` = 1,3,0 + !important gegen 0,2,0.

   Zweitens blendete dieselbe Option `.nf-error-msg` aus. Mit der
   Pflicht-Checkbox zum Datenschutz sähe man dann nicht, warum das Absenden
   nicht klappt — Fehler müssen als Text am Feld stehen (WCAG 3.3.1).
   ------------------------------------------------------------------------- */

#et-boc .et-l .nf-form-content .ninja-forms-field,
#et-boc .et-l .nf-form-content .listselect-wrap .nf-field-element div,
#et-boc .et-l .nf-form-content .nf-field-element::after {
	border-radius: 0 !important;
}

#et-boc .et-l .nf-form-content .nf-error-msg {
	display: block;
	margin-block-start: 6px;
	font-size: 14px;
}

/* Die Feldregel aus der Datenbank (min-height 50px, padding 16px, Fläche)
   trifft über `.ninja-forms-field` auch die Checkbox. */
#et-boc .et-l .nf-form-content input[type="checkbox"].ninja-forms-field {
	inline-size: 20px;
	block-size: 20px;
	min-height: 0 !important;
	margin: 2px 0 0;
	padding: 0 !important;
	accent-color: #072355;
	cursor: pointer;
}

#et-boc .et-l .nf-form-content .checkbox-wrap .nf-field-element,
#et-boc .et-l .nf-form-content .checkbox-wrap .nf-field-label {
	display: flex;
	align-items: flex-start;
}

#et-boc .et-l .nf-form-content .checkbox-wrap .nf-field-label label {
	color: #333;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

#et-boc .et-l .nf-form-content .checkbox-wrap .nf-field-label a {
	color: #072355;
	text-decoration: underline;
}

/* Absenden wie die übrigen Buttons der Seite (gemessen am Button „Mehr zur
   Markengeschichte" der Startseite, 24.09.2026): #db0a5b, weiß,
   Roboto Condensed 16px/500. Die Datenbank-Option färbt ihn sonst mit
   `!important` in 30 % Türkis mit grauer Schrift — das las sich wie
   „deaktiviert". Hover wie §6: #b00849. */
#et-boc .et-l .nf-form-content .submit-container input.ninja-forms-field {
	min-height: 0 !important;
	padding: 10px 24px !important;
	background-color: #db0a5b !important;
	color: #fff;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px !important;
	font-weight: 500;
	line-height: 1.7;
}

#et-boc .et-l .nf-form-content .submit-container input.ninja-forms-field:hover,
#et-boc .et-l .nf-form-content .submit-container input.ninja-forms-field:focus-visible {
	background-color: #b00849 !important;
}


/* -------------------------------------------------------------------------
   27. Hero mit Vollbreitenbild und Stanze (Ratgeber, Shop finden)
   -------------------------------------------------------------------------
   Michael, 24.09.2026: jeder Hero bekommt die Stanze. Gemessen danach: das
   Divi-Modul „Vollbreitenbild" trägt eine FESTE Höhe (460 bzw. 550px), das
   Bild darin aber nicht — beim Ratgeber Sprühpflaster endete es bei 294px,
   darunter 166px Weiß, und die weiße Stanze saß unsichtbar auf Weiß. Am Handy
   hielt Divi dieselben 460px für ein 80px hohes Bild.

   Deshalb füllt das Bild seine Box (`cover`), und am Handy ist die Box 200px
   hoch — derselbe Wert wie der Vorschlag für „Shop finden" vom 24.09.2026.
   Gilt nur in Sektionen, die die Stanze tragen; alle anderen Bilder bleiben
   unberührt. Zurücknehmen = diesen Block löschen.
   ------------------------------------------------------------------------- */

#et-boc .et-l .et_pb_section:has(> .et_pb_fullwidth_code .flint-kante) > .et_pb_fullwidth_image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

@media only screen and (max-width: 980px) {
	#et-boc .et-l .et_pb_section:has(> .et_pb_fullwidth_code .flint-kante) > .et_pb_fullwidth_image {
		block-size: 200px !important;
	}
}


/* -------------------------------------------------------------------------
   28. Semantisches HTML: Sprunglink, Akkordeon-Button, Kopf-Bedienelemente (inc/semantik.php)
   -------------------------------------------------------------------------
   Der Sprunglink ist unsichtbar, bis er per Tastatur den Fokus bekommt —
   dann oben links, in der Hausfarbe. Der Button im Akkordeon-Titel soll
   nichts an der Optik ändern: er übernimmt Schrift, Farbe und Breite des
   Titels, das Plus/Minus-Symbol bleibt Divis ::before am Titel.
   ------------------------------------------------------------------------- */

.flint-sprunglink {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 8px;
	z-index: 100000;
	padding: 10px 16px;
	background: #072355;
	color: #fff;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px;
	text-decoration: none;
}

.flint-sprunglink:focus {
	inset-block-start: 8px;
	outline: 2px solid #2ad2c9;
	outline-offset: 2px;
}

#et-boc .et-l .et_pb_toggle_title .flint-toggle-knopf {
	display: block;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: inherit;
	cursor: pointer;
}

#et-boc .et-l .et_pb_toggle_title .flint-toggle-knopf:focus-visible {
	outline: 2px solid #2ad2c9;
	outline-offset: 4px;
}

/* Handymenü-Symbol und Such-Buttons im Kopf: per Tastatur erreichbar seit
   12.10.2026 (inc/semantik.php) — der Fokus muss dann auch sichtbar sein. */
#et-boc .et-l .mobile_menu_bar[role="button"]:focus-visible,
#et-boc .et-l .et_pb_menu__search-button:focus-visible,
#et-boc .et-l .et_pb_menu__close-search-button:focus-visible {
	outline: 2px solid #2ad2c9;
	outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   29. Umbrüche in Überschriften und Fließtext
   -------------------------------------------------------------------------
   Symptom: Überschriften und Absätze brachen am Handy „komisch" um — lange
   Wörter mitten im Wort ohne Trennstrich, zentrierte Überschriften mit einem
   einzelnen Wort in der letzten Zeile.

   Ursache ist Divi, nicht der Inhalt: Das Eltern-Theme setzt
   `.et_pb_text { word-wrap: break-word }` (gemessen im ausgelieferten HTML
   am 02.10.2026), eine Silbentrennung gibt es dagegen nirgends. Passt ein
   Wort nicht in die Zeile, schneidet der Browser es also an beliebiger
   Stelle ab — bei „Hautverletzungen", „Wundreinigungstücher" oder
   „Entzündungshemmend" auf 390 px schnell der Fall.

   Deshalb drei Dinge, alle nur im Seiteninhalt — `.et-l--post` (Seiten aus
   dem Builder) und `.et-l--body` (Theme-Builder-Layout der Produktseiten).
   Header (`.et-l--header`), Mega-Menü und Footer bleiben unberührt.
   1. Silbentrennung nach deutschem Wörterbuch (`hyphens: auto`, die Seite
      trägt lang="de"). Fließtext überall, Überschriften erst unter 981 px —
      am Rechner passen sie, dort wären Trennstriche nur unruhig. Getrennt
      werden nur lange Wörter, mit mindestens drei bzw. vier Zeichen je
      Seite; Firefox und Safari ignorieren die Grenze und trennen etwas
      freier.
   2. `text-wrap: balance` für Überschriften: gleich lange Zeilen statt
      einer vollen und einer mit einem Wort. Wirkt nur bis sechs Zeilen.
   3. `text-wrap: pretty` für Absätze und Listen: kein einzelnes Wort in
      der letzten Zeile.
   `overflow-wrap: break-word` bleibt als Notbremse für URLs und
   Produktnummern, greift aber erst, wenn auch die Trennung nichts mehr
   hilft. Ältere Browser ignorieren alles hier und brechen wie bisher.
   Zurücknehmen = diesen Block löschen.
   ------------------------------------------------------------------------- */

#et-boc .et-l:is(.et-l--post, .et-l--body) :is(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	text-wrap: balance;
}

#et-boc .et-l:is(.et-l--post, .et-l--body) :is(p, li, dd, blockquote, td) {
	overflow-wrap: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 8 3 3;
	text-wrap: pretty;
}

@media only screen and (max-width: 980px) {
	#et-boc .et-l:is(.et-l--post, .et-l--body) :is(h1, h2, h3, h4, h5, h6) {
		hyphens: auto;
		-webkit-hyphens: auto;
		hyphenate-limit-chars: 10 4 4;
	}
}

/* --- Zeilenhöhe und Größe der Überschriften: wofür sie gelten -----------
   Nur Überschriften in Textmodulen und nur solche OHNE Klasse — also die,
   die im Divi-Editor getippt werden. Überschriften aus eigenen Shortcodes
   tragen alle eine Klasse und haben ihre Werte schon: `.flint-pb__titel`
   (18px/1,3), `.flint-studie__titel` (40 → 30px), `.flint-rg__title`,
   `.flint-faq__titel`. Die bleiben damit genau, wie sie sind.

   Spezifität (1,4,1), Sektionsrolle ab (1,5,1): schlägt Divi 4
   (`.et_pb_text_N h2`, 0,1,1) wie Divi 5
   (`.et-db #et-boc .et-l .et_pb_text_N h2`, 1,3,1) ohne !important. */

/* Divi setzt `h1–h6 { line-height: 1em }`. Einzeilig fällt das nicht auf,
   sobald eine Überschrift umbricht, stoßen Ober- und Unterlängen der Zeilen
   aneinander. 1,2 trägt bei allen Größen hier. Gilt auch am Rechner. */
#et-boc .et-l:is(.et-l--post, .et-l--body) .et_pb_text :is(h1, h2, h3):not([class]) {
	line-height: 1.2;
}

/* --- Fließende Überschriftengrößen unter 981 px -------------------------
   Divi gibt am Handy pro Modul feste Werte aus, die nicht zusammenpassen
   (gemessen 02.10.2026): Seitentitel springen von 44 auf 28 px, „Hier
   kaufen!" von 48 auf 24 px, die Sektionsüberschriften der Startseite
   bleiben bei 40 px — auf 390 px zwei Wörter pro Zeile.

   Stattdessen eine Skala mit clamp(), linear von 360 px (Minimum) bis
   980 px (Maximum). Am Rechner bleiben Divis Modulwerte unverändert.
   Die Formel je Stufe: Steigung = (max − min) / 620 px, als vw;
   Sockel = min − Steigung × 360 px.

   Zwei Rollen für h2, sonst würden die Zwischenüberschriften im Ratgeber
   (Divi-Standard 26 px) auf Sektionsgröße wachsen. Erkannt wird die Rolle
   am Markup, nicht an der Modulnummer: Sektionsüberschriften („Unsere
   Produkte", „Häufig gestellte Fragen", „Hier kaufen!") stehen allein in
   ihrem Textmodul, Zwischenüberschriften haben Fließtext dahinter. Die
   FAQ-Überschrift aus Abschnitt 19 zählt immer als Sektion; deren 30px am
   Handy werden hiermit durch die Skala ersetzt. */

@media only screen and (max-width: 980px) {
	/* Seitentitel: 28 → 36 px */
	#et-boc .et-l:is(.et-l--post, .et-l--body) .et_pb_text h1:not([class]) {
		font-size: clamp(28px, 23.4px + 1.29vw, 36px);
	}

	/* Zwischenüberschrift: 22 → 26 px */
	#et-boc .et-l:is(.et-l--post, .et-l--body) .et_pb_text h2:not([class]) {
		font-size: clamp(22px, 19.7px + 0.65vw, 26px);
	}

	/* Sektionsüberschrift: 26 → 36 px */
	#et-boc .et-l:is(.et-l--post, .et-l--body) .et_pb_text_inner > h2:only-child:not([class]),
	#et-boc .et-l:is(.et-l--post, .et-l--body) .et_pb_row:has(.et_pb_toggle) .et_pb_text h2:not([class]) {
		font-size: clamp(26px, 20.2px + 1.61vw, 36px);
	}

	/* h3: 19 → 22 px */
	#et-boc .et-l:is(.et-l--post, .et-l--body) .et_pb_text h3:not([class]) {
		font-size: clamp(19px, 17.3px + 0.48vw, 22px);
	}
}


/* -------------------------------------------------------------------------
   30. Startseiten-Hero: Bildmitte rechts neben der Überschrift
   -------------------------------------------------------------------------
   Vorgabe 02.10.2026: der Mittelpunkt des Header-Bildes soll leicht rechts
   neben dem (mittig stehenden) Header-Text liegen. Gilt nur für
   `.flint-hero` und nur am Rechner.

   Mit `background-position` allein geht das nicht: `calc(50% + Versatz)`
   rückt die Bildmitte zwar exakt um den Versatz nach rechts, aber sobald
   `cover` das Bild auf die Sektionsbreite skaliert (breite Schirme), fehlt
   links genau dieser Versatz — ein Streifen ohne Bild.

   Deshalb trägt ein Pseudo-Element das Bild, und es ist um den doppelten
   Versatz BREITER als die Sektion (rechts übersteht, `.flint-hero` schneidet
   mit `overflow: hidden` ab). Zentriert in dieser Box liegt die Bildmitte
   genau `--flint-hero-versatz` rechts der Sektionsmitte, und `cover` deckt
   die Box — also auch die Sektion — immer vollständig. Unabhängig vom Bild:
   welches Motiv Divi an der Sektion hinterlegt, kommt per
   `background: inherit` mit, die Datei wird kein zweites Mal geladen.

   `isolation: isolate` macht die Sektion zum Stapelkontext. Erst dadurch
   liegt `z-index: -1` ÜBER dem Sektionshintergrund (der darunter
   unverändert stehen bleibt und vollständig verdeckt ist) und UNTER allen
   Inhalten.

   ::after und nicht ::before: ::before trägt unter 981 px das Overlay aus
   „Lesbarkeit der Überschrift"; die beiden kommen sich so nie in die Quere.

   Unter 981 px bleibt alles beim Alten (links unten verankert): dort steht
   der Text über die volle Breite, „rechts daneben" gibt es nicht — und die
   Verankerung links ist die Antwort auf die Beanstandung vom 19.08.2026.

   `--flint-hero-versatz`: Abstand der Bildmitte von der Sektionsmitte.
   TESTWERT 14vw, höchstens 200 px (Vorgabe 02.10.2026: „testweise weiter
   links"; die erste Fassung stand auf 28vw / 400 px). Bei 1440 px liegt die
   Bildmitte damit 200 px rechts der Mitte. Pro Seite anpassbar, indem man
   die Variable an der Sektion überschreibt.

   `--flint-hero-y`: vertikaler Ankerpunkt des Bildes. Steht auf `top`
   (Vorgabe 02.10.2026: Punkt an der Oberkante). Ist die Sektion höher als
   das Bild (Seitenverhältnis 3,48 : 1), schneidet `cover` dadurch unten
   etwas ab statt oben; `bottom` oder `center` stellen den früheren Stand
   her.
   Zurücknehmen = diesen Block löschen.
   ------------------------------------------------------------------------- */

@media only screen and (min-width: 981px) {
	.et_pb_section.flint-hero {
		--flint-hero-versatz: min(14vw, 200px);
		--flint-hero-y: top;
		isolation: isolate;
	}

	.et_pb_section.flint-hero::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inset-inline-end: calc(-2 * var(--flint-hero-versatz));
		z-index: -1;
		background: inherit;
		background-size: cover;
		background-position: center var(--flint-hero-y);
		background-repeat: no-repeat;
		background-attachment: scroll;
		pointer-events: none;
	}
}