/*
Theme Name: HGD Media GmbH
Theme URI: https://hgd-media.de/
Template: hello-elementor
Author: HGD Media GmbH Team
Author URI: https://hgd-media.de/
Description: HGD Media Theme is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin.The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1753185750
Updated: 2025-07-22 14:02:30

*/

/* =========================================
   DYNAMIC DESIGN SYSTEM
   Responsive Spacing + Fluid Typography
   (Font families and colors controlled by Elementor)
   ========================================= */

:root {
    /* =========================================
       FLUID TYPOGRAPHY SIZES ONLY
       ========================================= */
    
    /* Base Font Size - Scales with viewport */
    font-size: clamp(14px, 1vw + 12px, 18px); /* 14px mobile → 18px desktop */
    
    /* Fluid Font Sizes using REM */
    /* Hero/Display Sizes */
    --font-size-hero: clamp(2.5rem, 8vw, 6rem);        /* 35px → 108px */
    --font-size-display: clamp(2rem, 6vw, 4.5rem);     /* 28px → 81px */
    
    /* Heading Sizes */
    --font-size-h1: clamp(1.75rem, 5vw, 3.5rem);       /* 24.5px → 63px */
    --font-size-h2: clamp(1.5rem, 4vw, 2.75rem);       /* 21px → 49.5px */
    --font-size-h3: clamp(1.25rem, 3vw, 2.25rem);      /* 17.5px → 40.5px */
    --font-size-h4: clamp(1.125rem, 2.5vw, 1.75rem);   /* 15.75px → 31.5px */
    --font-size-h5: clamp(1rem, 2vw, 1.5rem);          /* 14px → 27px */
    --font-size-h6: clamp(0.875rem, 1.5vw, 1.25rem);   /* 12.25px → 22.5px */
    
    /* Body Text Sizes */
    --font-size-xl: clamp(1.125rem, 2vw, 1.5rem);      /* 15.75px → 27px */
    --font-size-lg: clamp(1rem, 1.5vw, 1.25rem);       /* 14px → 22.5px */
    --font-size-base: clamp(0.875rem, 1.2vw, 1.125rem); /* 12.25px → 20.25px */
    --font-size-sm: clamp(0.8125rem, 1vw, 1rem);       /* 11.375px → 18px */
    --font-size-xs: clamp(0.75rem, 0.8vw, 0.875rem);   /* 10.5px → 15.75px */
    
    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-snug: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* =========================================
       RESPONSIVE SPACING VARIABLES
       ========================================= */
    
    /* Side Padding */
    --fluid-side-padding: clamp(1.25rem, 5vw, 5rem); /* 20px → 80px */
    
    /* Section Padding */
    --section-xxl-padding: clamp(3rem, 10vw, 10rem);      /* 48px → 160px */
    --section-xl-padding: clamp(2.5rem, 8vw, 7.5rem);     /* 40px → 120px */
    --section-l-padding: clamp(2rem, 6vw, 6.25rem);       /* 32px → 100px */
    --section-m-padding: clamp(1.5rem, 5vw, 5rem);        /* 24px → 80px */
    --section-s-padding: clamp(1.25rem, 4vw, 3.75rem);    /* 20px → 60px */
    --section-xs-padding: clamp(1rem, 3vw, 2.5rem);       /* 16px → 40px */
    --section-xxs-padding: clamp(0.75rem, 2vw, 1.5rem);   /* 12px → 24px */
    --section-header-padding: clamp(0.75rem, 2vw, 1.25rem); /* 12px → 20px */
    
    /* Hero Section Height */
    --section-hero-height: clamp(500px, 90vh, 100vh);
    
    /* Offset Padding */
    --section-offset-header: 93px;
    
    /* Container Widths */
    --section-narrow: min(62.5rem, 90vw);
    --section-narrow-xs: min(45rem, 90vw);
    
    /* Border Radius */
    --round-xs: 4px;
    --round-s: 8px;
    --round-m: 12px;
    --round-l: 20px;
    --round-full: 9999px;
}

/* =========================================
   TYPOGRAPHY SIZING ONLY
   ========================================= */

/* Headings with Dynamic Sizing */
h1, .h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    font-weight: var(--font-weight-bold);
    margin-bottom: clamp(1rem, 3vw, 2rem);
}

h2, .h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    font-weight: var(--font-weight-bold);
    margin-bottom: clamp(0.875rem, 2.5vw, 1.75rem);
}

h3, .h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-snug);
    font-weight: var(--font-weight-semibold);
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

h4, .h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-snug);
    font-weight: var(--font-weight-semibold);
    margin-bottom: clamp(0.625rem, 1.5vw, 1.25rem);
}

h5, .h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-medium);
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

h6, .h6 {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-medium);
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

/* Hero/Display Text */
.hero-title {
    font-size: var(--font-size-hero);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    font-weight: var(--font-weight-extrabold);
}

.display-title {
    font-size: var(--font-size-display);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    font-weight: var(--font-weight-bold);
}

/* Body Text Variations */
p, .body-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

