/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* =========================================================
   FIX: H1-Überschriften auf Mobile verkleinern
   Impreza Theme h1 = 42px, viel zu groß auf kleinen Screens
   ========================================================= */
@media (max-width: 767px) {
  h1,
  .vc_custom_heading h1,
  .wpb_custom_heading h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* =========================================================
   FIX: Mobile Header robust bei grosser Textskalierung
   - verhindert abgeschnittenes Hamburger-Icon
   - skaliert das linke Logo kontrolliert
   ========================================================= */
@media (max-width: 900px) {
  .l-header,
  .l-header .w-text {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .header_hor .l-subheader {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .header_hor .l-subheader-h {
    min-width: 0;
  }

  .header_hor .l-subheader-cell.at_left {
    min-width: 0;
  }

  .header_hor .l-subheader-cell.at_left .w-text {
    min-width: 0;
  }

  .header_hor .l-subheader-cell.at_left .w-text-value {
    display: block;
    white-space: nowrap;
  }

  .header_hor .l-subheader-cell.at_left .w-image,
  .header_hor .l-subheader-cell.at_left .w-image-h,
  .header_hor .l-subheader-cell.at_left .w-logo,
  .header_hor .l-subheader-cell.at_left .w-logo-h,
  .header_hor .l-subheader-cell.at_left .w-logo img,
  .header_hor .l-subheader-cell.at_left .w-image img {
    max-height: 40px !important;
    max-width: min(68vw, 220px) !important;
    width: auto !important;
  }

  .header_hor .l-subheader-cell.at_right {
    flex: 0 0 auto;
  }

  .header_hor .l-subheader-cell.at_right .w-nav:last-child .w-nav-control {
    margin-right: 0 !important;
  }
}

@media (max-width: 450px) {
  .header_hor .l-subheader-cell.at_left .w-text-value {
    font-size: clamp(14px, 4.1vw, 18px);
    line-height: 1.1;
  }
}

@media (max-width: 420px) {
  .header_hor .l-subheader-cell.at_left > * {
    margin-right: 0.4rem;
  }

  .header_hor .l-subheader-cell.at_left .w-text {
    min-width: 0;
  }

  .header_hor .l-subheader-cell.at_left .w-text-value {
    font-size: clamp(14px, 4.2vw, 18px);
  }

  .header_hor .l-subheader-cell.at_left .w-image,
  .header_hor .l-subheader-cell.at_left .w-image-h,
  .header_hor .l-subheader-cell.at_left .w-logo,
  .header_hor .l-subheader-cell.at_left .w-logo-h,
  .header_hor .l-subheader-cell.at_left .w-logo img,
  .header_hor .l-subheader-cell.at_left .w-image img {
    max-height: 34px !important;
    max-width: min(62vw, 180px) !important;
  }
}

@media (max-width: 360px) {
  .header_hor .l-subheader-cell.at_left .w-text-value {
    font-size: clamp(13px, 4vw, 16px);
  }
}

@media (max-width: 320px) {
  .header_hor .l-subheader-cell.at_left .w-text-value {
    font-size: clamp(12px, 3.8vw, 14px);
  }
}

@media (max-width: 300px) {
  .header_hor .l-subheader {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  .header_hor .l-subheader-cell.at_left > * {
    margin-right: 0.25rem;
  }

  .header_hor .l-subheader-cell.at_left .w-text-value {
    font-size: clamp(11px, 3.6vw, 13px);
  }
}

/* =========================================================
   HM Course Tiles (prefixed, isolated from legacy setup)
   ========================================================= */
.hmct-section-title {
  text-align: center;
  margin: 0 0 1.2rem;
}

.hmct-grid {
  --hmct-min-height: 290px;
  --hmct-gap: 1.5rem;
  --hmct-radius: 10px;
  --hmct-title-color: #666;
  --hmct-subtitle-color: #666;
  --hmct-title-hover: #fff;
  --hmct-subtitle-hover: #fff;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hmct-gap);
  width: 100%;
}

.hmct-grid.hmct-cols-1 { grid-template-columns: 1fr; }
.hmct-grid.hmct-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hmct-grid.hmct-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hmct-grid.hmct-single { gap: 0; }

.hmct-card {
  position: relative;
  min-height: var(--hmct-min-height);
  border-radius: var(--hmct-radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-decoration: none;
  background-color: #e9ecef;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.hmct-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  pointer-events: none;
  z-index: 5;
  border-bottom-left-radius: var(--hmct-radius);
  border-bottom-right-radius: var(--hmct-radius);
  transition: background .3s ease, opacity .3s ease;
}

.hmct-content {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 100%;
  padding: 0 24px 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22rem;
  text-align: center;
  pointer-events: none;
}

.hmct-title,
.hmct-subtitle {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 1.25;
  border-radius: 5px;
  text-shadow: none;
  transition: color .3s ease, text-shadow .3s ease, background-color .3s ease;
}

.hmct-title {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  padding: 0 16.9px;
  margin-bottom: 1px;
  color: var(--hmct-title-color);
}

.hmct-subtitle {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 14.4px;
  font-weight: 500;
  line-height: 17.28px;
  padding: 2px 10px;
  margin-bottom: 2px;
  color: var(--hmct-subtitle-color);
}

/* Overlay-Stil: heller Balken unten */
.hmct-overlay-light-band .hmct-layer {
  background: rgba(255, 255, 255, .88);
}

.hmct-overlay-light-band .hmct-card:hover .hmct-layer,
.hmct-overlay-light-band .hmct-card:focus-visible .hmct-layer {
  opacity: 0;
}

.hmct-overlay-light-band .hmct-card:hover .hmct-title,
.hmct-overlay-light-band .hmct-card:hover .hmct-subtitle,
.hmct-overlay-light-band .hmct-card:focus-visible .hmct-title,
.hmct-overlay-light-band .hmct-card:focus-visible .hmct-subtitle {
  color: var(--hmct-title-hover);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

/* Overlay-Stil: dunkler Verlauf */
.hmct-overlay-dark-gradient .hmct-layer {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .66) 0%,
    rgba(0, 0, 0, .42) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hmct-overlay-dark-gradient .hmct-title,
.hmct-overlay-dark-gradient .hmct-subtitle {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .42);
}

.hmct-overlay-dark-gradient .hmct-card:hover .hmct-layer,
.hmct-overlay-dark-gradient .hmct-card:focus-visible .hmct-layer {
  opacity: .88;
}

/* Touch: stabiler Look ohne fragile Hover-Zustaende */
@media (max-width: 1200px) {
  .hmct-grid.hmct-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: none), (max-width: 767px) {
  .hmct-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .hmct-card {
    min-height: max(220px, var(--hmct-min-height));
  }

  .hmct-overlay-light-band .hmct-layer {
    background: rgba(255, 255, 255, .88);
  }

  .hmct-overlay-light-band .hmct-title,
  .hmct-overlay-light-band .hmct-subtitle {
    color: var(--hmct-title-color);
    text-shadow: none;
  }
}

/* =========================================================
   HM Session Tiles (Einzelsessions)
   ========================================================= */
.hmst-section-title {
  text-align: center;
  margin: 0 0 1.2rem;
}

.hmst-grid {
  --hmst-min-height: 198px;
  --hmst-gap: 1.5rem;
  --hmst-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hmst-gap);
  width: 100%;
}

.hmst-grid.hmst-cols-1 { grid-template-columns: 1fr; }
.hmst-grid.hmst-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hmst-grid.hmst-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hmst-grid.hmst-single { gap: 0; }

.hmst-card {
  position: relative;
  min-height: var(--hmst-min-height);
  border-radius: var(--hmst-radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-decoration: none;
  background-color: #e9ecef;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.hmst-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  z-index: 5;
  pointer-events: none;
  background: rgba(255, 255, 255, .88);
  border-bottom-left-radius: var(--hmst-radius);
  border-bottom-right-radius: var(--hmst-radius);
  transition: background .3s ease, opacity .3s ease;
}

.hmst-content {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 100%;
  /* Padding fruehere Einheit war 6vh -> skaliert mit der Viewport-HOEHE, nicht
     der Kachelbreite. Auf schmalen Kacheln (Tablet-Bereich, 3 Spalten) blieben
     dadurch nur ~60px fuer den Titel -> "Yogatherapie"/"Systemische Aufstellung"
     wurden abgeschnitten. clamp() koppelt das Padding an die KACHELBREITE (%):
     min 14px (schmale Kachel bleibt lesbar), ideal 8%, max 61px (= alter
     Desktop-Wert, breite Kacheln sehen unveraendert aus). */
  padding: 0 clamp(14px, 8%, 61px) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;     /* Issue #19: Kachel-Texte zentriert (war flex-start) */
  gap: .22rem;
  text-align: center;      /* Issue #19: einheitlich zentriert (war left) */
  pointer-events: none;
}

.hmst-title,
.hmst-subtitle {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  border-radius: 5px;
  color: #666;
  transition: color .3s ease, text-shadow .3s ease;
}

.hmst-title {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  padding: 0 28.8px;
  text-shadow: none;
  margin-bottom: 2px;
}

.hmst-subtitle {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 14.4px;
  font-weight: 500;
  line-height: 17.28px;
  padding: 2px 10px;
  text-shadow: none;
}

.hmst-card:hover .hmst-layer,
.hmst-card:focus-visible .hmst-layer {
  opacity: 0;
}

.hmst-card:hover .hmst-title,
.hmst-card:focus-visible .hmst-title,
.hmst-card:hover .hmst-subtitle,
.hmst-card:focus-visible .hmst-subtitle {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

@media (max-width: 1200px) {
  .hmst-grid.hmst-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: none), (max-width: 767px) {
  .hmst-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .hmst-card {
    min-height: max(220px, var(--hmst-min-height));
  }
}

/* =========================================================
   PUNKT 5 (Nicolle 25.06.) — "Weitere Einzelsessions"-Kacheln im
   MITTLEREN Breakpoint-Bereich (Tablet/Phablet).
   Problem: Der WPBakery-Row der Session-Kacheln steht auf
   `cols_3 tablets-cols_inherit` -> bleibt von 601px bis ~1024px
   DREISPALTIG. Bei ~183px Kachelbreite werden die Titel
   ("Yogatherapie", "Systemische Aufstellung") abgeschnitten.
   Erst <=600px (Impreza `mobiles-cols_1`) wird es einspaltig und
   sieht wieder gut aus -> genau das "dazwischen nie gut".
   Fix rein per CSS (kein DB-Eingriff): den Session-Kachel-Row im
   Tablet-Bereich auf 2 Spalten zwingen. `:has(.hmst-card)` trifft
   NUR die Kachel-Rows; `:not(:has(.hmst-events))` schliesst die
   Event-Kacheln aus; die generischen Titelbild-cols_3-Rows haben
   keine .hmst-card und bleiben unberuehrt.
   ========================================================= */
@media (min-width: 601px) and (max-width: 1024px) {
  .g-cols.via_grid.cols_3:has(.hmst-card):not(:has(.hmst-events)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   ISSUE #17 — Event-Kacheln: Lesbarkeit (Scrim statt Balken)
   NUR fuer Event-Kacheln (.hmst-events). Die originalen Kurs-/
   Session-Kacheln (.hmst-grid ohne .hmst-events) bleiben unberuehrt.
   Problem: weisser Halbtransparenz-Balken funktioniert nur, wenn der
   Titel komplett darin sitzt; lange Titel + Hover (weiss auf hellem
   Bild) werden unlesbar. Loesung: durchgehender dunkler Verlauf von
   unten, Text immer weiss mit Schatten -> lesbar bei jedem Bild,
   jeder Titellaenge, auch im Hover.
   ========================================================= */
.hmst-grid.hmst-events .hmst-layer {
  top: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .72) 0%,
    rgba(0, 0, 0, .55) 26%,
    rgba(0, 0, 0, .18) 55%,
    rgba(0, 0, 0, 0) 78%
  );
  border-radius: var(--hmst-radius);
}

.hmst-grid.hmst-events .hmst-title,
.hmst-grid.hmst-events .hmst-subtitle {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .45);
}

/* Hover: Verlauf leicht verstaerken statt ausblenden (Text bleibt weiss) */
.hmst-grid.hmst-events .hmst-card:hover .hmst-layer,
.hmst-grid.hmst-events .hmst-card:focus-visible .hmst-layer {
  opacity: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .80) 0%,
    rgba(0, 0, 0, .60) 30%,
    rgba(0, 0, 0, .25) 60%,
    rgba(0, 0, 0, .05) 85%
  );
}

.hmst-grid.hmst-events .hmst-card:hover .hmst-title,
.hmst-grid.hmst-events .hmst-card:focus-visible .hmst-title,
.hmst-grid.hmst-events .hmst-card:hover .hmst-subtitle,
.hmst-grid.hmst-events .hmst-card:focus-visible .hmst-subtitle {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .45);
}

/* =========================================================
   FIX: Kachel-Text klickbar machen (Desktop + Mobile)
   Problem: Text liegt über dem verlinkten Column-Hintergrund
   und fängt Klicks ab. pointer-events: none lässt Klicks durch.
   ========================================================= */
.kachel-overlay h4,
.kachel-overlay p,
.kachel-overlay .overlay,
.kachel-overlay .wpb_wrapper,
.kachel-overlay .wpb_text_column,
.kachel-overlay .vc_column-inner > .wpb_wrapper {
  pointer-events: none !important;
}

/* =========================================================
   FIX: Kachel-Text auf Mobile sichtbar machen
   Problem: Viele geschichtete CSS-Regeln in Theme Options
   killen den Text. Hier sauber überschreiben.
   ========================================================= */
@media (max-width: 767px) {

  /* Kachel-Container: Text höher positionieren */
  .kachel-overlay {
    padding-bottom: 30px !important;
  }

  /* Text immer sichtbar: weiß + Schatten für Lesbarkeit */
  .kachel-overlay h4,
  .kachel-overlay p,
  .kachel-overlay .overlay h4,
  .kachel-overlay .overlay p {
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 30 !important;
    display: block !important;
    /* Breiter laufen lassen, kein frühes Umbrechen */
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    /* Ellipsis und Clipping entfernen */
    text-overflow: clip !important;
    overflow: visible !important;
    max-height: none !important;
    white-space: normal !important;
    /* Weiße Hinterlegung/Pill komplett entfernen */
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Auch strong/em/span innerhalb der Kacheltexte: keine Hinterlegung */
  .kachel-overlay h4 *,
  .kachel-overlay p *,
  .kachel-overlay .overlay h4 *,
  .kachel-overlay .overlay p * {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    text-shadow: inherit !important;
  }

  /* Tap/Click/Focus: keine Hinterlegung aufblitzen lassen */
  .kachel-overlay:hover h4,
  .kachel-overlay:hover p,
  .kachel-overlay:active h4,
  .kachel-overlay:active p,
  .kachel-overlay:focus h4,
  .kachel-overlay:focus p,
  .kachel-overlay:focus-within h4,
  .kachel-overlay:focus-within p,
  .kachel-overlay:hover h4 *,
  .kachel-overlay:hover p *,
  .kachel-overlay:active h4 *,
  .kachel-overlay:active p *,
  .kachel-overlay:focus h4 *,
  .kachel-overlay:focus p * {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6) !important;
  }

  /* .overlay DIV-Wrapper sichtbar halten */
  .kachel-overlay .overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 25 !important;
    width: 100% !important;
  }

  /* Dunkler Gradient unten für Textlesbarkeit */
  .kachel-overlay::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 55% !important;
    background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0)) !important;
    z-index: 4 !important;
    pointer-events: none !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
  }
}

