/*
=================================
--- GLOBALE SCHRIFTARTEN ---
=================================
*/
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* ========================================
     FARBEN / COLORS
     ======================================== */

    /* Primäre Markenfarben */
    --ks-color-primary: #61d7dd;
    /* Türkis - Individuelles Coaching */
    --ks-color-secondary: #64B5F6;
    /* Hellblau - Unternehmens Coaching */
    --ks-color-accent: #ffd45c;
    /* Gelb - Call-to-Action */
    --ks-color-tertiary: #B39DDB;
    /* Lila */
    --ks-color-brand-purple: #afa7fe;
    /* Kunst des Lebens Purple */

    /* Farbvarianten für Page-Theming */
    --ks-color-primary-variant-turquoise: #61d7dd;
    /* Individuelles Coaching */
    --ks-color-secondary-variant-blue: #64B5F6;
    /* Unternehmens Coaching */

    /* Hover States */
    --ks-color-accent-hover: #b2902f;
    /* Dunkleres Gelb für Buttons */
    --ks-color-secondary-hover: #5a9aeb;
    /* Dunkleres Hellblau für Buttons */

    /* Background-Varianten */
    --ks-color-bg-light-gray: #f8f9fa;
    /* Mehrfach verwendetes helles Grau */
    --ks-color-bg-light: #f0f4f8;
    /* Heller blau-grauer Hintergrund (Kontaktseite) */

    /* Hintergrundfarben */
    --ks-color-white: #ffffff;
    --ks-color-black: #000000;
    --ks-color-light-bg: #e6f7f8;
    /* Heller türkiser Hintergrund */
    --ks-color-gray-bg: #f9f9f9;
    /* Neutraler grauer Hintergrund */

    /* Textfarben */
    --ks-color-text-primary: #333;
    /* Haupttext */
    --ks-color-text-secondary: #555;
    /* Sekundärtext */
    --ks-color-text-light: #777;
    /* Hellerer Text */

    /* UI-Farben */
    --ks-color-border: #e0e0e0;
    --ks-color-border-dark: #b0c7df;


    /* ========================================
     TYPOGRAFIE / TYPOGRAPHY
     ======================================== */

    /* Font Families */
    --ks-font-family-base: 'Congenial', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ks-font-family-display: 'Playfair Display', serif;

    /* Font Sizes - Base */
    --ks-font-size-base: 1rem;
    /* 20px - Standard Body Text */
    --ks-font-size-xs: 0.75rem;
    /* 15px */
    --ks-font-size-sm: 0.875rem;
    /* 17.5px */
    --ks-font-size-lg: 1.1rem;
    /* 22px */
    --ks-font-size-xl: 1.2rem;
    /* 24px */

    /* Font Sizes - Headings */
    /* Font Sizes - Headings (Fluid Typography) */
    --ks-font-size-h1: clamp(2rem, 5vw + 1rem, 3.5rem);
    /* 32px -> 56px */
    --ks-font-size-h2: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
    /* 28px -> 40px */
    --ks-font-size-h3: clamp(1.5rem, 3vw + 0.5rem, 2rem);
    /* 24px -> 32px */
    --ks-font-size-h4: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
    /* 20px -> 28px */
    --ks-font-size-h5: clamp(1.1rem, 1.5vw + 0.5rem, 1.5rem);
    /* 18px -> 24px */
    --ks-font-size-h6: clamp(1rem, 1vw + 0.5rem, 1.25rem);
    /* 16px -> 20px */

    /* Font Weights */
    --ks-font-weight-normal: 400;
    /* Regular / ExtraLight */
    --ks-font-weight-medium: 500;
    /* Medium */
    --ks-font-weight-bold: 700;
    /* Bold */

    /* Line Heights */
    --ks-line-height-tight: 1.2;
    --ks-line-height-normal: 1.6;
    --ks-line-height-relaxed: 1.7;
    --ks-line-height-loose: 1.8;


    /* ========================================
     SPACING / ABSTÄNDE
     ======================================== */

    /* SAFE AREA UTILITIES */
    --ks-safe-area-top: env(safe-area-inset-top, 0px);
    --ks-safe-area-right: env(safe-area-inset-right, 0px);
    --ks-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --ks-safe-area-left: env(safe-area-inset-left, 0px);

    --ks-spacing-xs: 0px;
    --ks-spacing-sm: 20px;
    --ks-spacing-md: 40px;
    --ks-spacing-lg: 60px;
    --ks-spacing-xl: 80px;
    --ks-spacing-2xl: 100px;

    /* Zusätzliche Spacing-Werte */
    --ks-spacing-xs-10: 10px;
    --ks-spacing-sm-15: 15px;
    --ks-spacing-md-30: 30px;
    --ks-spacing-md-50: 50px;

    /* Spezifische Abstände */
    --ks-spacing-section: 60px;
    /* Standard Section Padding */
    --ks-spacing-section-lg: 80px;
    /* Große Section Padding */


    /* ========================================
     LAYOUT / CONTAINER
     ======================================== */

    /* Container Max-Widths */
    --ks-container-max-width: 1400px;
    /* Navigation Container */
    --ks-content-max-width: 1200px;
    /* Standard Content Container */
    --ks-text-max-width: 850px;
    /* Text Content (optimal readability) */
    --ks-text-wide-max-width: 1000px;
    /* Etwas breiterer Text Content */

    /* Grid Gaps */
    --ks-grid-gap-sm: 20px;
    --ks-grid-gap-md: 40px;
    --ks-grid-gap-lg: 60px;


    /* ========================================
     BORDERS & RADIUS
     ======================================== */

    --ks-border-width: 1px;
    --ks-border-width-thick: 2px;
    --ks-border-width-extra-thick: 4px;

    --ks-border-radius-xs: 5px;
    /* Kleinere Radius */
    --ks-border-radius-sm: 4px;
    --ks-border-radius-md: 8px;
    --ks-border-radius-lg: 12px;
    --ks-border-radius-xl: 16px;
    /* Größere Radius */
    --ks-border-radius-circle: 50%;


    /* ========================================
     SHADOWS / SCHATTEN
     ======================================== */

    --ks-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    --ks-shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
    --ks-shadow-lg: 0 5px 25px rgba(0, 0, 0, 0.2);


    /* ========================================
     TRANSITIONS / ÜBERGÄNGE
     ======================================== */

    --ks-transition-fast: 0.2s ease;
    --ks-transition-normal: 0.3s ease;
    --ks-transition-slow: 0.5s ease;

    --ks-transition-timing-default: ease;
    --ks-transition-timing-in-out: cubic-bezier(0.25, 0.8, 0.25, 1);


    /* ========================================
     Z-INDEX / SCHICHTUNG
     ======================================== */

    --ks-z-index-dropdown: 100;
    --ks-z-index-sticky: 200;
    --ks-z-index-fixed: 500;
    --ks-z-index-modal-backdrop: 900;
    --ks-z-index-modal: 1000;
    --ks-z-index-navigation: 1000;
    --ks-z-index-tooltip: 1100;


    /* ========================================
     RESPONSIVE BREAKPOINTS
     ======================================== */

    /* Breakpoint-Werte (für JavaScript-Zugriff) */
    --ks-breakpoint-mobile: 480px;
    --ks-breakpoint-tablet: 768px;
    --ks-breakpoint-desktop: 992px;
    --ks-breakpoint-wide: 1200px;

    /* Standard Breakpoints - Konsistent verwenden
       Mobile: < 480px (default, keine Media Query nötig)
       Tablet: 768px - 991px
       Desktop: 992px - 1199px
       Wide: 1200px+
    */
}


/* ========================================
   RESPONSIVE ANPASSUNGEN
   ======================================== */

/* Tablet & Mobile - reduzierte Schriftgrößen */
@media (max-width: 768px) {
    :root {
        --ks-font-size-h1: 3.2rem;
        /* 50px statt 70px */
        --ks-font-size-h2: 1.8rem;
        /* 36px statt 40px */
        --ks-font-size-h3: 1.5rem;
        /* 30px statt 35px */

        --ks-spacing-section: 40px;
        /* Kleinere Section Paddings */
        --ks-spacing-section-lg: 60px;
    }
}

/* Mobile - weitere Anpassungen */
@media (max-width: 480px) {
    :root {
        --ks-font-size-h1: 3.2rem;
        /* 40px */
        --ks-font-size-h2: 1.5rem;
        /* 30px */
    }
}