.elementor-7206 .elementor-element.elementor-element-69dd091{--display:flex;}.elementor-7206 .elementor-element.elementor-element-5ec43cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-7206 .elementor-element.elementor-element-0e19f7c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-775a404 *//* =========================================================
   EKS – TERMINE &amp; KALENDER
   KOMPLETTES CSS
   Hero + Highlight-Termine + automatische Terminliste
   + Hinweisbox + Responsive
   ========================================================= */


/* =========================================================
   1. BASIS
   ========================================================= */

.eks-termine-page {
  --eks-blue: #079CDE;
  --eks-green: #98C241;
  --eks-red: #E30A18;
  --eks-dark: #3F4A50;
  --eks-text: #5D696F;
  --eks-muted: #748086;

  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow-x: hidden;

  color: var(--eks-dark);
  font-family: inherit;
}


.eks-termine-page *,
.eks-highlight-section *,
.eks-event-list * {
  box-sizing: border-box;
}


.eks-termine-page a,
.eks-highlight-section a {
  text-decoration: none;
}


/* =========================================================
   2. GEMEINSAME BREITE
   ========================================================= */

.eks-termine-hero-inner,
.eks-alle-termine,
.eks-termine-info,
.eks-highlight-section {
  width: min(1180px, calc(100% - 48px));

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   3. HERO
   ========================================================= */

.eks-termine-hero {
  position: relative;

  width: 100%;

  padding: 88px 0 76px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(152,194,65,.16),
      transparent 29%
    ),
    radial-gradient(
      circle at 10% 94%,
      rgba(7,156,222,.13),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #F7F9FA,
      #FFFFFF
    );
}


/* =========================================================
   4. EYEBROW / KLEINE ÜBERSCHRIFTEN
   ========================================================= */

.eks-eyebrow,
.eks-highlight-eyebrow {
  margin: 0 0 12px;

  color: var(--eks-blue);

  font-family: inherit;
  font-size: .82rem;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: .09em;
  text-transform: uppercase;
}


/* =========================================================
   5. HERO TYPOGRAFIE
   ========================================================= */

.eks-termine-hero h1 {
  max-width: 900px;

  margin: 0;

  color: var(--eks-dark);

  font-family: inherit;

  font-size:
    clamp(3rem, 5.6vw, 5.4rem);

  font-weight: 600;

  line-height: .98;

  letter-spacing: -.065em;
}


.eks-termine-intro {
  max-width: 720px;

  margin: 26px 0 0;

  color: var(--eks-text);

  font-family: inherit;

  font-size:
    clamp(1.12rem, 2vw, 1.35rem);

  font-weight: 400;

  line-height: 1.6;
}


/* =========================================================
   6. MONATS-BUTTONS
   ========================================================= */

.eks-monats-nav {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 32px;
}


.eks-monats-nav a {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 12px 22px;

  border-radius: 999px;

  color: #08628A;

  font-family: inherit;
  font-size: .96rem;
  font-weight: 600;

  background:
    radial-gradient(
      ellipse at 100% 100%,
      rgba(7,156,222,.11),
      transparent 68%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.92),
      rgba(255,255,255,.58)
    );

  border:
    1px solid rgba(255,255,255,.96);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(125%);

  backdrop-filter:
    blur(16px)
    saturate(125%);

  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -1px 0 rgba(92,119,137,.08),
    0 7px 18px rgba(45,65,80,.07);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


@media (hover: hover) and (pointer: fine) {

  .eks-monats-nav a:hover {
    transform: translateY(-2px);

    box-shadow:
      inset 0 1px 0 #FFFFFF,
      0 12px 25px rgba(45,65,80,.11);
  }

}


/* =========================================================
   7. HIGHLIGHT-BEREICH
   ========================================================= */

.eks-highlight-section {
  padding: 68px 0 54px;

  color: #3F4A50;

  font-family: inherit;
}


.eks-highlight-head {
  max-width: 900px;

  margin-bottom: 34px;
}


.eks-highlight-head h2 {
  margin: 0;

  color: #3F4A50;

  font-family: inherit;

  font-size:
    clamp(2.1rem, 4.4vw, 3.7rem);

  font-weight: 600;

  line-height: 1.04;

  letter-spacing: -.055em;
}


