/*
Theme Name: Talea Pflegedienst Basis-Theme
Theme URI: https://formschoen-agenturen.de/
Author: Lorenz Karow
Author URI: https://formschoen-agenturen.de/
Description: Ein Blank-Theme als Basis für die Pflegedienst-Multisite, zur Verwendung mit Elementor Pro.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: talea-pflegedienst-theme
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  margin: 0 !important;
}

body {
  background-color: #f7feff;
}

h1.elementor-heading-title {
  line-height: 130%;
  margin: 10px 0;
}

#karriere h1.elementor-heading-title {
  line-height: unset !important;
  margin: 0 !important;
}

#karriere h3 {
  padding: 0 !important;
}

h2.elementor-heading-title {
  font-size: 2rem !important;
  line-height: 120% !important;

  @media screen and (min-width: 768px) {
    font-size: 2.75rem !important;
  }
}

h3 {
  font-size: 1.5rem !important;
  line-height: 120% !important;


  @media screen and (min-width: 768px) {
    font-size: 2rem !important;
    line-height: 140% !important;
    padding: 15px 0 !important;
  }
}



p {
  margin: 0 0 10px 0;
}

p.elementor-icon-box-title,
.elementor-icon-box-title>p,
a.button-wrapper p {
  margin: 0;
}

.pflegeleistungen-btn p.elementor-icon-box-title {
  line-height: 110% !important;
}

.pflegeleistungen-btn p.elementor-icon-box-title>a {
  line-height: unset !important;
}

ul {
  padding-left: 15px;
}

.wp-theme-talea-pflegedienst-theme footer a {
  font-size: 1.125rem;
}

footer a.elementor-item-active {
  color: #ffffff !important;
  font-weight: bold !important;
  text-decoration: underline;
}

footer>div:last-child p {
  font-size: .9rem;

  @media screen and (min-width: 768px) {
    font-size: 1.1rem;
  }
}

.wp-theme-talea-pflegedienst-theme .elementor-widget-text-editor,
.wp-theme-talea-pflegedienst-theme .elementor-icon-box-description,
.wp-theme-talea-pflegedienst-theme .elementor-image-box-title,
.wp-theme-talea-pflegedienst-theme .elementor-image-box-description,
.wp-theme-talea-pflegedienst-theme h3.elementor-icon-box-title,
.wp-theme-talea-pflegedienst-theme label,
.wp-theme-talea-pflegedienst-theme a {
  font-size: 1.1rem;
  line-height: 130%;

  @media screen and (min-width: 768px) {
    font-size: 1.25rem;
  }
}

.elementor-widget-icon-box.elementor-position-top.round-button .elementor-icon-box-wrapper {
  align-items: center !important;
}

.round-button {
  .elementor-button {
    border-radius: 50% !important;
    padding: 10px !important;

    .elementor-button-content-wrapper {
      display: flex;
      flex-direction: column !important;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;

      .elementor-button-icon {
        svg {
          width: 40px;
          height: auto;
        }
      }

      .elementor-button-text {
        font-size: 0.9rem;
        line-height: 1rem;
      }
    }
  }
}

footer {
  .footer-image {
    filter: brightness(0) invert(1);

    a {
      img {
        width: 100% !important;
      }
    }
  }

  .elementor-widget-nav-menu {
    nav {
      ul {
        li {
          a::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 16px;
            margin-right: 10px;
            background-image: url("/wp-content/uploads/icons/icon-arrow.svg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            vertical-align: middle;
            position: relative;
            opacity: 1 !important;
            background-color: transparent !important;
          }

          /* Sicherstellen dass der Link korrekt dargestellt wird */
          a {
            display: inline-flex;
            align-items: center;
          }
        }
      }
    }
  }

  .badges {
    img {
      width: 100px !important;
      height: auto;
    }
  }
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
  width: 100%;

  .elementor-widget-theme-site-logo {
    z-index: 11;

    a {
      img {
        width: 100% !important;
      }
    }
  }

  .elementor-menu-toggle {
    background: none;
    border: 1px solid #000000;
    font-size: 28px;
  }

  .nav-buttons {
    position: absolute;
    z-index: 10;

    &>.elementor-element {
      a {
        transition: 0.3s;

        &:hover {
          transform: translateY(-3px);
        }
      }
    }
  }

  nav {
    ul {
      li {
        a {
          padding-bottom: 0 !important;
        }
      }

      li:last-child {
        a {
          padding-right: 0 !important;
        }
      }
    }
  }
}

