/* ============================================================
   07-ELEMENTOR.CSS
   Elementor-spezifische Overrides
   ------------------------------------------------------------
   Headings = Source Serif 4, UI/Text = Inter.
   Button-Standard = gefülltes Teal-Pill.
   Gescoped via body.ewly.
   ============================================================ */


/* 1. CONTAINER & SECTIONS */
/* Container zentrieren */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Standard-Schrift */
.elementor-widget-container {
    font-family: 'Inter', Arial, sans-serif;
}



/* 2. HEADINGS IM HEADING-WIDGET — Serif */
.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title .elementor-size-default,
.elementor-34 .elementor-element.elementor-element-3cf9999 .elementor-heading-title

{
    font-family: var(--cd-font-heading);
    font-weight: var(--cd-fw-semibold);
    line-height: var(--cd-lh-tight);
    color: var(--cd-color-text);
	font-family: 'Inter', Arial, sans-serif ;
    font-size: 36px;
    text-transform: none;
}


.elementor-kit-12 h2,
.elementor-kit-12 h3,
.elementor-kit-12 h4{
	font-family: 'Inter', Arial, sans-serif ;
    font-size: 25px;
}



.elementor-heading-title .cd-dot,
.elementor-heading-title .cd-highlight {
    color: var(--cd-color-primary);
}




/* 3. TEXT-EDITOR-WIDGET — Inter */
.elementor-widget-text-editor {
    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-medium);
    color: var(--cd-color-text);
    line-height: var(--cd-lh-relaxed);
}

.elementor-34 .elementor-element.elementor-element-3e7f81e .elementor-post__excerpt p {
		font-family: 'Inter', Arial, sans-serif ;
}


/* 4. BILDER */
.elementor-widget-image.cd-img-rounded img {
    border-radius: var(--cd-radius-md);
}


/* 5. ICON-WIDGETS */
.elementor-widget-icon .elementor-icon,
.elementor-widget-icon-box .elementor-icon {
    color: var(--cd-color-text);
    transition: color var(--cd-transition-base);
}

.elementor-widget-icon:hover .elementor-icon,
.elementor-widget-icon-box:hover .elementor-icon {
    color: var(--cd-color-primary);
}


/* 6. ICON-BOX-WIDGET */
.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: var(--cd-font-heading);
    font-weight: var(--cd-fw-semibold);
    color: var(--cd-color-text);
}

.elementor-widget-icon-box .elementor-icon-box-description {
    font-family: var(--cd-font-body);
    color: var(--cd-color-text-muted);
    line-height: var(--cd-lh-normal);
}


/* 7. ELEMENTOR FORMS */
body.ewly .elementor-form .elementor-field-group {
    margin-bottom: var(--cd-space-md);
}

body.ewly .elementor-form .elementor-field {
    border-radius: var(--cd-radius-md);
}

.elementor-form .elementor-field-label {
    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-semibold);
    font-size: var(--cd-fs-small);
    color: var(--cd-color-text);
    margin-bottom: var(--cd-space-2xs);
}

.elementor-form .elementor-button {
    border-radius: var(--cd-radius-pill);
}

.elementor-message.elementor-message-success {
    color: #2E7D52;
    font-size: var(--cd-fs-small);
}

.elementor-message.elementor-message-danger {
    color: #DC3545;
    font-size: var(--cd-fs-small);
}


/* ============================================================
   BUTTON-WIDGET (Adapter zu Core-Buttons)
   ============================================================
   Standard = gefülltes Teal-Pill.
   ============================================================ */

body.ewly .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-xs);
    padding: 0.85em 1.75em;
    border-radius: var(--cd-radius-pill);
    border: 2px solid var(--cd-color-primary);
    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-semibold);
    font-size: var(--cd-fs-body);
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    background-color: var(--cd-color-primary);
    color: var(--cd-color-text-on-primary);
    cursor: pointer;
    transition:
        background-color var(--cd-transition-base),
        border-color var(--cd-transition-base),
        color var(--cd-transition-base),
        transform var(--cd-transition-fast);
}

