/* Lokale Allura Schrift einbinden */
@font-face {
    font-family: 'Allura';
    src: url('../../../assets/fonts/Allura-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ==== GLOBALE CSS-VARIABLEN ==== */
:root {
    /* Thai-Website Farben */
    --thai-dark-green: #005656;
    --thai-beige: #e7d283;
    --thai-light-beige: #efdfa7;
    --text-dark: #2c2c2c;
    --text-medium: #555555;
    --text-light: #ffffff;
    --text-muted: #aaa;

    --background-white: #ffffff;
    --background-light: #f8f8f8;
    --background-dark: #1a1a1a;
    
    /* Navigation */
    --nav-background: var(--thai-dark-green);
    --nav-hover-background: var(--thai-beige);
    --nav-height: 60px;
    --subnav-hover-background: var(--thai-light-beige);
    --nav-main-back-trans: rgba(0, 86, 86, 0.4);
    --nav-main-back-blur: blur(6px);
    --hero-back-dim: rgba(0, 0, 0, 0.2);


    /* Schattenfarben */
    --shadow-green: rgba(0, 86, 86, 0.3);
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --shadow-text: rgba(0, 0, 0, 0.2);

    --border-light: rgba(255, 255, 255, 0.1);
    --text-light-transparent: rgba(255, 255, 255, 0.9);

    /* Schriftarten */
    --font-heading: 'Allura', cursive;
    --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    /* Schriftgrößen */
    --font-size-hero: 8.2em;
    --font-size-h1: 4.5em;
    --font-size-h2: 3em;
    --font-size-h3: 2.5em;
    --font-size-h4: 2em;
    --font-size-body: 1.1em;
    --font-size-phone: 1.6em;
    --font-size-nav: 1em;

    /* Schriftgewichte */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Abstände */
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-xxl: 60px;
    --spacing-hero: 80px;

    /* Schatten */
    --shadow-card: 0 4px 8px var(--shadow-light);
    --shadow-card-hover: 0 6px 16px var(--shadow-medium);
    --shadow-nav: 0 2px 10px var(--shadow-light);
    --shadow-image: 0 6px 12px var(--shadow-light);
    --text-shadow-hero: 3px 3px 8px var(--shadow-dark), 1px 1px 3px var(--shadow-text);
    --text-shadow-light: 1px 1px 3px var(--shadow-light);

    /* Border Radius */
    --border-radius-sm: 10px;
    --border-radius-md: 15px;
    --border-radius-lg: 20px;
    --border-radius-xl: 25px;
    --border-radius-xxl: 30px;

    /* Übergänge */
    --transition-fast: 0.3s ease;

    /* Layout von den jeweiligen Seiten */
    --max-width: 1200px;
    --content-padding: 0px;
    --content-margin: 5px auto;


    /* Navigation */
    --nav-logo-width: 50px;
    --nav-logo-margin-top: 2px;
    --nav-logo-text-height: 50px;
    --nav-logo-text-margin-top: 0px;
    --nav-link-padding: 5px 15px;
    --nav-toggle-padding: 5px;
    --nav-toggle-span-width: 25px;
    --nav-toggle-span-height: 3px;
    --nav-toggle-span-margin: 3px 0;
    --nav-border-bottom-width: 3px;
    --letter-spacing-nav: 0.5px;
    --z-index-nav: 1000;
    --z-index-modal: 1000;
    --z-index-scroll: 1000;

    /* Buttons */
    --btn-kl-width: 130px;
    --btn-kl-height: 30px;
    --btn-kl-padding: 2px 10px;
    --btn-kl-border-radius: 10px;
    --btn-kl-background: var(--thai-beige);
    --btn-kl-font-size: var(--font-size-body);
    --btn-kl-font-weight: var(--font-weight-semibold);
    --btn-kl-font-color: var(--thai-dark-green);
    --btn-kl-txt-decoration: none;
    --btn-kl-txt-decoration-hover: underline;
    --btn-kl-white-space: nowrap;
    --btn-kl-box-shadow: var(--shadow-card);
    --btn-kl-background-hover: var(--thai-light-beige);
    --btn-kl-font-color-hover: var(--thai-dark-green);
    --btn-kl-box-shadow-hover: var(--shadow-card-hover);
    --btn-kl-cursor: pointer;

    /* Cards light*/
    --card-light-background: var(--background-white);
    --card-light-border-radius: var(--border-radius-sm);
    --card-light-box-shadow: var(--shadow-card);
    --card-light-font-color: var(--text-dark);

    /* Cards dark*/
    --card-dark-background: var(--thai-dark-green);
    --card-dark-border-radius: var(--border-radius-sm);
    --card-dark-box-shadow: var(--shadow-card);
    --card-dark-font-color: var(--text-light);
}