.eks-highlight-intro {
  max-width: 700px;

  margin: 14px 0 0;

  color: #637077;

  font-family: inherit;

  font-size: 1.08rem;

  line-height: 1.6;
}


/* =========================================================
   8. HIGHLIGHT-GRID
   ========================================================= */

.eks-highlight-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 20px;
}


/* =========================================================
   9. HIGHLIGHT-KARTE
   ========================================================= */

.eks-highlight-card {
  position: relative;

  display: grid;

  grid-template-columns:
    112px minmax(0,1fr);

  min-width: 0;

  min-height: 162px;

  overflow: hidden;

  border-radius: 28px;

  color: #34444E !important;

  background:
    radial-gradient(
      ellipse at 100% 100%,
      rgba(7,156,222,.10),
      transparent 68%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.92),
      rgba(247,250,251,.68)
    );

  border:
    1px solid rgba(255,255,255,.96);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(125%);

  backdrop-filter:
    blur(20px)
    saturate(125%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(92,119,137,.08),
    0 10px 28px rgba(45,65,80,.07);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.eks-highlight-card::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.38),
      transparent 32%,
      transparent 75%,
      rgba(255,255,255,.18)
    );
}


.eks-highlight-card &gt; * {
  position: relative;

  z-index: 1;
}


@media (hover: hover) and (pointer: fine) {

  .eks-highlight-card:hover {
    transform: translateY(-3px);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 16px 34px rgba(45,65,80,.11);
  }


  .eks-highlight-card-link:hover h3 {
    color: #0878A9;
  }

}


/* =========================================================
   10. HIGHLIGHT-DATUM
   ========================================================= */

.eks-highlight-date {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 0;

  padding: 18px 10px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(7,156,222,.09),
      rgba(152,194,65,.08)
    );

  border-right:
    1px solid rgba(92,119,137,.09);
}


.eks-highlight-day {
  display: block;

  color: #34444E;

  font-size: 2rem;

  font-weight: 500;

  line-height: .95;

  letter-spacing: -.035em;
}


.eks-highlight-month {
  display: block;

  margin-top: 7px;

  color: #657178;

  font-size: .67rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: .10em;
}


/* =========================================================
   11. HIGHLIGHT ZEITRAUM 12–16
   ========================================================= */

.eks-highlight-date-range {
  flex-direction: row;

  gap: 5px;

  padding-left: 7px;
  padding-right: 7px;
}


.eks-highlight-from,
.eks-highlight-to {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;
}


.eks-highlight-date-range .eks-highlight-day {
  font-size: 1.55rem;
}


.eks-highlight-date-range .eks-highlight-month {
  margin-top: 5px;

  font-size: .53rem;
}


.eks-highlight-dash {
  margin-top: -14px;

  color: #9AA4A9;

  font-size: 1rem;

  font-weight: 400;
}


/* =========================================================
   12. HIGHLIGHT-INHALT
   ========================================================= */

.eks-highlight-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

  padding: 24px 26px;
}


.eks-highlight-content h3 {
  margin: 0;

  color: #34444E;

  font-family: inherit;

  font-size: 1.35rem;

  font-weight: 600;

  line-height: 1.22;

  letter-spacing: -.025em;

  transition:
    color .2s ease;
}


.eks-highlight-content p {
  margin: 9px 0 0;

  color: #637077;

  font-family: inherit;

  font-size: .96rem;

  line-height: 1.5;
}


/* =========================================================
   13. TAG DER OFFENEN TÜR – BESONDERE DETAILS
   ========================================================= */

