/* ==========================================================================================
   Meininghaus - OnPage Composer portlets on the seminar (product) pages
   Makes the portlets written by plugins/mh_setup/Opc/CoursePages.php look identical to the
   template markup in productdetails/details.tpl. Values copied from meininghaus-shop.css.

   Portlet markup (JTL OPC):
     Text portlet   ->  <div class="mh-opc-h2"><h2 class="mh-h2-details">…</h2></div>
                        <div class="mh-aufzaehlung"><ul>…</ul></div>        (styled by meininghaus-shop.css)
                        <div class="mh-product__desc"><p>…</p></div>         (styled by meininghaus-shop.css)
     Button portlet ->  <div class="opc-Button mh-pdf-button" style="text-align: left">
                          <a class="btn btn-primary …"><span class="opc-Icon opc-Icon-far">…</span> Anmeldeformular</a>
                        </div>
   ========================================================================================== */

/* --- spacing between the blocks (like .mh-product__col .mh-h2-details) ---------------------
   The heading sits inside its own portlet wrapper, so :first-child has to be tested on the wrapper. */
.mh-product__col .mh-opc-h2 .mh-h2-details { margin-top: 30px; }
.mh-product__col .mh-opc-h2:first-child .mh-h2-details,
.mh-product__col .opc-area > .mh-opc-h2:first-child .mh-h2-details { margin-top: 0; }

/* --- PDF button (Anmeldeformular) --------------------------------------------------------
   The wrapper div carries the custom class as well - neutralise the .mh-pdf-button anchor styles on it
   and move them to the inner .btn. */
.opc-Button.mh-pdf-button {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  transition: none;
}
.opc-Button.mh-pdf-button:hover { transform: none; }

.opc-Button.mh-pdf-button .btn,
.opc-Button.mh-pdf-button .btn:focus,
.opc-Button.mh-pdf-button .btn:active {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  padding: 10px 15px;
  border: 2px solid #820924;
  border-radius: 0;
  background: transparent;
  color: #820924;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none !important;
  box-shadow: none;
  transition: transform 0.3s;
}
.opc-Button.mh-pdf-button .btn:hover {
  transform: rotate(-2deg);
  background: transparent;
  border-color: #820924;
  color: #820924;
}
/* icon (<span class="opc-Icon">) like <i class="far fa-file-pdf"> + <span> in the template */
.opc-Button.mh-pdf-button .btn .opc-Icon {
  font-size: 25px;
  line-height: 1;
  margin-right: 10px;
}

/* --- OPC edit mode: keep the column layout readable while the areas are drop targets ------- */
.mh-product__col .opc-area,
.mh-product__intro-text .opc-area { min-height: 40px; }

