/**
 * EVD Füchse Theme - Elementor Custom CSS
 * Diese Datei enthält angepasste Stile für Elementor-Elemente.
 */

/* ==== Bildgrößen: 512w/1024w nicht überdehnen (Editor + Frontend) ==== */
/* WordPress vergibt Klassen wie .size-evd_content_512w. Verhindere Upscaling in Elementor-Containern. */
.elementor 
    img.size-evd_content_512w,
.elementor 
    .wp-caption img.size-evd_content_512w {
    max-width: 512px !important;
    width: 100% !important; /* füllt Container, aber nicht über 512px */
    height: auto !important;
}

.elementor 
    img.size-evd_content_1024w,
.elementor 
    .wp-caption img.size-evd_content_1024w {
    max-width: 1024px !important;
    width: 100% !important; /* füllt Container, aber nicht über 1024px */
    height: auto !important;
}

/* Nur im Editor: erzwinge, dass Bild-Widgets nicht größer zeichnen als die Bildgröße */
body.elementor-editor-active .elementor-widget-image img.size-evd_content_512w { max-width: 512px !important; }
body.elementor-editor-active .elementor-widget-image img.size-evd_content_1024w { max-width: 1024px !important; }

/* ===== ALLGEMEINE LINK-STYLES ===== */
/* Globale Link-Styles für alle Elementor-Texte - BUTTONS & PAGINATION AUSGESCHLOSSEN */
.elementor-widget-text-editor a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a),
.elementor-widget-heading a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a),
.elementor-text-editor a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a),
.elementor-heading-title a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a),
.elementor-widget-container p a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a),
.elementor-widget-container span a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a),
.elementor-widget-container div a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a) {
    color: var(--fuechse-rot);
    text-decoration: none;
    transition: all 0.3s ease;
}

.elementor-widget-text-editor a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a):hover,
.elementor-widget-heading a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a):hover,
.elementor-text-editor a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a):hover,
.elementor-heading-title a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a):hover,
.elementor-widget-container p a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a):hover,
.elementor-widget-container span a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a):hover,
.elementor-widget-container div a:not(.elementor-button):not([class*="evd-button"]):not([class*="btn"]):not(.evd-blog-pagination):not(.blog-card-link):not(.read-more):not(.evd-button-wrapper a):hover {
    color: var(--fuechse-rot);
    text-decoration: underline;
}

/* WICHTIG: Button & Pagination Ausschlüsse
 * Die obigen Selektoren schließen folgende Elemente aus:
 * - .elementor-button (Standard Elementor Buttons)
 * - [class*="evd-button"] (Alle EVD Custom Buttons)
 * - [class*="btn"] (Bootstrap & andere Button-Klassen)
 * - .evd-blog-pagination (Blog Pagination Links)
 * - .blog-card-link (Blog-Karten Links ohne Underline beim Hover)
 * - .read-more (WEITERLESEN Links ohne Underline beim Hover)
 * - .evd-button-wrapper a (EVD Button Wrapper Links)
 * 
 * Dadurch wird sichergestellt, dass nur reiner Text-Content 
 * die Füchse-Rot Link-Standardisierung erhält.
 */

/* ===== FARBEN ===== */
:root {
    /* Primärfarben */
    --fuechse-rot: #DF0914;
    --fuechse-grau-dunkel: #1D1E1C;
    --fuechse-grau: #333333;
    --fuechse-grau-hell: #444444;
    
    /* Akzentfarben */
    --sprade-blau: #0088ce;
    
    /* Funktionsfarben */
    --text-weiss: #ffffff;
    --text-grau: #cccccc;
    --text-grau-hell: #888888;
    
    /* UI-Farben */
    --bg-dunkel: #2b2b2b;
    --bg-transparent-dunkel: rgba(29, 30, 28, 0.2);
    --bg-transparent-rot: rgba(223, 9, 20, 0.2);
    --bg-transparent-blau: rgba(0, 136, 206, 0.2);
    --border-transparent: rgba(255, 255, 255, 0.1);
    
    /* Überschriftengrößen */
    --h1-size: 2.8rem;
    --h2-size: 2.4rem;
    --h3-size: 2rem;
    --h4-size: 1.8rem;
    --h5-size: 1.5rem;
    --h6-size: 1.2rem;
}