.slider-locations {
  .swiper-wrapper {
    .swiper-slide:hover {
      transition: all 0.3s;
      cursor: pointer;

      &>div {
        transition: all 0.3s;
      }
    }
  }
}

.slider-locations {
  .swiper-wrapper {
    .swiper-slide:hover {
      background-color: #00b8f1;

      a {
        &>div {
          filter: brightness(0) invert(1);
        }
      }
    }
  }
}

.pflegeleistungen-btn {
  width: 100%;
  cursor: pointer;
  height: 100%;
  display: flex;
  justify-content: center !important;
  align-items: center !important;

  &:hover {
    background-color: #00b8f1 !important;

    span {
      color: white !important;
    }
  }
}

.content-container {
  .e-con-inner {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 25px !important;
    padding-right: 25px !important;

    &>.elementor-element {
      max-width: 1000px !important;
      width: 100% !important;

      &.button-wrapper {
        width: fit-content !important;
      }
    }
  }
}

.get-in-contact {
  .elementor-field-type-submit {
    justify-content: center !important;

    .elementor-button {
      flex-basis: unset !important;
    }
  }
}

.contact-form {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;

  .elementor-widget {
    width: 1000px !important;
  }
}

.pflegeleistungen-btn:hover {
  a {
    color: white !important;
  }
}

/* =========================================
   WIDGET: Talea Icon Modal (NEU & UPDATE)
   ========================================= */

/* Reset Styles */
.talea-icon-modal-trigger,
.talea-custom-modal * {
  box-sizing: border-box;
}

/* Trigger Style */
.talea-icon-modal-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  transition: transform 0.3s ease;

  @media screen and (min-width: 768px) {
    padding: 20px;
  }
}

.talea-icon-modal-trigger:hover {
  transform: translateY(-5px);
}

/* Icon Wrapper */
.talea-im-icon {
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.talea-im-icon img {
  max-width: 100%;
  display: block;
}

.talea-im-icon svg {
  display: block;
  height: auto;
}

.talea-im-content {
  flex-grow: 1;
}

/* Hier sicherstellen dass Wörter brechen wenn nötig */
.talea-im-title {
  margin: 0 0 5px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.talea-im-teaser {
  margin: 0;
}

/* Modal Wrapper */
.talea-custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;

  visibility: hidden;
  transition: visibility 0s linear 0.3s;

  /* Fonts */
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #333;
}

.talea-custom-modal.is-open {
  visibility: visible;
  transition-delay: 0s;
}

/* Backdrop (Blur) */
.talea-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  opacity: 0;
  transition: opacity 0.3s ease;
}

.talea-custom-modal.is-open .talea-modal-backdrop {
  opacity: 1;
}

/* --- CONTAINER (Die weiße Box - FIXED SCROLL UPDATE) --- */
.talea-modal-container {
  position: relative;
  background: #fff;
  width: 600px;
  max-width: 90%;

  /* WICHTIG: Flexbox für Layout */
  display: flex;
  flex-direction: column;

  /* Maximale Höhe */
  max-height: 90vh;
  /* WICHTIG: Kein Overflow hier, sondern in der scroll-area */
  overflow: hidden;

  /* Padding entfernen wir hier und geben es den Kindern */
  padding: 0;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);

  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.talea-custom-modal.is-open .talea-modal-container {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- HEADER (Fixierter Bereich oben) --- */
.talea-modal-header {
  flex-shrink: 0;
  /* Darf nicht schrumpfen */
  padding: 20px;
  /* Padding oben/links/rechts */
  background: #fff;
  border-bottom: 1px solid #eee;
  margin: 0;
}

/* Close Button */
.talea-modal-close {
  position: absolute;
  top: 20px;
  right: 15px;
  z-index: 10;
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}

.talea-modal-close:hover {
  color: #d63638;
}

/* Modal Content Styles */
.talea-modal-title {
  margin: 0;
  /* Reset Margin */
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight, 600);
  color: #00b8f1;
}