.eks-highlight-badge {
  display: inline-block;

  width: fit-content;

  margin-bottom: 9px;

  color: #079CDE;

  font-family: inherit;

  font-size: .67rem;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.eks-highlight-more {
  display: inline-block;

  margin-top: 10px;

  color: #08628A;

  font-family: inherit;

  font-size: .88rem;

  font-weight: 600;
}


/* =========================================================
   14. "ALLE TERMINE"
   ========================================================= */

.eks-alle-termine {
  padding: 50px 0 20px;
}


.eks-section-head {
  max-width: 820px;

  margin-bottom: 24px;
}


.eks-section-head h2 {
  margin: 0;

  color: var(--eks-dark);

  font-family: inherit;

  font-size:
    clamp(2.1rem, 4.4vw, 3.7rem);

  font-weight: 600;

  line-height: 1.04;

  letter-spacing: -.055em;
}


.eks-section-head &gt; p:not(.eks-eyebrow) {
  max-width: 700px;

  margin: 12px 0 0;

  color: #637077;

  font-family: inherit;

  font-size: 1.08rem;

  line-height: 1.6;
}


/* =========================================================
   15. AUTOMATISCHE TERMINLISTE
   ========================================================= */

.eks-event-list {
  width: min(1180px, calc(100% - 48px)) !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   16. EINZELNE TERMINKARTE
   ========================================================= */

.eks-event-list .pp-event-list-item {
  position: relative !important;

  margin:
    0 0 12px 0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border-radius:
    23px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.91),
      rgba(247,251,252,.68)
    ) !important;

  border:
    1px solid rgba(255,255,255,.96) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(125%);

  backdrop-filter:
    blur(18px)
    saturate(125%);

  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 8px 23px rgba(45,65,80,.065) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease !important;
}


@media (hover: hover) and (pointer: fine) {

  .eks-event-list .pp-event-list-item:hover {
    transform: translateY(-2px);

    box-shadow:
      inset 0 1px 0 #FFFFFF,
      0 12px 28px rgba(45,65,80,.10) !important;
  }

}


/* =========================================================
   17. TERMIN-LAYOUT
   ========================================================= */

.eks-event-list .pp-event-head {
  display: grid !important;

  grid-template-columns:
    165px minmax(0,1fr) !important;

  width: 100% !important;

  min-height: 100px !important;

  margin: 0 !important;

  padding: 0 !important;
}


/* =========================================================
   18. DATUMSSPALTE
   ========================================================= */

.eks-event-list .pp-event-date {
  position: static !important;

  width: auto !important;

  min-width: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;

  padding:
    13px 11px !important;

  text-align: center !important;

  background:
    linear-gradient(
      145deg,
      rgba(7,156,222,.08),
      rgba(152,194,65,.08)
    ) !important;

  border-right:
    1px solid rgba(92,119,137,.09) !important;
}


.eks-event-list
.pp-event-date
.year {
  display:
    none !important;
}


/* =========================================================
   19. EINZELTAG
   ========================================================= */

.eks-event-list
.pp-date-short:not(.pp-multiple-days) {
  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;
}


.eks-event-list
.pp-date-short:not(.pp-multiple-days)
.pp-date-from {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;
}


.eks-event-list
.pp-date-short:not(.pp-multiple-days)
.day {
  color: #34444E !important;

  font-size: 2rem !important;

  font-weight: 500 !important;

  line-height: .95 !important;
}


.eks-event-list
.pp-date-short:not(.pp-multiple-days)
.month {
  margin-top: 5px !important;

  color: #657178 !important;

  font-size: .65rem !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: .09em !important;

  text-transform: uppercase !important;
}


/* =========================================================
   20. MEHRTÄGIGE TERMINE
   ========================================================= */

.eks-event-list
.pp-date-short.pp-multiple-days {
  display: grid !important;

  grid-template-columns:
    1fr auto 1fr !important;

  align-items: center !important;

  justify-items: center !important;

  column-gap:
    4px !important;

  width:
    100% !important;

  white-space:
    nowrap !important;
}


.eks-event-list
.pp-date-short.pp-multiple-days
.pp-date-from {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;
}


.eks-event-list
.pp-date-short.pp-multiple-days
.pp-date-to {
  display: grid !important;

  grid-template-columns:
    auto auto !important;

  grid-template-rows:
    auto auto !important;

  align-items: center !important;

  justify-items: center !important;
}


.eks-event-list
.pp-date-short.pp-multiple-days
.until {
  position: static !important;

  grid-column:
    1 !important;

  grid-row:
    1 / span 2 !important;

  transform:
    none !important;

  margin-right:
    3px !important;

  color:
    #9AA4A9 !important;

  font-size:
    .9rem !important;

  line-height:
    1 !important;
}


.eks-event-list
.pp-date-short.pp-multiple-days
.pp-date-to .day {
  grid-column:
    2 !important;

  grid-row:
    1 !important;
}


