/* GENERIERT von scripts/build-css.sh – Quellen: public/css/src/ */

/* ==== 00-tokens.css ==== */
/* Design-Tokens – Werte 1:1 aus Automatic.css der WordPress-Seite */
:root {
  /* Farben */
  --primary: #1BB7CB; --primary-hover: #26cde3; --primary-ultra-light: #f0fdff; --primary-light: #bbeff6;
  --primary-semi-light: #61daea; --primary-semi-dark: #158e9e; --primary-dark: #0f6571; --primary-ultra-dark: #06292d;
  --primary-medium: #1ab6cb; --primary-trans-80: rgba(27,183,203,.8); --primary-light-trans-70: rgba(187,239,246,.7);
  --primary-light-trans-80: rgba(187,239,246,.8);
  --secondary: #3CB523; --secondary-hover: #43ce27; --secondary-ultra-light: #ecfbea; --secondary-light: #c7f3bf;
  --secondary-semi-light: #7de269; --secondary-semi-dark: #31961d; --secondary-dark: #236b14; --secondary-ultra-dark: #0e2b08;
  --secondary-medium: #72ee81;
  --tertiary: #F3FEEC; --tertiary-ultra-light: #f0fee7; --tertiary-light: #d1fbb6; --tertiary-medium: #65f20d;
  --neutral: #121F4D; --neutral-hover: #15245b; --neutral-ultra-light: #e6e6e6; --neutral-light: #d9d9d9;
  --neutral-semi-light: #a6a6a6; --neutral-semi-dark: #223a91; --neutral-dark: #182967; --neutral-ultra-dark: #0a1129;
  --neutral-medium: #0362ab; --neutral-trans-20: rgba(18,31,77,.2); --neutral-trans-50: rgba(18,31,77,.5);
  --neutral-trans-60: rgba(18,31,77,.6); --neutral-light-trans-20: rgba(217,217,217,.2);
  --neutral-trans-80: rgba(18,31,77,.8); --neutral-ultra-dark-trans-80: rgba(10,17,41,.8);
  --white: #fff; --black: #000; --black-trans-10: rgba(0,0,0,.1); --black-trans-20: rgba(0,0,0,.2);
  --white-trans-20: rgba(255,255,255,.2);
  --white-trans-30: rgba(255,255,255,.3);
  /* Phase 4 (Händlerliste .listing-partner__partner): im Original aus automatic.css. */
  --white-trans-50: rgba(255,255,255,.5);
  --white-trans-60: rgba(255,255,255,.6); --white-trans-70: rgba(255,255,255,.7); --white-trans-80: rgba(255,255,255,.8);
  --accent: var(--primary-dark);
  /* --base gibt es im Original bewusst NICHT: dort steht in .btn--primary „color: var(--base)".
     Weil die Variable fehlt, ist die Angabe ungültig und der Button erbt die Schriftfarbe seines
     Umfelds (im Hero weiss, im Header dunkel). 30-buttons.css bildet das mit „color: inherit" nach. */
  --text-color: var(--neutral); --heading-color: var(--neutral); --body-bg-color: var(--white);
  --link-color: var(--neutral); --link-color-hover: var(--primary);
  --border-size: 0.5px; --border-color-dark: var(--neutral-trans-20);
  --border-color-light: var(--white-trans-20);

  /* Typografie (fluid, gemessen bei 16px Wurzel) */
  --text-xs: 0.6875rem;
  --text-s: 0.75rem;
  --text-m: clamp(0.75rem, calc(0.3571428571vw + 0.6785714286rem), 1rem);
  --text-l: clamp(0.9rem, calc(0.6185714286vw + 0.7762857143rem), 1.333rem);
  --text-xl: clamp(1.08rem, calc(0.9955557143vw + 0.8808888571rem), 1.776889rem);
  --text-xxl: clamp(1.296rem, calc(1.5322757671vw + 0.9895448466rem), 2.368593037rem);
  --h1: clamp(2.5rem, calc(3.5714285714vw + 1.7857142857rem), 5rem);
  --h2: clamp(1.44rem, calc(1.9607142857vw + 1.0478571429rem), 2.8125rem);
  --h3: clamp(1.2rem, calc(0.9642857143vw + 1.0071428571rem), 1.875rem);
  --h4: 1rem; --h5: 0.75rem; --h6: 0.6875rem;
  --heading-font-weight: 300; --heading-line-height: 1.2; --text-line-height: 1.5;
  /* Zeilenbreite der Überschriften wie im Original: h1 unbegrenzt, h2 auf 25 Zeichen. */
  --h1-max-width: 100%; --h2-max-width: 25ch;

  /* Abstände (fluid) */
  --space-xs: clamp(0.5276075208rem, calc(0.4367511608vw + 0.4402572886rem), 0.8333333333rem);
  --space-s: clamp(0.7033008252rem, calc(0.7809988211vw + 0.547101061rem), 1.25rem);
  --space-m: clamp(0.9375rem, calc(1.3392857143vw + 0.6696428571rem), 1.875rem);
  --space-l: clamp(1.2496875rem, calc(2.2325892857vw + 0.8031696429rem), 2.8125rem);
  --space-xl: clamp(1.6658334375rem, calc(3.6470236607vw + 0.9364287054rem), 4.21875rem);
  --space-xxl: clamp(2.2205559722rem, calc(5.867955754vw + 1.0469648214rem), 6.328125rem);
  --section-space-xs: clamp(1.8466263227rem, calc(2.123867158vw + 1.4218528912rem), 3.3333333333rem);
  --section-space-s: clamp(2.4615528882rem, calc(3.6263530168vw + 1.7362822849rem), 5rem);
  --section-space-m: clamp(3.28125rem, calc(6.0267857143vw + 2.0758928571rem), 7.5rem);
  --section-space-l: clamp(4.37390625rem, calc(9.8229910714vw + 2.4093080357rem), 11.25rem);
  --section-space-xl: clamp(5.8304170313rem, calc(15.7779756696vw + 2.6748218973rem), 16.875rem);
  --section-space-xxl: clamp(7.7719459027rem, calc(25.0579344248vw + 2.7603590177rem), 25.3125rem);
  --gutter: var(--space-m); --content-gap: var(--space-m); --grid-gap: var(--space-m);
  --content-width: 90rem;

  /* Raster */
  --grid-1: minmax(0, 1fr);
  --grid-2: repeat(2, minmax(0, 1fr)); --grid-3: repeat(3, minmax(0, 1fr)); --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr)); --grid-6: repeat(6, minmax(0, 1fr)); --grid-7: repeat(7, minmax(0, 1fr));
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr); --grid-1-2: minmax(0, 1fr) minmax(0, 2fr); --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr); --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

  /* Radien, Schatten, Buttons */
  --radius: 1em; --radius-xs: 0.4444444444em; --radius-s: 0.6666666667em; --radius-m: 1em; --radius-l: 1.5em; --radius-xl: 2.25em;
  --box-shadow-m: 0 4px 4px -10px rgba(18,31,78,.04), 0 13px 13px -10px rgba(18,31,78,.06), 0 40px 60px -10px rgba(18,31,78,.08);
  --box-shadow-l: 0 2.7px 3.6px -5px rgba(18,31,78,.04), 0 7.5px 10px -5px rgba(18,31,78,.06), 0 18px 24.1px -5px rgba(18,31,78,.08), 0 60px 80px -5px rgba(18,31,78,.1);
  --btn-padding-block: 1.2em; --btn-padding-inline: 1.8em; --btn-weight: 600;
  --btn-radius: calc(var(--radius) / 2);
  /* Befund F-2: `--text-underline-offset` und `--textdecothickness` gibt es im Original NICHT.
     Sie stehen dort in wpcodebox-1-styling.css in einem Block, der mit „0:root {" beginnt –
     ein ungültiger Selektor, den der Browser samt Inhalt verwirft. Alle Regeln, die die beiden
     Variablen benutzen, sind im Original deshalb „invalid at computed-value time" und fallen
     auf `auto` zurück (gemessen: Kopf, Fuss, Fliesstext und Kachel überall `auto`/`auto`; bei
     uns lagen die Unterstreichungen 3,84–6,40 px tiefer und waren 1,2 px dick). Die beiden
     Variablen sind hier deshalb ersatzlos gestrichen; die Regeln schreiben nichts mehr. */
  --gap: var(--space-l);
}

/* ==== 10-base.css ==== */
/* Schriften: Helvetica Neue LT Pro, Gewichte wie in Bricks registriert */
@font-face { font-family: "Helvetica Neu LT"; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/HelveticaNeueLTPro-Lt.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neu LT"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/HelveticaNeueLTPro-Roman.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neu LT"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/HelveticaNeueLTPro-Md.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neu LT"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/HelveticaNeueLTPro-Bd.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
:target { scroll-margin-top: 100px; }
html, body { touch-action: manipulation; }
body {
  margin: 0; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden;
  font-family: "Helvetica Neu LT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400; font-size: var(--text-m); line-height: var(--text-line-height);
  color: var(--text-color); background-color: var(--body-bg-color);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-wrap: balance;
}
main { flex: 1 0 auto; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
figure { margin: 0; }

/* Ausrichtungsklassen aus WordPress. Sie stehen im Original global im Stylesheet des Themes
   (bricks/assets/css/frontend-layer.min.css, ausserhalb jeder @layer und damit uneingeschränkt
   gültig) und gelten dort auf jeder Seite. Bei uns tragen sie die aus WordPress übernommenen
   Bilder in den Bard-Feldern der Baukastenblöcke: 174-mal „aligncenter", 196-mal „alignnone".
   Ohne sie stehen zentrierte Bilder links und ohne die 8 px Aussenabstand (gemessen an den
   Akkordeon-Feldern von /en/products/signal-sources/minirator-mr-pro-mr2: Original
   margin 8px auto, Nachbau 0). Regeln 1:1 übernommen.
   „alignnone" hat im Original KEINE eigene Regel (nur .wp-caption.alignnone) – deshalb steht
   hier auch keine. */
.aligncenter { display: block; margin: .5em auto; }
.alignright { float: right; margin: .5em 0 .5em 1em; }
.alignleft { float: left; margin: .5em 1em .5em 0; }
a img.alignright { float: right; margin: .5em 0 .5em 1em; }
a img.alignleft { float: left; margin: .5em 1em .5em 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.aligncenter img { margin-left: auto; margin-right: auto; }
.aligncenter a, .aligncenter img { display: block; }

/* Blockklassen aus dem WordPress-Editor. Sie stehen im Original ebenfalls global und
   ungeschichtet im Theme-Stylesheet (bricks/assets/css/frontend-layer.min.css, vor dem
   „@layer bricks"-Block und damit uneingeschränkt gültig). Im Bestand tragen sie die aus
   WordPress übernommenen Bilder: „wp-block-image" 278-mal, „alignwide" 117-mal – heute
   ausschliesslich in den News-Beiträgen, deren Detailseite Phase 3 ausbaut.
   Nicht übernommen: .wp-block-calendar und .alignfull (im Bestand nicht vorhanden) sowie
   die einzige .wp-block-gallery-Regel des Originals, die auf .brxe-post-content eingegrenzt
   ist und für unseren Fliesstext ohnehin nicht gilt. Werte 1:1. */
.wp-block-image, .wp-block-video, figure[class^="wp-block-"] { margin: 1em 0; }
.wp-block-image:not(.wp-block-gallery .wp-block-image),
figure[class^="wp-block-"]:not(.wp-block-gallery figure):not([class^="align"]) { width: 100%; }
.wp-block-image figure { width: auto; }
.alignwide { margin-left: -10%; max-width: 120%; position: relative; width: 120%; }
@media (max-width: 1320px) { .alignwide { margin-left: auto; width: 100%; } }
/* Basistypografie. Das Original nimmt Absätzen, Überschriften und Listen den Blockabstand
   global weg (Automatic.css: „body:where(:not(.block-editor-writing-flow, .editor-styles-wrapper))
   :where(p, h1, …, li) { margin-block: 0 }"). Der Fluss-Abstand kommt erst innerhalb eines
   Fliesstextes zurück – dort über „smart spacing", bei uns .cb-text in 88-content-blocks.css.
   Bis zur Konsolidierung stand hier „p { margin: 0 0 1.2em }", was das Original nicht kennt;
   jede Set- und Seitendatei musste den Abstand örtlich wieder zurücknehmen (90, 92, 97, 98, 99).
   Die drei Zeilen darunter und „ul + p" stehen im Original im Seiten-CSS (WPCodeBox). */
body :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; }
p:last-child { margin-bottom: 0; }
p:first-child { margin-top: 0; }
p:empty { display: none; }
ul + p { margin-top: 1em; }
strong, b { font-weight: 500 !important; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--heading-font-weight); line-height: var(--heading-line-height); color: var(--heading-color); text-wrap: balance; }
h1 { font-size: var(--h1); max-width: var(--h1-max-width); }
/* Das Original begrenzt h2 global auf --h2-max-width (25ch); dadurch brechen die
   Blocküberschriften zweizeilig um. Gilt für Header, Footer und alle Blöcke. */
h2 { font-size: var(--h2); max-width: var(--h2-max-width); }
h3 { font-size: var(--h3); }
h5 { font-size: var(--h5); } h6 { font-size: var(--h6); }
/* h4, .claim und .text-blue-arrow sind im Original die „Pfeil-Vorzeile" */
h4, .text-blue-arrow, .claim {
  display: flex; gap: .3em; align-items: center; color: var(--primary); font-weight: 600;
  text-transform: uppercase; font-size: .9em !important; margin: 0;
}
h4::before, .text-blue-arrow::before, .claim::before {
  content: ""; display: block; width: .4em; height: .7em; background: currentColor;
  clip-path: polygon(0% 20%, 20% 0%, 100% 50%, 20% 100%, 0% 80%, 60% 50%); margin-top: -.33em;
}
a.claim { text-decoration: none; }
a.claim:hover { color: var(--neutral); text-decoration: underline; }
a { color: var(--link-color); transition: all .3s ease-in-out; }
/* Buttons sind ausgenommen – sonst gewönne die Link-Hoverfarbe gegen die Button-Variante
   (im Original genauso: „body a:where(:not([class*=btn--])):hover"). */
a:where(:not([class*="btn--"])):hover { color: var(--link-color-hover); }
/* Abstand und Dicke der Unterstreichung bleiben `auto` wie im Original (Befund F-2, siehe
   00-tokens.css): dort ist der Block, der die beiden Variablen setzen sollte, ungültig.
   Die Regel für `nav a, footer a` schrieb ausschliesslich diese beiden Werte und entfällt. */
main a { text-decoration: underline; }
@media (min-width: 768px) { a[href^="tel:"], a[href^="tel:"]:hover { text-decoration: none !important; color: inherit !important; } }
hr { border: none; height: var(--border-size) !important; background-color: var(--neutral-trans-60) !important; margin-block: var(--space-m); }
blockquote { border: none; padding: 0; margin: 0; font-family: inherit; font-weight: 300; font-size: 1.3em; }
/* Original: Bricks setzt cite auf Block, aufrecht und mit .5em Abstand, das Seiten-CSS
   nimmt Grossschreibung und Transparenz wieder zurück und setzt die Schriftgrösse. */
blockquote cite { display: block; margin-top: .5em; font-size: calc(var(--text-m) * .9); font-style: normal; opacity: 1; text-transform: none; }
input::placeholder, textarea::placeholder { color: #999; opacity: 1; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 0.2rem solid currentColor; outline-offset: 0.25em; }

/* Silbentrennung (Befund F-1). Im Original hängt sie an „.brxe-text p" und gilt damit für
   jeden Bricks-Textbaustein: den Fliesstext der Baukastenblöcke ebenso wie die Auszüge der
   Kacheln. Sie entscheidet über die Zeilenumbrüche und damit über die Höhe jedes Textblocks.
   Bis zur Konsolidierung stand sie dreifach in 89, 97 und 98 – dort einmal mit einem
   Selektor, der ins Leere lief (.products-slider .app-item__text p: unsere Kachel ist der
   Absatz selbst, im Original ein <div> mit einem <p> darin).
   Nicht aufgeführt sind die Bausteine, die im Original „text-basic" sind (Akkordeon-Text,
   News-Kacheln, Download-Zeilen) – dort trennt auch das Original nicht. */
.cb-text p,
.app-item__text,
.bits-listing__excerpt p,
.bits-full-list__text p {
  hyphens: auto; -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-zone: 8%;
  overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;
  text-justify: inter-word;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 10000; background: var(--neutral); color: #fff; padding: .6em 1em; }
.skip-link:focus { left: var(--space-m); top: var(--space-m); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==== 20-layout.css ==== */
/* Sektion = volle Breite mit seitlichem Gutter, Container = 90rem zentriert (wie Bricks + ACSS) */
.section { padding: var(--section-space, var(--section-space-m)) var(--gutter); position: relative; }
.container { width: 100%; max-width: var(--content-width); margin-inline: auto; display: flex; flex-direction: column; row-gap: var(--content-gap); }
.container--row { flex-direction: row; align-items: center; }
.grid { display: grid; gap: var(--grid-gap); }
.center-all { align-items: center; text-align: center; }
@media (max-width: 768px) { .center-all { align-items: flex-start; text-align: left; } }

/* ==== 30-buttons.css ==== */
/* Buttons – Aufbau wie im Original: eine Grundregel (dort „[class*=btn--]" aus Automatic.css)
   und je Variante Hintergrund, Schriftfarbe und Radius.

   Zwei Eigenheiten des Originals sind hier bewusst nachgebaut (Befund B-4):
   1. Die Schriftfarbe steht NICHT in der Grundregel. `.btn--primary` schreibt im Original
      „color: var(--base)", und --base ist dort nirgends definiert – die Angabe ist damit
      ungültig und der Button erbt die Schriftfarbe seines Umfelds (im Hero weiss, im Header
      dunkel). Wir schreiben dafür „color: inherit"; das ist dasselbe Ergebnis, nur lesbar.
   2. Der Radius unterscheidet sich je Variante: --btn-radius (= --radius/2 = .5em) für alle,
      ausser bei .btn--primary, das im Original ausdrücklich --radius-s (.667em) setzt. */
/* Der Selektor nennt jede Klasse, die mit „btn--" BEGINNT: im Original ist die Grundregel
   „[class*=btn--]" (Automatic.css, automatic-bricks.css Zeile 586). Bricks-Buttons, die in einem
   WYSIWYG-Feld stehen, tragen nur „btn--m btn--primary" ohne .btn – 46 Stellen in 19 Einträgen
   (u. a. der XL3-Akkordeon-Einleitung). Ohne diese Erweiterung fehlten ihnen Polster und
   Darstellung (gemessen 16 statt 49,58 px hoch, Textblock 25,58 px zu flach).
   Bewusst nicht „[class*=btn--]" wie im Original: unser Einwilligungsbanner benutzt
   .consent__btn--accept/-deny/-prefs/-save, die dabei mitgefangen würden. „^=" und „*=' btn--'"
   greifen nur, wenn der Klassenname selbst mit btn-- beginnt.

   Das nackte „.btn" stylt das Original NICHT, und wir jetzt auch nicht mehr: 39 Links aus
   WordPress tragen class="btn" ohne Variante (u. a. drei im Fliesstext von
   /en/applications/room-building-acoustics/room-acoustics, dort +76,73 px zu viel). Alle
   Buttons unserer Vorlagen tragen ohnehin eine btn---Variante. */
[class^="btn--"], [class*=" btn--"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: var(--btn-padding-block) var(--btn-padding-inline) .9em;
  font-size: var(--text-m); font-weight: 500; line-height: 1; text-decoration: none !important;
  border: 0; border-radius: var(--btn-radius); cursor: pointer;
  position: relative; overflow: hidden; z-index: 1; transition: all .3s ease; white-space: nowrap;
  background: var(--neutral-ultra-light);
}
.btn--primary, .ff-btn-submit, [type="submit"] {
  background: linear-gradient(90deg, #89f456 -20%, #3ecfe2 100%) !important; color: inherit;
  position: relative; overflow: hidden; z-index: 1; font-weight: 500 !important; font-size: var(--text-m) !important;
  line-height: 1 !important; border: 0; border-radius: var(--radius-s); cursor: pointer; transition: all .3s ease;
}
.ff-btn-submit:not(.btn), [type="submit"]:not(.btn) {
  padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline);
}
/* Befund F-1, nachgemessen: der Newsletter-Knopf des Originals ist NICHT flach – er trägt
   denselben Verlauf wie jeder .btn--primary (die Meldung aus Task 6 stammt aus einer Messung
   ohne Nutzerinteraktion, bei der das Original seine Stilvorlagen noch nicht anwendet).
   Gemessen bei 1440 px auf /en/company/news, Fusszeile wie Seitenleiste: Verlauf, Radius 8 px
   (aus .newsletter-form__submit), 132,25 × 49,58 px, Polster 19,2/28,8/14,4 px – bei uns
   identisch. Offen blieb nur diese Regel des Originals (wpcodebox-1-styling.css Zeile 483),
   die für jeden Absende-Knopf in einem Formular gilt: eine Grundfarbe unter dem Verlauf und
   ein eigener Hover-Wert. Sichtbar wird davon nichts (der Verlauf deckt sie vollständig ab),
   1:1 gehört sie trotzdem dazu.

   Das `!important` steht so im Original und ist nicht schmückend: die Regel darüber setzt den
   Verlauf über die KURZSCHRIFT `background`, und die stellt die Hintergrundfarbe zugleich auf
   „durchsichtig" – ebenfalls mit `!important`. Ohne `!important` verlöre die Farbe deshalb und
   der Knopf hätte rgba(0, 0, 0, 0) statt rgb(27, 183, 203) (Phase 5, Task 2, gemessen an
   /en/contact). Mit `!important` entscheidet die Genauigkeit des Selektors, und die ist hier
   höher – wie im Original. Am Bild ändert sich nichts, der Verlauf deckt die Farbe ab. */
form button[type="submit"] {
  background-color: var(--primary) !important; transition: all 3s ease; gap: .5em;
}
form button[type="submit"]:hover { background-color: var(--accent) !important; gap: 1em; }
.btn--primary::before, .ff-btn-submit::before, [type="submit"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 1; transition: all .3s ease;
  background: linear-gradient(90deg, #3ecfe2 20%, #89f456 150%) !important;
}
.btn--primary:hover::before, .ff-btn-submit:hover::before, [type="submit"]:hover::before { opacity: 0; }
.btn--neutral-dark { background: var(--neutral-dark); color: var(--neutral-ultra-light); }
.btn--neutral-dark:hover { background: var(--neutral-ultra-dark); color: var(--neutral-ultra-light); }
.btn--primary-light { background: var(--primary-light); color: var(--neutral); }
.btn--primary-light:hover { background: var(--primary); color: var(--white); }
/* Nur Polster – die Schriftgrösse bleibt --text-m (am Original gemessen: 16 px bei 1440 px). */
.btn--s { padding: .7em .7em .4em !important; }
/* Header-/Footer-Buttons haben im Original schmalere Seitenpolster */
.btn--tight { padding-inline: 1em; }
/* Dieselbe Verschmälerung, aber unfreiwillig: 30 der 46 aus WordPress übernommenen Fliesstext-
   Buttons tragen die id eines Bricks-Elements aus Kopfbereich und Offcanvas
   (brxe-rftxml / -syxngz / -zsjecm = „Request a quote"). Im Original greift dadurch deren
   Element-CSS „#brxe-… { padding-right: 1em; padding-left: 1em }" auch im Fliesstext – gemessen
   16 statt 28,8 px. 1:1 übernommen, damit die Buttons dieselbe Breite haben (280,27 px). */
#brxe-rftxml, #brxe-syxngz, #brxe-zsjecm { padding-inline: 1em; }
/* Text-Wechsel Desktop/Mobil („Request a quote" ↔ „Contact") */
.btn .mb { display: none; } .btn .dt { display: inline; }
@media (max-width: 550px) { .btn .mb { display: inline; } .btn .dt { display: none; } }

/* ==== 40-header.css ==== */
/* ===== Header (Werte aus den Bricks-Elementen + WPCodeBox-Styling des Originals) ===== */
.site-header { position: relative; z-index: 9999; width: 100%; }
.site-header.scrolling { position: fixed; top: 0; left: 0; }
.site-header.scrolling .topbar { display: none; }

/* Topbar */
.topbar { background: var(--primary-ultra-light); padding: calc(var(--space-xs) / 2) var(--gutter); font-size: .8em; }
.topbar p { margin: 0 !important; }
.topbar__inner { max-width: var(--content-width); margin-inline: auto; display: grid; gap: var(--grid-gap); grid-template-columns: var(--grid-3-1); align-items: center; }
.topbar__events { display: flex; align-items: center; margin-top: .35em; min-height: 1.5em; }
/* min-width: 0 – ohne das wächst das Laufband als Flex-Element mit seinem Inhalt; bei den langen
   deutschen Veranstaltungstiteln ragte der Ticker sonst 117 px über den Container hinaus (bei
   der Abnahme gemessen; das Original bleibt bei 1440 px). */
.topbar__slider { min-width: 0; }
.topbar__slider, .topbar__slider * { border-radius: 0 !important; }
/* Splide blendet .splide bis zur Initialisierung aus – ohne JavaScript bleibt so der erste Termin sichtbar */
.topbar__slider:not(.is-initialized):not(.is-rendered), .topbar__slider:not(.is-initialized):not(.is-rendered) .splide__slide { visibility: visible; }
.topbar__slider:not(.is-initialized):not(.is-rendered) .splide__slide ~ .splide__slide { display: none; }
.topbar__slider .splide__list { margin: 0; padding: 0; list-style: none; }
.topbar__event { display: flex; gap: var(--space-xs); text-transform: uppercase; align-items: baseline; }
.topbar__event-title { font-weight: 500; color: var(--neutral); }
.topbar__event-link, .topbar__event-link:visited { color: var(--primary) !important; font-weight: 500; text-decoration: underline; }
.topbar__event-link:hover { color: var(--neutral) !important; }
.topbar__made { display: flex; justify-content: flex-end; align-items: center; column-gap: calc(var(--space-xs) / 2); }
.topbar__made-text { font-weight: 500; margin-top: .35em; }
.topbar__made-text em { font-weight: 400; font-size: .9em; margin-left: .4em; }

/* Hauptleiste */
.mainbar { position: relative; background: var(--white); padding: 0 var(--gutter); box-shadow: 0 10px 10px 0 rgba(0 0 0 / .05); font-size: 1em; font-weight: 500; }
.mainbar a { text-decoration: none !important; color: var(--neutral); }
.mainbar__inner { max-width: var(--content-width); margin-inline: auto; display: grid; gap: var(--grid-gap); grid-template-columns: 1fr 3fr 2fr; align-items: center; }
.mainbar__logo a { display: block; }
.page-logo { height: clamp(1.8rem, calc(1.8rem + ((1vw - 0.36rem) * 0.6731)), 2.5rem); width: auto; aspect-ratio: 347/157; object-fit: contain; object-position: 0; }

/* Navigation – waagerechtes Polster sitzt wie im Original auf der Umschalt-Zeile */
/* min-width/flex-shrink: Die Rasterspalte wächst wie im Original mit der Menübreite (DE-Beschriftungen sind länger). */
.main-nav { --nav-pad: clamp(0.3125rem, -2.8125rem + 5vw, 1.5625rem); min-width: max-content; }
.main-nav__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 0; }
.main-nav__item { position: relative; flex-shrink: 0; }
.main-nav__item::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--border-size) * 3); background: var(--neutral); transform: scaleX(0); transition: transform .3s ease; z-index: 10; }
.main-nav__item:hover::before, .main-nav__item.is-open::before, .main-nav__item:has([aria-current="page"])::before { transform: scaleX(1); }
.main-nav__toggle { display: flex; align-items: center; gap: 0; padding-inline: var(--nav-pad); }
.main-nav__toggle > a, .main-nav__toggle > button, .main-nav__link { padding-block: var(--space-m); font-weight: 500; line-height: 1.5; white-space: nowrap; }
.main-nav__link { display: block; padding-inline: var(--nav-pad); }
.main-nav__toggle > a { display: block; }
.main-nav__toggle > button { background: none; border: 0; padding-left: .3em; padding-right: 0; cursor: pointer; display: flex; align-items: center; color: inherit; font-size: var(--text-xs); }
.main-nav__toggle > button .icon { width: 1em; height: 1em; transition: transform .2s ease; }
.main-nav__item.is-open .main-nav__toggle > button .icon { transform: rotate(180deg); }
.main-nav__dropdown { position: absolute; top: 100%; left: 0; background: var(--white); box-shadow: 0 0 20px var(--black-trans-20); padding-block: var(--space-m); z-index: -1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
.main-nav__item:hover > .main-nav__dropdown, .main-nav__item.is-open > .main-nav__dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Nur ohne JavaScript öffnet der Tastaturfokus das Menü; mit JavaScript steuert allein is-open,
   damit der sichtbare Zustand immer zu aria-expanded passt (Escape schliesst wirklich). */
@media (scripting: none) {
  .main-nav__item:focus-within > .main-nav__dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.dropdown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: var(--space-xs); }
.dropdown-list a { display: block; padding-left: var(--space-s); font-size: .9em; line-height: 1 !important; }
.dropdown-list a:hover { text-decoration: underline !important; color: var(--primary) !important; }
.main-nav__dropdown a[aria-current="page"] { text-decoration: underline !important; color: var(--primary-dark) !important; }
.main-nav__dropdown a[aria-current="page"]::before { content: "–"; margin-right: .3em; }
/* Company-Dropdown */
.main-nav__dropdown--company { min-width: 15.625rem; }
/* Support-Dropdown */
.main-nav__dropdown--support { min-width: 30rem !important; padding-inline: 0; }
.support-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--grid-2); }
.support-grid > li { display: flex; flex-direction: column; gap: var(--space-xs) !important; }
.support-grid__heading { font-size: 1.1em; color: var(--secondary); padding: 0 var(--nav-pad); margin: 0; }
.support-grid .dropdown-list { font-size: calc(var(--text-m) * .9); }
.support-grid .dropdown-list a:hover { color: var(--secondary) !important; }
/* Mega-Menüs: volle Breite, auf der Hauptleiste positioniert */
.main-nav__item--mega { position: static; }
.main-nav__dropdown--mega { left: 0; right: 0; width: 100%; padding: var(--space-m) var(--gutter); }
.mega { list-style: none; margin: 0; padding: 0; }
.mega__grid { max-width: var(--content-width); margin-inline: auto; display: grid; grid-template-columns: var(--grid-6); gap: var(--space-xs); background: var(--white); font-size: .9em; }
.mega__col { display: flex; flex-direction: column; row-gap: var(--space-xs); }
.mega__type { font-size: 1.1em; }
.mega--primary .mega__type { color: var(--primary) !important; }
.mega--secondary .mega__type { color: var(--secondary) !important; }
.mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: var(--space-xs); }
.mega__list a { display: flex; gap: .3em; line-height: 1.2; }
.mega--primary .mega__list a:hover { text-decoration: underline !important; color: var(--primary) !important; }
.mega--secondary .mega__list a:hover { text-decoration: underline !important; color: var(--secondary) !important; }

/* Werkzeuge rechts */
.tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; column-gap: var(--space-s); }
/* Wie im Original behalten die Werkzeuge ihre Breite; die Rasterspalte richtet sich danach. */
.tools > * { flex-shrink: 0; }
@media (min-width: 1091px) { .tools { min-width: max-content; } }
.header-iconlink { margin-top: 4px; display: flex; gap: .3em; align-items: center; white-space: nowrap; }
.header-iconlink:hover { color: var(--primary) !important; }
.mynti::before { content: ""; display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 159 153' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M79.5 0c30.3 0 54.8 24.5 54.8 54.8 0 20.6-11.3 38.5-28 47.9 22.2 6.9 40.5 22 52 41.9a5.5 5.5 0 0 1-9.5 5.5c-14-24.2-39.4-40.4-69.2-40.4S24.3 125.9 10.3 150.1a5.5 5.5 0 0 1-9.5-5.5c11.5-19.8 29.8-35 52-41.9C35.9 93.3 24.7 75.4 24.7 54.8 24.7 24.5 49.2 0 79.5 0Zm0 11C55.3 11 35.7 30.6 35.7 54.8s19.6 43.8 43.8 43.8 43.8-19.6 43.8-43.8S103.7 11 79.5 11Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 159 153' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M79.5 0c30.3 0 54.8 24.5 54.8 54.8 0 20.6-11.3 38.5-28 47.9 22.2 6.9 40.5 22 52 41.9a5.5 5.5 0 0 1-9.5 5.5c-14-24.2-39.4-40.4-69.2-40.4S24.3 125.9 10.3 150.1a5.5 5.5 0 0 1-9.5-5.5c11.5-19.8 29.8-35 52-41.9C35.9 93.3 24.7 75.4 24.7 54.8 24.7 24.5 49.2 0 79.5 0Zm0 11C55.3 11 35.7 30.6 35.7 54.8s19.6 43.8 43.8 43.8 43.8-19.6 43.8-43.8S103.7 11 79.5 11Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; transform: translateY(-.15em); }
/* Länder-Schaltflächen: Standard global, GB/US erst über die Body-Klasse aus der Geo-Erkennung */
.location-de, .location-us, .location-fr, .location-jp, .location-gb { display: none !important; }
.geoip-country-gb .location-global, .geoip-country-us .location-global { display: none !important; }
.geoip-country-gb .location-gb, .geoip-country-us .location-us { display: inline-flex !important; }
.geoip-country-de .location-de, .geoip-country-fr .location-fr, .geoip-country-jp .location-jp { display: inline-flex !important; }
.geoip-country-de .site-header .location-global, .geoip-country-fr .site-header .location-global, .geoip-country-jp .site-header .location-global { display: inline-flex !important; }
/* Burger (nur mobil) – Masse aus dem BricksExtras-Trigger des Originals: 40x44, drei navyfarbene Linien */
.burger { display: none; align-items: flex-start; justify-content: center; width: 40px; height: 44px; padding: 14.4px 0 0; border: 0; background: none; color: var(--neutral); cursor: pointer; }
.burger__box { position: relative; display: block; width: 32px; height: 23.2px; }
.burger__line, .burger__line::before, .burger__line::after { content: ""; position: absolute; left: 0; width: 100%; height: 3.2px; border-radius: 3.2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
.burger__line { top: 10px; }
.burger__line::before { top: -10px; }
.burger__line::after { top: 10px; }
.burger[aria-expanded="true"] .burger__line { background: transparent; }
.burger[aria-expanded="true"] .burger__line::before { transform: translateY(10px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line::after { transform: translateY(-10px) rotate(-45deg); }
/* Suche */
.hsearch__open { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--neutral); }
.hsearch__open .icon { width: 1rem; height: 1rem; }
.hsearch__form { position: absolute; left: 0; right: 0; top: 100%; background: var(--neutral); padding: var(--space-m) var(--gutter); z-index: 20; }
.hsearch__form .container { flex-direction: row; align-items: center; gap: var(--space-s); }
.hsearch__form label { flex: 1; }
.hsearch__form input { width: 100%; padding: var(--space-m); border: 0; border-radius: var(--radius-xs); background: var(--white); font: inherit; font-size: var(--text-m); color: var(--neutral); }
.hsearch__close { border: 0; background: none; color: var(--white); cursor: pointer; font-size: var(--text-m); display: flex; }
/* Sprachumschalter (Nachbau des WPML-Legacy-Dropdowns) */
.lang { position: relative; line-height: 1 !important; }
.lang__list, .lang__submenu { list-style: none; margin: 0; padding: 0; }
.lang__toggle { display: flex; gap: .3em; align-items: center; border: 0; background: none; cursor: pointer; padding: .7em .5em .25em .5em; color: var(--neutral); font-weight: 500; }
.lang__toggle .icon { width: 1em; height: 1em; transform: translateY(-.15em); }
.lang__toggle:hover, .lang__submenu a:hover { background: var(--primary) !important; color: #fff !important; }
.lang__submenu { position: absolute; top: 100%; left: 0; min-width: 100%; background: var(--white); box-shadow: 0 0 20px var(--black-trans-20); display: none; z-index: 30; }
.lang__current:hover .lang__submenu, .lang__current.is-open .lang__submenu { display: block; }
@media (scripting: none) {
  .lang__current:focus-within .lang__submenu { display: block; }
}
.lang__submenu a { display: block; padding: .7em .5em .25em .5em; white-space: nowrap; }

/* Breakpoints (Bricks: 1280 / 1090 / 768 / 550 / 380) */
@media (max-width: 1279px) { .topbar__inner { grid-template-columns: var(--grid-2); } }
@media (max-width: 1090px) {
  .mainbar__inner { grid-template-columns: 1fr 3fr; padding-block: var(--space-xs); }
  .main-nav { display: none; }
  .burger { display: flex; }
  .header-iconlink { display: none; }
}
@media (max-width: 767px) {
  .topbar__inner { grid-template-columns: 4fr 1fr; display: flex; justify-content: space-between; flex-wrap: nowrap; }
  .topbar__made-text { display: none; }
  .topbar__slider .splide__list { max-width: 25rem; }
  .header-iconlink .text span { display: none !important; }
}
@media (max-width: 768px) { .mynti { display: none !important; } }
@media (max-width: 550px) { .topbar { display: none; } .topbar__slider .splide__list { max-width: 17rem; } }
@media (max-width: 380px) { .hsearch { display: none; } }

/* ==== 50-footer.css ==== */
/* ===== Footer-CTA (WordPress: section#cta-contact) =====
   Werte aus dem Bricks-Export: Sektion navy, weisse Box 60 % der Inhaltsbreite (864 px),
   Innenabstand var(--space-xl) (67.5 px bei 1440 px), Radius var(--radius) (16 px),
   Hintergrundbild mit Deckkraft .4, dazu die zwei animierten Wellen aus 80-utilities.css. */
.cta { background-color: var(--neutral); position: relative; overflow: hidden; }
.cta__box {
  width: calc(var(--content-width) * .6); max-width: 100%;
  padding: var(--space-xl); border-radius: var(--radius);
  background-color: var(--white); color: var(--neutral);
}
.cta__text { display: flex; flex-direction: column; row-gap: var(--space-m); }
.cta__bg { opacity: .4; }

/* ===== Footer (WordPress: section#brxe-eaqvqh) =====
   Aussenabstand var(--space-m), Schrift .9em, Trennlinien .5px rgba(18,31,77,.2),
   mittlere Zeile als Raster 2fr 2fr 1fr. */
.site-footer { padding: var(--space-m) var(--gutter); background-color: var(--white); font-size: .9em; }
.site-footer__inner { max-width: var(--content-width); margin-inline: auto; display: flex; flex-direction: column; row-gap: var(--space-m); }
.site-footer__row { padding-bottom: var(--space-m); border-bottom: var(--border-size) solid var(--border-color-dark); }
.site-footer__row--top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.site-footer__made { display: flex; align-items: center; justify-content: flex-end; column-gap: calc(var(--space-xs) / 2); font-weight: 500; }
.site-footer__made em { font-weight: 400; font-size: .9em; margin-left: .4em; }
.site-footer__row--mid { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--grid-gap); align-items: start; }
.site-footer__row--bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-bottom: 0; border-bottom: 0; }
.site-footer p { margin: 0; }

.newsletter-intro { display: flex; flex-direction: column; row-gap: calc(var(--space-xs) / 2); }

/* Social-Kreise: 2.2em bei --text-l ≙ 46.9 px, Hintergrund rgba(0,0,0,.1), Zeichen navy
   (im Original gemessen), beim Überfahren türkis mit weissem Zeichen.
   Die SVG-Dateien tragen keine Farbe, deshalb als Maske über currentColor. */
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5em; }
.footer-social {
  font-size: var(--text-l); width: 2.2em; height: 2.2em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 100vmax; overflow: hidden;
  background-color: var(--black-trans-10); color: var(--neutral); transition: all .3s ease;
}
.footer-social:hover { background-color: var(--primary); color: var(--white); }
.footer-social__icon {
  width: 1em; height: 1em; background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain;
}
.footer-social--facebook .footer-social__icon { --icon: url("/img/social/facebook.svg"); }
.footer-social--linkedin .footer-social__icon { --icon: url("/img/social/linkedin.svg"); }
.footer-social--youtube .footer-social__icon { --icon: url("/img/social/youtube.svg"); }
.footer-social--instagram .footer-social__icon { --icon: url("/img/social/instagram.svg"); }
.footer-social--x .footer-social__icon { --icon: url("/img/social/x.svg"); }
.footer-social--tiktok .footer-social__icon { --icon: url("/img/social/tiktok.svg"); }
.footer-social--pinterest .footer-social__icon { --icon: url("/img/social/pinterest.svg"); }
.footer-social--xing .footer-social__icon { --icon: url("/img/social/xing.svg"); }
.footer-social--snapchat .footer-social__icon { --icon: url("/img/social/snapchat.svg"); }