/* --- SCROLL AREA (Der Textbereich) --- */
.talea-modal-scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;

  /* Scrollbar hübsch machen */
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.talea-modal-inner-content img {
  max-width: 100%;
  height: auto;
}

.talea-modal-inner-content p {
  margin-bottom: 1em;
  line-height: 1.6;
}

/* =========================================
   ELEMENTOR STANDARD FIXES
   ========================================= */

.elementor-button {
  cursor: pointer !important;
}

.elementor-widget-button {
  .elementor-button {
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-3px);
    }
  }
}

.elementor-sub-item.highlighted,
.elementor-sub-item:focus,
.elementor-sub-item:hover {
  background-color: transparent !important;
  color: #33373d !important;
}

.p-margin p {
  margin-bottom: 1em !important;
}

.sub-menu.elementor-nav-menu--dropdown {
  padding-bottom: 1.25rem !important;

  li.menu-item {
    a {
      transition: 0.3s all ease-in !important;
      color: #00b8f1 !important;

      &:hover {
        transform: translateY(-3px);
        color: #007fae !important;
      }
    }
  }
}

.elementor-sub-item.elementor-item-active {
  background-color: transparent !important;
}

.elementor-swiper-button {
  @media screen and (max-width: 768px) {
    display: none !important;
  }
}

.swiper-pagination {
  @media screen and (min-width: 768px) {
    display: none !important;
  }
}

.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background-color: #00b8f1 !important;
}

.swiper-pagination-bullet-active {
  background-color: #02B8F1 !important;
}

/* Wende dies auf alle Elemente an, die eine ID haben (potenzielle Anker-Ziele) */
[id] {
  /* Ersetze 120px mit der Höhe deines Headers + etwas Luft (z.B. 20px) */
  scroll-margin-top: 110px;
}

#elementor-navigator__header__title {
  font-size: 13px !important;
}

.modal-wrapper {
  &>.elementor-element {
    width: 23%;
  }
}

@media screen and (max-width: 1199px) {
  .position-over {
    width: 100% !important;
    left: unset !important;
    position: unset !important;
  }

  .content-container.fix-padding {
    .e-con-inner {
      padding: 0rem !important;

      @media screen and (min-width: 768px) {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
      }
    }
  }
}