.eks-event-list
.pp-date-short.pp-multiple-days
.pp-date-to .month {
  grid-column:
    2 !important;

  grid-row:
    2 !important;
}


.eks-event-list
.pp-date-short.pp-multiple-days
.day {
  color:
    #34444E !important;

  font-size:
    1.75rem !important;

  font-weight:
    500 !important;

  line-height:
    .95 !important;
}


.eks-event-list
.pp-date-short.pp-multiple-days
.month {
  margin-top:
    5px !important;

  color:
    #657178 !important;

  font-size:
    .58rem !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  letter-spacing:
    .07em !important;

  text-transform:
    uppercase !important;
}


/* =========================================================
   21. TERMIN-TITEL
   ========================================================= */

.eks-event-list
.pp-event-heading {
  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  align-items: flex-start !important;

  min-width: 0 !important;

  padding:
    16px 23px !important;
}


.eks-event-list
.pp-event-title {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #34444E !important;

  font-family:
    inherit !important;

  font-size:
    1.16rem !important;

  font-weight:
    600 !important;

  line-height:
    1.3 !important;

  letter-spacing:
    -.02em !important;
}


.eks-event-list
.pp-event-title a {
  color:
    #34444E !important;

  text-decoration:
    none !important;
}


/* =========================================================
   22. ZEIT / ORT
   ========================================================= */

.eks-event-list
.pp-event-meta {
  margin-top:
    4px !important;

  color:
    #7A878D !important;

  font-family:
    inherit !important;

  font-size:
    .84rem !important;

  line-height:
    1.4 !important;
}


.eks-event-list
.pp-event-meta * {
  color:
    #7A878D !important;
}


/* =========================================================
   23. INFOBOX "ÄNDERUNGEN SIND MÖGLICH"
   ========================================================= */

.eks-termine-info {
  padding:
    26px 0 54px;
}


.eks-termine-info-card {
  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    38px;

  align-items:
    center;

  padding:
    36px 42px;

  border-radius:
    34px;

  background:
    radial-gradient(
      ellipse at 100% 100%,
      rgba(7,156,222,.10),
      transparent 64%
    ),
    radial-gradient(
      ellipse at 0% 0%,
      rgba(152,194,65,.06),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.90),
      rgba(255,255,255,.54)
    );

  border:
    1px solid rgba(255,255,255,.95);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(125%);

  backdrop-filter:
    blur(20px)
    saturate(125%);

  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -1px 0 rgba(92,119,137,.08),
    0 10px 28px rgba(45,65,80,.07);
}


.eks-termine-info-card h3 {
  max-width:
    480px;

  margin: 0;

  color:
    #34444E;

  font-family:
    inherit;

  font-size:
    clamp(2rem, 4vw, 3.2rem);

  font-weight:
    600;

  line-height:
    1.04;

  letter-spacing:
    -.055em;
}


.eks-termine-info-copy p {
  max-width:
    620px;

  margin:
    0 0 16px;

  color:
    #53636D;

  font-family:
    inherit;

  font-size:
    1.04rem;

  line-height:
    1.6;
}


.eks-termine-info-copy a {
  color:
    #08628A;

  font-family:
    inherit;

  font-size:
    1rem;

  font-weight:
    600;
}


.eks-termine-info-copy a span {
  white-space:
    nowrap;
}


/* =========================================================
   24. TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .eks-highlight-grid {
    grid-template-columns:
      1fr;

    gap:
      14px;
  }


  .eks-highlight-card {
    grid-template-columns:
      112px minmax(0,1fr);

    min-height:
      130px;
  }


  .eks-termine-info-card {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }

}


/* =========================================================
   25. HANDY
   ========================================================= */

