/* =============================================================================
   01-typography.css
   Viseca – Roboto Webfont Implementation (Spec v3)
   -----------------------------------------------------------------------
   Font faces are declared in 00-global.css:
     Roboto, font-weight: 300  = Lauftext, H1, H2, Navigation
     Roboto, font-weight: 400  = Labels, Buttons
     Roboto, font-weight: 700  = H3, H4, Bold
   -----------------------------------------------------------------------
   Strategy:
     body / body *        – no !important  → Elementor per-element rules
                            (higher specificity) win naturally.
     H1–H6               – !important     → must override Elementor global kit.
     .typo-custom         – escape hatch to fully opt out of this file.
   Font Awesome icons are explicitly protected so our font-family rules
   never reach icon pseudo-elements or wrapper spans.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   BASE – body & generic copy
   ----------------------------------------------------------------------------- */

body,
body * {
    /* Font-family only – no font-size/weight here on body * because
       that would still be a direct rule and beat Elementor inheritance. */
    font-family: Roboto, sans-serif;
}

body {
    /* Font-size/weight ON body → cascades via inheritance.
       Elementor sets its per-element overrides on the wrapper DIV, so the
       DIV is the nearest ancestor of the <p> and wins the inherited race.
       Any <p> without an Elementor parent override falls back to these. */
    font-size: 16px;
    font-weight: 300;
    line-height: 1.375;
}

/* Lauftext / paragraph
   font-family only – everything else comes from body (inherited) or from
   Elementor's per-element wrapper div (nearest ancestor wins).
   DO NOT add font-size here – it would be a direct rule on <p> and would
   beat Elementor's font-size that is set on the parent div, not on <p>. */
p,
li,
td,
th,
blockquote,
figcaption {
    font-family: Roboto, sans-serif;
}

/* Inline bold / strong → stay Roboto but switch to weight 700 */
strong,
b {
    font-family: Roboto, sans-serif;
    font-weight: 700;
}


/* -----------------------------------------------------------------------------
   FONT AWESOME – protect icon fonts from being overridden
   Covers FA 4, FA 5 (Free + Pro + Brands) and FA 6.
   Both the wrapper element and the ::before / ::after pseudo-elements
   must keep their original font-family, so we explicitly restore it.
   ----------------------------------------------------------------------------- */

