/* Import Google Fonts for fallback */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Font fallback overrides for missing local fonts */
@font-face {
    font-family: "icomoon";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Use Unicode symbols as fallback instead of missing font files */
    src: local("Arial Unicode MS"), local("Segoe UI Symbol"), local("Apple Color Emoji");
}

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    /* Fallback to system fonts */
    src: local("Roboto Light"), local("Roboto-Light"), local("system-ui"), local("-apple-system");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: local("Roboto"), local("Roboto-Regular"), local("system-ui"), local("-apple-system");
}

@font-face {
    font-family: "Roboto";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: local("Roboto Medium"), local("Roboto-Medium"), local("system-ui"), local("-apple-system");
}

@font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: local("Roboto Bold"), local("Roboto-Bold"), local("system-ui"), local("-apple-system");
}

/* COMPREHENSIVE ICON FIXES - Override all icomoon icons with Font Awesome and Unicode fallbacks */

/* Primary Icon Font Fallback */
.icon:before,
[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", system-ui, sans-serif !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* DIRECT FONT AWESOME CLASSES SUPPORT */
/* Ensure direct Font Awesome classes work properly */
.fa:before,
[class^="fa-"]:before,
[class*=" fa-"]:before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* Specific Font Awesome direct class mappings */
.fa-calendar:before {
    content: "\f073" !important;
}

.fa-phone:before {
    content: "\f095" !important;
}

.fa-envelope:before {
    content: "\f0e0" !important;
}

.fa-angle-up:before {
    content: "\f106" !important;
}

.fa-times:before {
    content: "\f00d" !important;
}

.fa-plus:before {
    content: "\f067" !important;
}

.fa-minus:before {
    content: "\f068" !important;
}

.fa-chevron-right:before {
    content: "\f054" !important;
}

.fa-map-marker-alt:before,
.fa-location:before {
    content: "\f3c5" !important;
}

.fa-tooth:before {
    content: "\f5c7" !important;
}

.fa-smile:before {
    content: "\f118" !important;
}

.fa-heart:before {
    content: "\f004" !important;
}
/* Home/Address Icon */
.fa-home:before {
    content: "\f015" !important; /* Font Awesome home */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Specific Icon Mappings with Font Awesome and Unicode Fallbacks */

/* Appointment/Calendar Icon */
.icon-termin:before {
    content: "\f073" !important; /* Font Awesome calendar */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Phone Icon */
.icon-phone:before,
.fixed-contacts > li.phone:before {
    content: "\f095" !important; /* Font Awesome phone */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Mail/Email Icon */
.icon-mail:before,
.fixed-contacts > li.email:before {
    content: "\f0e0" !important; /* Font Awesome envelope */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Up Arrow/Back to Top Icon */
.icon-angle-up:before {
    content: "\f106" !important; /* Font Awesome angle-up */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Times/Close Icon */
.icon-times:before {
    content: "\f00d" !important; /* Font Awesome times */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Plus Icon */
.icon-plus:before {
    content: "\f067" !important; /* Font Awesome plus */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Minus Icon */
.icon-minus:before {
    content: "\f068" !important; /* Font Awesome minus */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Right Arrow Icon */
.icon-angle-right:before {
    content: "\f105" !important; /* Font Awesome angle-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Exclamation Icon */
.icon-exclamation:before {
    content: "\f12a" !important; /* Font Awesome exclamation */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Service-specific Icons with appropriate Font Awesome mappings */

/* Dental Implants */
.icon-implantate:before {
    content: "\f5c7" !important; /* Font Awesome tooth */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Dental Treatment */
.icon-kariesbehandlung:before {
    content: "\f5c7" !important; /* Font Awesome tooth */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Laser Treatment */
.icon-laserbehandlung:before {
    content: "\f2dc" !important; /* Font Awesome snowflake (laser-like) */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Dental Aesthetics */
.icon-zahnaesthetik:before {
    content: "\f118" !important; /* Font Awesome smile */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Orthodontics/Aligner Therapy */
.icon-alignertherapie:before {
    content: "\f5c7" !important; /* Font Awesome tooth */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Anxiety Patients */
.icon-angstpatienten:before {
    content: "\f004" !important; /* Font Awesome heart */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Periodontics */
.icon-paradontologie:before {
    content: "\f5c7" !important; /* Font Awesome tooth */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Address/Location Icon */
.icon-erreichbarkeit:before,
.fixed-contacts > li.address:before {
    content: "\f3c5" !important; /* Font Awesome map-marker-alt */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Chevron Icon */
.icon-chevron:before {
    content: "\f054" !important; /* Font Awesome chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Fallback for any remaining icons - use Unicode symbols */
.icon:before {
    font-size: inherit !important;
    vertical-align: baseline !important;
}

/* Ensure proper styling for list icons */
ul.styled-list li:before,
main ul:not(.unstyled-list) li:before,
ol.styled-list li:before,
main ol:not(.unstyled-list) li:before {
    content: "\f138" !important; /* Font Awesome list item */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-right: 0.5em;
}

/* Font Fixes and Improvements */
* {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Force Font Awesome to load properly */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/* Navigation Transparent Header with Scroll Effect */
#navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1001 !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    padding: 1rem 0 !important;
}

#navigation.scroll {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem 0 !important;
}

#navigation nav .row {
    padding: 0 2rem !important;
}

/* Navigation link colors for transparent state */
#navigation nav ul.navi li a,
#navigation nav ul.navi li span {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* Navigation link colors for scrolled state */
#navigation.scroll nav ul.navi li a,
#navigation.scroll nav ul.navi li span {
    color: #333 !important;
    text-shadow: none !important;
}

/* Logo/branding adjustments */
#navigation .branding img {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)) !important;
    transition: all 0.3s ease !important;
}

#navigation.scroll .branding img {
    filter: none !important;
}

/* Button styling for transparent header */
#navigation .btn {
    background: rgba(209, 193, 173, 0.9) !important;
    color: white !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

#navigation.scroll .btn {
    background: #d1c1ad !important;
    border: 1px solid #d1c1ad !important;
    backdrop-filter: none !important;
}

#navigation .btn:hover {
    background: rgba(209, 193, 173, 1) !important;
    transform: translateY(-2px) !important;
}

/* Ensure the first section (header) has enough padding to account for fixed navbar */
#header {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 0 !important;
}

.hero-background, #heroVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
}

/* Remove the background overlay and improve styling for the claim section */
.claim {
    position: absolute;
    z-index: 10;
    text-align: center;
    color: white;
    padding: 0;
    background: none;
    border-radius: 0;
    max-width: none;
    margin: 0;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.claim blockquote {
    font-family: 'Whisper', 'Dancing Script', cursive;
    font-size: clamp(3.11111rem, 10vw, 4.66667rem);
    font-weight: 500;
    line-height: 1em;
    color: #fff;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    margin: 0 0 2rem 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.claim span {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
    letter-spacing: 1px;
    display: block;
    margin-top: 1.2rem;
    opacity: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.btns {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 0 18px;
}

.btns .btn, .btns span.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    background: rgba(209, 193, 173, 0.9);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btns .btn:hover, .btns span.btn:hover {
    background: rgba(209, 193, 173, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.btns span a {
    color: #fff;
    text-decoration: none;
    font-family: inherit;
}

/* Ensure proper icon sizing */
.btns .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    font-size: 1rem;
    margin-right: 0.5rem;
}

@media (max-width: 29.9375em) {
    .btns .icon {
        font-size: 0.77778rem;
    }
    
    .claim blockquote {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
    }
    
    .claim span {
        font-size: 1.2rem;
    }
    
    .btns {
        flex-direction: column;
        align-items: center;
    }
    
    .btns .btn, .btns span.btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (min-width: 75em) {
    .btns .termin-btn {
        display: none;
    }
}

.kassen-row {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.kassen {
    background: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kassen blockquote {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* Icon fixes */
.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

/* Service cards */
.usp {
    display: block;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    height: 100%;
}

.usp:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.usp img {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.usp blockquote {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.usp p {
    color: #666;
    line-height: 1.6;
}

/* Testimonials */
.rating {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .claim blockquote {
        font-size: 2rem;
    }
    
    .claim span {
        font-size: 1.2rem;
    }
    
    .btns {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

.btn {
    font-size: 0.9rem;
    padding: 10px 20px;
}

/* Font Awesome icons for fixed contacts - Simple inline style */
.fixed-contacts li .fas {
    margin-right: 8px;
    font-size: 16px;
    color: #d1c1ad;
}

.fixed-contacts li.phone .fas {
    color: #333;
}

.fixed-contacts li.email .fas {
    color: #333;
}

.fixed-contacts li.address .fas {
    color: #333;
}

/* Remove override of existing :before pseudo-elements */