/* =========================================================
   FIX: Footer Mobile – Ausrichtung, Font-Weight, Menüumbruch
   Feedback Nitya 2026-02-27
   ========================================================= */

/* 1) Heading "sonnemond yoga": Regular + links bündig mit Kontakttext */
.l-footer .wpb_text_column.us_custom_0f8f44b7 h4,
.l-footer .wpb_text_column.us_custom_0f8f44b7 h4 strong {
  font-weight: 400 !important;
  font-family: inherit !important;
  text-align: left !important;
}

/* Kontaktblock unter dem Heading auf dieselbe linke Kante ziehen */
#Footer-Mobile .wpb_text_column p {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 2) Footer-Typografie komplett Regular */
#Footer-Mobile .wpb_text_column p,
#Footer-Mobile .wpb_text_column strong,
#Footer-Mobile .wpb_text_column a,
#Footer-Mobile .w-menu .menu > li > a {
  font-weight: 400 !important;
  font-family: inherit !important;
}

/* 3) Footer-Menü Mobile: Impressum / Datenschutz / FAQ jeweils eigene Zeile */
@media (max-width: 767px) {
  .l-footer .wpb_text_column.us_custom_0f8f44b7 {
    margin-left: 15px !important;
  }

  #Footer-Mobile .w-menu .menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
  }

  #Footer-Mobile .w-menu .menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #Footer-Mobile .w-menu .menu > li > a {
    display: block !important;
    width: 100% !important;
    font-weight: 400 !important;
  }
}