.legal-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-m); }
.legal-nav a[aria-current="page"] { color: var(--primary); }

@media (max-width: 768px) {
  .site-footer__row--mid { grid-template-columns: var(--grid-1); }
  .social { justify-content: flex-start; }
  .site-footer__made { display: none; }
}

/* ===== Offcanvas-Mobilmenü (WordPress: BricksExtras-Offcanvas) =====
   Panel 60rem breit, Hintergrund --primary-ultra-light ab 1090 px abwärts,
   Abdunklung rgba(0,0,0,.5) wie im Original. */
.offcanvas { position: fixed; inset: 0; z-index: 10000; visibility: hidden; }
.offcanvas.is-open { visibility: visible; }
.offcanvas__backdrop { position: absolute; inset: 0; background-color: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s ease; }
.offcanvas.is-open .offcanvas__backdrop { opacity: 1; }
.offcanvas__inner {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 60rem);
  display: flex; flex-direction: column; row-gap: var(--space-m);
  /* Original: fester Seitenabstand 30 px, oben immer section-space-xl (keine Media-Query, gilt
     auch auf breiten Fenstern, da das Offcanvas dort ebenso von oben geöffnet wird). */
  padding: var(--space-xl) 30px;
  padding-top: var(--section-space-xl);
  background-color: var(--primary-ultra-light); overflow-y: auto;
  transform: translateX(100%); transition: transform .3s ease;
}
.offcanvas.is-open .offcanvas__inner { transform: none; }
html.offcanvas-open { overflow: hidden; }
.offcanvas__close { position: absolute; top: var(--space-s); right: var(--space-s); padding: .5em; border: 0; background: none; color: var(--neutral); cursor: pointer; }
.offcanvas__actions { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-s); }
/* Der MyNTi-Link nutzt das Personen-Icon aus 40-header.css (Klasse .mynti); dort wird er unter
   768 px ausgeblendet – im Offcanvas soll er sichtbar bleiben, samt „Audio“. */
.offcanvas__mynti { display: flex !important; align-items: center; gap: .3em; }
.offcanvas__mynti .text span { display: inline !important; }

.oc-acc__list { list-style: none; margin: 0 0 var(--space-m); padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); font-size: 1.1em; }
.oc-acc__row { display: flex; align-items: stretch; flex-wrap: nowrap; padding: 15px; background-color: #efefef; }
.oc-acc__heading { margin: 0; font-size: inherit; font-weight: 400; display: flex; align-items: center; }
.oc-acc__heading a { text-decoration: none !important; }
/* Der Aufklapper füllt die Restbreite der Zeile; der Titel bleibt ein eigener Link (wie im Original). */
.oc-acc__header { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; padding: 0 5px 0 1rem; border: 0; background: none; cursor: pointer; color: var(--neutral); }
.oc-acc__header .icon { width: 16px; height: 16px; transition: transform .15s ease; }
.oc-acc__header[aria-expanded="true"] .icon { transform: rotateX(180deg); }
.oc-acc__panel { padding: 15px; background-color: var(--white); }
.oc-acc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--grid-1); gap: var(--space-xs); font-size: .9em; }
.oc-acc__grid--m { gap: var(--space-m); }
.oc-acc__grid .mega__grid { grid-template-columns: var(--grid-1); gap: var(--space-m); font-size: 1em; }
.oc-acc__pages a { display: block; line-height: 1.2; }

/* ==== 60-forms.css ==== */
/* ===== Formulare =====
   Grundwerte wie im Original: Rahmen .5px rgba(18,31,77,.2), Feldschrift geerbt. */
form label { color: var(--neutral); }
form input, form select, form textarea {
  font: inherit; color: var(--neutral); width: 100%; background-color: var(--white);
  border: var(--border-size) solid var(--border-color-dark); border-radius: var(--radius);
}
/* `display: block` wie im Original: Bricks setzt `.brxe-form textarea { display: block }`,
   FluentForm `.ff-el-form-control { display: block }` – die Regel gilt dort also für jedes
   Formular. Ein textarea mit dem Chrome-Standard `inline-block` sitzt auf der Grundlinie und
   lässt darunter den Rest seines Zeilenkastens stehen: die Nachrichten-Gruppe der Footer-CTA
   war dadurch 9 px (1440 px, Zeilenhöhe 24) bzw. 7,5 px (600 px, 19,5) zu hoch. */
form textarea { display: block; resize: vertical; }
/* Honigtopf: im Original per CSS aus dem Sichtfeld geschoben, nicht display:none. */
.form-group--honeypot {
  position: absolute !important; left: -9999px !important; top: -9999px !important;
  width: 0 !important; height: 0 !important; opacity: 0 !important; padding: 0 !important; z-index: -1;
}
.form-field-error { color: #b3261e; margin: .3em 0 0; font-size: .9em; }
.form-error { color: #b3261e; margin: 0 0 var(--space-xs); font-size: .9em; width: 100%; }
.form-success { color: var(--secondary-dark); font-weight: 500; margin: 0 0 var(--space-xs); width: 100%; }

/* ===== CTA-Angebotsformular (Bricks-Formular #brxe-ufphdq) =====
   Felder nebeneinander (50 %/70 %), Abstände als Innenabstand der Gruppe – wie fieldMargin
   im Original –, Feldradius var(--radius-xs) (7.1 px),
   Innenabstand var(--space-s) var(--space-m) calc(var(--space-s) * .7). */
.quote-form { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; text-align: left; color: var(--neutral); }
.quote-form .form-group { width: 100%; }
.quote-form .form-group:not(:last-child) { padding-right: var(--space-xs); padding-bottom: var(--space-xs); }
.quote-form .form-group--50 { width: 50%; }
.quote-form .form-group--70 { width: 70%; }
.quote-form input, .quote-form select, .quote-form textarea {
  border-radius: var(--radius-xs); text-align: left;
  padding: var(--space-s) var(--space-m) calc(var(--space-s) * .7);
}
.quote-form textarea { min-height: 90px; }
.quote-form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-s) center;
}
.quote-form .form-group--check label { display: grid; grid-template-columns: auto 1fr; gap: .2rem; align-items: flex-start; font-size: calc(var(--text-m) * .9); }
.quote-form .form-group--check input { width: auto; margin: .35em .3rem 0 0; }
/* Absenden-Gruppe ohne feste Breite und rechtsbündig: neben der 70 % breiten GDPR-Zustimmung,
   und sobald der Knopf dort nicht mehr passt (schmale Fenster), rutscht er in die nächste Zeile. */
.quote-form .form-group--submit { width: auto; margin-left: auto; padding-right: var(--space-xs); }
/* gap/align-items/transition kommen schon von .btn in 30-buttons.css (gleiche Werte); hier nur
   die Korrektur auf inline-flex (das Original steht "display: flex" ohne Grund) und die
   Vergrösserung des Abstands beim Hover, die es sonst nicht gibt. */
.quote-form button[type="submit"] { display: inline-flex; }
.quote-form button[type="submit"]:hover { gap: 1em; }

/* ===== Newsletter (FluentForm-Optik) =====
   Rahmen 1px var(--neutral-light), Spalten 77.92 % / 22.08 %.
   Feld fluid gemessen: 600 px → 15 px Schrift / 7,5 px 15 px Innenabstand / 7,5 px Radius,
   1440 px → 18 / 9 18 / 9. --text-m selbst ist fluid zwischen 320 und 1440 px (12–16 px);
   „+ 2px“ verschiebt genau auf 15–18 px im Bereich 600–1440, der äussere clamp() hält das Feld
   unterhalb 600 px auf 15 px fest. Innenabstand/Radius als em skalieren automatisch mit.

   Höhe des E-Mail-Felds: im Original fest 50 px (`input.ff-el-form-control`), bei 1440 wie bei
   600 px – FluentForm skaliert nur Schrift und Innenabstand, nicht die Feldhöhe. Ohne die feste
   Höhe ergäbe sich aus Zeilenhöhe + Innenabstand 47 px (1440) bzw. 39,5 px (600); die Fusszeile
   war dadurch 3 bzw. 10,5 px zu niedrig. `line-height: 1` wie im Original (dort 18 px bei 18 px
   Schrift); die Beschriftung zentriert Chrome ohnehin in der festen Höhe.

   Spaltenbreite: im Original `.ff-t-container` mit `gap: var(--x-ff-gap)` = 15px und den
   Flex-Basen 77.92 % / 22.08 % (FluentForm-Spalten). Die Knopfspalte kann nicht unter die
   Inhaltsbreite des Knopfes schrumpfen (`min-width: auto`), deshalb ist sie genau so breit wie
   seine Beschriftung – gemessen 132,25 px („Subscribe“) und 142,03 px („Abonnieren“), und die
   Einwilligungsspalte bekommt den Rest. Eine feste Knopfbreite (früher 25 %) machte die DE-Spalte
   11,7 px zu breit; der DE-Text brach dadurch auf drei statt vier Zeilen und die Fusszeile war
   21,6 px zu niedrig. */
.newsletter-form .form-group { margin: 0 0 1em; }
.newsletter-form input[type="email"] {
  font-size: clamp(15px, calc(var(--text-m) + 2px), 18px);
  height: 50px; line-height: 1;
  padding: .5em 1em; border: 1px solid var(--neutral-light); border-radius: .5em;
}
.newsletter-form__row { display: flex; align-items: flex-start; gap: 15px; }
.newsletter-form__consent { flex: 0 1 77.92%; margin-bottom: 1em; }
/* Die Einwilligungszeile ist im Original 7 px höher als ihre Textzeilen. Nachgemessen (Tiefe 8,
   EN/DE, 1440 und 600 px) sind das zwei Teile: `.ff-el-form-check` trägt `margin-bottom: 5px`,
   und das Label darin ist `display: table-row` mit zwei Zellen – die Kästchenzelle hat eine
   grössere Schrift (16/24 px statt 14,4/21,6) und schiebt die Textzelle über die
   Grundlinienausrichtung um genau 2,000 px nach unten (bei jeder Breite und in jeder Sprache
   gleich gemessen). Wir bilden beide Teile am Label nach, ohne die Tabellenauszeichnung.

   Die Spaltenmasse der Zeile stammen ebenfalls aus dem Original: Kästchenzelle fest 20 px ohne
   Zwischenraum, Textzelle mit 5 px Innenabstand rechts (`.ff_t_c`). Der Text hat dadurch genau
   25 px weniger als die Spalte – mit „auto 1fr" und .4em Zwischenraum wären es nur 18,76 px,
   und der DE-Satz bräche eine Zeile früher um. */
.newsletter-form .form-check { display: grid; grid-template-columns: 20px 1fr; gap: 0; align-items: flex-start; padding-bottom: 2px; margin-bottom: 5px; }
.newsletter-form .form-check input { width: auto; margin: .3em 0 0; }
.newsletter-form .form-check span { padding-right: 5px; }
/* Knopf-Radius fluid gemessen: 6,5 px bei 600 px, 8 px bei 1440 px = var(--text-m) * .5.
   `min-width: max-content`: im Original ist das Flex-Kind die FluentForm-Spalte (`.ff-t-cell`),
   nicht der Knopf – sie kann wegen `min-width: auto` nicht unter die Knopfbreite schrumpfen.
   Bei uns ist der Knopf selbst das Flex-Kind, und weil `.btn` `overflow: hidden` trägt (für den
   Verlauf hinter dem Text), fällt dessen automatische Mindestbreite auf 0: „Abonnieren" wurde
   dadurch auf 114,7 statt 142,03 px gequetscht. */
.newsletter-form__submit { flex: 1 1 22.08%; min-width: max-content; border-radius: calc(var(--text-m) * .5); white-space: nowrap; }

/* Wie im Original wird nur die GDPR-Gruppe schmal umgestellt; Vor-/Nachname bleiben halbbreit. */
@media (max-width: 550px) {
  .quote-form .form-group--70 { width: 100%; }
}
/* Unter 768 px ist die Spaltenreihe im Original kein Flexkasten mehr (die Regel hängt an
   `@media (min-width: 768px)`), sondern zwei Blöcke untereinander – ohne Abstand zwischen ihnen,
   dafür mit dem Aussenabstand 1em jeder Gruppe, auch unter dem Knopf. Wir behalten den
   Flexkasten (er schliesst die Aussenabstände ein wie dort das <fieldset>), nehmen aber den
   Zwischenraum heraus und hängen das fehlende 1em unten an die Zeile. Als Innenabstand der Zeile
   und nicht als Aussenabstand des Knopfes: „1em" zählt dort die Schrift des Formulars (11,7 px
   bei 600 px) wie im Original, am Knopf wären es dessen eigene 13 px. */
@media (max-width: 767px) {
  .newsletter-form__row { flex-direction: column; gap: 0; padding-bottom: 1em; }
  .newsletter-form__consent, .newsletter-form__submit { flex: 0 0 auto; width: 100%; }
  /* Original: Beschriftung des Newsletter-Knopfs linksbündig statt zentriert. */
  .newsletter-form__submit { justify-content: flex-start; }
}

/* ==== 70-consent.css ==== */
/* Consent-Banner – Optik 1:1 aus dem Original (Complianz, kompiliertes Banner-Stylesheet
   wp-content/uploads/complianz/css/banner-1-optin.css). Die Farb-, Radius- und Grössenwerte dort
   stehen nicht in den Design-Tokens der Seite, deshalb hier die Originalwerte als Variablen. */
.consent {
  --consent-width: 526px;          /* --cmplz_banner_width */
  --consent-gap: 10px;             /* --cmplz_banner_margin */
  --consent-text: #222;            /* --cmplz_text_color */
  --consent-link: #1e73be;         /* --cmplz_hyperlink_color */
  --consent-accept-bg: #1e73be;    /* --cmplz_button_accept_* */
  --consent-btn-bg: #f9f9f9;       /* --cmplz_button_deny/settings_background_color */
  --consent-btn-border: #f2f2f2;   /* --cmplz_banner_border_color */
  --consent-settings-text: #333;   /* --cmplz_button_settings_text_color */
  --consent-slider-on: #1e73be;    /* --cmplz_slider_active_color */
  --consent-slider-off: #f56e28;   /* --cmplz_slider_inactive_color */

  position: fixed; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
  z-index: 99999; width: auto; max-width: 100%; max-height: calc(100vh - 20px); overflow-y: auto;
  display: grid; grid-gap: var(--consent-gap); grid-template-rows: minmax(0, 1fr);
  padding: 15px 20px; border-radius: 12px;
  background: var(--white); color: var(--consent-text);
  box-shadow: rgba(0,0,0,.19) 0 10px 20px, rgba(0,0,0,.23) 0 6px 6px;
}
/* Querformat/sehr flaches Fenster – das Original schrumpft das ganze Banner per `zoom`
   (`@media (max-height: 400px)` im Complianz-Stylesheet). */
@media (max-height: 400px) {
  .consent { height: calc(100vh - 20px); display: flex; flex-direction: column; overflow: hidden; gap: 1px; grid-row-gap: 1px; padding: 7px 12px !important; zoom: .6; }
  .consent__body { flex: 1; min-height: 0; overflow-y: auto; max-height: none; margin-top: 15px !important; }
  .consent__header, .consent__divider, .consent__links, .consent__buttons { flex-shrink: 0; }
  .consent__header { margin-bottom: 15px !important; max-height: 10px; }
  .consent__close { zoom: .6 !important; }
  .consent__buttons { gap: 1px !important; }
  .consent__btn { height: 15vh !important; min-height: unset !important; padding: 0 !important; white-space: nowrap !important; font-size: 1.1rem !important; line-height: 14px !important; zoom: .5 !important; }
  .consent__links { zoom: .5 !important; }
}
@media (max-height: 400px) and (max-width: 768px) { .consent { grid-gap: 1px; } }

/* Hover hebt den Kasten an (Original: `.cmplz-cookiebanner.cmplz-show:hover`). Ohne eigene
   `transition-property` gilt wie im Original `all`, deshalb nur die Dauer. */
.consent:not([hidden]):hover { transition-duration: 1s; box-shadow: rgba(0,0,0,.3) 0 19px 38px, rgba(0,0,0,.22) 0 15px 12px; }
@media (min-width: 768px) { .consent { min-width: var(--consent-width); max-width: 100%; display: grid; grid-row-gap: var(--consent-gap); } }
@media (max-width: 768px) { .consent { width: 100%; grid-gap: 1px; } }

/* Kopf: 100px | 1fr | 100px, Titel mittig, Schliessen rechts */
.consent__header { display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; }
.consent__title { grid-column-start: 2; justify-self: center; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--consent-text); }
.consent__close {
  grid-column-start: 3; justify-self: end; width: 20px; height: 20px; padding: 0;
  border: 0; background: none; color: var(--consent-text); line-height: 20px; cursor: pointer;
}
.consent__close-icon { width: 20px; height: 20px; display: block; }
@media (max-width: 425px) { .consent__title { display: none; } .consent__cat-header { grid-template-columns: 1fr !important; } }
@media (max-width: 399px) { .consent__header { grid-template-columns: auto 1fr auto; } }

/* Trennlinien ziehen sich über die volle Breite (negativer Rand gegen das Innenpolster) */
.consent__divider { height: 3px; margin-left: -20px; margin-right: -20px; box-shadow: 0 -2px 3px rgba(0,0,0,.05); }
.consent__divider--footer { margin-top: 5px; }

.consent__body { width: 100%; overflow-x: hidden; overflow-y: auto; max-height: 55vh; }
.consent__body::-webkit-scrollbar { width: 5px; background-color: transparent; }
.consent__body::-webkit-scrollbar-thumb { background-color: var(--consent-accept-bg); border-radius: 10px; }
.consent__message { margin-bottom: 5px; font-size: 12px; line-height: 18px; color: var(--consent-text); word-wrap: break-word; }
@media (max-width: 425px) { .consent__message { margin-right: 5px; } }
@media (min-width: 350px) { .consent__body { min-width: 300px; } }
@media (min-width: 769px) { .consent__message, .consent__prefs { width: calc(var(--consent-width) - 42px); } }

/* Kategorien – im Original erst nach „View preferences" sichtbar, mit Einblendung */
.consent__prefs { animation: consent-fade-in 1s; }
@keyframes consent-fade-in { from { opacity: 0; } to { opacity: 1; } }
.consent__cat { background-color: rgba(239,239,239,.5); }
.consent__cat:not(:last-child) { margin-bottom: 10px; }
/* Kopfzeile: Titel | Schalter bzw. „Always active" | 15-px-Spalte für den Aufklapp-Pfeil */
.consent__cat-header { display: grid; grid-template-columns: 1fr auto 15px; grid-template-rows: minmax(0, 1fr); grid-gap: var(--consent-gap); align-items: center; padding: 10px; }
.consent__cat-title { grid-column-start: 1; justify-self: start; margin: 0; font-size: 14px; font-weight: 500; color: var(--consent-text); }
.consent__cat-toggle { grid-column-start: 3; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.consent__icon { display: block; width: 18px; height: 18px; transition: all .5s ease; }
/* Der Pfeil trägt im Original nur eine Höhe (18 px); die Breite folgt der viewBox (448/512 → 15,75 px)
   und ragt damit leicht über die 15-px-Spalte. Ohne diese Regel drückt `svg { max-width: 100% }`
   aus 10-base.css ihn auf 15 px zusammen. */
.consent__icon svg { width: auto; height: 18px; max-width: none; }
.consent__cat-toggle[aria-expanded="true"] .consent__icon { transform: rotate(180deg); }
.consent__desc { max-width: 100%; margin: 0; padding: 10px; font-size: 12px; line-height: 18px; color: var(--consent-text); }
.consent__always { font-size: 12px; font-weight: 500; color: green; }
/* „Functional" ist fest eingeschaltet: Kästchen und Beschriftung bleiben für Screenreader im Markup. */
.consent__always .consent__checkbox, .consent__always .consent__switch { display: none; }

/* Schiebeschalter für Statistics/Marketing (Originalmasse: 28×15 mit 11px-Punkt) */
.consent__switch-wrap { position: relative; display: flex; align-items: center; margin: 0; }
.consent__switch-wrap .consent__checkbox {
  position: absolute; z-index: 1; top: 0; left: 0; width: 40px; height: 20px;
  margin: -10px 0 0; opacity: 0; cursor: pointer;
}
.consent__switch { position: relative; margin: 0; padding-left: 30px; }
.consent__switch::before, .consent__switch::after { content: ""; position: absolute; display: block; border-radius: 10px; transition: background-color .3s, left .3s; }
.consent__switch::before { left: 0; top: -7px; width: 28px; height: 15px; background-color: var(--consent-slider-off); }
.consent__switch::after { left: 4px; top: -5px; width: 11px; height: 11px; background: var(--white); }
.consent__checkbox:checked + .consent__switch::before { background-color: var(--consent-slider-on); }
.consent__checkbox:checked + .consent__switch::after { left: 14px; }
.consent__checkbox:focus + .consent__switch::before { box-shadow: 0 0 0 2px #245fcc; }

/* Schaltflächen */
.consent__buttons { display: flex; gap: var(--consent-gap); }
.consent__btn {
  flex: initial; width: 100%; min-height: 45px; padding: 10px;
  border: 1px solid var(--consent-btn-border); border-radius: 6px;
  font-size: 15px; font-weight: 500; line-height: 20px; text-align: center; white-space: nowrap;
  background-color: var(--consent-btn-bg); color: var(--consent-text); cursor: pointer;
}
.consent__btn--accept { background-color: var(--consent-accept-bg); border-color: var(--consent-accept-bg); color: var(--white); }
.consent__btn--prefs, .consent__btn--save { color: var(--consent-settings-text); }
@media (max-width: 768px) { .consent__buttons { flex-direction: column; } }

/* Rechtslinks */
.consent__links { display: flex; justify-content: center; gap: var(--consent-gap); }
.consent__links ul { display: flex; justify-content: center; gap: var(--consent-gap); margin: 0; padding: 0; list-style: none; }
/* `auto` wie überall – im Original gibt es --text-underline-offset gar nicht (Befund F-2). */
.consent__links a { margin: 0; font-size: 12px; color: var(--consent-link); text-decoration: underline; text-underline-offset: auto; }

/* Wiederöffner unten rechts: ragt 15 px ins Bild und fährt bei Hover/Fokus ganz aus. */
.consent-reopen {
  position: fixed; right: 40px; bottom: -35px; z-index: 9998;
  min-width: 100px; height: 50px; padding: 15px; margin: 0;
  border: 0; border-radius: 12px 12px 0 0; line-height: initial; cursor: pointer;
  background-color: var(--white); color: #222;
  box-shadow: rgba(0,0,0,.19) 0 10px 20px, rgba(0,0,0,.23) 0 6px 6px;
  animation: consent-reopen-out .5s forwards;
}
.consent-reopen:hover, .consent-reopen:focus { animation: consent-reopen-in .5s forwards; }
@keyframes consent-reopen-in { to { bottom: 0; } }
@keyframes consent-reopen-out { to { bottom: -35px; } }
@media (max-width: 768px) { .consent-reopen { display: none; } }

/* ==== 80-utilities.css ==== */
.image-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover !important; z-index: -1; }
.image-cover img { object-fit: cover; width: 100%; height: 100%; }
*:has(> .image-cover) { position: relative; z-index: 1; overflow: hidden; }
.hidden { font-size: 0; width: 0; height: 0; opacity: 0; transform: translateX(-200vw); position: absolute; }
/* Animierte Verlaufs-Wellen (Maske nti-waves.webp) */
.gradient-image {
  aspect-ratio: 0.8650519031; pointer-events: none !important;
  background: linear-gradient(var(--gradient-angle, 135deg), #3ecfe2 20%, #89f456 150%);
  -webkit-mask: url("/img/nti-waves.webp"); mask: url("/img/nti-waves.webp");
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; transition: all .3s ease; z-index: 10;
}
.gradient-image.animated { animation: gradient-spin var(--animation-duration, 2s) linear infinite; }
@property --gradient-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gradient-spin { 0% { --gradient-angle: 0deg; } 100% { --gradient-angle: 360deg; } }
section:has(.gradient-image) { overflow: hidden !important; }
.waves-top-left { position: absolute; top: var(--space-l); left: 0; z-index: 0; width: min(40vw, 40rem); transform: rotateZ(0) translateX(-50%) translateY(-30%); --gradient-angle: 30deg; }
.waves-bottom-right { position: absolute; right: 0; bottom: 0; width: min(40vw, 40rem); transform: rotateZ(190deg) translateX(-30%); }
.waves-center { position: absolute; top: 50%; left: 50%; z-index: 0; width: 40%; opacity: .5; transform: translateX(-45%) translateY(-30%); }
/* Länderabhängige Elemente (Original: Klassen auf <body> per GeoJS) */
.switzerland, .liechtenstein, .usa, .uk, .de, .at { display: none; }
.geoip-country-gb .uk, .geoip-country-ch .switzerland, .geoip-country-li .liechtenstein, .geoip-country-us .usa, .geoip-country-at .at, .geoip-country-de .de { display: flex !important; }
.location-de, .location-us, .location-fr, .location-jp, .location-gb { display: none !important; }
.geoip-country-gb .location-global { display: none !important; } .geoip-country-gb .location-gb { display: flex !important; }
.geoip-country-us .location-global { display: none !important; } .geoip-country-us .location-us { display: flex !important; }
.geoip-country-de .location-global { display: none !important; } .geoip-country-de .location-de { display: flex !important; } .geoip-country-de header .location-global { display: flex !important; }
.geoip-country-fr .location-global { display: none !important; } .geoip-country-fr .location-fr { display: flex !important; } .geoip-country-fr header .location-global { display: flex !important; }
.geoip-country-jp .location-global { display: none !important; } .geoip-country-jp .location-jp { display: flex !important; } .geoip-country-jp header .location-global { display: flex !important; }
.menu-links-external a::after { content: " ➚" / ""; margin-left: .4em; color: var(--secondary); font-size: .8em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin-top: -.4em; }

/* ---- Globale Bricks-Klassen aus Phase 4 (Review 2: aus 104-know-how.css und
   105-locations.css hierher, weil sie an zwei Stellen gebraucht werden) ---- */
/* „text-intro" (rwwvaq): der Einleitungstext ist ein Fünftel grösser als der Fliesstext, Links
   darin erben die Grösse (im Original zwei Regeln nacheinander). Know-how-Übersicht,
   Händlersuche, Standortkopf (`description`, E-12). Phase 3 hat dieselben Werte unter eigenen
   Klassen (.family-section__intro, .cb-cta__text) – dort bleibt es dabei. */
.text-intro { font-size: 1.2em; }
.text-intro a { font-size: inherit; }
/* Überschrift mit Symbol – h3-w-icon / __heading / __icon: Servicelevel der Standortseite
   („Market focus"/„Range") und die Symbolzeile der Händlerkacheln. Im Original height:
   var(--space-s); width: var(--space-m) am <svg>; die Zeichnung wird darin seitenverhältnistreu
   eingepasst (20 × 30 px bei 1440 px). Die Farbe steht dort als `fill` und erreicht den <path>;
   unsere Zeichnungen tragen fill="currentColor", eine CSS-Angabe am <path> schlägt dieses
   Attribut. */
.h3-w-icon { display: flex; flex-direction: row; column-gap: .5em; align-items: center; line-height: 1; width: 100%; }
/* width: 100 %: im Original ist der Kasten ein Bricks-Block (`.brxe-block { width: 100% }`) und
   füllt seine Rasterspalte (745,8 px bei 1440 px); ohne die Angabe schrumpft er in der Flex-Spalte
   des Servicelevels (`align-items: flex-start`) auf den Inhalt (206 px). Sichtbar ist das nicht
   (kein Hintergrund, linksbündig), aber die Nachmessung nach Review 2 soll 0,00 px zeigen. */
.h3-w-icon__heading { line-height: 1; font-size: var(--h3); padding-top: .3em; margin: 0; }
.h3-w-icon__icon { height: var(--space-s); width: var(--space-m); flex: 0 0 auto; }
.h3-w-icon__icon--focus path { fill: var(--primary); }
.h3-w-icon__icon--range path { fill: var(--secondary); }

/* ==== 81-blocks.css ==== */
/* Grundgerüst aller Startseiten-Blöcke.
   Im Original stehen mehrere Bausteine in einer <section>; die Schalter „kein Abstand oben/unten"
   bilden das nach, ohne dass das Template Sonderfälle kennen muss. */
.block--flush-top { padding-top: 0; }
.block--flush-bottom { padding-bottom: 0; }

/* Vorzeile mit Pfeil (.claim) und die zentrierte Kopfzeile einer Sektion gibt es seit Phase 0
   in 10-base.css bzw. 20-layout.css – hier nur die Gruppierung aus <hgroup>. Im Original ist
   das eine globale Regel des Seiten-CSS („hgroup { width: 100%; display: flex;
   flex-flow: column-reverse; gap: .5em }"); sie gilt dort auch ausserhalb der Blöcke –
   deshalb seit der Konsolidierung ohne das Präfix .block (die Kopie in 92 entfällt).
   Wir drehen nicht die Leserichtung um, sondern setzen die Vorzeile per order nach oben.
   Zeilenabstand am Original gemessen: .5em – bei 1440 px 8 px, bei 600 px 6,5 px
   (nicht --space-xs, das dort 13,33 px ergäbe). */
hgroup { display: flex; flex-direction: column; row-gap: .5em; width: 100%; }
hgroup .claim { order: -1; }

/* Splide: bis zur Initialisierung sichtbar lassen, damit ohne JavaScript der erste Slide steht
   (gleiche Regel wie beim Topbar-Ticker in 40-header.css). */
.block .splide:not(.is-initialized):not(.is-rendered) { visibility: visible; }
.block .splide__list { margin: 0; padding: 0; list-style: none; }

/* Punktnavigation. Im Original zwei globale Regeln (.splide__pagination aus dem Splide-Layer
   des Themes und .splide__pagination--ltr aus dem Seiten-CSS); sie gelten für jeden Slider der
   Seite, nicht nur für die Startseitenblöcke – deshalb seit der Konsolidierung ohne Präfix
   (die gleichlautende Kopie in 97-product.css entfällt). Am Original gemessen, nachdem dessen
   verzögertes JavaScript durch eine echte Nutzerinteraktion angelaufen ist: Balken 48,61 × 6,66 px,
   Radius 4,8 px, 5 px Aussenabstand, absolut 45 px unter dem Slider – die Punkte liegen damit im
   Abstand zur nächsten Zeile und vergrössern den Block nicht. */
.splide__pagination {
  position: absolute; bottom: calc(var(--space-l) * -1); width: 100%; margin: 0;
  display: flex; justify-content: center; align-items: center; padding: 0; list-style: none;
}
/* Die Punktzeile ist im Original so hoch wie eine Textzeile (24 px bei 1440): ihre <li> erben
   die Zeilenhöhe des Textes. Unsere Splide-Grunddatei setzt dort „line-height: 1" – ohne diese
   Zeile sässen die Punkte 4 px zu tief (gemessen an Werbekachel-, Anwendungs- und
   Galerie-Slider: Punktoberkante 33,34 statt 29,34 px unter dem Slider). Bis zur
   Konsolidierung stand dafür „height: 1.5em" nur am Galerie-Slider (91-gallery-blocks.css). */
.splide__pagination li { line-height: var(--text-line-height); }
.splide__pagination__page {
  width: clamp(2rem, calc(2rem + ((1vw - 0.36rem) * 1.9231)), 4rem);
  height: calc(var(--space-xs) / 2);
  margin: 5px; padding: 0; border: 0;
  background-color: var(--neutral-ultra-light);
  border-radius: .3em !important; overflow: hidden;
  transition: background-color .3s ease;
}
.splide__pagination__page.is-active { background-color: var(--neutral); }
.splide__pagination__page:hover { background-color: var(--neutral-semi-light); }
.splide__pagination__page:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ==== 82-hero.css ==== */
/* Hero der Startseite (Bricks-Sektion „ysspoh" mit der Globalklasse .hero-home-section).
   Alle Werte sind am Original gemessen (Headless Chrome, 1440/1090/768/600/375 px). */

.block--hero {
  padding-block: 0;
  aspect-ratio: 21 / 9;
  max-height: 50rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background-color: var(--neutral);
  color: var(--white);
  position: relative; z-index: 1;
}
/* Im Original per _cssCustom auf h1/h2 gesetzt. */
.block--hero h1, .block--hero h2 { color: var(--white); }

/* Seitenverhältnis je Bricks-Breakpoint. Gilt bewusst auch für Französisch: dort fehlt im
   Original die Globalklasse (Abweichung U8, Entscheidung E-2) – wir bauen das EN-Verhalten nach. */
@media (max-width: 1280px) { .block--hero { aspect-ratio: 16 / 9; } }
@media (max-width: 768px)  { .block--hero { aspect-ratio: 4 / 3; } }
@media (max-width: 550px)  { .block--hero { aspect-ratio: 1; } }
@media (max-width: 380px)  { .block--hero { aspect-ratio: 2 / 3; } }

/* Inhaltsspalte: halbe Inhaltsbreite (Original width: calc(var(--content-width) * .5)),
   auf schmalen Fenstern nicht breiter als der Container. */
.hero__contents {
  width: calc(var(--content-width) * .5); max-width: 100%;
  display: flex; flex-direction: column; row-gap: var(--space-xl);
}
.hero__head { display: flex; flex-direction: column; row-gap: var(--content-gap); }
.block--hero h1 { font-size: calc(var(--h1) * .8); text-wrap: pretty; }

/* Buttonzeile (Original: Globalklasse .wrapper-buttons). */
.hero__buttons { display: flex; flex-direction: row; flex-wrap: wrap; row-gap: var(--space-xs); column-gap: var(--space-xs); }
/* Logo-Band: Überschrift und Laufband, Zeilenabstand wie im Original --space-xs.
   align-items: flex-start wie bei den Bricks-Blöcken – die Überschrift ist nur so breit wie ihr
   Text, das Laufband nimmt die volle Breite. */
.hero__logos { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-xs); }
.hero__logo-slider { width: 100%; }
/* Feste Höhe 4rem – ohne JavaScript stünde sonst die volle Bildhöhe im Layout. */
.hero__logo-slider, .hero__logo-slider .splide__track { height: 4rem; }
.hero__logo-slider .splide__list { display: flex; }
.hero__logo-slider .splide__slide { height: 4rem; display: flex; align-items: center; justify-content: center; }
/* Weiche Kanten links/rechts (Original edgeEffectDistance 25 % mit Steigung 2 → Verlauf bis 12,5 %). */
.hero__logo-slider .splide__track {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0, 0, 1) 12.5%, #000 25%, #000 75%, rgb(0, 0, 1) 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgb(0, 0, 1) 12.5%, #000 25%, #000 75%, rgb(0, 0, 1) 87.5%, transparent 100%);
}
.hero__logo-slider img {
  width: 100%; height: 100%; object-fit: contain;
  filter: invert(1); opacity: .7; transition: opacity .3s ease;
}
.hero__logo-slider img:hover { opacity: 1; }

/* Hintergrundvideo: liegt hinter dem Inhalt (die Sektion ist mit z-index: 1 eine eigene
   Stapelebene, deshalb bleibt z-index: -1 über der Hintergrundfarbe). Solange nicht zugestimmt
   wurde, ist der Kasten leer und zeigt genau die dunkle Fläche des Originals. */
