/* Seitenrahmen-Bedienelemente: Skip-Link und "Scroll to Top".
 *
 * Beide sind auf Live von Astra gestellt und fehlten im Bricks-Nachbau ganz.
 * Alle Werte sind am gerenderten Live-Stand gemessen (1440, /faq/), nicht aus
 * Astras Quelltext abgeschrieben:
 *
 *   #ast-scroll-top   position:fixed  bottom:30px  left:30px
 *                     31.5 x 31.5     border-radius:2px
 *                     background rgb(135,10,9)  color #fff
 *                     line-height:31.5px  text-align:center  z-index:99
 *   .ast-arrow-svg    24 x 9   fill #fff   (Pfad zeigt nach unten, wird gedreht)
 *
 * Diese Datei gehoert der Koordination, nicht einem der arbeitsteiligen
 * Agenten — deshalb liegt sie getrennt von elements/layout/site/loops.
 */

/* --- Skip-Link ------------------------------------------------------------
 * Wie Astras .screen-reader-text: unsichtbar, aber bei Tastaturfokus sichtbar.
 *
 * KEIN `clip-path: inset(50%)` und KEIN `white-space: nowrap`, obwohl beides
 * die uebliche moderne Fassung dieses Musters ist. Live hat weder das eine noch
 * das andere (gemessen: clipPath `none`, whiteSpace `normal`), und `nowrap`
 * aendert die gemessene Breite des Textknotens von 59 auf 117 px — der
 * Vergleich meldet das auf jeder der 21 Seiten. Hier gilt 1:1, nicht "besser".
 */
.skip-link.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	/* Ausdruecklich `normal`, nicht nur weggelassen: eine fremde Regel im
	 * Stapel (Bricks/ACSS) setzt `.screen-reader-text { white-space: nowrap }`.
	 * Weglassen genuegt also nicht, es muss ueberschrieben werden. */
	white-space: normal;
	/* Dasselbe fuer den Hintergrund: Bricks faerbt `.skip-link` schwarz.
	 * Gemessen Live `rgba(0,0,0,0)`, Dev `rgb(0,0,0)`. Sichtbar wird das nie
	 * (1x1 px, weggeschnitten), es ist trotzdem eine Abweichung. */
	background: transparent;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 7px;
	left: 6px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 15px 23px 14px;
	clip: auto;
	clip-path: none;
	color: #870a09;
	background-color: #f1f1f1;
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
}

/* --- Scroll to Top -------------------------------------------------------- */
#ast-scroll-top {
	position: fixed;
	bottom: 30px;
	left: 30px;
	z-index: 99;
	width: 31.5px;
	height: 31.5px;
	padding: 0;
	border-radius: 2px;
	background-color: #870a09;
	color: #fff;
	/* 15px, nicht geerbte 16: Live misst am Vorlesetext "Scroll to Top"
	 * fontSize 15 / lineHeight 31.5 (= 2.10). Mit 16 wird daraus 1.97 und der
	 * Vergleich meldet SIZE und LEADING auf jeder Seite. */
	font-size: 15px;
	line-height: 31.5px;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
}

/* Vorlesetext im Knopf: exakt Astras Fassung, ohne nowrap/clip-path (s.o.).
 * `white-space: normal` auch hier ausdruecklich — ohne die Ueberschreibung
 * misst der Textknoten 89 statt 39 px und der Vergleich meldet es auf jeder
 * Seite, obwohl nichts davon sichtbar ist. */
#ast-scroll-top .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: normal;
	border: 0;
}

#ast-scroll-top .ast-arrow-svg {
	width: 24px;
	height: 9px;
	fill: #fff;
	/* Der Pfad im viewBox zeigt nach unten — Astra dreht ihn fuer den
	 * Hoch-Knopf. Ohne die Drehung zeigt der Pfeil nach unten und das
	 * Bedienelement bedeutet das Gegenteil. */
	transform: rotate(180deg);
	vertical-align: middle;
}