/* FAQ block */
.hm-faq-block {
  margin: 0 auto;
  max-width: 960px;
}

.hm-faq-list {
  display: grid;
  gap: 0.8rem;
}

.hm-faq-item {
  border: 1px solid rgba(249, 177, 4, 0.25);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.hm-faq-question {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1rem;
  font-weight: 600;
  font-family: inherit;
}

.hm-faq-question::-webkit-details-marker {
  display: none;
}

.hm-faq-item[open] .hm-faq-question {
  border-bottom: 1px solid rgba(249, 177, 4, 0.2);
}

.hm-faq-answer {
  padding: 0.8rem 1rem 0.95rem;
}

.hm-faq-answer > :last-child {
  margin-bottom: 0;
}

.hm-faq-more {
  margin-top: 1rem;
  text-align: center;
}

/* =========================================================
   FIX: Startseite Hero Mobile – Weißraum + Blume des Lebens
   ========================================================= */
@media (max-width: 767px) {
  .l-main {
    background-image: none !important;
  }

  body {
    position: relative;
    min-height: 100vh;
    background-color: #fff !important;
  }

  body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    bottom: 0;
    background-image: url("/wp-content/uploads/2024/10/lebensblume_sonnemond_yoga-1.svg");
    background-repeat: repeat-y;
    background-size: 120vw auto;
    background-position: center top;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
  }

  .l-canvas {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
  }
}

/* Extrem schmale Viewports (z. B. effektive Breite ~290px): Weißraum im Hero gezielt reduzieren */
@media (max-width: 320px) {
  .l-section.us_custom_e872a85d {
    margin-top: -140px !important;
  }
}

/* =========================================================
   FIX #3: CF7 Sendebestätigung – Orange statt Grün
   Nicolle will Markenfarbe statt Standard-Grün
   ========================================================= */
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #f9b104 !important;
  color: #b37e03 !important;
  background-color: rgba(249, 177, 4, 0.08) !important;
}

/* =========================================================
   FIX #4: CF7 Senden-Button auf Mobile – gleiche Größe wie
   die anderen Buttons (Telefon, E-Mail, Kursanmeldung)
   Nicolle-Feedback 2026-04-09
   ========================================================= */
@media (max-width: 767px) {
  .wpcf7 input[type="submit"],
  .wpcf7-submit {
    width: auto !important;
    max-width: 100% !important;
    padding: 11px 18px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    height: auto !important;
  }
}

/* =========================================================
   FIX #6: Kontaktseite Überschriften-Hierarchie Mobile
   h1 = Kontakt, h2 = Kursanmeldung / Häufige Fragen
   Nicolle-Feedback 2026-04-09
   ========================================================= */
