body {
background-color:#FFF;
    padding: 0;
    color: #444;
font-family: Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;

}

main {
background-color:#FFF;
}

/*body.green {
background-color:#9c9e9f;
}*/

.sourcepro_fett {
font-family: Verdana, sans-serif;
font-size:1.2rem;
font-weight: 500;
color:#e20020 !important; 
}

.rot {
color:#e20020 !important; 
}

.telefon {
font-family: 'FontAwesome';
content: "\f098"; 
padding-right:10px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    min-height: 1px;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    width: 100%;
}

footer .col-md-12 {
background-color: #9c9e9f;
padding:20px 0 50px 0;
}

/*.startseite .col-md-6 {
padding-left:0;
}

.startseite .col-lg-6 {
padding-right:0;
}*/



.row {
margin:0 50px;
   /* margin-left: 0px;
    margin-right: 0px;
padding-bottom: 1rem;*/
}

/*.startseite .col-md-6 {
background-color: #FEF4F4;
margin-right:1rem;
}

.startseite .col-lg-6 {
 background-color: #FEF9EF;
}*/

.container {
    /*background-color: #FFF;*/
margin:20px 0 20px 0;
padding-left:0px;
/*padding-right:0px;*/
}

footer .container {
margin:20px 0 0px 0 !important;

}

.jumbotron {
    padding: 0rem 0rem 0rem 0rem;
    background-color: transparent;
    border-radius: 0rem;
    margin-bottom: 0rem;
border:none;

}

.jumbostartgreen,.jumbostartgreen .container, .green footer.jumbotron {

background-color:#9c9e9f;
color:#000 !important;
}

.jumbostartgreen {
padding:20px 0;

}


.ZMSGraphic {
align: left;
float: left;

}

.emphasis {
font-family: Verdana, sans-serif;
    color: #444;
    font-size: 0.5em;
    line-height: 1.5em;
    font-style: italic;
}

.roter_kasten {
background-image: url("https://www.bhg-bausanierung.de/common/css/common/img/kasten_h2_bg.png");
   background-repeat: repeat-x;
    background-color: #FEF4F4;
padding:1rem;
height:100%;
}


.gelber_kasten {
    background-color: #FEF9EF;
padding:1rem;
}

.gelber_kasten h2 {
background-image: url("https://www.bhg-bausanierung.de/common/css/common/img/q-or20.gif");   
background-repeat:no-repeat;
padding-left:2.5rem; 
color:#000;
font-size: 1.2rem;

}

.gelber_kasten ul {
margin-bottom:0.5rem;

}

.roter_kasten h2 {
color:#000 !important;
font-size: 1.2rem;

}


      #map {
       height: 400px;
       width: 100%;
      }
  
@media (min-width: 768px) {


}
/*.teaserbilder .col-md-4 {
padding:0;
}*/

.teaserbilder h2 {
    background-image: url("https://www.bhg-bausanierung.de/common/css/common/img/q-rt20.gif");
    background-repeat: no-repeat;
background-position: 1rem 0;
    color: #000;
    font-size: 1.2rem;
    padding-left: 3.5rem;
}

.teaserbilder {
    margin-bottom:1rem;
}



.teaserbilder .col-md-4:nth-child(2) h2 {
background-image: url("https://www.bhg-bausanierung.de/common/css/common/img/q-or20.gif");   
background-repeat:no-repeat;
background-position: 1rem 0;
}


a {
    color: #9c9e9f;
    text-decoration: none;
}

.active a, a:active {
    color: #e20020;
    text-decoration: none;
}

a:hover {
    color: #e20020;
    text-decoration: none;
}


.interner-link, .externer-link{
padding-right:15px;
}

.green .interner-link{
color:#FFF;
}

.green .externer-link {

color:#FFF;
}

