/**
 * @file css/redesign/structure.css - Redesign Welle R3 (Agent W4-9)
 *
 * Struktureller Feinschliff nach dem Konzept-Review:
 *   1. Container-Vereinheitlichung  (Review H1, Spezifikation 7)
 *   2. Formulare                    (Spezifikation 9.4)
 *   3. Kontaktseite gezielt uebersteuern (Review H4)
 *   4. Reveal-Animation korrekt     (Review M2)
 *   5. Pfeil-Links auf Chevron      (Uebergabe W2b)
 *
 * Ladereihenfolge (feb2026_bootstrap.libraries.yml): diese Datei laeuft als
 * letzte der Redesign-Ebene, nach tokens/base/buttons/header-footer/media/
 * components. Sie darf deshalb gezielt nachziehen, entfernt aber nichts.
 *
 * Zur Spezifitaet: die Inhalte tragen ihre Regeln in <style>-Bloecken IM
 * BODY. Diese stehen in der Dokumentreihenfolge NACH allen <link>-
 * Stylesheets und gewinnen bei gleicher Spezifitaet immer. Jede Regel, die
 * gegen eine Inline-Regel ankommen muss, traegt hier deshalb ein
 * zusaetzliches `body` (oder mehr) im Selektor. Wo der Inhalt `!important`
 * benutzt, steht auch hier `!important` - kommentiert und mit Hinweis, was
 * die Content-Bereinigung stattdessen entfernen sollte.
 */

/* ============================================================================
   1. CONTAINER - EINE KANTE FUER ALLE SEKTIONSTYPEN

   Konzept-Review H1: nebeneinander existierten vier Container-Definitionen
   (Header/Footer 1400/64, Theme-Sektion 1364/32, Bootstrap 1140-1364/16,
   Inline-Sektion 1400/64), zusaetzlich ineinander verschachtelt.

   Zielgeometrie (Spezifikation 7):
     max-width  = var(--feb-container-max) = 1440px
     Gutter     = var(--feb-gutter)        = clamp(1rem, 0.5rem + 2vw, 3rem)
                                             also 16 -> 48 px fluid

   Rechnung linke Content-Kante (Wurzelschrift 16 px, ohne Scrollbar):
     1280 px: Gutter = 8 + 2%*1280 = 33,6 px; Box = min(1440,1280) = 1280,
              Randversatz 0                    -> Kante = 33,6 px
     1512 px: Gutter = 8 + 2%*1512 = 38,24 px; Box = 1440,
              Randversatz (1512-1440)/2 = 36   -> Kante = 74,24 px

   Diese beiden Werte gelten nach dieser Datei fuer Header, Footer,
   Theme-Sektionen, Bootstrap-.container und Inline-HTML-Sektionen
   gleichermassen. Spreizung: 0 px (vorher 118 px bei 1280, 64 px bei 1512).
   ============================================================================ */

body :is(
  /* Header (war 1400 / 2rem -> 4rem ab 768) */
  .brm-header__container,
  /* Footer (war 1400 / 1.5-2rem -> 4rem ab 768) */
  .brm-footer__top-inner,
  .brm-footer__main > .region-footer-main,
  .brm-footer__bottom > .region-footer-bottom,
  /* Theme-Sektionen (war 1364 / 1.5rem -> 2rem ab 768) */
  .paragraph-section__container,
  /* News-Hero (war 1364 / 1.5rem -> 2rem ab 768) */
  .news-hero__inner,
  /* Neue Sektionsinnenbox aus base.css. Dort steht sie mit Spezifitaet
     0,1,0 und koennte von einer gleichnamigen Inline-Regel im Inhalt
     ueberholt werden; hier ist sie gegen Dokumentreihenfolge abgesichert.
     W4-4 baut die frueheren Inline-Sektionen (.feb-app-preview,
     .feb-tech-section) genau darauf um. */
  .feb-section__inner,
  /* Bootstrap-Container im Inhaltsbereich: Hero, Hero-Quickfacts und der
     Wrapper der HTML-Sektionen (war 1140 @xl / 1364 @xxl, Padding 1rem).
     Bewusst auf .brm-main eingegrenzt - Admin- und Contrib-Regionen
     behalten ihre eigene Geometrie. */
  .brm-main .container
) {
  width: 100%;
  max-width: var(--feb-container-max);
  margin-inline: auto;
  padding-inline: var(--feb-gutter);
  box-sizing: border-box;
}

/* Suchergebnisseite: <main> ist hier selbst der Container (war 1400/4rem).
   Eigene Regel, weil `padding-block` erhalten bleiben muss. */