.hero__video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 400vw;
  z-index: -1; border-radius: var(--radius); overflow: hidden;
}
.hero__video:empty { background-color: var(--neutral); }
.hero__video iframe {
  aspect-ratio: 16 / 9; border: none; display: block;
  max-width: 400vw; height: 100% !important; width: auto !important; margin-inline: auto;
}
/* Der Farbverlauf über dem Video blendet die Ränder in die Hintergrundfarbe (Original .overlayer). */
.hero__video .overlayer {
  position: absolute; left: 50%; transform: translateX(-50%) scale(1.03);
  aspect-ratio: 16 / 9; border: none; display: block; z-index: 1000;
  max-width: 400vw; height: 100% !important; width: auto !important; margin-inline: auto;
  background:
    linear-gradient(to right, var(--neutral) 0%, var(--neutral) 15%, transparent 30%),
    linear-gradient(to left, var(--neutral) 0%, var(--neutral) 5%, transparent 20%);
}
@media (max-width: 768px) { .hero__video { opacity: .2; } }

/* ==== 83-cta-slider.css ==== */
/* CTA-Slider der Startseite: drei grosse Werbekacheln (Bricks-Element „xproslider" #brxe-oxzdyy).
   Alle Werte am Original gemessen (Headless Chrome, DevTools-Protokoll, 1440/768/600/400 px). */

.cta-slider { overflow: visible; }
.cta-slider .splide__slide { align-items: center; justify-content: center; }

/* Kachel: Raster Text/Bild, dunkler Hintergrund, Radius/Abstände aus den Tokens (ergeben bei
   1440 px 16px Radius/67.5px Innenabstand und bei 600 px 13px/36.9px – exakt die gemessenen
   Originalwerte, weil --radius/--space-xl an derselben Fluid-Skala hängen wie im Original). */
.cta-box-large {
  background-color: var(--neutral);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: var(--grid-2);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-box-large h2, .cta-box-large h3 { color: var(--white); }
/* Die Überschriftsgruppe der Kachel richtet ihre Kinder im Original am Anfang aus, sie sind
   deshalb nur so breit wie ihr Text (gemessen: h2 364,09 px statt der vollen 622,5 px, .claim
   95,63 px). Das ist dort die Grundeinstellung jedes Bricks-Blocks (`align-items: flex-start`),
   die `.center-all` an den zentrierten Kopfzeilen auf `center` überschreibt – bei uns steht
   `hgroup` in 81-blocks.css ohne `align-items` und erbt damit `stretch`. Ohne Hintergrund am
   <h2> ist der Unterschied nicht zu sehen, die Messung zeigt ihn aber. Solange nur diese Stelle
   nachgemessen ist, bleibt die Korrektur hier und nicht in 81-blocks.css. */
.cta-box-large__contents hgroup { align-items: flex-start; }
@media (max-width: 1090px) { .cta-box-large { grid-template-columns: var(--grid-1-2); } }
@media (max-width: 768px)  { .cta-box-large { grid-template-columns: var(--grid-2-3); } }
@media (max-width: 550px)  { .cta-box-large { grid-template-columns: var(--grid-1); } }

.cta-box-large__contents {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  padding: var(--space-xl) 0 var(--space-xl) var(--space-xl);
}
@media (max-width: 550px) { .cta-box-large__contents { position: relative; z-index: 10; } }

.cta-box-large__media { height: 100%; }
/* width:100% verhindert, dass aspect-ratio die Breite über die Grid-Spalte hinaus zieht: unser
   Bild liegt (anders als im Original) per .image-cover absolut im Container und hat dadurch
   keinen eigenen Fliessinhalt mehr, an dem sich die Breite orientieren könnte – ohne das würde
   die Kachel hier breiter als ihre Spalte. Im Original bleibt die Breite bei der
   Original-Spaltenbreite (gemessen: 338px bei 600px Fensterbreite). */
@media (max-width: 768px) {
  .cta-box-large__media { aspect-ratio: 5/3; position: relative; width: 100%; }
  .cta-box-large__media::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(var(--neutral) 0%, transparent 30%);
  }
}
/* Unter 550px wird die Kachel einspaltig; das Bild bekommt keine eigene Grid-Zeile mehr,
   sondern liegt (Grid-Standardverhalten für abspos-Kinder ohne eigene Platzierung) als
   Vollflächen-Hintergrund hinter dem Text, abgedunkelt. */
@media (max-width: 550px) {
  .cta-box-large__media { position: absolute !important; z-index: 0; opacity: .3; }
}
.cta-box-large__image img { object-fit: cover; }
@media (max-width: 768px) { .cta-box-large__image img { object-position: 0; } }

@media (max-width: 550px) {
  .cta-waves-wrapper { position: absolute; right: -50%; bottom: 0; width: 120%; height: 115%; }
}

/* Punktnavigation steht seit Task 12 gemeinsam in 81-blocks.css – der Werbekachel-Slider und der
   Anwendungs-Slider haben im Original dieselbe (Bricks-)Steuerung. */

/* ==== 84-product-types.css ==== */
/* Block „Produkttyp-Kacheln" (docs/analysis/wp-export/home-en.html, Werte per Headless-Chrome
   gegen die Original-Werte aus dem CSS-Export geprüft, 1440/600 px). Kopfzeile, .container und
   .center-all kommen aus 10-base.css/20-layout.css, hgroup+claim aus 81-blocks.css. */

.product-types-list {
  display: grid;
  grid-template-columns: var(--grid-3);
  gap: var(--space-m);
  align-items: initial;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 1090px) { .product-types-list { grid-template-columns: var(--grid-2); } }

/* Jede Kachel: Bild oben (per order vor die Textbox gezogen), Textbox unten überlappt leicht
   dank negativem Row-Gap-Effekt der Original-Reihenfolge (row-gap: 0, Radius der Textbox). */
.product-types-list__type {
  display: flex;
  flex-direction: column;
  row-gap: 0;
  padding: 0 var(--space-xs) var(--space-xs);
  background-color: var(--primary-light);
  background-image: url("/img/nti-waves-blue.webp");
  background-size: 200%;
  background-position: center center;
  position: relative;
  z-index: 5;
  border-radius: var(--radius);
  overflow: hidden;
}
.product-types-list__type::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--primary-light-trans-70), var(--primary-light-trans-70));
  pointer-events: none;
}

.product-types-list__contents {
  display: flex;
  flex-direction: column;
  position: relative;
  row-gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background-color: var(--white);
  z-index: 5;
  height: 100%;
  flex-grow: 1;
}

.list-item__heading { font-size: var(--text-m); font-weight: 500; }

.excerpt-post-titles-ul {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: .6em;
  padding: 0;
  margin: 0;
  font-size: .8em;
}
/* Die Titelliste ist im Original ein Bricks-„block" und damit width: 100% – ohne das schrumpft
   sie in der mittig ausgerichteten Kachel auf ihren Inhalt und bricht früher um (gemessen:
   316,55 statt 353,34 px). Gilt nur für die Liste, nicht für den gleich benannten Auszug der
   Typseiten (dort ein Bricks-„text" ohne feste Breite). Befund aus Task 18. */
ul.excerpt-post-titles-ul { width: 100%; }
@media (max-width: 768px) { .excerpt-post-titles-ul { justify-content: flex-start; } }
@media (max-width: 550px) { .excerpt-post-titles-ul { display: none; } }

.parent-click-text-link { position: relative; text-decoration: underline; }
/* Die ganze Kachel ist klickbar (wie im Original): der Link legt sich unsichtbar über die Kachel,
   damit ausserhalb des sichtbaren Textlinks trotzdem alles anklickbar ist – ohne verschachtelte
   interaktive Elemente, weil die Produkttitel selbst keine Links sind. */
.parent-click-text-link::after { content: ""; position: absolute; inset: 0; z-index: 99; }

.product-types-list__media {
  order: -1;
  z-index: 4;
  padding-inline: var(--space-s);
}
.product-types-list__image { width: 100%; transition: transform .3s ease; }
.product-types-list__image img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.product-types-list__type:hover .product-types-list__image { transform: scale(1.1); }

/* ==== 85-testimonials.css ==== */
/* Block „Testimonials" – zwei verbundene Slider.
   Alle Werte am Original gemessen (http://localhost:10014/en/, Headless Chrome, 1440 und 600 px):
   Kasten var(--content-width)/2 = 720 px, Hintergrund --neutral-trans-80, Rand --border-size solid
   --border-color-light, Radius --radius, Innenabstand --space-m, backdrop-filter blur(.5em);
   Personenbild 4rem rund (object-fit: cover), Firmenlogo 5rem hoch, Seitenverhältnis 5/3,
   rechtsbündig, order: -1, filter: invert(1) brightness(9999); Logo-Band 0.7 × --content-width. */

/* Task 16: Dieselbe Bricks-Vorlage (6642) steht auch im Testimonial-Abschnitt jeder
   Produktseite. Die Regeln unten gelten deshalb für den Startseitenblock
   (.block--testimonials) UND für die Sektion der Produktseite (.section--testimonials);
   an den Werten hat sich nichts geändert. */
/* Im Original hat der Container hier keinen Zeilenabstand: Überschrift, Logo-Band und Slider
   stehen direkt aufeinander (gemessen: 108 + 109,66 + 739,31 = 956,97 px Containerhöhe).
   Bleibt eine Blockregel – alle anderen Blöcke haben den normalen Containerabstand. */
.block--testimonials .container,
.section--testimonials .container { row-gap: 0; }

/* --- Logo-Band (Steuerung des Zitat-Sliders) --- */
.testimonials__nav { width: calc(var(--content-width) * .7); max-width: 100%; }
.testimonials__nav .splide__slide {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-xs) 1rem; cursor: pointer;
  border-bottom: calc(var(--border-size) * 3) solid var(--neutral-light);
}
.testimonials__nav .splide__slide.is-active { border-bottom-color: var(--neutral-medium); }
/* Splide hängt den Abstand als margin-right an jeden Slide; im Original trägt der letzte keinen –
   ohne diese Regel steht das zentrierte Band um einen halben Abstand (10 px) zu weit links. */
.testimonials__nav .splide__slide:last-child { margin-right: 0 !important; }
/* Höhe steht über das Seitenverhältnis fest – dadurch springt beim Laden nichts (kein CLS). */
.testimonials__nav-logo { width: 100%; aspect-ratio: 5 / 2; object-fit: contain; }
/* Passen alle Logos nebeneinander, zeigt das Original keine Pfeile und rückt sie in die Mitte
   (BricksExtras „x-no-slider"); Splide setzt dafür die Klasse is-overflow. */
.block--testimonials .splide:not(.is-overflow) .splide__arrows,
.section--testimonials .splide:not(.is-overflow) .splide__arrows { display: none; }
.block--testimonials .splide:not(.is-overflow) .splide__list,
.section--testimonials .splide:not(.is-overflow) .splide__list { justify-content: center; }

/* --- Zitat-Slider --- */
.testimonials__slider { width: 100%; }
.testimonial {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: var(--content-gap); padding: var(--space-xl);
  background-color: var(--neutral); color: var(--white); border-radius: var(--radius);
}
/* position/overflow des Slides kommen aus 80-utilities.css (*:has(> .image-cover)). */

.testimonial__box {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap);
  width: calc(var(--content-width) / 2); max-width: 100%;
  margin-top: var(--section-space-m); padding: var(--space-m); text-align: left;
  background-color: var(--neutral-trans-80);
  border: var(--border-size) solid var(--border-color-light); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(.5em); backdrop-filter: blur(.5em);
}
.testimonial__box blockquote {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); width: 100%;
}
/* Typografische Anführungszeichen wie im Original: vor jedem Absatz eines, hinter dem letzten. */
.testimonial .quote p::before { content: "“"; display: inline-block; margin-right: .1em; }
.testimonial .quote p:last-child::after { content: "”"; display: inline-block; margin-left: .1em; }

.testimonial__cite {
  display: flex; flex-direction: row; align-items: center; width: 100%;
  gap: var(--content-gap) var(--space-xs);
}
/* Ohne feste Breite: Reicht der Platz für die Quellenangabe nicht, schrumpft das Personenbild –
   im Original bei 1440 px auf 53,75 px (Flexbox, kein eigener Wert). */
.testimonial__person { width: 4rem; }
.testimonial__person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 100vmax; }
.testimonial__logo { order: -1; height: 5rem; margin-left: auto; }
.testimonial__logo img {
  height: 100%; width: auto; aspect-ratio: 5 / 3; object-fit: contain; object-position: 100% 0;
  filter: invert(1) brightness(9999);
}

/* --- Pfeile (beide Slider, Werte aus dem Original) --- */
.block--testimonials .splide__arrow,
.section--testimonials .splide__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: clamp(1.875rem, 1.2101rem + 2.1277vw, 3.125rem); height: 50px;
  padding: 0; border: 0; border-radius: 0; cursor: pointer;
  font-size: 16px; background-color: var(--neutral); color: var(--white);
  transition: opacity .3s ease, color .3s ease, background-color .3s ease;
}
.block--testimonials .splide__arrow--prev,
.section--testimonials .splide__arrow--prev { left: 0; }
.block--testimonials .splide__arrow--next,
.section--testimonials .splide__arrow--next { right: 0; }
.block--testimonials .splide__arrow:disabled,
.section--testimonials .splide__arrow:disabled { opacity: .5; }
.block--testimonials .splide__arrow svg,
.section--testimonials .splide__arrow svg { width: 1em; height: 1em; fill: currentColor; }
/* Ohne JavaScript bewegen die Pfeile nichts – dann bleiben sie aus. */
.block--testimonials .splide:not(.is-initialized) .splide__arrows,
.section--testimonials .splide:not(.is-initialized) .splide__arrows { display: none; }

/* --- Schmal --- */
/* Bricks lässt alle Blöcke unter 767 px umbrechen – hier sichtbar: Personenbild und Quellenangabe
   stehen dann untereinander (gemessen: Zeilenhöhe 123,69 px statt 64 px). */
@media (max-width: 767px) {
  .testimonial__cite { flex-wrap: wrap; }
}

/* Logo-Band und Hintergrundbild aus, Kasten ohne Rand über die volle Breite
   (Original: _display:mobile_portrait = none, gerendert als @media (max-width: 768px)). */
@media (max-width: 768px) {
  .testimonials__nav, .testimonial__bg { display: none; }
  .testimonial { justify-content: flex-start; padding: 0; }
  .testimonial__box {
    width: 100%; margin-top: 0; border-style: none;
    padding-inline: var(--section-space-s);
  }
}

/* ==== 86-news.css ==== */
/* Block „News & nächstes Event" (Startseite).
   Werte 1:1 aus den Bricks-Inline-Styles des Originals (docs/analysis/wp-export/
   inline-bricks-frontend-inline-inline-css.css: .brxe-mfxapp, #brxe-ofcnwz, .newspost-box,
   .tile-next, .listing-events__*). Bricks-Grundlagen (.brxe-block = flex column) sind hier
   ausgeschrieben, weil wir die Bricks-Basisdatei nicht mitnehmen. */

/* Globale Klasse des Originals: zentrierte Überschrift, ab Tablet linksbündig. */
.center-self { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .center-self { margin-left: 0; margin-right: auto; text-align: left; } }

/* ---------------------------------------------------------------- Event-Zeile */
/* Eine Zeile mit Verlauf: links Titel und Datum, rechts der Button. */
.listing-events {
  display: grid; grid-template-columns: var(--grid-3-1); align-content: center; gap: var(--grid-gap);
  padding: calc(var(--space-xs) / 2); padding-left: var(--space-m);
  background-image: linear-gradient(90deg, var(--secondary-semi-light), var(--primary));
  border-radius: calc(var(--radius) / 2);
}
.listing-events__metadata {
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;
  column-gap: var(--space-xs); padding-top: .2em;
  font-size: var(--text-m); font-weight: 400; text-transform: none;
}
.listing-events__metadata > p { margin: 0; }
/* Das Datum bleibt immer auf einer Zeile; enger wird stattdessen der Titel umbrochen. */
.listing-events__date-small { display: flex; flex-direction: row; flex-wrap: nowrap; column-gap: 0; white-space: nowrap; }
.listing-events__button { margin-left: auto; align-self: center; line-height: 1; font-size: var(--text-m); }
@media (max-width: 768px) {
  .listing-events { grid-template-columns: 1fr auto; gap: var(--space-xs); }
  .listing-events__metadata { flex-wrap: nowrap; }
}
/* Auf kleinen Geräten fällt das Datum weg – dann auch das Trennzeichen davor.
   (Im Original greift die Regel für das Trennzeichen wegen eines Klassen-Tippfehlers nicht;
   die Zeile enthält dort aber ohnehin nie ein Datum.) */
@media (max-width: 550px) {
  .listing-events__date-small, .listing-events__divider { display: none; }
}

/* ---------------------------------------------------------------- Kachelraster */
/* Fünf Spalten, zwei Reihen: 3+2 oben, 2+2+1 unten (die letzte Zelle ist die Abschlusskachel). */
.posts-home-ul {
  display: grid; grid-template-columns: var(--grid-5); grid-template-rows: var(--grid-2);
  gap: var(--grid-gap); margin: 0; padding: 0; list-style: none;
}
@media (min-width: 1201px) {
  .posts-home-ul > li:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
  .posts-home-ul > li:nth-child(2) { grid-column: 4 / 6; grid-row: 1; }
  .posts-home-ul > li:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .posts-home-ul > li:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
}
@media (max-width: 1090px) {
  .posts-home-ul { grid-template-columns: var(--grid-3); grid-template-rows: auto; }
  .posts-home-ul > li:first-child { grid-column: span 2; }
}
@media (max-width: 768px) { .posts-home-ul { grid-template-columns: var(--grid-2); } }
@media (max-width: 550px) {
  .posts-home-ul { grid-template-columns: var(--grid-1); }
  .posts-home-ul > li:first-child { grid-column: auto; }
}

/* ---------------------------------------------------------------- News-Kachel */
.newspost-box {
  position: relative; z-index: 5; overflow: hidden; border-radius: var(--radius);
  padding: var(--space-m); color: var(--white);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  row-gap: var(--content-gap);
}
.newspost-box__contents {
  position: static !important; z-index: 5; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  row-gap: var(--space-xs); margin-top: var(--section-space-m);
}
/* Überschrift und Textlink sind nur so breit wie ihr Inhalt (Bricks: align-items der Kachel),
   die Metazeile dagegen volle Breite (Bricks-Blöcke haben width: 100%). */
.newspost-box__post-meta { width: 100%; display: flex; flex-direction: row; align-items: center; column-gap: .3em; font-size: .9em; }
.newspost-box__meta-tax { font-weight: 600; color: var(--secondary-semi-light); }
.newspost-box__heading { color: var(--white); font-size: var(--h3); }
.newspost-box__text-link { margin-top: var(--space-xs); }
/* Der Textlink deckt die ganze Kachel ab – wie im Original „list-item__text-link". */
.list-item__text-link { position: static !important; z-index: 10; color: var(--white); font-weight: 500; }
.list-item__text-link::after { position: absolute; content: ""; inset: 0; }
.newspost-box:hover .list-item__text-link { color: var(--white); }

/* Bild als Kachelhintergrund, darüber ein Verlauf, damit der Text lesbar bleibt. */
.newspost-box__media { position: static !important; order: -1; }
.newspost-box__media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(transparent 40%, var(--neutral));
}
.newspost-box__image--empty { background-color: var(--neutral); }
.newspost-box img { transform: scale(1); transition: transform .3s ease; }
.newspost-box:hover img { transform: scale(1.1); }

/* ---------------------------------------------------------------- Abschlusskachel */
.tile-next {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: var(--space-m) var(--space-s); row-gap: var(--space-xs);
  border-radius: var(--radius); background-color: var(--primary-light);
  font-weight: 600; text-align: center;
}
.tile-next__text-link { text-decoration: none !important; }
.tile-next__iconwrapper {
  order: -1; display: flex; justify-content: center; align-items: center; aspect-ratio: 1;
  padding: var(--space-s); border-radius: 100vmax;
  background-color: var(--white-trans-30); backdrop-filter: blur(.2em); transition: all .3s ease;
}
.tile-next:hover .tile-next__iconwrapper { background-color: var(--white-trans-80); }
.tile-next__icon { width: var(--text-l); height: var(--text-l); }
/* Klickfläche über die ganze Kachel. */
.parent-click-text-link::after { position: absolute; content: ""; inset: 0; z-index: 99; }

/* ==== 87-application-slider.css ==== */
/* Block „Anwendungs-Slider" (Startseite, 7 Anwendungen).
   Werte 1:1 aus den Bricks-Inline-Styles des Originals (docs/analysis/wp-export/home-en.html) und
   per Headless-Chrome nachgemessen (1440/600 px) – das Original lädt seine Slider-Skripte erst
   nach einer Nutzerinteraktion ("delay JS execution"), erst danach stimmen Kartenbreite und
   sichtbare Kartenzahl mit der Splide-Konfiguration überein. .container, .center-all, hgroup/.claim,
   .list-item__heading und .list-item__text-link kommen aus 10-base.css/20-layout.css/
   84-product-types.css/86-news.css; .image-cover aus 80-utilities.css; die Splide-Grundstruktur
   (.splide, .splide__list-Reset) aus 81-blocks.css. */

/* Slider selbst: overflow:visible im Original, damit die Punktnavigation unterhalb der Karten
   (position: absolute) nicht abgeschnitten wird. */
.app-slider { overflow: visible; }

/* Karte: Bild als Hintergrund (per .image-cover, direktes Geschwister der Textbox – das Original
   hat hier keinen eigenen Bild-Wrapper), Inhalt unten ausgerichtet, fester Innenabstand. */
.app-item {
  position: relative;
  border-radius: var(--radius);
  background-color: var(--neutral);
  color: var(--white);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  row-gap: var(--space-xs);
  aspect-ratio: 3 / 5;
}
.app-item h3 { color: var(--white); }
/* Verlauf zur Lesbarkeit des Textes über dem Bild. */
.app-item::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(transparent, var(--neutral));
  pointer-events: none;
}
@media (max-width: 1090px) { .app-item { aspect-ratio: 4 / 5; } }
@media (max-width: 550px)  { .app-item { aspect-ratio: 5 / 4; } }

/* Die Textbox ist im Original ein .brxe-block und damit eine Flex-Spalte mit --space-xs
   Zeilenabstand (gemessen 13,33 px bei 1440). Bei uns fehlte „display: flex" – row-gap und
   das „align-items: center" von .center-all liefen deshalb ins Leere, und der Abstand
   zwischen Auszug und Link kam aus dem Absatzabstand der Basistypografie. Beim Zusammenführen
   der Basistypografie (der Absatzabstand entfällt) ist das aufgefallen und hier 1:1 ergänzt. */
.app-item__contents { display: flex; flex-direction: column; position: static !important; z-index: 2; row-gap: var(--space-xs); }
.app-item__text { font-size: .9em; }
@media (max-width: 550px) { .app-item__text { display: none; } }

.app-item__bgimg, .app-item__bgimg--empty { transition: transform .3s ease; }
.app-item:hover .app-item__bgimg { transform: scale(1.2); }
.app-item__bgimg--empty { background-color: var(--neutral); }

/* Punktnavigation steht seit Task 12 gemeinsam in 81-blocks.css. */

/* ==== 88-content-blocks.css ==== */
/* Phase 2 – Grundlage der Baukastenseiten: Seitenkopf, Brotkrumen, Inhaltsverzeichnis und
   alles, was sich die 23 Blocksets teilen. Die Sets selbst bekommen eigene Dateien:
   89 Text, 90 Bild und Text, 91 Galerie, 92 Akkordeon/Tabelle, 93 Einbettungen,
   94 Downloads/Werbebanner. Was global gilt, gehört hierher oder in die Phase-0-Dateien –
   nie in eine Set-Datei (Merksatz aus Phase 1).
   Alle Werte sind am Original gemessen, nicht geschätzt. */

/* ============================================================ Fliesstext eines Blocks */
/* Im Original ist das .brxe-text. Automatic.css regelt die Abstände darin über „smart
   spacing": alle Blockelemente ohne eigenen Abstand, und der Abstand kommt jeweils vom
   NACHFOLGENDEN Element (margin-block-start). Dazu zwei Regeln aus dem Seiten-CSS
   (WPCodeBox): Überschriften im Fliesstext bekommen 1em Abstand nach unten, nach einem
   Absatz mehr Luft davor.

   .cb-text gilt für ALLE 23 Sets und für jeden anderen Fliesstext aus WordPress. Der
   Nullabstand der ersten Zeile ist seit der Konsolidierung global (10-base.css) und hier nur
   noch der Vollständigkeit halber aufgeführt; die Silbentrennung steht ebenfalls dort. */
.cb-text {
  --paragraph-spacing: 1em;
  --flow-spacing: 1em;
  --heading-spacing: 1.5em;
  --list-spacing: 1em;
  --list-indent-spacing: 2em;
  --list-item-spacing: .5em;
  --nested-list-indent-spacing: 1em;
}
.cb-text > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0; }
.cb-text > * + * { margin-block-start: var(--flow-spacing); margin-block-end: 0; }
.cb-text > * + :where(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--heading-spacing); margin-block-end: 0; }
.cb-text > * + p { margin-block-start: var(--paragraph-spacing); margin-block-end: 0; }
.cb-text > :is(* + ul, * + ol) { margin-block: var(--list-spacing); }
.cb-text > :is(ul, ol) { padding-inline-start: var(--list-indent-spacing); }
.cb-text > ul * + li,
.cb-text > ol * + li { margin-block-start: var(--list-item-spacing); margin-block-end: 0; }
.cb-text > ul ul, .cb-text > ul ol, .cb-text > ol ul, .cb-text > ol ol {
  margin-block: var(--list-item-spacing); padding-inline-start: var(--nested-list-indent-spacing);
}
.cb-text h2, .cb-text h3, .cb-text h4 { margin-bottom: 1em; }
.cb-text p + h2 { margin-top: 2em; }
.cb-text p + h3 { margin-top: 1.5em; }

/* ---------- Schmale Textspalte (Original: globale Klasse „container-medium", 70 rem) ---------- */
/* Drei Sets benutzen dieselbe Spalte: text_heading (89), image_text_rows (90) und
   download_list (94). Bis zur Konsolidierung stand sie dreimal da. */
.container-medium { max-width: 70rem; }
.cb-text-heading__inner, .cb-downloads__inner {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  width: 70rem; max-width: 100%; margin-inline: auto;
  position: relative; z-index: 10;
}

/* ---------- Verläufe der Kopfbereiche (Hilfsklassen der Bricks-Vorlagen) ---------- */
.gradient-soft-blue { background-image: linear-gradient(var(--white), var(--primary-ultra-light)); }
.gradient-soft-blue-top-to-bottom { background-image: linear-gradient(var(--primary-ultra-light), var(--white)); }

/* ---------- Seitenkopf ---------- */
/* Gemeinsam: die beiden animierten „Spiralen" liegen absolut im Kopf, deshalb schneidet er ab.
   (80-utilities.css setzt das über section:has(.gradient-image) bereits; hier nur zur Klarheit.) */
.page-head { overflow: hidden; }

/* Kind-Typen, FAQs, Seiten und Archive (Bricks 2749): mittige Spalte, darin Überschrift und
   darunter die Brotkrumen. Im Original steht die Überschrift zuerst im Quelltext und wird per
   „flex-flow: column-reverse" nach unten gedreht; wir schreiben beides gleich in der Reihenfolge
   hin, in der es gelesen wird – gleiche Optik, sinnvollere Vorlesereihenfolge. */
.page-head__group { display: flex; flex-direction: column; row-gap: .5em; width: 100%; }

/* Produktseite (Bricks 391): der Kopf hat oben und unten keinen Abstand, erst unter 768 px
   bekommt er --space-m. Zwei Spalten: links Text, rechts das Bild (Task 15). */
.page-head--product { padding-top: 0; padding-bottom: 0; }
.page-head--product .container { display: grid; grid-template-columns: var(--grid-2); gap: 0; z-index: 99; }
/* align-items: flex-start ist die Bricks-Grundeinstellung von .brxe-block – die Brotkrumen
   werden dadurch nur so breit wie ihr Text (im Original 473 statt 690 px). */
.page-head__text { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap); justify-content: center; }
.page-head__text h1 { max-width: 90%; }
@media (max-width: 1280px) {
  .page-head--product .container { grid-template-columns: var(--grid-2-3); gap: var(--space-m); }
}
@media (max-width: 768px) {
  .page-head--product { padding-top: var(--space-m); padding-bottom: var(--space-m); }
  .page-head--product .container { grid-template-columns: var(--grid-1); }
}

/* Anwendungsseite (Bricks 1983): dunkle Fläche, weisse Schrift, das Beitragsbild liegt mit
   30 % Deckkraft dahinter. */
.page-head--application { background-color: var(--neutral); color: var(--white); }
.page-head--application .container { z-index: 10; }
/* Der Kopf der Anwendungsseite ist im Original ein .brxe-block mit gap: var(--content-gap)
   (30 px bei 1440), nicht die .5em des <hgroup> der Kind-Typen. */
.page-head--application .page-head__group { row-gap: var(--content-gap); }
.page-head--application h1 { max-width: 90%; color: var(--white); }
.page-head--application .page-head__intro { max-width: 65ch; font-size: 1.2em; }
.page-head--application .breadcrumb li.active { color: var(--white); }
.page-head__bg { opacity: .3; }

/* ---------- Brotkrumen ---------- */
.breadcrumb { list-style: none; margin: 0; padding-inline-start: 0; font-size: .8em; text-transform: uppercase; font-weight: 600; }
/* Unter 768 px zeigt das Original überhaupt keine Brotkrumen (die Bricks-Klasse des
   Shortcode-Elements, .brxe-oprnup, ist dort auf display: none) – gilt für alle Seitenköpfe.
   Beim Messen der Produktseite bei 600 px aufgefallen (Task 15). */
@media (max-width: 768px) { .page-head nav.breadcrumb-nav { display: none; } }
.breadcrumb li { margin: 0; display: inline-block; position: relative; }
.breadcrumb li::after { content: ' | '; margin-left: 5px; margin-right: 5px; color: var(--neutral-light); }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary-dark); }
.breadcrumb li.active { color: var(--neutral); }

/* ---------- Inhaltsverzeichnis ---------- */
/* Der Abschnitt selbst hat keinen Abstand; ab 901 px hängt die Leiste absolut über der Kante
   zwischen Kopf und erstem Block (transform: translateY(-50%)). */
.section--toc { padding-top: 0; padding-bottom: 0; }
.section--toc .container { position: relative; }
.toc {
  width: 100%; padding-inline: 1em; border-radius: var(--radius-s); z-index: 99;
  background-color: var(--white-trans-60); backdrop-filter: blur(.4em);
  border: var(--border-size) solid var(--secondary); font-size: .9em;
}
@media (min-width: 901px) {
  .toc { position: absolute; top: 0; left: 0; transform: translateY(-50%); }
}
.toc__list { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: 0; padding: 0; width: 100%; list-style: none; position: relative; }
.toc__item { position: relative; }
.toc__link {
  display: block; height: 100%; color: currentcolor; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: .9em 0 .6em; border-bottom: var(--border-size) solid transparent; font-weight: bold;
}
.toc__link:hover { border-color: var(--neutral); }
.toc__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ---------- Gemeinsames der Blöcke ---------- */
/* Die Abstands-Schalter: 81-blocks.css setzt bereits das Padding auf 0; im Original steht
   zusätzlich margin auf 0 (Attribute padtop/padbot). */
.block--flush-top { margin-top: 0; }
.block--flush-bottom { margin-bottom: 0; }

/* Farbschema der Blöcke (Original: section[scheme="green|blue"] mit Verlauf von oben). */
.block--green { --schemecolor: var(--secondary); --schemecolor-medium: var(--secondary-medium); --schemecolor-light: var(--secondary-ultra-light); }
.block--blue { --schemecolor: var(--primary); --schemecolor-medium: var(--primary-medium); --schemecolor-light: var(--primary-ultra-light); }
.block--green, .block--blue { background-image: linear-gradient(var(--schemecolor-light), transparent); }
.block--green .claim, .block--blue .claim { color: var(--schemecolor); }

/* Die zwei Bildhaltungen aus dem ACF-Feld image_fit (flexible-image-cover/-contain). */
.block__image--cover img { width: 100%; height: 100%; object-fit: cover; }
.block__image--contain img { width: 100%; height: auto; object-fit: contain; }

/* ==== 89-text-blocks.css ==== */
/* Phase 2, Task 9 – die fünf Baukasten-Sets „Text":
   text_heading, two_columns, text_two_lists, cta, button_only.

   Alle Werte sind am WordPress-Original gemessen (eigener Headless-Chrome über das
   DevTools-Protokoll, 1440 und 600 px), nicht geschätzt. Die <section> mit Abstands- und
   Farbklassen kommt von aussen (partials/content-blocks, CSS in 88-content-blocks.css);
   hier steht nur, was innerhalb des Containers gilt.

   Der Fliesstext eines Blocks (.cb-text) gilt für alle 23 Sets und steht seit der
   Konsolidierung in 88-content-blocks.css.
   Die Bricks-Haltepunkte des Originals sind 1090 px („Tablet large"), 768 px („Mobile xl")
   und 550 px („Mobile regular"). */

/* ============================================================ Häkchenlisten */
/* Im Original eine globale Klasse (.list-checks) aus dem Seiten-CSS: die Aufzählungspunkte
   werden durch einen Kreis mit Häkchen ersetzt, in Blau oder Grün. Benutzt von two_columns
   (rechte Spalte) und text_two_lists (beide Listen).
   Die Regeln stehen NACH .cb-text (88-content-blocks.css), weil sie dort gleiche Spezifität
   haben und – wie im Original – gewinnen sollen (Polster 0 statt 2em, 0.7em nach unten). */
.list-checks ul { --iconsize: 1.2em; padding: 0; list-style-type: none; }
.list-checks ul li {
  position: relative; padding: 0 0 0 calc(var(--iconsize) + .6em); margin-bottom: .7em;
}
.list-checks ul li::before, .list-checks ul li::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--iconsize); height: var(--iconsize);
  background: var(--neutral-light); border-radius: 100vmax; transform-origin: center;
}
.list-checks ul li::after {
  background-color: currentColor; transform: scale(.6);
  clip-path: polygon(14.6% 44.24%, 42.4% 65.48%, 85.64% 24.52%, 94.37% 33.71%, 42.4% 83.87%, 5.87% 53.35%);
}
.list-checks.blue li::before { background: var(--primary-semi-light); }
.list-checks.green li::before { background: var(--secondary-medium); }
.list-checks ul:only-child { margin: 0; }

/* ============================================================ text_heading (ueb_tex, 3619) */
/* Hellblauer Kasten über die volle Containerbreite, darin eine 70rem schmale Textspalte.
   Gemessen bei 1440 px: Kasten 1380 px breit, Polster 45 px, Radius 16 px; Textspalte
   1120 px, mittig. Bei 600 px: Polster 26,25 px oben/unten und 18,75 px seitlich. */
.cb-text-heading {
  align-items: flex-start;
  padding: var(--space-l);
  background-color: var(--primary-ultra-light);
  border-radius: var(--radius);
}
@media (max-width: 768px) { .cb-text-heading { padding-inline: var(--gutter); } }
/* Die schmale Spalte darin ist .cb-text-heading__inner – Werte in 88-content-blocks.css,
   zusammen mit .container-medium und .cb-downloads__inner. */

/* ============================================================ two_columns (twocolcontent, 5805) */
/* Das Original hebt hier ausdrücklich die globale h2-Breite (25ch) auf. */
.cb-two-columns { align-items: flex-start; }
.cb-two-columns h2 { max-width: 100%; }
.cb-two-columns__grid {
  display: grid; width: 100%;
  grid-template-columns: var(--grid-2); gap: var(--grid-gap);
}
.cb-two-columns__col {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
}
@media (max-width: 1090px) {
  /* --grid-2-1, dazu zwei gleich hohe Zeilen; die linke Spalte reicht über beide. */
  .cb-two-columns__grid {
    grid-template-columns: var(--grid-2-1);
    grid-template-rows: var(--grid-2);
  }
  .cb-two-columns__col:first-child { grid-row: 1 / 3; }
}
@media (max-width: 768px) {
  /* --grid-3-2 */
  .cb-two-columns__grid { grid-template-columns: var(--grid-3-2); }
}
@media (max-width: 550px) {
  .cb-two-columns__grid { grid-template-columns: var(--grid-1); grid-template-rows: auto; }
}

/* ============================================================ text_two_lists (text_2_lists, 3622) */
/* Hier ist der Container selbst das Raster (3 : 2 : 2). Gemessen bei 1440 px:
   565,70 / 377,14 / 377,16 px bei 30 px Spalte-zu-Spalte. */
.container.cb-text-two-lists {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  gap: var(--grid-gap);
}
.cb-text-two-lists__col {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
}
@media (max-width: 1090px) {
  .container.cb-text-two-lists {
    grid-template-columns: var(--grid-2-1);
    grid-template-rows: var(--grid-2);
  }
  .cb-text-two-lists__col:first-child { grid-row: 1 / 3; }
}
@media (max-width: 768px) {
  .container.cb-text-two-lists { grid-template-columns: var(--grid-3-2); }
}
@media (max-width: 550px) {
  .container.cb-text-two-lists { grid-template-columns: var(--grid-1); grid-template-rows: auto; }
}

/* ============================================================ cta (cta_, 3607) */
/* Kasten in --primary-light mit sehr grossem Polster (101,25 px bei 1440, 51,96 px bei 600),
   Radius 16 px, ohne Zeilenabstand – der Inhalt sitzt in einem eigenen Block darin. Die
   beiden „Wellen" liegen absolut im Kasten und werden von ihm abgeschnitten. */
.cb-cta {
  position: relative; overflow: hidden; z-index: 2;
  align-items: flex-start; row-gap: 0;
  padding: var(--space-xxl);
  background-color: var(--primary-light);
  border-radius: var(--radius);
}
@media (max-width: 768px) { .cb-cta { padding-inline: var(--gutter); } }
.cb-cta__contents {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  width: 100%; position: relative; z-index: 999;
}
/* Zusatztext: im Original die globale Klasse „text-intro". */
.cb-cta__text { font-size: 1.2em; }
.cb-cta__text a { font-size: inherit; }
/* Das Original zieht Kursivschrift im Zusatztext auf aufrecht und kleiner zurück
   (dort das Kleingedruckte zu den Systemvoraussetzungen). */
.cb-cta__text i, .cb-cta__text em { font-style: normal; font-size: .8em; }

