/*
 Theme Name:     tg Grafikdesign TA Theme
 Theme URI:      https://graf-der-grafiker.de
 Description:    Individuelles Premium-Webdesign-System für die Tierarztpraxis Dr. Anna Mustermann. Entwickelt für höchste Performance, emotionale Benutzerführung und volle DSGVO-Konformität.
 Author:         tg GrafikDESIGN Andernach
 Author URI:     https://graf-der-grafiker.de
 Template:       Divi
 Version:        1.0.0
*/

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/outfit-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/outfit-bold.woff2') format('woff2');
  font-display: swap;
}

/* ==================================================== */
/* 🌿 EMOTIONAL DESIGN PIVOT: WÄRME & VERTRAUEN       */
/* ==================================================== */

/* 1. Globale Hintergrundfarbe (Warmes Sand/Off-White statt kaltem Weiß) */
body, #page-container, .et_pb_section {
    background-color: #FCF9F5 !important;
}

/* Einzelne Sektionen (z.B. Testimonials) haben oft eigene Hintergründe, die lassen wir weicher wirken */
.et_pb_section.et_pb_bg_layout_dark {
    background-color: #264653 !important;
}

/* 2. Typografie: Strenge Schriften überschreiben & DSGVO sichern */
h1, h2, h3, h4, h5, h6, .et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4, .et_pb_text h5, .et_pb_text h6 {
    font-family: 'Outfit', sans-serif !important;
    color: #264653 !important; /* Wärmeres, dunkles Blau-Grün */
}

body, p, .et_pb_text, .et_pb_blurb_content, .et_pb_button, li, input, textarea {
    font-family: 'Roboto', sans-serif !important;
}
/* Exclude Divi & WordPress icons from global Roboto font-family override */
span:not(.et-pb-icon):not(.et_pb_icon):not(.dashicons):not(.ab-icon),
a:not(.et-pb-icon):not(.et_pb_icon):not(.dashicons):not(.ab-icon) {
    font-family: 'Roboto', sans-serif !important;
}
/* Bulletproof restore of Divi & WordPress Icon Fonts */
.et-pb-icon, .et_pb_icon {
    font-family: 'ETmodules' !important;
}
.dashicons, .ab-icon, #wpadminbar .ab-icon::before, #wpadminbar .ab-item::before {
    font-family: 'dashicons' !important;
}
/* Fließtext-Farbe wärmer machen */
p, .et_pb_text {
    color: #4A5568 !important; 
}

/* 3. Organische Formen: Weiche Ecken für alles */
.et_pb_image, 
.et_pb_image img, 
.et_pb_blurb, 
.et_pb_button {
    border-radius: 20px !important;
}

/* 4. Farb-Overhauls für Buttons und Info-Boxen */
.et_pb_button {
    background-color: #E9C46A !important; /* Warmes Gold */
    color: #264653 !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0px 8px 20px rgba(233, 196, 106, 0.4) !important;
    transition: all 0.3s ease !important;
}
.et_pb_button:hover {
    background-color: #F4A261 !important; /* Sanftes Orange bei Hover */
    color: #ffffff !important;
    box-shadow: 0px 12px 25px rgba(244, 162, 97, 0.5) !important;
    transform: translateY(-3px) !important;
}

/* Spezifische Überschreibungen für die Info-Boxen (Blurbs) */
.et_pb_blurb {
    background-color: #FFFFFF !important;
    box-shadow: 0px 15px 35px rgba(38, 70, 83, 0.06) !important;
    border: 1px solid rgba(233, 196, 106, 0.15) !important;
    transition: all 0.4s ease !important;
    padding: 30px !important;
}
.et_pb_blurb:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 25px 45px rgba(38, 70, 83, 0.12) !important;
    border-color: #E9C46A !important;
}

/* 5. Header / Split-Section weicher machen */
/* Damit der erste Eindruck warm ist */
.et_pb_section:first-of-type {
    border-bottom-left-radius: 80px !important;
    border-bottom-right-radius: 80px !important;
    overflow: hidden !important;
    box-shadow: 0px 20px 50px rgba(38, 70, 83, 0.08) !important;
    margin-bottom: 40px !important;
}