.text-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
}

.text-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

.text-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

/* Font Weight Utilities */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }

/* =========================================
   ELEMENTOR TYPOGRAPHY OVERRIDES
   ========================================= */

/* Allow our dynamic sizing to work with Elementor */
.elementor-widget-heading .elementor-heading-title {
    line-height: inherit !important;
}

/* Dynamic heading sizes in Elementor */
.elementor-widget-heading h1.elementor-heading-title {
    font-size: var(--font-size-h1) !important;
    line-height: var(--line-height-tight) !important;
}

.elementor-widget-heading h2.elementor-heading-title {
    font-size: var(--font-size-h2) !important;
    line-height: var(--line-height-tight) !important;
}

.elementor-widget-heading h3.elementor-heading-title {
    font-size: var(--font-size-h3) !important;
    line-height: var(--line-height-snug) !important;
}

.elementor-widget-heading h4.elementor-heading-title {
    font-size: var(--font-size-h4) !important;
    line-height: var(--line-height-snug) !important;
}

.elementor-widget-heading h5.elementor-heading-title {
    font-size: var(--font-size-h5) !important;
    line-height: var(--line-height-normal) !important;
}

.elementor-widget-heading h6.elementor-heading-title {
    font-size: var(--font-size-h6) !important;
    line-height: var(--line-height-normal) !important;
}


/* =========================================
   LINK STYLES - Add this section
   ========================================= */

/* Base link styles */
a {
    font-size: inherit; /* Inherits from parent (body text, headings, etc.) */
    line-height: inherit;
    font-weight: inherit;
    text-decoration: underline;
    transition: all 0.3s ease;
}

/* Link inside paragraphs */
p a, .body-text a {
    font-size: var(--font-size-base);
}

/* Link size variations */
.text-xl a {
    font-size: var(--font-size-xl);
}

.text-lg a {
    font-size: var(--font-size-lg);
}

.text-sm a {
    font-size: var(--font-size-sm);
}

/* Links in headings */
h1 a, .h1 a {
    font-size: var(--font-size-h1);
    text-decoration: none; /* Usually no underline in heading links */
}

h2 a, .h2 a {
    font-size: var(--font-size-h2);
    text-decoration: none;
}

h3 a, .h3 a {
    font-size: var(--font-size-h3);
    text-decoration: none;
}

/* Utility classes for links */
.link-underline {
    text-decoration: underline !important;
}

.link-no-underline {
    text-decoration: none !important;
}

/* Button-style links (optional) */
a.button, a.btn {
    display: inline-block;
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    padding: clamp(0.5rem, 2vw, 1rem) clamp(1rem, 4vw, 2rem);
    border-radius: var(--round-m);
    transition: all 0.3s ease;
}

/* =========================================
   BUTTON STYLES - Add this section
   ========================================= */

/* Base button styles */
button,
.button,
.btn,
input[type="submit"],
input[type="button"],
.elementor-button {
    /* Typography */
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-normal);
    text-decoration: none;
    
    /* Spacing - Responsive padding */
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.5rem);
    
    /* Layout */
    display: inline-block;
    text-align: center;
    cursor: pointer;
    
    /* Border */
    border: 2px solid transparent;
    
    /* Transition */
    transition: all 0.3s ease;
}

/* Button Size Variants */
.btn-xs {
    font-size: var(--font-size-xs);
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
}

.btn-sm {
    font-size: var(--font-size-sm);
    padding: clamp(0.625rem, 1.75vw, 0.875rem) clamp(1.25rem, 3.5vw, 2rem);
}

.btn-lg {
    font-size: var(--font-size-lg);
    padding: clamp(0.875rem, 2.25vw, 1.25rem) clamp(1.75rem, 4.5vw, 3rem);
}

.btn-xl {
    font-size: var(--font-size-xl);
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(2rem, 5vw, 3.5rem);
}

/* Button Width Variants */
.btn-full {
    width: 100%;
}

.btn-wide {
    min-width: clamp(200px, 30vw, 300px);
}

/* Icon Buttons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 0.75rem);
}

/* Elementor Button Overrides */
.elementor-button {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.5rem) !important;
}

.elementor-button-text {
    font-size: inherit !important;
}

/* Small Elementor Button */
.elementor-size-sm .elementor-button {
    font-size: var(--font-size-sm) !important;
    padding: clamp(0.625rem, 1.75vw, 0.875rem) clamp(1.25rem, 3.5vw, 2rem) !important;
}

/* Large Elementor Button */
.elementor-size-lg .elementor-button {
    font-size: var(--font-size-lg) !important;
    padding: clamp(0.875rem, 2.25vw, 1.25rem) clamp(1.75rem, 4.5vw, 3rem) !important;
}

/* Ensure button text doesn't break */
button span,
.button span,
.elementor-button-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile adjustments for buttons */
@media (max-width: 480px) {
    /* Stack buttons on mobile if needed */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .btn-group > * {
        width: 100%;
    }
}


ul, ol {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
    padding-left: clamp(1.5rem, 3vw, 2rem);
}