.interner-link::before {
content: url(https://www.bhg-bausanierung.de/common/css/common/img/link-int.png);
margin-right:10px;
}

.externer-link::before {
content: url(https://www.bhg-bausanierung.de/common/css/common/img/link-ext.png);
margin-right:10px;
}

.interner-link, externer-link {

}

.form-inline {
    padding: 0.5rem 1rem;
}

.dropdown-menu {
    
    padding:1rem;
}

.call-to {
font-family: Verdana, sans-serif;
font-size:1.0rem;
font-weight: 500;
color:#e20020 !important;
}

/*.col-md-3 {
    
padding-top:31px;
}*/

footer {
    background-color: #FEF9EF;
    clear: both;
    color: #000;
    font-size: 1rem;
font-family: Verdana, sans-serif;
    line-height: 120%;
    padding: 0.5rem 1rem 0;
left:0;
   
}

footer.container h2 {
background-image: url("https://www.bhg-bausanierung.de/common/css/common/img/q-rt20.gif");   
background-repeat:no-repeat;
padding-left:2.5rem;
margin-left:0; 
color:#000;
font-size: 1.2rem;

}

footer.container h3 {
color:#000;
font-weight:700;    
}







#description {
    background-image: url("https://www.bhg-bausanierung.de/common/css/common/css/common/intro_linie.jpg");
    background-position: left bottom;
    background-repeat: repeat-x;
    color: #00272c;
    min-height: 180px;
    margin: 20px 10px 20px 0;
    padding: 0 0 20px;
}

#description img {
    float: left;
    margin: 0.5em 20px 20px 0;
}

#Micronavigation {
font-family: Verdana, sans-serif;
    font-size: 11px;
    font-weight: normal;
line-height:3em;

}
div.ZMSTeaserElement div.title a:link, div.ZMSTeaserElement div.title a:visited, div.ZMSTeaserElement div.title {
    color: #00272c;
    display: block;

    padding: 2px;
    text-decoration: none;


    font-weight: normal !important;

}

div.ZMSTeaserElement {
    background-color: #FFF;
    padding: 1rem;
margin-bottom:1.5rem;
}

div.ZMSTeaserElement h2 {
/*background-image: url("https://www.bhg-bausanierung.de/common/css/common/img/q-rt20.gif"); */  
background-repeat: no-repeat;
 
color:#000;
font-size: 1.35rem;
margin:0;
font-weight:500;
}

hr {
background-image: url(https://www.bhg-bausanierung.de/common/css/common/img/dotted_line.png);
background-position: -20px bottom;
background-repeat: repeat-x;
padding: 5px 0 10px 0;
border:none;
}

/* Linie unter Breadcrumb etwas höher setzen */
.breadcrumb + hr,
#Micronavigation + hr { margin-top: -3px !important; }


.pageindex_simple_einzug {
    /*background-image: url("https://www.bhg-bausanierung.de/common/css/common/intro_linie.jpg");
    background-position: left bottom;
    background-repeat: repeat-x;*/
    margin: 0 0px 20px 660px;
    padding: 0 ;

}

.pageindex {
    /*background-image: url("https://www.bhg-bausanierung.de/common/css/common/intro_linie.jpg");
    background-position: left bottom;
    background-repeat: repeat-x;*/
    margin: 0 0px 20px 0px;
    padding: 0 ;

}

.pageindex img {

    float: left;
    margin: 0em 40px 20px 0;
}

/*Textformatierung*/
#description h1 {
    padding-top: 8px;
}

h1, h2, h3, h4, h5, h6 {
font-family: Verdana, sans-serif;

font-weight: bold;
line-height: 1.4;
}

.startgreen h2 {

color:#000 !important;
margin: 25px 0;
line-height:1.4em;
}

h1 {
    font-size: 1.5rem;
    line-height: 100%;
    margin: 1rem 0 1rem 0;
}

h2 {
    font-size: 1.2rem;
    color: #b6636f !important;
    line-height: 150% !important;
    margin: 10px 0;
    font-weight: 300;
}

.h3, h3 {
    font-size: 1.0rem;
    font-weight: 600;

}

.h4, h4 {
    font-size: 0.5rem;
    font-weight: 400;

}


