/*
 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, 16.08.2026 --------
   Bricks und CF geben "font-family: Manrope" OHNE jede Ersatzschrift aus.
   Bis Manrope geladen ist, rechnet der Browser deshalb mit seiner
   Standardschrift (in Chrome eine Serife) — die Metriken passen nicht
   annaehernd, und beim Umschalten springt das Layout.

   Aus der Schriftdatei ausgelesen (Manrope v20):
     unitsPerEm 2000, hhea ascender 2132, descender -600, lineGap 0,
     xAvgCharWidth 1102, xHeight 1080, capHeight 1440
   Bezugsgroesse Arial: unitsPerEm 2048, xAvgCharWidth 1113,
     ascender 1854, descender -434

   size-adjust     = (1102/2000) / (1113/2048) = 101,4 %
   ascent-override = (2132/2000) / 1,014       = 105,1 %
   descent-override= (600/2000)  / 1,014       =  29,6 % */
@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
	size-adjust: 101.4%;
	ascent-override: 105.1%;
	descent-override: 29.6%;
	line-gap-override: 0%;
}

/* --- Schriftzuweisung Car Inspect, 02.09.2026 -----------------------
   Quicksand 600/700 traegt die Ueberschriften, Roboto 400/600 den
   Fliesstext und alle Bedienelemente. Beide liegen lokal unter
   uploads/core-framework/fonts/, kein externer Aufruf.

   OFFEN: metrisch angeglichener Fallback nach Regel 89. Der Manrope-
   Block oben bleibt als Vorlage stehen, bis die Metriken aus den beiden
   WOFF2-Dateien ausgelesen und size-adjust, ascent-override und
   descent-override gegen Arial gerechnet sind. Bis dahin steht Arial
   ohne Angleichung im Stapel — der Textumbruch kann beim Schriftwechsel
   noch springen. */
html body,
html button,
html input,
html select,
html textarea {
	font-family: Roboto, Arial, Helvetica, sans-serif;
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
	font-family: Quicksand, "Trebuchet MS", Verdana, sans-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;
}

/* --- Nur fuer Screenreader, 02.09.2026 ---------------------------
   Text, der vorgelesen, aber nicht angezeigt wird. Steht hier und nicht
   in einer Bricks-Klasse: Klassen-CSS wird nur ausgeliefert, wenn die
   Klasse auf der jeweiligen Seite vorkommt. */
.wpk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Terminformular, 05.09.2026 -------------------------------------
   Das Conversational Form bringt in mehreren Huellen eigene Abstaende mit:
   .ff_conv_input hat 60px oben und unten, dazu kommen Polster an der
   Frage-Huelle. Die erste Frage begann dadurch deutlich tiefer als die
   Oeffnungszeiten-Karte daneben.

   Das Plugin-Stylesheet wird nach dem Child-Theme geladen, bei gleicher
   Spezifitaet gewinnt es. Deshalb html body davor - Ladereihenfolge nie
   voraussetzen. */
html body .ffc_inline_form.ffc_conv_wrapper .ff_conv_app .ff_conv_input {
	padding-top: 0;
	padding-bottom: var(--space-m);
}

html body .ffc_conv_wrapper .ff_conv_app_frame,
html body .ffc_conv_wrapper .vff,
html body .ffc_conv_wrapper .f-container,
html body .ffc_conv_wrapper .f-form-wrap,
html body .ffc_conv_wrapper .q-form,
html body .ffc_conv_wrapper .ff_conv_section_wrapper {
	padding-top: 0;
	margin-top: 0;
}

\/* Die erste Frage buendig mit der Kartenoberkante. *\/
html body .ffc_conv_wrapper .q-form:first-child,
html body .ffc_conv_wrapper .vff > *:first-child {
	margin-block-start: 0;
}

/* --- Soziale Profile im mobilen Menue, 05.09.2026 --------------------
   Am Desktop stehen die drei Icons rechts neben der Navigation. Im mobilen
   Menue bilden sie eine eigene Zeile am Ende der Liste: nebeneinander,
   nur als Zeichen. Der Name bleibt als aria-label erhalten, damit der Link
   einen zugaenglichen Namen hat (4.1.2).

   Bricks gibt die Menue-Typografie als ID-Regel aus. Deshalb steht hier
   die ID des Nav-Elements im Selektor - eine reine Klassenregel verliert.

   Das erste Zeichen fluchtet mit den Menuepunkten darueber: dieselben
   var(--space-l) Innenabstand wie deren Links. Die 52px-Klickflaeche
   bleibt erhalten, die Zeichen ruecken durch negativen Aussenabstand
   zusammen. */
html body #brxe-hdrnav .bricks-mobile-menu li.nur-mobil {
	display: inline-block;
	vertical-align: middle;
	/* Flucht mit den Menuepunkten darueber: dieselben var(--space-l),
	   die deren Links als Innenabstand haben. Gilt fuer das erste Zeichen;
	   die folgenden ziehen die Regel darunter wieder zusammen. */
	margin-inline-start: var(--space-l);
	margin-block-start: var(--space-s);
}

html body #brxe-hdrnav .bricks-mobile-menu li.nur-mobil + li.nur-mobil {
	/* Nur waagerecht zusammenruecken. Der obere Abstand bleibt bei allen
	   dreien gleich, sonst rutscht das erste Zeichen aus der Linie. */
	margin-inline-start: -22px;
}

html body #brxe-hdrnav .bricks-mobile-menu li.nur-mobil > a {
	display: grid;
	place-items: center start;
	width: 52px;
	height: 52px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

html body #brxe-hdrnav .bricks-mobile-menu li.nur-mobil > a::before {
	font-family: 'Font Awesome 6 Brands';
	font-weight: 400;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--text-title);
}

html body #brxe-hdrnav .bricks-mobile-menu li.nur-mobil.menu-item-241 > a::before { content: '\f16d'; }
html body #brxe-hdrnav .bricks-mobile-menu li.nur-mobil.menu-item-242 > a::before { content: '\f1a0'; }
html body #brxe-hdrnav .bricks-mobile-menu li.nur-mobil.menu-item-243 > a::before { content: '\f232'; }

/* --- Schritt-Schaltflaechen im Terminformular, 05.09.2026 ------------
   Fluent Forms gibt sie kleiner als 24px aus. WCAG 2.5.8 verlangt
   mindestens 24x24px, Zielwert 44px. Plugin-Stylesheet laedt nach dem
   Child-Theme, deshalb html body davor. */
html body .ffc_conv_wrapper a.f-prev,
html body .ffc_conv_wrapper a.f-next {
	min-width: 44px;
	min-height: 44px;
	display: inline-grid;
	place-items: center;
}