@media (max-width: 767px) {

  .eks-termine-hero-inner,
  .eks-alle-termine,
  .eks-termine-info,
  .eks-highlight-section,
  .eks-event-list {
    width:
      min(100% - 32px, 1180px) !important;
  }


  /* Hero */

  .eks-termine-hero {
    padding:
      68px 0 58px;
  }


  .eks-termine-hero h1 {
    font-size:
      clamp(2.8rem, 12vw, 4.4rem);
  }


  .eks-termine-intro {
    font-size:
      1.08rem;
  }


  .eks-monats-nav {
    margin-top:
      27px;

    gap:
      8px;
  }


  .eks-monats-nav a {
    min-height:
      44px;

    padding:
      11px 16px;

    font-size:
      .88rem;
  }


  /* Highlights */

  .eks-highlight-section {
    padding:
      50px 0 42px;
  }


  .eks-highlight-head {
    margin-bottom:
      24px;
  }


  .eks-highlight-head h2 {
    font-size:
      clamp(2.1rem, 10vw, 3.3rem);
  }


  .eks-highlight-intro {
    margin-top:
      12px;

    font-size:
      1rem;
  }


  .eks-highlight-grid {
    gap:
      11px;
  }


  .eks-highlight-card {
    grid-template-columns:
      88px minmax(0,1fr);

    min-height:
      108px;

    border-radius:
      22px;
  }


  .eks-highlight-date {
    padding:
      12px 6px;
  }


  .eks-highlight-day {
    font-size:
      1.55rem;
  }


  .eks-highlight-month {
    margin-top:
      5px;

    font-size:
      .54rem;
  }


  .eks-highlight-date-range {
    gap:
      2px;
  }


  .eks-highlight-date-range
  .eks-highlight-day {
    font-size:
      1.08rem;
  }


  .eks-highlight-date-range
  .eks-highlight-month {
    font-size:
      .42rem;
  }


  .eks-highlight-dash {
    margin-top:
      -11px;

    font-size:
      .7rem;
  }


  .eks-highlight-content {
    padding:
      15px 14px;
  }


  .eks-highlight-content h3 {
    font-size:
      1.05rem;

    line-height:
      1.2;
  }


  .eks-highlight-content p {
    margin-top:
      6px;

    font-size:
      .86rem;

    line-height:
      1.4;
  }


  .eks-highlight-badge {
    margin-bottom:
      5px;

    font-size:
      .55rem;
  }


  .eks-highlight-more {
    margin-top:
      7px;

    font-size:
      .8rem;
  }


  /* Alle Termine */

  .eks-alle-termine {
    padding:
      42px 0 16px;
  }


  .eks-section-head {
    margin-bottom:
      20px;
  }


  .eks-section-head h2 {
    font-size:
      clamp(2.1rem, 10vw, 3.3rem);
  }


  .eks-section-head
  &gt; p:not(.eks-eyebrow) {
    margin-top:
      12px;

    font-size:
      1rem;
  }


  /* automatische Termine */

  .eks-event-list
  .pp-event-list-item {
    margin-bottom:
      9px !important;

    border-radius:
      18px !important;
  }


  .eks-event-list
  .pp-event-head {
    grid-template-columns:
      94px minmax(0,1fr) !important;

    min-height:
      86px !important;
  }


  .eks-event-list
  .pp-event-date {
    padding:
      10px 6px !important;
  }


  .eks-event-list
  .pp-date-short:not(.pp-multiple-days)
  .day {
    font-size:
      1.55rem !important;
  }


  .eks-event-list
  .pp-date-short:not(.pp-multiple-days)
  .month {
    font-size:
      .5rem !important;
  }


  .eks-event-list
  .pp-date-short.pp-multiple-days {
    column-gap:
      2px !important;
  }


  .eks-event-list
  .pp-date-short.pp-multiple-days
  .day {
    font-size:
      1.12rem !important;
  }


  .eks-event-list
  .pp-date-short.pp-multiple-days
  .month {
    margin-top:
      3px !important;

    font-size:
      .42rem !important;
  }


  .eks-event-list
  .pp-date-short.pp-multiple-days
  .until {
    margin-right:
      1px !important;

    font-size:
      .64rem !important;
  }


  .eks-event-list
  .pp-event-heading {
    padding:
      11px 10px !important;
  }


  .eks-event-list
  .pp-event-title {
    font-size:
      .98rem !important;

    line-height:
      1.22 !important;
  }


  .eks-event-list
  .pp-event-meta {
    font-size:
      .72rem !important;
  }


  /* Hinweisbox */

  .eks-termine-info {
    padding:
      18px 0 38px;
  }


  .eks-termine-info-card {
    padding:
      26px 22px;

    gap:
      18px;

    border-radius:
      26px;
  }


  .eks-termine-info-card h3 {
    font-size:
      clamp(2rem, 10vw, 2.8rem);
  }


  .eks-termine-info-copy p {
    font-size:
      .96rem;
  }


  .eks-termine-info-copy a {
    font-size:
      .94rem;
  }

}