/* Astra verkleinert den Pfeil unterhalb seines Tablet-Haltepunkts — und zwar
 * mit ZWEI Regeln auf zwei benachbarten Breiten. Am Live-Stand ausgemessen:
 *
 *   Breite  923   922            921 und darunter
 *   svg     24x9  24x12.75       15x12.75
 *
 * Die Hoehe kippt also bei 922, die Breite bei 921. Das sieht nach einem
 * Fluechtigkeitsfehler in Astra aus, ist aber der Ist-Zustand der Referenz —
 * bei einem 1:1-Umbau wird nachgebaut, nicht begradigt.
 *
 * Ohne diese beiden Regeln steht der (unsichtbare) Vorlesetext daneben 5 px
 * weiter rechts als auf Live, und der Vergleich meldet das bei 768 und 390 auf
 * jeder Seite.
 */
@media (max-width: 922px) {
	#ast-scroll-top .ast-arrow-svg { height: 12.75px; }
}
@media (max-width: 921px) {
	#ast-scroll-top .ast-arrow-svg { width: 15px; }
}

/* --- Bedienelemente in Kopf- und Fusszeile sind keine Knoepfe -------------
 *
 * Bricks baut Untermenue-Pfeil, Mobil-Umschalter und Such-Umschalter je als
 * nacktes `<button>`. Elementor benutzt an denselben Stellen `<a>`/`<i>`.
 * Folge auf Dev: das Elementor-Kit faerbt jedes tagblanke <button> ein —
 *   .elementor-kit-9 button { background:#000; color:#fff; padding:12px 25px;
 *                             border:1px solid #000; border-radius:3px }
 * Am Bild gemessen (1440, /about-us/): zwei schwarze Kaesten statt der beiden
 * Klapp-Pfeile und ein schwarzer Kasten statt des Such-Symbols. Live hat dort
 * gar keine Flaeche (Sonde: 0 gefaerbte <button> in Kopf und Fuss).
 *
 * Spezifitaet, R52 KORRIGIERT: solange Elementor lief, musste diese Regel die
 * Kit-Regel (0,1,1) schlagen, deshalb stand die ID ungeklammert da (1,1,1). Seit
 * dem Abbau (Phase 5) gibt es das Kit nicht mehr — nachgemessen: 0 Vorkommen von
 * `elementor-kit-` im ausgelieferten HTML. Die hohe Spezifitaet hatte damit keinen
 * Zweck mehr, richtete aber Schaden an: sie schlug Bricks' EIGENE Elementregeln.
 * Der Such-Umschalter stand dadurch auf jeder Seite auf der geerbten Textfarbe
 * #161616, statt auf #CCCCCC ueber dem Hero und #8D8D8D in der eingefahrenen
 * Leiste (`#brxe-039a1d button` / `#brxe-028f52 button`, beide 1,0,1).
 *
 * Jetzt `:where(...)` = 0,1,1. Das genuegt weiterhin gegen die BROWSER-Vorgabe
 * (ein UA-Stylesheet verliert immer gegen Autoren-CSS, unabhaengig von der
 * Spezifitaet), verliert aber gegen jede Bricks-Elementregel. Genau das ist
 * gewollt: der Reset soll das Aussehen eines Systemknopfes nehmen, nicht die
 * gestaltete Farbe. `color: inherit` bleibt darin — Untermenue-Pfeil und
 * Mobil-Umschalter haben keine eigene Farbregel und brauchen die Vererbung,
 * ihr `fill` folgt `currentColor` (Fall 221).
 *
 * `.bricks-button` bleibt ausgenommen: das ist der bewusst gestaltete Knopf
 * des Bausteins, den es hier heute zwar nicht gibt, der aber in einer spaeteren
 * Vorlage auftauchen kann und dann seinen Kit-Stil behalten soll.
 *
 * Diese Regel bleibt auch nach dem Abbau von Elementor richtig: dann faellt die
 * Kit-CSS weg und die Erklaerung wird gegenstandslos, die Werte bleiben die
 * Browser-Vorgabe fuer ein Bedienelement.
 */
:where(#brx-header, #brx-footer) button:not(.bricks-button) {
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
}

