/* ============================================================================
   marke.css — BRAND-SCHICHT über dem Klon. CHIRURGISCH, nicht flächendeckend.
   ============================================================================
   Zweite Fassung. Die erste hat die Seite kaputt gemacht, und der Grund gehört
   hierhin, damit ihn niemand wiederholt:

   ⛔ WAS SCHIEFGING (Nutzerurteil 2026-08-02: "sieht beschissen aus, 0 optimiert")
   Fassung 1 war ein Holzhammer aus !important über die ganze Seite:
     · JEDER Radius auf 6px             -> Formhierarchie der Vorlage weg
     · JEDE Ueberschrift auf Gewicht 500 -> H1/H2/H3 eingeebnet
     · JEDE Flaeche auf Papier + 1px     -> Abschnitte ohne Trennung, alles flach
     · Sektions-Rhythmus global neu      -> mal gequetscht, mal leer
   Ein Theme traegt seine Entscheidungen in genau diesen Werten. Wer sie pauschal
   ueberschreibt, ersetzt ein Design durch eine Meinung.

   ✅ REGEL DIESER FASSUNG
   Angefasst wird NUR, was Marke traegt und nachweislich fremd ist:
     1. Akzentfarbe   2. Kopfbalken   3. Kaufflaeche   4. Marktplatz-Hinweis
   Radien, Schriftgewichte, Flaechen, Rhythmus bleiben wie die Vorlage sie setzt.

   FARBHERKUNFT (gemessen, korrigiert):
   Das orange Produktbild war ein Lieferanten-Render. Das FOTO der echten Ware
   zeigt ein ROTES Etikett: #b02c20 / #af2b1f (H5 S.82 V.69), schwarze Kappe,
   Bernsteinglas. Unser Akzent ist also rot — und damit ohnehin klar getrennt
   von der orangen Vorlage.
   ========================================================================== */

:root {
  --m-red: #B4472B;      /* Etikett der echten Ware */
  --m-red-d: #93351F;
  --m-ink: #241F1C;      /* Kappe */
  --m-paper: #FBF6EF;    /* Etikett-Weiss, kuehl */
  --m-line: #E8DCCB;
}

/* ── 2 · KOPF — der Balken ist die Signatur der Vorlage ──────────────────── */
/* Schwarz war die falsche Antwort: ein dunkler Balken ueber einer hellen
 * Papier-Seite ist ein Fremdkoerper, kein Marken-Kopf. Die Ware ist rotes
 * Etikett auf kuehlem Weiss — also traegt der Kopf das Papier, das Wortzeichen
 * die Tinte, und eine haarfeine rote Kante unten macht ihn zur Marke. */
header, .header, [class*="header-wrapper"] {
  background: var(--m-paper) !important;
  border-bottom: 1px solid var(--m-line) !important;
  box-shadow: inset 0 -3px 0 var(--m-red) !important;
}
header a, header svg, header .header__heading-link { color: var(--m-ink) !important; }
header .header__heading-link { letter-spacing: -0.01em; }

/* ── 3 · KAUFFLAECHE — Farbe und Rueckmeldung, Form bleibt ───────────────── */
.product-form__submit, button[name="add"], .shopify-payment-button__button {
  background: var(--m-red) !important;
  border-color: var(--m-red) !important;
  transition: background-color 140ms ease, transform 120ms ease;
}
.product-form__submit:hover, button[name="add"]:hover { background: var(--m-red-d) !important; }
.product-form__submit:active, button[name="add"]:active { transform: translateY(1px); }
.re-sub-widget__variant-card.active { border-color: var(--m-red) !important; }
:focus-visible { outline: 2px solid var(--m-red); outline-offset: 2px; }

/* ── 4 · MARKTPLATZ-HINWEIS — Fussnote, keine Anzeige ────────────────────
 * Gemessen bei 393x441: Kasten 331px hoch, Sektion 453px, Produkt erst bei
 * 775px — 1,75 Bildschirme, bevor irgendetwas verkauft. */
[class*="border-dashed"] {
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  max-width: 560px !important;
  margin-inline: auto !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-left: 3px solid var(--m-red) !important;
}
[class*="border-dashed"] p { font-size: 12px !important; margin: 0 !important; }

