.elementor-kit-6{--e-global-color-primary:#1F1A1E;--e-global-color-secondary:#D9D9D9;--e-global-color-text:#1F1A1E;--e-global-color-accent:#FFFFFF;--e-global-typography-primary-font-family:"Overpass-Custom";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Overpass-Custom";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Overpass-Custom";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Overpass-Custom";--e-global-typography-accent-font-weight:500;--e-global-typography-146d26b-font-family:"Overpass-Custom";--e-global-typography-b66dcb1-font-family:"Overpass-Custom";--e-global-typography-5ba6495-font-family:"Overpass-Custom";--e-global-typography-9eb361f-font-family:"Overpass-Custom";--e-global-typography-2c1f2ab-font-family:"Overpass-Custom";--e-global-typography-65bc4e8-font-family:"Overpass-Custom";--e-global-typography-04aa575-font-family:"Overpass-Custom";--e-global-typography-384d02e-font-family:"Overpass-Custom";--e-global-typography-7f29b28-font-family:"Overpass-Custom";--e-global-typography-e01d543-font-family:"Overpass-Custom";background-color:#F2F2F2;font-size:1rem;font-weight:400;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1620px;}.e-con{--container-max-width:1620px;--container-default-padding-top:0;--container-default-padding-right:0;--container-default-padding-bottom:0;--container-default-padding-left:0;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1270px){.elementor-kit-6{font-size:1rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1270px;}.e-con{--container-max-width:1270px;}}@media(max-width:820px){.elementor-kit-6{font-size:1rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:820px;}.e-con{--container-max-width:820px;}}/* Start custom CSS *//* =========================================
   FLUID TYPOGRAPHY ENGINE 2.0
   Range: 360px -> 1620px
   Fixes: Overpass-Custom FORCED, saubere Variablen & Klassen
   ========================================= */

:root {
    /* --- 1. KONFIGURATION --- */
    --font-width-min: 360;   
    --font-width-max: 1620;  
    --font-size-min: 17;     
    --font-size-max: 18;     
    --font-ratio-min: 1.15;  
    --font-ratio-max: 1.25;  

    /* --- 2. SPACING CONFIG --- */
    --spacing-headline: -0.04em; 
    --spacing-body:     -0.03em; 
    --spacing-small:    -0.04em; 
    --spacing-button:   -0.01em; 

    /* --- 3. BROWSER RENDERING --- */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* --- 4. ENGINE (Die Mathematik) --- */
    
    /* Level 5 (XXXL) */
    --lvl-5-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 5));
    --lvl-5-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 5));
    --lvl-5-slope: calc((var(--lvl-5-max) - var(--lvl-5-min)) / (var(--font-width-max) - var(--font-width-min)));
    --lvl-5-nav: calc(((var(--lvl-5-min) / 16) * 1rem) + (var(--lvl-5-slope) * (100vw - (var(--font-width-min) * 1px))));
    --fluid-lvl-5: clamp(calc(var(--lvl-5-min) / 16 * 1rem), var(--lvl-5-nav), calc(var(--lvl-5-max) / 16 * 1rem));

    /* Level 4 (XXL) */
    --lvl-4-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 4));
    --lvl-4-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 4));
    --lvl-4-slope: calc((var(--lvl-4-max) - var(--lvl-4-min)) / (var(--font-width-max) - var(--font-width-min)));
    --lvl-4-nav: calc(((var(--lvl-4-min) / 16) * 1rem) + (var(--lvl-4-slope) * (100vw - (var(--font-width-min) * 1px))));
    --fluid-lvl-4: clamp(calc(var(--lvl-4-min) / 16 * 1rem), var(--lvl-4-nav), calc(var(--lvl-4-max) / 16 * 1rem));

    /* Level 3 (XL) */
    --lvl-3-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 3));
    --lvl-3-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 3));
    --lvl-3-slope: calc((var(--lvl-3-max) - var(--lvl-3-min)) / (var(--font-width-max) - var(--font-width-min)));
    --lvl-3-nav: calc(((var(--lvl-3-min) / 16) * 1rem) + (var(--lvl-3-slope) * (100vw - (var(--font-width-min) * 1px))));
    --fluid-lvl-3: clamp(calc(var(--lvl-3-min) / 16 * 1rem), var(--lvl-3-nav), calc(var(--lvl-3-max) / 16 * 1rem));

    /* Level 2 (LG) */
    --lvl-2-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 2));
    --lvl-2-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 2));
    --lvl-2-slope: calc((var(--lvl-2-max) - var(--lvl-2-min)) / (var(--font-width-max) - var(--font-width-min)));
    --lvl-2-nav: calc(((var(--lvl-2-min) / 16) * 1rem) + (var(--lvl-2-slope) * (100vw - (var(--font-width-min) * 1px))));
    --fluid-lvl-2: clamp(calc(var(--lvl-2-min) / 16 * 1rem), var(--lvl-2-nav), calc(var(--lvl-2-max) / 16 * 1rem));

    /* Level 1 (MD) - NEU HINZUGEFÜGT FÜR LÜCKENLOSE SKALA */
    --lvl-1-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 1));
    --lvl-1-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 1));
    --lvl-1-slope: calc((var(--lvl-1-max) - var(--lvl-1-min)) / (var(--font-width-max) - var(--font-width-min)));
    --lvl-1-nav: calc(((var(--lvl-1-min) / 16) * 1rem) + (var(--lvl-1-slope) * (100vw - (var(--font-width-min) * 1px))));
    --fluid-lvl-1: clamp(calc(var(--lvl-1-min) / 16 * 1rem), var(--lvl-1-nav), calc(var(--lvl-1-max) / 16 * 1rem));

    /* Level 0 (BASE) */
    --lvl-0-min: var(--font-size-min);
    --lvl-0-max: var(--font-size-max);
    --lvl-0-slope: calc((var(--lvl-0-max) - var(--lvl-0-min)) / (var(--font-width-max) - var(--font-width-min)));
    --lvl-0-nav: calc(((var(--lvl-0-min) / 16) * 1rem) + (var(--lvl-0-slope) * (100vw - (var(--font-width-min) * 1px))));
    --fluid-lvl-0: clamp(calc(var(--lvl-0-min) / 16 * 1rem), var(--lvl-0-nav), calc(var(--lvl-0-max) / 16 * 1rem));

    /* Level -1 (SM / BUTTON) */
    --lvl-n1-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), -1));
    --lvl-n1-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), -1));
    --lvl-n1-slope: calc((var(--lvl-n1-max) - var(--lvl-n1-min)) / (var(--font-width-max) - var(--font-width-min)));
    --lvl-n1-nav: calc(((var(--lvl-n1-min) / 16) * 1rem) + (var(--lvl-n1-slope) * (100vw - (var(--font-width-min) * 1px))));
    --fluid-lvl-n1: clamp(calc(var(--lvl-n1-min) / 16 * 1rem), var(--lvl-n1-nav), calc(var(--lvl-n1-max) / 16 * 1rem));

    /* --- 5. DEINE NEUEN SEMANTISCHEN VARIABLEN (EASY TO USE) --- */
    --fs-xxxl: var(--fluid-lvl-5);
    --fs-xxl:  var(--fluid-lvl-4);
    --fs-xl:   var(--fluid-lvl-3);
    --fs-lg:   var(--fluid-lvl-2);
    --fs-md:   var(--fluid-lvl-1);
    --fs-base: var(--fluid-lvl-0);
    --fs-sm:   var(--fluid-lvl-n1);
}