/* ===== ALLGEMEINE ELEMENTOR-CONTAINER ===== */
/* Standard Container - jetzt standardmäßig Full Width */
.elementor-container {
    max-width: 1400px; /* Geändert von 1200px auf 1400px für Full Width Standard */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Boxed Container - 1200px Breite */
.elementor-section[data-settings*="boxed"] .elementor-container {
    max-width: 1200px !important; /* Boxed Container */
}

/* Full Width Container - 1400px Breite */
.elementor-section[data-settings*="full_width"] .elementor-container {
    max-width: 1400px !important; /* Full Width - gleich wie Footer */
}

/* Alternative Selector für neuere Elementor-Versionen */
/* Neue Elementor Container (e-con) direkt ansprechen */
.e-con-full,
.elementor-section.elementor-section-full_width {
    max-width: 1400px !important;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.e-con-boxed,
.elementor-section.elementor-section-boxed {
    max-width: 1200px !important;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Fallback für ältere Container mit .elementor-container */
.e-con-full .elementor-container,
.elementor-section.elementor-section-full_width .elementor-container {
    max-width: 1400px !important;
}

.e-con-boxed .elementor-container,
.elementor-section.elementor-section-boxed .elementor-container {
    max-width: 1200px !important;
}

.elementor-column {
    padding: 10px;
}

.elementor-section {
    position: relative;
}

/* ===== RESPONSIVE CONTAINER-VERHALTEN ===== */
/* Stelle sicher, dass Container auf kleineren Bildschirmen richtig wrappen */
@media (max-width: 1024px) {
    .elementor-container {
        max-width: 95%;
        padding: 0 15px;
    }
    
    /* Elementor Flex Container - erlaubt Wrapping auf Tablets */
    .e-con.e-flex {
        flex-wrap: wrap !important;
    }
    
    /* Elementor Spalten - stellen auf Tablet um */
    .elementor-col-50,
    .elementor-col-33,
    .elementor-col-25 {
        width: 50% !important;
    }
}

@media (max-width: 767px) {
    .elementor-container {
        max-width: 100%;
        padding: 0 10px;
    }
    
    /* Auf Mobile - alle Spalten werden 100% breit */
    .elementor-column,
    .elementor-col-50,
    .elementor-col-33,
    .elementor-col-25,
    .elementor-col-20,
    .elementor-col-16 {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Flex Container - definitiv wrapping auf mobil */
    .e-con.e-flex {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    
    .e-con.e-flex > .e-con-inner > .e-con {
        margin-bottom: 15px;
    }
}

/* Spieler-Grid-Korrekturen */
.evd-spieler-gruppe-grid {
    display: grid !important;
    grid-gap: 20px !important;
    width: 100% !important;
    position: relative !important;
    z-index: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

.evd-spieler-item {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Ansprechpartner & Spieler-Widget Container ohne Padding */
.elementor-widget-evd_spieler_einzeln .elementor-widget-container,
.elementor-widget-evd_ansprechperson .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

.evd-spieler-bild, 
.evd-spieler-name, 
.evd-spieler-position,
.evd-spieler-trikotnummer,
.evd-spieler-email {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== ÜBERSCHRIFTEN ===== */
.elementor-widget-heading h1.elementor-heading-title {
    font-size: 3.2rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;
}

.elementor-widget-heading h2.elementor-heading-title {
    font-size: 2.6rem;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 18px;
}

.elementor-widget-heading h3.elementor-heading-title {
    font-size: 2.2rem;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 16px;
}

.elementor-widget-heading h4.elementor-heading-title {
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 14px;
}

.elementor-widget-heading h5.elementor-heading-title {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 12px;
}

.elementor-widget-heading h6.elementor-heading-title {
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Outline-Überschrift */
.headline--outlined {
    position: relative !important;
    display: inline-block !important;
    margin-bottom: 30px !important;
    font-family: 'Redzone BlackReg', sans-serif !important;
    line-height: 1.2 !important;
    z-index: 1 !important;
}

/* Großbuchstaben Option */
.headline--uppercase .headline__front,
.headline--uppercase .headline__outline,
.headline--uppercase .headline__outline-black {
    text-transform: uppercase !important;
}

.headline__front,
.headline__outline,
.headline__outline-black {
    display: block !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

.headline__front {
    position: relative !important;
    z-index: 3 !important;
}

/* Standardmäßig graue Schrift */
.headline__front {
    color: var(--text-grau) !important;
}

/* Für rote Schrift */
.headline--red .headline__front {
    color: var(--fuechse-rot) !important;
}

.headline__outline {
    font-style: normal !important;
    color: transparent !important;
    -webkit-text-stroke-width: 1px !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    position: absolute !important;
    top: -5px !important;
    left: -5px !important;
    z-index: 1 !important;
    padding-right: 10px !important;
    width: 100% !important;
    opacity: 0.8 !important;
}

.headline__outline {
    -webkit-text-stroke-color: var(--fuechse-rot) !important;
}

/* Für weiße Outline */
.headline--red .headline__outline {
    -webkit-text-stroke-color: var(--text-grau) !important;
}

.headline__outline-black {
    font-style: normal !important;
    color: transparent !important;
    -webkit-text-stroke-width: 1px !important;
    -webkit-text-stroke-color: var(--fuechse-grau-dunkel) !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    position: absolute !important;
    bottom: -5px !important;
    right: -5px !important;
    z-index: 2 !important;
    padding-left: 10px !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    .headline--outlined {
        margin-bottom: 25px !important;
    }
    
    .headline__outline {
        top: -3px !important;
        left: -3px !important;
        -webkit-text-stroke-width: 1px !important;
    }
    
    .headline__outline-black {
        bottom: -3px !important;
        right: -3px !important;
        -webkit-text-stroke-width: 1px !important;
    }
}

/* Outline-Überschrift mit korrekten Größen basierend auf den Variablen */
h1.headline--outlined .headline__front,
h1.headline--outlined .headline__outline,
h1.headline--outlined .headline__outline-black {
    font-size: var(--h1-size) !important;
}

h2.headline--outlined .headline__front,
h2.headline--outlined .headline__outline,
h2.headline--outlined .headline__outline-black {
    font-size: var(--h2-size) !important;
}

h3.headline--outlined .headline__front,
h3.headline--outlined .headline__outline,
h3.headline--outlined .headline__outline-black {
    font-size: var(--h3-size) !important;
}

h4.headline--outlined .headline__front,
h4.headline--outlined .headline__outline,
h4.headline--outlined .headline__outline-black {
    font-size: var(--h4-size) !important;
}

h5.headline--outlined .headline__front,
h5.headline--outlined .headline__outline,
h5.headline--outlined .headline__outline-black {
    font-size: var(--h5-size) !important;
}

h6.headline--outlined .headline__front,
h6.headline--outlined .headline__outline,
h6.headline--outlined .headline__outline-black {
    font-size: var(--h6-size) !important;
}

/* Eltern-Kind-Container-Beziehungen korrigieren */
.e-parent > .e-con-inner > .e-child {
    position: relative !important;
    z-index: auto !important;
    overflow: visible !important;
}

/* ===== BUTTONS ===== */
.elementor-button {
    background-color: var(--bg-transparent-rot) !important;
    color: var(--text-weiss) !important;
    border: 2px solid var(--fuechse-rot) !important;
    text-decoration: none !important;
    padding: 15px 25px !important;
    border-radius: 4px !important;
    font-family: 'Redzone BlackReg', sans-serif !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: initial !important;
    flex-shrink: 0 !important;
    height: 55px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 160px !important;
    margin: 0 10px 0 0 !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    font-weight: normal !important;
}

.elementor-button:hover {
    background-color: var(--fuechse-rot) !important;
    color: var(--text-weiss) !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.elementor-button.elementor-size-xs {
    padding: 10px 15px !important;
    font-size: 14px !important;
    height: 42px !important;
    min-width: 120px !important;
}

.elementor-button.elementor-size-sm {
    padding: 12px 20px !important;
    font-size: 15px !important;
    height: 48px !important;
    min-width: 140px !important;
}

.elementor-button.elementor-size-md {
    padding: 15px 25px !important;
    font-size: 17px !important;
    height: 55px !important;
    min-width: 160px !important;
}

.elementor-button.elementor-size-lg {
    padding: 18px 30px !important;
    font-size: 19px !important;
    height: 62px !important;
    min-width: 180px !important;
}

.elementor-button.elementor-size-xl {
    padding: 22px 35px !important;
    font-size: 21px !important;
    height: 70px !important;
    min-width: 200px !important;
}

/* EVD Button Styling */
.evd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    transition: all 0.3s ease;
    line-height: 1;
    cursor: pointer;
    text-transform: uppercase;
    background-color: rgba(223, 9, 20, 0.2);
    color: white;
    border: 2px solid #DF0914;
}

/* Größen */
.evd-button-klein {
    padding: 10px 20px;
    font-size: 15px;
}

.evd-button-normal {
    padding: 15px 30px;
    font-size: 1.1rem;
}

.evd-button-gross {
    padding: 20px 40px;
    font-size: 19px;
}

/* Stile */
.evd-button-primary {
    background-color: rgba(223, 9, 20, 0.2);
    color: #ffffff;
    border: 2px solid #e30613;
}

.evd-button-primary:hover {
    background-color: #e30613;
    transform: translateY(-2px);
    color: #ffffff;
}

.evd-button-secondary {
    background-color: rgba(0, 59, 122, 0.2);
    color: #ffffff;
    border: 2px solid #003b7a;
}

.evd-button-secondary:hover {
    background-color: #003b7a;
    transform: translateY(-2px);
    color: #ffffff;
}

.evd-button-outline {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #e30613;
}

.evd-button-outline:hover {
    background-color: #e30613;
    transform: translateY(-2px);
    color: #ffffff;
}

/* ===== ICONS ===== */
.elementor-icon {
    color: var(--fuechse-rot);
    transition: all 0.3s ease;
}

.elementor-icon:hover {
    color: var(--fuechse-grau-dunkel);
    transform: translateY(-3px);
}

.elementor-icon-box-title {
    color: var(--fuechse-grau-dunkel);
    font-weight: 600;
    margin-bottom: 10px;
}

.elementor-icon-box-description {
    color: var(--fuechse-grau);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== FORMULARE ===== */
.elementor-form-fields-wrapper {
    margin-bottom: 20px;
}

.elementor-field {
    padding: 12px 15px;
    border: 1px solid var(--text-grau-hell);
    border-radius: 4px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.elementor-field:focus {
    border-color: var(--fuechse-rot);
    box-shadow: 0 0 0 2px var(--bg-transparent-rot);
}

.elementor-field-label {
    color: var(--fuechse-grau-dunkel);
    font-weight: 500;
    margin-bottom: 8px;
}

/* ===== TESTIMONIALS ===== */
.elementor-testimonial-wrapper {
    background-color: var(--text-weiss);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.elementor-testimonial-content {
    color: var(--fuechse-grau);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.elementor-testimonial-name {
    color: var(--fuechse-grau-dunkel);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.elementor-testimonial-job {
    color: var(--fuechse-rot);
    font-size: 0.9rem;
}

/* ===== TABS & AKKORDEON ===== */
.elementor-tabs-wrapper {
    display: flex;
    border-bottom: 1px solid var(--text-grau-hell);
    margin-bottom: 20px;
}

.elementor-tab-title {
    padding: 15px 25px;
    color: var(--fuechse-grau);
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.elementor-tab-title.elementor-active {
    color: var(--fuechse-rot);
    border-bottom: 3px solid var(--fuechse-rot);
}

.elementor-tab-content {
    padding: 20px 0;
    color: var(--fuechse-grau);
    line-height: 1.6;
}

/* Neuer Akkordeon-Stil basierend auf dem Beispiel */
.e-n-accordion {
    width: 100% !important;
    margin-bottom: 20px !important;
}

.e-n-accordion-item {
    margin-bottom: 20px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--text-weiss) !important;
}

.e-n-accordion-item-title {
    padding: 15px 20px !important;
    background-color: var(--fuechse-rot) !important;
    color: var(--text-weiss) !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    list-style: none !important;
    border: none !important;
    outline: none !important;
}

.e-n-accordion-item-title::-webkit-details-marker {
    display: none !important;
}

.e-n-accordion-item-title:hover {
    background-color: var(--fuechse-grau-dunkel) !important;
}

.e-n-accordion-item[open] .e-n-accordion-item-title {
    background-color: var(--fuechse-grau-dunkel) !important;
    color: var(--text-weiss) !important;
    border: none !important;
}

.e-n-accordion-item-title-header {
    flex-grow: 1 !important;
}

.e-n-accordion-item-title-text {
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: var(--text-weiss) !important;
}

.e-n-accordion-item-title-icon {
    display: inline-flex;
    margin-left: 10px;
}

.e-n-accordion-item .e-closed {
    display: flex;
}

.e-n-accordion-item .e-opened {
    display: none;
}

.e-n-accordion-item[open] .e-closed {
    display: none;
}

.e-n-accordion-item[open] .e-opened {
    display: flex;
}

/* Icons immer weiß machen */
.e-n-accordion-item .e-n-accordion-item-title-icon svg,
.e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
.e-n-accordion-item .e-font-icon-svg path,
.e-n-accordion-item[open] .e-font-icon-svg path {
    fill: var(--text-weiss) !important;
}

.e-font-icon-svg {
    height: 1em;
    width: 1em;
    vertical-align: middle;
}

.e-n-accordion-item > div[role="region"] {
    padding: 20px !important;
    background-color: var(--fuechse-rot) !important;
    color: var(--text-weiss) !important;
    line-height: 1.6 !important;
    border: none !important;
}

.e-n-accordion-item > div[role="region"] p {
    color: var(--text-weiss) !important;
}

/* Alte Akkordeon-Stile als Fallback behalten */
.elementor-accordion .elementor-accordion-item {
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.elementor-accordion-title {
    padding: 15px 20px !important;
    color: var(--text-weiss) !important;
    font-weight: 500 !important;
    background-color: var(--fuechse-rot) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.elementor-active .elementor-accordion-title {
    background-color: var(--fuechse-grau-dunkel) !important;
    color: var(--text-weiss) !important;
    border: none !important;
}

.elementor-accordion-content {
    padding: 20px !important;
    line-height: 1.6 !important;
    background-color: var(--fuechse-rot) !important;
    color: var(--text-weiss) !important;
    border: none !important;
}

/* ===== TEAM MEMBER ===== */
.elementor-widget-team-member .elementor-team-member-image {
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
}

.elementor-widget-team-member .elementor-team-member-name {
    color: var(--fuechse-grau-dunkel);
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.elementor-widget-team-member .elementor-team-member-position {
    color: var(--fuechse-rot);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.elementor-widget-team-member .elementor-team-member-bio {
    color: var(--fuechse-grau);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* ===== COUNTER ===== */
.elementor-counter .elementor-counter-number-wrapper {
    color: var(--fuechse-rot);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.elementor-counter .elementor-counter-title {
    color: var(--fuechse-grau-dunkel);
    font-size: 1.1rem;
    font-weight: 500;
}

/* ===== PREISLISTEN ===== */
.elementor-price-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.elementor-price-table:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.elementor-price-table__header {
    background-color: var(--fuechse-grau-dunkel);
    padding: 25px 20px;
}

.elementor-price-table__heading {
    color: var(--text-weiss);
    font-size: 1.5rem;
    font-weight: 600;
}

.elementor-price-table__subheading {
    color: var(--text-grau);
    font-size: 0.9rem;
}

.elementor-price-table__price {
    background-color: var(--text-weiss);
    padding: 20px;
    text-align: center;
    font-size: 3rem;
    color: var(--fuechse-rot);
    font-weight: 700;
}

.elementor-price-table__period {
    font-size: 0.9rem;
    color: var(--fuechse-grau);
}

.elementor-price-table__features-list {
    padding: 20px;
    background-color: var(--text-weiss);
}

.elementor-price-table__feature-inner {
    padding: 10px 0;
    border-bottom: 1px solid var(--text-grau-hell);
}

.elementor-price-table__button {
    background-color: var(--fuechse-rot);
    color: var(--text-weiss);
    padding: 12px 25px;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.elementor-price-table__button:hover {
    background-color: var(--fuechse-grau-dunkel);
}

/* ===== PROGRESS BAR ===== */
.elementor-progress-wrapper {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--text-grau-hell);
}

.elementor-progress-bar {
    background-color: var(--fuechse-rot);
    height: 100%;
}

.elementor-progress-text {
    color: var(--fuechse-grau-dunkel);
    font-weight: 600;
    margin-bottom: 8px;
}

.elementor-progress-percentage {
    text-align: right;
    color: var(--fuechse-rot);
    font-weight: 600;
}

/* ===== SOCIAL ICONS ===== */
.elementor-social-icons-wrapper {
    display: flex;
    gap: 10px;
}

.elementor-icon.elementor-social-icon {
    background-color: var(--fuechse-grau-dunkel);
    color: var(--text-weiss);
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.elementor-icon.elementor-social-icon:hover {
    background-color: var(--fuechse-rot);
    transform: translateY(-3px);
}

/* Blog Widget Elementor-spezifische Stile */
.elementor-widget-evd_blog .blog-section {
    padding: 40px 0;
    width: 100% !important;
}

.elementor-widget-evd_blog .section-title {
    margin-top: 0;
}

/* Normal contained layout (default blog-grid) */
.elementor-widget-evd_blog .blog-grid {
    display: grid;
    gap: 30px;
}

/* Fullwidth Blog Grid Layout */
.elementor-widget-evd_blog .blog-grid-fullwidth {
    display: grid;
    gap: 30px;
    box-sizing: border-box;
}

/* Default: Use Boxed layout width (1200px) for fullwidth */
.elementor-widget-evd_blog .blog-grid-fullwidth {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Full Width Layout: Use larger width (1400px) when page has full_width setting */
.evd-content-layout-full_width .elementor-widget-evd_blog .blog-grid-fullwidth {
    max-width: 1400px;
    padding: 0;
}

/* Boxed Layout: Explicitly set to smaller width */
.evd-content-layout-boxed .elementor-widget-evd_blog .blog-grid-fullwidth {
    max-width: 1200px;
    padding: 0;
}

/* Blog Card Link Styles */
.elementor-widget-evd_blog .blog-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.3s ease;
}

.elementor-widget-evd_blog .blog-card-link:hover {
    color: inherit;
    text-decoration: none;
}

.elementor-widget-evd_blog .blog-card:hover {
    transform: translateY(-5px);
}

.elementor-widget-evd_blog .blog-card-link:hover .blog-image img {
    transform: scale(1.05);
}

/* Blog Bild volle Breite mit Abrundung */
.elementor-widget-evd_blog .blog-image {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    position: relative;
    height: 200px;
}

.elementor-widget-evd_blog .blog-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
}

.elementor-widget-evd_blog .blog-card-link:hover .blog-content h3 {
    color: var(--fuechse-rot);
    transition: color 0.3s ease;
}

/* Blog Actions Container */
.elementor-widget-evd_blog .blog-actions {
    padding: 0 25px 25px 25px;
}

.elementor-widget-evd_blog .blog-actions .read-more {
    color: var(--fuechse-rot);
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
    text-decoration: none;
}

.elementor-widget-evd_blog .blog-actions .read-more:hover {
    gap: 12px;
    color: var(--fuechse-rot);
    text-decoration: none !important;
}

/* Update blog content padding since read-more is now separate */
.elementor-widget-evd_blog .blog-content {
    padding: 25px 25px 20px 25px;
}

.elementor-widget-evd_blog .blog-content p {
    margin-bottom: 0;
}

/* Weißer Platzhalter für fehlende Bilder */
.elementor-widget-evd_blog .blog-image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: block;
    min-height: 200px;
}

/* Responsive Stile überschreiben für Elementor */
@media (max-width: 1200px) {
    .elementor-widget-evd_blog .blog-grid,
    .elementor-widget-evd_blog .blog-grid-fullwidth {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .elementor-widget-evd_blog .blog-grid-fullwidth {
        padding: 0;
        max-width: 100%;
    }
    
    .evd-content-layout-full_width .elementor-widget-evd_blog .blog-grid-fullwidth,
    .evd-content-layout-boxed .elementor-widget-evd_blog .blog-grid-fullwidth {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .elementor-widget-evd_blog .blog-grid,
    .elementor-widget-evd_blog .blog-grid-fullwidth {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Blog Cards breiter und zentrierter für bessere mobile Darstellung */
    .elementor-widget-evd_blog .blog-card {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* News-Teaser ebenfalls ein Element pro Zeile */
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .news-teaser {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Allgemeine News-Container */
    .news-wrapper__content .news-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Extra kleine Bildschirme (unter 480px) */
@media (max-width: 480px) {
    .elementor-widget-evd_blog .blog-section {
        padding: 20px 0;
    }
    
    .elementor-widget-evd_blog .blog-grid,
    .elementor-widget-evd_blog .blog-grid-fullwidth {
        gap: 15px !important;
    }
}

/* ===== MOBILE RESPONSIVE FIXES FÜR NEWS UND BLOG WIDGETS ===== */

/* Handy-spezifische Styles für bessere Darstellung */
@media (max-width: 768px) {
    /* EVD Blog Widget - Ein Beitrag pro Zeile auf mobil */
    .elementor-widget-evd_blog .blog-grid,
    .elementor-widget-evd_blog .blog-grid-fullwidth {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Blog Cards breiter und zentrierter für bessere mobile Darstellung */
    .elementor-widget-evd_blog .blog-card {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Blog Bild Padding ausgleichen für volle Breite mit Abrundung */
    .elementor-widget-evd_blog .blog-image {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }
    
    /* Reduziertes Padding für mobil - weniger Abstand zwischen Bild und Datum */
    .elementor-widget-evd_blog .blog-content {
        padding: 12px 15px 10px 15px;
        margin-top: -40px;
    }
    
    /* Reduzierter Abstand zwischen Datum und Überschrift */
    .elementor-widget-evd_blog .blog-date {
        margin-bottom: 5px;
    }
    
    /* Kein margin-top auf h3, reduzierter margin-bottom */
    .elementor-widget-evd_blog .blog-content h3 {
        margin-top: 0;
        margin-bottom: 8px;
    }
    
    /* News-Teaser ebenfalls ein Element pro Zeile */
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .news-teaser {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Allgemeine News-Container */
    .news-wrapper__content .news-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Extra kleine Bildschirme (unter 480px) */
@media (max-width: 480px) {
    .elementor-widget-evd_blog .blog-section {
        padding: 20px 0;
    }
    
    .elementor-widget-evd_blog .blog-grid,
    .elementor-widget-evd_blog .blog-grid-fullwidth {
        gap: 15px !important;
    }
}

/* ===== FULL WIDTH CONTAINER UTILITY KLASSE ===== */
/* Klasse: evd-full-width-container
 * Verwendung: Als CSS-Klasse auf einen Elementor Container anwenden
 * Zweck: Container nimmt 100% der Bildschirmbreite ein, ignoriert alle Margin/Padding
 */
.evd-full-width-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    overflow-x: hidden !important;
}

/* Stellt sicher, dass Kind-Container richtig funktionieren */
.evd-full-width-container .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Für neue Elementor Container (e-con) */
.evd-full-width-container.e-con {
    --container-max-width: 100vw !important;
    --container-widget-width: 100% !important;
    --container-widget-flex-grow: 1 !important;
}

.evd-full-width-container .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Verhindert horizontales Scrollen auf der gesamten Seite */
.evd-full-width-container {
    box-sizing: border-box !important;
}

/* Responsive Anpassungen für Full Width Container */
@media (max-width: 1024px) {
    .evd-full-width-container {
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }
}

@media (max-width: 767px) {
    .evd-full-width-container {
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }
}

/* Alternative für Container innerhalb von Sidebars oder anderen begrenzten Bereichen */
.evd-full-width-break-out {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
}

/* ===== INNER CONTAINER UTILITY KLASSEN ===== */
/* Klasse: evd-inner-container-full
 * Verwendung: Als CSS-Klasse auf einen Container INNERHALB von evd-full-width-container
 * Zweck: Gibt dem inneren Container eine maximale Breite von 1400px (Full Width)
 */
.evd-inner-container-full {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Klasse: evd-inner-container-boxed
 * Verwendung: Als CSS-Klasse auf einen Container INNERHALB von evd-full-width-container
 * Zweck: Gibt dem inneren Container eine maximale Breite von 1200px (Boxed)
 */
.evd-inner-container-boxed {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Responsive Anpassungen für Inner Container */
@media (max-width: 1024px) {
    .evd-inner-container-full,
    .evd-inner-container-boxed {
        max-width: 95% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 767px) {
    .evd-inner-container-full,
    .evd-inner-container-boxed {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ===== INNER CONTAINER UTILITY KLASSEN ENDE ===== */

/* Für moderne Elementor Container - CSS Custom Properties überschreiben */
.e-con-full {
    --container-max-width: 1400px !important;
    --container-widget-width: 1400px !important;
}

.e-con-boxed {
    --container-max-width: 1200px !important;
    --container-widget-width: 1200px !important;
}

/* Elementor Container Width Settings für alle Container-Typen */
.elementor-section-full_width .elementor-container {
    max-width: 1400px !important;
    width: 100% !important;
}

.elementor-section-boxed .elementor-container {
    max-width: 1200px !important;
    width: 100% !important;
}

/* Body-Klassen-spezifische Container-Überschreibungen */
/* Full Width Body Layout */
.evd-content-layout-full_width .elementor-container {
    max-width: 1400px !important;
}

.evd-content-layout-full_width .e-con-full,
.evd-content-layout-full_width .elementor-section.elementor-section-full_width {
    max-width: 1400px !important;
}

.evd-content-layout-full_width .e-con-boxed,
.evd-content-layout-full_width .elementor-section.elementor-section-boxed {
    max-width: 1200px !important;
}

/* Boxed Body Layout */
.evd-content-layout-boxed .elementor-container {
    max-width: 1200px !important;
}

.evd-content-layout-boxed .e-con-full,
.evd-content-layout-boxed .elementor-section.elementor-section-full_width {
    max-width: 1400px !important; /* Full Width Container bleiben full auch bei boxed body */
}

.evd-content-layout-boxed .e-con-boxed,
.evd-content-layout-boxed .elementor-section.elementor-section-boxed {
    max-width: 1200px !important;
}

/* DEBUG: Container-Klassen identifizieren (nur für Entwicklung - entfernen vor Production) */
/*
.e-con-full::before {
    content: "FULL WIDTH (1400px)" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: red !important;
    color: white !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    z-index: 9999 !important;
}

.e-con-boxed::before {
    content: "BOXED (1200px)" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: blue !important;
    color: white !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    z-index: 9999 !important;
}
*/

/* ===== FINALE CONTAINER-BREITEN-ÜBERSCHREIBUNG ===== */
/* Diese Regeln haben höchste Priorität und überschreiben alle anderen Einstellungen */

/* ALLE möglichen Full Width Container - 1400px */
.elementor-container,
.e-con-full,
.e-con.e-con--content-full_width,
.elementor-section-full_width .elementor-container,
.elementor-section[data-settings*="full_width"] .elementor-container,
.e-con-full .elementor-container,
body .elementor-container,
body .e-con-full,
html body .elementor-container,
html body .e-con-full {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* ALLE möglichen Boxed Container - 1200px */
.e-con-boxed,
.e-con.e-con--content-boxed,
.elementor-section-boxed .elementor-container,
.elementor-section[data-settings*="boxed"] .elementor-container,
.e-con-boxed .elementor-container,
body .e-con-boxed,
html body .e-con-boxed {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Elementor Standard-Breite überschreiben (1280px -> 1400px) */
.elementor-section > .elementor-container,
.e-con > .e-con-inner,
.elementor-top-section > .elementor-container {
    max-width: 1400px !important;
}

/* Inline-Styles überschreiben */
.elementor-container[style*="max-width"],
.e-con[style*="max-width"] {
    max-width: 1400px !important;
}

/* WordPress Cache-Busting - CSS Version Update */
/* Wichtig: Nach CSS-Änderungen die Version in functions.php aktualisieren:
 * wp_enqueue_style('elemntor-custom', ..., array(), 'VERSION_HIER_ÄNDERN');
 */

/* ===== ELEMENTOR CSS CUSTOM PROPERTIES FORCE-OVERRIDE ===== */
/* Diese Regeln zwingen Elementor, unsere Breiten zu verwenden */

/* Für alle Container-Typen */
.e-con,
.elementor-container,
.elementor-section {
    --container-max-width: 1400px !important;
    --container-widget-width: 1400px !important;
    --e-con-inner-max-width: 1400px !important;
    --e-con-max-width: 1400px !important;
}

/* Boxed Container explizit */
.e-con-boxed,
.elementor-section-boxed {
    --container-max-width: 1200px !important;
    --container-widget-width: 1200px !important;
    --e-con-inner-max-width: 1200px !important;
    --e-con-max-width: 1200px !important;
}

/* Elementor Kit-Überschreibung (falls Theme-Kit verwendet wird) */
:root {
    --e-global-color-primary: var(--fuechse-rot);
    --e-global-typography-primary-font-family: 'Poppins', sans-serif;
    --container-max-width: 1400px !important;
    --e-con-max-width: 1400px !important;
}

/* ===== ELEMENTOR 1280PX ÜBERSCHREIBUNG ===== */
/* Diese Regeln überschreiben speziell die Elementor-Standard-Breite von 1280px */

/* Alle Container die möglicherweise 1280px als Standard haben */
.elementor-container[style*="1280"],
.e-con[style*="1280"],
.elementor-section[style*="1280"],
div[style*="max-width: 1280px"],
div[style*="max-width:1280px"] {
    max-width: 1400px !important;
}

/* Überschreibung für alle Container ohne spezifische Klassen */
.elementor > .elementor-section > .elementor-container,
.elementor .elementor-top-section > .elementor-container,
.elementor .e-con,
.elementor .elementor-container {
    max-width: 1400px !important;
}

/* Sehr spezifische Überschreibung für das Frontend */
body.elementor-default .elementor-container,
body.elementor-page .elementor-container,
body.single .elementor-container,
body.page .elementor-container {
    max-width: 1400px !important;
}

/* Container mit data-elementor-type */
[data-elementor-type="wp-page"] .elementor-container,
[data-elementor-type="single"] .elementor-container,
[data-elementor-type="archive"] .elementor-container {
    max-width: 1400px !important;
}

/* ===== CONTENT-LAYOUT ÜBERSCHREIBUNG ===== */
/* Diese Regeln überschreiben die 95%-Breiten aus content-layout.css für Elementor-Container */

/* Elementor Container sollen immer 100% der max-width nutzen */
.elementor-container,
.e-con-full,
.e-con-boxed,
.elementor-section-full_width .elementor-container,
.elementor-section-boxed .elementor-container {
    width: 100% !important;
}

/* Auch für Body-Klassen-spezifische Container */
.evd-content-layout-full_width .elementor-container,
.evd-content-layout-boxed .elementor-container,
.evd-content-layout-full_width .e-con-full,
.evd-content-layout_full_width .e-con-boxed,
.evd-content-layout-boxed .e-con-full,
.evd-content-layout-boxed .e-con-boxed {
    width: 100% !important;
}