/* ============================================================ button_only (but_only, 3605) */
/* Ohne eigene Regeln: die Zentrierung leistet .center-all aus 20-layout.css, den Button
   selbst 30-buttons.css. Die Klasse steht nur da, damit der Block im Quelltext auffindbar
   bleibt und spätere Sonderfälle einen Anker haben. */

/* ==== 90-image-text-blocks.css ==== */
/* Phase 2 – Baukasten-Sets „Bild und Text":
   image_left_text (ACF bili_teri_, Bricks 3620) · image_right_text (bire_teli, 3621)
   image_text_rows (image_text_rows, 3613)       · feature_list (feature_lists, 3625)

   Alle Werte sind am Original abgelesen (Bricks-Vorlagen, globale Klassen aus
   opt-bricks_global_classes und die Schnipsel in wpcodebox-1-styling.css) und mit Headless
   Chrome bei 1440 und 600 px nachgemessen. Was global gilt, steht in 00-tokens.css,
   10-base.css, 80-utilities.css oder 88-content-blocks.css – hier steht nur, was diese
   vier Sets brauchen. */

/* Die Haltepunkte des Originals sind 1090 px („Tablet large"), 769/768 px („Mobile xl") und
   550 px („Mobile regular").

   Der Fliesstext der Sets image_left_text/image_right_text steht im Original in einem
   Bricks-„text"-Element und benutzt deshalb die gemeinsame Klasse .cb-text aus
   88-content-blocks.css (Abstandsmodell und Silbentrennung). image_text_rows und feature_list
   benutzen dagegen „text-basic": dort gilt der globale Nullabstand ohne Ausnahme – siehe
   ganz unten in dieser Datei. */

/* ============================================================================
   image_left_text und image_right_text
   ============================================================================ */

/* Die Wellengrafik ragt über den Rand hinaus; im Original schneidet die Sektion sie ab
   (Bricks-Einstellung _overflow: hidden auf beiden Vorlagen). */
.block--image_left_text, .block--image_right_text { overflow: hidden; }

/* Zweispaltiges Raster. Im Quelltext steht die Textspalte zuerst; die Medienspalte wandert
   per „order" nach links (image_left_text auf allen Breiten, image_right_text erst unter
   768 px). Der Abstand ist der Container-Standard (--content-gap), nicht --grid-gap. */
.media-text { display: grid; align-items: center; gap: var(--content-gap); }
.media-text--image-left { grid-template-columns: var(--grid-2-3); }
.media-text--image-right { grid-template-columns: var(--grid-3-2); }
.media-text--image-left .media-text__media { order: -1; }

/* Textspalte: eigener Innenabstand oben und unten zusätzlich zum Sektionsabstand
   (Original: _padding var(--section-space-m) auf dem Block), unter 768 px keiner mehr.
   position: relative trägt die Wellengrafik. */
.media-text__body {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  padding-block: var(--section-space-m); position: relative;
}

/* Medienspalte: füllt die Zeilenhöhe und ist mindestens 350 px hoch (Original 21.875rem).
   Bei „Bild vollständig zeigen" fällt beides weg, das Bild bestimmt dann die Höhe
   (Original: .flexible-image-contain { height: auto; min-height: 1rem }). */
.media-text__media { position: relative; overflow: hidden; height: 100%; min-height: 21.875rem; }
.media-text__media.block__image--cover .media-text__figure { position: absolute; inset: 0; }
.media-text__media.block__image--contain { height: auto; min-height: 0; }
.media-text__figure { border-radius: var(--radius); overflow: hidden; }
.media-text__media img { border-radius: var(--radius); }

/* Schmückende Wellen hinter dem Text (Original: globale Klasse .rotate-center-waves auf einer
   <figure>, die per left: 50% genau halb so breit wird wie die Textspalte; das Bild darin wird
   auf 140 % der Spaltenhöhe gestreckt. Bei uns steht die Klasse direkt auf dem <img> – gleiche
   Masse, ein Element weniger). */
.media-text__waves {
  position: absolute; top: 50%; left: 50%; width: 50%; height: 140%;
  opacity: .3; z-index: -1; pointer-events: none;
  transform: translateX(-50%) translateY(-65%) rotateZ(115deg);
}

/* Linkliste unter dem Text (Original: globale Klasse .linklist, ein <ul> im Flex-Fluss).
   width: 100 % kommt im Original von .brxe-block, die Zeilenhöhe der Links von deren
   inline-flex-Darstellung (24 statt 16 px bei 1440). */
.linklist { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--content-gap); width: 100%; margin: 0; padding-left: 0; list-style: none; }
.linklist__text-link { display: inline-flex; }
/* Ohne gepflegtes Ziel schreibt das Original ein <a> ohne href; bei uns ist es ein <span>,
   das genauso aussieht (unterstrichen), aber kein Link ist. */
/* Abstand und Dicke bleiben `auto` – siehe Befund F-2 in 00-tokens.css. */
.linklist span.linklist__text-link { text-decoration: underline; }

@media (max-width: 768px) {
  /* Unter 768 px setzt das Original den Abstand der Sektion mit „!important" wieder ein –
     die Schalter „kein Abstand oben/unten" wirken dort also nicht (Bricks: _padding und
     _margin für „mobile_portrait" auf beiden Vorlagen). Gemessen an
     /en/products/sound-level-meters/xl2-audio-acoustic-analyzer bei 600 px: 69,38 px oben
     und unten, obwohl beide Schalter gesetzt sind. */
  .block--image_left_text, .block--image_right_text {
    padding-block: var(--section-space-m); margin-block: 0;
  }
  .media-text--image-left, .media-text--image-right { grid-template-columns: var(--grid-1); }
  .media-text--image-right .media-text__media { order: -1; }
  .media-text__body { padding-block: 0; }
}

/* ============================================================================
   image_text_rows
   ============================================================================ */

/* Die Sektion trägt im Original die Klasse gradient-soft-blue-top-to-bottom (Bricks 3613);
   sie steckt fest in der Vorlage, nicht in den Blockdaten. */
.block--image_text_rows, .block--feature_list {
  background-image: linear-gradient(var(--primary-ultra-light), var(--white));
}

.image-text-rows { display: flex; flex-direction: column; row-gap: 0; width: 100%; margin: 0; padding-left: 0; list-style: none; }
/* Ohne Blocküberschrift steht die Liste trotzdem einen Zeilenabstand tiefer: Vorlage 3613 hängt
   an ihr Überschrift-Element – anders als 3619, 3620 oder 5805 – keine Bedingung, es kommt also
   auch bei leerem ACF-Feld als <h2></h2> in den Quelltext. Das leere <h2> ist 0 px hoch, bleibt
   aber ein Flex-Kind des Containers und erzeugt dessen row-gap (--content-gap: 30 px bei 1440,
   18,75 px bei 600). Ein leeres <h2> ist für Vorleseprogramme eine Fehlerquelle; wir schreiben
   keins und setzen denselben Abstand an die Liste, wenn sie das erste Kind ist. Betrifft 12 von
   181 Blöcken (room-acoustics, testing-smart-devices, noise-scout, talkbox – je EN/DE/FR). */
.image-text-rows:first-child { margin-block-start: var(--content-gap); }
.image-text-rows__row {
  display: grid; grid-template-columns: var(--grid-2-3); gap: var(--space-m); align-items: center;
  margin-bottom: var(--space-l); padding-bottom: var(--space-l);
  border-bottom: var(--border-size) solid var(--border-color-dark);
}
.image-text-rows__row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
/* Das Bild steht links (unter 550 px oben) – im Quelltext kommt es nach dem Text. */
.image-text-rows__media { order: -1; display: flex; flex-direction: column; width: 100%; }
.image-text-rows__content { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap); width: 100%; }
.image-text-rows__text h3 { margin-block-end: .4em; }
.image-text-rows__figure img { width: 100%; height: auto; border-radius: var(--radius); }

/* Nummerierte Zeilen (ACF „steps-counter" → Klasse .counting im Original).
   Die Zahl ist ein CSS-Zähler auf dem ersten Kind der Zeile, kein zusätzliches Markup. */
.image-text-rows--numbered { counter-reset: item-counter; }
.image-text-rows--numbered > li > .image-text-rows__content::before {
  counter-increment: item-counter; content: counter(item-counter) ".";
  font-size: var(--text-l); font-weight: bold; line-height: 1 !important;
  background-color: var(--primary); color: var(--white);
  width: 2em; height: 2em; border-radius: 100vmax;
  padding-top: .3em; padding-left: .15em;
  display: flex; align-items: center; justify-content: center; flex: none;
}

@media (max-width: 550px) {
  .image-text-rows__row { grid-template-columns: var(--grid-1); }
}

/* ============================================================================
   feature_list
   ============================================================================ */

.featureblocks { display: flex; flex-direction: column; gap: var(--content-gap); width: 100%; margin: 0; padding-left: 0; list-style: none; }
/* Wie bei image_text_rows oben: Vorlage 3625 hängt an ihr Überschrift-Element (2f52ce im
   Container e22557) KEINE Bedingung. Bei leerem ACF-Feld steht dort deshalb ein leeres
   <h2></h2>: 0 px hoch, aber ein Flex-Kind des Containers, und damit zählt dessen row-gap
   (--content-gap: 30 px bei 1440, 18,75 px bei 600). Wir schreiben kein leeres <h2>
   (Vorleseprogramme melden eine leere Überschrift als Fehler) und geben denselben Abstand
   der Liste, solange sie das erste Kind ist. Betrifft 156 von 215 Blöcken; gemessen an
   /en/options/speech-intelligibility-stipa-option und /en/accessories/backpack (vorher
   30,00 bzw. 18,75 px zu hoch, danach 0,00), Gegenprobe mit Überschrift:
   /en/products/signal-sources/minirator-mr-pro-mr2. */
.featureblocks:first-child { margin-block-start: var(--content-gap); }
.featureblocks__li {
  background-color: var(--white); padding: var(--space-m);
  border: var(--border-size) solid var(--border-color-dark); border-radius: var(--radius);
}
.featureblocks__article { display: grid; grid-template-columns: var(--grid-3-2); align-items: center; gap: var(--space-xl); }
/* Die Kacheln wechseln die Seite: ungerade Kacheln zeigen das Bild links. */
.featureblocks__li:nth-child(odd) .featureblocks__article { grid-template-columns: var(--grid-2-3); }
.featureblocks__li:nth-child(odd) .featureblocks__media { order: -1; }
.featureblocks__contents { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap); }
.featureblocks__media { display: flex; flex-direction: column; width: 100%; }
.featureblocks__image { width: 100%; border-radius: var(--radius-s); }
/* Bildkachel: festes Seitenverhältnis 5:3 auf hellblauem Grund, Bild vollständig sichtbar. */
.featureblocks li img {
  width: 100%; aspect-ratio: 1.6666666667; object-fit: contain;
  padding: var(--space-xs); background-color: var(--primary-ultra-light);
  border-radius: var(--radius);
}

@media (max-width: 769px) {
  .featureblocks__article, .featureblocks__li:nth-child(odd) .featureblocks__article { grid-template-columns: var(--grid-1); }
  .featureblocks__media, .featureblocks__li:nth-child(odd) .featureblocks__media { order: -1; }
}

/* ============================================================================
   Lightbox-Verweise (image_text_rows und feature_list)
   ============================================================================ */

/* Das Bild öffnet im Original eine Lightbox (Bricks/PhotoSwipe). Nach Entscheidung E-7 kommt
   dafür das <dialog> aus partials/lightbox, verdrahtet von initBlockGalleries() (Task 11).
   Der Auslöser ist ein echter <button> ohne eigene Gestaltung; die Schriftfarbe ist die des
   Originals (a.bricks-lightbox { color: var(--primary) }) – sichtbar wird sie nie, der Button
   enthält nur das Bild. */
.image-text-rows__trigger, .featureblocks__trigger {
  display: block; position: relative; z-index: 1; width: 100%;
  padding: 0; margin: 0; border: 0; background: none;
  cursor: zoom-in; color: var(--primary);
}
.image-text-rows__trigger:focus-visible,
.featureblocks__trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Lupensymbol unten rechts im Bild – im Original a.bricks-lightbox::before, eine als Maske
   eingebundene SVG-Grafik in der Schriftfarbe (deshalb steht oben color: var(--primary)).
   Die Galerie-Slider blenden es aus (.brxe-xproslider a.bricks-lightbox:before), unsere
   beiden Sets zeigen es. */
.image-text-rows__trigger::before, .featureblocks__trigger::before {
  content: ""; position: absolute; bottom: var(--space-xs); right: var(--space-xs);
  width: 1.5rem; height: 1.5rem; background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.195 0c4.527 0 8.196 3.62 8.196 8.084a7.989 7.989 0 0 1-1.977 5.267l5.388 5.473a.686.686 0 0 1-.015.98a.71.71 0 0 1-.993-.014l-5.383-5.47a8.23 8.23 0 0 1-5.216 1.849C3.67 16.169 0 12.549 0 8.084C0 3.62 3.67 0 8.195 0Zm0 1.386c-3.75 0-6.79 2.999-6.79 6.698c0 3.7 3.04 6.699 6.79 6.699s6.791-3 6.791-6.699c0-3.7-3.04-6.698-6.79-6.698Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.195 0c4.527 0 8.196 3.62 8.196 8.084a7.989 7.989 0 0 1-1.977 5.267l5.388 5.473a.686.686 0 0 1-.015.98a.71.71 0 0 1-.993-.014l-5.383-5.47a8.23 8.23 0 0 1-5.216 1.849C3.67 16.169 0 12.549 0 8.084C0 3.62 3.67 0 8.195 0Zm0 1.386c-3.75 0-6.79 2.999-6.79 6.698c0 3.7 3.04 6.699 6.79 6.699s6.791-3 6.791-6.699c0-3.7-3.04-6.698-6.79-6.698Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ============================================================================
   Fliesstext in den Blöcken (Bard-HTML)
   ============================================================================ */

/* image_text_rows und feature_list benutzen im Original „text-basic" – da bleibt es beim
   globalen Nullabstand aus 10-base.css: Absatz und Liste stossen ohne Luft aneinander, und
   die Zeilenüberschrift bekommt ihren Abstand aus einer eigenen Regel
   (.image-text-rows__text h3, oben). Gemessen an
   /en/products/signal-sources/minirator-mr-pro-mr2 (Absatz + Liste, 0 px) und
   /fr/tous-les-blocs. Eine eigene Regel braucht es dafür seit der Konsolidierung nicht mehr. */

/* ==== 91-gallery-blocks.css ==== */
/* Phase 2 – Baukasten-Sets „Galerie" (Task 11):
   gallery, text_gallery, gallery_text, viewer_360 – dazu die gemeinsame Lightbox (E-7).
   Was alle Blöcke teilen, steht in 88-content-blocks.css; die Splide-Grundregeln und die
   Punktnavigation stehen seit Phase 1 in 81-blocks.css und gelten hier mit.
   Alle Werte sind am Original gemessen (Headless Chrome, DevTools-Protokoll), nicht geschätzt. */

/* ===================== gallery (ACF „biga", Bricks 3603) ===================== */
/* Der Container steht im Original auf der Bricks-Grundstellung „align-items: flex-start":
   Überschrift und Button sind nur so breit wie ihr Inhalt (gemessen an /fr/tous-les-blocs:
   h2 134,13 px, Button 158,02 px), Einleitungstext und Slider dagegen 1380 px – das sind dort
   .brxe-text und .brxe-xproslider mit width: 100 %. Ohne diese Regel dehnt unser .container
   (Flexspalte, align-items: stretch) den Button auf die volle Breite (1380 statt 158,02 px). */
.block--gallery > .container { align-items: flex-start; }
.block--gallery > .container > .cb-text { width: 100%; }

/* Der Slider zeigt drei Kacheln nebeneinander, unter 768 px zwei. Die Höhe der Bahn setzt
   Splide selbst auf 25vw (Option „height"), genau wie im Original. */
/* Der Radius liegt im Original auch auf dem Slider selbst; sichtbar wird er nur am Bild,
   weil der Slider durchsichtig ist und überstehen darf. Der Vollständigkeit halber hier. */
.gallery-slider { width: 100%; overflow: visible; border-radius: var(--radius); }
.gallery-slider .splide__track { overflow: hidden; }

.gallery-slider__slide { display: block; }
.gallery-slider__trigger {
  display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: zoom-in; color: inherit;
}
.gallery-slider__trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Im Original: .brxe-…xproslidergallery img { object-fit: cover } und
   .x-slider_slide img { width: 100%; height: 100% } plus Radius aus dem Element-CSS. */
.gallery-slider__slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius);
}

/* Ohne JavaScript läuft kein Slider – dann stehen die Bilder als Raster nebeneinander
   (drei je Zeile, unter 768 px zwei), damit alle sichtbar bleiben und nichts abgeschnitten
   wird. Mit JavaScript greift diese Regel nicht, es gibt also kein Umspringen. */
@media (scripting: none) {
  .gallery-slider .splide__track { overflow: visible; }
  .gallery-slider .splide__list { flex-wrap: wrap; gap: var(--space-m); }
  .gallery-slider .splide__slide { width: calc((100% - var(--space-m) * 2) / 3); }
  .gallery-slider__slide img { height: auto; }
}
@media (scripting: none) and (max-width: 768px) {
  .gallery-slider .splide__slide { width: calc((100% - var(--space-m)) / 2); }
}

/* ============ text_gallery / gallery_text (ACF „telibire_kar" / „bireteli_kar") ============ */
/* Zwei gleich breite Spalten, senkrecht mittig – im Original das Container-Raster
   var(--grid-2) mit align-items: center. Unter 768 px eine Spalte. */
.gallery-split {
  display: grid; grid-template-columns: var(--grid-2);
  align-items: center; gap: var(--grid-gap);
}
.gallery-split__text { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap); }
@media (max-width: 768px) {
  .gallery-split { grid-template-columns: var(--grid-1); }
  /* Original: der Galerieblock trägt „_order:mobile_portrait: -1" – schmal steht das Bild oben. */
  .gallery-split--text-first .gallery-single { order: -1; }
}

/* Einzelbild-Slider mit Pfeilen (perPage 1, gap 0, Höhe auto). */
/* Radius wie beim Kachel-Slider: im Original liegt er auf jedem Slider-Element,
   sichtbar wird er hier nicht (durchsichtiger Rahmen ohne Beschnitt). */
.gallery-single { width: 100%; position: relative; border-radius: var(--radius); }
/* Das Original zeigt diese Bilder in ihrer natürlichen Grösse, waagerecht und senkrecht
   mittig im Slide (Einstellungen slideAlignHorizontal/-Vertical: center); nur zu breite
   Bilder werden auf die Spaltenbreite begrenzt. Gemessen: ein 250 px breites Bild steht
   mittig in der 675 px breiten Spalte, ein 1200 px breites füllt sie. */
.gallery-single__slide { display: flex; align-items: center; justify-content: center; }
.gallery-single__slide img { width: auto; max-width: 100%; height: auto; display: block; }

/* Pfeile: Werte aus dem Original (globales Stylesheet des Originals:
   background-color var(--neutral), Radius 0, Breite clamp(1.875rem, 1.2101rem + 2.1277vw,
   3.125rem), weisses Symbol, Hover primary). Höhe wie beim Testimonial-Slider 50 px. */
.gallery-single .splide__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: clamp(1.875rem, 1.2101rem + 2.1277vw, 3.125rem); height: 50px;
  padding: 0; border: 0; border-radius: 0; cursor: pointer;
  font-size: 16px; background-color: var(--neutral); color: var(--white);
  transition: color .3s ease, background-color .3s ease;
}
.gallery-single .splide__arrow:hover { background-color: var(--primary); }
.gallery-single .splide__arrow--prev { left: 0; }
.gallery-single .splide__arrow--next { right: 0; }
.gallery-single .splide__arrow svg { width: 1em; height: 1em; fill: currentColor; }
.gallery-single .splide__arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Ohne JavaScript bewegen die Pfeile nichts – dann bleiben sie aus, und die Bilder stehen
   untereinander statt nebeneinander. */
.gallery-single:not(.is-initialized) .splide__arrows { display: none; }
@media (scripting: none) {
  .gallery-single .splide__track { overflow: visible; }
  .gallery-single .splide__list { flex-wrap: wrap; }
  .gallery-single .splide__slide { width: 100%; }
}

/* ===================== viewer_360 (ACF „360viewer", Bricks 12226) ===================== */
/* Der Container der Vorlage ist 48 rem breit und mittig ausgerichtet („center-all"). */
.viewer-360 { max-width: 48rem; }

/* Die Bilderfolge liegt gestapelt übereinander; sichtbar ist immer nur eines. Das erste Bild
   gibt die Höhe vor (position: relative), alle weiteren liegen absolut darüber. So springt
   beim Drehen nichts, und der Browser lädt die Bilder von selbst vor. */
.v360 {
  position: relative; width: 100%; cursor: grab;
  user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.v360:active { cursor: grabbing; }
.v360:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.v360__frames { position: relative; margin: 0; padding: 0; list-style: none; width: 100%; }
.v360__frame { position: absolute; inset: 0; margin: 0; opacity: 0; }
.v360__frame:first-child { position: relative; opacity: 1; }
.v360.is-ready .v360__frame:first-child { opacity: 0; }
.v360.is-ready .v360__frame.is-active { opacity: 1; }
.v360__frame img { width: 100%; height: auto; display: block; pointer-events: none; }

/* Hinweiszeile 1:1 aus dem Original (13 px, Laufweite 2 px, #555, 60 % Deckkraft, 12 px vom
   unteren Rand); nach der ersten Berührung blendet sie in einer halben Sekunde aus. */
.v360__hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 13px; letter-spacing: 2px; color: #555; opacity: .6;
  pointer-events: none; transition: opacity .5s;
}
.v360.is-used .v360__hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .v360__hint { transition: none; }
}
/* Ohne JavaScript dreht sich nichts – dann stehen alle Einzelbilder untereinander,
   statt dass nur das erste zu sehen ist. */
@media (scripting: none) {
  .v360 { cursor: default; }
  .v360__frame { position: relative; inset: auto; opacity: 1; }
  .v360__hint { display: none; }
}

/* ===================== Lightbox (Entscheidung E-7) ===================== */
/* Eigenes <dialog> statt der Bricks-Lightbox (PhotoSwipe). Der dunkle Grund ist ::backdrop,
   das Bild bleibt innerhalb des Fensters, die drei Schaltflächen liegen darüber. */
.lightbox {
  width: min(92vw, 1600px); max-width: 92vw; max-height: 92vh;
  padding: 0; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--white); overflow: visible;
}
.lightbox::backdrop { background-color: rgba(0, 0, 0, .82); }
.lightbox__figure { margin: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__image {
  display: block; max-width: 100%; max-height: 92vh; width: auto; height: auto;
  border-radius: var(--radius-s); background-color: var(--black);
}
.lightbox__button {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 100vmax;
  background-color: rgba(0, 0, 0, .55); color: var(--white); cursor: pointer;
  transition: background-color .3s ease;
}
.lightbox__button:hover { background-color: var(--primary); }
.lightbox__button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.lightbox__button svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.lightbox__prev { top: 50%; left: .5rem; transform: translateY(-50%); }
.lightbox__next { top: 50%; right: .5rem; transform: translateY(-50%); }
.lightbox__close { top: .5rem; right: .5rem; }
/* Ein einzelnes Bild braucht keine Blätterpfeile – das JavaScript blendet sie dann aus. */
.lightbox[data-single] .lightbox__prev,
.lightbox[data-single] .lightbox__next { display: none; }

/* ==== 92-accordion-table-blocks.css ==== */
/* Phase 2, Task 12 – die drei Baukasten-Sets „Akkordeon und Tabelle":
   accordion_left, accordion_right, table.

   Alle Werte sind am WordPress-Original gemessen (eigener Headless-Chrome über das
   DevTools-Protokoll, 1440 und 600 px), nicht geschätzt. Die <section> mit Abstands- und
   Farbklassen kommt von aussen (partials/content-blocks, CSS in 88-content-blocks.css);
   hier steht nur, was innerhalb des Containers gilt.

   Die Bricks-Haltepunkte des Originals sind 1090 px („Tablet large"), 768 px („Mobile xl")
   und 550 px („Mobile regular");
   diese drei Sets schalten ausschliesslich bei 768 px um.

   Herkunft der Akkordeon-Optik: das Original benutzt den Xpro-Akkordeon-Baustein
   (.x-accordion_*) und färbt ihn im Seiten-CSS (WPCodeBox) um. Das Pluszeichen links (bzw.
   rechts, wenn ein Icon vorhanden ist) sind zwei Pseudo-Elemente am Titel; das Pfeil-Icon des
   Bausteins ist dort per „display: none" abgeschaltet und fehlt bei uns ganz. */

/* ============================================================ Akkordeon-Sets: Raster */
/* 1440 px gemessen: Container 1380 px, Spalten 810 / 540 px bei 30 px Abstand (accordion_left)
   bzw. 540 / 810 px (accordion_right). Ab 768 px eine Spalte, das Bild oben. */
.block--accordion_left, .block--accordion_right { overflow: hidden; }

.container.cb-accordion {
  display: grid;
  gap: var(--grid-gap);
  align-items: initial;
}
.cb-accordion--left { grid-template-columns: var(--grid-3-2); }
.cb-accordion--right { grid-template-columns: var(--grid-2-3); }
/* Im Quelltext steht bei beiden Sets die Textspalte zuerst; bei accordion_right zieht das
   Original die Bildspalte per order nach links (so auch im Original). */
.cb-accordion--right .cb-accordion__media { order: -1; }

.cb-accordion__body {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  row-gap: var(--content-gap);
}
/* Bildspalte: 18,75rem Mindesthöhe (300 px), abgerundet und beschnitten – auch dann, wenn
   kein Bild gepflegt ist (24 von 74 Blöcken; das Original lässt die Spalte ebenfalls stehen). */
.cb-accordion__media {
  position: relative; min-height: 18.75rem;
  border-radius: var(--radius); overflow: hidden;
}
.cb-accordion__figure { width: 100%; border-radius: var(--radius); overflow: hidden; }
/* Das Original zwingt das Bild ins Quadrat und beschneidet es; „Bild vollständig zeigen"
   (ACF show_full_image) tauscht nur object-fit, das Quadrat bleibt. */
.cb-accordion__media img {
  width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: var(--radius);
}
.cb-accordion__media--full img { object-fit: contain; }

/* Schmückende Wellen hinter der Textspalte (Original: globale Klasse .rotate-center-waves auf
   einer <figure>, die per left: 50% halb so breit wird wie die Spalte; das Bild darin wird auf
   140 % der Spaltenhöhe gestreckt. Bei uns steht die Klasse direkt auf dem <img>).
   Gemessen bei 1440 px: 405 × 756 px, gedreht um 115°, Deckkraft 0,3. */
.cb-accordion__waves {
  position: absolute; top: 50%; left: 50%; width: 50%; height: 140%;
  opacity: .3; z-index: -1; pointer-events: none;
  transform: translateX(-50%) translateY(-65%) rotateZ(115deg);
}

@media (max-width: 768px) {
  .cb-accordion--left, .cb-accordion--right { grid-template-columns: var(--grid-1); }
  .cb-accordion--left .cb-accordion__media { order: -1; }
}

/* ============================================================ Akkordeon selbst */
/* Das Original setzt den Akkordeon-Rahmen als Raster mit automatisch passender Spaltenzahl
   (Theme-Stil) und 0,3em Abstand (Seiten-CSS). In beiden Sets bleibt es bei einer Spalte:
   die Mindestbreite ist bei 1440 px 600 px, die Spalte aber nur 810 px breit. */
.accordion {
  display: grid; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(clamp(18.75rem, 12.2596rem + 28.8462vw, 37.5rem), 1fr));
  gap: .3em;
}
.accordion__item { display: flex; flex-direction: column; align-items: stretch; }
/* Die <h3> ist nur Hülle (im Original .x-accordion_heading-wrapper); ihre Schriftgrösse spielt
   keine Rolle, weil die Schaltfläche darin ihre eigene setzt. Die Zeilenhöhe 1.2 erbt sie
   dagegen von der Überschrift – genau wie im Original. */
.accordion__heading { margin: 0; }

/* Kopfzeile: im Original ein <div role="button">, bei uns ein echter <button> (E-3).
   Gemessen bei 1440 px: 64 px hoch, 15 px Polster, 1 px Rahmen, Radius 10,67 px, weiss,
   Schriftgrösse --text-m in Halbfett (500), 16 px Abstand zwischen Icon und Titel. */
.accordion__trigger {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap;
  gap: 1rem; width: 100%; margin: 0; padding: 15px;
  font: inherit; font-size: var(--text-m); font-weight: 500; text-align: left;
  color: inherit; background-color: var(--white);
  border: var(--border-size) solid var(--border-color-dark);
  border-radius: var(--radius-s);
  position: relative; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: all .15s ease;
}
.accordion__trigger:hover { background-color: var(--neutral-light-trans-20); }
.accordion__trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Offener Zustand: die Kopfzeile wächst optisch mit dem Feld darunter zusammen. */
.accordion__trigger[aria-expanded="true"] {
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  border-bottom-color: transparent;
}

/* Titel mit dem Pluszeichen aus zwei Pseudo-Elementen (Original: --size: 1rem, Balkenstärke
   das Doppelte von --border-size, Farbe --secondary). Beim Öffnen dreht der senkrechte Balken
   weg und wird unsichtbar – übrig bleibt der Strich eines Minuszeichens. */
.accordion__title {
  --size: 1rem;
  position: relative; display: flex; align-items: center;
  width: 100%; height: 2em; padding-top: .2em; padding-left: 2rem;
}
.accordion__title::before, .accordion__title::after {
  content: ""; display: block; position: absolute; top: 50%; left: 0;
  width: var(--size); height: calc(var(--border-size) * 2);
  background-color: var(--secondary);
  transform: translateY(-50%); transform-origin: center;
  transition: all .3s ease;
}
.accordion__title::after {
  width: calc(var(--border-size) * 2); height: var(--size);
  left: calc(var(--size) / 2);
  transform: translateX(-50%) translateY(-50%);
}
.accordion__trigger[aria-expanded="true"] .accordion__title::after {
  transform: translateY(-50%) rotate(90deg); opacity: 0;
}

/* Mit Icon wandert das Pluszeichen an das rechte Ende und der Titel verliert sein Polster. */
.accordion__item:has(.accordion__icon) .accordion__title { padding-left: 0; }
.accordion__item:has(.accordion__icon) .accordion__title::before,
.accordion__item:has(.accordion__icon) .accordion__title::after { left: auto; right: 0; }
.accordion__item:has(.accordion__icon) .accordion__title::after { right: calc(var(--size) / 2 - 1px); }

/* Icon: runder Fleck in der Blockfarbe (--schemecolor-medium aus 88-content-blocks.css),
   1,8em hoch; das Bild darin sitzt auf 60 % verkleinert in der Mitte. */
.accordion__icon {
  height: 1.8em;
  background-color: var(--schemecolor-medium); border-radius: 100vmax;
}
/* Kein „flex: none": im Original darf der Fleck schrumpfen und wird von der Titelspalte um
   1,6 px zusammengedrückt (gemessen 27,20 statt 28,80 px bei 1440). */
.accordion__icon img { height: 100%; width: auto; border-radius: inherit; transform: scale(.6); transform-origin: center; }

/* Inhaltsfeld: 15 px Polster, weiss, Rahmen ohne Oberkante, unten abgerundet. */
.accordion__panel { overflow: hidden; }
.accordion__text {
  width: 100%; padding: 15px;
  background-color: var(--white);
  border: var(--border-size) solid var(--border-color-dark);
  border-top-color: transparent;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
}
/* Im Original ist der Feldinhalt ein .brxe-text-basic und bekommt NICHT die Abstandsregeln
   des Fliesstextes (.cb-text): zwei Absätze stehen dort ohne Zwischenraum, Listen ohne
   Aussenabstand. Gemessen an /en/applications/…/environmental-monitoring: Abstand 0 px.
   Das erledigt seit der Konsolidierung der globale Nullabstand aus 10-base.css; „ul + p"
   steht dort ebenfalls global. Nur die Aufzählung mit Nummern braucht hier noch eine Zeile. */
.accordion__text ol + p { margin-top: 1em; }

/* Ohne JavaScript sind alle Felder offen statt alle unerreichbar (E-3). */
@media (scripting: none) {
  .accordion__panel[hidden] { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .accordion__trigger,
  .accordion__title::before, .accordion__title::after { transition: none; }
}

/* ============================================================ table (table_with_heading, 3599) */
/* Der Container ist die schlichte Textspalte. „align-items: flex-start" ist die Grundstellung
   der Bricks-Blöcke: Überschriften und Absätze werden dadurch nur so breit wie ihr Text
   (gemessen bei 1440 px: h2 356,63 statt 1380 px). Unter 768 px legt das Original ein
   zusätzliches seitliches Polster in Gutterbreite darüber (Inhalt beginnt bei 37,5 statt
   18,75 px). */
.cb-table { align-items: flex-start; }
@media (max-width: 768px) { .cb-table { padding-inline: var(--gutter); } }

/* Umschlag: waagerecht scrollbar, 1em Polster oben und unten, hellgraue Fläche
   (Original: .brxe-code:has(table) mit --neutral-light-trans-20). tabindex und role kommen
   aus dem Partial, damit sich der Bereich auch per Tastatur verschieben lässt. */
.cb-table__scroll {
  width: 100%; overflow-x: auto; padding-block: 1em;
  background-color: var(--neutral-light-trans-20);
}
.cb-table__scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.cb-table__table {
  border-collapse: collapse; table-layout: auto; width: auto; margin-inline: auto;
  border-right: var(--border-size) solid var(--border-color-dark);
}
.cb-table__table td, .cb-table__table th {
  padding: 1em .7em; vertical-align: bottom; line-height: 1.2; text-align: left;
  min-width: clamp(5rem, -4.375rem + 30vw, 12.5rem); max-width: 8rem;
  hyphens: auto; -webkit-hyphens: auto;
  background-color: var(--white);
  border-bottom: var(--border-size) solid var(--border-color-dark);
  border-right: var(--border-size) solid var(--border-color-dark);
}
.cb-table__table td:last-child, .cb-table__table th:last-child { border-right: none; }
/* Kopfzeile hell hinterlegt; im Original sind das ebenfalls <th>, also bleibt die Fettschrift. */
.cb-table__table thead th { background-color: var(--primary-light); }
/* Die erste Spalte ist im Original ein <td> – unsere <th scope="row"> bekommen deshalb die
   normale Schriftstärke zurück, sonst stünden sie fett. */
.cb-table__table tbody th { font-weight: inherit; }
/* Zebrastreifen auf den geraden Datenzeilen. */
.cb-table__table tbody tr:nth-child(even) th,
.cb-table__table tbody tr:nth-child(even) td { background-color: var(--secondary-ultra-light); }
/* Hervorgehobene erste Spalte (ACF twh_first_column): eingefärbt und beim seitlichen Scrollen
   stehenbleibend. Die Selektoren nennen ausdrücklich tbody tr, damit sie – wie im Original –
   die Zebrastreifen-Regel schlagen. */
.cb-table__table--first-column thead th:first-child,
.cb-table__table--first-column tbody tr th:first-child,
.cb-table__table--first-column tbody tr td:first-child {
  background-color: var(--primary-light); position: sticky; left: 0;
}
/* Zeile unter dem Zeiger. Das !important stammt aus dem Original und ist nötig, weil die
   Regel für die erste Spalte die höhere Spezifität hat. */
.cb-table__table tbody tr:hover th,
.cb-table__table tbody tr:hover td { background-color: var(--primary) !important; color: var(--white); }
.cb-table__table tbody tr:hover a:hover { color: var(--white); }

/* ==== 93-embed-blocks.css ==== */
/* Phase 2, Task 13 – die vier Baukasten-Sets „Einbettungen":
   embed (ACF embed, Bricks 3606)              · video_left_text (vile_teri, 3615)
   video_right_text (vire_teli, 3614)          · audio_samples (audio_samples, 5848)

   Alle Werte sind am Original abgelesen (Bricks-Vorlagen, globale Klasse „embed-iframe"
   aus opt-bricks_global_classes, Bricks-Grundregeln aus frontend-light-layer.min.css) und
   mit eigenem Headless-Chrome bei 1440 und 600 px nachgemessen. Die <section> mit
   Abstands- und Farbklassen kommt von aussen (partials/content-blocks, CSS in
   88-content-blocks.css); hier steht nur, was innerhalb des Containers gilt.

   Die Bricks-Haltepunkte des Originals sind 1090 px („Tablet large"), 768 px („Mobile xl")
   und 550 px („Mobile regular").

   Wichtig zum Original: Die drei Einbettungs-Sets erzeugen ihren iframe in einem
   Bricks-„code"-Element. In der lokalen WordPress-Kopie stimmt dessen Signatur nicht mehr,
   deshalb rendert das Original dort gar keinen iframe. Die Masse stammen aus der Vorlage
   selbst (.embed-iframe iframe { width: 100%; aspect-ratio: 16/9 } auf einem
   .brxe-code { width: 100% }) und wurden mit nachgetragenem Markup gegengemessen. */

/* ============================================================ Rahmen der Einbettung */
/* Im Original die globale Klasse „embed-iframe": abgerundet, beschnitten, der iframe darin
   100 % breit im Seitenverhältnis 16:9. Das Seitenverhältnis steht bei uns am Rahmen
   selbst – so hat die Platzhalterfläche vor der Einwilligung exakt dieselbe Fläche wie
   der iframe danach (Entscheidung E-6). */
.cb-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}
.cb-embed__frame > iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}

/* Fremd-Einbettungen, die im Fliesstext stehen (Befund O-1): dieselbe Hülle, aber sie sitzt
   nicht in einem Set, sondern zwischen Absätzen. Sie darf ihren Textblock nie überschreiten
   und bekommt dessen Absatzabstand (.cb-text > * + * greift, weil die Hülle ein direktes
   Kind ist).

   Bewusste Abweichung, am Original nachgemessen (/de/…/nachhallzeit, 1440 px): dort tragen
   diese iframes keine Breitenangabe und stehen im Browser-Standard 300 × 150; die Fläche,
   die Complianz davor legt, ist 592,89 × 333,56 – ein Nebeneffekt ihres eigenen
   display:flex am <p> (iframe und Text stehen dort nebeneinander), keine gesetzte Grösse.
   Bei uns ist die Fläche wie bei jeder anderen Einbettung 16:9, so breit wie der Textblock
   (in DE 292,89 × 164,75) – vor und nach der Einwilligung dieselbe Fläche. */