@media screen and (max-width: 1120px) {

  .elementor-nav-menu--main .elementor-nav-menu a,
  .elementor-nav-menu--main .elementor-nav-menu a.highlighted,
  .elementor-nav-menu--main .elementor-nav-menu a:focus,
  .elementor-nav-menu--main .elementor-nav-menu a:hover {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media screen and (max-width: 1024px) {
  .claims-wrapper {
    &>.elementor-element:first-child {
      display: none !important;
    }

    .claims {
      padding: 10px !important;
      width: fit-content !important;

      &:nth-child(2) {
        left: 4rem !important;
      }

      &:nth-child(3) {
        left: 10rem !important;
        top: 8.5rem !important;
      }

      &:nth-child(4) {
        left: 7rem !important;
        top: 11.25rem !important;
      }

      h1,
      h2 {
        font-size: 1.5rem !important;
      }
    }
  }

  .sub-menu.elementor-nav-menu--dropdown {
    padding-bottom: 0 !important;
  }

  .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
  .elementor-sub-item.elementor-item-active {
    background-color: #00b8f1 !important;
    color: white !important;
    padding: 5px !important;

    .sub-arrow svg {
      fill: white !important;
    }
  }

  header {
    .elementor-nav-menu--dropdown {
      box-shadow: 0px 20px 20px 0px #2b2b2b38;

      ul {
        box-shadow: none !important;

        li {
          padding: 0.5rem 25px !important;

          &:first-child {
            padding-top: 2rem !important;
          }

          &:last-child {
            padding-bottom: 2rem !important;
          }

          a {
            font-size: 18px !important;
            padding: 0 !important;
          }

          ul.sub-menu {
            li {
              padding: 0.5rem 0 !important;

              a {
                font-size: 16px !important;
                padding: 0 !important;
              }
            }
          }
        }
      }
    }

    .e-con-inner {
      &>.elementor-element {
        &>.elementor-element:last-child {
          margin-top: 1rem !important;
        }
      }
    }
  }
}

@media screen and (max-width: 870px) {
  .modal-wrapper {
    &>.elementor-element {
      width: 30%;
    }
  }

  .nav-buttons {
    position: relative !important;
  }

  header {
    .e-con-inner {
      &>.elementor-element {
        gap: 1rem !important;

        &>.elementor-element:last-child {
          margin-top: 0.5rem !important;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .claims-wrapper {
    .claims {
      &:nth-child(2) {
        left: 3rem !important;
        top: 2rem !important;
      }

      &:nth-child(3) {
        left: 8rem !important;
        top: 4.5rem !important;
      }

      &:nth-child(4) {
        left: 6rem !important;
        top: 7.25rem !important;
      }
    }
  }

  /* Basis-Zustand aller Buttons in der Nav-Leiste */
  .nav-buttons>.elementor-widget-button {
    /* Weiche Animation für das Ein-/Ausklappen */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden;
    /* Wichtig, damit Inhalt beim Einklappen verschwindet */
    max-height: 100px;
    /* Genug Höhe für den Button */
    opacity: 1;
  }

  /* Der Zustand "Geschrumpft" (wird per JS aktiviert) */
  /* :nth-child(-n+2) wählt NUR das 1. und 2. Element aus */
  .nav-buttons.is-shrunk>.elementor-widget-button:nth-child(-n + 2) {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
    /* Verhindert versehentliche Klicks */
  }

  [id] {
    /* Ersetze 120px mit der Höhe deines Headers + etwas Luft (z.B. 20px) */
    scroll-margin-top: 140px;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  .no-wrap-helper {
    display: flex !important;
    gap: 10px !important;
  }

  /* Den Container definieren */
  .nav-buttons {
    display: flex !important;
    justify-content: center !important;
    /* Zentriert die Gruppe */
    gap: 10px !important;
    /* Abstand zwischen den Buttons */
    align-items: stretch !important;
    /* Sorgt für gleiche Höhe */
    flex-wrap: wrap !important;
    /* Umbruch auf kleinen Screens erlauben */
  }

  /* Die Widget-Wrapper ansprechen */
  .nav-buttons .elementor-widget-button {
    flex: 1 !important;
    /* Jeder Button nimmt 1 Anteil des Platzes */
    min-width: 200px !important;
    /* Mindestbreite, damit Text nicht zerquetscht wird */
    width: 100% !important;
  }

  /* Den eigentlichen Button (den Link) stylen */
  .nav-buttons .elementor-button {
    width: 100% !important;
    /* Button füllt den Wrapper komplett aus */
    height: 100% !important;
    /* Button füllt die Höhe komplett aus */
    display: flex !important;
    justify-content: center !important;
    /* Text zentrieren */
    align-items: center !important;
    /* Text vertikal mittig */
    text-align: center !important;
    padding: 15px 20px !important;
    /* Gleichmäßiges Padding */
  }

  /* Icon im dritten Button fixen */
  .nav-buttons .elementor-button-icon {
    margin-right: 8px !important;
    /* Abstand zwischen Icon und Telefonnummer */
    display: inline-flex !important;
    align-items: center !important;
  }

  .nav-buttons .elementor-button-icon svg {
    width: 1em !important;
    /* Icon Größe an Text anpassen */
    height: 1em !important;
  }

  header {
    .e-con-inner {
      &>.elementor-element {
        flex-direction: column-reverse !important;
      }
    }

    .nav-buttons {
      &>.elementor-element {
        flex: 1;

        a {
          padding: 0.5rem 0.5rem !important;
          width: 100%;
        }
      }

      &>.elementor-element:last-child {
        flex: 0.3;
      }
    }
  }

  .round-button {
    .elementor-button {
      .elementor-button-content-wrapper {
        width: 80px;
        height: 80px;

        .elementor-button-icon {
          svg {
            width: 25px;
            height: auto;
          }
        }

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

  .header {
    .e-con-inner {
      &>.elementor-element {
        gap: 0 !important;
        padding: 0 !important;

        &>.elementor-element:first-child {
          width: calc(100% - 50px) !important;
          margin: 0 auto !important;
        }

        .round-button {
          bottom: 25px !important;
          right: 25px !important;
        }

        &>.elementor-widget-image {
          margin-top: -25px !important;
          margin-bottom: 0 !important;

          &.object-position-right {
            img {
              object-position: right !important;
            }
          }

          img {
            height: 300px !important;
            object-fit: cover;
          }
        }

        &>.elementor-element:first-child {
          position: unset !important;
          margin-top: 2rem !important;

          .elementor-widget-button {
            right: 60px !important;
            top: 120px !important;
          }
        }
      }
    }
  }

  .map {
    img {
      width: auto !important;
      height: auto !important;
      margin-top: 2rem !important;
      padding-left: 4rem !important;
      padding-right: 4rem !important;
    }
  }

  .claim {
    position: relative !important;
    justify-content: center !important;
    padding-bottom: 2rem !important;
    border-bottom: 1px solid #aaaaaa;
  }

  .slider-locations {
    margin: 1rem 0 !important;
  }

  .all-locations {
    width: 300px !important;
    top: 159px !important;
  }

  .about-us {
    .e-con-inner {
      &>.elementor-element {
        gap: 0 !important;

        .elementor-element[data-widget_type="image.default"] {
          margin-bottom: 0 !important;
          margin-top: 0 !important;
        }

        >.elementor-element[data-element_type="container"] {
          position: unset !important;
          margin-bottom: 2rem;
        }
      }
    }
  }

  .whitespace {
    min-height: 50px !important;
  }
}

.e-n-accordion details {
  border-top: 1px solid #747474;
}


.e-n-accordion details:last-child {
  border-bottom: 1px solid #747474;
}

.e-n-accordion details summary {
  padding: 0.75rem 0 !important;
}

.e-n-accordion details>div {
  padding: 0 0 0.75rem 0;
}

.elementor-swiper-button.elementor-swiper-button-prev {
  margin-left: -4rem;
}

.elementor-swiper-button.elementor-swiper-button-next {
  margin-right: -4rem;
}

.talea-im-icon path {
  fill: #00B8F1;
}

@media screen and (max-width: 540px) {
  .modal-wrapper {
    &>.elementor-element {
      width: 35%;
    }
  }

  header {
    & .elementor-widget-theme-site-logo {
      & a {
        img {
          width: 175px !important;
        }
      }
    }
  }

  [id] {
    /* Ersetze 120px mit der Höhe deines Headers + etwas Luft (z.B. 20px) */
    scroll-margin-top: 270px;
  }

  .header {
    .e-con-inner {
      &>.elementor-element {
        &>.elementor-element:first-child {
          position: unset !important;
          margin-top: 2rem !important;

          .elementor-widget-button {
            position: unset !important;
            margin-top: 0.5rem !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 459px) {
  .modal-wrapper {
    &>.elementor-element {
      width: 47%;
    }
  }

  .claims-wrapper {
    .claims {
      &:nth-child(2) {
        left: 1rem !important;
      }

      &:nth-child(3) {
        left: 4rem !important;
      }

      &:nth-child(4) {
        left: 2rem !important;
      }
    }
  }

  header {
    & .e-con-inner {
      &>.elementor-element {
        gap: 0 !important;
      }
    }
  }

  .nav-buttons {
    &>.elementor-element {
      margin-top: 0 !important;

      &:first-child {
        margin-top: 1rem !important;
      }
    }
  }
}