/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* --- Kontrast-Fix, 16.08.2026 ---------------------------------------
   Bricks setzt in frontend-layer.min.css global:  label { color: var(--bricks-text-light) }
   Das ist #9e9e9e und ergibt auf Weiss nur 2,68:1 — unter der WCAG-Grenze von 4,5:1.
   Betroffen sind alle blanken <label>-Elemente, u. a. im Cookie-Dialog
   (Must-Have Cookie) und in den Fluent-Forms-Formularen.
   var(--text-body) ist ein CF-Token und kippt in invertierten Abschnitten mit. */
body label {
	color: var(--text-body);
}

/* --- Themify-Ersatz, 16.08.2026 -------------------------------------
   Bricks laedt themify-icons-layer.min.css (13,7 KB) plus die Schriftdatei
   themify.woff auf jeder Seite. Benutzt wird davon genau ein Zeichen:
   ti-angle-down als Pfeil im FAQ-Akkordeon (Startseite und /faq/).
   Hier als SVG-Maske nachgebaut, damit die Icon-Schrift entfallen kann.
   Das Abmelden passiert in der functions.php. */
.brxe-accordion .accordion-title .icon.ti-angle-down::before {
	content: none;
}

.brxe-accordion .accordion-title .icon.ti-angle-down {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%209l7%207%207-7'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%209l7%207%207-7'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Schrift-Fallback mit angeglichenen Metriken, 21.09.2026 --------
   Bricks und CF geben "font-family: Lato" bzw. "Baskervville" OHNE
   Ersatzschrift aus. Bis die Schrift geladen ist, rechnet der Browser mit
   seiner Standardschrift, und beim Umschalten springt das Layout.
   Rechenweg nach Masterprompt Regel 109, Bezug Arial:
     unitsPerEm 2048, xAvgCharWidth 1113, ascender 1854, descender -434

   Aus den Schriftdateien ausgelesen (Google Fonts, 400):
     Lato          unitsPerEm 2000, xAvgCharWidth 1042,
                   hhea ascender 1974, descender -426, lineGap 0
     Baskervville  unitsPerEm 1000, xAvgCharWidth 554,
                   ascender 998, descender -295, lineGap 0

   Lato:         size-adjust (1042/2000)/(1113/2048)      =  95,9 %
                 ascent  (1974/2000)/0,959 = 102,9 %, descent (426/2000)/0,959 = 22,2 %
   Baskervville: size-adjust (554/1000)/(1113/2048)       = 101,9 %
                 ascent  (998/1000)/1,019  =  97,9 %, descent (295/1000)/1,019 = 29,0 %

   Inter kommt nur an einzelnen Elementen vor und bekommt dort seine Kette. */
@font-face {
	font-family: "Lato Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
	size-adjust: 95.9%;
	ascent-override: 102.9%;
	descent-override: 22.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Baskervville Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
	size-adjust: 101.9%;
	ascent-override: 97.9%;
	descent-override: 29%;
	line-gap-override: 0%;
}

html body,
html button,
html input,
html select,
html textarea {
	font-family: Lato, "Lato Fallback", Arial, Helvetica, sans-serif;
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
	font-family: Baskervville, "Baskervville Fallback", Arial, Helvetica, serif;
}

/* --- Sticky-Header: Fokus und Ankersprunge, 16.08.2026 --------------
   WCAG 2.2 AA, Kriterium 2.4.11 Focus Not Obscured: ein fokussiertes
   Element darf nicht von fixierten Inhalten verdeckt werden. Der Sticky
   Header tut genau das, sobald man sich mit Tab durch die Seite bewegt.
   scroll-padding-top am Wurzelelement wirkt sowohl beim Tabben als auch
   bei Ankersprungen wie "Wie Hypnose wirkt".
   Hinweis: CF setzt die Grundschriftgrosse auf 62,5 %, 1 rem sind also
   10 px. --wpk-header-h ist die einzige Stellschraube. */
:root {
	--wpk-header-h: 9rem;
}

html {
	scroll-padding-top: var(--wpk-header-h);
}

[id] {
	scroll-margin-top: var(--wpk-header-h);
}

/* --- Sichtbarer Fokus: dreischichtiger Ring, 29.08.2026 -------------
   AGENTURSTANDARD. Auf jeder Seite identisch, bewusst nicht je Projekt
   angepasst.

   WCAG 2.2 AA, Kriterium 2.4.7 Focus Visible. Bricks unterdrueckt den
   Standard-Fokusring in frontend-layer.min.css:
     button { outline: none }
     .input, input:not([type=submit]), select, textarea { outline: none }
   Ohne eigene Regel ist bei Tastaturbedienung nicht erkennbar, wo man
   sich befindet \u2014 alle Buttons und alle Formularfelder betroffen.

   Warum drei Schichten und nicht eine Linie in der Markenfarbe:
   Eine einzelne Farbe muss gegen JEDE Flaeche 3:1 erreichen, auf der
   ein Bedienelement sitzt. Das haelt keine Marke durch. Gerechnet:
     Bosch  Rot   #EB0008 auf Marineblau #00315C = 2,84:1  durchgefallen
     AM     Gelb  #FFCC00 auf Weiss            = 1,51:1  durchgefallen
   Mit hellem UND dunklem Ring traegt immer mindestens eine Schicht,
   unabhaengig vom Untergrund. Deshalb muss bei neuen Hintergrund-
   farben oder Palettenaenderungen NICHTS nachgerechnet werden.
   Gleiches Vorgehen wie in Chrome, Firefox und Edge; WCAG-Technik C40.

   :focus-visible statt :focus, damit der Ring nur bei Tastatur-
   bedienung erscheint und nicht bei jedem Mausklick.
   Hinweis: box-shadow am fokussierten Element wird ueberschrieben. */
:focus-visible {
	/* Alle drei Ringe als box-shadow, damit sie nebeneinander liegen:
	   0-2px Markenfarbe, 2-4px hell, 4-6px dunkel. Eine outline mit
	   Versatz wuerde ueber den Schatten liegen und ihn verdecken.
	   Die transparente outline bleibt fuer den Windows-Kontrastmodus,
	   der box-shadow ignoriert, outline aber erzwingt. */
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow:
		0 0 0 2px var(--primary),
		0 0 0 4px #FFFFFF,
		0 0 0 6px #1A1A1A;
}

/* Ausnahme: .mhcookie-box traegt tabindex="-1", damit Must-Have Cookie
   den Fokus beim Oeffnen in den Dialog setzen kann. Der Kasten ist kein
   Bedienelement; Buttons und Links darin behalten den Indikator. */
.mhcookie-box:focus,
.mhcookie-box:focus-visible {
	outline: none;
	box-shadow: none;
}

/* --- Fliesstextgroesse Ginelly, 21.09.2026 -------------------------
   Keine Core-Framework-Stufe trifft das Original: --text-m (16-18px) ist
   zu klein, --text-l (18-24px) erreicht 24px schon bei 1400px.
   Wert 1:1 aus dem Elementor-Kit: clamp(18px, 0.4032vw + 0.7944rem, 24px),
   umgerechnet auf 1rem = 10px (CF 62,5 %): 0.7944 x 16 = 12.71px = 1.271rem.
   Ergibt 18px mobil, ca. 18,4px bei 1400px, ca. 20,5px bei 1920px. */
:root {
	--wpk-text-fliesstext: clamp(1.8rem, calc(0.4032vw + 1.271rem), 2.4rem);
}

/* --- Oeffnungszeiten: heutigen Tag hervorheben, 21.09.2026 -----------
   Masterprompt Regel 66. Zeilen tragen data-wochentag (1 = Montag ... 7 = Sonntag),
   das Skript in der functions.php setzt .is-heute. Ohne JS bleibt die Tabelle
   vollstaendig lesbar, nur ohne Hervorhebung. */
[data-wochentag].is-heute{ color:var(--text-title); font-weight:700; }
[data-wochentag].is-heute::after{ content:" (heute)"; font-weight:400; color:var(--primary); }

/* --- Links im Fliesstext, 21.09.2026 ---------------------------------
   Masterprompt Regel 141: Links in Absaetzen sind unterstrichen, damit sie
   nicht nur ueber die Farbe erkennbar sind. Betrifft nur Links ohne eigene
   Klasse in Absaetzen (keine Buttons, keine Menues). */
p a:not([class]){ text-decoration:underline; text-underline-offset:0.2em; text-decoration-thickness:1px; }
p a:not([class]):hover{ text-decoration-thickness:2px; }

/* --- Bewertungskarten ohne Hover, 21.09.2026 ------------------------
   Nexter-Snippets 5 und 10 faerben Karten der Vorlage grid9 beim Hover mit
   !important ein. Hier fuer die Vorlage 6209 neutralisiert. Liegt im
   Child-Theme, weil der WP-Social-Ninja-Editor die Vorlagen-CSS beim
   Speichern neu erzeugt. */
.wpsr-reviews-6209 .wpsr-review-template.wpsr-review-template-nine:hover{ background-color:var(--bg-body) !important; }
.wpsr-reviews-6209 .wpsr-review-template.wpsr-review-template-nine:hover .wpsr-review-content,
.wpsr-reviews-6209 .wpsr-review-template.wpsr-review-template-nine:hover .wpsr-review-content p,
.wpsr-reviews-6209 .wpsr-review-template.wpsr-review-template-nine:hover .wpsr-review-content a,
.wpsr-reviews-6209 .wpsr-review-template.wpsr-review-template-nine:hover .wpsr-review-date{ color:var(--text-body); }
.wpsr-reviews-6209 .wpsr-review-template.wpsr-review-template-nine:hover .wpsr-reviewer-name{ color:var(--text-title); }

/* --- WooCommerce-Buttons im Blueprint-Design, 21.09.2026 -------------
   Die Nexter-Snippets 9, 11, 12 und 13 gestalten Woo-Buttons fuer Blocksy mit
   Elementor-/Blocksy-Variablen, die es auf Bricks-Seiten nicht gibt (Verlauf
   faellt weg, Schatten bleibt). Auch Woo-Buttons ausserhalb von .woocommerce
   (z. B. Widerrufsbutton von German Market). Hier 1:1 wie wpk-btn wpk-btn--primary, wie alle
   anderen Buttons der Seite. Liegt im Child-Theme, gilt also nur auf den
   Bricks-Seiten; die Live-Seite behaelt die Snippets bis zum Umzug. */
body .woocommerce .button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce #place_order,
body .woocommerce-button.button,
body .brxe-woocommerce-mini-cart .button,
body a.added_to_cart.wc-forward {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; min-height: 0; margin: 0;
	padding: var(--space-xs) var(--space-m);
	font-family: Lato, "Lato Fallback", Arial, sans-serif; font-size: var(--text-xs); font-weight: 400; line-height: 1.2;
	letter-spacing: 0; text-transform: none; text-decoration: none;
	color: var(--light);
	background-color: var(--secondary);
	background-image: linear-gradient(90deg, var(--secondary) 0%, var(--tertiary) 100%);
	border: 0; border-radius: var(--radius-full);
	box-shadow: 0 4px 12px 0 var(--shadow-primary); cursor: pointer;
	transition: background .2s, color .2s, transform .2s, border-color .2s, box-shadow .2s;
}
body .woocommerce .button:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce #place_order:hover,
body .woocommerce-button.button:hover,
body .brxe-woocommerce-mini-cart .button:hover,
body a.added_to_cart.wc-forward:hover {
	color: var(--light); background-color: var(--primary);
	background-image: linear-gradient(90deg, var(--primary) 0%, var(--primary) 100%);
	border: 0; box-shadow: 0 4px 12px 0 var(--shadow-primary);
}
body .woocommerce .button:disabled,
body .woocommerce .button[disabled] { opacity: .5; cursor: not-allowed; }
/* --- WooCommerce-Checkbox-Labels, 21.09.2026 -------------------------
   Core Framework hat eine Utility-Klasse .checkbox (fuer ein Eingabefeld:
   2rem-Quadrat, display grid, Rahmen). WooCommerce und German Market vergeben
   dieselbe Klasse an das LABEL der AGB- und Widerrufs-Checkbox. Dadurch wurde
   das Label zum kleinen Kaestchen und der Text lief mittig darueber hinaus.
   Hier fuer Woo-Labels zurueckgesetzt, das Haekchenfeld bleibt normal. */
body label.woocommerce-form__label-for-checkbox.checkbox {
	appearance: auto; display: flex; align-items: flex-start; gap: var(--space-2xs);
	width: auto; height: auto; place-content: normal;
	border: 0; border-radius: 0; background: none; cursor: pointer;
}
body label.woocommerce-form__label-for-checkbox.checkbox::before { content: none; }
body label.woocommerce-form__label-for-checkbox.checkbox:checked,
body label.woocommerce-form__label-for-checkbox.checkbox:hover { background: none; border: 0; }
body label.woocommerce-form__label-for-checkbox .input-checkbox { flex: 0 0 auto; margin-top: .35em; }
/* --- WooCommerce-Hinweisboxen im Kartenstil, 21.09.2026 --------------
   Hinweis, Erfolg, Fehler (z. B. "Hast du einen Gutschein?", "wurde in den
   Warenkorb gelegt", Pflichtfeld-Fehler in der Kasse). Karte wie wpk-card,
   Art der Meldung ueber den farbigen linken Rand UND den Text, nicht nur
   ueber Farbe. Text bleibt in --text-title fuer vollen Kontrast. */
body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-error,
body .woocommerce-notice {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--space-xs) var(--space-m);
	margin: 0 0 var(--space-m) 0;
	padding: var(--space-s) var(--space-m);
	list-style: none;
	font-family: Lato, "Lato Fallback", Arial, sans-serif; font-size: var(--text-m); line-height: 1.5;
	color: var(--text-title);
	background: var(--bg-surface);
	border: 1px solid var(--border-primary);
	border-left: 4px solid var(--primary);
	border-radius: var(--radius-m);
	box-shadow: none; outline: 0;
}
body .woocommerce-info::before,
body .woocommerce-message::before,
body .woocommerce-error::before { content: none; display: none; }
body .woocommerce-message { border-left-color: var(--success); }
body .woocommerce-error { border-left-color: var(--error); flex-direction: column; align-items: flex-start; }
body .woocommerce-error li { margin: 0; padding: 0; list-style: none; }
body .woocommerce-info a:not(.button),
body .woocommerce-message a:not(.button),
body .woocommerce-error a:not(.button),
body .woocommerce-notice a:not(.button) {
	color: var(--text-title); text-decoration: underline; text-underline-offset: .2em;
}
body .woocommerce-info a:not(.button):hover,
body .woocommerce-message a:not(.button):hover,
body .woocommerce-error a:not(.button):hover { color: var(--primary); }
/* --- Checkboxen und Optionsfelder in Markenfarbe, 21.09.2026 ---------
   Browser zeichnen angehakte Checkboxen und Optionsfelder standardmaessig blau.
   accent-color faerbt sie seitenweit in --primary: Fluent Forms, WooCommerce-
   Kasse, German Market, Zahlarten, Amelia. Das Haekchen bleibt weiss. */