.cb-embed__frame--inline { max-width: 100%; }
/* Im schmalen Fliesstext ist wenig Platz: die Knöpfe des Platzhalters dürfen umbrechen,
   der Hinweis bleibt lesbar. */
.cb-embed__frame--inline .cb-embed__notice { padding: var(--space-s); gap: var(--space-xs); }

/* Platzhalter: dieselbe dunkle Fläche wie beim Hintergrundvideo der Startseite
   (82-hero.css: .hero__video:empty { background-color: var(--neutral) }). */
.cb-embed__notice {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-s);
  padding: var(--space-m);
  text-align: center;
  background-color: var(--neutral);
  color: var(--white);
}
.cb-embed__notice p { margin: 0; max-width: 60ch; }
.cb-embed__notice-source { font-weight: 700; }
.cb-embed__notice-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-s); }
/* Der zweite Knopf öffnet die Einwilligungs-Einstellungen und sieht aus wie ein Textlink. */
.cb-embed__settings {
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline;   /* Abstand `auto` wie im Original, Befund F-2 */
}
.cb-embed__settings:hover { color: var(--primary-light); }
.cb-embed__notice :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
/* Ohne JavaScript kann niemand nachladen; dann bleibt der Hinweis stehen, aber die beiden
   Knöpfe verschwinden – sie täten nichts. */
@media (scripting: none) { .cb-embed__notice-actions { display: none; } }

/* ============================================================ embed (3606) */
/* Container, darin Überschrift, Rahmen und ein halb so breiter Textblock. Der Bricks-
   Container richtet seine Kinder links aus (align-items: flex-start), unser .container
   dehnt sie – deshalb hier zurückgestellt: sonst wäre die Überschrift „Intégrer" auf der
   Demoseite 625 statt 147 px breit (gemessen). Der Rahmen bekommt seine Breite dafür
   ausdrücklich (im Original über .brxe-code { width: 100% }). */
.container.cb-embed { align-items: flex-start; }

/* Die Breite calc(var(--content-width) / 2) steht so in der Bricks-Vorlage; .brxe-block
   bringt Flexspalte und align-items: flex-start mit. */
.cb-embed__body {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  width: calc(var(--content-width) / 2); max-width: 100%;
}

/* ============================================================ Video links / rechts (3615, 3614) */
/* Zweispaltiges Raster mit --grid-gap. Bei „Video links" zieht order: -1 die Videospalte
   auf allen Breiten nach links (im Quelltext steht sie hinter dem Text); bei „Video rechts"
   erst unterhalb von 1090 px, wo aus zwei Spalten eine wird und das Video nach oben rückt. */
.video-text { display: grid; grid-template-columns: var(--grid-2); gap: var(--grid-gap); }
.video-text--video-left .video-text__media { order: -1; }
.video-text__body {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
}
/* Ohne Blocküberschrift beginnt die Textspalte im Original trotzdem einen Zeilenabstand
   tiefer: die Vorlagen 3615 (Element 0609eb) und 3614 (09d823) hängen an ihr
   Überschrift-Element keine Bedingung, bei leerem ACF-Feld steht dort also ein leeres
   <h2></h2>. Es ist 0 px hoch, bleibt aber ein Flex-Kind der Textspalte und erzeugt deren
   row-gap (--content-gap). Wir schreiben kein leeres <h2>; den Abstand trägt stattdessen
   das erste Kind, wenn es nicht die Überschrift ist. Betrifft 3 von 31 Blöcken
   (remote-measurement-option EN/DE/FR); gemessen an /en/options/remote-measurement-option:
   die Textspalte war 30,00 px (1440) bzw. 18,75 px (600) zu niedrig, danach 0,00. */
.video-text__body > :first-child:not(h2) { margin-block-start: var(--content-gap); }
.video-text__media { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 1090px) {
  .video-text { grid-template-columns: var(--grid-1); }
  .video-text--video-right .video-text__media { order: -1; }
}

/* ============================================================ audio_samples (5848) */
/* Überschrift, darunter links Text und rechts die Liste der Hörbeispiele. Dieselbe
   Rasterfolge wie bei two_columns (89-text-blocks.css) – sie stammt aus derselben
   Bricks-Einstellung. Wie beim Set „embed" richtet der Bricks-Container seine Kinder links
   aus; der Rasterabstand ist der Block-Standard --content-gap (30 px bei 1440, 18,75 px
   bei 600 – am Original gemessen, die Vorlage stellt ihn nicht eigens ein). */
.container.cb-audio { align-items: flex-start; }
.cb-audio__grid { display: grid; width: 100%; grid-template-columns: var(--grid-2); gap: var(--content-gap); }
.cb-audio__text, .cb-audio__side {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
}
/* Die Liste behält den voreingestellten Einzug des Browsers (40 px), wie im Original –
   dort ist die <ul> ein Bricks-Block ohne eigenes Polster. Punkte zeigt sie keine, weil
   die Einträge Flex-Elemente sind. */
.cb-audio__list {
  display: flex; flex-direction: column; row-gap: var(--content-gap);
  width: 100%; margin: 0; list-style: none;
}
/* Das Textelement füllt seine Spalte, wie der Bricks-„text“ im Original (dort 675 px bei
   1440). Ohne die Breite schrumpfte es durch align-items: flex-start auf seinen Inhalt. */
.cb-audio__text > .cb-text { width: 100%; }
.cb-audio__item { display: flex; flex-direction: column; row-gap: var(--space-xs); }
.cb-audio__label { margin: 0; font-weight: 700; }
/* Der eingebaute Abspieler statt des Fremd-Players des Originals: volle Breite der Spalte,
   dieselbe Rundung wie die übrigen Kästen. Die Höhe ist im Original 74 px (Vidstack); die
   Standardhöhe des eingebauten Abspielers ist 54 px. Ohne die feste Höhe wäre jeder Block
   20 px flacher – bei 1090 px und darunter sogar 40 px, weil die Spalte dort zwei gleich
   hohe Rasterzeilen füllt (gemessen an /en/support/know-how/haas-effect). */
.cb-audio__player { width: 100%; height: 74px; border-radius: var(--radius-s); }
@media (max-width: 1090px) {
  /* --grid-2-1, dazu zwei gleich hohe Zeilen; die Textspalte reicht über beide. */
  .cb-audio__grid { grid-template-columns: var(--grid-2-1); grid-template-rows: var(--grid-2); }
  .cb-audio__text { grid-row: 1 / 3; }
}
@media (max-width: 768px) {
  /* --grid-3-2 */
  .cb-audio__grid { grid-template-columns: var(--grid-3-2); }
}
@media (max-width: 550px) {
  .cb-audio__grid { grid-template-columns: var(--grid-1); grid-template-rows: auto; }
}

/* ==== 94-download-ad-blocks.css ==== */
/* Phase 2, Task 14 – die drei Baukasten-Sets „Downloads und Werbebanner":
   download_list, internal_ad, external_ad.

   Alle Werte sind am WordPress-Original gemessen (eigener Headless-Chrome über das
   DevTools-Protokoll, 1440 und 600 px) bzw. aus den Bricks-Vorlagen 3618/3626/5716 gelesen;
   nichts ist geschätzt. Die <section> mit Abstands- und Farbklassen kommt von aussen
   (partials/content-blocks, Grundlage in 88-content-blocks.css); hier steht nur, was diese
   drei Sets betrifft.

   Die Bricks-Haltepunkte des Originals sind 1090 px („Tablet large"/mobile_landscape),
   768 px („Mobile xl"/mobile_portrait) und 550 px („Mobile regular"/mobile_regular). */

/* ============================================================ download_list (3618) */
/* Der Abschnitt hat im Original kein seitliches Polster: die Vorlage setzt auf der <section>
   padding-inline: 0, der hellblaue Kasten reicht dadurch bis an den Fensterrand
   (gemessen 1440 px breit bei 1440 px Fenster, nicht 1380 px wie sonst). */
.block--download_list { padding-inline: 0; }

.cb-downloads {
  align-items: flex-start;
  padding: var(--space-l);
  background-color: var(--primary-ultra-light);
  border-radius: var(--radius);
}
/* mobile_portrait: seitlich nur noch --gutter (gemessen 18,75 px bei 600 px). */
@media (max-width: 768px) { .cb-downloads { padding-inline: var(--gutter); } }

/* Liste und Zeilen sind im Original Bricks-Blöcke mit tag=ul/li: Flexspalten über die volle
   Breite, Abstand --content-gap (gemessen 30 px bei 1440, 18,75 px bei 600), ohne Aufzählungs-
   zeichen und ohne Einzug. */
.cb-downloads__list {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  width: 100%; margin: 0; padding: 0; list-style: none;
}
.cb-downloads__item {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  width: 100%; margin: 0;
}

/* Dateityp und Grösse hinter dem Titel. Die Klasse und die Schriftgrösse stammen aus der
   Vorlage 3618 (#brxe-fa4c6e .file-meta { font-size: .8em }); das Original hat sie angelegt,
   aber nie gefüllt – siehe Kommentar im Partial. */
.cb-downloads__item .file-meta { font-size: .8em; white-space: nowrap; }

/* ---------- Linkicons (im Original globale Klassen des Seiten-CSS) ---------- */
/* .download-link und die .filetype-*-Masken gelten im Original für die ganze Seite. Benutzt
   werden sie nur von diesem Set und vom Download-Abschnitt der Produkt- und Anwendungsseiten
   (partials/download-term) – beides Phase 2, deshalb bleiben sie bei der Konsolidierung hier
   und wandern erst dann in eine Phase-0-Datei, wenn eine spätere Phase sie ebenfalls braucht.
   Von den elf Symbolen des Originals sind nur die drei übernommen, die im Datenbestand
   vorkommen: allgemein, PDF (543 Dateien) und ZIP (43) – andere Endungen gibt es nicht. */
.download-link { position: relative; padding-left: var(--space-m); }
.download-link::before {
  content: "";
  position: absolute;
  left: 0;
  width: calc(var(--space-m) * 0.9);
  height: 1.4em;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.download-link:not([class*="filetype-"])::before {
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTEuNjg4IDMuMDYzYTMuNSAzLjUgMCAwIDEgMS4wMjcuNzEybDUuOTY4IDUuOTdjLjMuMy41NC42NDcuNzExIDEuMDI2bS03LjcwNi03LjcwOGEzLjUgMy41IDAgMCAwLTEuNDQ4LS4zMTNINy43OTJhMy41IDMuNSAwIDAgMC0zLjUgMy41djExLjVhMy41IDMuNSAwIDAgMCAzLjUgMy41aDguNDE2YTMuNSAzLjUgMCAwIDAgMy41LTMuNXYtNS41M2MwLS41MDUtLjEwOS0uOTk5LS4zMTQtMS40NW0tNy43MDYtNy43MDdWOC43N2EyIDIgMCAwIDAgMiAyaDUuNzA2Ii8+PC9zdmc+");
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTEuNjg4IDMuMDYzYTMuNSAzLjUgMCAwIDEgMS4wMjcuNzEybDUuOTY4IDUuOTdjLjMuMy41NC42NDcuNzExIDEuMDI2bS03LjcwNi03LjcwOGEzLjUgMy41IDAgMCAwLTEuNDQ4LS4zMTNINy43OTJhMy41IDMuNSAwIDAgMC0zLjUgMy41djExLjVhMy41IDMuNSAwIDAgMCAzLjUgMy41aDguNDE2YTMuNSAzLjUgMCAwIDAgMy41LTMuNXYtNS41M2MwLS41MDUtLjEwOS0uOTk5LS4zMTQtMS40NW0tNy43MDYtNy43MDdWOC43N2EyIDIgMCAwIDAgMiAyaDUuNzA2Ii8+PC9zdmc+");
}
.filetype-pdf::before {
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMDAwMDAiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTcuNzkyIDIxLjI1aDguNDE2YTMuNSAzLjUgMCAwIDAgMy41LTMuNXYtNS41M2EzLjUgMy41IDAgMCAwLTEuMDI0LTIuNDc1bC01Ljk2OS01Ljk3QTMuNSAzLjUgMCAwIDAgMTAuMjQgMi43NUg3Ljc5MmEzLjUgMy41IDAgMCAwLTMuNSAzLjV2MTEuNWEzLjUgMy41IDAgMCAwIDMuNSAzLjUiLz48cGF0aCBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTExLjY4OCAzLjExdjUuNjZhMiAyIDAgMCAwIDIgMmg1LjY2MiIvPjxwYXRoIGQ9Ik03LjI1IDE2LjV2LTFtMCAwdi0yaDFhMSAxIDAgMCAxIDEgMXYwYTEgMSAwIDAgMS0xIDF6bTQgMXYtM2guNWExLjUgMS41IDAgMCAxIDAgM3ptNCAwdi0xLjI1bTEuNS0xLjc1aC0xLjV2MS43NW0wIDBoMS41Ii8+PC9nPjwvc3ZnPg==");
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMDAwMDAiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTcuNzkyIDIxLjI1aDguNDE2YTMuNSAzLjUgMCAwIDAgMy41LTMuNXYtNS41M2EzLjUgMy41IDAgMCAwLTEuMDI0LTIuNDc1bC01Ljk2OS01Ljk3QTMuNSAzLjUgMCAwIDAgMTAuMjQgMi43NUg3Ljc5MmEzLjUgMy41IDAgMCAwLTMuNSAzLjV2MTEuNWEzLjUgMy41IDAgMCAwIDMuNSAzLjUiLz48cGF0aCBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTExLjY4OCAzLjExdjUuNjZhMiAyIDAgMCAwIDIgMmg1LjY2MiIvPjxwYXRoIGQ9Ik03LjI1IDE2LjV2LTFtMCAwdi0yaDFhMSAxIDAgMCAxIDEgMXYwYTEgMSAwIDAgMS0xIDF6bTQgMXYtM2guNWExLjUgMS41IDAgMCAxIDAgM3ptNCAwdi0xLjI1bTEuNS0xLjc1aC0xLjV2MS43NW0wIDBoMS41Ii8+PC9nPjwvc3ZnPg==");
}
.filetype-zip::before, .filetype-rar::before, .filetype-7z::before, .filetype-tar::before, .filetype-gz::before {
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Im0xMiAxMmw4LjA3My00LjYyNU0xMiAxMnY5LjI1TTEyIDEyTDcuOTYzIDkuNjg4bTEyLjExLTIuMzEzYTMuMTcgMy4xNyAwIDAgMC0xLjE2NS0xLjE1NkwxNi4yNSA0LjY5Nm0zLjgyMyAyLjY3OWMuMjc1LjQ3Mi40MjcgMS4wMTUuNDI3IDEuNTh2Ni4wOWEzLjE1IDMuMTUgMCAwIDEtMS41OTIgMi43MzZsLTUuMzE2IDMuMDQ2QTMuMiAzLjIgMCAwIDEgMTIgMjEuMjVNMy45MjYgNy4zNzVhMy4xNCAzLjE0IDAgMCAwLS40MjYgMS41OHY2LjA5YzAgMS4xMy42MDcgMi4xNzIgMS41OTIgMi43MzZsNS4zMTYgMy4wNDZBMy4yIDMuMiAwIDAgMCAxMiAyMS4yNU0zLjkyNiA3LjM3NWEzLjE3IDMuMTcgMCAwIDEgMS4xNjYtMS4xNTZsNS4zMTYtMy4wNDZhMy4yIDMuMiAwIDAgMSAzLjE4NCAwbDIuNjU4IDEuNTIzTTMuOTI2IDcuMzc1bDQuMDM3IDIuMzEzbTAgMGw4LjI4Ny00Ljk5MiIvPjwvc3ZnPg==");
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Im0xMiAxMmw4LjA3My00LjYyNU0xMiAxMnY5LjI1TTEyIDEyTDcuOTYzIDkuNjg4bTEyLjExLTIuMzEzYTMuMTcgMy4xNyAwIDAgMC0xLjE2NS0xLjE1NkwxNi4yNSA0LjY5Nm0zLjgyMyAyLjY3OWMuMjc1LjQ3Mi40MjcgMS4wMTUuNDI3IDEuNTh2Ni4wOWEzLjE1IDMuMTUgMCAwIDEtMS41OTIgMi43MzZsLTUuMzE2IDMuMDQ2QTMuMiAzLjIgMCAwIDEgMTIgMjEuMjVNMy45MjYgNy4zNzVhMy4xNCAzLjE0IDAgMCAwLS40MjYgMS41OHY2LjA5YzAgMS4xMy42MDcgMi4xNzIgMS41OTIgMi43MzZsNS4zMTYgMy4wNDZBMy4yIDMuMiAwIDAgMCAxMiAyMS4yNU0zLjkyNiA3LjM3NWEzLjE3IDMuMTcgMCAwIDEgMS4xNjYtMS4xNTZsNS4zMTYtMy4wNDZhMy4yIDMuMiAwIDAgMSAzLjE4NCAwbDIuNjU4IDEuNTIzTTMuOTI2IDcuMzc1bDQuMDM3IDIuMzEzbTAgMGw4LjI4Ny00Ljk5MiIvPjwvc3ZnPg==");
}

/* ============================================================ internal_ad / external_ad (3626, 5716) */
/* Umgekehrte Abstandslogik: die beiden Sets arbeiten im Original nicht mit padding, sondern mit
   margin, und der ACF-Schalter bedeutet „Abstand vorhanden". partials/content-blocks vergibt
   block--flush-top/-bottom deshalb genau dann, wenn der Schalter AUS ist.
   Gemessen: Abschnitt mit mato="ja" hat margin-block 120 px bei 1440 und 69,375 px bei 600
   (--section-space-m), padding-block immer 0; ein Abschnitt ohne die Attribute hat beides 0. */
.block--internal_ad,
.block--external_ad { padding-block: 0; overflow: hidden; }
.block--internal_ad:not(.block--flush-top),
.block--external_ad:not(.block--flush-top) { margin-top: var(--section-space-m); }
.block--internal_ad:not(.block--flush-bottom),
.block--external_ad:not(.block--flush-bottom) { margin-bottom: var(--section-space-m); }

/* Der dunkle Kasten. Das Deckbild liegt per .image-cover (80-utilities.css) absolut darin;
   die dortige Regel „*:has(> .image-cover)" gibt ihm position, z-index und overflow: hidden,
   der Radius schneidet das Bild ab. Der Inhalt sitzt unten (justify-content: flex-end), das
   grosse Polster oben lässt das Bild wirken. */
.cb-ad {
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--section-space-xl) var(--space-xxl) var(--space-xxl);
  background-color: var(--primary-dark);
  color: var(--white);
  border-radius: var(--radius);
}
/* mobile_landscape / mobile_portrait / mobile_regular aus der Vorlage
   (--section-space-xxl gemessen 194,51 px bei 600 px). */
@media (max-width: 1090px) { .cb-ad { padding-inline: var(--space-m); } }
@media (max-width: 768px) {
  .cb-ad {
    padding-top: var(--section-space-xxl);
    padding-bottom: var(--space-m);
  }
}
@media (max-width: 550px) {
  .cb-ad { padding-top: calc(var(--section-space-xxl) * 1.5); }
}

/* Die halbdurchsichtige Textbox: 50rem breit, dahinter wird das Bild weichgezeichnet. */
.cb-ad__box {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  width: 50rem; max-width: 100%;
  padding: var(--space-m);
  background-color: var(--neutral-ultra-dark-trans-80);
  border: var(--border-size) solid var(--border-color-light);
  border-radius: var(--radius);
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
}
/* Die Überschrift ist im Original ausdrücklich weiss gesetzt (sonst gewönne --heading-color). */
.cb-ad__box h2 { color: var(--white); }
/* Auch hier hängt an der Überschrift keine Bedingung (Vorlage 3626 Element baac95, 5716
   d986eb): ohne gepflegten Titel steht im Original ein leeres <h2></h2> in der Textbox,
   0 px hoch, aber ein Flex-Kind – der row-gap der Box (--content-gap) bleibt. Wir schreiben
   kein leeres <h2> und geben den Abstand dem ersten Kind, wenn es nicht die Überschrift ist.
   Betrifft je 2 von 5 Blöcken (alle-bloecke DE, tous-les-blocs FR); dort gemessen: die Box
   war 30,00 px (1440) bzw. 18,75 px (600) zu niedrig, danach 0,00. */
.cb-ad__box > :first-child:not(h2) { margin-block-start: var(--content-gap); }

/* ==== 95-supporting-faqs.css ==== */
/* Phase 2, Task 19 – Kind-Typ-Archive (supporting/index), FAQ-Übersicht (faqs/index) und
   FAQ-Einzelseite (faqs/show).

   Für diese drei Seiten gibt es im Original keine Vorlage, die man abmessen könnte:
   - Die drei Kind-Typ-Archive zeigen dort EINE ungegliederte Liste mit einem Auswahlfeld
     darüber (WP Grid Builder, Facette 9 „Select Post"); die Kachel selbst ist dieselbe wie auf
     den Produkt-Unterseiten und wird hier unverändert weiterverwendet (99-archives.css).
     Neu ist nur die Gliederung nach Produktgruppe (Entscheidung E-5).
   - /en/faqs zeigt dort das Support-Archiv „Know How and Webinars" (Befund D-5).
   - Die FAQ-Einzelseite hat gar kein Template (Befund D-5).

   Deshalb steht hier nur, was diese Gliederung braucht. Alles andere kommt aus den bereits
   gemessenen Dateien: Kopfbereich und Sprungmarken-Leiste aus 88-content-blocks.css, Kacheln
   aus 99-archives.css, Akkordeon aus 92-accordion-table-blocks.css, Fliesstext aus
   89-text-blocks.css. */

/* ---------- Gruppenüberschriften ---------- */
/* Die Gruppen liegen als <h2> + Liste nebeneinander im selben .container (Flex-Spalte mit
   --content-gap). Zwischen zwei Gruppen braucht es mehr Luft als zwischen Überschrift und
   ihrer Liste, sonst rutscht die Überschrift optisch an die Liste darüber. */
.archive-group__heading { margin: 0; }
.section--archive .container > .archive-group__heading + * { margin-top: calc(var(--space-s) - var(--content-gap)); }
.section--archive .container > * + .archive-group__heading { margin-top: var(--space-l); }

/* Die Kachelüberschrift ist auf dem Archiv ein <h3> statt des <h2> der Produkt-Unterseite
   (über jeder Gruppe steht schon ein <h2>). Damit sie trotzdem genauso bricht wie im Original,
   bekommt sie hier die Breitengrenze, die 10-base.css allen <h2> gibt (--h2-max-width, 25ch;
   ohne diese Zeile ist sie bei 1440 px 23,27 px breiter als im Original). */
.section--archive .bits-full-list__heading { max-width: var(--h2-max-width); }

/* ---------- Sprungmarken-Leiste ---------- */
/* Dieselbe Leiste wie das Inhaltsverzeichnis der Produktseiten (.toc). Sie liegt ab 901 px
   absolut auf der Kante zwischen Kopfbereich und Liste; darunter (ein Block im Fluss) fehlt
   sonst der Abstand zur ersten Gruppenüberschrift.
   Die Regel gilt nur für die Leiste der Archivseiten (die Sektion direkt davor): ungebunden
   traf sie auch das Inhaltsverzeichnis der Produkt- und Anwendungsseiten und machte deren
   Verzeichnis-Sektion unter 901 px 18,75 px zu hoch (im Original hat sie dort oben und unten
   den Abstand 0 – gemessen an /en/applications/room-building-acoustics/room-acoustics bei
   600 px, Task 17). */
@media (max-width: 900px) { .section--toc:has(+ .section--archive) { padding-bottom: var(--space-m); } }

/* ---------- FAQ-Übersicht ---------- */
/* Das Akkordeon der Sets ist ein Raster mit automatisch passender Spaltenzahl (Mindestbreite
   bis 37,5 rem). Auf der vollen Seitenbreite entstünden daraus zwei Spalten; die Fragen sollen
   wie im FAQ-Abschnitt der Produktseite untereinander stehen. */
.section--faq-index .accordion { grid-template-columns: minmax(0, 1fr); }

/* Link auf die Einzelseite unter der Antwort – dezent, aber sichtbar. */
.faq-permalink { margin: var(--space-s) 0 0; }
.faq-permalink a { color: var(--secondary); }

/* ---------- FAQ-Einzelseite ---------- */
/* Der Antworttext ist im Original der einzige Inhalt und läuft über die volle Fensterbreite.
   Bei uns steht er im Container; die Lesebreite begrenzen wir wie den Fliesstext der
   Textsets (--content-width-narrow gibt es nicht, deshalb der Wert der Textsektionen). */
.faq-answer { max-width: 70rem; }

/* ==== 96-logo-sliders.css ==== */
/* Phase 2, Task 16 – die zwei Kundenlogo-Bänder am Fuss jeder Produkt- und Anwendungsseite
   (Bricks-Vorlage 2122; Partial partials/logo-sliders).

   Eigene Datei, weil Task 17 (Anwendungsseite) denselben Abschnitt einbindet.

   Alle Werte stammen aus dem Original: die Sektions- und Containerregeln aus dem
   <style>-Block der gerenderten Seite (#brxe-500065, #brxe-d48bbb, #brxe-eb9134), die
   Slidereinstellungen aus dem xproslider-Baustein der Vorlage (perPage 5, gap var(--space-xxl),
   fixedHeight 5rem, objectFit contain, edgeEffect 25 %, Auto-Scroll 0,5), die Maske aus der
   Xpro-Slider-Bibliothek (.x-slider[data-x-slider*=edgeEffect] > .splide__track). */

/* Die Bänder laufen absichtlich über die Seitenbreite hinaus. */
.section--logo-sliders { overflow: hidden; }

.logo-sliders { row-gap: var(--space-s); }
.logo-sliders > h2 { margin-bottom: var(--space-m); }

/* Radius wie im Original (dort eine Vorgabe des Xpro-Sliders, gemessen 16 px bei 1440). */
.logo-band { width: 100%; border-radius: var(--radius); }

/* Weiche Kanten links und rechts (Original: „edgeEffect", Abstand 25 %, Steigung 2). */
.logo-band .splide__track {
  --mask-edge: 25%;
  --mask-slope: 2;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, .5) calc(var(--mask-edge) / var(--mask-slope)),
    black var(--mask-edge),
    black calc(100% - var(--mask-edge)),
    rgba(0, 0, 0, .5) calc(100% - var(--mask-edge) / var(--mask-slope)),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, .5) calc(var(--mask-edge) / var(--mask-slope)),
    black var(--mask-edge),
    black calc(100% - var(--mask-edge)),
    rgba(0, 0, 0, .5) calc(100% - var(--mask-edge) / var(--mask-slope)),
    transparent 100%);
}

/* Ohne JavaScript steht das Band still, bleibt aber lesbar: die Liste ist dann eine schlichte
   Flexzeile mit demselben Abstand, den Splide sonst als margin-right an jeden Slide hängt. */
.logo-band .splide__list { display: flex; margin: 0; padding: 0; list-style: none; gap: var(--space-xxl); }
.logo-band.is-initialized .splide__list { gap: 0; }

/* Feste Bandhöhe 5rem; das Logo wird darin eingepasst (objectFit contain). */
.logo-band .splide__slide {
  display: flex; align-items: center; justify-content: center;
  height: 5rem;
}
.logo-band .splide__slide img { width: 100%; height: 100%; object-fit: contain; }

/* ==== 97-product.css ==== */
/* Produkt-Detailseite, Teil 1 (Task 15): Kopfbereich, Anwendungen, die drei Bits-Spalten
   (Funktionen/Optionen/Zubehör) und der Software-Slider.

   Alle Werte stammen aus dem Original: die Bricks-Elementregeln stehen im <style>-Block der
   gerenderten Seite (/en/products/sound-level-meters/xl3-acoustic-analyzer), die Klassen
   .bits-listing, .listing-software, .tile-next, .section-border-top und .wrapper-buttons in den
   globalen Bricks-Klassen, .btn--neutral-light in Automatic.css. Nachgemessen mit Headless
   Chrome bei 1440 und 600 px.

   Was hier NICHT steht, weil es schon global ist: .section/.container (20-layout.css),
   .center-all (20-layout.css), .image-cover (80-utilities.css), .splide-Grundlagen und die
   Punktnavigation (81-blocks.css), .app-item/.app-slider (87-application-slider.css),
   .tile-next (86-news.css), der Seitenkopf in seinen Grundzügen (88-content-blocks.css). */

/* ---------------------------------------------------------------- Trennlinie zwischen Abschnitten */
.section-border-top { border-top: var(--border-size) solid var(--border-color-dark); }

/* ---------------------------------------------------------------- Kopfbereich der Produktseite */
/* Die zwei Buttons stehen im Original nebeneinander (.wrapper-buttons). */
.wrapper-buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-xs); }

/* „Find distributor": im Original .btn--neutral-light aus Automatic.css. */
.btn--neutral-light { background: var(--neutral-ultra-light); color: var(--neutral); }
.btn--neutral-light:hover { background: var(--neutral-light); color: var(--neutral); }

/* Die Buttonzeile ist im Original so breit wie die Textspalte (die Brotkrumen darüber sind
   nur so breit wie ihr Text – siehe align-items in 88-content-blocks.css). */
.page-head__actions { align-self: stretch; }

/* Das Beitragsbild füllt die rechte Spalte; das Seitenverhältnis 35/36 stammt aus der
   Medienspalte des Originals (#brxe-bwaynk) und bestimmt dort die Höhe des ganzen Kopfes. */
.page-head__image { margin: 0; overflow: hidden; aspect-ratio: 35 / 36; z-index: 999; }
.page-head__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) {
  /* Unter 768 px steht das Bild im Original in der Textspalte – zwischen Überschrift und
     Buttons, in voller Breite und mit Linie darüber und darunter. Wir haben nur ein Bild und
     lösen die Textspalte deshalb auf (display: contents), damit ihre drei Teile direkt im
     Raster liegen und das Bild an die richtige Stelle rutscht. Die Innenabstände der
     Textspalte übernimmt dabei das Raster. */
  .page-head--product .container { padding-top: var(--space-m); padding-bottom: var(--space-m); row-gap: var(--content-gap); }
  .page-head__text { display: contents; }
  /* Die Überschrift bleibt so breit wie ihr Text (im Original durch align-items der Textspalte,
     die es hier ja nicht mehr gibt); der Rest füllt die Zeile. */
  .page-head__text h1 { justify-self: start; }
  .page-head__actions { order: 1; }
  .page-head__image {
    aspect-ratio: auto;
    border-top: var(--border-size) solid var(--border-color-dark);
    border-bottom: var(--border-size) solid var(--border-color-dark);
  }
  /* Das Seitenverhältnis kommt aus den Originalmassen des Bildes (Inline-Eigenschaft am
     <figure>), nicht aus der von Glide gelieferten Fassung: sonst rundet Glide die Höhe auf
     ganze Pixel und der Kopf wird 0,37 px zu hoch. Das Original rechnet ebenfalls mit den
     width/height-Attributen. */
  .page-head__image img { height: auto; object-fit: fill; aspect-ratio: var(--head-image-ratio, auto); }
}

/* Software-/Cloud-Produkte (Bricks 1798): eine mittige Spalte ohne Bild, Mindesthöhe 40vh.
   Der Kopf ist hier kein Zweispalter – die Rasterregel der Produktseite (88-content-blocks.css)
   wird deshalb zurückgenommen. */
.page-head--software {
  display: flex; flex-direction: column; justify-content: center; min-height: 40vh;
  padding-top: var(--section-space-m); padding-bottom: var(--section-space-m);
}
.page-head--software .container { display: flex; flex-direction: column; row-gap: var(--content-gap); }
.page-head--software .page-head__group { align-items: center; text-align: center; }
.page-head--software .page-head__actions { justify-content: center; }

/* Die unsichtbare Abschnittsüberschrift des Anwendungsblocks. Im Original heisst die Klasse
   „hidden"; sie versteckt den Text optisch, lässt ihn aber im Vorleseprogramm stehen. */
.page-head__hidden-heading { font-size: 0; width: 0; height: 0; opacity: 0; transform: translateX(-200vw); }

/* Beide Slider der Produktseite stehen in einem Container mit align-items: center bzw.
   flex-start; ohne width: 100% würden sie auf ihre Inhaltsbreite schrumpfen und bei langen
   Wörtern (deutsche Kacheltitel) über den Rand hinauslaufen. */
.section--related .splide, .section--bits .bits-listing { width: 100%; }

/* ---------------------------------------------------------------- Slider-Punkte */
/* ---------------------------------------------------------------- Anwendungen */
.section--related-applications .container { row-gap: var(--content-gap); }

/* ---------------------------------------------------------------- Funktionen / Optionen / Zubehör */
/* Eine Sektion, darin drei Container – je Container Überschrift und Kachelreihe. */
.section--bits { display: flex; flex-direction: column; row-gap: var(--section-space-m); }
/* Die Überschrift ist im Original nur so breit wie ihr Text (Bricks-Container richtet seine
   Kinder am Anfang aus). */
.section--bits .container { align-items: flex-start; }

.bits-listing {
  display: grid; grid-template-columns: var(--grid-7); gap: var(--space-m);
  align-items: initial; margin: 0; padding-left: 0; list-style: none;
}
/* Drei Kacheln zu je zwei Spalten, die Abschlusskachel zu einer – zusammen sieben. */
.bits-listing__li { grid-column: span 2; }
.bits-listing__li:last-child { grid-column: span 1; }
.bits-listing .tile-next { grid-column: span 1; }

.bits-listing__article {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-xs);
  padding: var(--space-m); height: 100%; flex-grow: 1; position: relative; box-sizing: border-box;
  background-color: var(--white); border-radius: var(--radius);
  box-shadow: inset 0 0 0 var(--border-size) var(--border-color-dark);
}
/* Überschrift und „learn more" sind im Original nur so breit wie ihr Text, der Auszug füllt
   die Kachel (Bricks gibt .brxe-text die volle Breite). */
.bits-listing__excerpt { width: 100%; }
/* Silbentrennung und Nullabstand des Auszugs stehen seit der Konsolidierung global in
   10-base.css (im Original „.brxe-text p", gilt für jeden Bricks-Textbaustein). Ohne die
   Trennung ist die Zubehör-Spalte 24 px höher. */
.bits-listing__heading { font-weight: 600; font-size: var(--text-m); }
.bits-listing__link { margin-top: var(--space-xs); }
/* Das Symbol steht im Quelltext zuletzt und optisch zuoberst (order: -1) – wie im Original. */
.bits-listing__icon {
  order: -1; margin-bottom: var(--space-xs); width: 3rem; aspect-ratio: 1; padding: .4em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50rem; background-color: var(--primary);
}
/* Das Symbol ist im Original 60 % der Innenbreite hoch wie die volle Innenhöhe des Kreises
   (gemessen: 21,13 × 35,22 px bei 1440 px); die Zeichnung selbst wird darin eingepasst. */
.bits-listing__icon svg { width: 60%; height: 100%; }

@media (max-width: 1090px) { .bits-listing { grid-template-columns: var(--grid-4); } }
@media (max-width: 550px) {
  .bits-listing { grid-template-columns: var(--grid-2); }
  .bits-listing .tile-next { grid-column: span 2; }
}

/* ---------------------------------------------------------------- Software */
.section--related-software .container { row-gap: var(--content-gap); }
.software-slider { overflow: visible; }
/* Die Kachel zentriert ihren Inhalt in beide Richtungen und behält das auch unter 768 px –
   im Original steht das an der Kachel selbst und überschreibt die .center-all-Regel aus
   20-layout.css. justify-content wirkt sichtbar, sobald eine Kachel niedriger ist als die
   höchste im Slider (bei 600 px 9,75 px Versatz). */
.listing-software__li {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; row-gap: var(--content-gap);
  padding: var(--section-space-l) var(--space-m) var(--space-m);
  border-radius: var(--radius); color: var(--white);
}
/* Verlauf zur Lesbarkeit über dem Bild. */
.listing-software__li::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(transparent 30%, var(--neutral));
}
/* Ohne Gewicht (:where) – das absolut liegende .image-cover behält seine Positionierung. */
:where(.listing-software__li > *) { position: relative; }
.listing-software__heading { color: var(--white); }
.listing-software__bgimg--empty { background-color: var(--neutral); }

/* ================================================================ Task 16: FAQs, News, Downloads */
/* Alle Werte aus dem Original gelesen (Bricks-Vorlage 391 bzw. die globalen Klassen im
   <style>-Block der gerenderten Seite) und mit Headless Chrome bei 1440 und 600 px nachgemessen.

   Was hier NICHT steht, weil es schon da ist: das Akkordeon selbst (92-accordion-table-blocks.css –
   im Original hängen die FAQs an denselben Regeln des Seiten-CSS wie die Baukasten-Akkordeons),
   die News-Kachel (.newspost-box in 86-news.css – die Kachelregeln des Originals sind Zeichen für
   Zeichen dieselben wie auf der Startseite), die Linksymbole .download-link/.filetype-*
   (94-download-ad-blocks.css, Task 14), der Testimonial-Slider (85-testimonials.css). */

/* ---------------------------------------------------------------- FAQs */
/* Die Bricks-Container richten ihre Kinder am Anfang aus: die Überschrift ist dort nur so breit
   wie ihr Text (gemessen „FAQs" 105 px bei 1440), bei uns ohne diese Regel 25ch. Dieselbe Zeile
   steht seit Task 15 schon an .section--bits. Liste und Akkordeon holen sich die volle Breite
   über width: 100 % zurück. */
.section--faqs .container, .section--downloads .container { align-items: flex-start; }

/* Globale Klasse des Originals; bisher gab es nur die blaue Schwester in 88-content-blocks.css. */
.gradient-soft-green-top-to-bottom { background-image: linear-gradient(var(--secondary-ultra-light), transparent); }

/* Das Akkordeon ist im Original ein Raster mit automatisch passender Spaltenzahl (Mindestbreite
   600 px bei 1440 px). Im Baukasten bleibt dadurch eine Spalte, weil die Textspalte nur 810 px
   breit ist; hier reicht der volle Container von 1380 px für ZWEI Spalten. Die Regel dafür steht
   schon in 92-accordion-table-blocks.css – hier ist nichts zu tun. */