body.ewly .elementor-button:hover {
    background-color: var(--cd-color-primary-soft);
    border-color: var(--cd-color-primary-soft);
    color: var(--cd-color-text-on-primary);
}

body.ewly .elementor-button:focus-visible {
    outline: 3px solid var(--cd-color-accent);
    outline-offset: 3px;
}

body.ewly .elementor-button:active {
    transform: translateY(1px);
}

/* — Varianten — */

body.ewly .elementor-button.cd-btn--outline {
    background-color: transparent;
    border-color: var(--cd-color-primary);
    color: var(--cd-color-primary);
}

body.ewly .elementor-button.cd-btn--outline:hover {
    background-color: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
    color: var(--cd-color-text-on-primary);
}

body.ewly .elementor-button.cd-btn--secondary {
    background-color: var(--cd-color-accent);
    border-color: var(--cd-color-accent);
    color: var(--cd-color-text);
}

body.ewly .elementor-button.cd-btn--secondary:hover {
    background-color: var(--cd-color-accent-soft);
    border-color: var(--cd-color-accent-soft);
    color: var(--cd-color-text);
}

body.ewly .elementor-button.cd-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--cd-color-primary);
    padding-inline: 0;
}

body.ewly .elementor-button.cd-btn--ghost:hover {
    color: var(--cd-color-primary-soft);
}

body.ewly .elementor-button.cd-btn--on-dark {
    background-color: var(--cd-color-bg);
    border-color: var(--cd-color-bg);
    color: var(--cd-color-primary);
}

body.ewly .elementor-button.cd-btn--on-dark:hover {
    background-color: transparent;
    color: var(--cd-color-bg);
}


/* ============================================================
   ICON-LIST-WIDGET
   ============================================================ */

body.ewly .elementor-widget-icon-list .elementor-icon-list-item {
    margin-bottom: var(--cd-space-xs);
    transition: transform var(--cd-transition-base);
}

body.ewly .elementor-widget-icon-list .elementor-icon-list-item:hover {
    transform: translateX(4px);
}

body.ewly .elementor-widget-icon-list .elementor-icon-list-icon i,
body.ewly .elementor-widget-icon-list .elementor-icon-list-icon svg {
    color: var(--cd-color-primary);
    transition: color var(--cd-transition-base);
}

body.ewly .elementor-widget-icon-list .elementor-icon-list-text {
    color: var(--cd-color-text);
    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-medium);
    transition: color var(--cd-transition-base);
}

body.ewly .elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: var(--cd-color-primary);
}


/* 9. DIVIDER-WIDGET */
body.ewly .elementor-widget.elementor-widget-divider {
    --divider-color: var(--cd-color-accent);
    --divider-border-style: solid;
    --divider-border-width: 1.5px;
}

body.ewly .elementor-widget.elementor-widget-divider .elementor-divider-separator {
    border-top-color: var(--divider-color);
}


/* 10. PROGRESS-BAR-WIDGET */
.elementor-widget-progress .elementor-progress-bar {
    background-color: var(--cd-color-primary);
}


/* ============================================================
   AKKORDEON / TOGGLE
   ============================================================ */

body.ewly .elementor-accordion .elementor-accordion-item {
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius-md);
    margin-bottom: var(--cd-space-xs);
    overflow: hidden;
    background-color: var(--cd-color-bg);
}

body.ewly .elementor-accordion .elementor-tab-title,
body.ewly .elementor-toggle .elementor-toggle-title {
    background-color: var(--cd-color-bg);
    color: var(--cd-color-text);
    font-family: var(--cd-font-heading);
    font-weight: var(--cd-fw-semibold);
    padding: var(--cd-space-sm) var(--cd-space-md);
    border: none;
    transition: background-color var(--cd-transition-base), color var(--cd-transition-base);
}