.startseite h3 {
margin-top:1rem;
}

#description .text {
    line-height: 150%;

}

.graphic {
width:auto !important;

}

div.ZMSGraphic {
 
float:left;
}

.alignleft {
float:left;}

div.floatleft {
    border: 0 solid red;
    margin: 0 20px 5px 0;
}

.levelzwei div.ZMSGraphic img, .leveldrei div.ZMSGraphic img {
    margin: 0 20px 5px 0;
padding:0px 20px 20px 0;
float:left;
}

div.ZMSGraphic img {
    margin: 0 20px 5px 0;
padding:0px 0px 20px 0;
float:left;
max-width: 100% !important;
height: auto !important;
}

/* ===== HERO-/CAROUSEL-CAPTION (bereinigt & mit mehr Abstand) ===== */

/* Bootstrap-Caption (Fallback) */
.carousel-caption {
  font-family: Verdana, sans-serif !important;
  background: transparent !important;
  color: #e20020;
  font-weight: normal;
  font-size: 120%;
  padding: 0 !important;
  line-height: normal !important;   /* Überschriften steuern den Zeilenabstand */
}

/* ---------- Variante 1 ---------- */
.carousel-caption-neu {
  font-family: Verdana, sans-serif;
  background: transparent;
  color: #e20020;
  font-weight: normal;
  padding: 0;
  line-height: normal;              /* kein globales Quetschen */
  position: absolute;
  right: 5%;
  bottom: 80px;                     /* vertikale Position im Bild */
  left: 5%;
}
.carousel-caption-neu h1 {
  font-family: Verdana, sans-serif !important;
  color: #e20020;
  font-size: 180% !important;
  line-height: 1.2 !important;
  text-align: left !important;
  margin: 0 0 .95em 0 !important;   /* etwas Luft nach unten */
}
.carousel-caption-neu h2 {
  font-family: Verdana, sans-serif !important;
  color: #e20020 !important;
  font-size: 120% !important;
  font-weight: 500 !important;
  text-align: left !important;
  line-height: 1.2 !important;
  margin: .20em 0 0 0 !important;   /* H2 leicht nach unten schieben */
}

/* ---------- Variante 2 ---------- */
.carousel-caption-neu2 {
  font-family: Verdana, sans-serif;
  background: transparent;
  color: #e20020;
  font-weight: normal;
  padding: 0;
  line-height: normal;
  position: absolute;
  right: 40% !important;            /* engeres Textfeld links */
  bottom: 80px;
  left: 5% !important;
}
.carousel-caption-neu2 h1 {
  font-family: Verdana, sans-serif !important;
  font-size: 130% !important;
  line-height: 1.15 !important;
  text-align: left !important;
  margin: 0 0 .6em 0 !important;    /* spürbarer Abstand vor H2 */
}
.carousel-caption-neu2 h2 {
  font-family: Verdana, sans-serif !important;
  font-size: 100% !important;
  font-weight: 500 !important;
  color: #e20020 !important;
  text-align: left !important;
  line-height: 1.2 !important;
  margin: .35em 0 0 0 !important;   /* H2 noch etwas weiter unten */
}
.carousel-caption-neu2 h3 {
  font-family: Verdana, sans-serif !important;
  font-size: 80% !important;
  font-weight: 500 !important;
  color: #e20020 !important;
  text-align: left !important;
}



ul.bild li {
    list-style-image: url("https://www.bhg-bausanierung.de/common/css/common/img/bullet.gif");
    margin-left: 330px;

}
/*nav-nav*/

.navbar-expand-xl {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: space-between;
}

nav.bg-custom a {
color: #4b5457 !important;
}

.navbar {
font-family: Verdana, sans-serif;
	font-style: normal;
	font-weight: 500;
	color: #000;
	padding: 0 30px;
	/*align-items: flex-end;*/
    
    -ms-flex-align: bottom;
    align-items: flex-end;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem;
}
.navbar a {
font-family: Verdana, sans-serif;
	font-style: normal;
	font-weight: 500;
	padding:0;
	margin:0;
}
.navbar-toggler {
	background-color: #FFF;
	border-radius: 0rem;
}