body.path-search .brm-main {
  width: 100%;
  max-width: var(--feb-container-max);
  margin-inline: auto;
  padding-inline: var(--feb-gutter);
  box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   1.1 Verschachtelte Zweit-Container flach legen

   Der Newsblock steckt in einem Block-Reference-Paragraph und damit bereits
   in .paragraph-section__container. Seine eigene max-width waere eine
   zweite, engere Kante.
   ---------------------------------------------------------------------------- */
body .paragraph-section__container .view-id-news.view-display-id-block_1 {
  max-width: none;
  padding-inline: 0;
}

/* ----------------------------------------------------------------------------
   1.2 Inline-HTML-Sektionen auf dieselbe Kante

   Die aus dem Altbestand uebernommenen HTML-Sektionen bringen ihren eigenen
   Innencontainer mit (durchgehend `max-width:1400px; padding:0 64px`, per
   Media-Query auf 32/24 px reduziert). Zwei Faelle:

   a) `field_full_width = 1` -> die Sektion steht ohne Bootstrap-Wrapper.
      Ihr Innencontainer IST die Kante und bekommt die Zielgeometrie.
   b) sonst -> die Sektion steckt zusaetzlich in <div class="container">.
      Dann traegt der Bootstrap-Container die Kante und der Innencontainer
      wird flach gelegt (Regel 1.2b, hoehere Spezifitaet). Genau diese
      Verschachtelung war der Ausreisser des Reviews: .feb-tech-section
      lag in Bootstrap-.container UND in .feb-tech-container.

   Die Liste ist bewusst explizit statt per [class*="-inner"]: es gibt im
   Bestand Innenboxen mit ABSICHTLICH engerer max-width (.final-cta-inner
   700 px, .standorte-map__inner 1100 px, .febana-tl 1120 px), die eine
   Sammelregel zerstoeren wuerde.

   UEBERGABE an die Content-Bereinigung (W5): diese ~50 Klassennamen sind
   ein Symptom, keine Struktur. Sie sollten im Inhalt durch eine gemeinsame
   Klasse ersetzt werden (z. B. .feb-section__inner aus base.css); danach
   schrumpft dieser Block auf zwei Selektoren.
   ---------------------------------------------------------------------------- */

body .paragraph-type--html-section :is(
  .stats-container,
  .feb-tech-container,
  .feb-app-preview-inner,
  .hiw-inner,
  .newsletter-inner,
  .feb-product-hero-inner,
  .feb-position-inner,
  .feb-services-inner,
  .feb-usecases-inner,
  .feb-process-inner,
  .feb-benefits-inner,
  .feb-product-examples-inner,
  .feb-final-product-cta-inner,
  .feb-part-position-inner,
  .feb-parts-services-inner,
  .feb-materials-inner,
  .feb-parts-applications-inner,
  .feb-parts-quality-inner,
  .feb-parts-examples-inner,
  .feb-final-parts-cta-inner,
  .feb-system-hero-inner,
  .feb-system-services-inner,
  .feb-system-process-inner,
  .feb-system-applications-inner,
  .feb-system-benefits-inner,
  .feb-system-examples-inner,
  .feb-final-system-cta-inner,
  .feb-prototype-hero-inner,
  .feb-proto-services-inner,
  .feb-proto-process-inner,
  .feb-proto-applications-inner,
  .feb-proto-benefits-inner,
  .feb-proto-examples-inner,
  .feb-final-proto-cta-inner,
  .feb-tech-hero-inner,
  .feb-tech-knowledge-inner,
  .feb-tech-summary-inner,
  .feb-2k-summary-inner,
  .feb-insert-focus-inner,
  .feb-insert-summary-inner,
  .feb-silicone-tech-inner,
  .feb-silicone-summary-inner,
  .feb-stamping-summary-inner,
  .feb-forming-summary-inner,
  .feb-hybrid-focus-inner,
  .feb-hybrid-summary-inner,
  .feb-tooling-simple-inner,
  .feb-tooling-summary-inner,
  .feb-assembly-summary-inner,
  .feb-esd-control-inner,
  .feb-esd-summary-inner
) {
  width: 100%;
  max-width: var(--feb-container-max);
  margin-inline: auto;
  /* Nur die Inline-Achse - die vertikalen Werte gehoeren zum Rhythmus
     (base.css) und bleiben unberuehrt. */
  padding-inline: var(--feb-gutter);
  box-sizing: border-box;
}

/* 1.2b - Steckt die Sektion zusaetzlich im Bootstrap-Container, traegt
   dieser die Kante. Der Innencontainer wird zur reinen Gruppierung. */
body .paragraph-type--html-section > .container :is(
  .feb-section__inner,
  .stats-container,
  .feb-tech-container,
  .feb-app-preview-inner,
  .hiw-inner,
  .newsletter-inner,
  .feb-product-hero-inner,
  .feb-position-inner,
  .feb-services-inner,
  .feb-usecases-inner,
  .feb-process-inner,
  .feb-benefits-inner,
  .feb-product-examples-inner,
  .feb-final-product-cta-inner,
  .feb-part-position-inner,
  .feb-parts-services-inner,
  .feb-materials-inner,
  .feb-parts-applications-inner,
  .feb-parts-quality-inner,
  .feb-parts-examples-inner,
  .feb-final-parts-cta-inner,
  .feb-system-hero-inner,
  .feb-system-services-inner,
  .feb-system-process-inner,
  .feb-system-applications-inner,
  .feb-system-benefits-inner,
  .feb-system-examples-inner,
  .feb-final-system-cta-inner,
  .feb-prototype-hero-inner,
  .feb-proto-services-inner,
  .feb-proto-process-inner,
  .feb-proto-applications-inner,
  .feb-proto-benefits-inner,
  .feb-proto-examples-inner,
  .feb-final-proto-cta-inner,
  .feb-tech-hero-inner,
  .feb-tech-knowledge-inner,
  .feb-tech-summary-inner,
  .feb-2k-summary-inner,
  .feb-insert-focus-inner,
  .feb-insert-summary-inner,
  .feb-silicone-tech-inner,
  .feb-silicone-summary-inner,
  .feb-stamping-summary-inner,
  .feb-forming-summary-inner,
  .feb-hybrid-focus-inner,
  .feb-hybrid-summary-inner,
  .feb-tooling-simple-inner,
  .feb-tooling-summary-inner,
  .feb-assembly-summary-inner,
  .feb-esd-control-inner,
  .feb-esd-summary-inner
) {
  max-width: none;
  padding-inline: 0;
}


/* ============================================================================
   2. FORMULARE (Spezifikation 9.4)

   Bestand: das Theme baut Felder als reine Unterstreichung
   (`border:0; border-bottom:1px solid var(--border)`), im Fokus zusaetzlich
   eine graue Flaeche plus zwei Schlagschatten. Die Spezifikation verlangt
   ein geschlossenes 1-px-Rechteck ohne Radius, Fokus ueber Rand + Ring,
   keine Verlaeufe, keine Schatten.

   Die Element-Selektoren des Themes (`input[type=text]` u. a.) haben
   Spezifitaet 0,1,1. Die Basisregel hier steht deshalb als
   `body :is(... input[type="text"] ...)` = 0,1,2.
   ============================================================================ */

body :is(
  .form-control,
  .form-select,
  .feb-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select
):not(.brm-header__search-input) {
  box-sizing: border-box;
  width: 100%;
  height: var(--feb-control-h);
  padding: 0 var(--feb-space-4);
  background-color: var(--feb-white);
  background-image: none;
  border: 1px solid var(--feb-border-strong);
  border-radius: var(--feb-radius);
  font-family: var(--feb-font-sans);
  font-size: var(--feb-fs-body);
  line-height: 1.4;
  color: var(--feb-text);
  box-shadow: none;
  transition: border-color var(--feb-dur-fast) var(--feb-ease);
}

/* Das <select> braucht seinen Pfeil zurueck - Bootstrap legt ihn als
   background-image ab, die Sammelregel oben hat ihn geloescht. Monochromer
   Chevron in --feb-ink statt Bootstrap-Blaugrau.
   Die doppelte Nennung `select.form-select, select` hebt die Spezifitaet
   auf 0,1,2 - sonst gewinnt die `padding`-Kurzform der Sammelregel. */
body :is(select.form-select, select, .form-select) {
  padding-inline-end: var(--feb-space-8);
  background-repeat: no-repeat;
  background-position: right var(--feb-space-4) center;
  appearance: none;
  -webkit-appearance: none;
}

body :is(select, .form-select):not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%230B0D0E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 12px 8px;
}