/* =========================================================
   26. SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 390px) {

  .eks-termine-hero-inner,
  .eks-alle-termine,
  .eks-termine-info,
  .eks-highlight-section,
  .eks-event-list {
    width:
      calc(100% - 24px) !important;
  }


  .eks-highlight-card {
    grid-template-columns:
      82px minmax(0,1fr);
  }


  .eks-highlight-content {
    padding:
      14px 12px;
  }


  .eks-event-list
  .pp-event-head {
    grid-template-columns:
      86px minmax(0,1fr) !important;
  }


  .eks-event-list
  .pp-event-title {
    font-size:
      .93rem !important;
  }

}


/* =========================================================
   27. FALLBACK OHNE BACKDROP-FILTER
   ========================================================= */

@supports not (
  (backdrop-filter: blur(1px)) or
  (-webkit-backdrop-filter: blur(1px))
) {

  .eks-highlight-card,
  .eks-event-list .pp-event-list-item,
  .eks-termine-info-card,
  .eks-monats-nav a {
    background:
      linear-gradient(
        135deg,
        #FFFFFF,
        #F1F5F6
      ) !important;
  }

}


/* =========================================================
   28. REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .eks-termine-page *,
  .eks-highlight-section *,
  .eks-event-list * {
    transition:
      none !important;

    animation:
      none !important;
  }

}
/* =========================================================
   SCHULKALENDER – ÜBERGANG ZUR TERMINLISTE
   ========================================================= */

.eks-alle-termine {
  padding-top: 58px !important;
  padding-bottom: 22px !important;
}

.eks-alle-termine .eks-section-head {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {

  .eks-alle-termine {
    padding-top: 46px !important;
    padding-bottom: 18px !important;
  }

}/* End custom CSS */
/* Start custom CSS for wp-widget-pp-calendar, class: .elementor-element-f36a5f5 *//* =========================================================
   EKS – TERMINLISTE / LIQUID GLASS
   POLYPLANET Calendar Importer
   ========================================================= */

.eks-event-list {
  width: 100%;
}


/* =========================================================
   EINZELNE TERMIN-KARTE
   ========================================================= */

.eks-event-list .pp-event-list-item {
  position: relative !important;

  margin: 0 0 16px 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(255,255,255,.96) !important;
  border-radius: 24px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.94),
      rgba(245,250,252,.78)
    ) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(135%);

  backdrop-filter:
    blur(18px)
    saturate(135%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 28px rgba(45,65,80,.07) !important;

  overflow: hidden !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}