/* ── 5 · GALERIE — gemischte Ursprungsgroessen in einer Schiene ──────────── */
.splide__slide img { width: 100% !important; height: auto !important; display: block; }

/* ── 6 · VORSCHAU-LEISTE — sie ist eine Leiste, keine zweite Galerie ──────
 * Die Vorlage gibt ihren Vorschaubildern die Groesse ueber Theme-JS, das im
 * Spiegel nicht laeuft. Ohne Fassung rendert die Leiste in voller Breite und
 * die Seite zeigt dasselbe Motiv zweimal untereinander. Vier Vorschauen in
 * einer Reihe, feste Hoehe — mehr braucht eine Leiste nicht. */
#product-thumbnail-slider .splide__list { display: flex !important; gap: 8px; }
#product-thumbnail-slider .splide__slide { width: calc(25% - 6px) !important; flex: 0 0 auto; }
#product-thumbnail-slider .splide__slide img { height: 72px !important; object-fit: cover; border-radius: 4px; }
#product-thumbnail-slider .splide__arrow { display: none !important; }
#product-thumbnail-slider .splide__slide.is-active img { outline: 2px solid var(--m-red); outline-offset: -2px; }
#product-thumbnail-slider { margin-top: 8px !important; }

/* Der Abstand zwischen Marktplatz-Hinweis und Galerie war Sektionsluft der
 * Vorlage plus Kastenluft — auf dem ersten Bildschirm der teuerste Platz. */
[class*="border-dashed"] { margin-block: 0 0 4px !important; }

/* Der Hinweis trug den 40px-Radius der Vorlage und las sich damit als
 * Sprechblase. Eine Fussnote ist ein Kasten, keine Blase. */
[class*="border-dashed"] { border-radius: 4px !important; }
/* Galerie direkt unter den Hinweis, statt einer halben Bildschirmhoehe Luft. */
#product-main-slider, .product__media-wrapper { margin-top: 4px !important; }

/* ── 7 · BEFUNDE AUS DEM ZWEITAUGEN-AUDIT (GPT-5.6, 20 Punkte) ────────────
 * Nur die, die CSS loesen kann. Der Rest (Icons) wurde in den Bilddateien
 * selbst umgefaerbt — sie trugen das Orange eingebrannt, nicht im Stylesheet. */

/* Gruene Haken und Money-Back-Zeile waren eine dritte Farbe im System. */
[class*="text-green"], [class*="text-\[\#1"], .text-emerald-500, svg[class*="green"] { color: var(--m-red) !important; }
[fill="#22c55e"], [fill="#16a34a"], [fill="#10b981"] { fill: var(--m-red) !important; }

/* Zahlungslogos: gleiche Hoehe, ruhiges Raster statt Treppe. */
[class*="list-payment"], [class*="payment-icon"], .payment-marks { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px !important; }
[class*="list-payment"] img, [class*="payment-icon"] img, .payment-marks img { height: 22px !important; width: auto !important; object-fit: contain; }

/* Pagination: 17 Punkte fuer 17 Folien sind eine Zaehlung, keine Orientierung. */
.splide__pagination { flex-wrap: nowrap !important; gap: 5px !important; padding: 6px 0 !important; }
.splide__pagination__page { width: 5px !important; height: 5px !important; margin: 0 !important; background: var(--m-line) !important; opacity: 1 !important; }
.splide__pagination__page.is-active { background: var(--m-red) !important; }
#product-thumbnail-slider .splide__pagination { display: none !important; }

/* Dosierkarten: Einheiten sollen in einer Zeile bleiben. */
[class*="dose"] , [class*="weight"] { hyphens: none; }

/* Statistik-Block: Riesenzahlen und Leerflaechen machten ihn unnoetig lang. */
[class*="stat"] [class*="text-[6"], [class*="stat"] [class*="text-[7"], [class*="stat"] [class*="text-[8"] { font-size: 2.25rem !important; line-height: 1.05 !important; }

/* Vergleichstabelle: Produktbilder auf gleiche sichtbare Hoehe. */
table img, [class*="compare"] img { max-height: 56px !important; width: auto !important; object-fit: contain; }