/* ---------------------------------------------------------------- News */
/* Bricks-Klasse „newspost-list": drei Spalten, ab 1090 px zwei, ab 550 px eine. */
.newspost-list {
  display: grid; grid-template-columns: var(--grid-3); gap: var(--grid-gap);
  align-items: initial; margin: 0; padding-left: 0; list-style: none;
}
@media (max-width: 1090px) { .newspost-list { grid-template-columns: var(--grid-2); } }
@media (max-width: 550px) { .newspost-list { grid-template-columns: var(--grid-1); } }

/* ---------------------------------------------------------------- Downloads */
/* Das Original stapelt die Kategorien mit Isotope-Masonry (Bricks „_useMasonry"): Spaltenabstand
   --space-l, Spaltenzahl 3 (Bricks-Standard), ab 1090 px 2, ab 550 px 1. Bei uns übernimmt das
   der Mehrspaltensatz von CSS – dieselbe Optik, ohne Fremdbibliothek und ohne Umbau im Browser.
   Ab 768 px schaltet das Original auf ein festes Raster um (grid-template-columns var(--grid-2)). */
.download-terms {
  columns: 3; column-gap: var(--space-l);
  width: 100%; margin: 0; padding-left: 0; list-style: none;
}
@media (max-width: 1090px) { .download-terms { columns: 2; } }
@media (max-width: 550px) { .download-terms { columns: 1; } }

.download-terms__download-term {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-xs);
  break-inside: avoid; -webkit-column-break-inside: avoid;
  font-size: var(--h4); font-weight: 500;
  /* Abstand zur nächsten Kategorie (Seiten-CSS des Originals). */
  padding-block-end: 3em;
}
.download-terms__term-title { font-size: 1.1em; font-weight: 700; }
.download-terms__downloads-ul {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-xs);
  width: 100%; margin: 0; padding: 0; list-style: none;
}
.download-terms__downloads-li { width: 100%; }
/* Der Dateilink und der externe Link stehen im Original eine Stufe kleiner als die Kategorie. */
.download-terms__code { font-size: .9em; }
.download-terms__code .file-meta { font-size: .8em; white-space: nowrap; }
.download-terms__text-basic { font-size: .9em; }
/* „Currently no downloads for …" – im Original ein <li> in jeder leeren Kategorie, bei uns ein
   Absatz, weil leere Kategorien gar nicht erst erscheinen (Entscheidung E-16). */
.download-terms__empty { margin: 0; }

/* ==== 98-application.css ==== */
/* Anwendungs-Detailseite (Task 17), Bricks-Vorlage „Single Application" 1983.

   Die Seite teilt sich fast alles mit der Produktseite: Kopf (88-content-blocks.css,
   .page-head--application aus Task 8), Inhaltsverzeichnis, Baukasten, FAQ-Akkordeon
   (92-accordion-table-blocks.css), News-Kachel und -Raster (86-news.css, 97-product.css),
   Downloads-Spalten (97-product.css), Logo-Bänder (96-logo-sliders.css). Hier steht nur, was
   die Anwendungsseite zusätzlich braucht.

   Alle Werte aus dem Original gelesen: die Bricks-Elementregeln stehen im <style>-Block der
   gerenderten Seite (/en/applications/room-building-acoustics/room-acoustics), die Klassen
   product-types-list__*, app-item__text, center-self und section-border-top in den globalen
   Bricks-Klassen. Nachgemessen mit Headless Chrome bei 1440 und 600 px. */

/* ---------------------------------------------------------------- Kopfbereich */
/* Unter 768 px bekommt der Textblock des Kopfes im Original oben und unten einen Abstand
   (@media (max-width: 768px) { #brxe-kartss { padding-top/-bottom: var(--space-m) } } im
   Seiten-CSS der gerenderten Anwendungsseite). Ohne diese Zeile ist unser Kopf bei 600 px
   37,5 px niedriger. Die restlichen 18,75 px des Unterschieds kommen vom Rahmen um die
   Brotkrumen, der dort leer stehen bleibt – siehe partials/page-title. */
@media (max-width: 768px) {
  .page-head--application .page-head__group { padding-block: var(--space-m); }
}

/* ---------------------------------------------------------------- FAQs */
/* Auf der Anwendungsseite trägt die FAQ-Sektion nur die Trennlinie, keinen grünen Verlauf
   (Vorlage 1983, Element skuwfz: einzige globale Klasse „section-border-top"). Die Regel für
   den Verlauf steht in 97-product.css und greift hier deshalb gar nicht erst. Die Überschrift
   ist – wie in allen Bricks-Containern – nur so breit wie ihr Text; dieselbe Zeile steht schon
   in 97-product.css an .section--faqs/.section--downloads und gilt hier mit. */

/* ---------------------------------------------------------------- Produkte („Products used for …") */
/* Slider wie der Software-Slider der Produktseite: die Punktnavigation liegt absolut unter dem
   Slider und darf nicht abgeschnitten werden (Original: trackOverflow „visible" an #brxe-wtumha,
   gerendert als overflow: visible auf Track und Liste). Breite, Punktnavigation und der
   Abstand der Kacheln kommen über .section--related aus 97-product.css.

   Gemessen am Original bei 1440 px: Slider 1380 px, drei Kacheln à 440 px mit 30 px Abstand
   ((1380 − 2 × 30) / 3 = 440). Das Original setzt für diesen Slider KEINE eigenen Breakpoints –
   es bleiben auch bei 600 px drei Kacheln nebeneinander. */
.products-slider { overflow: visible; }
.products-slider .splide__track, .products-slider .splide__list { overflow: visible; }

/* Die Kachel selbst ist Zeichen für Zeichen die Typ-Kachel der Übersichten
   (.product-types-list__type in 84-product-types.css): Innenabstand 0/13,33/13,33, Textbox
   20/30, Medienspalte 20 seitlich, Bild 4:3 – alles am Original nachgemessen und dort schon
   umgesetzt. Als Slide braucht sie nur noch die Höhe der höchsten Kachel. */
.products-slider .splide__slide { display: flex; flex-direction: column; height: auto; }

/* Der Auszug (.app-item__text) ist im Original ein Bricks-„text" und bekommt dort weder
   Abstand noch eine eigene Trennregel: beides steht seit der Konsolidierung global in
   10-base.css (Nullabstand für jeden Absatz, Silbentrennung für die Textbausteine).
   Die frühere Regel an dieser Stelle lief ins Leere – sie suchte ein <p> INNERHALB von
   .app-item__text, unsere Kachel ist der Absatz selbst (Befund F-1). */

/* ==== 99-archives.css ==== */
/* Übersichten, Typseiten und Produkt-Unterseiten (Task 18).

   Bricks-Vorlagen: 1374 „Archive Products", 5771 „Archive Applications", 2488 „Archiv
   Produkt-Type", 969 „Archive Application Types" und die 48 Unterseiten-Vorlagen (12376 …).
   Alle Werte aus den Bricks-Global-Classes bzw. dem Seiten-CSS des Originals, mit Headless
   Chrome bei 1440 und 600 px gegengeprüft.

   Was hier NICHT steht, weil es schon woanders liegt: das Kachelraster der Typ-Kacheln
   (84-product-types.css, Phase 1), Kopfbereich und Verläufe (88-content-blocks.css),
   .section/.container (20-layout.css), Buttons (30-buttons.css). */

/* ---------- Produktübersicht: die Titelliste in der Kachel ---------- */
/* Baugleich mit .excerpt-post-titles-ul (Startseite, Anwendungsübersicht), aber mit engeren
   Zeilen und einem anderen Ausblendpunkt: das Original hängt hier statt der globalen Klasse
   ein eigenes CSS an das Element (gap .3em/1em) und blendet die Liste schon ab 768 px aus. */
.product-types-list__titles {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: .3em 1em;
  padding: 0;
  margin: 0;
  font-size: .8em;
  /* Bricks-„block" = width: 100% (siehe 84-product-types.css). */
  width: 100%;
}
@media (max-width: 768px) { .product-types-list__titles { display: none; } }

/* ---------- Typseiten: Auszug in der Kachel ---------- */
/* Der Auszug trägt auf der Produkttyp-Seite beide Klassen (app-item__text und
   excerpt-post-titles-ul). Im Original steht die zweite Regel weiter hinten im Stylesheet und
   gewinnt mit .8em; bei uns liegen sie in 84 bzw. 87, dort gewönne .9em. Hier wiederhergestellt. */
.app-item__text.excerpt-post-titles-ul { font-size: .8em; }

/* Die Anwendungsübersicht nutzt bei uns <h2> statt des <h3> im Original (Gliederungssprung,
   Begründung in applications/index). Damit das unsichtbar bleibt, gilt die globale Regel
   „h2 { max-width: 25ch }" für diese kleine Kachelüberschrift nicht – sonst bräche
   „Noise & Vibration Measurements" um, was das Original nicht tut. Der Körper-Klassenname kommt
   aus layout.antlers.html (Template-Pfad mit Bindestrich). */
.applications-index .list-item__heading { max-width: none; }

/* ---------- Typseiten: zwei Spalten statt drei ---------- */
.product-types-list--two { grid-template-columns: var(--grid-2); }
/* Der zweite Abschnitt der Typseiten hat im Original oben keinen Abstand (_padding top: 0). */
.section--type-list { padding-top: 0; }

/* ---------- Produkt-Unterseiten: die vollständige Kind-Typ-Liste ---------- */
/* Vier Reihen im Subgrid: Bild, Überschrift, Text, Schaltfläche. Dadurch stehen Überschriften,
   Texte und Schaltflächen aller Kacheln einer Zeile auf derselben Höhe. */
.bits-full-list {
  display: grid;
  grid-template-columns: var(--grid-3);
  gap: var(--space-l) var(--grid-gap);
  align-items: initial;
  list-style: none;
  padding-left: 0;
  margin-block: 0;
}
@media (max-width: 1090px) { .bits-full-list { grid-template-columns: var(--grid-2); } }
@media (max-width: 550px) { .bits-full-list { grid-template-columns: var(--grid-1); } }

.bits-full-list__li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  /* Eigener Zeilenabstand des Subgrids: 30 px statt der 45 px des Rasters (im Original der
     Bricks-Standardabstand von .brxe-block). Ohne diese Zeile ist jede Kachel 45 px zu hoch –
     das Subgrid setzt seine Kinder mit dem eigenen Abstand, und die Zeilen des Rasters passen
     sich entsprechend an. Grösste Einzelabweichung des Tasks vor der Korrektur. */
  row-gap: var(--space-m);
  align-items: center;
  position: relative;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.bits-full-list__media { grid-row: 1; }
.bits-full-list__heading { grid-row: 2; align-self: start; font-size: var(--h3); }
.bits-full-list__text { grid-row: 3; align-self: start; }
.bits-full-list__button { grid-row: 4; align-self: start; justify-self: start; }
/* Abstand und Silbentrennung des Kachel-Auszugs stehen seit der Konsolidierung global in
   10-base.css (der Auszug ist im Original ein Bricks-„text"). Ohne die Trennung war die
   Textzeile jeder Kachel zu hoch – Befund F-1, gemessen an /en/accessories und den 48
   Produkt-Unterseiten. */

/* Die ganze Kachel ist klickbar: der Link der Überschrift legt sich unsichtbar darüber.
   Deshalb ist „Find out more" auch im Original ein <span> und kein zweiter Link. */
.heading-linked-box a { text-decoration: none; color: inherit; }
.heading-linked-box a::before { content: ""; position: absolute; inset: 0; z-index: 99; }

/* Anders als die Typ-Kacheln (84-product-types.css) haben die Bilder hier KEIN width: 100% –
   ein Bild, das schmaler als die Spalte ist, bleibt im Original schmal (Kalibrierzertifikat,
   150 × 117 px). Nur das Seitenverhältnis und der Beschnitt sind gesetzt. */
.bits-full-list__image { overflow: hidden; }
.bits-full-list__image img { aspect-ratio: 4/3; object-fit: cover; transition: transform .3s ease-in-out; }
.bits-full-list__li:hover .bits-full-list__image img { transform: scale(1.05); }
.bits-full-list__li:hover .bits-full-list__button::before { opacity: 0; }

/* ==== 100-news.css ==== */
/* News – Archiv (Bricks-Archivvorlage 5182) und Beitrag (Bricks-Vorlage 269).
   Erster Teil: Raster, Kachelliste, Seitenleiste, Kategorie-Knöpfe, Seitenzahlen.
   Zweiter Teil (ab „News-Beitrag"): Kopf, Zwei-Spalten-Raster, Fliesstext des Beitrags und
   die WordPress-Blockklassen.

   Werte aus dem Seiten-CSS des Originals (#brxe-qyflif, #brxe-bnzyiu, #brxe-zrdorb,
   #brxe-klxdaf, #brxe-dxnkyn, #brxe-tztowq) und mit eigenem Headless-Chrome bei 1440 und
   600 px in EN/DE/FR gegengeprüft.

   Was hier NICHT steht, weil es schon woanders liegt: die News-Kachel selbst (.newspost-box,
   86-news.css – das Archiv benutzt dieselbe globale Bricks-Klasse wie Startseite und
   Produktseite, also die dunkle Fassung mit Verlauf über dem Bild), der Kopfbereich
   (88-content-blocks.css), .section/.container (20-layout.css) und das Newsletter-Formular
   (60-forms.css). Die Datei ist dreistellig nummeriert (Entscheidung E-6); scripts/build-css.sh
   sortiert numerisch, „100-" landet also hinter „99-".

   .wp-block-image, .alignwide und die Ausrichtungsklassen liegen in 10-base.css,
   die Einwilligungs-Hülle der Einbettungen in 93-embed-blocks.css. */

/* ---------------------------------------------------------------- Abschnitt und Raster */
/* Der Abschnitt hat oben keinen Abstand, die Inhaltsspalte zieht sich um --space-xl nach oben
   in den Verlauf des Kopfes hinein (Original: padding-top 0 bzw. margin-top -67,5 px bei 1440).
   „flow-root" verhindert dabei, dass dieser negative Aussenabstand durch den Abschnitt
   hindurchfällt: Bricks-Abschnitte sind Flex-Container und kennen kein Zusammenfallen von
   Aussenabständen, unsere .section ist ein normaler Block. Ohne die Angabe beginnt der
   Abschnitt selbst 67,5 px zu weit oben (bei 1440 px gemessen). */
.section--news-archive { padding-top: 0; display: flow-root; }
.news-archive { margin-top: calc(var(--space-xl) * -1); }

/* Zwei Spalten 2fr/1fr (900/450 px bei 1440), ab 1090 px 3fr/2fr, ab 550 px eine. */
.news-archive__grid {
  display: grid; grid-template-columns: var(--grid-2-1); gap: var(--grid-gap);
}
@media (max-width: 1090px) { .news-archive__grid { grid-template-columns: var(--grid-3-2); } }
@media (max-width: 550px) { .news-archive__grid { grid-template-columns: var(--grid-1); } }

/* Hauptspalte: Kachelliste und darunter die Seitenzahlen, Abstand --content-gap. */
.news-archive__main { display: flex; flex-direction: column; row-gap: var(--content-gap); }

/* ---------------------------------------------------------------- Kachelliste */
/* Eine Spalte über die ganze Hauptspalte – anders als die dreispaltige Liste der Produktseite
   (.newspost-list in 97-product.css), deren Grundwerte hier weitergelten. */
.newspost-list--archive { grid-template-columns: var(--grid-1); }

/* ---------------------------------------------------------------- Seitenleiste */
/* Weisse Box mit Rahmen und Radius; darin die Kategorie-Knöpfe (Task 7) und die
   Newsletter-Box, abgetrennt durch eine Linie darüber. */
.news-sidebar {
  display: flex; flex-direction: column; row-gap: var(--content-gap);
  padding: var(--space-m); background-color: var(--white);
  border: var(--border-size) solid var(--border-color-dark); border-radius: var(--radius);
}
.news-sidebar__newsletter {
  display: flex; flex-direction: column; row-gap: calc(var(--space-xs) / 2);
  padding-top: var(--space-m); border-top: var(--border-size) solid var(--border-color-dark);
}
/* Der Absendeknopf ist im Original so breit wie seine Beschriftung (132,25 px bei 1440 px):
   die FluentForm-Spalte misst 22,08 %, der Knopf darin hat min-width: 100 % und wächst deshalb
   über sie hinaus. In der Fusszeile decken sich die 25 % aus 60-forms.css damit zufällig
   (25 % von 528 px = 132 px); in der schmaleren Seitenleiste (388 px) wären es nur 97 px, und
   die Zustimmungsspalte daneben würde entsprechend zu breit. Deshalb hier Breite nach Inhalt
   mit 22,08 % als Untergrenze – die Fusszeile bleibt unverändert.
   Unter 768 px stehen beide untereinander (Regel in 60-forms.css), dort gilt das nicht. */
@media (min-width: 768px) {
  .news-sidebar__newsletter .newsletter-form__submit { flex: 0 0 auto; min-width: 22.08%; }
}
/* Der Zustimmungssatz ist im Original immer 0,9 em der Grundschrift (14,4 px bei 1440 px,
   11,7 px bei 600 px – FluentForm-Klasse „ff_t_c“). In der Fusszeile kommt das durch deren
   eigene .9em von selbst heraus, in der Seitenleiste nicht; ohne die Zeile bricht der Satz
   dort eine Zeile mehr um (+23,56 px). Der 5-px-Innenabstand rechts stammt ebenfalls aus dem
   Original und bestimmt mit, wo der Satz umbricht. */
.news-sidebar__newsletter .newsletter-form .form-check { font-size: calc(var(--text-m) * .9); }
.news-sidebar__newsletter .newsletter-form .form-check span { padding-right: 5px; }
/* Unter dem E-Mail-Feld steht in der Seitenleiste kein Abstand: die Original-Klasse
   „form--light“ nimmt den FluentForm-Gruppen ihren Aussenabstand (.form--light .ff-el-group
   { margin-bottom: 0 !important }). In der Fusszeile sitzt zwischen Feld und Zustimmung
   trotzdem eine Lücke von 1 em (dort steht das Spaltenraster des Formulars dazwischen) –
   deshalb gilt die Zeile nur hier. Gemessen: ohne sie ist die Box 16 px zu hoch. */
.news-sidebar__newsletter .newsletter-form .form-group { margin-bottom: 0; }
/* Dasselbe „form--light“ gilt für die Zustimmungsgruppe und – unter 768 px – für die Gruppe
   unter dem Knopf: in der Seitenleiste hat das Original zwischen den Gruppen gar keinen
   Aussenabstand (1440 px: Spalte 101,44 = Zustimmung 96,44 + 5; 600 px: Kasten 143,02 =
   102,73 + 40,28). In der Fusszeile bleiben beide Abstände (60-forms.css).
   Und: die 8 px `padding-top` der Kästchenzelle (`.ff_tc_label > span`) wirken nur hier.
   In der Fusszeile steckt das Formular im Bricks-Element `.brxe-xfluentform`, dessen eigenes
   Stylesheet den Innenabstand zurücknimmt – dort bleiben von der Tabellenzeile nur die 2 px
   Grundlinienversatz, hier sind es 8 + 2 = 10 px (an beiden Breiten nachgemessen). */
.news-sidebar__newsletter .newsletter-form__consent { margin-bottom: 0; }
.news-sidebar__newsletter .newsletter-form__row { padding-bottom: 0; }
.news-sidebar__newsletter .newsletter-form .form-check { padding-bottom: 10px; }

/* ---------------------------------------------------------------- Kategorie-Knöpfe */
/* Original: WP-Grid-Builder-Facette 7 (.wpgb-facet-7), per JavaScript nachgeladen; bei uns reine
   Links (partials/news-filter). Bei 1440 und 600 px am gerenderten Original nachgemessen.

   Der Knopf mischt zwei Bezugsgrössen: sein Innenabstand richtet sich nach der Grundschrift der
   Seite (1,2/1,8/0,9 em von --text-m, also 19,2/28,8/14,4 px bei 1440 und 15,6/23,4/11,7 px bei
   600), die Beschriftung dagegen ist fest 16 px mit 26 px Zeilenhöhe und eigenem Innenabstand
   von 8 px (im Original ein span.wpgb-button-label). Weil der Text bei uns direkt im Link steht,
   bekommt der Link die feste Schriftgrösse und die waagerechten Abstände werden zusammengezählt
   (1,8 em + 0,5 rem). Ergebnis: Knopfhöhe 61,58 px bei 1440 und 55,28 px bei 600 – wie im
   Original. Abstand zwischen den Knöpfen 8 px (fest, nicht mitwachsend), Rahmen 1 px
   rgba(18,31,77,.2). Der Radius ist im Original 1 em der *Knopf*-Schrift (16 px bei 1440,
   13 px bei 600) – bei uns deshalb --text-m und nicht --radius, das hier gegen die feste
   Beschriftungsgrösse rechnen würde. Übrig bleibt als Unterschied nur, was die zwei
   Schriftgrössen im berechneten Stil betrifft (font-size und line-height des Knopfes); die
   Masse stimmen bei 1440 wie bei 600 px überein. */
.news-filter__list {
  display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 -.5rem;
}
.news-filter__item { margin: 0 .5rem .5rem 0; }
.news-filter__button {
  display: block; font-size: 1rem; line-height: 1.625; text-decoration: none;
  padding: calc(var(--text-m) * 1.2) calc(var(--text-m) * 1.8 + .5rem) calc(var(--text-m) * .9);
  color: var(--neutral); background-color: var(--white);
  border: 1px solid var(--neutral-trans-20); border-radius: var(--text-m);
}
/* Die gewählte Kategorie (im Original aria-pressed="true"): türkis mit weisser Schrift. */
.news-filter__button.is-active { background-color: var(--primary); color: var(--white); }
.news-filter__button:hover { color: var(--link-color-hover); }
.news-filter__button.is-active:hover { color: var(--white); }

/* ---------------------------------------------------------------- Seitenzahlen */
/* Original: WP-Grid-Builder-Facette 8 (.wpgb-facet-8) unter der Kachelliste, ebenfalls per
   JavaScript. Anders als die Kacheln daneben wächst hier nichts mit der Fensterbreite: Schrift
   16 px, Zeilenhöhe 32 px, Innenabstand 9,6/14,4/7,2 px und Radius 16 px stehen bei 1440 wie bei
   600 px gleich – deshalb die feste Grundschrift 1 rem auf der Liste und em-Werte darin. Nur der
   Abstand zwischen den Knöpfen folgt --space-xs (13,33 px bei 1440, 9,66 px bei 600), genau wie
   im Original.
   Die Zeile ist 32 px hoch und mittig; die Knöpfe darin sind mit 48,78 px höher und ragen unten
   heraus (im Original steht die Höhe der <li> auf 2 em fest, der Link fliesst darüber hinaus) –
   das bilden wir nach, sonst sässe die ganze Zeile 17 px tiefer. */
.pagination__list {
  display: flex; width: fit-content; margin: 0 auto; padding: 0; list-style: none;
  gap: var(--space-xs);
}
.pagination__item { font-size: 1rem; height: 2em; line-height: 2em; font-weight: 700; }
.pagination__link {
  display: block; padding: .6em .9em .45em; line-height: 2em; font-weight: 600;
  text-decoration: none; color: var(--neutral); background-color: var(--neutral-ultra-light);
  border-radius: var(--radius);
}
/* Die aktuelle Seite (im Original aria-current): dunkelblau mit weisser Schrift. */
.pagination__link.is-current { background-color: var(--neutral); color: var(--white); }
a.pagination__link:hover { color: var(--link-color-hover); }

/* ================================================================ News-Beitrag (Vorlage 269) */
/* Bricks-Vorlage 269 „Single Post". Werte aus dem Seiten-CSS des Originals
   (#brxe-lqbqyl Kopf, #brxe-kmmdcc Container, #brxe-qimyci Überschrift, #brxe-lqddyn
   Beitragsbild, #brxe-zkxjnm Zwei-Spalten-Raster, #brxe-rfubru/#brxe-ljjemx Seitenleiste),
   aus dem Theme-Stylesheet (.brxe-post-content) und aus der WordPress-Blockbibliothek
   (wp-includes/blocks/…/style.min.css). Mit eigenem Headless-Chrome bei 1440 und 600 px in
   EN, DE und FR gegengeprüft (Beiträge 267, 5516, 5555, 13261, 7659, zwei lange Beiträge mit
   Listen und Spalten sowie ein französischer mit Zitat) – Inhaltsspalte überall 0,00 px. */

/* ---------------------------------------------------------------- Kopf */
/* Anders als alle übrigen Köpfe hat dieser keinen Verlauf, sondern eine dunkle Fläche mit
   weisser Schrift; das Beitragsbild liegt weichgezeichnet dahinter. Ohne Beitragsbild bleibt
   die Fläche einfarbig (Befund D-19, Entscheidung E-11).
   Die beiden Spiralen fehlen hier – die Vorlage hat sie nicht (siehe partials/page-title). */
.page-head--post { background-color: var(--neutral); color: var(--white); }
.page-head--post h1 { color: var(--white); }
.page-head--post .breadcrumb li.active { color: var(--white); }
/* Der Container hat im Original ausdrücklich keinen Zeilenabstand (row-gap: 0): das Datum
   sitzt unmittelbar unter der Gruppe aus Überschrift und Brotkrumen. */
.page-head--post .container { row-gap: 0; }
/* Deckkraft, Weichzeichnung und Vergrösserung des Hintergrundbildes wie in der Vorlage
   (die Anwendungsseite nimmt an derselben Stelle nur opacity: .3, deshalb hier eigens). */
.page-head--post .page-head__bg { opacity: .4; filter: blur(.4em); scale: 1.1; }

/* ---------------------------------------------------------------- Zwei Spalten */
/* Wie im Archiv 2fr/1fr, ab 1090 px 3fr/2fr – aber schon ab 768 px einspaltig und mit
   --space-xxl statt --grid-gap zwischen den Spalten (#brxe-zkxjnm). */
.news-post__grid {
  display: grid; grid-template-columns: var(--grid-2-1); gap: var(--space-xxl);
}
@media (max-width: 1090px) { .news-post__grid { grid-template-columns: var(--grid-3-2); } }
@media (max-width: 768px) { .news-post__grid { grid-template-columns: var(--grid-1); } }

/* Die Seitenleiste des Beitrags zeigt nur die Newsletter-Box; ohne die Kategorie-Knöpfe
   darüber entfallen auch deren Trennlinie und der Abstand dazu (#brxe-rfubru enthält im
   Original nur den Newsletter-Kasten). */
.news-sidebar--plain .news-sidebar__newsletter { padding-top: 0; border-top: none; }

/* ---------------------------------------------------------------- Fliesstext des Beitrags */
/* Der Inhaltscontainer heisst im Original .brxe-post-content und bekommt von Automatic.css
   dieselben „smart spacing"-Regeln wie jeder Bricks-Fliesstext – das ist bei uns .cb-text
   (88-content-blocks.css), deshalb trägt der Container beide Klassen. Dazu kommen die vier
   Regeln aus dem Seiten-CSS (WPCodeBox), die den Beitragstext von den Baukastenblöcken
   unterscheiden: kleinere Überschriften und mehr Luft vor einer h2.
   Weil unsere .cb-text-Regeln (anders als die von Automatic.css) nicht in :where() stehen,
   müssen die Beitragswerte mit beiden Klassen geschrieben werden, sonst gewinnt .cb-text. */
.post-content { width: 100%; }
/* Ein Unterschied zu den Baukastenblöcken: das Original trennt im Beitragstext KEINE Silben.
   Die Silbentrennung hängt dort an .brxe-text (10-base.css: .cb-text p), .brxe-post-content
   hat sie nicht. Im Original nachgesehen: hyphens manual, overflow-wrap/word-break normal,
   text-justify auto. Deshalb hier zurücknehmen – sonst brechen lange Wörter und Adressen
   anders um als im Original. */
.post-content.cb-text p {
  hyphens: manual; -webkit-hyphens: manual;
  overflow-wrap: normal; word-wrap: normal; word-break: normal;
  text-justify: auto;
}
.post-content.cb-text h2 { font-size: var(--h3); margin-bottom: 1em; }
.post-content.cb-text h3 { font-size: var(--text-l); margin-top: 1.7em; margin-bottom: 1em; }
/* Überschriften laufen im Beitrag über die volle Breite (global sind h2 auf 25ch begrenzt). */
.post-content.cb-text h2, .post-content.cb-text h3 { max-width: 100%; width: auto; }
.post-content.cb-text p + h2, .post-content.cb-text ul + h2 { margin-top: 3em; }

/* ---------------------------------------------------------------- Blockklassen aus WordPress */
/* Nur die Klassen, die wirklich in der Datenbank stehen (Entscheidung E-4). Die Klassen, die
   WordPress erst beim Rendern anhängt (is-layout-flex, wp-block-paragraph …), bauen wir nicht
   nach – ihre Wirkung steht hier direkt an der Datenbank-Klasse.
   .wp-block-image, .alignwide und die Ausrichtungsklassen liegen seit Phase 2 in 10-base.css. */

/* Bild (278 Vorkommen). .wp-block-image, .alignwide und die Ausrichtungsklassen stehen seit
   Phase 2 in 10-base.css; dort fehlen nur die zwei Regeln der Blockbibliothek, die ein
   „alignwide"-Bild auf die volle Spaltenbreite ziehen. Gemessen an DE 7659 bei 1440 px: ohne
   sie steht das erste Bild in seiner Naturgrösse (600 statt 852,5 px breit, Figur 350 statt
   497,28 px hoch). Weil „alignwide" im ganzen Bestand nur in News-Beiträgen vorkommt
   (Vermerk in 10-base.css), steht die Regel hier und nicht global – Hinweis für Task 12.
   Zweitens die Anzeigeart: im Original sind Bilder im Beitrag Inline-Elemente auf der
   Grundlinie unten (nur „aligncenter" macht sie zu Blöcken), bei uns sind sie global Blöcke
   (10-base.css). Für geladene Bilder kommt dasselbe heraus – „vertical-align: bottom" nimmt
   die Grundlinienlücke weg, Figurenhöhe gleich Bildhöhe. Einen Unterschied macht es nur bei
   den drei kaputten „/Portals/0/"-Bildern in Beitrag 267 (Befund D-7): dort bleibt im
   Original die leere Zeile von 24 px stehen, als Block wäre die Figur 0 px hoch. Wir bilden
   die Anzeigeart deshalb 1:1 nach – nur im Beitragstext, wo die Bilder aus WordPress stehen. */
.post-content .wp-block-image img { display: inline; vertical-align: bottom; }
/* „aligncenter" ist im Original auch dort ein Block (Theme: .aligncenter img { display: block }
   schlägt die Vorgabe „inline"); bei uns braucht das wegen der Regel darüber mehr Gewicht. */
.post-content .wp-block-image.aligncenter img,
.post-content .wp-block-image .aligncenter img { display: block; }
.post-content .wp-block-image.alignwide img,
.post-content .wp-block-image.alignfull img { height: auto; width: 100%; }
.post-content .wp-block-image.alignwide > a,
.post-content .wp-block-image.alignfull > a { width: 100%; }
/* Bildunterschriften kommen im ganzen Bestand nur in News-Beiträgen vor (21 Einträge),
   deshalb steht die Regel hier und nicht global. Werte: Schriftgrad und Farbe aus dem
   Theme (figcaption { color: var(--bricks-text-light); font-size: .9em; text-align: center },
   --bricks-text-light = #9e9e9e), Abstand aus Automatic.css (--figcaption-spacing: .5em).
   Nachgemessen an 5516 bei 1440 px: 14,4/21,6 px statt 16/24, Abstand 7,2 statt 16 px. */
.post-content figcaption {
  margin-block: .5em; font-size: .9em; color: #9e9e9e; text-align: center;
}

/* Galerie (24 Vorkommen, immer has-nested-images columns-default is-cropped).
   Der Abstand kommt im Original aus --wp--style--unstable-gallery-gap (0,5 em); die Breite
   der Kacheln rechnet die Blockbibliothek daraus. Der Container ist im Original zusätzlich
   ohne Innenabstand (Theme: .brxe-post-content .wp-block-gallery { padding: 0 }). */
.post-content .wp-block-gallery.has-nested-images {
  --wp--style--unstable-gallery-gap: .5em;
  display: flex; flex-wrap: wrap; align-items: normal;
  gap: var(--wp--style--unstable-gallery-gap);
  padding: 0; list-style: none;
}
.post-content .wp-block-gallery.has-nested-images figure.wp-block-image {
  box-sizing: border-box; display: flex; flex-direction: column; flex-grow: 1;
  justify-content: center; max-width: 100%; position: relative; margin: 0;
}
.post-content .wp-block-gallery.has-nested-images figure.wp-block-image > a,
.post-content .wp-block-gallery.has-nested-images figure.wp-block-image > div {
  flex-direction: column; flex-grow: 1; margin: 0;
}
.post-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
  display: block; height: auto; max-width: 100%; width: auto;
}
.post-content .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image {
  width: calc(33.33% - var(--wp--style--unstable-gallery-gap) * .66667);
}
.post-content .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-child:nth-last-child(2),
.post-content .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-child:nth-last-child(2) ~ figure.wp-block-image {
  width: calc(50% - var(--wp--style--unstable-gallery-gap) * .5);
}
.post-content .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-child:last-child { width: 100%; }
/* „is-cropped": die Bilder füllen ihre Kachel und werden beschnitten. */
.post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > a,
.post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > div { display: flex; }
.post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image a,
.post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img {
  flex: 1 0 0%; height: 100%; object-fit: cover; width: 100%;
}
.post-content .wp-block-gallery.has-nested-images figcaption { flex-basis: 100%; flex-grow: 1; text-align: center; }

/* Tabelle (4 Vorkommen, alle has-fixed-layout; Blindtabellen aus Befund D-12 bleiben 1:1). */
.post-content .wp-block-table { overflow-x: auto; }
.post-content .wp-block-table table { border-collapse: collapse; width: 100%; }
.post-content .wp-block-table td, .post-content .wp-block-table th { border: 1px solid; padding: .5em; }
.post-content .wp-block-table .has-fixed-layout { table-layout: fixed; width: 100%; }
.post-content .wp-block-table .has-fixed-layout td,
.post-content .wp-block-table .has-fixed-layout th { word-break: break-word; }

/* Bricks-Knöpfe im Fliesstext (Merksatz aus Phase 2: sie tragen „btn--m btn--primary" ohne
   .btn). Im Original dürfen sie umbrechen und sind auf die Breite ihres Umfelds begrenzt; bei
   uns setzt 30-buttons.css „white-space: nowrap" ohne Begrenzung. In der Tabelle von Beitrag
   13261 fällt das bei 600 px auf: der Knopf „Anmelden" bleibt einzeilig und die Zeile ist
   13 px zu niedrig (Original 67,28, Nachbau 54,28). Die Regel steht bewusst nur hier – die
   Knöpfe der Baukastenblöcke sind in Phase 2 so gemessen und abgenommen worden; global
   angleichen wäre eine eigene Messung wert (Hinweis für Task 12). */
.post-content [class^="btn--"],
.post-content [class*=" btn--"] { white-space: normal; max-width: 100%; }

/* Zitat (6 Vorkommen). blockquote selbst ist seit Phase 0 global gestylt (10-base.css). */
.post-content .wp-block-quote { box-sizing: border-box; overflow-wrap: break-word; }
.post-content .wp-block-quote > cite { display: block; }

/* Spalten (9 Vorkommen). Der Abstand ist der Blockvorgabewert von core/columns (2 em, im
   Original nachgemessen: 32 px bei 1440 und 26 px bei 600 px), unter 782 px stehen die
   Spalten untereinander. */
.post-content .wp-block-columns {
  box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: normal; gap: 2em;
}
@media (min-width: 782px) {
  .post-content .wp-block-columns { flex-wrap: nowrap; }
  .post-content .wp-block-columns > .wp-block-column { flex-basis: 0; flex-grow: 1; }
  .post-content .wp-block-columns > .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
}
@media (max-width: 781px) {
  .post-content .wp-block-columns > .wp-block-column { flex-basis: 100%; }
}
.post-content .wp-block-column { flex-grow: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }

/* Knopfgruppe (3 Vorkommen). Der Link trägt „wp-element-button" und bekommt im Original das
   Aussehen der Kernblöcke; unsere Knopfklassen (30-buttons.css) gelten dafür nicht. */
.post-content .wp-block-buttons { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: .5em; }
.post-content .wp-block-button { box-sizing: border-box; }
.post-content .wp-block-button__link {
  display: inline-block; box-sizing: border-box; text-align: center; text-decoration: none;
  padding: calc(.667em + 2px) calc(1.333em + 2px);
  background-color: var(--primary); color: var(--white);
  border-radius: var(--btn-radius); word-break: break-word;
}
.post-content .wp-block-button__link:hover { color: var(--white); }

/* Akkordeon (4 Vorkommen, alle ohne Inhalt – Befund D-12, 1:1 übernommen). */
.post-content .wp-block-accordion { box-sizing: border-box; }
.post-content .wp-block-accordion-heading__toggle {
  align-items: center; background: none; border: none; color: inherit; cursor: pointer;
  display: flex; font: inherit; letter-spacing: inherit; line-height: inherit;
  overflow: hidden; text-align: inherit; width: 100%;
  /* Im Original padding: var(--wp--preset--spacing--20, 1em) – die Variable ist gesetzt und
     ergibt 0,44 rem (WordPress-Grundwert), nicht die 1 em des Rückfalls. Ohne diesen Wert ist
     das Akkordeon 28,56 px zu hoch (bei 1440 px an Beitrag 13261 nachgemessen). */
  padding: .44rem 0;
}
.post-content .wp-block-accordion-heading__toggle:not(:focus-visible) { outline: none; }
.post-content .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: underline; }
.post-content .wp-block-accordion-heading__toggle-title { flex: 1; }
.post-content .wp-block-accordion-heading__toggle-icon {
  align-items: center; display: flex; height: 1.2em; justify-content: center; width: 1.2em;
}
.post-content .wp-block-accordion-panel[hidden] { margin-block-start: 0; }

