/* ============================================================
   WT-3  Eigenes SVG-Icon-System  (Technik-Welle)
   ------------------------------------------------------------
   Ausgabe der Icons: Twig-Makro _icons.html.twig (Inline-SVG),
   NICHT ueber ein externes SVG-Sprite. Warum das Makro:

     1. currentColor erbt inline verlaesslich die Textfarbe. Bei
        <use href="sprite.svg#id"> aus einer externen Datei ist die
        Vererbung an Browser-/Caching-Eigenheiten gebunden.
     2. Kein zerbrechlicher Sprite-Pfad. Der href muesste ueber
        base_path + Theme-Verzeichnis (und je nach Kontext Sprachpraefix)
        gebaut werden - eine typische Bruchstelle in Drupal.
     3. Kein Extra-HTTP-Request, keine Aggregations-/Cache-Fragen.
     4. A11y je Icon direkt steuerbar (aria-hidden vs. <title>).
     5. Der Bestand (page.html.twig, News-Views) macht es genauso -
        Inline-SVG mit currentColor. Ein Guss.

   Der Mehr-Markup-Nachteil des Makros ist hier unkritisch: Icons
   erscheinen in Listen/Karten in ueberschaubarer Zahl, nicht
   hundertfach.

   FARBE: monochrom, immer currentColor. #006ABC (Akzent) traegt KEIN
   Icon - der Akzent bleibt Buttons/Aktionen vorbehalten (tokens.css).
   Auf dunklen Sektionen kippt --feb-text via Token-Scope auf Weiss;
   weil die Icons dieselbe Textfarbe erben, folgen sie automatisch.
   ============================================================ */

/* ---------- Basis ---------- */
.feb-icon {
  display: inline-block;
  width: 1.5rem;               /* 24 px - Default (md) */
  height: 1.5rem;
  flex: 0 0 auto;
  color: inherit;             /* erbt Textfarbe -> currentColor */
  fill: none;
  stroke: currentColor;       /* Redundanz zum Inline-Attribut, robust */
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;    /* optische Grundlinie zum Fliesstext */
  overflow: visible;
  -webkit-user-select: none;
          user-select: none;
}

/* ---------- Groessenvarianten ---------- */
.feb-icon--sm { width: 1rem;    height: 1rem;    }  /* 16 */
.feb-icon--md { width: 1.5rem;  height: 1.5rem;  }  /* 24 */
.feb-icon--lg { width: 2rem;    height: 2rem;    }  /* 32 */
.feb-icon--xl { width: 2.5rem;  height: 2.5rem;  }  /* 40 */

/* Ist ein Icon der einzige Inhalt eines Links/Buttons, mittig setzen. */
a > .feb-icon:only-child,
button > .feb-icon:only-child { vertical-align: middle; }

/* Feiner: die Strichstaerke bei sehr kleinen Icons leicht anheben,
   damit die Linien nicht ausbleichen. */
.feb-icon--sm { stroke-width: 1.6; }

/* ============================================================
   Einbau 1 - Feature-Karten (Vorteils-/Themenkarten der
   Branchen- und Technologieseiten).
   Das Icon steht dort, wo sonst das Medienbild stuende, und wird
   NUR gerendert, wenn die Karte kein Bild traegt (Logik im Twig).
   Es uebernimmt die Titelfarbe (--feb-text) und kippt damit auf
   dunklen Sektionen automatisch auf Weiss.
   ============================================================ */
.brm-feature-card__icon {
  display: flex;
  align-items: center;
  margin: 0 0 var(--feb-t-mb-h3, 0.75rem);
  color: var(--feb-text, #0b0d0e);
}
.brm-feature-card__icon .feb-icon {
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
}

/* ============================================================
   Einbau 2 - Quick-Facts-Band im Hero.
   Kleines Icon ueber dem Label der qualitativen Fakten (die ohne
   Zahlenwert). Das Band liegt immer auf dunklem Grund (Ink oder
   Video), darum Weiss.
   ============================================================ */
.brm-quickfacts__icon {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--feb-text-inverse, #fff);
}
.brm-quickfacts__icon .feb-icon {
  width: 1.75rem;
  height: 1.75rem;
  vertical-align: middle;
}

/* Reduced Motion: hier nichts zu animieren - die Icons sind statisch.
   (Bewusst dokumentiert, damit spaetere Wellen nicht hier nach einer
   Hover-Bewegung suchen: die macht polish.css, nicht icons.css.) */