/* --- Mitscrollende Kopfzeile ---------------------------------------------
 * Gegenstueck zu js/chrome.js.
 *
 * Hier steht bewusst NUR, was Elementors Sticky-JS als Inline-Stil setzt: fixieren und
 * nach vorn holen. Alles Sichtbare — `top: -90px`, der eingefahrene Zustand `top: 0` und
 * der Uebergang `.8s ease` — steht bereits im portierten Kunden-CSS (site.css Z. 181-190)
 * und wird von dort mit `!important` durchgesetzt. Es hier zu wiederholen hiesse, zwei
 * Quellen fuer denselben Wert zu haben.
 *
 * `z-index` muss ueberschrieben werden: das Kunden-CSS setzt `-1` (der Platzhalter lag
 * bei Elementor hinter allem), die eingefahrene Leiste braucht 99. Am Live-Stand am
 * fixierten Klon gemessen: z-index 99.
 * Spezifitaet 1,1,1 gegen `.sticky-header` 0,1,0 — kein !important noetig.
 */
#brx-header > .sticky-header[data-ls-sticky="bar"] {
	position: fixed;
	z-index: 99;
}

/* --- Hauptmenue: Dropdown-Pfeil und Untermenue ----------------------------
 *
 * Beides faellt mit dem Elementor-Abbau weg, weil auf Live nicht Astra den
 * Pfeil stellt, sondern ein Elementor-Icon (e-fas-caret-down) — und Astra das
 * Untermenue formatiert. Bricks bringt fuer beides eigene Vorgaben mit, die
 * sichtbar danebenliegen.
 *
 * Alle Werte am gerenderten Live-Stand gemessen (1440, / und /company/):
 *
 *   Pfeil        fill folgt der Textfarbe: rgb(204,204,204) ueber dem
 *                transparenten Kopf, rgb(135,10,9) ueber dem weissen.
 *                Bricks' Inline-SVG hat stattdessen fill:rgb(0,0,0) fest —
 *                der Pfeil war deshalb in JEDER Kopfvariante schwarz.
 *   Untermenue   background rgb(229,229,229)   border-radius 0 0 3px 3px
 *                width 156px FEST — auf Live sind alle Untermenues gleich breit,
 *                unabhaengig vom laengsten Eintrag (geprueft an zwei Menuepunkten
 *                mit deutlich unterschiedlichen Beschriftungen).
 *   Untereintrag color rgb(0,0,0)  Exo 16px  padding 12px 10px  line-height 20px
 *                (Bricks: rgb(38,50,56) Kasten, Public Sans 16px, padding 0 20px)
 *
 * Zur Schriftgroesse: eine Zwischenmessung meldete hier 15px. Das war das
 * zweite, unsichtbare Astra-Menue im Desktop-Popup, nicht das dargestellte.
 * Massgeblich ist das Untermenue mit Ausdehnung > 0 im Kopfbereich: 16px.
 *
 * Bewusst auf .bricks-nav-menu eingegrenzt: Bricks rendert dasselbe Menue ein
 * zweites Mal als .bricks-mobile-menu (weisse Schrift auf dunklem Grund). Ohne
 * diese Eingrenzung wuerde die Mobilnavigation mit umgefaerbt.
 */
.bricks-nav-menu .brx-submenu-toggle > button > svg,
.bricks-nav-menu .brx-submenu-toggle > button > svg path {
	fill: currentColor;
}

.bricks-nav-menu .sub-menu {
	background-color: rgb( 229, 229, 229 );
	border-radius: 0 0 3px 3px;
	min-width: 0;
	width: 156px;
}

.bricks-nav-menu .sub-menu > li > a,
.bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > a {
	color: rgb( 0, 0, 0 );
	font-family: Exo, sans-serif;
	font-size: 16px;
	line-height: 20px;
	padding: 12px 10px;
}