/* Einbettung (3 Vorkommen, YouTube). Der iframe steckt in der Einwilligungs-Hülle aus Phase 2
   (.cb-embed__frame, 93-embed-blocks.css); sie bringt das Seitenverhältnis 16:9 selbst mit,
   deshalb braucht „wp-embed-aspect-16-9" hier keine eigene Regel. */
.post-content .wp-block-embed { margin-left: 0; margin-right: 0; }
.post-content .wp-block-embed__wrapper { position: relative; }

/* ==== 101-about.css ==== */
/* „Über NTi" (WP 1282/8002/8391, frei in Bricks gebaut).

   Alle Werte am gerenderten Original gemessen (eigenes Headless-Chrome über das
   DevTools-Protokoll, /en/company/about-nti, /de/unternehmen/ueber-nti,
   /fr/societe/a-propos-de-nti bei 1440 und 600 px, nach ausgelöster Nutzerinteraktion, damit
   die Zähler ihre Endwerte zeigen). Die Klassennamen folgen den globalen Bricks-Klassen
   (`values-list*`, `keydata*`); Team- und Zeitstrahl-Abschnitt haben im Original nur
   ID-Regeln (#brxe-…), dort sind die Namen neu gewählt.
 */

/* ---------------------------------------------------------------- Kopf (Abschnitt 1) */
/* Der Kopf ist dieselbe Bricks-Vorlage wie bei den Anwendungsseiten (partials/page-title,
   Variante „application"), hier aber mit einer Mindesthöhe von 60vh – die steht im Original
   nur am Element dieser Seite (#brxe-epfkof), die Anwendungsseiten haben sie nicht. Deshalb
   über die Klasse des <body>, die das Layout aus dem Vorlagennamen bildet. */
body.about .page-head--application {
  min-height: 60vh;
  display: flex; flex-direction: column; justify-content: center; row-gap: 0;
}

/* Anders als bei den Anwendungsseiten (für die partials/page-title gebaut ist) stecken
   Überschrift und Brotkrumen hier im Original in einem <hgroup> mit .5em Zeilenabstand; zum
   Kurztext bleibt es beim vollen Containerabstand. Ohne diese zwei Zeilen ist der Kopfinhalt
   22 px höher und die Überschrift sitzt 11 px zu tief. Markup unverändert. */
body.about .page-head--application .page-head__group { row-gap: .5em; }
body.about .page-head--application .page-head__intro { margin-block-start: calc(var(--content-gap) - .5 * var(--text-m)); }
/* (im Kurztext wäre .5em wegen font-size: 1.2em zu gross – deshalb ausdrücklich --text-m) */

/* ---------------------------------------------------------------- Team (Abschnitt 2) */
/* Sektion hellblau, Container 60 rem breit (im Original #brxe-vuuvwe / #brxe-pgmold). */
.section--team { background-color: var(--primary-ultra-light); }
.container--team { width: 60rem; max-width: 100%; }

.peoplegrid {
  display: grid; grid-template-columns: var(--grid-3); gap: var(--grid-gap);
  margin: 0; padding-left: 0; list-style: none;
}
@media (max-width: 768px) { .peoplegrid { grid-template-columns: var(--grid-2); } }
@media (max-width: 380px) { .peoplegrid { grid-template-columns: var(--grid-1); } }

/* Kachel: Wellengrafik über hellblauem Grund, darüber eine Fläche mit 80 % Deckkraft
   (im Original ein ::before mit linear-gradient aus --primary-light-trans-80). Die Grafik
   liegt seit Phase 2 unter /img/, sie ist kein Inhalt. */
.peoplegrid__li {
  display: flex; flex-direction: column; row-gap: var(--space-s);
  padding: var(--space-m); border-radius: var(--radius);
  background-color: var(--primary-light);
  background-image: url("/img/nti-waves.webp");
  background-position: center center; background-size: cover;
  position: relative; overflow: hidden;
}
.peoplegrid__li::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--primary-light-trans-80), var(--primary-light-trans-80));
}
:where(.peoplegrid__li > *) { position: relative; z-index: 10; }

/* Quadratisches Foto über die volle Kachelbreite (1440: 240 px, 600: 234,38 px). */
.peoplegrid__image { width: 100%; border-radius: var(--radius); overflow: hidden; }
.peoplegrid__image img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%; border-radius: inherit; }

/* Zweite Spalte (3 rem) bleibt im Original leer; sie verschmälert den Namen und entscheidet
   damit über die Zeilenumbrüche – deshalb steht sie auch bei uns. */
.peoplegrid__contents { display: grid; grid-template-columns: 1fr 3rem; gap: 0; }
/* Wie in jedem Bricks-Block sind die Kinder nur so breit wie ihr Inhalt (align-items:
   flex-start); ohne diese Zeile ist der Name 192 statt 130 px breit. */
.peoplegrid__name { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-xs); }

/* ---------------------------------------------------------------- Werte und Kennzahlen (3) */
/* Zwei Container in einer Sektion, dazwischen ein Sektionsabstand (1440: 120 px). */
.section--values { display: flex; flex-direction: column; row-gap: var(--section-space-m); }

/* Globale Bricks-Klasse des Einleitungstextes. */
.text-intro--xl { font-size: var(--h3); font-weight: 300; line-height: 1.4; }

.values-list {
  display: grid; grid-template-columns: var(--grid-4); gap: var(--grid-gap);
  width: 50rem; max-width: 100%; margin: 0 auto; padding-left: 0; list-style: none;
  align-items: center; align-content: center; justify-content: center;
}
@media (max-width: 550px) { .values-list { grid-template-columns: var(--grid-2); } }
.values-list__li {
  display: flex; flex-direction: column; align-items: center;
  row-gap: var(--space-xs); text-align: center;
}
.values-list__iconwrapper { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; }
/* Der grüne Kreis ist 20 % der Kachelbreite; das SVG darin bleibt – anders als sonst auf der
   Seite – ein Inline-Bild. Nur dadurch ist der Kreis so hoch wie eine Textzeile (1440: 40 px
   statt 35,5 px), genau wie im Original. */
.values-list__image {
  width: 20%; margin: 0; padding: .5em;
  background-color: var(--secondary-medium); border-radius: 100vmax;
}
/* „vertical-align: middle" hält das Bild innerhalb der Zeilenbox: sonst wächst der Kreis auf
   44,5 statt 40 px. Den Radius gibt Bricks von der Hülle an das Bild weiter. */
.values-list__image img { display: inline; vertical-align: middle; border-radius: inherit; }

.values-map { margin: 0; }
.values-map img { width: 100%; height: auto; }

/* Kennzahlen: Kasten mit Milchglas, der um das Dreifache von --space-l über die Weltkarte
   geschoben wird (1440: −135 px). */
.keydata {
  display: grid; grid-template-columns: var(--grid-4); gap: 0;
  width: 70rem; max-width: 100%; margin: calc(var(--space-l) * -3) auto 0;
  padding: var(--space-m);
  border: var(--border-size) solid var(--border-color-dark); border-radius: var(--radius);
  background-color: var(--white-trans-60); backdrop-filter: blur(1em);
  list-style: none;
}
.keydata__li {
  display: flex; flex-direction: column; align-items: center; row-gap: 0;
  text-align: center; font-weight: 600;
  border-right: var(--border-size) solid var(--border-color-dark);
}
.keydata__li:last-child { border-right: none; }
/* Verlaufsschrift wie im Original (Hintergrund auf den Text zugeschnitten). */
.keydata-counter {
  font-size: var(--h1); font-weight: 300; line-height: 1; text-align: center;
  background-image: linear-gradient(45deg, var(--primary-medium), var(--secondary-medium));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------- Familienfreundlich (4) */
/* Die Sektion hat oben und unten keinen Abstand; ihr Verlauf färbt die untere Hälfte dunkel
   und leitet in den dunklen Zeitstrahl über. */
.family-section {
  padding-block: 0;
  background-image: linear-gradient(transparent 50%, var(--neutral) 50%);
}
.family-section__box {
  row-gap: 0; overflow: hidden; position: relative;
  background-color: var(--white);
  border: var(--border-size) solid var(--border-color-dark); border-radius: var(--radius);
}
.family-section__grid {
  display: grid; grid-template-columns: var(--grid-1-2); gap: 0;
  position: relative; z-index: 10;
}
@media (max-width: 550px) { .family-section__grid { grid-template-columns: var(--grid-1); } }
.family-section__text {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
  padding: var(--space-l); position: relative;
}
/* Globale Bricks-Klasse „text-intro" des Fliesstextes. */
.family-section__intro { font-size: 1.2em; }
/* Medienspalte: Stimmungsbild als Hintergrund, darüber Weiss mit 70 % Deckkraft, mittig das
   Label. Sie steht im Quelltext hinter dem Text und wird nach vorn gezogen – unter 550 px
   rutscht sie im Original wieder darunter. */
.family-section__media {
  order: -1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; row-gap: var(--content-gap);
  padding: var(--space-xl); position: relative;
  background-image: var(--family-bg); background-size: cover; background-position: center center;
}
.family-section__media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--white-trans-70), var(--white-trans-70));
}
:where(.family-section__media > *) { position: relative; }
@media (max-width: 550px) { .family-section__media { order: 2; } }
.family-section__label { margin: 0; }

/* ---------------------------------------------------------------- Zeitstrahl (5) */
.section--history { background-color: var(--neutral); color: var(--white); }
.section--history h2 { color: var(--white); }
.history-listing {
  display: grid; grid-template-columns: var(--grid-1); gap: var(--space-l);
  max-width: 50rem; margin: 0 auto; padding-left: 0; list-style: none;
}
.history-listing__year-li { display: grid; gap: 1em; }
/* Jahreszahl als Punkt auf der gestrichelten Linie: grüner Kreis mit dunklem Rand und
   dünnem Schlagschatten (im Original ein ::before am Überschrift-Element). */
.history-listing__year {
  display: flex; align-items: center; line-height: 1; padding-top: .2em;
  color: var(--secondary); font-size: 1em; font-weight: 600;
}
.history-listing__year::before {
  --size: 1em;
  content: ""; display: inline-flex; width: var(--size); height: var(--size);
  background-color: var(--secondary); color: var(--secondary);
  margin-top: -.3em; margin-right: .5em;
  border: .2em solid var(--neutral); border-radius: 100vmax; box-shadow: 0 0 0 2px;
}
/* Die innere Liste ist im Original 100 % breit UND um .5em eingerückt; sie ragt dadurch um
   diese 8 px über den Zeitstrahl hinaus. 1:1 übernommen. */
.history-listing__entries {
  display: flex; flex-direction: column; row-gap: var(--space-xs);
  width: 100%; margin: 0 0 0 .5em; padding-left: var(--space-m);
  border-left: var(--border-size) dashed var(--secondary); list-style: none;
}
.history-listing__entry { display: grid; grid-template-columns: auto 1fr; gap: .4em; }
.history-listing__entry::before { content: "•"; color: var(--white); }

/* ---------------------------------------------------------------- Downloads (6) */
/* Überschrift und Textblöcke sind im Original nur so breit wie ihr Inhalt – wie in jedem
   Bricks-Container (dieselbe Zeile steht in 97-product.css für .section--faqs/--downloads). */
.downloads-section .container { align-items: flex-start; }

/* ==== 102-careers.css ==== */
/* Karriere (WP 1283/8399/8355) – Kopf mit Einleitung und Jobliste.
   Werte 1:1 aus den globalen Bricks-Klassen der Seite
   (docs/analysis/wp-export/opt-bricks_global_classes.decoded.json: oiurvj joblisting,
   spesrv __job, seiqof __job-title, dqzhqs __meta, wvbupq __department, qdigtn __date,
   pdpsfp __job-infos, mzella __icon-group, cyqxzz __text, dgpbuc __icon) und am gerenderten
   Original nachgemessen. */

/* Kopf: die Variante „plain“ zeigt hier zusätzlich den Kurztext. Im Original ist es ein
   Bricks-Textelement mit der globalen Klasse „text-intro“ (1.2em) und _widthMax 65ch –
   dieselben zwei Werte wie bei der Variante „application“ (88-content-blocks.css). Weil der
   Container mittig ausrichtet, ist der Kasten so breit wie sein Text, nicht 65ch. */
.page-head--plain .page-head__intro { max-width: 65ch; font-size: 1.2em; }

/* Der Abschnitt der Jobliste hat im Original oben keinen Abstand (_padding top: 0) – der
   Kopf darüber bringt seinen eigenen mit. */
.section--jobs { padding-top: 0; }

/* Die Liste: drei Spalten, ab 1280 px zwei, ab 768 px eine. Kein Aufzählungszeichen, weil
   die <li> wie im Original ein Flex-Kasten sind (display: flex hebt display: list-item auf). */
.joblisting {
  display: grid; grid-template-columns: var(--grid-3); gap: var(--grid-gap);
  padding-left: 0; margin-top: 0; margin-bottom: 0;
}
@media (max-width: 1280px) { .joblisting { grid-template-columns: var(--grid-2); } }
@media (max-width: 768px) { .joblisting { grid-template-columns: var(--grid-1); } }

.joblisting__job {
  display: flex; flex-direction: column; row-gap: var(--space-s);
  padding: var(--space-m); border-radius: var(--radius);
  border: var(--border-size) solid var(--border-color-dark);
}

.joblisting__job-title { font-size: var(--h3); }
.joblisting__job-title small { opacity: .6; font-size: var(--text-m); }

/* Zeile „IN SALES • JULY 02 2026“: steht im Quelltext hinter der Überschrift und wird per
   order über sie gezogen (so wie im Original). Zwischen den beiden Feldern kein Spaltenspalt –
   den Abstand macht der Aufzählungspunkt mit seinen 1 em Aussenabstand. */
.joblisting__meta {
  order: -1; display: flex; flex-direction: row; flex-wrap: wrap;
  column-gap: 0; row-gap: var(--content-gap);
  font-size: var(--text-s); text-transform: uppercase; font-weight: 600;
}
.joblisting__department { color: var(--primary); }
.joblisting__date span { margin-inline: 1em; }

.joblisting__job-infos { display: flex; flex-direction: row; gap: var(--content-gap); }
/* Symbol links, Text rechts: im Quelltext steht der Text zuerst (er trägt die Microdata),
   die Reihenfolge macht das Raster – wie im Original. */
.joblisting__icon-group {
  display: grid; grid-template-columns: auto 1fr; gap: calc(var(--space-xs) / 2);
}
.joblisting__text { order: 5; }
.joblisting__icon { order: -1; display: block; font-size: var(--text-l); line-height: 1; }
/* „height: 1em“ trifft die Zeichenhöhe der Icon-Schrift des Originals, die Breite folgt aus
   der viewBox (= Vorschubbreite des Zeichens) und ist damit dieselbe Rasterspalte. */
.joblisting__icon svg { display: block; height: 1em; width: auto; }

/* Der Link ist im Original ein Bricks-Textlink ohne globale Klasse: unterstrichen in der
   Grundfarbe, so breit wie sein Text. */
.joblisting__link { align-self: flex-start; display: flex; align-items: center; gap: .3em; }

/* ==== 103-events.css ==== */
/* Events-Seite (WP 1284/8360/8375) – Liste der kommenden Veranstaltungen.

   Werte 1:1 aus den globalen Bricks-Klassen der Seite
   (docs/analysis/wp-export/opt-bricks_global_classes.decoded.json: oxfndc listing-events,
   xpbldi __li, qrrpdw __event-article, hhnxhm __contents, yyqnzl __text-wrapper,
   sjetki __heading, hnbkum __text, thedrk __linkwrapper, rujixe __text-link,
   aweumt __metadata, hvsyrw __event-type, aajted __divideer, xhfdxq __date-small,
   hcmrmq __time-small, ldnavl __date-box-big, witmaw __day, oeskqu __month, dctunb __year,
   kzmlil event-language-info, syaaji event-language-info__flag) und am gerenderten Original
   nachgemessen. Bricks-Grundlagen sind ausgeschrieben: das Element „Block" ist dort
   `display: flex; flex-direction: column; align-items: flex-start; width: 100%`, das Element
   „Div" ein schlichtes <div>, und `:where(.brxe-image) img` ist `width: 100%; height: 100%`.

   Abgrenzung zu 86-news.css: dort steht die **Kurzform** derselben Klassen – die einzeilige
   Event-Zeile des News-Blocks der Startseite (ein <div class="listing-events"> mit Verlauf).
   Die Archivfassung ist ein <ul> mit Karten; deshalb hängen die Regeln hier an `ul.listing-events`
   bzw. am nur hier vorhandenen `.listing-events__event-article` und gewinnen so gegen die
   Startseiten-Regeln, ohne sie zu verändern. Gemeinsames (z. B. `__date-small` verschwindet
   unter 550 px) bleibt in 86-news.css. */

/* Der Abschnitt hat im Original oben keinen Abstand (_padding top: 0) – den bringt der Kopf mit. */
.section--events { padding-top: 0; }

/* Die Liste: eine Spalte, Abstand --space-l. Der Container ist 70 rem breit (container-medium).
   Alle Werte der Startseiten-Fassung (Verlauf, Innenabstand, Radius, 3-1-Raster) werden hier
   zurückgenommen. */
ul.listing-events {
  display: grid; grid-template-columns: var(--grid-1); align-content: normal;
  gap: var(--space-l); margin-block: 0; padding: 0;
  background-image: none; border-radius: 0; list-style: none;
}

/* Karte: links der Datumskasten (1fr), rechts der Inhalt (3fr). Das Original benutzt dafür die
   ACSS-Variable --grid-1-3, die es bei uns nicht gibt; ihr Wert steht hier ausgeschrieben
   (automatic-variables.css: minmax(0, 1fr) minmax(0, 3fr)). Der Spaltenabstand steht in keiner
   Klasse – es ist der Standardabstand, den Bricks jedem Raster-Element mitgibt (gemessen:
   30 px bei 1440, 18,75 px bei 600 – das ist --grid-gap). Unter 550 px untereinander ohne
   Abstand. */
.listing-events__event-article {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--grid-gap);
}
@media (max-width: 550px) {
  .listing-events__event-article { grid-template-columns: var(--grid-1); gap: 0; }
}

/* Inhaltskarte mit Rahmen. `overflow: hidden` hält die Flaggen-Ecke im Radius. */
.listing-events__contents {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-s);
  padding: var(--space-m);
  border: var(--border-size) solid var(--neutral-light); border-radius: var(--radius);
  position: relative; overflow: hidden;
}

.listing-events__text-wrapper {
  display: flex; flex-direction: column; row-gap: calc(var(--space-xs) / 2); width: 100%;
}
.listing-events__heading { font-size: 1.2em; font-weight: 500; width: 100%; max-width: 99ch; margin: 0; }

.listing-events__linkwrapper {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-m);
}
/* „Website“-Link mit Weltkugel – im Bestand nie belegt (Analyse 4.1). */
.listing-events__text-link {
  display: inline-flex; align-items: baseline; column-gap: .4em;
  text-decoration: none; font-weight: 500;
}

/* Zeile „AUSSTELLUNG • 08.09.2026 – 12.09.2026“: steht im Quelltext hinter Text und Knopf und
   wird per order über beide gezogen (wie im Original). */
.listing-events__event-article .listing-events__metadata {
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: flex-start; align-items: center; column-gap: var(--space-xs);
  width: 100%; padding-top: 0; order: -1;
  font-size: .8em; font-weight: 600; text-transform: uppercase;
}
@media (max-width: 768px) { .listing-events__event-article .listing-events__metadata { flex-wrap: nowrap; } }
.listing-events__event-type { color: var(--primary); }
@media (max-width: 550px) { .listing-events__divideer { display: none; } }
/* Datum und Uhrzeit je eine nicht umbrechende Zeile (das Datum verschwindet unter 550 px –
   die Regel dafür steht in 86-news.css und gilt für beide Fassungen). */
.listing-events__time-small { display: flex; flex-direction: row; flex-wrap: nowrap; column-gap: 0; }

/* Flaggen-Ecke oben rechts in der Inhaltskarte. */
.event-language-info {
  position: absolute; top: 0; right: 0;
  padding: calc(var(--space-xs) / 2) var(--space-xs);
  border: var(--border-size) solid var(--neutral-light);
  border-bottom-left-radius: var(--radius);
}
.event-language-info__flag { display: inline-block; width: 1.3em; height: 1em; margin: 0; }
/* `display: inline` und `vertical-align: middle` nehmen die globale Regel `img { display: block }`
   aus 10-base.css zurück: mit einem Block-Bild hätte das <figure> keine Zeilenschachtel mehr,
   seine Grundlinie läge an der Unterkante und die Ecke wäre 1 px höher als im Original. */
.event-language-info__flag img { width: 100%; height: 100%; display: inline; vertical-align: middle; }

/* Datumskasten links, rechtsbündig, mit Trennlinie zur Karte. Der Rahmen färbt sich beim
   Überfahren der Karte ein (Original: _cssCustom an .listing-events__event-article). */
.listing-events__date-box-big {
  display: flex; flex-direction: column; align-items: flex-end; row-gap: 0;
  order: -1; text-align: right; line-height: 1.2;
  padding-top: var(--space-m); padding-right: var(--space-m);
  border-right: calc(var(--border-size) * 2) solid var(--neutral-light);
  transition: all .3s ease;
}
.listing-events__event-article:hover .listing-events__date-box-big { border-color: var(--primary); }
.listing-events__day { font-size: calc(var(--h2) * 1.3); font-weight: 100; line-height: 1; }
.listing-events__month { font-size: var(--h3); font-weight: 100; }
.listing-events__year { font-size: var(--h3); font-weight: 300; }
@media (max-width: 550px) {
  .listing-events__date-box-big {
    flex-direction: row; align-items: center; text-align: center;
    padding-top: var(--space-xl); padding-right: 0; border: 0; border-style: none;
  }
}

/* ==== 104-know-how.css ==== */
/* ================================================================ Know-how-Übersicht
   Bricks-Seite 5777 (EN) / 11833 (DE) / 11835 (FR), Analyse 2.2. Die Werte stammen aus den
   globalen Bricks-Klassen (docs/analysis/wp-export/opt-bricks_global_classes.decoded.json:
   ieihwh support-ul, wlpwph __item-li, deirdt __title-linked, yukrbg __meta-information,
   tlghgq __fake-link, ozpnrg __icon) und aus dem WPCodeBox-Schnipsel 1 (clickable-box).
   Die Facettenzeile ergänzt Task 7 in dieser Datei. */

/* Globale Klasse des Originals, die es im Nachbau bisher nur hier gibt (WPCodeBox-Schnipsel 1).
   Sobald sie eine zweite Seite braucht, gehört sie nach 80-utilities.css – so wie Review 2
   „text-intro" dorthin verschoben hat, als Händlersuche und Standortkopf sie ebenfalls
   brauchten. */
/* „clickable-box": das Pseudo-Element des Links legt sich über die ganze Kachel, damit die
   Kachel anklickbar ist, ohne dass „learn more" ein zweiter Link sein muss. Der Link selbst
   wird dafür ausdrücklich auf `static` gesetzt, sonst wäre er der Bezugsrahmen. */
.clickable-box:is(a), .clickable-box a { position: static !important; }
.clickable-box:is(a)::after, .clickable-box a::after { content: ""; position: absolute; inset: 0; z-index: 100; }

/* ------------------------------------------------------------------------ Abschnitt */
/* Ein Abschnitt, zwei Container: oben das Intro (schmal, mittig), darunter Facettenzeile und
   Liste in voller Breite. Der Abschnitt beginnt im Original ohne oberen Abstand – der Abstand
   von einer Abschnittshöhe liegt ZWISCHEN den beiden Containern (Bricks-Abschnitte sind
   Flex-Spalten mit Zeilenabstand). Ohne diese Unterscheidung stünde das Intro 120 px zu tief
   (bei 1440 px nachgemessen); die Liste stünde zufällig richtig. */
.section--know-how { padding-top: 0; display: flex; flex-direction: column; row-gap: var(--section-space-m); }

/* ----------------------------------------------------------------------- Kachelliste */
/* Drei Spalten, ab 768 px zwei, ab 380 px eine (Bricks-Haltepunkte mobile_portrait und
   mobile_small dieser Seite). Kein Aufzählungszeichen, weil die <li> Flex-Kästen sind
   (display: flex hebt display: list-item auf) – wie bei .joblisting in 102-careers.css. */
.support-ul {
  display: grid; grid-template-columns: var(--grid-3); gap: var(--grid-gap);
  align-items: initial; padding-left: 0; margin-top: 0; margin-bottom: 0;
}
@media (max-width: 768px) { .support-ul { grid-template-columns: var(--grid-2); } }
@media (max-width: 380px) { .support-ul { grid-template-columns: var(--grid-1); } }

/* Die Kachel erbt Rahmen, Radius, weissen Grund und volle Höhe von .bits-listing__article
   (97-product.css) und ändert hier nur Ausrichtung und Polster. */
.support-ul__item-li {
  text-align: center; align-items: center;
  padding: var(--space-l) var(--space-m);
  row-gap: var(--space-xs); position: relative; transition: all .3s ease;
}
.support-ul__item-li h2 a { transition: all .3s ease; }
.support-ul__item-li:hover { background-color: var(--secondary-ultra-light); }

.support-ul__title-linked { font-size: var(--text-m); font-weight: 600; max-width: 100ch; margin-top: var(--space-s); }
.support-ul__title-linked a { text-decoration: none; }

/* Die Meta-Zeile wird nach unten geschoben, damit „learn more" in allen Kacheln einer Zeile
   auf gleicher Höhe steht (im Original „margin-top: auto"). */
.support-ul__meta-information { font-size: .8em; text-transform: uppercase; margin-top: auto; }
/* „learn more" ist nur Text – die Unterstreichung lässt es wie einen Link aussehen. */
.support-ul__fake-link { text-decoration: underline; }

/* Das Symbol steht im Quelltext zuletzt und optisch zuoberst (order: -1). Im Original ist es
   ein Schriftzeichen der Themify-Schrift in einem 5rem-Kreis; wir zeichnen es als Inline-SVG
   (partials/icons-know-how). Weil beide Zeichen eine Vorschubbreite von einem Geviert haben
   und die viewBox das ganze Geviert zeigt, steht das SVG mit 1em × 1em an genau derselben
   Stelle wie das Schriftzeichen (Zeilenhöhe 1 in der Themify-Grundregel des Originals). */
.support-ul__icon {
  order: -1; font-size: var(--text-xxl); width: 5rem; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 100vmax; background-color: var(--secondary-medium);
}
.support-ul__icon svg { display: block; width: 1em; height: 1em; }

/* ------------------------------------------------------------------ Facettenzeile (Task 7) */
/* Bricks-Block „smkyau": ein Raster mit drei Spalten (--grid-3), ab 1280 px zwei
   (tablet_portrait dieser Seite), ab 768 px eine (mobile_portrait) mit engerem Abstand
   (--space-xs). Ohne eigene Angabe ist der Rasterabstand der Inhaltsabstand (--content-gap,
   30 px bei 1440). Die vier Zellen sind die Facetten in DOM-Reihenfolge Suche, Typ, Thema,
   Reset; die Reset-Zelle liegt in der zweiten Zeile und bleibt auch ohne Reset stehen: 0 px
   hoch, aber mit Zeilenabstand – nachgemessen 91,58 px Zeilenhöhe bei 1440 (61,58 + 30 + 0)
   und 207,41 px bei 600. Der Abstand zur Liste ist der row-gap des Containers (20-layout.css).
   Die Werte der Bedienelemente stammen aus dem WPCodeBox-Schnipsel 54 (`_facets`) und der
   Grundregel von WP Grid Builder (wp-grid-builder/public/css/facets.css): Rahmen
   var(--border-size) solid var(--border-color-dark), Radius 1em (--wpgb-border-radius),
   Polster wie Buttons (1.2em / 1.8em / .9em), Schrift 16 px auf 26 px Zeile in Feldern und
   Beschriftungen; die Schaltflächen erben ihre Schriftgrösse (16 px bei 1440, 13 px bei 600),
   nur ihre Beschriftung ist fest 16 px – so misst der Knopf 61,58 bzw. 55,28 px. */
.know-how-filter { display: grid; grid-template-columns: var(--grid-3); gap: var(--content-gap); }
@media (max-width: 1280px) { .know-how-filter { grid-template-columns: var(--grid-2); } }
@media (max-width: 768px) { .know-how-filter { grid-template-columns: var(--grid-1); gap: var(--space-xs); } }
.know-how-filter .wpgb-facet { position: relative; width: 100%; min-width: 0; }
.know-how-filter .wpgb-facet *, .know-how-filter .wpgb-facet ::before, .know-how-filter .wpgb-facet ::after { box-sizing: border-box; }
.know-how-filter svg { pointer-events: none; }

/* Suchfeld: Feldschrift #9e9e9e, Platzhalter #757575 (beides gemessen), die Lupe liegt als
   absolutes SVG links im Polster (16 px, 10 px vom Rand, senkrecht mittig). Der eingebaute
   Lösch-Knopf des Suchfelds ist wie im Original abgeschaltet. Fokus: Rahmen wird dunkel
   (WPGB); die Fokusumrandung des Browsers bleibt zusätzlich erhalten. */