/* Ebenfalls auf 0,1,2 gehoben: die Sammelregel setzt height/padding. */
body :is(textarea.form-control, textarea) {
  height: auto;
  min-height: 9rem;
  padding: var(--feb-space-3) var(--feb-space-4);
  line-height: var(--feb-lh-body);
  resize: vertical;
}

body :is(input, textarea, select, .form-control, .form-select)::placeholder {
  color: var(--feb-text-muted);
  opacity: 1;
}

body :is(.form-control, .form-select, input[type="text"], input[type="email"],
         input[type="tel"], input[type="search"], textarea,
         select):hover:not(:disabled):not([readonly]) {
  border-color: var(--feb-grey-500);
}

/* Fokus: Rand auf Ink, dazu der systemweite 2-px-Ring. Spezifikation 9.4
   verlangt fuer Bedienelemente `outline-offset: 0`, damit Ring und Rand
   eine Linie bilden und das Feld optisch nicht waechst. Das ist die
   einzige bewusste Abweichung vom globalen Fokus-Offset aus base.css. */
body :is(
  .form-control,
  .form-select,
  .feb-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  textarea,
  select
):not(.brm-header__search-input):is(:focus, :focus-visible) {
  border-color: var(--feb-ink);
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: 0;
  background-color: var(--feb-white);
  box-shadow: none;
}