/* ---------------------------------------------------------------------------
 * Fusszeilen-Menue: Unterstreichung beim Ueberfahren war zu lang (Florian, R51)
 *
 * Ursache ist eine Bricks-ELEMENTVORGABE, die Elementor nicht hat:
 *   :where(.brxe-nav-menu) .bricks-nav-menu li:not(.brx-has-megamenu) > a
 *       { display:flex; width:100% }
 * Die portierte Kundenregel (html #footer_nav a) setzt display:inline-block und
 * gewinnt dort — width:100% bleibt aber stehen. Der Link fuellt damit die volle
 * Spaltenbreite, und die Unterstreichung ist ein ::after mit width:100% des
 * Links (scaleX 0 -> 1 beim Hover). Sie lief deshalb ueber die ganze Spalte.
 *
 * Gemessen 1440, Fusszeile (Live | Dev vorher):
 *   Science & Technology  137,50 | 316,67      Newsroom   66,91 | 316,67
 *   Products & Services   126,06 | 316,67      Events     42,81 | 316,67
 * Bestand: 15 betroffene Links, alle in der Fusszeile. Kopfmenue deckt sich
 * schon (Live 160/143 = Dev 160/143).
 *
 * Bewusst width:auto statt eines Wertes — dann entscheidet das Layout, so wie
 * es auf Live auch das Layout entscheidet:
 *   Fuss    a ist inline-block  -> schrumpft auf den Text        (Live 137,50)
 *   Kopf    a ist flex          -> block-level, volle Breite      (Live 330 @390)
 *   Unter-  a ist flex          -> fuellt den 156px-Kasten weiter
 * Eine gesetzte Breite waere hier wieder ein handgemessener Wert; die
 * Elementvorgabe wird nur zurueckgenommen, nicht ersetzt.
 *
 * `html` davor, weil Bricks' Vorgabe 0-2-2 wiegt (:where zaehlt 0) und die
 * Ladereihenfolge sonst entscheidet — dieselbe Technik wie harden_ids().
 * Kein Megamenue auf der Site (0 Vorkommen von brx-has-megamenu), das
 * :not() aus der Vorgabe muss deshalb nicht nachgebildet werden.
 * ------------------------------------------------------------------------- */
html .brxe-nav-menu .bricks-nav-menu li > a {
	width: auto;
}

/* ---------------------------------------------------------------------------
 * R53 — Such-Umschalter und Such-Overlay.
 *
 * Beides ist nach dem Elementor-Abbau auf Bricks' Vorgaben zurueckgefallen.
 * Alle Werte sind am gerenderten LIVE-Stand gemessen (work/diag/r53-overlay-
 * live.png, /tmp-Messungen m7-m10), nicht aus Einstellungen abgeleitet: in
 * Elementors Widget-Einstellungen steht dazu NICHTS. Sie stammen aus Elementor
 * Pros eigenem Stylesheet (search-form full_screen-Skin) und fallen mit dem
 * Plugin weg -- gleiche Familie wie `.elementor-author-box__bio{margin-bottom:.8em}`
 * (R29), die TEC-Sammelregel (R22) und `.e-font-icon-svg{height:1em}` (R33).
 *
 * 1) Das Lupensymbol. Der Konverter setzte `fas fa-search` mit der Begruendung,
 *    Elementors Skin benutze fest Font Awesome. Das ist FALSCH und war
 *    hergeleitet statt gemessen: Font Awesome zeichnet auf viewBox 0 0 512 512,
 *    Lives Lupe auf 0 0 32 32 -- ein anderes Zeichen mit duenneren Strichen
 *    (Florians "fetter"). Der Pfad in icons/search.svg ist woertlich aus dem
 *    Live-DOM uebernommen.
 *
 *    Warum als Maske und nicht als echtes <svg>: Bricks' render_icon() rendert
 *    eine SVG-Datei AUSSCHLIESSLICH ueber eine Anhang-ID (base.php Z. 4380) --
 *    die ist beim Umzug Dev->Live eine andere. Die Ausnahme, die beim
 *    Untermenue-Pfeil gegen die Maske sprach (eine Kundenregel faerbt dort per
 *    `fill`, und `fill` tut auf einem Maskenelement nichts), gilt hier NICHT:
 *    auf die Lupe zielt keine einzige `fill`-Regel, die Farbe kommt ueber
 *    `color` -- und die traegt `background-color: currentColor` genauso.
 */
.brxe-search .toggle .ls-icon-search {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("icons/search.svg") no-repeat center / contain;
  mask: url("icons/search.svg") no-repeat center / contain;
}