@media (max-width: 767px) {
  .page-id-696 h2.vc_custom_heading {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
}

/* =========================================================
   Google Maps Click-to-Load (DSGVO)
   Generisches Platzhalterbild mit Consent-Overlay
   ========================================================= */
.hm-maps-consent {
  width: 100%;
}

.hm-maps-placeholder {
  position: relative;
  border: 1px solid rgba(249, 177, 4, 0.2);
  border-radius: 10px;
  overflow: hidden;
  background-color: #f5f2ec;
}

.hm-maps-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.hm-maps-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.hm-maps-icon {
  color: #f9b104;
  opacity: 0.7;
}

.hm-maps-address {
  font-weight: 600;
  color: #666;
  margin: 0;
  font-size: 15px;
}

.hm-maps-notice {
  color: #999;
  font-size: 13px;
  margin: 0;
  max-width: 320px;
}

.hm-maps-load-btn {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 10px 24px;
  border: 2px solid #f9b104;
  border-radius: 5px;
  background: transparent;
  color: #f9b104;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.hm-maps-load-btn:hover {
  background: #f9b104;
  color: #fff;
}

.hm-maps-consent iframe {
  border-radius: 10px;
}

.hm-maps-attribution {
  position: absolute;
  bottom: 4px;
  right: 8px;
  z-index: 3;
  margin: 0;
  font-size: 10px;
  color: #888;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

.hm-maps-attribution a {
  color: #777;
  text-decoration: underline;
}

/* =========================================================
   Brevo-Newsletter Click-to-Load (DSGVO)
   Lokale Vorschau-Box, Iframe erst nach Klick (analog Maps)
   ========================================================= */
.hm-newsletter-consent {
  width: 100%;
}

.hm-newsletter-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(249, 177, 4, 0.2);
  border-radius: 10px;
  background-color: #f5f2ec;
}

.hm-newsletter-title {
  font-weight: 600;
  color: #666;
  margin: 0;
  font-size: 22px;
}

.hm-newsletter-text {
  color: #666;
  font-size: 15px;
  margin: 0;
  max-width: 460px;
}

.hm-newsletter-notice {
  color: #999;
  font-size: 13px;
  margin: 0;
  max-width: 420px;
}

.hm-newsletter-notice a {
  color: #777;
  text-decoration: underline;
}

.hm-newsletter-load-btn {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 10px 24px;
  border: 2px solid #f9b104;
  border-radius: 5px;
  background: transparent;
  color: #f9b104;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.hm-newsletter-load-btn:hover {
  background: #f9b104;
  color: #fff;
}

.hm-newsletter-consent iframe {
  border-radius: 10px;
}

/* Newsletter-iframe: feste Attribut-Hoehe entfernt -> kein interner Scrollbalken.
   Hoehe per CSS, gemessen am Brevo-Formular (Desktop ~398px, schmal ~454px) + Puffer
   fuer Fehler-/Erfolgsmeldung. Auf schmaleren Viewports mehr Hoehe (Textumbruch). */
.hm-nl-frame {
  display: block;
  width: 100%;
  max-width: 540px;
  height: 480px;
  margin: 0 auto;
  border: 0;
}
@media (max-width: 600px) {
  .hm-nl-frame {
    height: 540px;
  }
}
@media (max-width: 400px) {
  .hm-nl-frame {
    height: 560px;
  }
}

/* =========================================================
   ISSUES RUNDE 2 — autonome Nacht-Session 2026-06-15
   Reine Child-CSS-Fixes. Anker: stabile us_custom_*-Klassen
   (Hash aus css-Attribut) + el_class/page-id als 2. Anker.
   ========================================================= */

/* ---------------------------------------------------------
   Issue #22: KK-Badge ("zertifiziert") Startseite (20) +
   Yogatherapie (532) wieder größer. Quelle ist das inline
   css-Attribut der us_image-Shortcodes; Override hier ist
   sauber (kein DB-Eingriff). IDs: 414 Desktop, 321 Mobile.
   --------------------------------------------------------- */
.button-drehen.us_custom_b305e709 {
  width: 200px !important;   /* Desktop, ID 414 (war 150px) */
}
@media (max-width: 600px) {
  .button-drehen.us_custom_54742666 {
    width: 130px !important;  /* Mobile, ID 321 (war 110px) */
  }
}

/* ---------------------------------------------------------
   Issue #11: Startseite-H1 "Willkommen bei Dir selbst" auf
   Mobile näher ans Foto rücken. Ursache: Der Hero ist ein
   Royal-Slider (fix 600px), dessen Column aber ~193px höher
   ist (Leerraum unter dem Foto). Dieser Leerraum ist
   viewport-stabil (375px==320px, Slider skaliert nicht mit),
   daher ist eine feste negative Margin hier sicher.
   -150px => Restabstand Foto->H1 ~43px. Section-Anker
   us_custom_e872a85d.
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .l-section.us_custom_e872a85d {
    margin-top: -150px !important;   /* war -30px aus Shortcode; zieht H1 unter den Slider-Leerraum */
  }
  .l-section.us_custom_e872a85d h1.vc_custom_heading {
    margin-bottom: 0.5rem !important;  /* war ~1.5rem Theme-Default */
  }
}

/* ---------------------------------------------------------
   Issue #11 (Runde 2, Nicolle 2026-06-25): Auf HOCHAUFLÖSENDEN
   Handys (großer CSS-Viewport ~601–673px, z. B. Nicolles Gerät)
   bricht die Button-Reihe im Hero anders um -> die Hero-Section
   wird höher, der feste -150px-Pull oben reicht dort nicht und
   es klafft ~76px Weißraum zwischen Foto und H1.
   Nur dieses schmale Band bekommt einen stärkeren Pull, sodass
   die H1 auch dort ans Foto rückt (Gap +76px -> ~-6px, wie bei
   normalen Handys). Schmalere Handys (<=600px) und der Bereich
   >=674px bleiben unberührt (dort klebt die H1 bereits).
   Verifiziert per WebKit-Render auf Produktiv über 360–767px.
   --------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 673px) {
  .l-section.us_custom_e872a85d {
    margin-top: -232px !important;
  }
}

/* ---------------------------------------------------------
   Issue #13: CF7 "Nachricht senden"-Button Desktop dezenter.
   Nur Kontaktseite (696) + nur Desktop. Mobile-FIX#4 bleibt.
   Globales us-btn-style_1-Preset (site-weit) bleibt unberührt.
   NB Nicolle 25.06.2026, Punkt 2: der frühere "dezente" 8px-Rand
   soll doch wieder rund sein wie die anderen orangen Buttons
   (us_btn = 20px). border-radius hier von 8px auf 20px zurück-
   gezogen; Schriftgröße/Padding aus #13 bleiben unverändert.
   --------------------------------------------------------- */
@media (min-width: 768px) {
  .page-id-696 .wpcf7 input[type="submit"] {
    font-size: 18px !important;       /* war 25px (Preset) */
    padding: 8px 28px !important;     /* war 0.7em 2.5em; 8px -> Gesamthöhe ~50px */
    border-radius: 20px !important;   /* #13 war 8px; Punkt 2 -> zurück auf 20px (rund wie us_btn) */
    line-height: 1.3 !important;      /* überschreibt Preset line-height:0.8 */
    height: auto !important;
  }
  .page-id-696 .wpcf7 input[type="submit"]::before {
    border-width: 2px !important;     /* Preset setzt 6px auf ::before */
  }
}

/* ---------------------------------------------------------
   Issue #15: E-Mail-Button Kontakt (696) Mobile — langes
   mailto-Label "mail@sonnemond-yoga.de" umbrechen statt
   abschneiden. Hebt Theme-Options white-space:nowrap auf
   (Regression auf Fix #5, der am falschen Ort lag).
   --------------------------------------------------------- */