/* ── 8 · EINE LAUTE STIMME ────────────────────────────────────────────────
 * Die Vorlage faerbt auch FLIESSTEXT in ihrer Markenfarbe. Nach dem 1:1-Tausch
 * war deshalb die halbe Seite rot statt orange — genauso unruhig, nur in einer
 * anderen Farbe. Rot bleibt fuer Handlung und Ueberschrift; alles, was man
 * liest, ist Tinte. Das ist der Unterschied zwischen Farbe haben und Farbe
 * einsetzen. */
p, li, td, dd, .adv-main-section__description, [class*="description"], [class*="body"] {
  color: var(--m-ink) !important;
}
table td, table th { color: var(--m-ink) !important; }
table th[scope="row"], table tbody th { font-weight: 500 !important; }
/* Ueberschriften duerfen die Marke tragen, aber nicht jede. */
h3, h4, h5, .text-\[20px\], .text-\[18px\] { color: var(--m-ink) !important; }

/* ── 9 · KONTRAST AUF FARBFLAECHEN ───────────────────────────────────────
 * Nutzerbefund: "schwarz auf rot passt ueberhaupt nicht". Stimmt — auf einer
 * satten Flaeche ist dunkler Text weder lesbar noch ruhig. Auf Farbe kommt
 * Weiss, ausnahmslos. */