:root {
	accent-color: var(--primary);
}
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--primary);
}
/* --- Mail-Mint-Buttons (Newsletter-Abmeldung), 21.09.2026 ------------
   Beide Buttons wie wpk-btn--primary, wie alle Buttons der Seite. */
body .mintmrm-card-button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: var(--space-xs) var(--space-m); margin: 0;
	font-family: Lato, "Lato Fallback", Arial, sans-serif; font-size: var(--text-xs); font-weight: 400; line-height: 1.2; text-decoration: none;
	color: var(--light); background-color: var(--secondary);
	background-image: linear-gradient(90deg, var(--secondary) 0%, var(--tertiary) 100%);
	border: 0; border-radius: var(--radius-full); box-shadow: 0 4px 12px 0 var(--shadow-primary);
	transition: background .2s, color .2s, box-shadow .2s;
}
body .mintmrm-card-button:hover { color: var(--light); background-color: var(--primary); background-image: none; }
/* Abbrechen bewusst im selben Design wie alle Buttons der Seite. */
/* Mail-Mint-Rueckfrage: Ueberschrift und Text kommen aus eigenen Bricks-Elementen
   (Mail Mint gibt den Titel als zweite H1 aus). Vom Shortcode bleiben nur die
   beiden Buttons, die den Abmelde-Link mit der Kennung aus der E-Mail tragen. */