body.ewly .elementor-accordion .elementor-tab-title:hover,
body.ewly .elementor-toggle .elementor-toggle-title:hover {
    background-color: var(--cd-color-primary-tint);
    color: var(--cd-color-primary);
}

body.ewly .elementor-accordion .elementor-tab-title.elementor-active,
body.ewly .elementor-toggle .elementor-toggle-title.elementor-active {
    background-color: var(--cd-color-primary);
    color: var(--cd-color-bg);
}

body.ewly .elementor-accordion .elementor-tab-title .elementor-accordion-icon,
body.ewly .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
    color: inherit;
    transition: transform var(--cd-transition-base);
}

body.ewly .elementor-accordion .elementor-tab-content,
body.ewly .elementor-toggle .elementor-tab-content {
    background-color: var(--cd-color-bg);
    color: var(--cd-color-text);
    padding: var(--cd-space-md);
    line-height: var(--cd-lh-relaxed);
    border-top: 1px solid var(--cd-color-border);
}


/* ============================================================
   NESTED ACCORDION (Elementor neu)
   ============================================================ */

body.ewly .elementor-widget-n-accordion {
    --n-accordion-title-normal-color: var(--cd-color-text);
    --n-accordion-title-hover-color: var(--cd-color-primary);
    --n-accordion-title-active-color: var(--cd-color-bg);

    --n-accordion-title-normal-background-color: var(--cd-color-bg);
    --n-accordion-title-hover-background-color: var(--cd-color-primary-tint);
    --n-accordion-title-active-background-color: var(--cd-color-primary);

    --n-accordion-border-color: var(--cd-color-border);
    --n-accordion-border-width: 1px;
    --n-accordion-border-radius: var(--cd-radius-md);

    --n-accordion-padding: var(--cd-space-sm) var(--cd-space-md);
}

body.ewly .elementor-widget-n-accordion .e-n-accordion-item {
    margin-bottom: var(--cd-space-xs);
}

body.ewly .elementor-widget-n-accordion .e-n-accordion-item-title {
    font-family: var(--cd-font-heading);
    font-weight: var(--cd-fw-semibold);
    transition: background-color var(--cd-transition-base), color var(--cd-transition-base);
}

body.ewly .elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
    background-color: var(--cd-color-primary);
    color: var(--cd-color-bg);
}


/* 12. POSTS-WIDGET */
.elementor-posts .elementor-post__title
.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a,
.elementor-widget-posts, h3.elementor-post__title
{
	
    font-family: var(--cd-font-heading);
    font-weight: var(--cd-fw-semibold);
	font-family: 'Inter', Arial, sans-serif ;
    font-size: 36px;
    text-transform: none;
}

.elementor-34 .elementor-element.elementor-element-7dc8e45 .elementor-heading-title,
.elementor-34 .elementor-element.elementor-element-70efa2e,
.elementor-34 .elementor-element.elementor-element-3e7f81e .elementor-post__title,
.elementor-34 .elementor-element.elementor-element-3e7f81e .elementor-post__title a,
.elementor-34 .elementor-element.elementor-element-54e8654
 {
		font-family: 'Inter', Arial, sans-serif ;

}


.elementor-posts .elementor-post__title a {
    color: var(--cd-color-text);
    text-decoration: none;
    transition: color var(--cd-transition-base);
}


.elementor-posts .elementor-post__title a:hover {
    color: var(--cd-color-primary);
}

.elementor-widget-posts, h3.elementor-post__title{
	font-size: 16px;
    text-transform: none;
}

/* ICON-WIDGET (Standalone) */
body.ewly .elementor-widget-icon .elementor-icon {
    color: var(--cd-color-primary);
    transition: color var(--cd-transition-base), transform var(--cd-transition-base);
}

body.ewly .elementor-widget-icon .elementor-icon:hover {
    color: var(--cd-color-primary-soft);
    transform: scale(1.05);
}


/* ============================================================
   13. HEADER & NAVIGATION
   ============================================================ */