.know-how-filter .wpgb-input {
  display: block; width: 100%; position: relative; appearance: none; background: none; box-shadow: none;
  border: var(--border-size) solid var(--border-color-dark); border-radius: 1em;
  padding: var(--btn-padding-block) var(--btn-padding-inline) .9em; margin: 0;
  font-size: 16px; font-weight: 400; line-height: 26px; min-height: 26px; height: auto;
  color: #9e9e9e; vertical-align: middle; transition: border-color .1s ease;
}
.know-how-filter .wpgb-input::placeholder { color: #757575; opacity: 1; }
.know-how-filter .wpgb-input::-webkit-search-cancel-button, .know-how-filter .wpgb-input::-webkit-search-decoration { appearance: none; }
.know-how-filter .wpgb-input:focus, .know-how-filter select.wpgb-select:focus { border-color: #282828; }
.know-how-filter .wpgb-input-icon {
  position: absolute; left: 0; top: calc(50% - 8px); width: 16px; height: 16px; margin: 0 8px 0 10px;
  box-sizing: content-box; overflow: visible; color: #c8c8c8; fill: none; stroke: currentColor; stroke-width: 3;
}

/* Typ-Schaltflächen: Liste mit 8 px Abstand (negativer unterer Rand fängt die letzte Zeile
   ab), Knöpfe weiss mit Rahmen, aktiv Primärfarbe mit weisser Schrift. Der Link erbt die
   Schriftfarbe und -grösse des Umfelds, die Beschriftung ist fest 16 px auf 26 px. */
.know-how-filter .wpgb-inline-list { display: flex; flex-wrap: wrap; justify-content: flex-start; list-style: none; margin: 0 0 -8px; padding: 0; }
.know-how-filter .wpgb-inline-list li { display: list-item; list-style: none; margin: 0 8px 8px 0; padding: 0; }
.know-how-filter .wpgb-inline-list .wpgb-button {
  display: flex; flex-direction: row; align-items: center; flex-grow: 1; position: relative;
  border: var(--border-size) solid var(--border-color-dark); border-radius: 1em;
  padding: var(--btn-padding-block) var(--btn-padding-inline) .9em; margin: 0;
  background-color: var(--white); color: inherit; text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.know-how-filter .wpgb-button-label { display: block; flex-grow: 1; font-size: 16px; line-height: 26px; margin: 0; padding: 0 8px; word-break: break-word; }
.know-how-filter .wpgb-inline-list .wpgb-button[aria-current="true"] { background-color: var(--primary); color: #fff; }

/* Themen-Select: das <label> ist der Bezugsrahmen (Flex, relativ), das Select selbst ist
   content-box mit 26 px Inhaltshöhe und schrumpft als Flex-Kind auf die Zellenbreite (im
   Original identisch: 380,41 px Inhalt bei 440 px Zelle). Rechts der Trennstrich und der
   Pfeil von WP Grid Builder in #c8c8c8; der native Pfeil ist abgeschaltet. */
.know-how-filter .wpgb-select-facet label { display: flex; position: relative; margin: 0; color: #9e9e9e; cursor: default; }
.know-how-filter select.wpgb-select {
  appearance: none; background: none; background-image: none; box-shadow: none; box-sizing: content-box;
  width: 100%; height: 26px; min-height: 26px; max-height: none; position: relative;
  border: var(--border-size) solid var(--border-color-dark); border-radius: 1em;
  padding: var(--btn-padding-block) var(--btn-padding-inline) .9em; margin: 0;
  font-size: 16px; font-weight: 400; line-height: 26px; color: var(--neutral); background-color: #fff;
  cursor: pointer; vertical-align: middle; transition: border-color .1s ease;
}
.know-how-filter select.wpgb-select::-ms-expand { display: none; }
.know-how-filter .wpgb-select-controls { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; padding: 0; pointer-events: none; color: #c8c8c8; }
.know-how-filter .wpgb-select-separator { align-self: stretch; width: 1px; margin: 10px 0; background: currentColor; }
.know-how-filter .wpgb-select-controls svg { width: 24px; height: 24px; margin: 8px 8px 8px 6px; padding: 0; fill: none; stroke: currentColor; stroke-width: 2.5; transition: color .15s ease; }

/* Reset: im Original ein <button> (18 px / 20 px, Rot #f96876 = --wpgb-red von WP Grid
   Builder, weisse Schrift), der bei leerem Filter „disabled" ist und per CSS verschwindet –
   bei uns ein Link, der nur bei aktivem Filter ausgegeben wird. Die Zelle trägt wie das
   Bricks-Element margin-left: auto (ohne sichtbare Wirkung, die Zelle ist ohnehin 440 px). */
.know-how-filter .wpgb-reset-facet { margin-left: auto; }
.know-how-filter .wpgb-reset {
  display: inline-block; box-sizing: border-box; appearance: none; text-decoration: none; text-align: start;
  border: var(--border-size) solid var(--border-color-dark); border-radius: 1em;
  padding: var(--btn-padding-block) var(--btn-padding-inline) .9em; margin: 0;
  font-size: 18px; font-weight: 500; line-height: 20px; letter-spacing: 0; text-transform: none;
  color: #fff; background-color: #f96876; cursor: pointer; transition: background-color .25s ease;
}
/* Absende-Schaltfläche: nur ohne JavaScript sichtbar (site.js blendet sie aus, die Selects
   senden dann selbst); ihre Darstellung kommt aus 30-buttons.css ([type="submit"]). */
.know-how-filter__submit { justify-self: start; }

/* ==== 105-locations.css ==== */
/* Phase 4, Task 8 – Standortseite (Bricks-Vorlage 5132 / 10922 / 10924).

   Alle Werte sind am Original nachgemessen (eigener Headless-Chrome über das
   DevTools-Protokoll, 1440 und 600 px, EN/DE/FR), nicht geschätzt. Der Kopf benutzt die
   Klassen von partials/archive-title und braucht hier nichts.

   Zwei Bricks-Grundregeln muss man kennen, sonst stimmen die Breiten nicht:
     .brxe-block     { display: flex; flex-direction: column; align-items: flex-start;
                       width: 100%; row-gap: var(--content-gap) }
     .brxe-heading   trägt width: 100%
   Ein „block" ist also eine Flex-Spalte, deren Kinder nur so breit werden wie ihr Inhalt –
   ausser sie sind selbst ein block (dann 100 %). Genau daher sind Name und Adresse im
   Adressblock und die Häkchenlisten im Servicelevel schmaler als ihre Spalte.

   Zwei Klassengruppen sind im Original GLOBALE Bricks-Klassen und kommen auch auf der
   Kontaktseite (Phase 5) vor: `.list-contact-options*` und die Formularoptik. Sie stehen
   trotzdem hier – site.css setzt alle Dateien zusammen, die Regeln gelten also
   seitenübergreifend; sobald Phase 5 sie ein zweites Mal braucht, gehören sie nach
   80-utilities.css. `.h3-w-icon*` (Servicelevel UND Händlerkacheln der Händlersuche) hat
   Review 2 schon dorthin verschoben. */

/* ============================================================ Servicelevel (Abschnitt 2) */
/* Der Abschnitt hat oben keinen Abstand; der weisse Kasten zieht sich um --space-xl in den
   Kopf hinein (#brxe-unxajw / #brxe-siodzf). */
.section--servicelevel { padding-top: 0; }
.servicelevel {
  background-color: var(--white);
  border: var(--border-size) solid var(--border-color-dark);
  border-radius: var(--radius);
  margin-top: calc(var(--space-xl) * -1);
  position: relative; z-index: 10;
  padding: var(--space-xl);
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
}
/* Je Servicelevel ein zweispaltiges Raster 3fr/2fr (13175/13176/13177 haben zwei). Der
   Bricks-Container hat KEINEN Spaltenabstand („grid-gap: normal"), die Spalten stossen also
   aneinander; erst unter 550 px steht dort --space-l. */
.servicelevel__grid {
  width: 100%; display: grid; grid-template-columns: var(--grid-3-2); gap: 0;
}
.servicelevel__col { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap); }
/* Die Überschriften mit Symbol („Market focus"/„Range") sind die globalen Klassen
   h3-w-icon / __heading / __icon aus 80-utilities.css. */

@media (max-width: 768px) { .servicelevel__grid { grid-template-columns: var(--grid-2); } }
@media (max-width: 550px) { .servicelevel__grid { grid-template-columns: var(--grid-1); gap: var(--space-l); } }

/* ============================================================ Kontakt (Abschnitt 3) */
/* Unten der doppelte Abschnittsabstand: im Original steht hinter dem Kasten ein zweiter,
   LEERER Bricks-Container (Element `jkdmek`). Er ist 0 px hoch, kostet als Flex-Kind des
   Abschnitts aber dessen row-gap – also noch einmal --section-space-m. Wie bei den leeren
   Überschriften der Baukasten-Sets lassen wir das Element weg und ersetzen den Abstand. */
.section--location-contact { padding-top: 0; padding-bottom: calc(var(--section-space-m) * 2); }
.location-contact {
  background-color: var(--white);
  border: var(--border-size) solid var(--border-color-dark);
  border-radius: var(--radius);
  margin-top: calc(var(--space-xl) * -1);
  position: relative; z-index: 10;
  display: grid; grid-template-columns: var(--grid-3-2); gap: 0;
}
.location-contact__main,
.location-contact__aside {
  padding: var(--space-xl);
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
}
.location-contact__aside { border-left: var(--border-size) solid var(--border-color-dark); }
/* Was im Original ein Bricks-„block" ist, ist volle Spaltenbreite. Die Überschrift gehört
   NICHT dazu: sie ist so breit wie ihr Text (bei kurzen Standortnamen schmaler als die Spalte). */
.location-contact__address,
.location-contact__person,
.location-contact .partner-form,
.location-contact .list-contact-options { width: 100%; }
.location-contact__heading { font-size: var(--text-l); max-width: 100%; margin: 0; }
/* Name und Adresse stehen im Original ohne Zeilenabstand direkt untereinander. */
.location-contact__address { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0; }
.location-contact__name { font-weight: 600; margin: 0; }
.location-contact__person { display: flex; flex-direction: row; align-items: flex-start; column-gap: .3em; margin: 0; }
.location-contact__person-icon { font-size: var(--text-l); height: 1em; width: auto; flex: 0 0 auto; }

@media (max-width: 768px) { .location-contact { grid-template-columns: var(--grid-2); } }
@media (max-width: 550px) {
  .location-contact { grid-template-columns: var(--grid-1); }
  .location-contact__main { padding-bottom: var(--space-m); }
  .location-contact__aside { border-left: 0; border-top: var(--border-size) solid var(--border-color-dark); }
}

/* ============================================================ Kontaktzeilen (global) */
/* Im Original `grid-template-columns: var(--grid-auto-3)` – diese Variable gibt es nirgends,
   die Angabe ist damit ungültig und das Raster einspaltig. 1:1 nachgebaut: eine Spalte. */
.list-contact-options { display: grid; gap: var(--space-xs); margin: 0; padding-left: 0; list-style: none; }
.list-contact-options__item {
  text-align: center; font-weight: 500;
  border: var(--border-size) solid var(--border-color-dark); border-radius: var(--radius);
  padding: var(--space-xs) var(--space-m);
  display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;
  column-gap: var(--space-s);
  position: relative; transition: all .3s ease;
  /* Wie jeder Bricks-„block": umbrechend mit --content-gap als Zeilenabstand. Bei schmalen
     Fenstern rutscht ein langer Text (Web-Adresse) damit unter das Symbol. */
  flex-wrap: wrap; row-gap: var(--content-gap);
}
/* Die ganze Zeile ist anklickbar: der Link legt sich mit einem Pseudoelement darüber. */
.list-contact-options__item a { text-decoration: none; transition: all .3s ease; }
.list-contact-options__item a::before { content: ""; position: absolute; inset: 0; z-index: 10; transition: all .3s ease; }
.list-contact-options__item:hover { color: var(--primary); }
.list-contact-options__item:hover .list-contact-options__icon { transform: scale(1.1); }
/* Im Original ein Zeichen der Icon-Schrift in --text-xxl; unser SVG ist ein Geviert hoch und
   steht damit an derselben Stelle und in derselben Grösse. */
.list-contact-options__icon {
  font-size: var(--text-xxl); height: 1em; width: auto; flex: 0 0 auto; transition: all .3s ease;
}

/* ============================================================ Partner-Formular */
/* FluentForm-Optik des Originals (Stilpaket „default"): Felder 1 px #dadbdd, Radius 7 px,
   Innenabstand 11/15 px, Schriftfarbe #606266, Systemschrift, Zeilenhöhe 1; Gruppenabstand
   20 px, die beiden zweispaltigen Zeilen 15 px Spaltenabstand.
   Die Auswahlliste braucht `appearance: none`, sonst überschreibt Chrome die Zeilenhöhe und
   das Feld wird 44 statt 40 px hoch; das Dreieck zeichnet das Original als Pseudoelement. */
.partner-form { display: flex; flex-wrap: wrap; align-items: flex-start; text-align: left; }
.partner-form .form-group { width: 100%; margin-bottom: 20px; }
.partner-form .form-group--50 { width: calc(50% - 7.5px); }
.partner-form .form-group--50 + .form-group--50 { margin-left: 15px; }
.partner-form input, .partner-form select, .partner-form textarea {
  display: block; font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #606266; background-color: var(--white);
  border: 1px solid #dadbdd; border-radius: 7px; padding: 11px 15px; max-width: 100%;
}
.partner-form input, .partner-form select { line-height: 1; }
.partner-form textarea { line-height: inherit; min-height: 90px; }
/* Die Auswahlliste hat im Original keine eigene Fläche (Chrome meldet je nach Ladezeitpunkt
   `rgba(0,0,0,0)` oder `rgba(255,255,255,0)` – beides durchsichtig). */
.partner-form select { appearance: none; -webkit-appearance: none; background-color: transparent; }
.partner-form .form-group:has(select) { position: relative; }
.partner-form .form-group:has(select)::after {
  content: ""; position: absolute; top: 20px; right: 12px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #666;
  pointer-events: none;
}
.partner-form ::placeholder { color: #868e96; opacity: 1; }

/* Zustimmung: im Original eine Tabellenzeile aus einer 20 px breiten Kästchenzelle und dem Text
   in calc(var(--text-m) * .9). Beide Zellen stehen auf derselben Schriftlinie – dadurch rutscht
   der Text um rund 10 px nach unten, und die Zeile ist 53 statt 43 px hoch. Mit Flexbox ginge
   das nur mit einem geratenen Abstand, deshalb hier dieselben Tabellenwerte wie im Original.
   Das Kästchen bleibt 13 px gross und steht 8 px unter der Zellenoberkante. */
/* 25 px nach unten: im Original 20 px am Feldrahmen und 5 px an der Zustimmungszeile. */
.partner-form .form-group--check { margin-bottom: 25px; }
.partner-form .form-group--check label { display: table; width: 100%; }
.partner-form .form-check__box { display: table-cell; width: 20px; padding-top: 8px; vertical-align: baseline; }
.partner-form .form-check__text { display: table-cell; vertical-align: baseline; font-size: calc(var(--text-m) * .9); padding-right: 5px; }
.partner-form .form-group--check input {
  display: inline-block; width: 13px; height: 13px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background-color: transparent; color: var(--neutral);
  vertical-align: middle; position: relative; top: -2px;
}

/* Der Absendeknopf trägt im Original keine eigene Klasse: Verlauf, Schriftfarbe und der
   Innenabstand von 1,2 em/1,8 em kommen aus den globalen Regeln für [type="submit"]
   (30-buttons.css). Anders als unsere .btn-Varianten hat er den FluentForm-Radius von 7 px und
   ist ein Flex-Kasten. (Im Original liegt unter dem Verlauf zusätzlich eine Fläche in
   --primary; sie ist nie zu sehen, und unsere Verlaufsregel setzt sie mit `!important`
   zurück – kein Nachbau wert.) */
.partner-form .form-group--submit { width: auto; margin-bottom: 20px; }
.partner-form button[type="submit"] { display: flex; align-items: center; gap: .5em; border-radius: 7px; }

/* FluentForm stellt die zweispaltigen Zeilen erst ab 768 px nebeneinander
   (`@media (min-width: 768px) { .ff-t-container { display: flex } }`), darunter stehen sie
   untereinander. */
@media (max-width: 767px) {
  .partner-form .form-group--50 { width: 100%; }
  .partner-form .form-group--50 + .form-group--50 { margin-left: 0; }
}

/* ==== 106-distributor.css ==== */
/* Phase 4, Task 9 – Händlersuche, Abschnitt #distributor der Kontaktseite (Bricks-Element
   vuiqjr der Seiten 41 / 12029 / 12027, Analyse 4.4).

   Quellen der Werte: die Bricks-Einstellungen der Elemente (Abschnitt, Container ldacwu,
   Bild nbsoot, Raster toteon/lnbdxm, Symbol yeusgj), die globalen Bricks-Klassen
   listing-partner / listing-partner__partner / __div / __name (opt-bricks_global_classes),
   der WPCodeBox-Schnipsel 54 `_facets` (Select) und facets.css von WP Grid Builder (Pfeil);
   nachgemessen am Original mit eigenem Headless-Chrome (1440/600 px, EN/DE/FR).

   Bricks-Grundregel (Task 8): ein „block" ist eine Flex-Spalte (`display:flex;
   flex-direction:column; align-items:flex-start; width:100%; row-gap:var(--content-gap)`).
   Wo Bricks daraus ein Raster macht (`_display: grid`), bleibt `row-gap: var(--content-gap)`
   als Zeilenabstand stehen – das erklärt den Abstand zwischen Kopf- und Symbolzeile der Kachel.

   `.text-intro` (1.2em), `.h3-w-icon__icon`, `.gradient-image`/`.waves-bottom-right` stehen
   in 80-utilities.css (globale Bricks-Klassen). `--white-trans-50` kommt im Original aus
   automatic.css und steht bei uns in 00-tokens.css. */

/* ============================================================ Abschnitt */
/* #distributor: position relative (von .section), padding oben --section-space-s, unten
   --section-space-xxl, min-height 80vh, z-index 1. */
.distributor {
  padding-top: var(--section-space-s); padding-bottom: var(--section-space-xxl);
  min-height: 80vh; z-index: 1;
}
/* Container #brxe-ldacwu: eigener Stapelkontext ÜBER der Welle (die hat z-index 10). Bricks-
   Container richten ihre Kinder `flex-start` aus – Überschrift und Intro sind im Original nur so
   breit wie ihr Text (488 / 681 px bei 1440 px), Facette und Liste tragen width 100 %.
   Unten ein --content-gap: im Original steht nach der Liste das 0 px hohe Bricks-`code`-Element
   (jpcier, das Ein-/Ausblende-Skript), das als Flex-Kind den row-gap des Containers kostet –
   wir lassen das Element weg und ersetzen den Abstand (wie bei den leeren Überschriften der
   Baukasten-Sets, Merksatz). Nachgemessen: Container sonst 30 px zu niedrig. */
.distributor__container {
  position: relative; padding-top: var(--section-space-xs); padding-bottom: var(--content-gap);
  z-index: 9999; align-items: flex-start;
}

/* Kartenbild #brxe-nbsoot: absolut am Containeranfang, volle Breite, Deckkraft .3, hinter dem
   Inhalt (z-index -1 innerhalb des Container-Kontexts). `object-fit: contain` steht im Original
   am <img>; bei `height: auto` ändert es nichts, bleibt aber 1:1. */
.distributor__map { position: absolute; top: 0; left: 0; width: 100%; margin: 0; opacity: .3; z-index: -1; }
.distributor__map img { display: block; width: 100%; height: auto; object-fit: contain; }

/* ============================================================ Auswahlfeld (Facette 6) */
/* .brxe-wpgb-facet { width: 100% }; das Select steckt im Original in einem <label> mit
   display:flex; position:relative. Ohne JavaScript steht rechts daneben die
   Absende-Schaltfläche; mit JavaScript ist sie [hidden] und das Feld füllt die Zeile. */
.distributor__form { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xs); }
.distributor__select-wrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
/* Schnipsel 54: Rahmen --border-size/--border-color-dark, Innenabstand --btn-padding-block /
   --btn-padding-inline, unten .9em, weiss, Schrift --neutral; facets.css: appearance none,
   16px/26px, box-sizing content-box mit height 26px; Radius --wpgb-border-radius = --radius. */
.distributor__select {
  appearance: none; -webkit-appearance: none;
  width: 100%; margin: 0; box-sizing: content-box; height: 26px;
  border: var(--border-size) solid var(--border-color-dark); border-radius: var(--radius);
  padding: var(--btn-padding-block) var(--btn-padding-inline) .9em;
  background: var(--white) none; color: var(--neutral);
  font-size: 16px; font-weight: 400; line-height: 26px;
  cursor: pointer;
}
/* Pfeil: WPGB `wpgb-select-controls` – Trennlinie und Chevron rechts im Feld, Farbe
   --wpgb-grey-500 (#c8c8c8), nicht anklickbar (Klick geht ans Select). */
.distributor__select-controls {
  position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center;
  padding: 0; pointer-events: none; color: #c8c8c8;
}
.distributor__select-separator { align-self: stretch; background: currentColor; margin: 10px 0; width: 1px; }
.distributor__select-toggle { height: 24px; width: 24px; margin: 8px 8px 8px 6px; padding: 0; fill: none; stroke: currentColor; stroke-width: 2.5; }
.distributor__submit { flex: 0 0 auto; }

/* ============================================================ Händlerliste */
/* Globale Bricks-Klasse listing-partner: Raster --grid-2, Aussenabstand 0, kein Einzug;
   Zeilen- UND Spaltenabstand --content-gap (nachgemessen: 30 px, Spalten 675 px bei 1440 px).
   Unter 1090 px (und noch einmal unter 550 px) eine Spalte. `subgrid-2` hat im Original keine
   Regel und bleibt nur als Name. */
.listing-partner {
  display: grid; grid-template-columns: var(--grid-2); gap: var(--content-gap);
  width: 100%; margin: 0; padding-left: 0; list-style: none;
}
/* listing-partner__partner (Klasse lmoxyy): Kachel mit Rahmen, Radius, halbdurchsichtig
   weiss, beim Überfahren weiss; position relative für den flächigen Link. */
.listing-partner__partner {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  row-gap: var(--content-gap); width: 100%;
  padding: var(--space-l) var(--space-m);
  border: var(--border-size) solid var(--border-color-dark); border-radius: var(--radius);
  background-color: var(--white-trans-50); transition: all .3s ease;
}
.listing-partner__partner:hover { background-color: var(--white); }
/* Element toteon: Raster 1fr auto – links Name und Ort, rechts der Link, darunter über beide
   Spalten die Symbolzeile. Der Bricks-„block" bringt `gap: var(--content-gap)` in BEIDE
   Richtungen mit (nachgemessen: Spalten 526 + 30 + 57 px bei 1440 px). */
.listing-partner__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--content-gap); width: 100%; }
/* listing-partner__div (ycrfjo): Flex-Spalte ohne Zeilenabstand; die rechte zusätzlich
   align-items flex-end (Element mkequz). */
.listing-partner__div { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: 0; }
.listing-partner__div--end { align-items: flex-end; }
/* listing-partner__name (nbeswq): 1.1em, Gewicht 500, unten --space-xs. */
.listing-partner__name { font-size: 1.1em; font-weight: 500; margin: 0 0 var(--space-xs); }
/* Textlink dyoizm: sein ::before deckt die ganze Kachel ab (Bricks _cssCustom). */
.listing-partner__link::before { content: ""; position: absolute; inset: 0; background: transparent; }
/* Element lnbdxm: Raster auto 1fr über beide Spalten; `grid-gap: .3em` überschreibt im
   Original den zuvor gesetzten column-gap --space-xs. */
.listing-partner__service { display: grid; grid-template-columns: auto 1fr; gap: .3em; grid-column: span 2; }
/* Symbol yeusgj: die Grösse (height --space-s, width --space-m) bringt die globale Klasse
   h3-w-icon__icon mit (80-utilities.css, wie im Original am <svg>). Farbe: das Original setzt
   `fill: var(--secondary)` am <svg>, dessen <path> trägt fill="currentColor" – gerendert ist der
   Pfad trotzdem grün (nachgemessen, 2026-09-10: berechnete Pfadfüllung gleich). Unser Pfad
   trägt ebenfalls fill="currentColor"; `color` macht ihn grün. */
.listing-partner__icon { display: block; color: var(--secondary); }
/* Block ajqfni mit der Servicelevel-Schleife: Flex-Spalte, Zeilenabstand --content-gap. */
.listing-partner__levels { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap); }

@media (max-width: 1090px) { .listing-partner { grid-template-columns: var(--grid-1); } }

/* ==== 110-contact.css ==== */
/* Kontaktseite (WP 41 / 12029 / 12027) – Analyse Phase 5, Abschnitt 2.
   Alle Werte stammen aus dem Seiten-CSS des Originals (Bricks-Elemente ieyush, fsznnm,
   ifwrwb, tzbufm, kpflys und die fünf Adressblöcke pydejc/ipnsov/huaifz/xvhgtp/zkshna).
   Die Regeln für die Geo-Klassen (.location-de|gb|us|jp|fr, .geoip-country-xx) stehen seit
   Phase 0 in 80-utilities.css und sind dort schon 1:1 – hier steht keine davon noch einmal. */

/* ============================================================ Kopf */
/* Der Kopf ist die Vorlage 2749 mit einem zusätzlichen Einleitungssatz IM <hgroup>; der
   Verlauf läuft wie bei den Archiven von weiss nach hellblau (gradient-soft-blue).
   Der Einleitungssatz ist ein Bricks-Textbaustein mit der globalen Klasse „text-intro"
   (1,2 em, 80-utilities.css) OHNE Breitenbegrenzung – anders als der Kurztext der
   Karriereseite (102-careers.css, 65ch). Deshalb trägt er hier nicht .page-head__intro.
   Zeilenabstand zur Überschrift: die .5em des <hgroup> = row-gap von .page-head__group. */
.contact-head__intro { width: auto; max-width: 100%; }

/* ============================================================ Formular und Adressen */
/* Der Abschnitt hat oben keinen Abstand (#brxe-fsznnm padding-top: 0); der Kasten darin ragt
   um --space-xl in den Kopf hinein. Baugleich mit dem Kontaktkasten der Standortseite
   (105-locations.css .location-contact) – dort steht die Herleitung der Werte. */
.section--contact { padding-top: 0; }
.contact-box {
  background-color: var(--white);
  border: var(--border-size) solid var(--border-color-dark);
  border-radius: var(--radius);
  margin-top: calc(var(--space-xl) * -1);
  position: relative; z-index: 10;
  display: grid; grid-template-columns: var(--grid-3-2); gap: 0;
}
/* Linke Spalte (tzbufm), Hauptsitz (kpflys) und die fünf Adresskarten sind GESCHWISTER im
   Raster: die versteckten Blöcke sind display: none und belegen deshalb keine Zelle. Sichtbar
   ist immer genau ein rechter Block – ohne Geo-Land der Hauptsitz, sonst die Länderkarte. */
.contact-box__main,
.contact-hq,
.contact-card {
  padding: var(--space-xl);
  display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--content-gap);
}
.contact-hq,
.contact-card { border-left: var(--border-size) solid var(--border-color-dark); }

/* Was im Original ein Bricks-„block" ist, ist volle Spaltenbreite. Ein Bricks-„text" ist es
   NICHT: der Adressabsatz des Hauptsitzes (#brxe-kpflys > .brxe-text) ist nur so breit wie
   sein Text – gemessen 120,56 statt 415,2 px. Überschriften ebenso, ausser der des
   Länderblocks, die ausdrücklich auf 100 % steht. */
.contact-form-wrap,
.contact-partner,
.contact-card__address,
.contact-card__person,
.contact-box .list-contact-options { width: 100%; }

/* Hauptsitz: <h2> in --text-l und Schriftstärke 400 (#brxe-vkwknz). */
.contact-hq__heading { font-size: var(--text-l); font-weight: 400; max-width: 100%; margin: 0; }
.contact-hq__link { align-self: flex-start; }

/* Länderblock mit Partner-Formular (lmcter/qaanix/wpjzsq/szlxli/heyobm). */
.contact-partner { flex-direction: column; align-items: flex-start; row-gap: var(--content-gap); }
.contact-partner__heading { font-size: 1.2em; width: 100%; max-width: 100%; margin: 0; }

/* Adresskarte: Name fett, Adresse ohne Zeilenabstand direkt darunter (row-gap 0),
   Ansprechpartner mit Symbol in einer Zeile (column-gap .3em, Symbol --text-l). */
.contact-card__address { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0; }
.contact-card__name { font-weight: 600; margin: 0; }
.contact-card__person { display: flex; flex-direction: row; align-items: flex-start; column-gap: .3em; margin: 0; }
.contact-card__person-icon { font-size: var(--text-l); height: 1em; width: auto; flex: 0 0 auto; }

@media (max-width: 768px) { .contact-box { grid-template-columns: var(--grid-2); } }
@media (max-width: 550px) {
  .contact-box { grid-template-columns: var(--grid-1); }
  .contact-box__main { padding-bottom: var(--space-m); }
  /* Der Hauptsitz behält im Original auch einspaltig seinen linken Rahmen (nur der obere
     Innenabstand fällt weg); die Adresskarten tauschen ihn gegen einen oberen. 1:1. */
  .contact-hq { padding-top: 0; }
  .contact-card { border-left: 0; border-top: var(--border-size) solid var(--border-color-dark); }
}

/* ============================================================ Hauptformular */
/* Dasselbe Stilpaket wie das Partner-Formular („FluentForm default"): Felder 1 px #dadbdd,
   Radius 7 px, Innenabstand 11/15 px, Schriftfarbe #606266, Systemschrift, Zeilenhöhe 1;
   Gruppenabstand 20 px, zweispaltige Zeilen 15 px Spaltenabstand. Die Herleitung der Zahlen
   steht bei .partner-form in 105-locations.css – wer dort etwas ändert, ändert es auch hier. */
.contact-form { display: flex; flex-wrap: wrap; align-items: flex-start; text-align: left; }
.contact-form .form-group { width: 100%; margin-bottom: 20px; }
.contact-form .form-group--50 { width: calc(50% - 7.5px); }
.contact-form .form-group--50 + .form-group--50 { margin-left: 15px; }
.contact-form input, .contact-form select, .contact-form textarea {
  display: block; font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #606266; background-color: var(--white);
  border: 1px solid #dadbdd; border-radius: 7px; padding: 11px 15px; max-width: 100%;
}
.contact-form input, .contact-form select { line-height: 1; }
.contact-form textarea { line-height: inherit; min-height: 90px; }
.contact-form select { appearance: none; -webkit-appearance: none; background-color: transparent; }
.contact-form .form-group:has(select) { position: relative; }
.contact-form .form-group:has(select)::after {
  content: ""; position: absolute; top: 20px; right: 12px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #666;
  pointer-events: none;
}
.contact-form ::placeholder { color: #868e96; opacity: 1; }
.contact-form .form-group--check { margin-bottom: 25px; }
.contact-form .form-group--check label { display: table; width: 100%; }
.contact-form .form-check__box { display: table-cell; width: 20px; padding-top: 8px; vertical-align: baseline; }
.contact-form .form-check__text { display: table-cell; vertical-align: baseline; font-size: calc(var(--text-m) * .9); padding-right: 5px; }
.contact-form .form-group--check input {
  display: inline-block; width: 13px; height: 13px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background-color: transparent; color: var(--neutral);
  vertical-align: middle; position: relative; top: -2px;
}
.contact-form .form-group--submit { width: auto; margin-bottom: 20px; }
.contact-form button[type="submit"] { display: flex; align-items: center; gap: .5em; border-radius: 7px; }

/* FluentForm stellt die zweispaltigen Zeilen erst ab 768 px nebeneinander. */
@media (max-width: 767px) {
  .contact-form .form-group--50 { width: 100%; }
  .contact-form .form-group--50 + .form-group--50 { margin-left: 0; }
}

/* ==== 112-search.css ==== */
/* Suchergebnisseite (Phase 5, Task 5): Bricks-Vorlage 6650 „Search-Result" (10928 DE, 10930 FR).

   Werte aus dem Seiten-CSS des Originals (Elemente eotyab, bvlpej, lsnkxe, ykpqdr, bimevk,
   pyrxfl, ebqdnj, bzscns) und mit Headless Chrome bei 1440 und 600 px gegengeprüft
   (t5/styles-orig.json): Liste 3 Spalten à 392,5 px mit 101,25 px Abstand (--space-xxl),
   Karte = Flex-Spalte mit 30 px Abstand (--content-gap), Textblock mit 20 px (--space-s),
   h2 21,33 px (--text-l), Link 16 px unterstrichen in Neutral, Bildkasten 5:3 mit
   rgba(18,31,77,.2) (--neutral-trans-20).

   Was hier NICHT steht, weil es schon woanders liegt: der Kopf (page-head/Verlauf in
   88-content-blocks.css, Brotkrumen ebenda), .section/.container (20-layout.css), .image-cover
   samt „*:has(> .image-cover)" (80-utilities.css), Seitenzahlen (100-news.css). */

/* Abschnitt der Liste: #brxe-eotyab { padding-top: 0 } – die Liste schliesst direkt an den
   Kopf an; unten der normale Abschnittsabstand. */
.section--search { padding-top: 0; }

/* Die <ul> ist im Original zugleich der Container (brxe-container brx-grid): #brxe-bvlpej
   { display: grid; grid-template-columns: var(--grid-3); grid-gap: var(--space-xxl); margin 0;
   padding-left 0 }. Unser .container bringt max-width/margin mit; display und Abstand werden
   hier überschrieben (gleiche Spezifität, spätere Datei). */
.search-results {
  display: grid;
  grid-template-columns: var(--grid-3);
  gap: var(--space-xxl);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) { .search-results { grid-template-columns: var(--grid-2); } }
@media (max-width: 550px) { .search-results { gap: var(--space-m); } }
@media (max-width: 380px) { .search-results { grid-template-columns: var(--grid-1); } }

/* Karte (li.brxe-lsnkxe = Bricks-Block): Flex-Spalte, Kinder in voller Breite, Abstand
   --content-gap zwischen Bild und Text. */
.search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--content-gap);
  margin: 0;
  padding: 0;
}
.search-result__text,
.search-result__media { width: 100%; }

/* Textblock (ykpqdr): Überschrift und Link untereinander, row-gap --space-s. */
.search-result__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-s);
}
/* h2 (bimevk): font-size --text-l; Gewicht 300, Zeilenhöhe 1,2, Farbe und max-width 25ch
   kommen aus der globalen h2-Regel (10-base.css) – wie im Original. */
.search-result__title { font-size: var(--text-l); }
/* „Read more" (pyrxfl, Bricks text-link): Flex mit .3em Lücke (für ein optionales Symbol,
   hier keines), 1em, unterstrichen, Farbe Neutral (= --link-color). */
.search-result__link {
  display: flex;
  align-items: center;
  gap: .3em;
  text-decoration: underline;
}

/* Bildkasten (ebqdnj): steht im Quelltext nach dem Text, optisch davor (order: -1),
   Seitenverhältnis 5:3, dunkelblau-transparente Fläche hinter dem Bild (sichtbar, solange das
   Bild lädt). position/overflow/z-index liefert „*:has(> .image-cover)" aus 80-utilities.css,
   das Bild selbst füllt den Kasten per .image-cover (object-fit: cover). */
.search-result__media {
  order: -1;
  position: relative;
  aspect-ratio: 5 / 3;
  background-color: var(--neutral-trans-20);
}

/* Formular (nur bei leerem Begriff und bei 0 Treffern, Entscheidung E-5 – im Original gibt es
   im Inhalt kein Suchformular). Eine Zeile: Feld wächst, Button daneben; unter 550 px
   untereinander. */
.search-page-hint { margin: 0; }
.search-page-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  width: 100%;
  max-width: 40rem;
}
.search-page-form input[type="search"] { flex: 1 1 16rem; }

/* ==== 113-error.css ==== */
/* 404-Seite (Phase 5 T6; Bricks-Vorlage 100/10855/10856, gemessen an /en/gibtsnicht des Originals
   bei 1440 und 600 px, Skript m404.py über das DevTools-Protokoll).

   Die Sektion ist im Original eine nackte .brxe-section OHNE eigene Position. Deshalb hängen die
   Wellen (.waves-bottom-right, position: absolute) am nächsten positionierten Vorfahren: das ist
   dort #brx-content (position: relative), das als Flex-Kind des Body die Resthöhe des Fensters
   füllt (main 1490 px bei 2000 px Fensterhöhe, Wellen unten rechts an main, nicht an der Sektion).
   Unser main hat dieselbe Flex-Regel (10-base.css: flex: 1 0 auto; body ist Flex-Spalte mit
   min-height 100vh), aber keine Position – die bekommt es hier, und die Sektion gibt ihre aus
   20-layout.css ab. Die Wellen ragen wie im Original rechts über den Rand hinaus (dort
   scrollWidth 1664 bei 1440 px); body { overflow-x: hidden } fängt das dort wie hier.

   Der Bricks-Container richtet seine Kinder linksbündig aus (align-items: flex-start); unser
   .container streckt sie (Flex-Standard), was die Schaltfläche auf volle Breite zöge. Alles
   Übrige – Sektionspolster 120/30 px, Reihenabstand 30 px, h1 80 px/300, Absatz 16 px,
   Schaltfläche 165,44 × 49,58 px – kommt aus den globalen Regeln. */
body.error404 main { position: relative; }
.error-404 { position: static; }
.error-404 > .container { align-items: flex-start; }

/* ==== 115-cookie-policy.css ==== */
/* Cookie-Richtlinie (Phase 5 T4, Befund D-1 / Entscheidung E-4).

   Der Text der drei Seiten ist das gerenderte Complianz-Dokument des Originals
   (docs/analysis/wp-export/cookie-policy-{en,de,fr}.html, eingesetzt von import:pages). Es bringt
   sein eigenes Markup mit – #cmplz-document, .cmplz-dropdown-Aufklapper, die Cookie-Raster – und
   im Original auch sein eigenes Stylesheet: wp-content/plugins/complianz-gdpr-premium/assets/css/
   document.css. Diese Datei ist das Teilstück daraus, das unser Markup braucht; die Werte stehen
   1:1 so im Original (ID-Selektoren, deshalb schlagen sie die .prose-Regeln aus 100-news.css,
   genau wie dort das Plugin-CSS die Bricks-Typografie schlägt).

   Nicht übernommen sind die Teile für Markup, das es bei uns nicht gibt (Einwilligung je Dienst,
   „Do not sell my personal data"-Formular, Complianz-Meldungen, der Editor-Kontext). */

/* Grundriss: das Dokument ist im Original 800 px breit und 14 px gross. */
#cmplz-document {
    font-size: 14px;
    margin-top: 0;
    max-width: 800px;
    text-justify: inter-word;
}

#cmplz-document h2,
#cmplz-document h3 {
    font-size: 22px;
    text-align: left;
    margin-top: 15px;
    text-transform: initial;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#cmplz-document h4 {
    font-size: 18px;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 5px;
    text-transform: initial;
}

#cmplz-document h5 {
    font-size: 14px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
    text-transform: initial;
}

#cmplz-document p,
#cmplz-document li,
#cmplz-document td { font-size: 14px; margin-top: 0; }

#cmplz-document ul { list-style: disc; margin-left: 15px; margin-bottom: 15px; }

#cmplz-document a { text-decoration: underline; }

/* Externe Links tragen im Original ein kleines Symbol (Bilddaten aus document.css). */
#cmplz-document a[target="_blank"]::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    margin: 0 3px 0 5px;
}

/* Die E-Mail-Adresse im Kontaktblock enthält einen Täuschungs-Teil gegen Adresssammler
   (<span class="cmplz-fmail-domain">ex.com</span> mitten in der Adresse); erst diese Regel
   macht daraus wieder info@nti-audio.com – so löst es auch das Original. */
#cmplz-document .cmplz-obfuscate span { display: none; }

/* Einwilligung je Dienst ist in Complianz abgeschaltet (cmplz_options: consent_per_service
   „no"), das Kästchen im Aufklapper-Kopf deshalb versteckt – und seine Beschriftung ist im
   Original nur für Screenreader da (WordPress-Klasse .screen-reader-text, die es bei uns sonst
   nirgends gibt; unsere heisst .sr-only). Ohne diese beiden Regeln stand der Satz „Consent to
   service …" sichtbar in einer zwei Pixel breiten Rasterspalte und machte jeden der elf Köpfe
   105 statt 24 px hoch (nachgemessen). */
#cmplz-document .cmplz-hidden { display: none; }

#cmplz-document .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Aufklapper je Dienst (11 <details>) */
#cmplz-document .cmplz-dropdown { background-color: rgba(239, 239, 239, 0.25); }

#cmplz-document .cmplz-dropdown summary {
    display: block;
    background-color: rgba(239, 239, 239, 0.5);
    margin: 5px 0;
    padding: 5px 10px;
    align-items: center;
    justify-items: stretch;
    cursor: pointer;
}

#cmplz-document .cmplz-dropdown summary::-webkit-details-marker,
#cmplz-document .cmplz-dropdown summary::marker { display: none; content: ""; }

#cmplz-document .cmplz-dropdown summary div {
    display: grid;
    grid-template: "heading chevron";
    grid-template-columns: 2fr 25px;
    grid-gap: 15px;
    align-items: center;
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
    grid-template: "heading paragraph label checkbox chevron";
    grid-template-columns: 2fr auto 0 auto 25px;
}

#cmplz-document .cmplz-dropdown summary div h3 {
    grid-area: heading;
    margin: 0;
    padding: 0 5px;
    border-bottom: 0;
    font-size: 18px;
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p { grid-area: paragraph; }

#cmplz-document .cmplz-dropdown summary p {
    text-align: right;
    padding: 0;
    margin: 0;
    font-size: 14px;
    border-bottom: 0;
}

/* Der Pfeil: im Original ein SVG des Plugins (assets/images/chevron-down.svg), hier als
   Datenadresse eingebettet – gleiche Form, gleiche Grösse, gleiche Drehung beim Öffnen. */
#cmplz-document .cmplz-dropdown summary div::after {
    grid-area: chevron;
    cursor: pointer;
    content: "";
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>') no-repeat;
    transform: rotate(0deg);
    transition: all 0.5s ease;
    background-size: cover;
    height: 18px;
    width: 18px;
    margin: 3px;
}

#cmplz-document .cmplz-dropdown[open] { padding-bottom: 1px; }
#cmplz-document .cmplz-dropdown[open] summary div::after { transform: rotate(180deg); }

#cmplz-document .cmplz-dropdown p,
#cmplz-document .cmplz-dropdown a { font-size: 14px; margin-top: 0; }

#cmplz-document .cmplz-dropdown p,
#cmplz-document .cmplz-dropdown h4,
#cmplz-document .cmplz-dropdown ul { padding: 0 15px; }

#cmplz-document .cmplz-dropdown h4 { font-size: 15px; margin: 5px 0; }
#cmplz-document .cmplz-dropdown h5 { margin: 0; }

#cmplz-document .cmplz-dropdown .cmplz-service-description,
#cmplz-document .cmplz-dropdown .cmplz-sharing-data { padding: 0 15px 15px; }

@media (min-width: 600px) {
    #cmplz-document .cmplz-dropdown .cmplz-service-description,
    #cmplz-document .cmplz-dropdown .cmplz-sharing-data {
        display: inline-block;
        width: calc(50% - 35px);
        vertical-align: top;
    }
}

/* Cookie-Raster je Zweck: drei Spalten (Name, Ablauf, Funktion) als Gitter mit 1px Fugen. */
#cmplz-document .cmplz-dropdown .cookies-per-purpose {
    display: grid;
    border: 1px solid #dadada;
    grid-gap: 1px;
    background-color: #dadada;
    margin-bottom: 10px;
}

#cmplz-document .cmplz-dropdown .cookies-per-purpose div {
    background-color: #fff;
    padding: 15px;
}

#cmplz-document .cmplz-dropdown .name-header strong,
#cmplz-document .cmplz-dropdown .retention-header strong,
#cmplz-document .cmplz-dropdown .function-header strong {
    display: block;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    margin: 0;
    text-transform: initial;
}

@media (min-width: 600px) {
    #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
        grid-column: span 2;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template: "purpose purpose purpose" "header1 header2 header3" auto;
    }

    #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose { grid-area: purpose; }
    #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header { grid-area: header1; }
    #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header { grid-area: header2; }
    #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header { grid-area: header3; }

    #cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header { background-color: #f7f7f7; }
}

@media (max-width: 600px) {
    #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose { grid-template-columns: 100px 1fr; }
    #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose { grid-column: span 2; }

    #cmplz-document .cmplz-dropdown .cookies-per-purpose h5,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header strong,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header strong,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header strong { line-height: 1.8; }

    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
    #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7) { background-color: #f7f7f7; }
}

/* Abschnitt 7.1: Complianz setzt hier per JavaScript seine vier Kategorien-Schalter ein und
   blendet den Kasten erst dann ein (#cmplz-manage-consent-container { display: none } in
   document.css; gemessen: 155 px hoch). Bei uns steht dort fest der Öffner unseres eigenen
   Consent-Banners (Entscheidung E-4) – der Kasten bleibt deshalb sichtbar und ist niedriger.

   Nicht die Klasse `consent-reopen` verwenden: die ist fest positioniert (70-consent.css) und
   der Knopf schwebte dann unten rechts über dem Öffner der Fusszeile, statt im Text zu stehen.
   Aussehen deshalb schlicht in der Schrift des Dokuments – eine Vorlage im Original gibt es
   für diese Schaltfläche nicht. */
#cmplz-document .cmplz-manage-consent-container { margin: 10px 0 15px; }

#cmplz-document button.cmplz-manage-consent {
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 15px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

#cmplz-document button.cmplz-manage-consent:hover,
#cmplz-document button.cmplz-manage-consent:focus-visible { background: rgba(239, 239, 239, 0.5); }

/* ==== 116-legal.css ==== */
/* Rechtsseiten (Phase 5 T4): Impressum, Datenschutzerklärung, Cookie-Richtlinie – Template
   `legal`. Gemessen an /en/imprint und /de/datenschutzerklaerung des Originals bei 1440 und
   600 px (Skript t4/m4.py über das DevTools-Protokoll).

   Alles Sichtbare kommt aus den globalen Regeln: Sektionspolster 120/30 px, Container 1380 px
   mit 30 px Reihenabstand, h1 80/300, der Fliesstext aus .post-content.cb-text (100-news.css,
   im Original heisst der Block auf beiden Seitenarten .brxe-post-content). Zwei Kleinigkeiten
   fehlen darin:

   – Der Bricks-Container richtet seine Kinder linksbündig aus (align-items: flex-start), unser
     .container streckt sie (Flex-Standard). Ohne die Regel wäre die h1-Box 1380 statt 236,8 px
     breit (gemessen); zu sehen ist davon nichts, aber es ist derselbe Fall wie auf der
     404-Seite (113-error.css). .post-content behält seine volle Breite über width: 100 %.
   – Die Sektion trägt im Original keine Position (Bricks setzt sie nur bei `_position`, wie
     auf den Danke-Seiten); unsere .section ist immer relativ. Hier gibt sie sie ab – die Seite
     hat nichts absolut Positioniertes. */
.legal { position: static; }
.legal > .container { align-items: flex-start; }