/* SICHERHEITS-REGEL: Erzwingt die Font global */
body {
    font-family: 'overpass-custom', sans-serif !important;
}

/* =========================================
   6. UTILITY KLASSEN (DER EINFACHSTE WEG)
   Trage diese Klassen einfach in Elementor unter "Erweitert -> CSS-Klassen" ein!
   ========================================= */
/* =========================================
   6. UTILITY KLASSEN (ULTRA EASY MODE)
   Trage diese Klassen einfach in Elementor unter "Erweitert -> CSS-Klassen" ein!
   Beispiel: xxl
   ========================================= */

.xxxl {
    font-size: var(--fs-xxxl) !important;
    letter-spacing: var(--spacing-headline) !important;
    line-height: 0.95 !important;
}

.xxl {
    font-size: var(--fs-xxl) !important;
    letter-spacing: var(--spacing-headline) !important;
    line-height: 1.0 !important;
}

.xl {
    font-size: var(--fs-xl) !important;
    letter-spacing: var(--spacing-headline) !important;
    line-height: 1.1 !important;
}

.lg {
    font-size: var(--fs-lg) !important;
    letter-spacing: var(--spacing-headline) !important;
    line-height: 1.2 !important;
}

.md {
    font-size: var(--fs-md) !important;
    letter-spacing: var(--spacing-headline) !important;
    line-height: 1.3 !important;
}

.sm {
    font-size: var(--fs-sm) !important;
    letter-spacing: var(--spacing-small) !important;
    line-height: 1.0 !important;
}

.base {
    font-size: var(--fs-base) !important;
    letter-spacing: var(--spacing-body) !important;
    line-height: 1.4 !important;
}

.base-long {
    font-size: var(--fs-base) !important;
    letter-spacing: var(--spacing-body) !important;
    line-height: 1.6 !important; 
}

.base-list {
    font-size: var(--fs-base) !important;
    letter-spacing: var(--spacing-body) !important;
    line-height: 1.5 !important;
}

.button {
    font-size: var(--fs-sm) !important; 
    letter-spacing: var(--spacing-button) !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Overpass-Custom';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('http://yu-villa-samui.com/wp-content/uploads/Overpass-custom-Extralight.woff2') format('woff2');
}
@font-face {
	font-family: 'Overpass-Custom';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('http://yu-villa-samui.com/wp-content/uploads/Overpass-custom-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Overpass-Custom';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('http://yu-villa-samui.com/wp-content/uploads/Overpass-custom-Thin.woff2') format('woff2');
}
@font-face {
	font-family: 'Overpass-Custom';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('http://yu-villa-samui.com/wp-content/uploads/Overpass-custom-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Overpass-Custom';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('http://yu-villa-samui.com/wp-content/uploads/Overpass-custom-Semibold.woff2') format('woff2');
}
@font-face {
	font-family: 'Overpass-Custom';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('http://yu-villa-samui.com/wp-content/uploads/Overpass-custom-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Overpass-Custom';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('http://yu-villa-samui.com/wp-content/uploads/Overpass-custom-Extrabold.woff2') format('woff2');
}
@font-face {
	font-family: 'Overpass-Custom';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('http://yu-villa-samui.com/wp-content/uploads/Overpass-custom-Heavy.woff2') format('woff2');
}
/* End Custom Fonts CSS */