/* ---- interim course landing pages /kurs-<slug> (plugins/mh_setup/Opc/CourseLandingPages.php) ---- */
.mh-kurs .mh-kurs__title h1 { margin-bottom: 15px; }
.mh-kurs .mh-kurs__intro { margin-bottom: 40px; }
.mh-kurs .mh-kurs__image img { width: 100%; height: auto; }
.mh-kurs .mh-opc-h2 .mh-h2-details { margin-top: 30px; }
.mh-kurs .mh-kurs__grid > div:first-child .mh-opc-h2:first-child .mh-h2-details { margin-top: 0; }
.mh-kurs__box .mh-h2-details { margin-bottom: 8px; }
.mh-kurs__price { font-size: 20px; font-weight: 700; color: #000; margin: 0; line-height: 1.6; }
.mh-kurs__vat { font-size: 12px; color: #000; margin: 0 0 10px; }
.mh-kurs__dates { list-style: none; margin: 0; padding: 0; }
.mh-kurs__dates li {
  display: block; margin: 10px 0 0; padding: 10px 20px; background: #f4f4f4; border: 1px solid #d3ced2;
  color: #000; font-size: 13px; text-align: center;
}
.mh-kurs__hint { font-size: 12px; color: #666; margin: 15px 0 0; }
.opc-Button.mh-kurs__cta .btn {
  display: flex; width: 100%; justify-content: center; margin-top: 10px; padding: 16px 24px; border-radius: 0;
  font-size: 12px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #fff;
  background: #666; border: 1px solid #666; box-shadow: none;
}
.opc-Button.mh-kurs__cta .btn:hover { background: #999; border-color: #999; color: #fff; }
.mh-kurs__band.opc-Container { padding: 0; }
.mh-kurs__band .mh-cta__inner { display: block; max-width: 1120px; margin: 0 auto; padding: 60px 20px; }
.mh-kurs__band .row { align-items: center; }
.opc-Button.mh-cta__button { border: 0; padding: 0; transform: none; text-align: right; }
.opc-Button.mh-cta__button .btn {
  display: inline-flex; align-items: center; padding: 10px 15px; border: 2px solid #fff; border-radius: 0;
  color: #fff; background: transparent; font-size: 15px; font-weight: 400; text-transform: uppercase; box-shadow: none;
  transition: transform 0.3s;
}
.opc-Button.mh-cta__button .btn:hover { color: #fff; background: transparent; border-color: #fff; transform: rotate(-2deg); }

/* ==========================================================================================
   Course specific extra sections
   Source: <!-- area: opc_after_intro | opc_after_gallery | opc_after_dates | opc_after_newsletter | opc_before_cta |
   opc_after_testimonials --> blocks in templates/NOVAChild/content/kurse/<slug>.html (generated by
   _local/extract_kurse.php), converted by HtmlConverter (plugins/mh_setup/Opc/CoursePages.php +
   CourseLandingPages.php). Values copied from the Oxygen css of the original pages (ids noted).

   Markup after conversion (final output):
     <div class="container-fluid opc-Container mh-sec mh-kurs-extra mh-kurs-extra--<name> [mh-sec--alt] [mh-kurs-pt0 …]">
       <div style="position:relative">                                     (display: contents)
         <div class="container-fluid opc-Container mh-sec__in"><div>       (padding 75px 20px, max 1120px)
           <h2 class="mh-h2-details" style="text-align:left">…</h2>        Heading portlet
           <div class="opc-Container mh-kurs-cols[ mh-kurs-cols--grid3]"><div>   flex row / grid
             <div class="opc-Container mh-kurs-col mh-kurs-col--w30 [mh-center]"><div> … </div></div>
             …or, without headings/images inside: <div class="mh-kurs-col mh-kurs-col--w30"> … </div>  (Text portlet)
           <div class="mh-kurs-img--full" style="max-width:…px"><img class="img-fluid …"></div>          Image portlet
   Sidebar blocks (opc_after_dates / opc_after_newsletter / opc_after_gallery) carry mh-kurs-aside.
   ========================================================================================== */

/* --- Container portlets behave like plain <div>s on the product page (meininghaus-opc.css does the same for
       fluid pages). Bootstrap's .container-fluid pads 15px, the sections pad themselves (.mh-sec__in). --- */
.mh-product .opc-Container.container-fluid:not(.mh-sec__in) { padding-left: 0; padding-right: 0; }
.mh-product .opc-Container > div:not(.opc-area) { display: contents; }

/* --- section paddings (Oxygen: #section-… > .ct-section-inner-wrap padding-top/-bottom; default 75px) --- */
.mh-kurs-extra.mh-kurs-pt0   .mh-sec__in { padding-top: 0; }
.mh-kurs-extra.mh-kurs-pt15  .mh-sec__in { padding-top: 15px; }
.mh-kurs-extra.mh-kurs-pt30  .mh-sec__in { padding-top: 30px; }
.mh-kurs-extra.mh-kurs-pt50  .mh-sec__in { padding-top: 50px; }
.mh-kurs-extra.mh-kurs-pt60  .mh-sec__in { padding-top: 60px; }
.mh-kurs-extra.mh-kurs-pt100 .mh-sec__in { padding-top: 100px; }
.mh-kurs-extra.mh-kurs-pb0   .mh-sec__in { padding-bottom: 0; }
.mh-kurs-extra.mh-kurs-pb15  .mh-sec__in { padding-bottom: 15px; }
.mh-kurs-extra.mh-kurs-pb30  .mh-sec__in { padding-bottom: 30px; }
.mh-kurs-extra.mh-kurs-pb50  .mh-sec__in { padding-bottom: 50px; }
.mh-kurs-extra.mh-kurs-pb60  .mh-sec__in { padding-bottom: 60px; }
.mh-kurs-extra.mh-kurs-pb100 .mh-sec__in { padding-bottom: 100px; }

/* --- text inside the extra sections (Oxygen rich text / .aufzaehlung) --- */
.mh-kurs-extra { font-size: 15px; line-height: 1.6; color: #000; text-align: left; }
.mh-kurs-extra p { margin: 0 0 1em; }
.mh-kurs-extra p:last-child { margin-bottom: 0; }
.mh-kurs-extra ul:not(.mh-kurs-iconbox) { list-style: none; padding: 0; margin: 0 0 20px; }
.mh-kurs-extra ul:not(.mh-kurs-iconbox) li { padding-left: 1em; text-indent: -0.8em; color: #3c3c3b; margin-bottom: 3px; }
.mh-kurs-extra ul:not(.mh-kurs-iconbox) li::before { content: "\25A0  "; color: #820924; }
.mh-kurs-extra .mh-h2-details { margin: 0 0 15px; }                    /* #_rich_text-886-2087 … follow with margin-bottom 25px */
/* .h2-small (Meisterkurs sub sections): uppercase 25px, line-height 1.4, margin-bottom 10px */
.mh-kurs-h3, .mh-product .mh-kurs-h3, .mh-aufzaehlung .mh-kurs-h3 {
  font-family: var(--mh-font-heading); font-size: 25px; font-weight: 600; line-height: 1.4;
  text-transform: uppercase; color: #820924; margin: 0 0 10px; padding: 0;
}
.mh-aufzaehlung .mh-kurs-h3:not(:first-child) { margin-top: 25px; }   /* rich text blocks: margin-bottom 25px */
/* plain <h2> of an extra section (event pages): Oxygen h2 default */
.mh-kurs-h2, .mh-product .mh-kurs-h2 {
  font-family: var(--mh-font-heading); font-size: 30px; font-weight: 600; line-height: 1.2; color: #820924; margin: 0 0 15px;
}
/* bold paragraph at the top of a column ("Sicherheit", "Sicherer arbeiten") = sub heading in body size */
.mh-kurs-subhead, .mh-product .mh-kurs-subhead, .mh-aufzaehlung .mh-kurs-subhead {
  font-family: var(--mh-font-body); font-size: 15px; font-weight: 700; line-height: 1.6; color: #000;
  text-transform: none; margin: 0 0 1em;
}
/* .h3 heading of a sidebar block ("massgeschneiderte Betreuung"): 18px, weight 400, centred, burgundy */
.mh-kurs-h3-light, .mh-product .mh-kurs-h3-light {
  font-family: var(--mh-font-heading); font-size: 18px; font-weight: 400; line-height: 1.6; text-transform: none;
  text-align: center; color: #820924; margin: 20px 0 10px;
}
.mh-kurs-h3-light strong { font-weight: 700; }
/* note under a block (price note "zzgl. Übungskopf …": #text_block-1082-3503 font-size 12px) */
.mh-kurs-note { font-size: 12px; color: #000; margin-top: 10px; }

/* --- links: Oxygen link buttons (#link-966-2087 …: 2px burgundy frame, padding 10px 15px, rotate on hover) and
       plain text links (#text_block-730-2038: italic burgundy) --- */
.mh-kurs-extra .mh-kurs-link, .mh-aufzaehlung .mh-kurs-link {
  display: inline-flex; align-items: center; margin: 0 0 8px; padding: 10px 15px; border: 2px solid #820924;
  color: #820924; text-decoration: none !important; transition: transform 0.3s;
}
.mh-kurs-extra .mh-kurs-link:hover, .mh-aufzaehlung .mh-kurs-link:hover { transform: rotate(-2deg); color: #820924; }
.mh-kurs-textlink a { font-style: italic; color: #820924; }

/* --- columns: Oxygen flex rows (#div_block-716-2038: display flex, justify-content space-between, children 30 %;
       #div_block-1177-2087: 60 % / 35 %; #div_block-1223-2087: 20 / 30 / 40 %) and grids (#div_block-726-2038:
       repeat(3, minmax(200px, 1fr)) gap 40px/20px; #div_block-689-2083: repeat(4, …)) --- */
.mh-kurs-cols { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%; }
.mh-kurs-cols + .mh-kurs-cols { margin-top: 50px; }                    /* rows: margin-bottom 50px */
.mh-kurs-extra .mh-h2-details + .mh-kurs-cols, .mh-kurs-extra p + .mh-kurs-cols { margin-top: 51px; }   /* #div_block-626-2947 */
.mh-kurs-extra--cols .mh-kurs-cols { margin-top: 65px; }               /* #div_block-716-2038 */
.mh-kurs-col { min-width: 0; width: 100%; }
.mh-kurs-col--w20 { width: 20%; }
.mh-kurs-col--w30 { width: 30%; }
.mh-kurs-col--w31 { width: 31%; }
.mh-kurs-col--w35 { width: 35%; }
.mh-kurs-col--w40 { width: 40%; }
.mh-kurs-col--w48 { width: 48%; }
.mh-kurs-col--w50 { width: 50%; }
.mh-kurs-col--w58 { width: 58%; }
.mh-kurs-col--w60 { width: 60%; }
.mh-kurs-col--w65 { width: 65%; }
.mh-kurs-cols--grid2, .mh-kurs-cols--grid3, .mh-kurs-cols--grid4 {
  display: grid; column-gap: 40px; row-gap: 20px; align-items: stretch; justify-content: space-between;
}
.mh-kurs-cols--grid2 { grid-template-columns: repeat(2, minmax(200px, 1fr)); column-gap: 50px; }
.mh-kurs-cols--grid3 { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
.mh-kurs-cols--grid4 { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
/* 3-column grid whose first cell spans two columns (#section-693-2087 > .ct-section-inner-wrap > :nth-child(1)) */
.mh-kurs-cols--grid3 .mh-kurs-col--span2 { grid-column: span 2; }
.mh-kurs-cols--grid2 .mh-kurs-col, .mh-kurs-cols--grid3 .mh-kurs-col, .mh-kurs-cols--grid4 .mh-kurs-col { width: auto; min-width: 0; }
/* centred columns (testimonial grid #div_block-727-2038: text-align center, align-items center) */
.mh-kurs-col.mh-center { text-align: center; }
.mh-kurs-col.mh-center > div[style*="max-width"] { margin-left: auto; margin-right: auto; }

/* --- images (Image portlet: the wrapper <div> carries the class, the <img> is fluid) --- */
.mh-kurs-img--full { width: 100%; }
.mh-kurs-img--full img { width: 100%; height: auto; display: block; }
.mh-kurs-img--w60 { width: 60%; }                                      /* #image-728-2038 … */
.mh-kurs-img--w50 { width: 50%; }
.mh-kurs-img--px300 { width: 300px; max-width: 100%; }                 /* #image-846-2038 */
.mh-kurs-extra--stimmen .mh-kurs-col > div[style*="max-width"] { margin-bottom: 20px; }   /* #_rich_text-729-2038 margin 20px 0 */
.mh-kurs-extra--image .mh-sec__in { padding-bottom: 75px; }

/* --- Meininghaus Professional: the four "STEP" cards = Oxygen superboxes (#_superbox-811-2083 …): 240 px cards with a
       1px burgundy frame, "STEP n" 30px/600 centred (padding 100px 0); on hover the burgundy secondary layer with the
       white centred text fades in (0.5s). Below 992px (touch) the text is shown stacked under the heading. --- */
.mh-kurs-step, .mh-product .mh-kurs-step {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 237px; height: 100%; border: 1px solid #820924; background: transparent; text-align: center; overflow: hidden;
}
.mh-kurs-step .mh-kurs-h3, .mh-product .mh-kurs-step .mh-kurs-h3, .mh-page--fluid .mh-kurs-step h3.mh-kurs-h3, .mh-product .mh-kurs-step h3.mh-kurs-h3 {
  margin: 0; padding: 100px 0; font-size: 30px !important; font-weight: 600; line-height: 1.2; color: #820924; text-transform: none; text-align: center;
}
.mh-kurs-step__text {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 20px; background: #820924; color: #fff; text-align: center; opacity: 0; transition: opacity 0.5s;
}
.mh-kurs-step:hover .mh-kurs-step__text, .mh-kurs-step:focus-within .mh-kurs-step__text, .mh-kurs-step.is-open .mh-kurs-step__text { opacity: 1; }
.mh-kurs-step__text p, .mh-kurs-step__text strong { color: #fff; font-size: 15px; line-height: 24px; }
.mh-kurs-step__text p { margin: 0 0 15px; }
.mh-kurs-step__text p:last-child { margin-bottom: 0; }
.mh-kurs-step__text p + p { margin-top: 15px; }
/* texts under the cards (#text_block-688-2083 / -839-2083): 18px centred, 51px gap, second line burgundy uppercase */
.mh-kurs-extra--steps .mh-kurs-cols ~ div > p { font-size: 18px; line-height: 1.6; text-align: center; margin: 0; }
.mh-kurs-extra--steps .mh-kurs-cols + div > p { margin-top: 51px; }
.mh-kurs-extra--steps .mh-kurs-cols ~ div > p > strong { color: #820924; text-transform: uppercase; font-weight: 700; }
@media (max-width: 991px) {
  .mh-kurs-step, .mh-product .mh-kurs-step { min-height: 0; }
  .mh-kurs-step .mh-kurs-h3, .mh-product .mh-kurs-step .mh-kurs-h3 { padding: 40px 20px; font-size: 26px !important; }
  .mh-kurs-step__text { position: static; height: auto; opacity: 1; padding: 20px; }
}
/* --- Update Education (event page, template 3098): grey #374047 headings, pill texts, icon list, partner logo --- */
.mh-kurs-page--update-education-2025 .mh-kurs-h2,
.mh-kurs-page--update-education-2025 .mh-kurs-h3 { color: #374047; }
.mh-kurs-extra--ue-claim .mh-kurs-h2 { font-size: 30px; font-weight: 600; text-align: center !important; margin: 0; }
.mh-kurs-extra--ue-facts .mh-kurs-col { text-align: center; }
.mh-kurs-extra--ue-facts .mh-kurs-col:first-child { border-right: 1px solid #374047; }     /* #div_block-81-3098 */
.mh-kurs-extra--ue-facts .mh-kurs-h3 { font-size: 36px; font-weight: 900; text-transform: none; text-align: center !important; margin: 10px 0; }
.mh-kurs-extra--ue-facts p { font-size: 24px; }                                            /* #text_block-88/92-3098 */
.mh-kurs-extra--ue-facts .mh-kurs-pill { font-size: 24px; }
.mh-kurs-extra--ue-speaker .mh-kurs-cols { border-left: 2px solid #820924; border-right: 2px solid #606e79; } /* #new_columns-102-3098 */
.mh-kurs-extra--ue-speaker .mh-kurs-col { padding: 0 25px; }
.mh-kurs-extra--ue-speaker .mh-kurs-col:first-child {                                      /* #div_block-103-3098 */
  border-top: 2px solid #820924; border-right: 2px solid #820924; border-bottom: 2px solid #820924;
  border-radius: 0 120px 120px 0; padding-bottom: 20px;
}
.mh-kurs-extra--ue-speaker .mh-kurs-h2 { font-size: 48px; font-weight: 900; }
.mh-kurs-extra--ue-speaker .mh-kurs-h3 { font-size: 24px; font-weight: 200; text-transform: none; margin: 0 0 5px; }
.mh-kurs-pill {
  display: inline-block; margin: 5px 0; padding: 5px 25px; border-radius: 25px;
  background: #373736; color: #f4f4f4; font-size: 18px; font-weight: 600; line-height: 1.6;
}
.mh-kurs-extra--ue-speaker .mh-kurs-col:last-child .mh-kurs-pill { background: #820924; display: block; }  /* #text_block-113…118 */
.mh-kurs-extra--ue-speaker .mh-kurs-col:first-child .mh-kurs-pill { background: #820924; border-radius: 0 15px 12px 0; margin-top: 20px; }
.mh-kurs-iconbox {                                                                        /* #div_block-125-3098 */
  list-style: none; width: 85%; margin: 0 auto; padding: 15px 20%; border: 1px solid #374047; border-radius: 25px; text-align: center;
}
.mh-kurs-iconbox li { font-size: 20px; font-weight: 600; line-height: 1.4; color: #374047; margin: 8px 0; text-indent: 0; padding: 0; }
.mh-kurs-iconbox li a { color: #374047; }
.mh-kurs-extra--ue-partner .mh-kurs-h2 { color: #374047; text-align: center !important; }
.mh-kurs-extra--ue-partner .mh-kurs-img--full { background: #820924; border-radius: 25px 25px 0 0; }  /* #div_block-163-3098 */
.mh-kurs-extra--ue-partner .mh-kurs-img--full img { border-radius: 25px 25px 0 0; }

/* --- sidebar blocks (right column of the product grid / landing page): "Wohnen", custom "Unterkunft",
       "massgeschneiderte Betreuung", "Termine auf Anfrage …", image caption --- */
.mh-kurs-aside .mh-sec__in, .mh-product .mh-kurs-aside .mh-sec__in { max-width: none; margin: 0; padding: 0; }
.mh-kurs-aside { width: 100%; }
.mh-kurs-aside p { margin: 0; font-size: 15px; line-height: 1.6; color: #000; }
.mh-kurs-aside .mh-h2-details { margin: 0 0 8px; }
.mh-product__buy .mh-kurs-aside { margin-top: 50px; }                  /* rhythm of the right column (#div_block-787-2038 …) */
.mh-newsletter ~ .opc-area .mh-kurs-aside,
.mh-newsletter ~ .mh-kurs-aside { margin-top: 0; }                     /* the newsletter already has margin-bottom 50px */
.mh-kurs-caption p { font-size: 15px; color: #3c3c3b; }
.mh-product__image .mh-kurs-caption { margin-top: 10px; }
/* a course specific "Unterkunft" text replaces the template's generic Unterkunft block */
.mh-product__buy:has(.mh-kurs-unterkunft) .mh-unterkunft { display: none; }

/* --- OPC edit mode: keep the mount points visible --- */
.mh-product .opc-area:has(> .mh-kurs-extra) { min-height: 0; }

/* --- responsive: Oxygen stacks the rows at 991px (Meisterkurs) / 767px (all others) --- */
@media (max-width: 991px) {
  .mh-kurs-page--meisterkurs .mh-kurs-col { width: 100% !important; }
  .mh-kurs-page--meisterkurs .mh-kurs-col + .mh-kurs-col { margin-top: 30px; }
  .mh-kurs-cols--grid4 { grid-template-columns: repeat(2, minmax(200px, 1fr)); column-gap: 20px; }
  .mh-kurs-extra--ue-speaker .mh-kurs-cols { border: 0; }
}
@media (max-width: 767px) {
  .mh-kurs-cols, .mh-kurs-cols--grid2, .mh-kurs-cols--grid3 { display: flex; flex-direction: column; }
  .mh-kurs-cols .mh-kurs-col { width: 100% !important; }
  .mh-kurs-cols .mh-kurs-col + .mh-kurs-col { margin-top: 30px; }    /* #div_block-709-2038: margin-bottom 50px */
  .mh-kurs-extra--cols .mh-kurs-cols .mh-kurs-col + .mh-kurs-col { margin-top: 50px; }
  .mh-kurs-extra .mh-sec__in { padding-top: 40px; padding-bottom: 40px; }
  .mh-kurs-extra.mh-kurs-pt0 .mh-sec__in { padding-top: 0; }
  .mh-kurs-extra.mh-kurs-pb0 .mh-sec__in { padding-bottom: 0; }
  .mh-kurs-extra--cols .mh-kurs-cols { margin-top: 30px; }
  .mh-kurs-extra--ue-facts .mh-kurs-col:first-child { border-right: 0; }
  .mh-kurs-extra--ue-speaker .mh-kurs-col:first-child { border-radius: 0; border-right: 0; }
  .mh-kurs-iconbox { width: 100%; padding: 15px 5%; }
  .mh-kurs-extra--ue-speaker .mh-kurs-h2 { font-size: 36px; }
  .mh-kurs-h3, .mh-product .mh-kurs-h3 { font-size: 22px; }
}
@media (max-width: 479px) {
  .mh-kurs-cols--grid4 { display: flex; flex-direction: column; }
}

/* --- landing page intro without image/sidebar (mh-kurs__intro--full): full width like #section-581-2034 --- */
.mh-kurs .mh-kurs__intro--full { width: 100%; margin-bottom: 40px; }
.mh-kurs .mh-kurs__intro--full .mh-product__desc { max-width: none; }
/* Teilnehmerstimmen under the interim landing pages (layout/index.tpl) */
.mh-kurs-landing__stimmen { margin-top: 0; }

/* --- Salon Performance "Ihre Vorteile auf einen Blick" (#section-624-2947): centred heading and text, three 30 %
       columns (space-between, 51px above) with a bold 15px title and centred text --- */
.mh-kurs-extra--vorteile .mh-h2-details, .mh-kurs-extra--vorteile .mh-sec__in > p, .mh-page--fluid .mh-kurs-extra--vorteile .mh-sec__in > div > p, .mh-product .mh-kurs-extra--vorteile .mh-sec__in > div > p { text-align: center; }
.mh-kurs-extra--vorteile .mh-h2-details { width: 100%; }
.mh-kurs-col.mh-center, .mh-product .mh-kurs-col.mh-center, .opc-Container.mh-kurs-col.mh-center { text-align: center; }
.mh-kurs-col.mh-center p { text-align: center; }
.mh-kurs-coltitle, .mh-product .mh-kurs-coltitle { margin: 0 0 15px; font-size: 15px; line-height: 24px; color: #000; }
.mh-kurs-coltitle strong { font-weight: 700; }
.mh-kurs-coltitle + p { margin-top: 0; }
.mh-kurs-extra--vorteile .mh-kurs-cols { margin-top: 51px; }
.mh-product .mh-h2-details .is-light, .mh-h2-details .is-light { font-weight: 400; }
@media (max-width: 767px) {
  .mh-kurs-extra--vorteile .mh-kurs-col.mh-center { width: 100%; margin-bottom: 30px; }
  .mh-kurs-extra--vorteile .mh-kurs-col.mh-center:last-child { margin-bottom: 0; }
}