/* ============================================================
 * MBM Header + Footer (Design-System: ui_kits/marketing-site/kit.css)
 * Wird nur auf Seiten mit dem Template "MBM Design" geladen.
 * ------------------------------------------------------------ */

body.mbm-design { margin: 0; font-family: var(--mbm-font-sans); overflow-x: hidden; }
body.mbm-design main img { max-width: 100%; height: auto; }
.mbm-hdr .mbm-brand-img { height: 34px; width: auto; max-width: none; }

/* Header */
.mbm-hdr{position:sticky;top:0;background:var(--mbm-red-700);z-index:100;box-shadow:0 2px 12px rgba(31,36,40,.15)}
.mbm-hdr-inner{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:24px}
.mbm-brand{display:flex;align-items:center;gap:10px;background:#fff;padding:8px 14px;border-radius:2px;text-decoration:none;flex-shrink:0}
.mbm-brand-img{height:34px;width:auto;display:block}
.mbm-nav{display:flex;gap:20px;flex:1;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.mbm-nav-item{position:relative}
.mbm-nav-a{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--mbm-font-display);color:#fff;cursor:pointer;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;opacity:.9;padding:6px 0;border-bottom:2px solid transparent;text-decoration:none}
.mbm-nav-a:hover{opacity:1;color:#fff;text-decoration:none}
.mbm-nav-a.active{opacity:1;color:#fff;border-bottom-color:#fff}
.mbm-nav-a sup{font-size:.6em}
.mbm-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.75}
.mbm-btn-sm{padding:8px 14px;font-size:13px}
.mbm-nav-check{display:none}
.mbm-nav-burger{display:none}
.mbm-nav-kontakt{display:none}

/* Dropdowns (Desktop): Hover-Panel im Design-Stil */
.mbm-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;min-width:270px;padding:10px 0;border-radius:4px;box-shadow:0 18px 44px rgba(31,36,40,.22);display:none;z-index:110}
.mbm-sub::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.mbm-nav-item:hover .mbm-sub,
.mbm-nav-item:focus-within .mbm-sub{display:block}
.mbm-sub-a{display:flex;flex-direction:column;gap:1px;padding:9px 16px;text-decoration:none;white-space:nowrap;border-radius:4px;margin:0 6px}
.mbm-sub-a .t{font:700 13px var(--mbm-font-display);color:var(--mbm-ink)}
.mbm-sub-a .d{font:400 11px var(--mbm-font-sans);color:var(--mbm-ink-3)}
.mbm-sub-a:hover{background:var(--mbm-bg-alt);text-decoration:none}
.mbm-sub-a:hover .t{color:var(--mbm-red-700)}
.mbm-sub-a.active .t{color:var(--mbm-red-700)}
.mbm-sub-a.lvl3{padding-left:30px}
.mbm-sub-a.lvl3 .t{font-weight:400;font-size:12.5px;color:var(--mbm-ink-2)}
.mbm-sub-a.lvl3:hover .t{color:var(--mbm-red-700)}
.mbm-sub-a sup{font-size:.6em}
/* Letzte Dropdowns nicht aus dem Viewport laufen lassen */
.mbm-nav-item:nth-last-child(-n+3) .mbm-sub{left:auto;right:0;transform:none}

/* Footer */
.mbm-ft{background:var(--mbm-ink);color:#C6CCD3;margin-top:64px}
.mbm-ft-inner{max-width:1200px;margin:0 auto;padding:56px 24px 32px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.mbm-ft h4{font:700 13px var(--mbm-font-sans);color:#fff;margin:0 0 10px;text-transform:uppercase;letter-spacing:.12em}
.mbm-ft a,.mbm-ft p{display:block;font:400 13px/1.8 var(--mbm-font-sans);color:#B7BFC7;text-decoration:none;margin:0}
.mbm-ft a:hover{color:#fff}
.mbm-ft-tag{font:800 18px var(--mbm-font-sans);color:#fff;margin-bottom:10px}
.mbm-ft-about p{margin:0 0 14px;max-width:420px}
.mbm-ft-phone{font:700 16px var(--mbm-font-sans);color:#fff;margin-bottom:4px}
.mbm-ft-email{color:var(--mbm-green-500)!important;font-weight:600!important}
.mbm-ft-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 24px;text-align:center;font-size:12px;color:#8A909A;max-width:1200px;margin:0 auto}
.mbm-ft-bottom a{display:inline;color:inherit}

/* ============================================================
 * Mobile Navigation (Hamburger, CSS-only)
 * ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .mbm-hdr-inner{gap:12px;padding:10px 16px}
  .mbm-brand{padding:6px 10px}
  .mbm-hdr .mbm-brand-img{height:26px}
  .mbm-hdr-kontakt{margin-left:auto}

  .mbm-nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;cursor:pointer;flex-shrink:0}
  .mbm-nav-burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease-out,opacity .2s ease-out}
  .mbm-nav-check:checked ~ * .mbm-nav-burger span:nth-child(1),
  .mbm-nav-check:checked ~ .mbm-nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mbm-nav-check:checked ~ .mbm-nav-burger span:nth-child(2){opacity:0}
  .mbm-nav-check:checked ~ .mbm-nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mbm-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--mbm-red-800);flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:0;padding:8px 16px 16px;box-shadow:0 16px 32px rgba(0,0,0,.25);max-height:calc(100vh - 70px);overflow-y:auto;overscroll-behavior:contain}
  .mbm-nav-check:checked ~ .mbm-nav{display:flex}
  .mbm-nav-item{position:static}
  .mbm-nav-a{display:flex;justify-content:flex-start;gap:2px;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
  .mbm-nav-a.active{border-bottom-color:rgba(255,255,255,.12);color:var(--mbm-green-500)}
  .mbm-caret{display:none}
  /* Untermenues mobil: eingerueckt, immer sichtbar */
  .mbm-sub{display:block;position:static;transform:none;background:transparent;min-width:0;padding:0 0 4px;border-radius:0;box-shadow:none}
  .mbm-sub-a{margin:0;border-radius:0;opacity:.85;padding:10px 4px 10px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
  .mbm-sub-a .t{color:#fff;font-weight:400}
  .mbm-sub-a .d{display:none}
  .mbm-sub-a:hover{background:transparent;opacity:1}
  .mbm-sub-a:hover .t,.mbm-sub-a.active .t{color:var(--mbm-green-500)}
  .mbm-sub-a.lvl3{padding-left:34px}
  .mbm-sub-a.lvl3 .t{font-size:12.5px;color:rgba(255,255,255,.75)}
  .mbm-sub-a.lvl3:hover .t{color:#fff}
  .mbm-nav-kontakt{display:inline-flex;margin-top:14px;justify-content:center}
}

@media (max-width: 880px) {
  .mbm-ft-inner{grid-template-columns:1fr;gap:24px;padding:40px 20px 24px}
}

/* ============================================================
 * WPBakery-Neutralisierung: vc_row/vc_column duerfen keine
 * eigenen Abstaende in die Design-Sektionen bringen.
 * ------------------------------------------------------------ */
:where(.mbm-design .vc_row){margin-left:0;margin-right:0}
:where(.mbm-design .vc_row.wpb_row){margin-bottom:0}
.mbm-design .vc_column_container>.vc_column-inner{padding-left:0;padding-right:0}
.mbm-design .wpb_content_element{margin-bottom:0}

/* ============================================================
 * Nativer WPBakery-Aufbau
 * mbm-cell: vc-Zwischenwrapper der Karten-Spalten werden
 * transparent, damit Flex/Grid der Design-Klassen direkt greift.
 * ------------------------------------------------------------ */
/* Grid-Rows: vc-Clearfix-Pseudos wuerden als Grid-Items die Zellen verschieben */
.mbm-design .mbm-grid::before,
.mbm-design .mbm-grid::after{content:none!important}
/* :where = Spezifitaet 0, damit Design-Breiten (z. B. .smm-stamp 170px) gewinnen */
:where(.mbm-design .mbm-grid>.wpb_column){float:none;width:auto;min-height:0}
/* Top-Level-Spalten nicht floaten: sonst greift margin:0 auto der
 * Design-Container (z. B. hp-hero-inner) nicht */
.mbm-design .vc_row.wpb_row>.wpb_column{float:none}
.mbm-design .mbm-linkcell{position:relative}
.mbm-design .mbm-cell>.vc_column-inner,
.mbm-design .mbm-cell>.vc_column-inner>.wpb_wrapper{display:contents}
/* Raw-HTML-Wrapper sind reine Durchreicher: transparent schalten,
 * damit Design-Grids/-Flex ihre Kinder direkt sehen */
.mbm-design .wpb_raw_html.wpb_content_element,
.mbm-design .wpb_raw_html.wpb_content_element>.wpb_wrapper{display:contents}
.mbm-design .mbm-card-link{position:absolute;inset:0;z-index:2;display:block}
/* Text-Widget-Wrapper transparent: Absaetze bleiben Direktkinder
 * ihrer Design-Container (Rhythmus-Selektoren wie .art-body > p) */
.mbm-design .wpb_text_column,
.mbm-design .wpb_text_column>.wpb_wrapper{display:contents}
:where(.mbm-design .wpb_text_column){margin-bottom:0}
.mbm-design .mbm-cta-band .vc_btn3-container,
.mbm-design .hp-cta .vc_btn3-container{margin-bottom:0}
:where(.mbm-design .vc_row.vc_inner){margin-left:0;margin-right:0}
/* vc_btn im mbm-Button-Look (Basis-Styling selbst, js_composer-CSS ist entladen) */
.mbm-design .vc_btn3-container{display:inline-block;margin:0 12px 12px 0;vertical-align:middle}
.mbm-design .vc_general.vc_btn3{display:inline-block;font:700 14px var(--mbm-font-display);padding:11px 20px;border-radius:4px;border:1px solid transparent;text-decoration:none;text-align:center;cursor:pointer;transition:all .2s cubic-bezier(.2,.7,.2,1)}
.mbm-design .vc_general.vc_btn3:hover{text-decoration:none}
.mbm-design .vc_custom_heading{margin-top:0}

/* ============================================================
 * WPBakery-Frontend-Editor: vereinfachte Bearbeitungsansicht.
 * Editor-Wrapper (.vc_element) zerstoeren die Grid-Beziehungen,
 * daher stapeln alle Design-Grids hier als volle Breite.
 * Die echte Optik zeigt die normale Seitenansicht.
 * ------------------------------------------------------------ */
body.mbm-editor .mbm-grid{display:block!important}
body.mbm-editor .mbm-cell>.vc_column-inner,
body.mbm-editor .mbm-cell>.vc_column-inner>.wpb_wrapper{display:block}
body.mbm-editor .wpb_raw_html.wpb_content_element,
body.mbm-editor .wpb_raw_html.wpb_content_element>.wpb_wrapper{display:block}
body.mbm-editor .mbm-cell{margin-bottom:12px}
body.mbm-editor [class*="hero"] .mbm-cell{background:rgba(0,0,0,.12);padding:12px;border-radius:6px}
body.mbm-editor .mbm-card-link{display:none}

/* FAQ-Accordions: space-between wuerde Textknoten, <sup>®</sup> und "?"
 * als einzelne Flex-Items ueber die Zeile verteilen. Links buendeln,
 * nur das +/x-Icon (::after) nach rechts. */
.mbm-design details summary{justify-content:flex-start;gap:0}
.mbm-design details summary::after{margin-left:auto}
.mbm-design details summary sup{margin-right:4px}

/* Admin-Bar-Abstand */
body.admin-bar .mbm-hdr{top:32px}
@media (max-width:782px){ body.admin-bar .mbm-hdr{top:46px} }