/* Headline im Hero-Bereich spezifisch anpassen */
.et_pb_section:first-of-type h1 {
    font-size: 48px !important; /* Nicht mehr die riesigen 80px */
    line-height: 1.2em !important;
    color: #264653 !important;
    text-shadow: 0px 4px 15px rgba(255,255,255,0.5) !important;
}


/* ====================================================
   PHASE 2: ORGANIC VECTORS & CLARITY (Golden Icons)
   ==================================================== */

/* Organic SVG Wave under Hero */
.wp-block-divi-section:first-of-type {
    position: relative;
}
.wp-block-divi-section:first-of-type::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V0C50.62,23.63,101.23,47.25,151.85,70.88,206.26,96.34,265.41,101.44,321.39,56.44Z" fill="%23FAFAFA"></path></svg>');
    background-size: cover;
    background-position: center bottom;
    z-index: 10;
    pointer-events: none;
}

/* Make Service Blurb Icons Gold */
.et_pb_blurb .et-pb-icon {
    color: var(--primary-color) !important;
}



/* Notfall Page & Notdienst Card Styles */
.notdienst-card {
    text-align: center;
    padding: 30px;
}
.notdienst-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6B8E7C;
    margin-bottom: 10px;
}
.notdienst-name {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}
.notdienst-phone {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #D62828;
    text-decoration: none;
    padding: 15px 30px;
    background: #fff0f0;
    border: 2px solid #D62828;
    border-radius: 50px;
    margin: 0 auto 15px auto;
    max-width: 350px;
    transition: all 0.3s ease;
}
.notdienst-phone:hover {
    background: #D62828;
    color: #fff;
}
.notdienst-address {
    display: block;
    font-size: 16px;
    color: #6B8E7C;
    text-decoration: none;
    margin-top: 10px;
}
.notdienst-address:hover {
    color: #CBA36A;
    text-decoration: underline;
}

/* Mobile Sticky Emergency Bar */
@media (max-width: 980px) {
    .mobile-notfall-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        display: flex;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    }
    .mobile-notfall-bar a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 10px;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        text-align: center;
    }
    .mobile-notfall-bar .bar-notfall {
        background: #D62828;
        color: #fff;
    }
    .mobile-notfall-bar .bar-termin {
        background: #CBA36A;
        color: #fff;
    }
    /* Add padding to body so content doesn't hide behind bar */
    body {
        padding-bottom: 56px;
    }
}

/* ==================================================== */
/* 🌿 HOMEPAGE HERO: CLEAN MODERN SINGLE IMAGE LAYOUT   */
/* ==================================================== */

/* Hide all the messy overlapping/extra images in the hero */
.home .et_pb_image:has(img[src*="premium_empathy"]),
.home .et_pb_image:has(img[src*="logo_pet_food"]),
.home .et_pb_image:has(img[src*="premium_medtech"]) {
    display: none !important;
}

/* Optimize the main hero image to look stunning and fill the column */
.home .et_pb_image:has(img[src*="premium_hero"]) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.home .et_pb_image:has(img[src*="premium_hero"]) img {
    width: 100% !important;
    border-radius: 30px !important; /* Premium soft corners */
    box-shadow: 0 20px 45px rgba(38, 70, 83, 0.1) !important; /* Premium soft shadow */
    border: 1px solid rgba(203, 163, 106, 0.15) !important; /* Soft golden border */
}

/* ==================================================== */
/* 🌿 CUSTOM PREMIUM MINIMALIST FOOTER - STYLING        */
/* ==================================================== */

/* Disable default Divi footer completely */
#main-footer {
    display: none !important;
}

#custom-site-footer {
    background-color: #13262f !important; /* Deep Premium Slate Blue (Cohesive with heading #264653) */
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: "Roboto", sans-serif !important;
    border-top: 1px solid rgba(203, 163, 106, 0.2);
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 99;
}

/* Highly specific anchor styling to override general theme styles */
#custom-site-footer a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-family: "Roboto", sans-serif !important;
}

#custom-site-footer a:hover {
    color: #CBA36A !important; /* Warm Gold hover */
}