.fa,
.fab,
.fad,
.fal,
.fao,
.far,
.fas,
.fat,
.fass,
.fasr,
.fasl,
.fadk,
[class^="fa-"],
[class*=" fa-"],
.elementor-icon i,
.elementor-icon svg {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands",
                 "Font Awesome 5 Pro",  "Font Awesome 6 Free",
                 "Font Awesome 6 Brands", "Font Awesome 6 Pro",
                 "FontAwesome" !important;
    font-weight: 900; /* FA solid default; individual icon classes override this */
    speak: never;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

/* Pseudo-elements that render the actual glyph */
.fa::before,    .fa::after,
.fab::before,   .fab::after,
.fad::before,   .fad::after,
.fal::before,   .fal::after,
.far::before,   .far::after,
.fas::before,   .fas::after,
.fat::before,   .fat::after,
.fass::before,  .fass::after,
.fasr::before,  .fasr::after,
[class^="fa-"]::before,
[class*=" fa-"]::before,
[class^="fa-"]::after,
[class*=" fa-"]::after {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands",
                 "Font Awesome 5 Pro",  "Font Awesome 6 Free",
                 "Font Awesome 6 Brands", "Font Awesome 6 Pro",
                 "FontAwesome" !important;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Elementor Icon widget also wraps the <i> in a link – reset that link too */
.elementor-widget-icon .elementor-icon {
    font-family: inherit;
}


/* -----------------------------------------------------------------------------
   INLINE STYLE ESCAPE HATCH
   Add class  .typo-custom  to any Elementor widget (Advanced → CSS Classes).
   Every !important typographic override in this file is neutralised for that
   element and all its descendants, so custom inline styles can take effect.
   ----------------------------------------------------------------------------- */

/* Unset font-family so inline style="font-family:..." wins again */
.typo-custom,
.typo-custom *,
.typo-custom p,
.typo-custom li,
.typo-custom td,
.typo-custom th,
.typo-custom h1,
.typo-custom h2,
.typo-custom h3,
.typo-custom h4,
.typo-custom h5,
.typo-custom h6,
.typo-custom strong,
.typo-custom b,
.typo-custom label {
    font-family: unset !important;
    font-size: unset !important;
    font-weight: unset !important;
    line-height: unset !important;
    letter-spacing: unset !important;
}


/* -----------------------------------------------------------------------------
   HEADINGS – H1 & H2  (Roboto weight 300)
   ----------------------------------------------------------------------------- */

h1,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] ~ h1,
.elementor-heading-title.elementor-size-xl,
.elementor-heading-title.elementor-size-xxl {
    font-family: Roboto, sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.25 !important;
    /* font-size desktop → see responsive block below */
}

h2,
.elementor-heading-title.elementor-size-large {
    font-family: Roboto, sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.25 !important;
}

/* H3 & H4 – Bold */
h3,
.elementor-heading-title.elementor-size-medium {
    font-family: Roboto, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.375 !important;
}

h4,
.elementor-heading-title.elementor-size-small {
    font-family: Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.375 !important;
}

/* H5 & H6 – keep same style as H4 unless spec says otherwise */
h5,
h6 {
    font-family: Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.375 !important;
}


/* -----------------------------------------------------------------------------
   DESKTOP sizes  (≥ 1025px)
   ----------------------------------------------------------------------------- */

@media screen and (min-width: 1025px) {

    h1,
    .elementor-heading-title.elementor-size-xl,
    .elementor-heading-title.elementor-size-xxl {
        font-size: 40px !important;
    }

    h2,
    .elementor-heading-title.elementor-size-large {
        font-size: 32px !important;
    }
}


/* -----------------------------------------------------------------------------
   TABLET sizes  (769px – 1024px)
   ----------------------------------------------------------------------------- */

@media screen and (min-width: 769px) and (max-width: 1024px) {

    h1,
    .elementor-heading-title.elementor-size-xl,
    .elementor-heading-title.elementor-size-xxl {
        font-size: 36px !important;
    }

    h2,
    .elementor-heading-title.elementor-size-large {
        font-size: 30px !important;
    }
}


/* -----------------------------------------------------------------------------
   MOBILE sizes  (≤ 768px)
   ----------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {

    h1,
    .elementor-heading-title.elementor-size-xl,
    .elementor-heading-title.elementor-size-xxl {
        font-size: 32px !important;
    }

    h2,
    .elementor-heading-title.elementor-size-large {
        font-size: 26px !important;
    }
}


/* -----------------------------------------------------------------------------
   LEADTEXT  – 20 px / 300 / 1.375
   Usage: add class  .leadtext  to an Elementor text widget
   ----------------------------------------------------------------------------- */

.leadtext,
.leadtext *,
.elementor-widget-text-editor.leadtext *,
p.leadtext {
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.375;
}


/* -----------------------------------------------------------------------------
   TEXT KLEIN  – 14 px / 300 / 1.375
   Usage: add class  .text-klein  or  .text-small  to the widget
   ----------------------------------------------------------------------------- */

.text-klein,
.text-klein *,
.text-small,
.text-small *,
small,
.elementor-widget-text-editor.text-klein * {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.375;
}


/* -----------------------------------------------------------------------------
   FORM LABELS  – 18 px / 400 / 1.375
   ----------------------------------------------------------------------------- */

label,
.gfield label,
.gfield > label,
.gform_wrapper label,
.elementor-field-label,
.elementor-form .elementor-field-group label {
    font-family: Roboto, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.375 !important;
}


/* -----------------------------------------------------------------------------
   NAVIGATION  – Roboto weight 300, let Elementor control sizes
   ----------------------------------------------------------------------------- */

nav,
.elementor-nav-menu,
.elementor-nav-menu a,
.elementor-nav-menu .menu-item a,
.main-navigation,
.main-navigation a {
    font-family: Roboto, sans-serif !important;
    font-weight: 300 !important;
}


/* -----------------------------------------------------------------------------
   BUTTONS  – Roboto 400 (Regular)
   ----------------------------------------------------------------------------- */

.elementor-button,
.elementor-button-wrapper a,
button,
[type="submit"],
[type="button"],
.wp-block-button__link {
    font-family: Roboto, sans-serif !important;
    font-weight: 400 !important;
}


/* -----------------------------------------------------------------------------
   Fixes after meeting (Numbers on /de/unternehmen/im-fokus/ and other langs)
   Apparently this cuz elementor resets their IDs :DDDD
   ----------------------------------------------------------------------------- */
.elementor-counter .elementor-counter-number-wrapper {

    font-weight: 300 !important;
}

/* Medien Accordion / Investoren/nachhaltigkeit */
.eael-data-table a {

    color: #434343 !important;
    font-weight: 300 !important;
}

.eael-data-table a:hover {

    color: #F6A435 !important;
}


/* Content links – brand blue (#739EC6), excluding nav (header) and footer.
   Uses :not() to exclude ancestor contexts so nav/footer links are untouched. */
.elementor a:not(header a, footer a, nav a, .main-nav-list a, .mobile-nav-wrapper a, .footer-inner a) {

    color: #739EC6;
}

.elementor a:not(header a, footer a, nav a, .main-nav-list a, .mobile-nav-wrapper a, .footer-inner a):hover {

    color: #4780B6;
}

/* Ensure header/footer links are not affected by the rule above */
header a,
footer a,
nav a,
.main-nav-list a,
.mobile-nav-wrapper a,
.footer-inner a {

    color: inherit;
}