body :is(.form-control, .form-select, input[type="text"], input[type="email"],
         input[type="tel"], input[type="search"], textarea, select):disabled,
body :is(.form-control, .form-select, input[type="text"], input[type="email"],
         input[type="tel"], input[type="search"], textarea, select)[readonly] {
  background-color: var(--feb-grey-50);
  color: var(--feb-text-muted);
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
   2.1 Labels, Beschreibung, Pflichtfeld

   `label` des Themes ist 0,1,0 (mit 768er-Media-Query auf 1rem); die Regel
   hier ist 0,1,1 und gewinnt unabhaengig vom Breakpoint.
   .form-check-label ist ausgenommen - Auswahlfelder tragen Fliesstext.
   ---------------------------------------------------------------------------- */
body :is(.js-form-item, .form-item, .form-group, .form-wrapper) > label:not(.form-check-label),
body .form-label,
body .fieldset-legend,
body fieldset > legend {
  display: block;
  margin-bottom: var(--feb-space-2);
  font-family: var(--feb-font-sans);
  font-size: var(--feb-fs-xs);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--feb-text-secondary);
}

/* Fokus faerbt das Label nicht mehr um (war var(--accent), also blau) -
   der Ring am Feld traegt den Zustand, ein zweiter Kanal ist Rauschen. */
body :is(.form-item, .js-form-item, .fieldgroup):focus-within > label,
body :is(.form-item, .js-form-item, .fieldgroup):focus-within .fieldset-legend {
  color: var(--feb-text);
}

body :is(.form-text, .description, .webform-element-description) {
  margin-top: var(--feb-space-2);
  font-size: var(--feb-fs-xs);
  line-height: 1.5;
  color: var(--feb-text-muted);
}

/* Pflichtfeld: Sternchen in Textfarbe, nicht in Rot - Rot ist laut
   Spezifikation 9.4 dem Fehlerzustand vorbehalten. */
body .form-required::after,
body .js-form-required::after {
  content: "*";
  margin-left: 0.25rem;
  color: var(--feb-text);
}

/* ----------------------------------------------------------------------------
   2.2 Fehlerzustand - zweikanalig: Farbe + Icon + Text
   Drupal setzt `.error` bzw. `.form-item--error`, Bootstrap `.is-invalid`.
   ---------------------------------------------------------------------------- */
body :is(
  .is-invalid,
  .form-item--error input,
  .form-item--error textarea,
  .form-item--error select,
  input.error,
  textarea.error,
  select.error,
  [aria-invalid="true"]
) {
  border-color: var(--feb-danger);
  border-width: 2px;
}

body :is(
  .is-invalid,
  .form-item--error input,
  .form-item--error textarea,
  .form-item--error select,
  input.error,
  textarea.error,
  select.error,
  [aria-invalid="true"]
):is(:focus, :focus-visible) {
  border-color: var(--feb-danger);
  outline-color: var(--feb-danger);
  box-shadow: none;
}

body :is(.invalid-feedback, .form-item--error-message, .webform-element-error) {
  display: flex;
  align-items: flex-start;
  gap: var(--feb-space-2);
  margin-top: var(--feb-space-2);
  margin-bottom: 0;
  font-size: var(--feb-fs-xs);
  line-height: 1.45;
  color: var(--feb-danger);
}

/* Zweiter Kanal: Warnsymbol als Maske, damit es der Textfarbe folgt und
   ohne eigene Farbdefinition auskommt. */