/* 1. TOP CTA SECTION */
.footer-cta-section {
    padding: 95px 30px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-cta-container {
    max-width: 800px;
    margin: 0 auto;
}

#custom-site-footer .footer-cta-subtitle {
    font-family: "Outfit", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: #CBA36A !important; /* Elegant Gold Subtitle */
    margin: 0 0 15px 0 !important;
    line-height: 1.4 !important;
}

#custom-site-footer .footer-cta-title {
    font-family: "Outfit", sans-serif !important;
    font-size: 42px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 35px 0 !important;
    letter-spacing: -0.5px !important;
}

.footer-cta-button-wrap {
    display: flex;
    justify-content: center;
}

/* Pill Button Text color fix via ultra-specific selector */
#custom-site-footer a.footer-cta-btn {
    display: inline-block !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #13262f !important; /* Matches footer background */
    background-color: #ffffff !important; /* Solid White Pill */
    padding: 16px 45px !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #ffffff !important;
}

#custom-site-footer a.footer-cta-btn:hover {
    background-color: #CBA36A !important; /* Gold on hover */
    border-color: #CBA36A !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(203, 163, 106, 0.35) !important;
}

/* 2. MIDDLE LINK SECTION */
.footer-middle-section {
    padding: 85px 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-middle-container {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
    gap: 60px;
}

#custom-site-footer .footer-col h4 {
    font-family: "Outfit", sans-serif !important;
    font-size: 15px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 0 0 25px 0 !important;
}

/* Phone link specificity fix */
#custom-site-footer a.footer-huge-phone {
    display: block !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #CBA36A !important; /* Golden Phone */
    line-height: 1.15 !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.5px !important;
}

#custom-site-footer a.footer-huge-phone:hover {
    color: #ffffff !important;
}

.footer-email-link {
    font-size: 15px !important;
    margin: 0 0 15px 0 !important;
}

#custom-site-footer .footer-email-link a {
    color: rgba(255, 255, 255, 0.75) !important;
}

#custom-site-footer .footer-email-link a:hover {
    color: #CBA36A !important;
}

.footer-address {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin: 0 0 25px 0 !important;
}

/* Dynamic Social Media Bar - Full Option Styling */
.footer-social-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
}

#custom-site-footer a.social-icon-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#custom-site-footer a.social-icon-link:hover {
    background-color: rgba(203, 163, 106, 0.12) !important;
    border-color: #CBA36A !important;
    color: #CBA36A !important;
    transform: translateY(-2px) !important;
}

.footer-social-svg {
    display: block;
    stroke-width: 2px;
}

/* Bulletless links list */
.footer-clean-links {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column !important;
    gap: 12px !important;
}

#custom-site-footer .footer-clean-links a {
    color: rgba(255, 255, 255, 0.65) !important;
    display: inline-block !important;
    font-size: 15px !important;
}

#custom-site-footer .footer-clean-links a:hover {
    color: #CBA36A !important;
    transform: translateX(4px) !important;
}

