/* =========================================================
   MatthiasPointner.de – Custom CSS (sauber & konsistent)
   ========================================================= */


/* =========================================================
   Separator-H2 – global
   (h2.mp-h2-separator > span + Linien links/rechts)
   ========================================================= */

h2.mp-h2-separator{
  margin: 25px 0 !important;
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

h2.mp-h2-separator span{
  position: relative;
  display: inline-block;
  padding: 0 24px;
  background-color: #ffffff !important;
  color: #c7452c !important;
  -webkit-text-fill-color: #c7452c !important;

  /* Schriftstil wie „Unser Team“ */
  font-family: "Marck Script", sans-serif !important;
  font-size: 30px !important;
  line-height: 40px !important;
  letter-spacing: -1px !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* Linien links + rechts (einheitlich dunkler) */
h2.mp-h2-separator span:before,
h2.mp-h2-separator span:after{
  content: "";
  position: absolute;
  top: 50%;
  width: 1.5cm;
  border-top: 1px solid rgba(0,0,0,0.35);
  transform: translateY(-50%);
}

/* Linie links */
h2.mp-h2-separator span:before{
  right: 100%;
}

/* Linie rechts */
h2.mp-h2-separator span:after{
  left: 100%;
}


/* =========================================================
   GLOBAL: alle H3 im Inhaltscontainer (Moose/WPBakery)
   ========================================================= */

body #content .container h3,
body #content .container_inner h3,
body .content .content_inner h3{
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
}


/* =========================================================
   Startseite – HERO FINAL
   ========================================================= */

/* Alles, was evtl. "voll rot" macht, neutralisieren + Abstände resetten */
.home .mp-home-hero,
.home .mp-home-hero .vc_row,
.home .mp-home-hero .vc_column,
.home .mp-home-hero .vc_column-inner{
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Inhalt zentrieren */
.home .mp-home-hero .vc_column-inner{
  text-align: center !important;
}

/* Schmaler roter Kasten */
.home .mp-home-hero .mp-hero-box{
  position: relative;
  display: inline-block;
  background: #c7452c;
  padding: 6px 26px;
  text-align: center;
}

/* Punkt oben & unten – mit Linien (SVG) */
.home .mp-home-hero .mp-hero-box:before,
.home .mp-home-hero .mp-hero-box:after{
  content: "";
  display: block;
  width: 180px;           /* Gesamtbreite der Dekozeile */
  height: 24px;
  margin: 10px auto;      /* Abstand zur Schrift */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Oben */
.home .mp-home-hero .mp-hero-box:before{
  margin-bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='24' viewBox='0 0 180 24'%3E%3Cline x1='0' y1='12' x2='70' y2='12' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.75'/%3E%3Ccircle cx='90' cy='12' r='5' fill='%23ffffff'/%3E%3Cline x1='110' y1='12' x2='180' y2='12' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.75'/%3E%3C/svg%3E");
}

/* Unten */
.home .mp-home-hero .mp-hero-box:after{
  margin-top: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='24' viewBox='0 0 180 24'%3E%3Cline x1='0' y1='12' x2='70' y2='12' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.75'/%3E%3Ccircle cx='90' cy='12' r='5' fill='%23ffffff'/%3E%3Cline x1='110' y1='12' x2='180' y2='12' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.75'/%3E%3C/svg%3E");
}

/* H1/H2 im Kasten */
.home .mp-home-hero h1.home-h1{
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px 0 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home .mp-home-hero h2.home-h2{
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
  color: #ffffff;
  margin: 0 !important;
}

/* Abstand zur nächsten Sektion */
.home .mp-home-hero + .vc_row,
.home .mp-home-hero + .wpb_row,
.home .mp-home-hero + .vc_row.wpb_row,
.home .mp-home-hero + .wpb_row.vc_row-fluid{
  margin-top: 30px !important;
  padding-top: 0 !important;
}


/* =========================================================
   GLOBAL: Moose/Qode Separator-Shortcodes dunkler
   (nur falls im Theme genutzt – ansonsten optional)
   ========================================================= */

.separator,
.qode_separator,
.eltd-separator{
  background-color: rgba(0,0,0,0.35) !important;
  border-color: rgba(0,0,0,0.35) !important;
  opacity: 1 !important;
}

/* Ultimate Maps – 80 % Breite, linksbündig */
.mp-map-narrow{
  width: 80%;
  margin: 0;
}

@media (max-width: 768px){
  .mp-map-narrow{
    width: 100%;
  }
}