/* Theme-level Knechtli overrides loaded after the base UDesign styles. */

.elementor-section > .elementor-shape-bottom,
.elementor-section > .e-con-inner > .elementor-shape-bottom,
.e-con > .elementor-shape-bottom,
.e-con > .e-con-inner > .elementor-shape-bottom {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: -1px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.elementor-section > .elementor-shape-bottom svg,
.elementor-section > .e-con-inner > .elementor-shape-bottom svg,
.e-con > .elementor-shape-bottom svg,
.e-con > .e-con-inner > .elementor-shape-bottom svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  top: auto !important;
  bottom: 0 !important;
  z-index: 1 !important;
}

/* Keep global dividers native: use real Elementor wave SVGs instead of pseudo-elements. */
body .elementor:not(.elementor-location-header):not(.elementor-location-footer):not(.elementor-location-popup) > .elementor-top-section,
body .elementor:not(.elementor-location-header):not(.elementor-location-footer):not(.elementor-location-popup) > .elementor-element.elementor-top-section,
body .elementor[data-elementor-type="wp-page"] > .e-con,
body .elementor[data-elementor-type="wp-post"] > .e-con,
body .elementor[data-elementor-type="single"] > .e-con {
  position: relative !important;
  overflow: visible !important;
}

body .elementor .elementor-shape-bottom svg,
body .e-con .elementor-shape-bottom svg {
  height: clamp(42px, 5vw, 64px) !important;
}

/* Screenshot-matched wave: a single smooth crest between hero and content. */
:root {
  --k3-wave-fill: #c44e4e;
  --k3-wave-height: clamp(250px, 8vw, 200px);
}
/* Desktop überschreiben */
@media (min-width: 1025px) {
  :root {
    --k3-wave-height: clamp(300px, 10vw, 360px);
  }
}
.custom-shape-divider {
  position: relative !important;
  overflow: visible !important;
}

.custom-shape-divider > .elementor-shape-bottom,
.custom-shape-divider > .e-con-inner > .elementor-shape-bottom {
  display: none !important;
}

.custom-shape-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--k3-wave-height);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 38C170 16 320 20 470 46C630 74 780 76 945 50C1090 27 1240 20 1440 42V120H0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 4;
}

/* Kill legacy pseudo-wave overlay from base style.css that renders as a white block. */
body .elementor:not(.elementor-location-header):not(.elementor-location-footer):not(.elementor-location-popup) > .elementor-top-section:first-child:not(.custom-shape-divider)::after,
body .elementor:not(.elementor-location-header):not(.elementor-location-footer):not(.elementor-location-popup) > .elementor-element.elementor-top-section:first-child:not(.custom-shape-divider)::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.page-id-21 .elementor-element-883bc9e {
  padding-top: 110px !important;
  padding-bottom: 30px !important;
}

.page-id-21 .elementor-element-209e967 .elementor-element-19b8168 {
  display: none !important;
}

.page-id-21 .elementor-element-209e967 {
  margin-top: 24px !important;
}

.page-id-21 .elementor-element-209e967 .elementor-element-cebcece {
  margin-left: 0 !important;
}

@media (max-width: 991px) {
  .elementor-2 .elementor-element.elementor-element-ae2abe2:not(.elementor-motion-effects-element-type-background),
  .elementor-2 .elementor-element.elementor-element-ae2abe2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #ffffff !important;
    background-size: cover !important;
    background-position: center -7rem !important;
  }

  .elementor-2 .elementor-element.elementor-element-4126b18:not(.elementor-motion-effects-element-type-background),
  .elementor-2 .elementor-element.elementor-element-4126b18 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  .elementor-2 .elementor-element.elementor-element-7814720 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  .elementor-2 .elementor-element.elementor-element-7814720 img {
    width: min(100%, 470px) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 767px) {
  .elementor-2 .elementor-element.elementor-element-4126b18:not(.elementor-motion-effects-element-type-background),
  .elementor-2 .elementor-element.elementor-element-4126b18 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: contain !important;
  }

  .elementor-2 .elementor-element.elementor-element-ae2abe2:not(.elementor-motion-effects-element-type-background),
  .elementor-2 .elementor-element.elementor-element-ae2abe2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #ffffff !important;
    background-size: cover !important;
    background-position: center -10rem !important;
  }

  .elementor-2 .elementor-element.elementor-element-7814720 {
    margin: -32px auto 0 auto !important;
  }

  .page-id-21 .elementor-element-883bc9e {
    padding-top: 86px !important;
  }

  .elementor-2 .elementor-element.elementor-element-7814720 img {
    width: min(84vw, 360px) !important;
  }
}

