/* ==========================================================================================
   Meininghaus - OnPage Composer portlets on the start page and the fluid content pages
   The pages are imported by plugins/mh_setup/Opc/PageImporter.php; this file makes the portlet
   wrappers JTL adds render exactly like the plain HTML in content/*.html did. Values copied from
   meininghaus-shop.css (do not edit that file for OPC issues - edit this one).

   Portlet markup (JTL OPC, final output):
     Container -> <div class="container-fluid opc-Container mh-sec …" style="position:relative">
                    <div style="position: relative;"> …children… </div>
                  </div>
     Heading   -> <h2 style="text-align:left|center" class="mh-h2">…</h2>
     Text      -> <div class="{custom class}"> …html… </div>
     Image     -> <div style="max-width:{w}px; margin…" class="{custom class}"><img class="img-fluid w-100 …"></div>
     Button    -> <div class="opc-Button mh-button" style="text-align:left"><a class="btn btn-primary">…</a></div>
   ========================================================================================== */

/* --- Container: behave like a plain <div> ----------------------------------------------- */
/* Bootstrap's .container-fluid pads 15px on both sides; the sections pad themselves (.mh-sec__in) */
.mh-page--fluid .opc-Container.container-fluid:not(.mh-sec__in) { padding-left: 0; padding-right: 0; }
/* the inner wrapper JTL renders around the children must not break flex/grid layouts
   (.mh-two, .mh-split2, .mh-konzept, .mh-quote-band, .mh-vorteil …): children take part directly.
   In the editor preview the wrapper is the drop area (.opc-area) and keeps its box. */
.mh-page--fluid .opc-Container > div:not(.opc-area) { display: contents; }

/* wrapper <div> around .mh-mitarbeiter / .mh-unterkunft-card / .mh-vorteil / .mh-langhaarbild is now a
   Container -> same flex grid as ".mh-sec__in > div:has(> .mh-mitarbeiter)" in meininghaus-shop.css */
.mh-page--fluid .opc-Container:has(> div > .mh-mitarbeiter),
.mh-page--fluid .opc-Container:has(> div > .mh-unterkunft-card),
.mh-page--fluid .opc-Container:has(> div > .mh-langhaarbild) {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 35px 3%;
}

/* ---- Überschrift portlets without a CSS class get the site's content headline styles -------------
   (Oxygen classes .h1 / .h2 / .h3 of meininghaus.de). Editors just pick the level:
   1 = Seitenüberschrift (30px, Versalien), 2 = Abschnitt (22px, fett, Versalien), 3 = Unterüberschrift (18px) */
