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

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

/* --- Header im Textfluss, 27.09.2026 --------------------------------
   Bricks gibt dem Sticky-Header position:fixed. Er faellt damit aus dem
   Textfluss, und der erste Abschnitt muss den Platz per padding am
   #brx-content ausgleichen. Dieser Ausgleich war fest auf 7,3 rem
   gesetzt, die Headerhoehe ist aber nicht fest: Innenabstand und
   Schriftgroessen skalieren mit clamp(), der Header schrumpft auf
   schmalen Geraeten auf rund 59 px. Die Differenz blieb als heller
   Streifen ueber dem ersten Abschnitt stehen, auf 412 px Breite
   13,3 px hoch.
   position:sticky loest das an der Ursache: der Header nimmt seine
   Hoehe wieder im Fluss ein, klebt beim Scrollen weiterhin oben, und
   es gibt keinen zweiten Wert mehr, der synchron gehalten werden muss.
   Entspricht ausserdem dem freigegebenen Entwurf.
   scroll-padding-top bleibt noetig, weil der klebende Header beim
   Tabben und bei Ankersprungen weiterhin Inhalt verdecken wuerde
   (WCAG 2.2 AA, 2.4.11 Focus Not Obscured). */
#brx-header.brx-sticky {
	position: sticky;
}

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;
	/* Nur echte Komposita trennen: Wort mindestens 16 Zeichen,
	   mindestens 4 Zeichen vor und nach dem Trennstrich. Kurze
	   Woerter wie "Menschen" bleiben dadurch ganz.
	   Festgelegt am 28.09.2026 auf Anweisung von Linda. */
	hyphenate-limit-chars: 16 4 4;
	/* Safari kennt hyphenate-limit-chars in keiner Version. Die beiden
	   WebKit-Eigenschaften (Safari ab 3.1) erreichen dasselbe indirekt:
	   8 vor plus 8 nach dem Strich heisst, ein Wort muss mindestens 16
	   Zeichen haben, damit ueberhaupt eine Trennstelle erlaubt ist.
	   Chrome und Firefox ignorieren sie, dort greift die Zeile darueber. */
	-webkit-hyphenate-limit-before: 8;
	-webkit-hyphenate-limit-after: 8;
}