body :is(.invalid-feedback, .form-item--error-message, .webform-element-error)::before {
  content: "";
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-top: 0.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 14H1L8 1z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6v4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='.8' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 14H1L8 1z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6v4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='.8' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Drupal-Statusmeldungen ueber dem Formular: Radius 0, kein Verlauf. */
body :is(.messages, .alert) {
  border-radius: var(--feb-radius);
  background-image: none;
  box-shadow: none;
}

/* ----------------------------------------------------------------------------
   2.3 Checkbox und Radio - monochrom
   Der Akzent bleibt laut Spezifikation 5 den Buttons vorbehalten.
   ---------------------------------------------------------------------------- */
body :is(.form-check-input, input[type="checkbox"], input[type="radio"]) {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin-top: 0.15rem;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid var(--feb-border-strong);
  border-radius: var(--feb-radius);
  background-color: var(--feb-white);
  box-shadow: none;
  cursor: pointer;
}

/* Einzige Rundung im System (Spezifikation 9.4).
   `.form-check-input[type=radio]` hebt die Spezifitaet auf 0,2,1 - die
   Regel darueber setzt border-radius bei 0,1,2. */
body :is(.form-check-input[type="radio"], input[type="radio"]) {
  border-radius: 50%;
}

body :is(.form-check-input, input[type="checkbox"], input[type="radio"]):checked {
  background-color: var(--feb-ink);
  border-color: var(--feb-ink);
}

body :is(.form-check-input, input[type="checkbox"], input[type="radio"]):is(:focus, :focus-visible) {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
  box-shadow: none;
}

body .form-check-label {
  margin-bottom: 0;
  font-size: var(--feb-fs-body);
  font-weight: var(--feb-fw-regular);
  line-height: var(--feb-lh-body);
  color: var(--feb-text);
  cursor: pointer;
}

/* Fieldset ohne Rahmen - die Legende gliedert, nicht der Kasten. */
body :is(fieldset.fieldgroup, fieldset.form-composite, fieldset.webform-type-checkboxes, fieldset.webform-type-radios) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ----------------------------------------------------------------------------
   2.4 Absendeknopf
   Rangordnung, Masse und Zustaende kommen aus buttons.css (R2b). Hier wird
   nur der Bestandsselektor `.form-submit` / `input.button` des Themes
   entschaerft, der noch eigene Flaeche in --primary und Radius mitbringt.
   ---------------------------------------------------------------------------- */
body :is(.form-submit, input.button, .webform-button--submit, .search-form__submit) {
  width: auto;
  border-radius: var(--feb-radius);
  background-image: none;
  box-shadow: none;
}

/* ----------------------------------------------------------------------------
   2.5 Formular auf dunkler Flaeche (Spezifikation 9.4, letzter Block)
   ---------------------------------------------------------------------------- */
body :is(.feb-on-dark, .feb-section--ink, .bg-dark, .bg-accent, .brm-footer) :is(
  .form-control,
  .form-select,
  .feb-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select
) {
  background-color: transparent;
  color: var(--feb-white);
  border-color: var(--feb-border-inverse-strong);
}

body :is(.feb-on-dark, .feb-section--ink, .bg-dark, .bg-accent, .brm-footer) :is(
  input, textarea, select
)::placeholder {
  color: var(--feb-text-inverse-muted);
}

body :is(.feb-on-dark, .feb-section--ink, .bg-dark, .bg-accent, .brm-footer) :is(
  .form-control, .form-select, .feb-input, input[type="text"], input[type="email"],
  input[type="tel"], input[type="search"], textarea, select
):is(:focus, :focus-visible) {
  border-color: var(--feb-white);
  outline-color: var(--feb-focus-inverse);
}

body :is(.feb-on-dark, .feb-section--ink, .bg-dark, .bg-accent, .brm-footer) :is(.js-form-item, .form-item, .form-group) > label:not(.form-check-label),
body :is(.feb-on-dark, .feb-section--ink, .bg-dark, .bg-accent, .brm-footer) :is(.form-label, .fieldset-legend) {
  color: var(--feb-text-inverse-secondary);
}

/* ----------------------------------------------------------------------------
   2.6 Suchformular der Ergebnisseite
   Bestand: `body.path-search .search-api-page-block-form .form-search`
   (0,3,1) mit eigenem Rand und blauem 2-px-Schatten im Fokus.
   Das Kopf-Suchfeld (.brm-header__search-*) gehoert header-footer.css und
   wird hier nicht angefasst.
   ---------------------------------------------------------------------------- */
body.path-search .search-api-page-block-form :is(.form-search, input[type="search"], .form-control) {
  height: var(--feb-control-h);
  padding: 0 var(--feb-space-4);
  font-size: var(--feb-fs-body);
  color: var(--feb-text);
  background-color: var(--feb-white);
  border: 1px solid var(--feb-border-strong);
  border-radius: var(--feb-radius);
  box-shadow: none;
}

body.path-search .search-api-page-block-form :is(.form-search, input[type="search"], .form-control):is(:focus, :focus-visible) {
  border-color: var(--feb-ink);
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: 0;
  box-shadow: none;
}

/* Das Label der Suche ist visually-hidden; ohne Flex bliebe der
   Label-Abstand aus 2.1 als Leerzeile ueber dem Feld stehen. */
body.path-search .search-api-page-block-form .js-form-item {
  display: flex;
}

/* ----------------------------------------------------------------------------
   2.7 Formular-Einbettung (Paragraph "form_embed")
   Bestand: `background: var(--off-white); padding: 2rem; border-radius:.75rem`
   bei Spezifitaet 0,4,0. Radius 0 gilt systemweit ausnahmslos.
   ---------------------------------------------------------------------------- */
body .paragraph-type--form-embed .paragraph-form-embed__form {
  max-width: var(--feb-content-max);
}

body .paragraph-type--form-embed:not(.bg-light):not(.bg-dark):not(.bg-accent) .paragraph-form-embed__form {
  background: var(--feb-surface-muted);
  background-image: none;
  border: 1px solid var(--feb-border);
  border-radius: var(--feb-radius);
  box-shadow: none;
}


/* ============================================================================
   3. KONTAKTSEITE - GEZIELTE UEBERSTEUERUNG

   Konzept-Review H4: /de/kontakt ist ein zweites, paralleles Designsystem.
   Drei <style>-Bloecke (15,4 KB) im CKEditor-Body, gestylt ueber
   ID-Selektoren und `!important`, mit eigener Farbwelt (#1b64d6 Blau,
   #eef4ff Auswahlflaeche, #fbe4b8 Badge, farbige Schatten).

   Hier wird nur so viel uebersteuert, wie noetig ist, damit Formular und
   Teaser dem System entsprechen. Die Selektoren tragen genau so viele
   IDs/Klassen wie die Vorlage, plus eins.

   UEBERGABE an W5 / Content-Bereinigung - im Inhalt zu ENTFERNEN:
     - Block 3 (.webform-submission-kontakt-onlineanfrage-form ...):
       alle Farbliterale #14140f, #1b64d6, #eef4ff, #dcdbd4, #e0dfd8,
       #c3c2b9 sowie die drei box-shadow-Wolken und die transform-Hovers.
     - `.form-required::after { ... !important }` - bildet nur den
       Theme-Standard nach und ist seit dieser Datei ueberfluessig.
     - `#paragraph-1896 { display:none !important }`,
       `#paragraph-1837 { padding-top:0 !important }` und die uebrigen
       ID-Selektoren: sie brechen, sobald ein Paragraph neu angelegt wird.
     - `.fk-badge { border-radius:999px }`, `.fk-photo { border-radius:50% }`,
       `.fk-teaser:hover { box-shadow / translateY }` - Radius und
       Schattenwolken widersprechen Spezifikation 4 und 11.
     - Die fuenf Icon-SVGs der Auswahlkacheln sind mit `stroke='%2314140f'`
       hart codiert; sie muessten auf currentColor umgestellt werden, damit
       sie auf dunklem Grund nicht verschwinden.
     - `#paragraph-1838 .paragraph-form-embed__form { ... !important }`
       BLEIBT sinnvoll (transparent, randlos, Radius 0) und wird hier
       bewusst nicht angetastet.
     - Die Seite hat weiterhin KEINE <h1> (Review H3). Das ist eine
       Content-/Hero-Entscheidung und nicht Teil dieser Welle.
   ============================================================================ */

/* Felder: Vorlage 0,2,0 -> hier 0,2,1 */
body .webform-submission-kontakt-onlineanfrage-form :is(.form-control, .form-select, textarea, select) {
  padding: 0 var(--feb-space-4);
  font-size: var(--feb-fs-body);
  color: var(--feb-text);
  background-color: var(--feb-white);
  border: 1px solid var(--feb-border-strong);
  border-radius: var(--feb-radius);
  box-shadow: none;
}

/* Textarea und Select brauchen mehr Spezifitaet als die Sammelregel
   darueber (0,2,1), sonst gewinnt deren `padding`-Kurzform: die Textarea
   klebte oben am Rand, im Select lag der Chevron auf dem Text. */
body .webform-submission-kontakt-onlineanfrage-form :is(textarea.form-control, textarea) {
  padding: var(--feb-space-3) var(--feb-space-4);
  min-height: 9rem;
}

body .webform-submission-kontakt-onlineanfrage-form :is(select.form-select, select) {
  padding-inline: var(--feb-space-4) var(--feb-space-8);
}

body .webform-submission-kontakt-onlineanfrage-form :is(.form-control, .form-select, textarea, select):is(:focus, :focus-visible) {
  border-color: var(--feb-ink);
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: 0;
  box-shadow: none;
}

/* Labels und Legende */
body .webform-submission-kontakt-onlineanfrage-form label:not(.form-check-label),
body .webform-submission-kontakt-onlineanfrage-form #edit-interesse--wrapper legend {
  font-size: var(--feb-fs-xs);
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-text-secondary);
  margin-bottom: var(--feb-space-2);
}