nav.bg-custom {
	background-color: #FFF;
	border-bottom:1px solid #FFF;
	font-size: 16px;
	font-weight: 400;
}
nav {
	padding:2rem;
}
nav .active {

/*background-color: #fef9ef;*/
	
}
ul.navbar-nav {
	margin-bottom: 0;
	margin-top: auto;
	padding:0 1rem;
}

nav.bg-custom a {
	color: #b6636f !important;
}
.nav-link {
	display:inline;
	padding-left: 0rem;
}

/* MENÜ-ABSTÄNDE VERKLEINERT */
li.nav-item a { color: #000 !important; }
.navbar-expand-lg .navbar-nav .nav-link {
    padding: 0rem 0rem .5rem 0rem;
    margin: 0 .25rem 0 .25rem;
}
ul.navbar-nav li {
    padding: 0.3rem .6rem;
}

.nav-item:hover a {
	color: #b6636f !important;
border-bottom: 3px solid #b6636f !important;
}


.inhalt ul li {
	list-style-image: url("https://www.bhg-bausanierung.de/common/css/common/img/bullet.gif");
}

.inhalt ul.pageindex li, .inhalt ul.pageindex_simple_einzug li{
	list-style: none;
padding:0 0 30px 0;
}




/*.navbar-brand img {
width:75%;
}*/

.carousel_img {
  margin-bottom: 20px !important;


}


.carousel_img_start {
  margin-bottom: 0px !important;


}


@media (min-width: 980px){
.navbar-brand img {
width:40% !important;
}
}

/* GLOBAL STYLES
-------------------------------------------------- */
body {
  padding-top: 1.25rem !important;  /* kompakter Header */
  padding-bottom: 3rem;
  color: #5a5a5a;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 0rem;
    font-size: 1rem;
    line-height: 1rem;
  }

  .featurette-heading {
    font-size: 40px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/*Accordion*/
.card {
    
    border: 0px solid rgba(0,0,0,0.125); 
margin-bottom:0.5rem;
}


.card-header {
    background-color: transparent;
    border-bottom: 0px solid #aaaaaa;
color: #4b5457;
font-family: Verdana, sans-serif;
    font-style: normal;
    font-weight: 400;
 padding: 0.6rem 0.4rem 0.5rem;
background-color:#FEF9EF;
}

.card-block {
padding:0.4rem 0.4rem 0.4rem 2rem;

}

#accordion .card-title {
color: #00272c !important;
}

#accordion .card-title:after {
font-family: Verdana, sans-serif;
    
content: "\f077"; 
    float: left;
padding-right:10px; 

}
#accordion .card-title.collapsed:after {
    /* symbol for "collapsed" panels */
    
content: "\f078";
}

/* SLider*/

@media (min-width: 768px) {

#carouselExample {
margin-bottom:2rem;
}


    /* show 3 items */
    #carouselExample .carousel-inner .active,
    #carouselExample .carousel-inner .active + .carousel-item,
    #carouselExample .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    
    #carouselExample .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    #carouselExample .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    #carouselExample .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    
    #carouselExample .carousel-inner .carousel-item-next,
    #carouselExample .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    #carouselExample .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    #carouselExample .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    #carouselExample .carousel-item-next.carousel-item-left + .carousel-item,
    #carouselExample .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    #carouselExample .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    #carouselExample .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0,
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    #carouselExample .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    #carouselExample .carousel-item-prev.carousel-item-right + .carousel-item,
    #carouselExample .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    #carouselExample .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

#carouselExample .carousel-control-next, #carouselExample .carousel-control-prev {
width:0;

}

#carouselExample .mx-auto {
margin-left:0 !important;
margin-right:0 !important;
}



}

.carousel-indicators {
    bottom: 1px;
    display: flex;
    justify-content: left;
    left: 90%;
    list-style: outside none none;
    margin-left: 0;
    margin-right: 0;
    padding-left: none;
    position: absolute;
    right: 0;
    z-index: 15;
}