.eks-event-list .pp-event-list-item:hover {
  transform: translateY(-2px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 34px rgba(45,65,80,.10) !important;
}


/* =========================================================
   HAUPTLAYOUT DER KARTE
   ========================================================= */

.eks-event-list .pp-event-head {
  position: static !important;

  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;

  align-items: stretch !important;

  width: 100% !important;
  min-height: 116px !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   DATUMSSPALTE LINKS
   ========================================================= */

.eks-event-list .pp-event-date {
  position: static !important;
  float: none !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 18px 14px !important;

  box-sizing: border-box !important;

  text-align: center !important;

  background:
    linear-gradient(
      145deg,
      rgba(7,156,222,.08),
      rgba(152,194,65,.08)
    ) !important;

  border-right:
    1px solid rgba(52,68,78,.07) !important;
}


/* Jahr ausblenden */

.eks-event-list .pp-event-date .year {
  display: none !important;
}


/* =========================================================
   EINZELNER TAG
   ========================================================= */

.eks-event-list
.pp-date-short:not(.pp-multiple-days) {
  position: static !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


.eks-event-list
.pp-date-short:not(.pp-multiple-days)
.pp-date-from {
  position: static !important;
  float: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


.eks-event-list
.pp-date-short:not(.pp-multiple-days)
.day {
  position: static !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 38px !important;
  line-height: .95 !important;
  font-weight: 500 !important;

  color: #34444e !important;
}


.eks-event-list
.pp-date-short:not(.pp-multiple-days)
.month {
  position: static !important;

  display: block !important;

  margin: 7px 0 0 0 !important;
  padding: 0 !important;

  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  letter-spacing: .10em !important;
  text-transform: uppercase !important;

  color: #718087 !important;
}


/* =========================================================
   MEHRTÄGIGE TERMINE
   z.B. 13 OKT. – 15 OKT.
   ========================================================= */

.eks-event-list
.pp-date-short.pp-multiple-days {
  position: static !important;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;

  align-items: center !important;
  justify-items: center !important;

  column-gap: 7px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;
}


/* Startdatum */

.eks-event-list
.pp-date-short.pp-multiple-days
.pp-date-from {
  position: static !important;
  float: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Enddatum */

.eks-event-list
.pp-date-short.pp-multiple-days
.pp-date-to {
  position: static !important;
  float: none !important;

  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;

  align-items: center !important;
  justify-items: center !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Trennstrich separat */

.eks-event-list
.pp-date-short.pp-multiple-days
.until {
  position: static !important;
  transform: none !important;
  float: none !important;

  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  display: block !important;

  margin: 0 6px 0 0 !important;
  padding: 0 !important;

  color: #9aa4a9 !important;

  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}


/* End-Tageszahl */

.eks-event-list
.pp-date-short.pp-multiple-days
.pp-date-to .day {
  grid-column: 2 !important;
  grid-row: 1 !important;
}


/* End-Monat */

.eks-event-list
.pp-date-short.pp-multiple-days
.pp-date-to .month {
  grid-column: 2 !important;
  grid-row: 2 !important;
}


/* Tageszahlen mehrtägig */

.eks-event-list
.pp-date-short.pp-multiple-days
.day {
  position: static !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 31px !important;
  line-height: .95 !important;
  font-weight: 500 !important;

  color: #34444e !important;
}


/* Monate mehrtägig */

.eks-event-list
.pp-date-short.pp-multiple-days
.month {
  position: static !important;

  display: block !important;

  margin: 6px 0 0 0 !important;
  padding: 0 !important;

  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  color: #718087 !important;
}


/* =========================================================
   INHALT RECHTS
   ========================================================= */

.eks-event-list .pp-event-heading {
  position: static !important;
  float: none !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 20px 28px !important;

  box-sizing: border-box !important;
}


/* Terminname */

.eks-event-list .pp-event-title {
  position: static !important;
  float: none !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #34444e !important;

  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}


.eks-event-list .pp-event-title a {
  position: static !important;

  color: #34444e !important;
  text-decoration: none !important;
}


/* =========================================================
   UHRZEIT / META
   ========================================================= */

.eks-event-list .pp-event-meta {
  position: static !important;

  margin: 6px 0 0 0 !important;
  padding: 0 !important;

  color: #78858c !important;

  font-size: 14px !important;
  line-height: 1.35 !important;
}


.eks-event-list .pp-event-meta * {
  color: #78858c !important;
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

  .eks-event-list .pp-event-list-item {
    margin-bottom: 12px !important;
    border-radius: 20px !important;
  }


  .eks-event-list .pp-event-head {
    grid-template-columns: 112px minmax(0,1fr) !important;

    min-height: 100px !important;
  }


  .eks-event-list .pp-event-date {
    padding: 13px 7px !important;
  }


  /* Einzeltermin */

  .eks-event-list
  .pp-date-short:not(.pp-multiple-days)
  .day {
    font-size: 30px !important;
  }


  .eks-event-list
  .pp-date-short:not(.pp-multiple-days)
  .month {
    font-size: 9px !important;
  }


  /* Mehrtägig */

  .eks-event-list
  .pp-date-short.pp-multiple-days {
    column-gap: 3px !important;
  }


  .eks-event-list
  .pp-date-short.pp-multiple-days
  .day {
    font-size: 22px !important;
  }


  .eks-event-list
  .pp-date-short.pp-multiple-days
  .month {
    font-size: 7px !important;

    margin-top: 4px !important;

    letter-spacing: .04em !important;
  }


  .eks-event-list
  .pp-date-short.pp-multiple-days
  .until {
    margin-right: 2px !important;

    font-size: 12px !important;
  }


  /* Inhalt */

  .eks-event-list .pp-event-heading {
    padding: 15px 13px !important;
  }


  .eks-event-list .pp-event-title {
    font-size: 17px !important;
    line-height: 1.22 !important;
  }


  .eks-event-list .pp-event-meta {
    margin-top: 4px !important;

    font-size: 12px !important;
  }

}


/* =========================================================
   SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 420px) {

  .eks-event-list .pp-event-head {
    grid-template-columns: 102px minmax(0,1fr) !important;
  }


  .eks-event-list
  .pp-date-short.pp-multiple-days
  .day {
    font-size: 20px !important;
  }


  .eks-event-list .pp-event-title {
    font-size: 16px !important;
  }

}
/* =========================================================
   EKS – TERMINLISTE FEINSCHLIFF
   Desktop + Mobil
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 768px) {

  /* Kacheln etwas kompakter */
  .eks-event-list .pp-event-head {
    grid-template-columns: 170px minmax(0, 1fr) !important;
    min-height: 104px !important;
  }

  /* Datumsspalte etwas schmaler */
  .eks-event-list .pp-event-date {
    padding: 14px 12px !important;
  }

  /* Einzeltag etwas eleganter */
  .eks-event-list
  .pp-date-short:not(.pp-multiple-days)
  .day {
    font-size: 35px !important;
  }

  .eks-event-list
  .pp-date-short:not(.pp-multiple-days)
  .month {
    margin-top: 5px !important;
    font-size: 10px !important;
  }

  /* Mehrtägige Termine etwas ruhiger */
  .eks-event-list
  .pp-date-short.pp-multiple-days
  .day {
    font-size: 29px !important;
  }

  .eks-event-list
  .pp-date-short.pp-multiple-days
  .month {
    font-size: 9px !important;
  }

  .eks-event-list
  .pp-date-short.pp-multiple-days
  .until {
    font-size: 15px !important;
  }

  /* Inhalt etwas näher ans Datum */
  .eks-event-list .pp-event-heading {
    padding: 17px 24px !important;
  }

  /* Titel minimal feiner */
  .eks-event-list .pp-event-title {
    font-size: 21px !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
  }

  /* Uhrzeit dezent */
  .eks-event-list .pp-event-meta {
    margin-top: 4px !important;
    font-size: 13px !important;
    color: #7a878d !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .eks-event-list .pp-event-list-item {
    margin-bottom: 10px !important;
    border-radius: 18px !important;
  }

  .eks-event-list .pp-event-head {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    min-height: 88px !important;
  }

  .eks-event-list .pp-event-date {
    padding: 10px 6px !important;
  }

  /* einzelner Tag */
  .eks-event-list
  .pp-date-short:not(.pp-multiple-days)
  .day {
    font-size: 27px !important;
  }

  .eks-event-list
  .pp-date-short:not(.pp-multiple-days)
  .month {
    margin-top: 4px !important;
    font-size: 8px !important;
  }

  /* mehrtägig */
  .eks-event-list
  .pp-date-short.pp-multiple-days {
    column-gap: 2px !important;
  }

  .eks-event-list
  .pp-date-short.pp-multiple-days
  .day {
    font-size: 19px !important;
  }

  .eks-event-list
  .pp-date-short.pp-multiple-days
  .month {
    margin-top: 3px !important;
    font-size: 6.5px !important;
  }

  .eks-event-list
  .pp-date-short.pp-multiple-days
  .until {
    font-size: 11px !important;
    margin-right: 1px !important;
  }

  /* Titelbereich */
  .eks-event-list .pp-event-heading {
    padding: 12px 11px !important;
  }

  .eks-event-list .pp-event-title {
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  .eks-event-list .pp-event-meta {
    margin-top: 3px !important;
    font-size: 11px !important;
  }

}


/* ---------------------------------------------------------
   SEHR KLEINE HANDYS
   --------------------------------------------------------- */

@media (max-width: 420px) {

  .eks-event-list .pp-event-head {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .eks-event-list
  .pp-date-short.pp-multiple-days
  .day {
    font-size: 18px !important;
  }

  .eks-event-list .pp-event-title {
    font-size: 15px !important;
  }

}/* End custom CSS */