/* Die Vorlage erzwingt #14140f mit !important - einmal ueber einen
   ID-Selektor (1,2,0). Deshalb hier 1,3,1 und ebenfalls !important. */
body .webform-submission-kontakt-onlineanfrage-form #edit-interesse--wrapper .fieldset-legend,
body .webform-submission-kontakt-onlineanfrage-form .fieldgroup:focus-within .fieldset-legend,
body .webform-submission-kontakt-onlineanfrage-form .form-item:focus-within > label {
  color: var(--feb-text-secondary) !important;
}

/* Pflichtsternchen: die Vorlage faerbt es rot (--destructive) mit
   !important. Spezifikation 9.4: nie in Rot. */
body .webform-submission-kontakt-onlineanfrage-form .form-required::after {
  color: var(--feb-text) !important;
}

body .webform-submission-kontakt-onlineanfrage-form :is(.form-item-anrede, .form-item-unternehmen) label:not(.form-required)::after,
body .webform-submission-kontakt-onlineanfrage-form #edit-interesse--wrapper .fieldset-legend:not(.form-required)::after {
  color: var(--feb-text);
}

/* Auswahlkacheln "Ihr Interesse": Vorlage 1,2,0 bzw. 1,3,0 */
body .webform-submission-kontakt-onlineanfrage-form #edit-interesse .form-check-label {
  border: 1px solid var(--feb-border-strong);
  border-radius: var(--feb-radius);
  background: var(--feb-white);
  font-size: var(--feb-fs-body);
  font-weight: var(--feb-fw-regular);
  color: var(--feb-text);
  box-shadow: none;
  transform: none;
  transition: border-color var(--feb-dur-fast) var(--feb-ease),
              background-color var(--feb-dur-fast) var(--feb-ease);
}