.site-header,
header.elementor-location-header {
    background-color: var(--cd-color-bg);
    border-bottom: 2px solid var(--cd-color-primary);
    box-shadow: var(--cd-shadow-sm);
}

.site-branding img,
.custom-logo,
.elementor-widget-site-logo img {
    max-height: 60px;
    width: auto;
}

.main-navigation,
.elementor-nav-menu--main {
    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-semibold);
    font-size: var(--cd-fs-small);
    letter-spacing: 0.02em;
}

.main-navigation a,
.elementor-nav-menu .elementor-item {
    color: var(--cd-color-text);
    text-decoration: none;
    transition: color var(--cd-transition-base);
}

.main-navigation a:hover,
.elementor-nav-menu .elementor-item:hover {
    color: var(--cd-color-primary);
    text-decoration: none;
}

.main-navigation .current-menu-item > a,
.elementor-nav-menu .elementor-item.elementor-item-active {
    color: var(--cd-color-primary);
    border-bottom: 2px solid var(--cd-color-primary);
}

.main-navigation .sub-menu,
.elementor-nav-menu .sub-menu {
    background-color: var(--cd-color-bg);
    border-top: 3px solid var(--cd-color-primary);
    box-shadow: var(--cd-shadow-md);
    border-radius: 0 0 var(--cd-radius-md) var(--cd-radius-md);
}

.main-navigation .sub-menu a,
.elementor-nav-menu .sub-menu a {
    font-weight: var(--cd-fw-medium);
    text-transform: none;
    padding: var(--cd-space-xs) var(--cd-space-sm);
}

.elementor-menu-toggle {
    color: var(--cd-color-primary);
}


/* ============================================================
   14. FOOTER
   ============================================================
   Teal-Hintergrund mit hellem Text und Salbei-Akzenten.
   ============================================================ */

.site-footer,
footer.elementor-location-footer {
    background-color: var(--cd-color-primary);
    color: #DDE8E6;
    font-size: var(--cd-fs-small);
    border-top: 1px solid var(--cd-color-accent);
    padding-block: var(--cd-space-lg) var(--cd-space-sm);
}

.site-footer a,
footer.elementor-location-footer a {
    color: #C8D8D5;
    text-decoration: none;
    transition: color var(--cd-transition-base);
}

.site-footer a:hover,
footer.elementor-location-footer a:hover {
    color: var(--cd-color-accent);
    text-decoration: none;
}

.site-footer h4,
.site-footer h5,
footer.elementor-location-footer h4,
footer.elementor-location-footer h5,
.cd-footer-widget__title {
    font-family: var(--cd-font-heading);
    color: var(--cd-color-accent);
    font-size: var(--cd-fs-h6);
    font-weight: var(--cd-fw-semibold);
    margin-bottom: var(--cd-space-xs);
    padding-bottom: var(--cd-space-2xs);
    border-bottom: 1px solid rgba(159, 180, 156, 0.4);
}

.cd-footer-widget {
    margin-bottom: var(--cd-space-md);
}

.cd-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: var(--cd-space-md);
    padding-top: var(--cd-space-sm);
    font-size: 0.75rem;
    color: #A9C0BC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cd-space-2xs);
}

@media (max-width: 480px) {
    .cd-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}


/* ============================================================
   ──────────────────────────────────────────────────────────
   ZUSATZ-INFO — BACKEND-ARBEIT (keine CSS)
   ──────────────────────────────────────────────────────────

   Elementor → Site Settings → Globale Farben:
      Primär (Petrol)  #2D6E73
      Petrol (Hover)   #245A5E
      Text (Anthrazit) #2E3A38
      Akzent (Salbei)  #9FB49C
      Hintergrund      #FFFFFF

   Elementor → Site Settings → Globale Schriftarten:
      Primär (Headline)  Source Serif 4, 700
      Sekundär (Text)    Inter, 400

   Elementor → Site Settings → Layout:
      Container Width 1200 · Default Padding 24
   ============================================================ */