/* Shared course-card layout: applies to all pages using .kurs-card blocks. */
body main .elementor-top-section:has(.kurs-card) > .elementor-container {
  align-items: stretch;
}

body main .elementor-top-column:has(.kurs-card) {
  display: flex;
  height: auto;
}

body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

body:has(main .kurs-card) {
  --k3-course-card-image-height: 300px;
}

/* Image block gets a unified visual height and crops consistently. */
body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section:first-child {
  height: var(--k3-course-card-image-height);
  min-height: var(--k3-course-card-image-height);
  max-height: var(--k3-course-card-image-height);
  flex: 0 0 var(--k3-course-card-image-height);
  display: flex;
}

body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section:first-child > .elementor-container,
body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section:first-child .elementor-column,
body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section:first-child .elementor-widget-wrap {
  height: 100%;
}

body main .elementor-top-column:has(.kurs-card) .elementor-widget-image,
body main .elementor-top-column:has(.kurs-card) .elementor-widget-image .elementor-widget-container,
body main .elementor-top-column:has(.kurs-card) .elementor-widget-image a {
  display: block;
  height: 100%;
}

body main .elementor-top-column:has(.kurs-card) .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text block height is normalized to avoid uneven card bottoms in the same row. */
body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section:last-child {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: -20px;
  position: relative;
  z-index: 3;
}

body main .kurs-card,
body main .kurs-card > .elementor-widget-wrap {
  height: 100%;
}

body main .kurs-card > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start !important;
  margin-top: 0 !important;
  padding-top: 20px;
}

body main .kurs-card .elementor-widget-heading {
  min-height: 5.2em;
}

/* Prevent Elementor transform/centering effects from shifting card copy upward. */
body main .kurs-card .e-transform,
body main .kurs-card .elementor-widget,
body main .kurs-card .elementor-widget-container {
  transform: none !important;
}

body main .kurs-card .elementor-widget {
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 0;
}

body main .kurs-card .elementor-widget-container,
body main .kurs-card .elementor-widget-text-editor,
body main .kurs-card .elementor-widget-heading {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body main .kurs-card .elementor-widget-text-editor,
body main .kurs-card .elementor-widget-text-editor p {
  margin-top: 0;
}

@media (max-width: 1024px) {
  body:has(main .kurs-card) {
    --k3-course-card-image-height: 260px;
  }

  body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section:first-child {
    height: var(--k3-course-card-image-height);
    min-height: var(--k3-course-card-image-height);
    max-height: var(--k3-course-card-image-height);
  }

  body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section:last-child {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  html body:has(main .kurs-card),
  html body:has(main .kurs-card) .page-wrapper,
  html body:has(main .kurs-card) main,
  html body:has(main .kurs-card) .page-content {
    overflow-x: clip;
  }

  body:has(main .kurs-card) {
    --k3-course-card-image-height: 220px;
  }

  /* Mobile: keep visual style, but allow card text areas to grow naturally. */
  body main .elementor-top-section:has(.kurs-card) > .elementor-container {
    align-items: flex-start;
  }

  /* Remove inherited side offsets that push text cards out of viewport on mobile. */
  body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section > .elementor-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body main .elementor-top-column:has(.kurs-card),
  body main .kurs-card,
  body main .kurs-card > .elementor-widget-wrap {
    height: auto !important;
  }

  body main .kurs-card > .elementor-widget-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  body main .elementor-top-column:has(.kurs-card) > .elementor-widget-wrap > .elementor-inner-section:last-child {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    margin-top: -16px;
  }

  body main .kurs-card .elementor-widget-heading {
    min-height: 0;
  }

  body main .kurs-card .elementor-widget-text-editor,
  body main .kurs-card .elementor-widget-text-editor p {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
}