body .mintmrm-card-header,
body .mintmrm-card-title,
body .mintmrm-card-subtitle { display: none; }
body .mintmrm-default-pages,
body .mintmrm-card-wrapper,
body .mintmrm-card,
body .mintmrm-card-body {
	padding: 0; margin: 0; min-height: 0; max-width: none; width: auto;
	background: transparent; border: 0; box-shadow: none;
}
body .mintmrm-card-buttons {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs);
	margin: var(--space-s) 0 0 0; padding: 0;
}
/* Mail-Mint-Umfrage: Gruende als linksbuendige Liste in der mittigen Karte. */
body .mint-survey-reasons {
	display: grid; gap: var(--space-2xs); justify-items: start;
	max-width: 48rem; margin: var(--space-s) auto 0 auto; text-align: left;
}
body .mint-survey-reasons .mintmrm-radiobtn { display: flex; align-items: center; gap: var(--space-2xs); }
body .mint-survey-reasons label { color: var(--text-body); cursor: pointer; }
body .mint-survey-form textarea { width: 100%; border: 1px solid var(--primary); border-radius: 8px; background: transparent; padding: var(--space-2xs) var(--space-xs); }
/* --- Cookie-Banner-Buttons im Standard-Button-Design, 21.09.2026 ---
   Must-Have Cookie bringt eigene Buttons (eckig, flach). Hier 1:1 wie
   wpk-btn wpk-btn--primary: Verlauf secondary->tertiary, Pillenform,
   weisse Schrift, Hover primary. Gilt fuer beide Button-Arten, weil alle
   Buttons der Seite gleich aussehen. !important nur, weil das Plugin selbst
   Padding, Radius und Schriftgroesse mit !important setzt. */
body .mhcookie-box .mhcookie-btn,
body .mhcookie-box a.mhcookie-btn.mhcookie-btn-primary {
	display: inline-flex; align-items: center; justify-content: center;
	padding: var(--space-xs) var(--space-m) !important;
	font-family: Lato, "Lato Fallback", Arial, sans-serif;
	font-size: var(--text-xs) !important; font-weight: 400; line-height: 1.2;
	text-decoration: none; text-transform: none; white-space: normal;
	color: var(--light);
	background-color: var(--secondary);
	background-image: linear-gradient(90deg, var(--secondary) 0%, var(--tertiary) 100%);
	border: 0;
	border-radius: var(--radius-full) !important;
	box-shadow: 0 4px 12px 0 var(--shadow-primary);
	opacity: 1;
	transition: background .2s, color .2s, box-shadow .2s;
}
body .mhcookie-box .mhcookie-btn:hover,
body .mhcookie-box .mhcookie-btn:focus-visible,
body .mhcookie-box a.mhcookie-btn.mhcookie-btn-primary:hover {
	color: var(--light);
	background-color: var(--primary);
	background-image: linear-gradient(90deg, var(--primary) 0%, var(--primary) 100%);
	opacity: 1;
}