/* ======================================= */
/* 1. FONT-IMPORT & GLOBALE VARIABLEN */
/* ======================================= */
/* Importiere die zwei Schriftarten */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
    /* Logo/Akzentfarbe: Electric Blue (Für Links, Fokus) */
    --logo-color: #007bff; 
    --logo-color-hover: #0069d9; 

    /* CTA-Farbe: Leuchtendes Orange (Maximale Sichtbarkeit) */
    --cta-color: #FF6600; 
    --cta-color-hover: #E65C00; 
    
    /* Typografie-Farben (Neutral, Dunkelgrau) */
    --heading-color: #333333; 
    --text-color: #5a5a5a; 
    
    /* Ästhetik */
    --border-radius: 6px; 
    --light-grey-bg: #f7f7f7; 
    --subtle-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* Basis-Anwendung */
body {
    /* Roboto für den gesamten Haupttext */
    font-family: 'Roboto', sans-serif !important; 
    color: var(--text-color);
}


/* ======================================= */
/* 2. TYPOGRAFIE & HIERARCHIE (H1 MIT FIRA SANS, SCHWARZ) */
/* ======================================= */

/* Generelle Überschriften-Einstellungen */
h1, h2, h3, h4 {
    color: var(--heading-color); 
    line-height: 1.25;
    /* GRÖSSE und MARGIN WERDEN VOM THEME BESTIMMT */
}

/* H1 (Titel - Fira Sans, Farbe zurückgesetzt) */
h1 {
    font-family: 'Fira Sans', sans-serif !important; 
    font-weight: 600 !important;
    color: var(--heading-color) !important; /* FARBE ZURÜCK AUF DUNKELGRAU */
}

/* H2 (Sektion - Behält Roboto) */
h2 {
    font-weight: 500 !important; 
}

/* Absatz/Fließtext (Behält Roboto) */
p {
    line-height: 1.75; 
    margin-bottom: 1.2rem;
}


/* ======================================= */
/* 3. BUTTONS & CTAs: AKTION (LEUCHT-ORANGE) */
/* ======================================= */

/* Haupt-Button-Styling */
a.cta-button, input.hs-button.primary {
    background-color: var(--cta-color) !important;
    border-color: var(--cta-color) !important;
    color: #fff !important;
    font-weight: 700 !important; 
    text-transform: uppercase; 
    padding: 14px 30px !important; 
    border-radius: var(--border-radius) !important; 
    
    transition: all 0.2s ease-out !important; 
}

/* Hover-Effekt: HEBT SICH SANFT AB */
a.cta-button:hover, input.hs-button.primary:hover {
    background-color: var(--cta-color-hover) !important;
    transform: translateY(-3px) scale(1.01) !important; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important; 
}


/* ======================================= */
/* 4. NAVIGATION & FOOTER (BLAUER AKZENT) */
/* ======================================= */

/* Navigations-Links mit starkem Font-Gewicht */
.menu-item a, 
.header-menu .active a {
    color: var(--heading-color) !important;
    font-weight: 7