.carousel-indicators li {

    width: 10px;
}

ol.carousel-indicators {
    margin-bottom: 0.2rem;

}

.carousel-caption h3 {
margin-bottom: 0rem;}



/*@media (min-width: 768px)
{

.col-md-4 {
        padding-right:0;
padding-left:0;
margin-right:0;
}

.col-md-8 {
    padding-right:0;
padding-left:0;
}

 

.col-md-6 {
    padding-right:0;
padding-left:0;
}

footer .col-md-4 {
    padding-right:15px;
}
}
*/


/* =========================================================
   Top-Menü: Active-State = Hover
   ========================================================= */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .show > .nav-link,
li.nav-item.active > a,
nav .active > a,
nav .active > .nav-link,
nav .navbar-nav .nav-item.current > .nav-link,
nav .navbar-nav .nav-item.selected > .nav-link,
nav .navbar-nav a[aria-current="page"],
nav .navbar-nav a[aria-current="true"] {
  color: #b6636f !important;
  border-bottom: 3px solid #b6636f !important;
  text-decoration: none !important;
}

/* =========================================================
   Accordion: hellgrau + FontAwesome-Chevrons (nur 1×)
   ========================================================= */

/* hellgraue Flächen */
#accordion .card,
#accordion .card-body,
#accordion .collapse { background-color: #f7f7f7 !important; }
#accordion .card-header { background-color: #f7f7f7 !important; border: 0 !important; }

/* Titel wie h3 */
#accordion .card-title,
#accordion .card-title a {
  color: inherit !important;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

/* KEINE alten Icons an .card-title selbst (verhindert Dopplung) */
#accordion .card-title::after,
#accordion .card-title.collapsed::after { content: none !important; }

/* EIN Chevron am tatsächlichen Trigger (a/button) – FA4-kompatibel */
#accordion [data-toggle="collapse"],
#accordion [data-bs-toggle="collapse"],
#accordion [aria-controls][aria-expanded] { position: relative; }

#accordion [data-toggle="collapse"]::after,
#accordion [data-bs-toggle="collapse"]::after,
#accordion [aria-controls][aria-expanded]::after {
  content: "\f078"; /* down */
  font-family: "FontAwesome";
  font-weight: normal;
  display: inline-block;
  margin-left: .5rem;
  line-height: 1;
  opacity: .9;
  background-image: none !important;
  transform: none !important;
}

#accordion [data-toggle="collapse"][aria-expanded="true"]::after,
#accordion [data-bs-toggle="collapse"][aria-expanded="true"]::after,
#accordion [aria-controls][aria-expanded="true"]::after {
  content: "\f077"; /* up */
}

/* =========================================================
   Feinschliff
   ========================================================= */

/* Logo-Größe „wie früher“ */
.navbar-brand img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

/* Header kompakter */
nav  { padding: .75rem 1rem !important; }

/* Kontakt rechts: Hover-Unterstreichung */
a[href^="tel:"],
a[href^="mailto:"] { color: #e20020 !important; }
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover { text-decoration: underline !important; }

/* H1 allgemein etwas leichter */
h1, .h1 { font-weight: 500 !important; }

/* --- Dotted-Line-Ausrichtung unter Überschriften in der linken Content-Spalte --- */
.col-md-8 h2 + hr { margin-top: -8px !important; }  /* anheben, damit mit „Kontakt“ rechts fluchtet */


/* =========================================================
   NEU (Accordion/ Footer)
   ========================================================= */

/* Accordion: Titel bei Hover & geöffnet rot */
#accordion .card-title a:hover,
#accordion .card-title a[aria-expanded="true"],
#accordion .card-title:hover,
#accordion .card-title[aria-expanded="true"],
#accordion [data-toggle="collapse"]:hover,
#accordion [data-toggle="collapse"][aria-expanded="true"],
#accordion [data-bs-toggle="collapse"]:hover,
#accordion [data-bs-toggle="collapse"][aria-expanded="true"]{
  color: #e20020 !important;
}

