/* ===== OO Icon =====
   Basis-Styles für die <Icon>-Komponente (Material Symbols Outlined).
   display:inline-block ist nötig, damit vertical-align in Inline-/Textfluss-Kontexten
   zuverlässig greift. In Flex-Containern wird vertical-align ignoriert – kein Konflikt.
   ==================== */

.oo-icon {
    font-family: 'Material Symbols', 'Material Symbols Outlined', sans-serif!important;
    /* Bewährter Trick (Font Awesome, Lucide, etc.): negativer Wert senkt die Icon-Baseline,
       wodurch die Glyph-Mitte optisch auf Zeilenmitte wandert.
       In Flex-Containern wird vertical-align komplett ignoriert → kein Einfluss auf Buttons/Badges. */
    vertical-align: -0.125em;
}

/* Explizite Icon-Größen haben eine eigene Staffelung: Die allgemeinen Textgrößen
   für XS, SM und MD sind gleich. Ohne Size bleibt die geerbte Schriftgröße erhalten.
   !important überschreibt die allgemeinen oo-size-Regeln; die Schrift-Skalierung bleibt aktiv. */
.oo-icon.oo-size-xs { font-size: calc(1rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-sm { font-size: calc(1.25rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-md { font-size: calc(1.5rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-lg { font-size: calc(1.75rem * var(--oo-font-scale, 1)) !important; }
.oo-icon.oo-size-xl { font-size: calc(2rem * var(--oo-font-scale, 1)) !important; }