/*
 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%;
}

html body,
html button,
html input,
html select,
html textarea,
html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
	font-family: Manrope, "Manrope Fallback", Arial, Helvetica, 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;
}

/* --- Kopfzeile liegt ueber dem Inhalt, 01.09.2026 -------------------
   Vorgabe: transparent ueber dem ersten Abschnitt, Menue rechts,
   sticky bleibt. Bricks liefert die Kopfzeile im Fluss aus, sie schiebt
   den Inhalt also nach unten. Fuer die Ueberlagerung muss sie aus dem
   Fluss genommen werden.

   Die Flaechenfarbe wurde am Abschnitt #fg-header entfernt (Element-CSS
   ist ID-basiert und schlaegt jede Klasse - sie haette diese Regeln
   ausgehebelt). Beide Zustaende liegen jetzt hier an einer Stelle.

   Bricks setzt beim Scrollen die Klasse .scrolling auf #brx-header.
   Erst dann bekommt die Kopfzeile Flaeche und Linie, damit der Text
   darunter lesbar bleibt.

   Pflicht dazu: jeder erste Abschnitt ohne randlos laufendes Bild muss
   die Kopfzeilenhoehe aufaddieren - dafuer wpk-header-freiraum. */
#brx-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#brx-header.brx-sticky {
	position: fixed;
}

#brx-header.brx-sticky.scrolling {
	background-color: var(--bg-body);
	border-bottom-color: var(--border-primary);
}

/* Angemeldete Benutzer: die WordPress-Adminleiste ist selbst fixiert und
   liegt sonst ueber der Kopfzeile. Die Hoehen sind von WordPress fest
   vorgegeben (32 px, unter 783 px Viewport 46 px). Betrifft nur den
   eingeloggten Zustand, im Frontend fuer Besucher aendert sich nichts. */
body.admin-bar #brx-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #brx-header {
		top: 46px;
	}
}

/* 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;
}


/* --- Schrift: Roboto mit metrisch angeglichener Ersatzschrift, 14.09.2026 ---
   Werte aus der ausgelieferten Roboto-WOFF2 ausgelesen, nicht geschaetzt:
     unitsPerEm 2048 | hhea.ascender 1900 | hhea.descender -500
     hhea.lineGap 0  | OS/2.xAvgCharWidth 1073
   Gegen Arial gerechnet (2048 | 1113 | 1854 | -434):
     size-adjust       = (1073/2048) / (1113/2048)  = 0,96406 -> 96.406%
     ascent-override   = (1900/2048) / 0,96406      = 0,96232 -> 96.232%
     descent-override  = (500/2048)  / 0,96406      = 0,25324 -> 25.324%
     line-gap-override = (0/2048)    / 0,96406      = 0       -> 0%
   Ohne diesen Block erzeugt das von Core Framework gesetzte
   font-display: swap beim Schriftwechsel einen Layoutsprung. */
@font-face {
	font-family: "RobotoFallback";
	src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
	size-adjust: 96.406%;
	ascent-override: 96.232%;
	descent-override: 25.324%;
	line-gap-override: 0%;
}

/* Schriftstapel an einer Stelle. html body schlaegt den Theme Style,
   dessen Regel nur auf body zielt — die Ladereihenfolge wird damit
   nicht vorausgesetzt. Eine font-family ohne Ersatzschrift ist ein Fehler. */
html body,
html body :where(h1, h2, h3, h4, h5, h6, p, li, a, button, input, textarea, select, label, address, dt, dd, summary) {
	font-family: Roboto, RobotoFallback, Arial, sans-serif;
}


/* --- Seitenflaeche, 14.09.2026 -------------------------------------
   Weder der Bricks Theme Style noch Core Framework setzen eine
   Hintergrundfarbe auf body. Ohne diese Regel ist der Bereich zwischen
   den Abschnitten der Browser-Standard, also weiss — sichtbar z. B.
   ueber der Fusszeile. Beide Werte sind Tokens und kippen in
   invertierten Abschnitten mit. */
html body {
	background-color: var(--bg-body);
	color: var(--text-body);
}


/* --- Trennlinie zur Fusszeile, 16.09.2026 ---------------------------
   Fusszeile und Body tragen dieselbe Flaechenfarbe. Ohne Linie geht der
   Uebergang optisch unter. Farbe aus dem Token, damit sie bei einer
   Palettenaenderung mitgeht. */
#brx-footer {
	border-top: 1px solid var(--border-primary);
}


/* --- Kopfzeile ueber dem Inhalt, 16.09.2026 -------------------------
   Der abdunkelnde Verlauf unter der Kopfzeile ist auf Wunsch entfernt.
   Er lag auf der Startseite ueber dem Hero-Verlauf und erzeugte dort
   eine sichtbare Kante.

   OFFEN: Auf den Unterseiten liegt die Navigation damit ungeschuetzt
   ueber dem Bildband mit hellem Himmel. Weisse Schrift erreicht dort
   stellenweise keine 4,5:1 (WCAG 1.4.3). Zu pruefen im Prueflauf vor
   der Abnahme; Alternative waere ein Verlauf am oberen Rand der
   Bildbaender statt an der Kopfzeile.
   Der Zustand beim Scrollen bleibt unveraendert: dann traegt die
   Kopfzeile ihre eigene Flaeche. */
#brx-header > * {
	position: relative;
}

/* --- Rechtstexte aus eRecht24, 16.09.2026 ----------------------------
   Der Shortcode gibt fertiges HTML aus: nackte h1, h2 und p ohne
   Bricks-Element. Damit greifen weder unsere Tokens noch der Theme Style
   auf Elementebene - es gilt die Grundregel h1{font-size:2.4em}, was
   deutlich groesser wirkt als jede andere Ueberschrift der Website.
   Hier werden die Ausgaben an die Seitentypografie angeglichen.
   Betrifft Impressum, Datenschutzerklaerung und Barrierefreiheit. */
.erecht24-legal-texts {
	color: var(--text-body);
	font-size: var(--text-m);
	line-height: 1.7;
	max-width: 100rem;
}

.erecht24-legal-texts h1 {
	font-size: var(--text-2xl);
	font-weight: 300;
	line-height: 1.2;
	color: var(--text-title);
	margin: 0 0 var(--space-l);
}

.erecht24-legal-texts h2 {
	font-size: var(--text-xl);
	font-weight: 300;
	line-height: 1.25;
	color: var(--text-title);
	margin: var(--space-xl) 0 var(--space-s);
}

.erecht24-legal-texts h3,
.erecht24-legal-texts h4 {
	font-size: var(--text-l);
	font-weight: 300;
	line-height: 1.3;
	color: var(--text-title);
	margin: var(--space-l) 0 var(--space-2xs);
}

.erecht24-legal-texts p {
	margin: 0 0 var(--space-s);
}

.erecht24-legal-texts ul,
.erecht24-legal-texts ol {
	margin: 0 0 var(--space-s);
	padding-left: 2.4rem;
}

.erecht24-legal-texts li {
	margin-bottom: var(--space-4xs);
}

.erecht24-legal-texts a {
	color: var(--text-title);
	text-underline-offset: 3px;
}

.erecht24-legal-texts strong {
	font-weight: 700;
}