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

/* --- Schriften Poppins und Inter, 26.09.2026 ------------------------
   Umgestellt von Space Grotesk / IBM Plex Sans auf Poppins (Ueberschriften,
   Buttons, Labels) und Inter (Fliesstext). Beide liegen lokal unter
   /wp-content/uploads/core-framework/fonts/ und werden nicht von Google
   nachgeladen. latin und latin-ext sind getrennt, damit der Browser nur
   laedt, was die Seite braucht.

   Die Fallback-Familien gleichen Ober- und Unterlaenge an die echte Schrift
   an, damit das Layout beim Nachladen nicht vertikal springt. Werte aus den
   Schriftdateien ausgelesen:
   Poppins: ascent 1050, descent 350, lineGap 100, unitsPerEm 1000
   Inter:   ascent 1984, descent  494, lineGap   0, unitsPerEm 2048
-------------------------------------------------------------------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Poppins-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Poppins-400-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Poppins-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Poppins-500-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Poppins-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Poppins-600-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Poppins-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Poppins-700-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Inter-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url("/wp-content/uploads/core-framework/fonts/Inter-400-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans"),local("Roboto");ascent-override:105%;descent-override:35%;line-gap-override:10%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans"),local("Roboto");ascent-override:96.9%;descent-override:24.1%;line-gap-override:0%}
html body, html button, html input, html select, html textarea {
  font-family: "Inter", "Inter Fallback", Arial, Helvetica, sans-serif;
}
html h1, html h2, html h3, html h4, html h5, html h6 {
  font-family: "Poppins", "Poppins Fallback", Arial, Helvetica, sans-serif;
  /* Core Framework gibt den Ueberschriften je Ebene eigene Zeilenhoehen
     (h2 1,2 / h3 1,3). Der freigegebene Entwurf rechnet durchgehend mit
     1,22 und -0,01em; ohne diese Regel summieren sich die Abweichungen
     ueber die Seite zu mehreren hundert Pixeln. */
  line-height: 1.22;
  letter-spacing: -0.01em;
}

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

/* --- Ausgleich fuer den fixierten Header, 26.09.2026 -----------------
   Bricks gibt dem Header position:fixed (Klasse .brx-sticky). Er liegt
   damit ausserhalb des Textflusses und ueberdeckt die oberen Pixel des
   ersten Abschnitts. Im freigegebenen Entwurf sitzt der Header sticky
   und nimmt seine Hoehe im Fluss ein; ohne diesen Ausgleich fehlen
   oben genau die 7,3 rem Headerhoehe.
   Gilt fuer alle Seiten, nicht nur die Startseite. */
#brx-content {
	padding-block-start: var(--wpk-header-h);
}

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

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


/* --- Blockquote-Standard von Bricks zuruecksetzen, 22.08.2026 -------
   Bricks gibt jedem <blockquote> Georgia, 1.3em, 30px Einrueckung,
   15px Aussenabstand und einen 4px-Strich links mit. Im Entwurf sind
   Zitate schlichter Fliesstext ohne Auszeichnung; Groesse, Schrift und
   Abstaende kommen aus den Element-Einstellungen.
-------------------------------------------------------------------- */
blockquote.brxe-text-basic,
blockquote.brxe-text,
.brxe-block blockquote,
.brxe-div blockquote {
  border-left: 0;
  padding-left: 0;
  margin: 0;
  font-size: inherit;
  font-family: inherit;
}

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

/* --- Silbentrennung in Ueberschriften, 26.09.2026 -------------------
   Wie im freigegebenen Entwurf: lange Komposita duerfen umbrechen,
   damit auf schmalen Breiten nichts aus dem Raster laeuft. --------- */
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;hyphens:auto}