li {
    margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
}


table {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

th {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

td, th {
    padding: clamp(0.5rem, 1vw, 0.75rem);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
}

label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
    display: inline-block;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

pre {
    line-height: var(--line-height-normal);
    padding: clamp(0.75rem, 2vw, 1.5rem);
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
    overflow-x: auto;
}

.wp-caption-text,
.elementor-image-caption {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    margin-top: clamp(0.25rem, 1vw, 0.5rem);
}

.elementor-icon-box-title {
    font-size: var(--font-size-h4) !important;
    margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

.elementor-icon-box-description {
    font-size: var(--font-size-base) !important;
}

/* =========================================
   SECTION SPACING CLASSES
   ========================================= */

.section-xxl {
    padding-top: var(--section-xxl-padding);
    padding-bottom: var(--section-xxl-padding);
    padding-left: var(--fluid-side-padding) !important;
    padding-right: var(--fluid-side-padding) !important;
}

.section-xl {
    padding-top: var(--section-xl-padding);
    padding-bottom: var(--section-xl-padding);
    padding-left: var(--fluid-side-padding) !important;
    padding-right: var(--fluid-side-padding) !important;
}

.section-l {
    padding-top: var(--section-l-padding);
    padding-bottom: var(--section-l-padding);
    padding-left: var(--fluid-side-padding) !important;
    padding-right: var(--fluid-side-padding) !important;
}

.section-m {
    padding-top: var(--section-m-padding);
    padding-bottom: var(--section-m-padding);
    padding-left: var(--fluid-side-padding) !important;
    padding-right: var(--fluid-side-padding) !important;
}

.section-s {
    padding-top: var(--section-s-padding);
    padding-bottom: var(--section-s-padding);
    padding-left: var(--fluid-side-padding) !important;
    padding-right: var(--fluid-side-padding) !important;
}

.section-xs {
    padding-top: var(--section-xs-padding);
    padding-bottom: var(--section-xs-padding);
    padding-left: var(--fluid-side-padding) !important;
    padding-right: var(--fluid-side-padding) !important;
}

.section-xxs {
    padding-top: var(--section-xxs-padding);
    padding-bottom: var(--section-xxs-padding);
    padding-left: var(--fluid-side-padding) !important;
    padding-right: var(--fluid-side-padding) !important;
}

.section-header {
    padding-top: var(--section-header-padding);
    padding-bottom: var(--section-header-padding);
    padding-left: var(--fluid-side-padding) !important;
    padding-right: var(--fluid-side-padding) !important;
}

/* Hero Section */
.section-hero {
    min-height: var(--section-hero-height) !important;
}

.section-hero .e-con-inner {
    justify-content: center !important;
}

/* Full Width Section */
.section-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.section-full div {
    max-width: 100% !important;
}

/* Narrow Sections */
.section-narrow .e-con-inner {
    max-width: var(--section-narrow) !important;
    margin-left: auto;
    margin-right: auto;
}

.section-narrow-xs .e-con-inner {
    max-width: var(--section-narrow-xs) !important;
    margin-left: auto;
    margin-right: auto;
}

/* Offset for Fixed Headers */
.section-offset {
    padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding));
}

/* Border Radius */
.round-xs { border-radius: var(--round-xs) !important; }
.round-s { border-radius: var(--round-s) !important; }
.round-m { border-radius: var(--round-m) !important; }
.round-l { border-radius: var(--round-l) !important; }
.round-full { border-radius: var(--round-full) !important; }

/* =========================================
   MOBILE ADJUSTMENTS
   ========================================= */

@media (max-width: 480px) {
    :root {
        /* Even smaller side padding on very small screens */
        --fluid-side-padding: clamp(1rem, 4vw, 2rem);
    }
}

/* =========================================
   SMOOTH TRANSITIONS
   ========================================= */

/* Smooth font size transitions on resize */
* {
    transition: font-size 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

/* =========================================
   UTILITY CLASSES
   ========================================= */

/* Spacing utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Prevent text overflow */
h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Keep the desktop header stable while Montserrat and submenu arrows initialize. */
@media (min-width: 1025px) {
    .elementor-element-5ba79a7 .elementor-nav-menu--main .menu-item-169 > .elementor-item {
        min-width: 82.7891px;
    }

    .elementor-element-5ba79a7 .elementor-nav-menu--main .menu-item-170 > .elementor-item {
        min-width: 107.7422px;
    }

    .elementor-element-5ba79a7 .elementor-nav-menu--main .menu-item-171 > .elementor-item {
        min-width: 153.2422px;
    }

    .elementor-element-5ba79a7 .elementor-nav-menu--main .menu-item-175 > .elementor-item {
        min-width: 157.9844px;
    }

    .elementor-element-5ba79a7 .elementor-nav-menu--main .menu-item-178 > .elementor-item {
        min-width: 96.9531px;
    }

    .elementor-element-5ba79a7 .elementor-nav-menu--main .menu-item-179 > .elementor-item {
        min-width: 97.4922px;
    }
}