@media (max-width: 600px) {
  .w-btn.button-mobil .w-btn-label {
    white-space: normal !important;       /* hebt nowrap aus Theme Options auf */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }
  .w-btn.button-mobil {
    height: auto !important;              /* us_custom_ccb48dc5 setzt height:20% */
    min-height: 44px !important;          /* Touch-Target erhalten */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Footer-E-Mail-Link defensiv (Plaintext im <p>) */
  #Footer-Mobile .wpb_text_column p a[href^="mailto"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* ---------------------------------------------------------
   Issue #18/#25 + Nicolle 25.06.2026 Punkt 6: H1 auf
   Unterseiten orange, Schriftschnitt wie Startseite (300).
   Startseite (body.home) komplett ausgenommen — dort tragen
   auch die 5 Sektions-Überschriften H1, und der Hero-H1 soll
   neutral auf dem Foto/Blume-Hintergrund bleiben.

   font-weight: 300 (2026-07-02) — Nicolle empfand die orangen
   Titel auf Kontakt/Nitya als "fetter als die anderen".
   Live-Messung (Playwright, sonnemond.haase-media.de) zeigte:
   ALLE Unterseiten-Titel standen auf 700, NUR die Startseite
   ("Willkommen bei dir selbst") auf 300. "Die anderen" = die
   Startseite. Daher hier global auf 300 gezogen -> alle orangen
   Seitentitel jetzt einheitlich im dünnen Startseiten-Schnitt.
   (Vorher 700; die frühere #18/#25-Regel hatte alle Unterseiten
   bewusst auf 700 gezwungen — genau das war die Ursache.)
   A11y-Hinweis: #f9b104 auf Weiß ~2:1 Kontrast — Nicolle
   wünscht Markenfarbe; bei Bedarf abdunkeln (#b37e03 ~4.5:1).
   --------------------------------------------------------- */
body.page:not(.home) h1.vc_custom_heading,
body.page:not(.home) h1.vc_custom_heading > strong {
  color: #f9b104 !important;
  font-weight: 300 !important;
}

/* ---------------------------------------------------------
   Issue #26: Nitya-Portrait (587 /ueber-mich/) auf Mobile.
   Nicolle: Foto ist auf dem Handy "kleiner und ohne abgerundeten
   Rand" -> sie will es "wie auf der Computeransicht", d.h. MIT
   rundem Rand. Desktop hat border-radius:10px, Mobile rendert
   aber 0px -> auf Mobile den Desktop-Radius angleichen.
   Element: echtes Portrait nitya-portrait.jpg im Wrapper
   .w-image.us_custom_9cf479d2 (NICHT der Yoga-Pose-Slider darüber).
   Breite Mobile (342px) füllt die Spalte nahezu voll -> "wie
   Desktop" relativ erfüllt; der behebbare Punkt ist der Radius.
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .page-id-587 .w-image.us_custom_9cf479d2 img,
  .page-id-587 .w-image.us_custom_9cf479d2 .w-image-h {
    border-radius: 10px !important;
  }
}

/* ---------------------------------------------------------
   Issue #29: Startseite (20) vertikale Rhythmik
   vereinheitlichen. Mischt heute 4 Abstands-Mechanismen
   (us_separator, mobiles margin-top:100px, height="medium",
   Defaults). Hero (us_custom_e872a85d) bleibt ausgenommen,
   da dort #11 die margins gezielt setzt.
   --------------------------------------------------------- */
.page-id-20 .l-section:not(.us_custom_e872a85d) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-id-20 .l-section:not(.us_custom_e872a85d) > .l-section-h {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.page-id-20 .vc_custom_heading {
  margin-bottom: 1.5rem !important;
}
/* führende Separatoren vor H1 neutralisieren (Doppelabstand) */
.page-id-20 .wpb_row .us_separator:first-child {
  height: 0 !important;
  margin: 0 !important;
}
@media (max-width: 767px) {
  .page-id-20 .l-section:not(.us_custom_e872a85d) > .l-section-h {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ---------------------------------------------------------
   Nicolle 25.06.2026, Punkt 1: Titelbild-Slider der Seite
   "Yogakurse – alle Level" (597) ist 400px hoch, die drei
   anderen Kursseiten (598/599/600) sind 380px -> 597 wirkt
   höher. Slider-Höhe wird pro Element als inline-Regel
   .us_custom_2eb1a079{height:400px!important} gesetzt (im
   WPBakery-Slider-Feld "Höhe"). Pflegeort wäre eigentlich das
   Element (DB); da Nicolle parallel pflegt, hier per Code auf
   380px angeglichen. Gilt für alle Viewports (die inline-Regel
   hat keine Media-Query -> auch Handy war 400px). Seiten-
   spezifisch + Klasse für ausreichende Spezifität gegen das
   inline !important.
   --------------------------------------------------------- */
.page-id-597 .l-section .w-slider.us_custom_2eb1a079 {
  height: 380px !important;
}

/* ---------------------------------------------------------
   Nicolle 25.06.2026, Punkt 3: Titelbildhöhen der drei
   Einzelsession-Seiten (Thai Yoga 580, Personal Yoga 582,
   Systemische Aufstellung 583) sollen sich wie die Kursseiten
   verhalten. Ist-Zustand: das Titelbild ist ein Impreza
   .w-image.has_ratio mit FESTEM Seitenverhältnis (Spacer-div
   padding-bottom:31.25% -> Höhe skaliert linear mit der Breite).
   Ergebnis: Desktop 445px, Handy nur 117px (schmaler Streifen).
   Kursseiten dagegen haben eine feste Slider-Höhe (~400px), auf
   Handy unverändert groß. -> hier ebenfalls feste Höhe erzwingen:
   Spacer neutralisieren, .w-image-h fixe Höhe geben. Das <img>
   ist position:absolute + object-fit:cover und füllt den Wrapper.
   Desktop 400px (wie Kurs), Handy 280px (Nicolle: "dürfen gern
   größer sein" als die 117px, aber nicht bildschirmfüllend).
   Genau ein .w-image.has_ratio pro Seite = das Titelbild
   (verifiziert 580/582/583) -> seitenweiter Selektor ist sicher.
   --------------------------------------------------------- */
.page-id-580 .w-image.has_ratio .w-image-h,
.page-id-582 .w-image.has_ratio .w-image-h,
.page-id-583 .w-image.has_ratio .w-image-h {
  height: 400px !important;
}
.page-id-580 .w-image.has_ratio .w-image-h > div,
.page-id-582 .w-image.has_ratio .w-image-h > div,
.page-id-583 .w-image.has_ratio .w-image-h > div {
  padding-bottom: 0 !important;   /* Ratio-Spacer neutralisieren */
}
@media (max-width: 767px) {
  .page-id-580 .w-image.has_ratio .w-image-h,
  .page-id-582 .w-image.has_ratio .w-image-h,
  .page-id-583 .w-image.has_ratio .w-image-h {
    height: 280px !important;
  }
}

/* ---------------------------------------------------------
   Nicolle 25.06.2026, Punkt 4: "Kacheln auf den Einzelsession-
   Unterseiten sind schmaler als auf der Startseite -> so breit
   (und hoch?) wie Startseite, damit 'Yoga - alle Level' gleich
   umbricht."
   Analyse (Staging gemessen): Es gibt DREI Kachel-Systeme.
   - .hmct-card  = Kurs-Kacheln der Startseite ("Yoga - alle Level"
     etc.), hoch-schmales Format, --hmct-min-height:290px -> 275x290.
   - .hmst-card  = Session-Kacheln in "Weitere Einzelsessions" auf
     den Einzelsession-Unterseiten, flach-breites Querformat,
     --hmst-min-height:198px -> 374x198.
   Nicolle vergleicht mit den hmct-Kurs-Kacheln. Real sind die
   hmst-Kacheln NICHT schmaler, sondern FLACHER (198 statt 290) und
   dadurch anders proportioniert (breites Band statt hoch). Das
   wirkt "gedrückt/schmaler" und laesst den Titeltext anders
   umbrechen. Fix: die hmst-Session-Kacheln der vier Einzelsession-
   Unterseiten (580 Thai, 582 Personal, 583 Systemische Aufstellung,
   532 Yogatherapie) auf 290px anheben = gleiche Hoehe wie die
   Startseiten-Kurskacheln. Breite bleibt (Grid-Spalten unangetastet,
   sonst bricht das Layout). min-height sitzt an .hmst-card via
   var(--hmst-min-height); wir ueberschreiben min-height direkt,
   damit der DB-seitige Inline-Wert (198) nicht angefasst werden muss.
   NUR Session-Grids (nicht .hmst-events) treffen.
   --------------------------------------------------------- */
.page-id-580 .hmst-grid:not(.hmst-events) .hmst-card,
.page-id-582 .hmst-grid:not(.hmst-events) .hmst-card,
.page-id-583 .hmst-grid:not(.hmst-events) .hmst-card,
.page-id-532 .hmst-grid:not(.hmst-events) .hmst-card {
  min-height: 290px !important;
}
@media (max-width: 767px) {
  .page-id-580 .hmst-grid:not(.hmst-events) .hmst-card,
  .page-id-582 .hmst-grid:not(.hmst-events) .hmst-card,
  .page-id-583 .hmst-grid:not(.hmst-events) .hmst-card,
  .page-id-532 .hmst-grid:not(.hmst-events) .hmst-card {
    min-height: 290px !important;   /* Startseiten-Kurskachelhoehe, auch mobil */
  }
}

/* -----------------------------------------------------------
   Nicolle 25.06.2026, Punkt 7: Graue Ankertitel der Startseite
   ("Yogakurse", "Einzelsessions", "Events", "Verlag") kleben beim
   Sprung via Menue/Button direkt am oberen Bildrand, weil der Header
   (#page-header, position:fixed, 100px hoch, z-index 111) das
   Sprungziel verdeckt. Ankersprung landet ohne Offset bei top:0,
   also hinter dem Header. Fix: scroll-margin-top an den vier Anker-H1s
   -> Sprung endet 140px von oben = 40px sichtbarer Abstand unter dem
   Header. Anker = feste id-Attribute der Sprungziele (stabil, aus
   Menue/Button-hrefs /#yogakurse etc.). Nur diese vier IDs, keine
   globale Regel. "Kontakt"/"Nitya" sind eigene Seiten (kein
   In-Page-Anker), daher dort schon korrekt - kein Eingriff noetig. */
/* Issue #46 (Nicolle 28.07.2026): Bei ihr kleben die Titel weiter
   am Rand — grosse Systemschrift/Zoom macht den Header hoeher als
   die einkalkulierten 100/60px, die 40px Reserve reicht dort nicht.
   Werte um 40px angehoben (Desktop 140->180, Mobil 100->140);
   normale Nutzer bekommen entsprechend mehr Luft unter dem Header. */
#yogakurse,
#einzelsessions,
#events,
#verlag {
  scroll-margin-top: 180px;   /* Desktop-Header 100px + 80px Luft/Reserve */
}
@media (max-width: 767px) {
  #yogakurse,
  #einzelsessions,
  #events,
  #verlag {
    scroll-margin-top: 140px;   /* Mobil-Header 60px + 80px Luft/Reserve */
  }
}

/* =========================================================
   FIXES NICOLLE 2026-07-06 (Issues #33–#40)
   Kundin nutzt hochaufloesendes Android mit grosser System-
   schrift -> effektive Viewport-Breiten bis ~290px. Alle Werte
   per Playwright/Chromium gegen localhost:8080 gemessen
   (290/320/375/1440px + 1356x610 landscape).
   ========================================================= */

/* ---------------------------------------------------------
   Issue #33: Hero Mobile – Abstand Foto -> H1.
   Ursache A (Hochformat <=299px): Der mobile Header wird bei
   sehr schmalen Viewports hoeher (Logo/Hamburger brechen
   anders um), wodurch die H1-Section (die per festem
   `margin-top:-150px`, siehe Issue #11 oben, ans Foto gezogen
   wird) tiefer startet. Gemessen: Luecke Foto->H1 springt von
   ~43px (>=300px) auf ~96px (<=295px), obwohl der Pull-Wert
   identisch bleibt (-150px in beiden Faellen) - die Differenz
   kommt rein aus der groesseren Headerhoehe. Fix: bei <=299px
   zusaetzlichen Pull von -54px (Messwert: 756px vs 702px H1-Top),
   damit die Luecke wieder auf ~43px sinkt.
   Ursache B (Querformat/niedrige Hoehe, z.B. 1356x610 oder
   812x375): Ab >=768px Breite greift der Desktop-Pull (-30px);
   bei flachem Viewport (Hoehe <=650px) faellt das Slider-Foto
   in dem Bereich WENIGER hoch aus als in "echtem" Desktop-Format,
   wodurch die Luecke unregelmaessig zwischen ~90px und ~155px
   schwankt. Fix: fuer Landscape mit begrenzter Hoehe einen
   definierten, moderaten Abstand erzwingen (~90px), damit die H1
   nicht zu dicht am Foto klebt, aber auch nicht willkuerlich
   springt.
   --------------------------------------------------------- */
@media (max-width: 299px) {
  .l-section.us_custom_e872a85d {
    margin-top: -204px !important;   /* -150px Basis-Pull + 54px Kompensation fuer hoeheren Mobile-Header */
  }
}

@media (orientation: landscape) and (max-height: 650px) and (min-width: 768px) {
  .l-section.us_custom_e872a85d {
    margin-top: -142px !important;  /* Issue #43 (Nicolle 28.07.): war -90px, Gap blieb ~95px; -142px => ~43px wie mobil */
  }
}

/* ---------------------------------------------------------
   Issue #43 (Nicolle 28.07.2026): Auch am Desktop klafft
   zwischen Hero-Foto und H1 "Willkommen bei Dir selbst"
   ~91px (Basis-Pull nur -30px aus dem Shortcode). Auf den
   mobilen Ziel-Abstand ~43px nachziehen. Die Landscape-
   Regel oben (flache Viewports) steht danach und gewinnt
   dort weiterhin.
   --------------------------------------------------------- */
@media (min-width: 1180px) and (min-height: 651px) {
  .l-section.us_custom_e872a85d {
    margin-top: -78px !important;   /* war -30px; Gap 91px -> ~43px (Button-Reihe 1-zeilig) */
  }
}
/* 768–1199px: Hero-Buttons brechen 2-zeilig um (gemessen: Wrap zwischen
   1190 und 1200px) -> Hero-Section 64px hoeher -> staerkerer Pull noetig */
@media (min-width: 768px) and (max-width: 1179px) and (min-height: 651px) {
  .l-section.us_custom_e872a85d {
    margin-top: -142px !important;  /* Gap 107px -> ~43px (Button-Reihe 2-zeilig) */
  }
}

/* ---------------------------------------------------------
   Issue #34: Titelbild-Slider Einzelsessions/Yogatherapie.
   Referenz (gemessen): Yogakurs-Seite "Yogakurse - alle Level"
   (offene-kurse, ID 597) hat einen echten Impreza-Slider
   (.w-slider), Hoehe MOBIL 380px, DESKTOP 380px (bereits an
   Punkt-1-Fix 2026-06-25 angeglichen, siehe .page-id-597 oben).
   Einzelsessions (580/582/583) hatten seit Punkt-3-Fix
   2026-06-25 bereits Mobil 280px / Desktop 400px (siehe oben) -
   das liegt nahe an der Referenz, wird hier nicht weiter
   angefasst (kein Issue-Text verlangt eine Aenderung dort).
   Yogatherapie (532) ist NICHT in der bestehenden .page-id-580/
   582/583-Regel enthalten und hat daher noch den urspruenglichen
   has_ratio-Spacer: Mobil nur ~90-117px (Streifen), Desktop 450px.
   Nicolle will hier: mobil KLEINER als jetzt (Referenz-Level, wie
   Session-Seiten: 280px waere zu hoch fuer "Yogatherapie" lt.
   Wunsch "kleiner"), Desktop GROESSER als jetzt (>450px).
   Gewaehlt: Mobil 220px (kompakter als die 280px der Session-
   Seiten, da Yogatherapie explizit "kleiner" wuenscht), Desktop
   520px (deutlich groesser als bisherige 450px).
   --------------------------------------------------------- */
/* Issue #44 (Nicolle 28.07.2026): Yogatherapie soll dieselben
   Sliderhoehen haben wie die anderen Einzelsessions -> exakt an
   580/582/583 angleichen: Desktop 400px (war 520), Mobil 280px
   (war 220). */
.page-id-532 .w-image.has_ratio .w-image-h {
  height: 400px !important;   /* wie 580/582/583 */
}
.page-id-532 .w-image.has_ratio .w-image-h > div {
  padding-bottom: 0 !important;   /* Ratio-Spacer neutralisieren (wie 580/582/583) */
}
@media (max-width: 767px) {
  .page-id-532 .w-image.has_ratio .w-image-h {
    height: 280px !important;   /* wie 580/582/583 */
  }
}

/* ---------------------------------------------------------
   Issue #35: Kacheln (Yogakurse + Einzelsessions) auf den
   Einzelsession-/Yogatherapie-Unterseiten sind mobil schmaler
   als auf der Startseite. Ursache (DOM-Vergleich Startseite vs.
   Unterseiten): Auf den Unterseiten sitzt die Session-Kachel-Row
   (.hmst-grid) in einer VERSCHACHTELTEN WPBakery-Row-in-Row-
   Struktur; die AEUSSERE `.vc_column-inner` traegt zusaetzlich
   `padding: 0 15px`, die auf der Startseite in dieser Form nicht
   existiert. Effekt: Kachel-Container ist auf Unterseiten pro
   Seite 15px (insgesamt 30px) schmaler. Gemessen bei 290px:
   Startseite-Kachel 242px breit, Unterseiten-Kachel nur 212px.
   Fix: das zusaetzliche Padding der aeusseren Column-Inner exakt
   auf den vier betroffenen Seiten neutralisieren (0), dadurch
   ruecken die Kacheln auf die gleiche effektive Breite wie auf
   der Startseite. Selektor zielt nur auf die Column-Inner, die
   die Session-Kachel-Row (.g-cols.cols_3:has(.hmst-card)) direkt
   umschliesst, damit andere Inhalte auf denselben Seiten
   unberuehrt bleiben.
   --------------------------------------------------------- */
.page-id-580 .vc_column-inner:has(> .g-cols.cols_3 .hmst-card),
.page-id-582 .vc_column-inner:has(> .g-cols.cols_3 .hmst-card),
.page-id-583 .vc_column-inner:has(> .g-cols.cols_3 .hmst-card),
.page-id-532 .vc_column-inner:has(> .g-cols.cols_3 .hmst-card) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Issue #45 (Nicolle 28.07.2026): Gleiche Ursache auf den vier
   YOGAKURS-Unterseiten (597/598/599/600) — dort heissen die
   Kacheln aber .hmct-card (course tiles), daher griff der
   #35-Fix oben nicht. Gemessen bei 375px: Startseite 312px,
   Kursseite nur 282px (2x15px Padding der aeusseren
   vc_column-inner). Selektor analog #35. */
.page-id-597 .vc_column-inner:has(> .g-cols.cols_3 .hmct-card),
.page-id-598 .vc_column-inner:has(> .g-cols.cols_3 .hmct-card),
.page-id-599 .vc_column-inner:has(> .g-cols.cols_3 .hmct-card),
.page-id-600 .vc_column-inner:has(> .g-cols.cols_3 .hmct-card) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------------------------------------------------------
   Issue #36: Graue Ankertitel kleben bei grosser Systemschrift
   (kleine effektive Breite, z.B. 290px) weiter am Header, weil
   der bestehende Mobil-Wert scroll-margin-top:100px (siehe
   Block oben, Punkt 7 vom 25.06.) bei sehr grosser Schrift/
   hoeherem Header nicht mehr ausreicht. Fix: fuer sehr schmale
   Viewports (<=320px, deckt die genannten ~290px ab) den
   scroll-margin-top auf 140px anheben - identisch zum
   Desktop-Wert, damit auch bei gewachsenem Mobile-Header genug
   Luft zum Header bleibt.
   --------------------------------------------------------- */
@media (max-width: 320px) {
  #yogakurse,
  #einzelsessions,
  #events,
  #verlag {
    scroll-margin-top: 140px !important;
  }
}

/* ---------------------------------------------------------
   Issue #37: Brevo-Newsletter-Iframe – bei grosser System-
   schrift wird der "Anmelden"-Button unten abgeschnitten.
   Ist-Zustand (siehe .hm-nl-frame oben): 560px Hoehe ab
   <=400px Breite, gemessen bei Standard-Schriftgroesse reicht
   das (Formularinhalt braucht dort ~540px). Bei vergroesserter
   Systemschrift (nicht per Browser-Zoom simulierbar, da das
   Brevo-Formular als Cross-Origin-Iframe unter sibforms.com
   laeuft) wachsen Label-/Fehlertexte im Formular und brauchen
   mehr Platz. Fix: defensiven Puffer ergaenzen - bei <=400px
   Breite von 560px auf 640px, bei <=300px (deckt die genannten
   ~290px ab) zusaetzlich auf 700px, damit der Button auch bei
   deutlich vergroesserter Schrift sichtbar bleibt.
   --------------------------------------------------------- */
@media (max-width: 400px) {
  .hm-nl-frame {
    height: 640px !important;   /* war 560px */
  }
}
@media (max-width: 300px) {
  .hm-nl-frame {
    height: 700px !important;
  }
}

/* ---------------------------------------------------------
   Issue #39: Startseite – Abstand zwischen Ankertitel
   "Einzelsessions" (#einzelsessions) und den Kacheln darunter
   zu gross (~160px). Ursache: .page-id-20 .vc_custom_heading
   hat pauschal margin-bottom:1.5rem (siehe Punkt-29-Fix oben);
   zusaetzlich traegt die Section selbst padding-bottom via
   .l-section-h (3.5rem Desktop / 2rem Mobil aus demselben Fix)
   auf der einen Seite und padding-top auf der Kachel-Section auf
   der anderen Seite - das addiert sich zum gemessenen ~160px-
   Abstand. Fix: gezielt fuer die H1 "Einzelsessions" den
   margin-bottom reduzieren, Ziel-Abstand aehnlich wie bei
   "Yogakurse" (dort steht keine eigene Section direkt darunter,
   sondern die Kachel-Row in derselben Section - daher der
   sichtbare Unterschied). #einzelsessions liegt auf der H1 selbst
   (id-Attribut direkt am H1), daher Direktselektor ausreichend.
   --------------------------------------------------------- */
.page-id-20 h1.us_custom_e0c614f5#einzelsessions {
  margin-bottom: 0.5rem !important;   /* war 1.5rem aus der generischen .vc_custom_heading-Regel */
}
@media (max-width: 767px) {
  .page-id-20 h1.us_custom_e0c614f5#einzelsessions {
    margin-bottom: 0.25rem !important;
  }
}

/* ---------------------------------------------------------
   Issue #40: Event-Kacheln heller machen, analog zur hellen
   Yogakurs-/Einzelsession-Optik (.hmct-overlay-light-band /
   .kachel-overlay-Muster: heller Balken unten, grauer Text
   #666 statt Weiss). Event-Kacheln laufen ueber
   .hmst-grid.hmst-events (siehe Issue-#17-Block oben, der dort
   bewusst einen DURCHGEHENDEN dunklen Verlauf + weissen Text
   eingefuehrt hat, weil ein reiner unterer Balken bei langen
   Titeln/Hover unlesbar wurde). Hier NICHT den #17-Fix loeschen,
   sondern gezielt ueberschreiben: heller unterer Balken (analog
   .hmst-layer Standard-Stil, rgba(255,255,255,.88)) statt
   dunklem Verlauf, Text in der Marken-Textfarbe #666 mit
   dezentem hellen Text-Shadow fuer Kontrast auf Fotos.
   --------------------------------------------------------- */
/* DYNAMISCHE Balkenhoehe (Nicolle #40, 14.07.): Ein fester Prozent-Balken
   (45%/62%) passt nie zu variabler Titellaenge -> zweizeilige Titel ragen
   ueber den Balken ins Foto (grau auf bunt = unlesbar). Loesung: NICHT mehr
   den absoluten .hmst-layer als Balken benutzen, sondern dem Text-Container
   (.hmst-content) selbst den hellen Hintergrund geben. Der waechst
   automatisch mit dem Inhalt mit -> egal ob ein-, zwei- oder dreizeilig,
   der helle Kasten umschliesst IMMER genau Titel + Datum. Der alte
   .hmst-layer wird dabei unsichtbar geschaltet. */
.hmst-grid.hmst-events .hmst-layer {
  background: transparent !important;
}
.hmst-grid.hmst-events .hmst-content {
  background: rgba(255, 255, 255, .90);
  border-bottom-left-radius: var(--hmst-radius);
  border-bottom-right-radius: var(--hmst-radius);
  padding-top: 14px;
  transition: background .3s ease;
  /* Einheitliche Kastenhoehe: Ein-/zweizeilige Titel bekommen so denselben
     hellen Kasten wie zweizeilige -> in einer Reihe buendige Unterkanten,
     ruhiges Bild. min-height deckt "zwei Zeilen Titel + Datum" ab; echte
     dreizeilige Titel (z.B. Retreat) wachsen nur minimal darueber hinaus.
     justify-content:flex-end haelt Titel+Datum am unteren Kastenrand. */
  box-sizing: border-box;
  min-height: 108px; /* Fallback fuer Browser ohne subgrid */
  justify-content: flex-end;
}

/* GLEICH HOHER KASTEN JE REIHE (Thomas 14.07., 2. Runde): min-height allein
   versagt, sobald ein dreizeiliger Titel (Retreat) neben zweizeiligen steht —
   und die Sortierung aendert sich jetzt per Drag&Drop staendig. Loesung ohne
   JS: CSS subgrid. Jede Kachel spannt 2 Grid-Reihen (Foto flexibel, Kasten
   auto); die Kasten-Reihe wird vom Grid ueber alle Kacheln derselben Reihe
   gemeinsam bemessen -> Kastenhoehe = laengster Titel der Reihe, Unterkanten
   buendig, automatisch bei jeder neuen Sortierung/jedem neuen Event. */
@supports (grid-template-rows: subgrid) {
  .hmst-grid.hmst-events {
    /* Fotoreihe mit fester Mindesthoehe (Thomas 14.07.: Kacheln etwas hoeher).
       Kachelhoehe = Fotoreihe + Kastenreihe. Die Kastenhoehe wird per
       Footer-JS ueber ALLE Kacheln angeglichen (= laengster Titel gesamt),
       damit ist auch die Gesamt-Kachelhoehe ueberall identisch. */
    grid-auto-rows: minmax(150px, 1fr) auto;
  }
  .hmst-grid.hmst-events .hmst-card {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    align-items: stretch;
  }
  .hmst-grid.hmst-events .hmst-content {
    grid-row: 2;
    min-height: 0;
  }
}

.hmst-grid.hmst-events .hmst-title,
.hmst-grid.hmst-events .hmst-subtitle {
  color: #666 !important;
  text-shadow: none !important;
}

/* Hover: hellen Text-Kasten ausblenden, Foto frei -> Text weiss mit Schatten,
   wie bei den Kurs-/Session-Kacheln (kein dunkler Verlauf — Nicolle wollte
   das schwarze Overlay nicht). */
.hmst-grid.hmst-events .hmst-card:hover .hmst-content,
.hmst-grid.hmst-events .hmst-card:focus-visible .hmst-content {
  background: transparent;
}
.hmst-grid.hmst-events .hmst-card:hover .hmst-layer,
.hmst-grid.hmst-events .hmst-card:focus-visible .hmst-layer {
  opacity: 0 !important;
}

.hmst-grid.hmst-events .hmst-card:hover .hmst-title,
.hmst-grid.hmst-events .hmst-card:focus-visible .hmst-title,
.hmst-grid.hmst-events .hmst-card:hover .hmst-subtitle,
.hmst-grid.hmst-events .hmst-card:focus-visible .hmst-subtitle {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55) !important;
}