/* 2) Das Overlay. Live: dunkel abgedunkelte Seite mit einer breiten, nur unten
 *    unterstrichenen Eingabezeile. Dev fiel auf Bricks' Vorgabe zurueck: DECKEND
 *    weiss, Feld mit Rahmen rundum -- und darin weisse Schrift auf weissem
 *    Grund, also unlesbar. Gemessen 1440:
 *
 *              LIVE                        DEV (vorher)
 *      Grund   rgba(0,0,0,.8)              rgb(255,255,255)
 *      Feld    x 216  w 1008 (= 70 %)      x 420  w 600
 *      Rahmen  nur unten 1px #FFF          rundum 1px #DDDEDF
 *      Radius  4px                         0
 *      Platzh. #FFF                        #9E9E9E
 */
.brxe-search .bricks-search-overlay {
  background-color: rgba(0, 0, 0, .8);
}

/* Lives Feldbreite steckt als Innenabstand am Container (gemessen 216px je
 * Seite bei 1440 = 15 %), nicht als Breite am Feld. Als Prozentwert portiert,
 * damit es auf jeder Breite dasselbe Verhaeltnis ergibt wie dort. */
.brxe-search .bricks-search-inner {
  padding: 0 15%;
}

/* Bricks stellt dem Feld eine Ueberschrift voran ("Search site", search.php
 * Z. 475 als Vorgabe). Live hat an dieser Stelle nur ein fuer Screenreader
 * sichtbares Label -- also nicht loeschen, sondern visuell verstecken. */
.brxe-search .bricks-search-overlay .title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.brxe-search .bricks-search-overlay form {
  width: 100%;
  /* Bricks deckelt das Formular auf 600px
   * (.bricks-search-overlay .bricks-search-form). Lives Breite ergibt sich
   * dagegen aus dem Innenabstand des Containers -- 15 % je Seite sind bei
   * 1440 exakt die gemessenen 216px. Deckel zuruecknehmen, nicht ueberschreiben. */
  max-width: none;
}

.brxe-search .bricks-search-overlay input[type="search"],
.brxe-search .bricks-search-overlay input[type="text"] {
  width: 100%;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #FFFFFF;
  border-radius: 4px;
  color: #FFFFFF;
  text-align: center;
}

.brxe-search .bricks-search-overlay input::placeholder {
  color: #FFFFFF;
  opacity: 1;
}

/* Fokus: Live setzt am Suchfeld `outline: none` (gemessen), Dev bekam von ACSS
 * einen 2px-Ring in Markenrot mit 2px Abstand -- im Bild der rote Kasten um das
 * Feld. Bewusst NUR im Such-Overlay zurueckgenommen: dort ist das Feld das
 * einzige bedienbare Element, ausserhalb bleibt der Fokusring unangetastet. */
.brxe-search .bricks-search-overlay input:focus,
.brxe-search .bricks-search-overlay input:focus-visible {
  outline: none;
}

/* Schliessen-Knopf: BEWUSSTE ABWEICHUNG von Live, entschieden von Florian am
 * 2026-08-24 ("baue den Schliessen-Knopf gerne ein. Der fehlt tatsaechlich auf
 * Live. Macht aber Sinn.").
 *
 * Auf Live steht Elementors Knoten zwar im DOM, misst aber 0px Breite (gemessen
 * x 1224, w 0, h 28) -- geschlossen wird dort nur per ESC oder Klick daneben.
 * Bricks bringt ein sichtbares "x" mit; das bleibt jetzt stehen.
 *
 * KEINE Farbregel hier. Der erste Anlauf setzte `color:#FFFFFF` -- die Regel stand
 * sauber im Stylesheet und wirkte nicht: Bricks schreibt die Einstellungen des
 * Such-Elements als `#brxe-039a1d button` (1-0-1) und schlaegt damit jeden
 * Klassenselektor. Gemessen per CSS.getMatchedStylesForNode.
 * Es gewinnt `font-size:21px; color:#CCCCCC; width/height:21px` -- also genau die
 * Farbe, die der Konverter aus Elementors Such-Widget uebernommen hat und die auch
 * das Lupensymbol traegt. Auf dem dunklen Grund (rgba(0,0,0,.8)) gut sichtbar, und
 * konsistent mit der Lupe. Da Live hier gar keinen sichtbaren Knopf hat, gibt es
 * keine Referenz, gegen die man etwas anderes belegen koennte -- deshalb bleibt es
 * beim Wert aus den Daten statt bei einem gesetzten Handwert. */
.brxe-search .bricks-search-overlay .close svg {
  fill: currentColor;
}