/**
 * Uncode Overrides — KSM Hattersheim
 *
 * Alle CSS-Überschreibungen von Uncode-Parent-Klassen gehören hierher.
 * NICHT in style.css, NICHT in Element-CSS.
 *
 * Ausnahme: Wenn ein Override nur ein spezifisches VC-Element betrifft
 * und dieses Element eigenes CSS hat → dort rein.
 *
 * Regeln:
 * - Nur Uncode-Klassen (.uncode-*, .style-*, .tmb, .t-entry-*, etc.)
 * - Immer CSS-Variablen verwenden (kein hardcoded px)
 * - Kommentar über jedem Block: was wird überschrieben und warum
 * - Kein !important — wenn nötig, Spezifität erhöhen
 */


 h1, h2, h3, h4, h5, h6, .fontsize-xxl, .fontsize-xl, .fontsize-l {
    text-transform: uppercase;
 }

/* === Headline Line-Height ===
   Was:   Uncode-Größenklassen .fontsize-xxl / -xl / -l
   Warum: Engere Zeilenhöhe für große Headlines. */
   .fontsize-xxl,
   .fontsize-xl,
   .fontsize-l {
       line-height: 1.1;
   }
   

/* ============================================
   UTILITIES / HELPER
   ============================================ */

/* Brand-Verlauf als Hintergrund — z.B. als "Extra class name" auf eine vc_row setzen.
   Varianten: -radial (radialer Verlauf), -soft (zweistufig, weicher). */
   .ksm-bg-gradient {
    background-image: var(--ksm-gradient);
}

.ksm-bg-gradient-radial {
    background-image: var(--ksm-gradient-radial);
}

.ksm-bg-gradient-soft {
    background-image: var(--ksm-gradient-soft);
}



/* === Gradient-Headlines ===
   Was:   Headlines mit der Uncode-Klasse .fontsize-132553 innerhalb .style-light
   Warum: Schrift soll den Brand-Verlauf (--ksm-gradient) als "Farbe" tragen — nur im hellen Stil.
   Wie:   Verlauf als background, per background-clip: text auf den Text beschneiden,
          Füllfarbe transparent. Spans erben den Verlauf des Headline-Elements. */
.style-light .fontsize-xxl {
    background-image: var(--ksm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.style-light .fontsize-xxl span {
    color: inherit;
    -webkit-text-fill-color: transparent;
}

/* === KSM Button-Typografie (global) ===
   Was:   Uncode .btn, Menü-CTA, VC-Element-CTAs, Fluent-Forms-Submit
   Soll:  Fira Bold Italic, kein Letter-Spacing, kein Uppercase
   Warum: Uncode setzt .btn { font-style: normal !important; }, .font-ui { letter-spacing: .05em } */
.row-container .btn,
.row-container .btn-link,
#menu-cta .menu-item-button .btn,
.ksm-slider__cta,
.ksm-themen-card__cta,
.ksm-karten-card__cta,
.fluentform form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) {
    font-family: var(--ksm-btn-font-family);
    font-style: italic !important;
    font-weight: var(--ksm-font-weight-bold);
    letter-spacing: var(--ksm-btn-letter-spacing);
    text-transform: none;
}

.row-container .btn span,
.row-container .btn-link span,
#menu-cta .menu-item-button .btn span,
.ksm-slider__cta-label,
.ksm-themen-card__cta-label,
.ksm-karten-card__cta-label {
    letter-spacing: var(--ksm-btn-letter-spacing);
    text-transform: none;
}

/* === CTA-Menü-Button "Kontakt" ===
   Was:   Menü-Item .menu-item-button (#menu-cta) im Header
   Warum: Navbar ist durchgehend hell → solider Koralle-Button mit weißem Label;
          Hover: weißer Hintergrund + Koralle-Rand + Koralle-Label.
   Hinweis: Das <a> trägt ein Inline height:56px → nur per !important überschreibbar. */
#menu-cta .menu-item-button > a {
    height: auto !important;
}

#menu-cta .menu-item-button .btn {
    display: inline-flex;
    align-items: center;
    background: rgba(var(--ksm-color-accent), 1);
    border: 1px solid rgba(var(--ksm-color-accent), 1);
    border-radius: var(--ksm-border-radius-pill);
    /* !important, da Uncode das Button-Padding mit !important setzt */
    padding: var(--ksm-spacing-md) calc(var(--ksm-spacing-base) * 1.8) !important;
    line-height: 1;
    transition: background var(--ksm-transition-fast), border-color var(--ksm-transition-fast), color var(--ksm-transition-fast);
}

#menu-cta .menu-item-button .btn span {
    color: rgba(var(--ksm-color-white), 1);
}

#menu-cta .menu-item-button a:hover .btn,
#menu-cta .menu-item-button a:focus-visible .btn {
    background: rgba(var(--ksm-color-white), 1);
    border-color: rgba(var(--ksm-color-accent), 1);
}

#menu-cta .menu-item-button a:hover .btn span,
#menu-cta .menu-item-button a:focus-visible .btn span {
    color: rgba(var(--ksm-color-accent), 1);
}