/* Opening hours column */
.hours-list li {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.hours-list li strong {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.hours-list .time-highlight {
    color: rgba(255, 255, 255, 0.6) !important;
    display: inline-block;
    margin-top: 2px;
}

/* Emergency highlighting - clean and highly elegant */
#custom-site-footer .hours-list li.emergency-text {
    margin-top: 10px !important;
}

#custom-site-footer .hours-list li.emergency-text a {
    color: #CBA36A !important; /* Premium sand gold */
    font-family: "Outfit", sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#custom-site-footer .hours-list li.emergency-text a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* 3. BOTTOM BAR */
.footer-bottom-bar {
    background-color: #0c181e !important; /* Deepest grounding slate */
    padding: 25px 30px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-bottom-bar .copyright {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    margin: 0 !important;
}

/* Responsive Scaling */
@media (max-width: 980px) {
    #custom-site-footer .footer-cta-title {
        font-size: 32px !important;
    }
    .footer-middle-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-middle-section {
        padding: 50px 20px;
    }
    .footer-cta-section {
        padding: 60px 20px;
    }
}

/* ==================================================== */
/* 🌿 CUSTOM HEADER MENU & SEARCH ADJUSTMENTS          */
/* ==================================================== */

/* Hide search icon completely */
#et_search_icon,
.et_search_outer,
#et-search-icon,
.et-search-outer,
.et_search_form_container {
    display: none !important;
}

/* Active & Hover menu items styling - from blue to premium gold/teal */
#top-menu li.current-menu-item a,
#top-menu li.current_page_item a,
.et_pb_menu li.current-menu-item a,
.et_pb_menu li.current_page_item a {
    color: #CBA36A !important; /* Elegant Warm Gold for active page */
    font-weight: 700 !important;
}

#top-menu li a:hover,
.et_pb_menu li a:hover {
    color: #CBA36A !important; /* Elegant Warm Gold on hover */
}

/* ==================================================== */
/* 🌿 PREMIUM MICRO-ANIMATIONS KIT (ELEGANT & FLUID)   */
/* ==================================================== */

/* 1. Page Load Entrance (Fade In & Slide Up) */
@keyframes premiumFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero text fade-in transitions */
.home .et_pb_section:first-of-type h1,
.home .et_pb_section:first-of-type p,
.home .et_pb_section:first-of-type .et_pb_button_wrap,
.page-id-96 .et_pb_section:first-of-type h1,
.page-id-96 .et_pb_section:first-of-type p,
.page-id-105 .ueber-uns-hero h1,
.page-id-105 .ueber-uns-hero p,
.page-id-78 .notfall-hero h1,
.page-id-78 .notfall-hero p {
    animation: premiumFadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home .et_pb_section:first-of-type p,
.page-id-96 .et_pb_section:first-of-type p,
.page-id-105 .ueber-uns-hero p,
.page-id-78 .notfall-hero p {
    animation-delay: 0.15s;
}

.home .et_pb_section:first-of-type .et_pb_button_wrap {
    animation-delay: 0.3s;
}

/* 2. Tactile Hover Effects for Cards & Blurbs */
.et_pb_blurb {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.et_pb_blurb:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 22px 45px rgba(38, 70, 83, 0.08) !important;
    border-color: rgba(203, 163, 106, 0.35) !important;
}

/* Make Blurb Icons rotate and scale gold on hover */
.et_pb_blurb .et-pb-icon {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.et_pb_blurb:hover .et-pb-icon {
    transform: scale(1.12) rotate(2deg) !important;
}

/* 3. Team Card Hover & Photo Zoom (/ueber-uns/) */
.team-card {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.team-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px rgba(38, 70, 83, 0.1) !important;
    border-color: rgba(203, 163, 106, 0.4) !important;
}

.team-avatar-wrap {
    transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.team-avatar-wrap img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.team-card:hover .team-avatar-wrap img {
    transform: scale(1.06) !important;
}

.team-card:hover .team-avatar-wrap {
    border-color: #CBA36A !important;
    box-shadow: 0 0 20px rgba(203, 163, 106, 0.3) !important;
}

/* 4. Notfall Cards Tactile Feel (/notfall/) */
.erste-hilfe-card, .notfall-card-main {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.erste-hilfe-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(38, 70, 83, 0.08) !important;
    border-color: rgba(203, 163, 106, 0.3) !important;
}

/* 5. Smooth Transition for Header Buttons */
#top-menu li.notfall-button a,
#top-menu li.termin-button a {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.3s ease, 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#top-menu li.notfall-button a:hover,
#top-menu li.termin-button a:hover {
    transform: translateY(-2px) !important;
}

/* ==================================================== */
/* 🌿 CUSTOM HEADER LOGO SIZE & VERTICAL ALIGNMENT      */
/* ==================================================== */

/* Override default Divi header limits to make the cropped logo stand out and be clearly visible */
#main-header #logo, 
.et_pb_menu .et_pb_menu__logo img,
#logo {
    max-height: 75px !important; /* Elegant and highly readable size */
    height: auto !important;
    width: auto !important;
    max-width: 240px !important;
    margin-top: -8px !important; /* Perfect vertical centering alignment */
    margin-bottom: -8px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Adjust top header container spacing so the logo has breathing room without breaking layout */
#logo_container {
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
}

/* Adjust fixed/scrolled header logo sizing so it shrinks beautifully on scroll */
.et-fixed-header #logo {
    max-height: 55px !important;
    margin-top: -3px !important;
    margin-bottom: -3px !important;
}