[style*="background-color: #B4472B"], [style*="background:#B4472B"],
.bg-\[\#B4472B\], .bg-\[\#b4472b\], .bg-\[\#C0281C\], .bg-\[\#c0281c\] { color: #fff !important; }
[style*="background-color: #B4472B"] *, .bg-\[\#B4472B\] *, .bg-\[\#b4472b\] * { color: #fff !important; }

/* ── 10 · HERO-TEXT NEU FORMATIERT ───────────────────────────────────────
 * Vorher: Ueberschrift, Vorzeile, Fliesstext, Groessenangabe, drei Mini-Spalten,
 * Garantiezeile — sechs Ebenen ohne Rangfolge. Das Original haelt genau drei:
 * Aussage, Beleg, Groesse. Also: eine klare Treppe statt sechs gleich lauter
 * Zeilen. */
/* GEMESSEN 04.08.2026 — die Vergroesserung gilt auf dieser Seite NICHT.
 * Die Regel stammt aus der PDP-Anpassung darueber (sechs gleich laute Ebenen
 * -> klare Treppe) und ist dort richtig. Auf einem Advertorial trifft
 * `h1 ~ [class*="text-[16px]"]` aber den GESAMTEN Fliesstext: jeder
 * Textblock, der nach der Ueberschrift kommt, ist ein Geschwister.
 * Messung gegen den Originalspiegel bei 430px:
 *     Original  16px / 24px  (22 Bloecke)   1.61 Zeichen je Pixel Texthoehe
 *     Klon      17px / 26px  (18 Bloecke)   1.45 Zeichen je Pixel
 * Das sind +6 % Schrift und +8 % Zeilenhoehe = 10 % weniger Text pro Flaeche.
 * Genau das meldet der Betreiber als "zu viele freie Stellen" — nicht Luecken
 * zwischen Bloecken (pixelweise gemessen: Klon 31.2 %, Original 35.1 %
 * Leerraum, der Klon ist also DICHTER), sondern duennerer Textsatz.
 * SCHARF WURDE SIE ERST HEUTE: vorher hatte die Seite gar kein <h1>, der
 * Geschwister-Selektor lief also ins Leere. Der Ueberschriften-Fix hat sie
 * aktiviert — eine Nebenwirkung, die nur der Vergleich mit dem Original zeigt.
 * Die Farbe bleibt: sie gehoert zur Marken-Anpassung und ist nicht das Problem. */
h1 + p, h1 ~ [class*="text-[16px]"] { color: var(--m-ink) !important; }
h1 { margin-bottom: 10px !important; }
/* Die drei Merkmal-Spalten waren enger gesetzt als der Fliesstext darueber und
 * lasen sich wie eine Fussnote. Sie sind das Argument, also bekommen sie Luft. */
/* Gemessen 04.08.2026: dieser Selektor liest den KLASSENNAMEN, nicht die
 * Wirkung. `md:grid-cols-3` enthaelt den Text "grid-cols-3" — die Regel griff
 * deshalb AUCH bei 430px, wo das Dreispalten-Raster gar nicht aktiv ist.
 * Folge: 8px Einzug je Seite auf `div.col-span-1.md:col-span-2`, damit
 * Inhaltsbreite 374 statt 390 (Original) — die "vielen freien Flaechen".
 * Nachgewiesen ueber die Ahnenkette am Hero-Bild: erste abweichende Ebene
 * war genau dieses div (Original padding-left 0px, Klon 8px).
 * Der kaskadenaudit warnt vor genau dieser Bauform ("39 Attribut-Selektoren
 * auf class — dort sagt der Name nichts").
 * Die Regel bleibt inhaltlich unveraendert, gilt aber erst ab dem
 * Breakpoint, ab dem das Raster wirklich dreispaltig ist. */
@media (min-width: 768px) {
  [class*="grid-cols-3"] > div { padding: 10px 8px !important; }
}
/* Diese Trennlinie war fuer die drei Merkmale unter der Ueberschrift gedacht.
 * `[class*="grid-cols-3"]` trifft aber auch die Bundle-Auswahl — dort hat sie
 * den rechten Rahmen der ersten beiden Karten ueberschrieben, und die Karten
 * standen halb umrandet da (gemessen: T/B/L Akzent, R Linienfarbe). */
/* Merkmalzeile unter dem Hero: drei Angaben ohne jede Trennung lasen sich als
 * ein Fliesstext. Klasse .bb-merkmale gab es im Markup nie — der Selektor lief
 * ins Leere. Echtes Ziel ist das enge Drittelraster (gap-[10px]); das WEITE
 * Drittelraster (gap-10) sind Inhaltsspalten und bekommen KEINE Linie.
 * Lehre: einen Selektor gegen das gerenderte Markup pruefen, nicht gegen die
 * Absicht — eine Regel auf eine erfundene Klasse meldet keinen Fehler. */
[class*="grid-cols-3"][class*="gap-[10px]"] > *:not(:last-child) {
  border-right: 1px solid var(--m-line);
}
[variant-id] { border-width: 1px !important; border-style: solid !important; border-color: var(--m-red) !important; }
[variant-id].active { border-width: 2px !important; border-color: var(--m-red) !important; }

/* ── LESBARKEIT (eigene Messung 2026-08-02, zweiter Anlauf) ─────────────
 * Erster Anlauf waren breite Regeln auf Flaechen-Klassen — Kontrastfaelle
 * stiegen von 8 auf 19, weil sie Text weiss faerbten, dessen sichtbarer Grund
 * hell ist (innere Flaeche liegt drueber). Also: nur die gemessenen Stellen,
 * jede einzeln, keine Flaechen-Vererbung.
 *
 * Fall 1 · Ueberschrift "What You Cannot See" stand bei 1:1 — Text in der
 * Farbe seines eigenen Grunds. Der Abschnitt ist eine dunkle Flaeche.       */

/* Fall 2 · Fusszeile: Beschriftung, Link und Hinweis lagen bei 3:1. */
footer .field__label, footer a[href^="mailto"], .footer .field__label { color: var(--m-ink) !important; }

/* Fall 3 · Dosierkarten: weisser Text auf heller Flaeche. Die Karte traegt
 * den Akzent als Kopf, der Koerper ist hell — also Tinte im Koerper. */

/* Fall 4 · Ueberschrift in Akzentfarbe AUF Akzentflaeche = 1:1, also
 * unsichtbar. Tritt auf, wo die Vorlage Flaeche und Schrift in derselben
 * Markenfarbe hatte und der Farbtausch das 1:1 mituebernommen hat.
 * Auf Akzentflaeche traegt Schrift immer Papier. */

/* ── react-bits Verlaufstitel: das Blau war ein Kit-Fallback ──────────────
 * kit/gradient-text schreibt `var(--kit-grad-b, #7aa2ff)`. Wer das Token nicht
 * setzt, bekommt das Blau des Kits — auf einer terrakotta-warmen Seite ein
 * Fremdkoerper. Zwei Titel liefen so von Terrakotta ueber Lila nach Blau.
 * Beide Haltepunkte bleiben in der Markenfamilie: der Verlauf schimmert
 * zwischen hellem und dunklem Terrakotta statt die Farbfamilie zu wechseln.
 * Dunkler statt heller Gegenton, weil ein hellerer Ton auf dem Cremegrund
 * unter die Kontrastschwelle fiele (#E08A3C waere 2,4:1 bei noetigen 3). */
:root { --kit-grad-a: #B4472B; --kit-grad-b: #93351F; }

/* ── Kontrast: NUR gemessene Einzelfaelle, keine Flaechen-Vererbung ────────
 * Zweimal denselben Fehler gemacht: von "irgendein Vorfahr hat Flaeche X" auf
 * den sichtbaren Grund geschlossen. Falsch, sobald eine innere Flaeche
 * dazwischenliegt — gemessen an "What Is Actually In The Bottle": Vorfahr 3
 * traegt bg-[#FBF6EF], meine Regel faerbte den Text #FBF6EF. Papier auf Papier.
 * Der sichtbare Grund ist der NAECHSTE gesetzte, nicht der markanteste. */
footer .field__label, footer a[href^="mailto"], .footer .field__label { color: var(--m-ink) !important; }

/* Schrift auf der Akzentflaeche — mit KINDKOMBINATOR, nicht als Vererbung.
 * Die tiefe Fassung (`[bg-Akzent] :is(h2,p,…)`) faerbte auch Text, der drei
 * Ebenen tiefer auf einer INNEREN hellen Flaeche sitzt — daher weiss auf weiss
 * ("What Is Actually In The Bottle"). Mit `>` reicht die Regel genau eine Ebene
 * weit: die Beschriftung, die wirklich auf dem Akzent liegt, und sonst nichts.
 * Belegt am Reiter "1. Joint Cushion": dunkle Schrift auf Terrakotta, exakt der
 * Fall, der schon einmal beanstandet wurde ("schwarz auf rot passt nicht"). */
/* :not([class*="bg-["]) ist der Kern: ein direktes Kind, das SELBST eine
 * Flaeche mitbringt (die Myth-Titel tragen bg-[#F7EEE3] auf der Akzentkarte),
 * liegt nicht auf dem Akzent und darf seine Schriftfarbe behalten. Ohne diese
 * Ausnahme wurde aus "weiss auf weiss" nur "Papier auf Sand" — derselbe Fehler
 * eine Ebene hoeher, gemessen 1,1:1 an vier Karten. */
[class*="bg-[#B4472B]"] > :is(h1,h2,h3,h4,h5,p,span,div,a,li):not([class*="bg-["]),
[style*="background-color: #B4472B"] > :is(h1,h2,h3,h4,h5,p,span,div,a,li):not([class*="bg-["]) {
  color: #FBF6EF !important;
}

/* ══ Runde 3 — gegen GEMESSENE Mobilbefunde (393 px, nach dem Breiten-Fix) ══
 * Die vorherigen Runden massen bei 780 px und reparierten damit eine Ansicht,
 * die niemand sieht. Alles hier ist bei echter Handybreite belegt. */

/* Myth-Abzeichen stand als WEISS (255,255,255) auf Sand (247,238,227) — 1,1:1.
 * Das Weiss kommt aus einer Theme-Regel der Flip-Karte, nicht aus der Klasse
 * (die sagt text-[#241F1C]) und nicht aus meiner Schicht. */
[class*="al-flip-card"] [class*="bg-[#F7EEE3]"],
[class*="flip-card"] [class*="bg-[#F7EEE3]"] { color: var(--m-ink) !important; }

/* Aktiver Reiter "1. Joint Cushion" steht bei 3:1 statt 4,5:1. UNGELOEST.
 * Mein Versuch (.tabs-heading.active -> Papierfarbe) hat drei der vier Reiter
 * LEER gemacht: die Klasse trifft mehr als den terrakottafarbenen Reiter, also
 * bekamen auch die cremefarbenen Kacheln Papierschrift. Vierter Fall derselben
 * Sorte an einem Tag. Ein 3:1-Reiter ist das kleinere Uebel als drei leere
 * Kacheln — deshalb hier bewusst KEINE Regel, bis der aktive Zustand sicher
 * benannt werden kann (dafuer muss der Zustandswechsel gemessen werden, nicht
 * geraten). */

/* Karussell-Punkte ragten 40 px aus ihrem Rahmen (17 Punkte in einer Reihe).
 * Umbruch statt Ueberlauf; die Anzahl selbst ist eine Eigenschaft der Vorlage. */
.splide__pagination { flex-wrap: wrap !important; max-width: 100% !important; row-gap: 6px; }

/* Aufgeklappte Aufklapper zeigten denselben Pfeil nach unten wie geschlossene. */
details[open] summary svg, details[open] summary img,
[aria-expanded="true"] > svg, [aria-expanded="true"] svg.icon-caret { transform: rotate(180deg); }
summary svg, [aria-expanded] svg { transition: transform .2s ease; }

/* Kopfzeilen der Vergleichstabelle stiessen aneinander (dein Bild 1).
 * Umbruch erlauben und mittig setzen, damit sie sich nie wieder beruehren. */
[class*="grid"] > [class*="col-span"] > .text-\[10px\],
.text-\[10px\].sm\:text-\[16px\] { white-space: normal !important; text-align: center;
  overflow-wrap: anywhere; hyphens: auto; }

/* [loop] gruener-haken-add-to-cart — circle fill=#50C878 in .add-to-cart-note gemessen — einziger echter Gruen-Ausreisser (Zahlungslogos bleiben, das sind fremde Marken) */
.add-to-cart-note circle[fill="#50C878"] { fill: var(--m-red) !important; }

/* [loop] karussellpunkte-platz-schaffen — ul.splide__pagination ragt 40px unter div.splide.mb-16 heraus (3x gemessen: splide01/02/03); sie ist absolut positioniert, der Rahmen laesst keinen Platz */
.splide.mb-16 { padding-bottom: 42px; }
.splide__pagination { bottom: 0 !important; gap: 3px !important; flex-wrap: wrap; padding: 0 8px !important; box-sizing: border-box; }
.splide__pagination__page { width: 6px !important; height: 6px !important; margin: 0 !important; }

/* [loop] vergleichslogo-im-rahmen — img.w-full.max-w-[170px] ragt 45px aus div.col-span-2.flex (Kopf der Vergleichstabelle) */
.grid.grid-cols-9 > .col-span-2 > img { max-width: 100% !important; height: auto; }

/* [loop] fusszeile-hell-statt-dunkel — Die verworfene Regel machte 10 Links schlechter — Beweis, dass die Fusszeile DUNKLEN Grund hat. Die 3:1-Faelle brauchen also HELLEN Text, nicht dunklen. Richtung war falsch herum */
#ContactFooter .field__label, .footer-block__details-content a,
.footer-disclosure p, .footer-disclosure [class*="text-[14px]"] { color: #FBF6EF !important; opacity: 1; }

/* [loop] limp-variante-a-erstes-kind — Beide Absaetze teilen den Pfad; der auf dunklem Grund ist der im ERSTEN Rasterfeld. Variante A von drei — der Loop behaelt nur, was netto hilft */
.grid.grid-cols-1 > .flex.flex-col:first-child > [class*="text-[18px]"] > p { color: #FBF6EF !important; }

/* [loop] mythos-karte-enger — gemessen: Karte 390px hoch, Inhalt 44+70+25=139px, gap 60px, justify space-between → ~131px Leerraum */
@media (max-width: 767px) { .al-flip-card__item { gap: 24px !important; justify-content: center !important; } }

/* [loop] vergleichskopf-lesbare-groesse — Beschriftungen der Vergleichstabelle stehen auf 10px — mobil kaum lesbar (GPT z10, drei Durchgaenge in Folge gemeldet) */
[class*="text-[10px]"][class*="sm:text-[16px]"] { font-size: 13px !important; line-height: 1.25 !important; }