/* Oxygen default h1 (h1,h2,…{font-size:36px;font-weight:600;color:#820924}): e.g. "Alle Classic Seminare im Überblick" */
.mh-page--fluid h1:not([class*="mh-"]) {
  font-family: var(--mh-font-heading); font-size: 36px; font-weight: 600; line-height: 1.15;
  text-transform: none; color: #820924; margin: 0; hyphens: auto;
}
.mh-page--fluid h2:not([class*="mh-"]) {
  font-family: var(--mh-font-heading); font-size: 22px; font-weight: 700; line-height: 1.6; letter-spacing: 0.2px;
  text-transform: uppercase; color: #820924; margin: 5px 0;
}
.mh-page--fluid h3:not([class*="mh-"]) {
  font-family: var(--mh-font-heading); font-size: 18px; font-weight: 400; line-height: 1.4;
  text-transform: none; color: #820924; margin: 20px 0 10px;
}
.mh-page--fluid h4:not([class*="mh-"]),
.mh-page--fluid h5:not([class*="mh-"]),
.mh-page--fluid h6:not([class*="mh-"]) {
  font-family: var(--mh-font-heading); font-size: 16px; font-weight: 700; line-height: 1.4; color: #820924; margin: 15px 0 5px;
}
.mh-page--fluid :is(h1, h2, h3):not([class*="mh-"]) b,
.mh-page--fluid :is(h1, h2, h3):not([class*="mh-"]) strong { font-weight: 700; }
/* headings inside the dark bands stay readable */
.mh-page--fluid .mh-sec--brand :is(h1, h2, h3, h4):not([class*="mh-"]),
.mh-page--fluid .mh-nachhaltigkeit :is(h1, h2, h3, h4):not([class*="mh-"]) { color: #fff; }

/* team page intro: two text portlets side by side (see .mh-teamintro__cols in meininghaus-shop.css) */
.mh-page--fluid .opc-Container.mh-teamintro__cols > div > * { width: 49%; text-align: justify; }
@media (max-width: 991px) { .mh-page--fluid .opc-Container.mh-teamintro__cols > div > * { width: 100%; } }

/* child rules of meininghaus-shop.css (".mh-two > *", ".mh-logos > *") now address the grandchildren */
.mh-page--fluid .opc-Container.mh-two > div > * { width: 48%; }
.mh-page--fluid .opc-Container.mh-logos > div > * { width: 8%; text-align: center; }
@media (max-width: 991px) { .mh-page--fluid .opc-Container.mh-logos > div > * { width: 100%; } }
@media (max-width: 767px) { .mh-page--fluid .opc-Container.mh-two > div > * { width: 100%; } }

/* background images (team image, staff portraits, hotel cards) are set inline by the Container portlet */
.mh-page--fluid .opc-Container.mh-bg,
.mh-page--fluid .opc-Container.mh-team-img,
.mh-page--fluid .opc-Container.mh-mitarbeiter__img,
.mh-page--fluid .opc-Container.mh-unterkunft-card__img,
.mh-page--fluid .opc-Container.mh-langhaarbild { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }

/* --- Image portlet ---------------------------------------------------------------------- */
/* extracted "Vorteile" icons (images/icons/*.svg) instead of inline <svg>: the portlet wrapper carries the
   class and the <img> is "w-100 !important", so the size goes on the wrapper (was: svg 80x80) */
.mh-page--fluid .mh-vorteil__icon { width: 80px; max-width: 100%; }
.mh-page--fluid .mh-vorteil__icon img { height: 80px; display: block; }
/* partner logos / card grids: the portlet wrapper takes the place of the old <div>/<a> */
.mh-page--fluid .mh-logos > .opc-Image,
.mh-page--fluid .mh-logos > div { max-width: 100%; }
.mh-page--fluid .mh-cards > div { flex: 0 1 auto; }
.mh-page--fluid .mh-konzept__img img { display: block; }

/* --- Button portlet: <a class="btn btn-primary"> inside <div class="opc-Button mh-button"> ---- */
/* the wrapper carries the mh-* class -> neutralise the button look on the wrapper … */
.mh-page--fluid .opc-Button.mh-button,
.mh-page--fluid .opc-Button.mh-button-cta,
.mh-page--fluid .opc-Button.mh-slider__button {
  display: block; padding: 0; margin: 0; border: 0; background: none; color: inherit; font-size: inherit;
  letter-spacing: normal; text-transform: none; white-space: normal; transition: none; transform: none;
}
.mh-page--fluid .opc-Button.mh-button:hover,
.mh-page--fluid .opc-Button.mh-button-cta:hover,
.mh-page--fluid .opc-Button.mh-slider__button:hover { transform: none; }
/* … and apply it to the <a> (values = .mh-button in meininghaus-shop.css) */
.mh-page--fluid .opc-Button.mh-button .btn,
.mh-page--fluid .opc-Button.mh-button .btn:focus,
.mh-page--fluid .opc-Button.mh-button .btn:active {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mh-font-body); font-size: 20px; font-weight: 400; letter-spacing: 0.8px;
  text-transform: uppercase; text-align: center; line-height: 1.5;
  color: #fff; background: #820924; border: 2px solid #fff; border-radius: 0; box-shadow: none;
  padding: 15px; text-decoration: none; transition: transform 0.3s;
}
.mh-page--fluid .opc-Button.mh-button .btn:hover { color: #fff; background: #820924; border-color: #fff; text-decoration: none; transform: rotate(-1deg); }
/* Goethe band: the wrapper is the 25 % flex item (.mh-quote-band .mh-button), the button fills it */
.mh-page--fluid .mh-quote-band .opc-Button.mh-button .btn { width: 100%; }

/* CTA button with white frame (values = .mh-button-cta) */
.mh-page--fluid .opc-Button.mh-button-cta .btn,
.mh-page--fluid .opc-Button.mh-button-cta .btn:focus {
  display: inline-flex; align-items: center; padding: 10px 15px; border: 2px solid #fff; border-radius: 0;
  background: transparent; box-shadow: none; color: #fff; font-size: inherit; font-weight: 400;
  text-transform: uppercase; text-decoration: none !important; transition: transform 0.3s;
}
.mh-page--fluid .opc-Button.mh-button-cta .btn:hover { color: #fff; background: transparent; transform: rotate(-2deg); }

/* slider-style button outside the hero slider, e.g. "Update Education" (values = .mh-slider__button) */
.mh-page--fluid .opc-Button.mh-slider__button .btn,
.mh-page--fluid .opc-Button.mh-slider__button .btn:focus {
  display: inline-flex; align-items: center; margin-left: 30px; padding: 15px;
  font-family: var(--mh-font-body); font-size: 40px; font-weight: 400; letter-spacing: 2px; line-height: 1.6;
  text-transform: uppercase; color: #fff; background: #820924; border: 2px solid #fff; border-radius: 0;
  box-shadow: none; text-decoration: none; white-space: nowrap; transition: transform 0.3s;
}
.mh-page--fluid .opc-Button.mh-slider__button .btn:hover { color: #fff; background: #820924; transform: scale3d(1.01, 1.01, 1.01); }

/* --- Heading / Text portlets --------------------------------------------------------------- */
/* the Heading portlet writes text-align inline (left/center as imported); nothing else to fix.
   Text portlets render a bare <div class="…"> = the original wrapper, no extra spacing. */
.mh-page--fluid .mh-sec--brand .opc-Button.mh-button .btn { color: #fff; }