/* ====================================================================
   GRUNDREGEL: Eigenes CSS ist die Ausnahme, nicht der Weg.
   Festgehalten am 28.09.2026 auf Anweisung von Linda.

   Bricks bildet nahezu jede Gestaltung als eigenes Feld im Editor ab.
   Wer stattdessen CSS schreibt, baut am Bedienkonzept vorbei: die
   Einstellung ist im Editor unsichtbar, sie laesst sich dort nicht
   aendern, und ein falscher Selektor faellt nicht auf, weil nichts
   passiert.

   Konkreter Anlass: Am Hero-Bild war der Bildausschnitt als eigenes
   CSS hinterlegt, mit dem Selektor '#brxe-hroimg img'. Das Element
   MIT dieser ID ist aber selbst das img, ein weiteres img darin gibt
   es nicht. Die Regel lief monatelang ins Leere, der Ausschnitt blieb
   auf dem Standardwert und schnitt den Kopf oben ab. Bricks hat dafuer
   das Feld 'Object position' - direkt neben 'Object fit' und
   'Aspect ratio', die beide korrekt benutzt waren.

   Verbindlich:
   1. Vor jeder Gestaltung im Element-Schema nachsehen, ob es ein
      Feld gibt. Nicht raten, nicht aus dem Gedaechtnis arbeiten.
      Die Controls stehen in themes/bricks/includes/elements/<typ>.php.
   2. Gibt es ein Feld, wird das Feld benutzt. Ausnahmslos.
   3. Gibt es keins, ist das eine Rueckfrage an Linda, bevor CSS
      geschrieben wird. Nicht danach.
   4. Global geltende Gestaltung gehoert in eine globale Klasse oder
      hierher, nie als Einzel-CSS an ein Element.

   Haeufig uebersehene Felder am Bild-Element: _aspectRatio,
   _objectFit, _objectPosition, _widthMax, loading, altText,
   _attributes (dort auch fetchpriority).
   ==================================================================== */

/*
 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 {
	/* tatsaechliche Headerhoehe: Logoblock rund 4,5rem plus zweimal
	   --space-xs plus 1px Rahmen. Traegt die Kompensation im Hero,
	   weil der Header position:fixed ist und nicht im Fluss liegt. */
	--wpk-header-h: 7.5rem;
}

html {
	/* etwas mehr als die Headerhoehe, damit Ankerziele nicht direkt
	   an der Unterkante kleben */
	scroll-padding-top: calc(var(--wpk-header-h) + var(--space-s));
}

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

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

/* --- Pompiere fuer Menue und die Hero-Zeile, 01.09.2026 -------------
   Metriken aus Pompiere-400.woff2: unitsPerEm 2048, ascender 1918,
   descender -543, lineGap 0, xAvgCharWidth 799
   Bezug Arial: unitsPerEm 2048, xAvgCharWidth 1113
     size-adjust      = (799/2048) / (1113/2048) =  71,8 %
     ascent-override  = (1918/2048) / 0,718      = 130,4 %
     descent-override = (543/2048)  / 0,718      =  36,9 % */
@font-face {
	font-family: "Pompiere Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
	size-adjust: 71.8%;
	ascent-override: 130.4%;
	descent-override: 36.9%;
	line-gap-override: 0%;
}





/* --- Untermenue-Pfeil, 03.09.2026 -----------------------------------
   Das Chevron ist ein Inline-SVG im Menue-Button und skaliert in em.
   Als die Menueschrift von --text-m auf --text-l ging, wuchs es mit.
   Feste Groesse, damit es unabhaengig von der Schriftgroesse bleibt.
   ID-Selektor noetig, weil Bricks die Menuetypografie als ID-Regel
   ausgibt und jede Klassenregel schlagen wuerde. */
#brxe-hdrnav .brx-submenu-toggle button svg,
#brxe-hdrnav .brx-submenu-toggle > button > .menu-item-icon {
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	/* Strichstaerke passend zur feinen Pompiere; das SVG bringt 1.5 mit */
	stroke-width: 1;
	opacity: 0.65;
}

#brxe-hdrnav .brx-submenu-toggle button svg path {
	stroke-width: 1;
}

#brxe-hdrnav .brx-submenu-toggle:hover button svg,
#brxe-hdrnav .brx-submenu-toggle button:focus-visible svg {
	opacity: 1;
}

/* --- Pompiere-Stellen mit Ersatzschrift, 04.09.2026 ------------------
   Bricks gibt am Element nur font-family: "Pompiere" aus, ohne
   Fallback. Bis die Schrift geladen ist, rendert der Browser mit
   seiner Standardschrift; die laeuft breiter, der Logoschriftzug
   bricht um und springt zurueck. Hier der vollstaendige Stapel mit
   der metrisch angeglichenen Ersatzschrift.
   Doppelter Selektor, weil Bricks die Typografie als ID-Regel
   ausgibt und eine einfache Klassenregel verlieren wuerde. */
html #brxe-7dybu5,
html #brxe-omrqgc,
html #brxe-hdrnav .bricks-nav-menu > li > a,
html #brxe-hdrnav .bricks-nav-menu .sub-menu > li > a,
html #brxe-hdrnav .bricks-mobile-menu > li > a,
html #brxe-qvbbgv,
html #brxe-helead {
	font-family: Pompiere, "Pompiere Fallback", Arial, Helvetica, sans-serif;
}

/* Der Schriftzug bleibt in jedem Fall einzeilig */
html #brxe-7dybu5 {
	white-space: nowrap;
}


/* Kein Textumbruch in den Hauptmenuepunkten (08.09.2026).
   Bricks bietet fuer white-space kein Control, deshalb hier.
   ID-Selektor plus html, weil Bricks die Menuetypografie als
   ID-Regel ausgibt und nach dieser Datei laedt. */
html #brxe-hdrnav .bricks-nav-menu > li > a,
html #brxe-hdrnav .bricks-nav-menu > li > .brx-submenu-toggle > a {
	white-space: nowrap;
}