body .webform-submission-kontakt-onlineanfrage-form #edit-interesse .form-check-label:hover {
  border-color: var(--feb-ink);
  background: var(--feb-white);
  box-shadow: none;
  transform: none;
}

body .webform-submission-kontakt-onlineanfrage-form #edit-interesse .form-check-input:checked + .form-check-label {
  border-color: var(--feb-ink);
  background: var(--feb-grey-50);
  box-shadow: inset 0 0 0 1px var(--feb-ink);
  font-weight: var(--feb-fw-semibold);
}

body .webform-submission-kontakt-onlineanfrage-form #edit-interesse .form-check-input:focus-visible + .form-check-label {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
}

/* Absendeknopf: die Vorlage haelt ihn in einem EIGENEN Blau (#1b64d6,
   Hover #134fab) samt farbiger Schattenwolke und Hover-Versatz und
   schlaegt damit buttons.css (0,2,0 gegen 0,1,1). Hier werden ausdruecklich
   KEINE neuen Werte erfunden, sondern die Rang-1-Werte aus buttons.css
   (Akzentflaeche, 48 px, Radius 0, kein Schatten, kein Versatz) mit der
   Spezifitaet wiederholt, die der Inline-Block erzwingt. Faellt der
   Inline-Block bei der Content-Bereinigung weg, kann dieser Block
   ersatzlos verschwinden - buttons.css macht dann dasselbe. */
body .webform-submission-kontakt-onlineanfrage-form .webform-button--submit {
  height: var(--feb-control-h);
  min-height: var(--feb-control-h);
  padding: 0 var(--feb-btn-px);
  background-color: var(--feb-accent);
  background-image: none;
  border: var(--feb-hairline-width) solid var(--feb-accent);
  border-radius: var(--feb-radius);
  color: var(--feb-on-accent);
  font-size: var(--feb-fs-btn);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-btn);
  box-shadow: var(--feb-shadow-none);
  transform: none;
  transition: background-color var(--feb-dur-base) var(--feb-ease),
              border-color var(--feb-dur-base) var(--feb-ease),
              color var(--feb-dur-base) var(--feb-ease);
}

body .webform-submission-kontakt-onlineanfrage-form .webform-button--submit:is(:hover, :focus-visible) {
  background-color: var(--feb-accent-hover);
  border-color: var(--feb-accent-hover);
  color: var(--feb-on-accent);
  box-shadow: var(--feb-shadow-none);
  transform: none;
}

/* Teaser-Kacheln der Kontaktseite: Radius 0, keine Schattenwolke,
   kein Hover-Versatz, kein Blau. */
body .fk-teaser {
  border-color: var(--feb-border);
  border-radius: var(--feb-radius);
}

body .fk-teaser:hover {
  border-color: var(--feb-ink);
  box-shadow: none;
  transform: none;
}

body .fk-ic,
body .fk-quote,
body .fk-person,
body .fk-badge {
  border-radius: var(--feb-radius);
}

body .fk-tlink,
body .fk-tlink:hover,
body .fk-tlink:focus-visible {
  color: var(--feb-text);
}