/* Chevron IMMER rot */
#accordion [data-toggle="collapse"]::after,
#accordion [data-bs-toggle="collapse"]::after,
#accordion [aria-controls][aria-expanded]::after {
  color: #e20020 !important;
}

/* Footer-Links Impressum/Datenschutz: weiß, bei Hover unterstreichen */
footer a[href*="impressum" i],
footer a[href*="datenschutz" i]{
  color: #fff !important;
  text-decoration: none;
}
footer a[href*="impressum" i]:hover,
footer a[href*="datenschutz" i]:hover{
  color: #fff !important;
  text-decoration: underline !important;
}


/* =========================================================
   RECHTE SPALTE RECHTSBÜNDIG + LINKE MIT MINDESTBREITE
   ========================================================= */

/* rechte Spalte bis zum Stapeln rechts „anlehnen“ */
@media (min-width: 768px) {
  .container .row > .col-md-4:last-child,
  .container .row > .col-lg-4:last-child { margin-left: auto; }
}

/* 992px → 720px: zwei Spalten ROBUST beibehalten (auch in Burger-Phase)
   linke min 320px, rechte fix 320px rechtsbündig */
@media (max-width: 991.98px) and (min-width: 700px) {

  .row{ margin: 0 20px !important; } /* etwas mehr Nutzbreite */

  .inhalt .row{
    flex-wrap: nowrap !important;          /* NICHT umbrechen */
  }

  /* linke Spalte flexibel, aber nicht kleiner als Phone-Portrait */
  .inhalt .row > [class*="col-"]:first-child{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 420px !important;
  }

  /* rechte Spalte fest 320px, an den rechten Rand „angelehnt“ */
  .inhalt .row > [class*="col-"]:last-child{
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    margin-left: auto !important;
  }

  /* keine „kaputten“ Zeilenumbrüche bei Kontaktlinks */
  a[href^="tel:"], a[href^="mailto:"]{ white-space: nowrap; }
}

/* ============================================================
   BHG Responsive Fix: Mobile-Optimierung für Content + Footer
   ============================================================ */
@media (max-width: 767.98px) {

  /* --- Haupt-Content-Bereich --- */
  .jumbotron .container.inhalt,
  .container.inhalt,
  .inhalt .container,
  .inhalt .row,
  .inhalt .col-md-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Accordion-Karten bündig */
  #accordion .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0;
  }

  /* Lesbarkeit: etwas mehr Luft links */
  .card-block,
  .card-body,
  .inhalt p,
  .inhalt h1,
  .inhalt h2,
  .inhalt h3,
  .inhalt ul,
  .inhalt ol {
    padding-left: 1.3rem;  /* angenehme Lesemarge */
    padding-right: 1rem;
  }

  /* --- Footer --- */
  footer.jumbotron {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  footer.jumbotron .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.75rem !important;  /* ggf. auf 0 setzen, wenn ganz bündig gewünscht */
    padding-right: 0.75rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  footer.jumbotron .row,
  footer.jumbotron .col-md-12 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;       /* optional: bessere Zentrierung */
    font-size: 0.95rem;       /* etwas kleinerer Text für kleine Displays */
  }
}


/* =========================================================
   NAVBAR: HORIZONTAL BIS 840PX, DANN BURGER
   ========================================================= */
@media (min-width: 840px) and (max-width: 991.98px) {
  .navbar-expand-lg .navbar-toggler{ display:none !important; }
  .navbar-expand-lg .navbar-collapse{
    display:flex !important;
    flex-basis:auto !important;
    width:auto !important;
    visibility:visible !important;
    justify-content:flex-start !important;
  }
  .navbar-expand-lg .navbar-nav{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
  }
  .navbar-expand-lg .navbar-nav .nav-item{ white-space:nowrap !important; }
}
/* <840px: normales Bootstrap-Verhalten (Burger sichtbar) */