/* ============================================================================
   4. REVEAL-ANIMATION - KORREKTE IMPLEMENTIERUNG

   Konzept-Review M2. Ausgangslage:
     style.min.css : .reveal          { opacity:0; transform:translateY(2rem) }
                     .reveal.revealed { opacity:1; transform:translateY(0) }
                     .reveal          { opacity:1 }   <- unvollstaendiger Patch
     base.css (R2a): .reveal, .reveal.revealed { opacity:1; transform:none }
                     -> vollstaendig neutralisiert, Animation tot.

   Neu, zusammen mit initReveal() in js/global.js:
     - js/global.js entscheidet beim Start, welche Elemente ueberhaupt
       "scharf gestellt" werden: nur solche, die zu diesem Zeitpunkt noch
       NICHT im Blickfeld waren (rect.top >= innerHeight). Alles bereits
       Sichtbare bekommt sofort .revealed und wird nie versteckt - damit
       gibt es kein Aufblitzen. Ohne JavaScript wird .is-reveal-armed nie
       gesetzt, jede Sektion bleibt sichtbar (Progressive Enhancement).
     - IntersectionObserver mit threshold 0 und rootMargin statt
       threshold 0.15: Sektionen, die hoeher als das Fenster sind, haben
       die alte Schwelle nie erreicht und blieben unsichtbar.
     - einmalig: unobserve beim ersten Schnitt.
     - `prefers-reduced-motion: reduce` -> gar keine Bewegung. Der Block
       unten steht komplett in `no-preference`, zusaetzlich ueberspringt JS
       das Scharfstellen.
     - Endzustand `opacity:1; transform:none` ist identisch mit dem Zustand
       einer Sektion ohne .reveal. Animiert werden ausschliesslich `opacity`
       und `transform`, beide ausserhalb des Layouts - es entsteht weder
       ein Sprung im Seitenfluss noch ein Beitrag zu CLS. Genau das war der
       Fehler des Bestands: dort blieb translateY(2rem) dauerhaft stehen.
     - Klassenkonvention aus dem Bestand bleibt: .reveal / .revealed.
       Neu ist allein .is-reveal-armed als JS-Schalter.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* Scharfer Ausgangszustand, 0,2,1 - schlaegt `.reveal, .reveal.revealed`
     (0,2,0) aus base.css. BEWUSST OHNE `transition`: das Scharfstellen
     selbst darf nicht animiert werden, sonst blendet das Element beim
     Laden erst einmal aus (Uebergang von opacity 1 nach 0). Nur der Weg
     zurueck ist eine Animation - deshalb steht die Transition in der
     .revealed-Regel, die beim Klassenwechsel als Zielzustand gilt. */
  html .reveal.is-reveal-armed {
    opacity: 0;
    transform: translateY(var(--feb-space-4));
    transition: none;
  }

  /* 0,3,1 - Zielzustand, identisch mit einer Sektion ohne .reveal. */
  html .reveal.is-reveal-armed.revealed {
    opacity: 1;
    transform: none;
    transition: opacity var(--feb-dur-slow) var(--feb-ease),
                transform var(--feb-dur-slow) var(--feb-ease);
  }
}

/* Sicherheitsnetz 1: fordert das System reduzierte Bewegung, bleibt der
   neutrale Zustand aus base.css gueltig, auch wenn JS scharf gestellt hat. */
@media (prefers-reduced-motion: reduce) {
  html .reveal.is-reveal-armed,
  html .reveal.is-reveal-armed.revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Sicherheitsnetz 2: im Druck gibt es kein Scrollen und damit keinen
   IntersectionObserver-Schnitt. Ohne diese Regel waere jede noch scharf
   gestellte Sektion auf dem Ausdruck unsichtbar. */
@media print {
  html .reveal,
  html .reveal.is-reveal-armed,
  html .reveal.is-reveal-armed.revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================================
   5. PFEIL-LINKS - CHEVRON STATT TEXTZEICHEN (Uebergabe W2b)

   buttons.css hat fuenf Pfeil-Link-Varianten auf einen gemeinsamen
   Tertiary-Rang gezogen. Drei davon zeichnen den Pfeil per CSS (::after),
   .feb-tech-link ueber ein <span> im Markup. Bei .fk-tlink und
   .final-cta .cta-link stand das Zeichen als reiner TEXT im Linktext - es
   liess sich weder ersetzen noch aus dem Vorlesefluss nehmen.

   Entscheidung: kapseln statt entfernen. scripts/umbau/w4-9-arrows.php
   packt das Zeichen in <span aria-hidden="true">; die Regel hier gibt ihm
   exakt die Geometrie des Chevrons aus buttons.css (0,5rem, 1,5 px,
   45 Grad, 4 px Versatz im Hover). Gegen das ersatzlose Entfernen spricht,
   dass beide Klassen auch Links OHNE Pfeil tragen (die Telefonnummer der
   Kontaktseite, "Technologien ansehen"); ein pauschaler ::after-Chevron
   haette dort einen Pfeil erfunden, den der Redakteur nicht gesetzt hat.

   UEBERGABE an W2b/buttons.css: dieser Block gehoert langfristig in den
   `> span`-Chevron von buttons.css (Abschnitt 5), sobald diese Datei
   wieder angefasst wird - hier steht er nur, weil buttons.css in dieser
   Welle nicht mir gehoert.
   ============================================================================ */

body :is(.fk-tlink, .final-cta .cta-link) > span[aria-hidden="true"] {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0;
  line-height: 0;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--feb-dur-base) var(--feb-ease),
              margin-inline-start var(--feb-dur-base) var(--feb-ease);
}

body :is(.fk-tlink, .final-cta .cta-link):is(:hover, :focus-visible) > span[aria-hidden="true"] {
  margin-inline-start: 4px;
  transform: rotate(45deg);
}