@charset "utf-8";
/*Farben:
gruen: #009540 - rgb(0,149,64)
/* CSS Document */
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('opentype'); }
@font-face { font-family: 'Caveat'; src: url('../fonts/Caveat-VariableFont_wght.ttf') format('opentype'); }

:root{
  --gruen: #009540;
  --gelb: #FFED00;
  --grau: #E3E3E3;
  --text: #080808; 
  --hellgruen: #E5F4EC;
}
*{
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  transition: 1s;
}

body {color:#080808;font-size: medium; font-family:Montserrat, "sans-serif"; position: relative;}
h1, h2, h3, h4, a, em {color: var(--gruen);}

p {  margin: 0 0 30px;}
ul {padding-left: 18px;}
.mail{ display: none;}
a:hover {color:var(--gruen); text-decoration:underline;}
a:active {color:var(--text); text-decoration:underline;}
.font-Caveat{ font-family: 'Caveat';}
.bg-grau{ background-color: var(--grau);}
.bg-hellgruen{ background-color: var(--hellgruen);}  
.bg-gruen{ background-color: var(--gruen); padding: 30px 0 ; }
.hero .bg-gruen{ padding: 30px 0 0;}
.bg-gruen h2, .bg-gruen p, .bg-gruen a { color:#fff;}
.text-weiss{color:#fff;}
.text-gruen{ color: var(--gruen);}
.header {   position: fixed; z-index:1030; background-color: #fff;  width: 100%;  height: 100px;  border-bottom: 3px solid var(--gelb);}
nav.bg-light { position: relative; background-color: #fff !important;}
.gruen{ color:var(--gruen);}
/*.head {max-width:1000px; margin:auto;}*/
.head { margin:auto;}
.navbar-brand {margin-right: 3rem;}
.navbar-brand img {width:250px; height: auto;}
.tel {position:fixed; top:80px; left:50%; width: 190px; margin-left:300px; z-index:2000; background-color:#ffffff;border:1px solid #ccc;box-shadow: 4px 5px 6px #00000080;}
.tel img {width:38px; height:auto;}
.tel .ce-intext.ce-left .ce-gallery { margin-bottom: 0px; margin-right: 0px;  padding: 10px 4px 10px 16px;}
.tel p {  margin:0px;color:#7BBC97;}
sub { font-size: inherit;}
#elektrotechnik #c258 sub {font-family:Caveat, "sans-serif"; font-size: 150%;bottom: -1em;}
.banner {position: relative;top: -119px;left: 50%;margin-left: -500px;z-index: 2;margin-bottom: -120px;float: left;}

/* Navigation */
.navbar-expand-lg .navbar-collapse {z-index: 1000;}
.navig {margin-top: 46px;}
.navbar {    border-radius: 0px; border: 0;    margin-bottom: 0px; --bs-navbar-padding-y: 1rem;}

.nav > li > a {padding:10px;}
.navbar-light {    background-color:transparent;    margin: auto;}
.navbar-light .navbar-nav>li>a {  color: #009540;  font-size: medium; text-transform: uppercase;}
.navbar-light .navbar-nav>li>a:hover {  color: #009540; text-decoration:underline;}
.navbar-light .navbar-nav>.active>a, .navbar-light .navbar-nav>.active>a:focus, .navbar-light .navbar-nav>.active>a:hover 
.dropdown-menu > .active>a, .dropdown-menu > .active>a:focus,.dropdown-menu > .active>a:hover { background-color:transparent;  text-decoration:underline; color: #009540;}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover { color: #009540;background-color:transparent; }

/*-----------NEU: Dropdown-menu ohne jquery - bootstrap 5---------------*/
/* Grid-Dropdown: 4 pro Zeile ab lg, mobil gestapelt */ 
.navbar .nav-item > a.nav-link {padding-left: 2rem;}
.dropdown-menu.show.dropdown-menu-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1.5rem; /* Zeilen-/Spaltenabstand */ padding: .75rem 1rem;/* Innenabstand */ /*z-index: 3;*/ position: absolute; } 
.navbar-nav li:nth-child(2) .dropdown-menu.show.dropdown-menu-grid{ --bs-dropdown-min-width:50rem; /* Breite für 4 Items nebeneinander */} 
/* Li mit Untermenü als Flex-Container */ 
.navbar .nav-item.dropdown { position: relative; /* für das absolut positionierte Dropdown */ display: flex; align-items: center; } 
/* Reihenfolge der Kinder festlegen */ .navbar .nav-item.dropdown > a.nav-link { order: 1; padding-right:0;} 
.navbar .nav-item.dropdown > button.dropdown-toggle-split { order: 2; margin-left: .25rem; } 
.navbar .nav-item.dropdown > .dropdown-menu { order: 3; } 
.navbar .nav-item.dropdown > a.nav-link { margin-right: 0; /* sicherstellen, dass kein globales margin wirkt */}
.dropdown-item.active, .dropdown-item:active { color: var(--bs-dropdown-link-active-color); text-decoration: none; background-color: var(--gruen);}
/* Dropdown über anderen Elementen */ 
.navbar .dropdown-menu { z-index: 1060; } 
/* Bei Hover-Intent über der Navi */
.header.header--dropdown-intent { z-index: 2050; } /* > .tel */
/* Während Dropdown offen */
.header.header--dropdown-open { z-index: 2060; }
/* WICHTIG: .tel/.banner aktiv runterstufen, solange Intent/Open aktiv ist */
.header.header--dropdown-intent ~ .tel,
.header.header--dropdown-open   ~ .tel { z-index: 900; }   /* unter Header */

.header.header--dropdown-intent ~ .banner,
.header.header--dropdown-open   ~ .banner { z-index: 800; }/* noch drunter */

/* Dropdown selbst ganz oben (unter Modals) */
.header .navbar .dropdown-menu { position: absolute; z-index: 2070; }
/* Optik der Links (ggf. anpassen) */ .dropdown-menu-grid .dropdown-item { white-space: normal; /* lange Begriffe umbrechen */ padding: .25rem .5rem; }
/* Optik des Split-Toggles (kleiner als Link) */ .navbar .dropdown-toggle-split { padding-left: 0; padding-right: .2rem; margin-left: -0.1rem; line-height: 1; } 
/* Caret (Pfeil) sichtbar + grün einfärben */ .navbar .dropdown-toggle-split::after { display: inline-block; margin-left: .2rem; vertical-align: .1em; content: ""; border-top: .4em solid var(--gruen); border-right: .35em solid transparent; border-bottom: 0; border-left: .35em solid transparent; }
/* Optional: Caret auf Hover etwas dunkler */ .navbar .dropdown-toggle-split:hover::after { border-top-color: #007a3d; } 
/* Etwas optische Balance: kleiner Abstand zwischen Link und Pfeil */ .navbar .dropdown-toggle-split { padding: 0 .3rem; line-height: 1; }

/*-------Ende-----*/
/*.nav li:nth-child(2) .dropdown-menu { list-style-type: none;width:660px !important; max-width:660px !important; border-color:transparent; padding-left:4px;}
.dropdown-menu li {float: left !important;min-width: 90px;}*/


/*-----------------------------Ende neuer Button-----------------------------------------------------*/
/* BILD */
.bilder {padding-top: 100px;}
.bilder img {width:100%; height: auto;}

/* Inhalte */
.inhalt {}
h1 {text-align:center;margin-top: 60px;}
h2 {margin-top: 40px;}
h3{
  font-size: 1.3rem;
}
h4{
  font-size: 1.2rem;
}

li::marker {color:#009540;}
.inhalt img{
  width: 100%; height: auto;
}

ul.ce-uploads li{
  background-image: url(../img/Icons/pdf.gif);
  background-repeat: no-repeat;
}
.stellen ul.ce-uploads li img{
  display: none;
}
.stellen ul.ce-uploads li div{
  padding-left:54px;
  padding-bottom: 10px;
}

/* Kacheln Home box-shadow: 10px 10px 5px red inset;*/
.kacheln img {-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;}
.kacheln img:hover {-webkit-transform: scale(1.1); -moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);} 
.ce-border img:hover {  border-style: inset;  border-width: 7px;  border-color: #aaa; }
#c164, #c198 {display: none;visibility: hidden;}
#c113 img {width: auto;height: 224px;}
/*------------- svg Item in Firefox sichtbar machen, trotz height auto----*/
#c317 img, #c143 img{  height: 71px;}
#c146 img, .informatives img{ height: 150px;}
#c189 img{ height:130px;}
.anruf {display: flex;}
/* Mitarbeiter-Stimmen */
.stimmen .ce-border img {max-width: 280px; height: auto; margin: 10px; border-radius: 150px; border:1px solid #707070; box-shadow: 4px 5px 6px #00000080;}
.stimmen .ce-border img:hover {  border-style: auto;  border-radius: 150px; border:1px solid #707070; }

.team .ce-bodytext {background: #e3e3e3;padding: 0 10px 2px;margin-top: -50px;}
.team img {width: 100%;height: auto;}
.team-kontakt {z-index: 90;position: relative;}
.leitung .ce-bodytext {min-height: 283px;}

/* Stellen Anzeigen */
.stellen header {background-color: #009540;height: 100px;display: flex;align-items: center; padding: 6px 10px; justify-content: center;}
.stellen h3 {color: #fff;margin-top: 0; margin-bottom: 0; font-size: 1.25rem;}
.stellen .frame-layout-0 {}
.stellen ul {margin: 0;padding: 10px 10px 10px 15px; background-color: #E3E3E3;}
.stellen a {color:#080808;}
.stellen img{ width: auto;}
/*.inhalt .frame-layout-0 {max-width:1000px; margin:auto;}*/
.inhalt .frame-layout-1 {background-color:#E3E3E3;height:400px;overflow: hidden;}
#elektrotechnik .inhalt .frame-layout-1 {background-color: #E3E3E3; height: auto; overflow: hidden;
}
.inhalt .frame-layout-2 {background-color:#009540;padding: 50px 0;}
.inhalt .frame-layout-2 h2, .inhalt .frame-layout-2 p {color:#fff;max-width:1000px; margin:auto;}
.inhalt .frame-layout-3 {background-color:#E5F4EC;padding: 50px 0;}
/*.inhalt .frame-layout-3 h2, .inhalt .frame-layout-3 p {max-width:1000px; margin:auto;}*/
.inhalt .frame-layout-3 .ce-textpic {max-width:1000px; margin:auto;}

.col-8 {float: left;  width: 66%;}
.bewerbung a {color: #fff;}
.bewerbung .col-6 {float:left;margin-right: 40px;}
.bewerbung .ce-intext.ce-left .ce-gallery {  margin-right: 10px;}

.ce-column {  margin-right: 0px;}
.ce-row {  margin-bottom: 0px;}
blockquote {border-left: 0; font-family: 'Caveat', "sans-serif"; color: #009540;font-size: xx-large;}
/*------------------Team------------------------------------------*/
.person-card-body{ background-color: var(--grau);}
.person-card-contact{margin-top: -20px; display: flex; justify-content: center; }
.phone{margin-right: 2rem;}
.person-card-info{ padding: 2rem 0; height: 150px;}
.leitung .person-card-info{ padding: 1rem; height: 200px;}
.person-card p{ margin:0; }
/*------------Ende Team-----*/
.bild-text {}
.bild-text .col-md-6{ padding:0;}
.bild-text h2, .bild-text h3, .bild-text p, .bild-text li {max-width: 600px;}
.bild-text h2{ margin-top: 30px;}
.bild-text .frame-layout-0 {max-width:100%; margin-right:0px; }
.bild-text img {width: 100%; height: auto;}
.bild-text .col-12, .bild-text .col-md-6 {padding-right: 0px; padding-left: 0px;}
.bild-text .col-12 .frame-type-text, .bild-text .col-md-6 .frame-type-text {padding-right: 30px; padding-left: 30px;}
.bild-text .col-12 .frame-type-text, .bild-text .col-md-6 .offset-lg-2 .frame-type-text {padding-right: 30px; padding-left: 0;}
.text-li div {float: inline-end;}
.bild-text .ce-above .ce-gallery {margin-bottom:0;}
#elektrotechnik .bild-text p, #elektrotechnik .bild-text li {
  max-width: 550px;
}
#elektrotechnik #c258 .ce-intext.ce-left .ce-gallery {
    margin-right: 0;
}
#elektrotechnik .kontakt img{
  height: 80px;
}
#c24, #c59, #c69 {height: auto;}
.hoch {height: 520px !important;}

.media2click-controls {bottom: 200px;}
.media2click-placeholder {width: 100% !important;}

.ce-timeline ul.ce-timeline-list li.text-image header {font-weight: bold;}

.frame-space-before-large {margin-top: 50px !important;}
.frame-space-after-large {margin-bottom: 50px !important;}

.frame-space-before-extra-large {margin-top: 50px !important;}
.frame-space-after-extra-large {margin-bottom: 80px !important;}

.logos {margin: 50px 0;}

.tx-powermail .container-fluid {padding-left: 0px;}

footer {background-color: #009540; font-size:small; padding: 2rem 0;}
/*footer .frame-layout-0 { margin:0px auto 0; padding:20px 0;}*/
footer .ce-below .ce-gallery {  margin-top: 0px;}
footer .ce-row {  margin-bottom: 20px;}
footer .container, footer .container a {color:#fff; position: relative;}
footer .container p {margin-bottom:10px;}
footer .container a:hover {font-weight:normal;}
#c18 {position: absolute;top: -75px;}
footer #c16 .ce-intext.ce-left .ce-gallery { margin-bottom: 0; }
/*footer #c17 img{ width: 180px;}*/
.btn-primary {  background-color: #009540;  border-color: #009540;}
.btn-primary:hover, .btn-primary:active { color:#009540; background-color: #ffed00;  border-color: #009540;}
footer .col-md-4 img{ width: auto;}
footer .col-md-3 #c673 .ce-column:nth-of-type(2){ margin-left: 1.5rem;}
footer #c16 .ce-textpic{display: flex; align-items: center;}
footer sub{ font-size: 1.2rem; bottom:0;}
footer #c16 .ce-intext.ce-left .ce-gallery { margin-right: 10px;}
footer #c16 .ce-intext.ce-left p {margin-bottom:0;}
footer .col-lg-6.svg img{width: 200px;}

/*-----------------------Seite Referenzen----------*/
.referenzen ul{display: flex; text-align: center;justify-content: center; list-style: none; padding-left:0; }
.referenzen ul li {padding: 0 1rem;}
.referenzen ul li a{ text-decoration: none;}
.bg-gruen h2{ color:#fff;}
/*-------Vorschau Referenzen------------*/
#referenzen .figcaption .ce-textpic {position: relative;}
#referenzen .figcaption .ce-bodytext{ position: absolute; width: 100%;  background: rgba( 0,149,64, 0.75); color: white;  padding: 10px 20px;  opacity: 0;  -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;  }
#referenzen .figcaption .ce-bodytext p{ margin-bottom:10px;}
#referenzen .figcaption .ce-bodytext a{ color:#fff;}
#referenzen .figcaption .ce-bodytext { left: 0; bottom: -30%;}
#referenzen .ce-textpic:hover .ce-bodytext {  opacity: 1;}
#referenzen .ce-textpic:hover .ce-bodytext { bottom: 30px; }
#referenzen .kategorien .col-md-3 figure::before { 
   content: url("../img/Icons/Icons_Referenzen_50px/Schellhorn_icon_dach.png");
    position: absolute;
    font-weight: 800;    
    width: 24px;
    height: 24px;  
    -moz-transition: all 0.6s ease;
    opacity: 0.75; 
  left: 10px;
  top: 10px;
  }
#referenzen .kategorien .col-md-3.klempnerei figure::before { 
   content: url("../img/Icons/Icons_Referenzen_50px/Schellhorn_icon_klempnerei.png");
}
#referenzen .kategorien .col-md-3.erneuerbare_energie figure::before { 
   content: url("../img/Icons/Icons_Referenzen_50px/Schellhorn_Icon_erneuerbare_energie.png");
}
#referenzen .accordion-body p {margin-bottom:15px;}
#referenzen .referenzen .accordion ul{
    display: block;
    text-align: left;  
    list-style: disc;
    padding-left: 0;
    margin-left: 15px;
}
.referenzen .accordion ul li {
    padding: 0 ;
}

/*.bg-gruen.referenzen {margin-bottom: 6rem !important;}*/
.bg-gruen.referenzen h2{   color:var(--gruen);  margin-top:0;}
.accordion { --bs-accordion-color: var(--gruen); --bs-accordion-btn-color: var(--gruen); --bs-accordion-active-color: var(--gruen); border: none; --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255,255,255, 0.5);}
.accordion-item {  background-color: #fff;  border: none;  color:var(--gruen);}
.accordion-body { color:var(--gruen);}
.accordion-body header h2{  display: none;}
.accordion-button { color: var(--gruen); background-color: transparent; font-size: 1.5rem;}
.accordion-button:not(.collapsed) { color: var(--gruen); background-color: transparent;}
hr {margin: 1rem auto; color: var(--gruen); opacity: 1; width: 75%;}
/*Source - https://stackoverflow.com/a
# Posted by Evans Sarpong
# Retrieved 2025-11-10, License - CC BY-SA 4.0*/
/*.accordion-button::after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.accordion-button.collapsed::after, .accordion-button:not(.collapsed)::after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }*/
.accordion-button::after {width: 2rem; height: 2rem; background-size: 2rem; margin-left: 1rem;}
.accordion-button.collapsed::after {background-image: url(../img/Icons/icon_plus.png);}
.accordion-button:not(.collapsed)::after {background-image:url(../img/Icons/icon_minus.png); transform: none;}
.bg-grau .col-lg-6.icon .ce-image{ padding: 1rem;}

/*------------------------slick slider------------*/
#slickid-671 .slick-prev, #slickid-671  .slick-next, #slickid-672 .slick-prev, #slickid-672  .slick-next, #slickid-769  .slick-prev, #slickid-769  .slick-next {
  width: 30px!important;
  height: 30px!important;
  z-index:10 !important;}
#slickid-671  .slick-prev::before, #slickid-671  .slick-next::before, #slickid-672  .slick-prev::before, #slickid-672  .slick-next::before, #slickid-769  .slick-prev::before, #slickid-769  .slick-next::before { opacity: 1!important;}

#usercentrics-root .bosbex{left: auto !important; right: 40px !important; }

/*------------------Seite SPENGLERARBEITEN-----------------------------------*/
#spenglerei .navbar-expand-lg .navbar-collapse{display: none!important;}
#spenglerei .bilder { color:#fff; position: relative;}
#spenglerei h1.text-center{margin-top:5rem;margin-bottom:2rem; font-size: 2.4rem;}
#spenglerei .bilder h2 {color:#fff; margin-top:0; margin-bottom:0,5rem;}
#spenglerei .bilder .btn-success, #spenglerei .warum .btn-success, #spenglerei .leistungen .btn-success  {color: #fff; background-color: var(--gruen); border-radius: 30px; padding: 0.5rem 2rem; }
#spenglerei .bilder p .btn-success, #spenglerei .warum p .btn-success,  #spenglerei .leistungen p .btn-success {font-size: 1.1rem;}
#spenglerei #c770 {margin-top: 2rem;}
#spenglerei .bilder .ce-textpic{border-left: 3px solid var(--gelb); left: 15%; position: absolute;  padding-left: 2rem; bottom: 10%;}
#spenglerei .banner{ display: none;}  
#spenglerei .slick-prev::before, #spenglerei .slick-next::before{font-size: 40px!important; color: var(--gruen)!important; opacity: 1!important; }
#spenglerei .slick-slide {padding: 1rem!important;}
#spenglerei #c754 img{ padding-right: 1rem; width: 40px!important;}
#spenglerei .meister{ bottom:0;right:6rem; position: absolute;}
#spenglerei .bg-grau.ansprechpartner{ margin-top:55px;}
#spenglerei .bg-grau .col-md-4 h3{font-size: 1.6rem;}
#spenglerei .bg-grau .col-md-6.kontakt p{margin-bottom: 5px;}
#spenglerei #c741.frame-type-text {padding-left:0; padding-right: 180px;}
#spenglerei .projekte h2{margin-top: 60px; margin-bottom: 30px;}
#spenglerei #c753 p {margin: 0 0 10px;}
#spenglerei .mail{ display: block;position: fixed; right:0; top: 250px;}
#spenglerei .mail img{width: auto;}

/*-------------------------Abschnitt mit Mann und counter--------------------------*/
.hero {
  position: relative;
  padding-top: 4rem; /* Platz über dem Mann */
}

/* Vollbreite Grünfläche */
.hero-bg {
/*  position: absolute;
  left: 0;*/
  width: 100vw;
  background: #008E40; /* Dein Grün */
  height: 356px;        /* Höhe der grünen Fläche */
/*  top:165px;   */         /* von unten starten */
  z-index: 1;
}

/* Mann ragt heraus */
.hero-img {
  position: absolute;
  z-index: 5;
  bottom:0; /* Höhe anpassen */
}

/* Text bleibt über dem Grün */
.hero h1 {
  position: relative;
  z-index: 5;
  /*margin-top:-520px;*/
  text-align: left;
}

/* Kreise stehen auf dem Grün */
.circles-row {
  position: relative;
  z-index: 5;
}
.col-md-4.circle{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.circle h4{
  font-size: 1.2rem;
  padding-bottom: 2rem;
}
.circle .frame-type-html{
  width:200px;
  height:180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1,8rem;
  font-weight: 700;  
  background-image : url(../img/Spenglerei/ellipse-neu.png);
  background-repeat: no-repeat;
}
.circle .frame-type-text{
/*  transform: translateY(-360px);*/
}

/*------------------counter neu TYPO3 12 auf Seite SPENGLERARBEITEN---------------*/
.counters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2rem;
  text-align: center;
  margin: 2rem 0;
}

/*.counter-box {
  padding-bottom: 1rem;
  padding-right: 1rem;
}*/

.counter {
  display: inline-block;
  font: 700 2.0rem/1.2 "Montserrat", sans-serif; 
}
.counter.quadratmeter {
  display: inline-block;
  font: 700 1.6rem/1.2 "Montserrat", sans-serif; 
}
span.counter{ color: #009540;}


/*-------------Ende Counter----------*/
/*------------Galerie-------------*/

#spenglerei .galerie .ce-row{ margin-bottom: 20px;}
#spenglerei .galerie .ce-column {margin-right: 30px;}
@media screen and (max-width: 1050px) {
  .inhalt p, h1, h2, h3, h4 {padding-left: 20px;padding-right: 20px;}
  .video *, .media2click-wrap div {max-width: 100%;}
  .bild-text .yt-video p {width: 100%;}
  .inhalt .frame-layout-3 {  padding: 0px 0 24px;}
  .frame-space-after-extra-large {  margin-bottom: 30px !important;}
  footer .ce-intext.ce-left .ce-gallery {margin-bottom: 0px;}
}
@media screen and (min-width:1800px)  {
.bild-text .col-md-6.warum{ padding-left: 300px;}
}
@media screen and (min-width:1500px) and (max-width:1799px) {
.bild-text .col-md-6.warum{ padding-left: 200px;}
 #spenglerei #c741.frame-type-text {padding-right: 100px;} 
}
@media screen and (min-width:1080px) and (max-width:1499px) {
.bild-text .col-md-6.warum{ padding-left: 100px;}
}

@media screen and (min-width:1400px)  {
.hero {  position: relative;  padding-top:11rem;}
}

@media screen and (min-width:1200px) and (max-width: 1399px) {
.hero {  position: relative;  padding-top: 8rem;}
  
}
  

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand {  margin-right: 3rem;}
  .navbar-brand img { width: 200px;}
  .navbar .nav-item > a.nav-link {  padding-left: 1rem;}
  .navbar-expand-lg .navbar-nav button.nav-link{ padding:0;  }
  .leitung .person-card-info { height: 250px; }
  /*-------------------------Seite Spenglerei mit Counter-----------------------------*/
 #spenglerei .meister{ right: 2rem;}
 #spenglerei .bg-grau.ansprechpartner { margin-top: 0px;}
 #spenglerei .circle h4{padding-left:0; padding-right:0;} 
 #spenglerei .bild-text .col-md-6 .frame-type-text{padding-left:0;}
 #spenglerei h3, #spenglerei .bg-grau .col-md-4 h3{font-size: 1.3rem;}
  #spenglerei #c741.frame-type-text { padding-left: 0; padding-right: 30px;}
 #spenglerei  .bild-text .col-md-6.warum{ padding-left: 30px;}
}

@media screen and (max-width: 991px) {
 body {font-size: small;}
.row {  margin-right: 0px;  margin-left: 0px;}
  /* Submenu - Standard: mobil untereinander */
.dropdown-menu-grid > li { width: 100%; }
  
  .navbar-brand {width: 33%; float:left; }
 .navbar-brand img {    width: 100%;max-width: 225px;}
  .navig {width: 66%;float: right;margin-top: 20px;}
  .tel {margin-left:150px;}
  .banner {margin-left: 20px; left:0}
  
  #sm-16995254459558447-4.dropdown-menu {  width: inherit !important; max-width: inherit !important;}
  #c111, #c113 {display: none;visibility: hidden;}
  #c164, #c198 {display: block;visibility: visible;}
  #c164 img, #c198 img {  width: 50vw;  height: 50vw;}
  
  #c6 img {border-bottom: 2px solid #009540;}
  
  /*.h1, h1 {  font-size: xx-large;}
  .h2, h2 {font-size: x-large;}
  .h3, h3 {font-size: medium;}*/
  .inhalt p, h1, h2, h3, h4 {padding: 0 20px;}
  	ul {  padding-left: 32px;}
  .inhalt .team p, .bild-text h2 {padding:1rem;}
  .bild-text .col-sm-6 .frame-type-text p {padding: 0;}
  .inhalt .frame-layout-1, .hoch {height: auto !important;}
  .logos img {max-width: 100%; height: auto;}
.stimmen .ce-border img {max-width: 90%;height: auto;}
  #referenzen .bg-gruen { padding: 10px 0;}  
  #referenzen .inhalt ul li { font-size:large;}
  footer {padding: 20px 15px;}
  footer .frame-space-before-large {  margin-top: 0px !important;}
  #c18 img {max-width: 100%;height: auto;}
  

  .navbar-light .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
.navbar-light .navbar-toggler{
  background-color: var(--gruen);
  border: 1px solid var(--gruen);
  color:var(--gruen);
}
  /* Caret (Pfeil) sichtbar + grün einfärben */ 
  .navbar .dropdown-toggle-split::after { display: inline-block; margin-left: .2rem; vertical-align: .1em; content: ""; border-top: .6em solid var(--gruen); border-right: .55em solid transparent; 
                                         border-bottom: 0; border-left: .55em solid transparent; position: absolute; right: 5px; top: 14px; }
  
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  /*----------------Seite TEAM--------------*/
  .person-card-info {  height: 150px;}
  .leitung .person-card-info { padding: 1rem 0; }
  .inhalt .team .funktion p{ padding: 0.5rem 1rem; margin: 0; hyphens: auto;}  
  .inhalt .team .funktion p:first-of-type{ padding-top:0; }
  .inhalt .frame-layout-2 { padding: 50px 2rem;}
  .text-in-spalten {    width: 100%;    column-count: 2;    column-gap: 30px;    padding: 10px 0;  }
  .referenzen ul li { padding: 0 0.5rem;}
  .circle .frame-type-html{width: 130px; margin-left:0.8rem; height: 130px; background-image: url(../img/Spenglerei/ellipse-130.png); }
  .counter{font: 700 1.5rem/1.2 "Montserrat", sans-serif;}
  .counter-box { padding-bottom: 0.75rem; padding-right: 0.75rem;}
  .circle h4{ font-size: 1.0rem; padding: 0 0 10px;}
  #spenglerei .meister{ right: 0;}
  #spenglerei .meister picture img {width: 220px;}
  #spenglerei .bg-grau .col-md-4 h3 {font-size: 1.2rem;}
  #spenglerei #c754 {padding-left: 20px;}
  #spenglerei .bg-grau.ansprechpartner {margin-top: 20px;}
   #spenglerei #c741.frame-type-text { padding-left: 0; padding-right: 30px;}
}

 @media screen and (max-width: 767px) {
   .header {height: 90px;}
   .bilder {padding-top: 80px;}
   .tel {visibility: hidden;display: none;}
   .logo, .navig {width:100%;}
   .navig {margin-top: 14px;position: absolute;}
   .nav {background-color: #fff;}
   .navbar-default .navbar-collapse {border:0;}
   .navbar-nav .open .dropdown-menu {     position: relative;}
   .dropdown-menu {width: 100% !important;     max-width: 100% !important;}
   .dropdown-menu li {     float: none !important;}
   .logos .col-sm-4 {width: 33%;float: left;}
   .logos .col-sm-3 {width: 25%;float: left;}
   .col-6 {width: 50%;float: left;}
   .referenzen ul {  display: block;}
   .ce-uploads li { padding-bottom: 18px;}
  
  #c18 { /* position: absolute; top: auto; bottom: 280px;  right: 0px;*/ visibility: hidden;    display: none;}
   #c18 img {width: 150px;}   
  .col-8 {float: none;  width: 100%;}
  .bewerbung .col-6 {float:none;margin-right: 40px; width:100%;}
  .col-sm-12, #c194 .ce-textpic {    width: 100%;  }   
   #c222 .ce-bodytext {width:100%;}

   /*------------ Seite Spenglerei----------------------*/
   .circle .frame-type-html{margin: 0 auto;}
   #spenglerei .meister{ position: relative!important; bottom:auto; right: auto; text-align: center;}
   #c756{display: none;} /*----grosses Bild----*/
   #c754 {display: flex; justify-content: center;} /*------------icons tel und mail */
   #c752 h3, #c753{text-align: center;}
   #spenglerei .bg-grau.ansprechpartner { margin-top: 0;}
   #spenglerei .meister picture img {max-width: 220px;}
 }


@media screen and (min-width: 576px) and (max-width: 767px) {
    #spenglerei bild-text .col-md-6 .frame-type-text { padding-right: 30px;  padding-left: 100px;}
    
}
@media screen and (max-width: 767px) {
  .marken img{ margin: 1rem 0;  }
  .bild-text .col-md-6.ps-lg-5, #spenglerei #c741.frame-type-text {max-width: 576px; margin: 0 auto; padding-top: 3rem;
    padding-bottom: 1rem;}
 .bild-text .col-md-6 .frame-type-text { padding-right: 15px; padding-left: 15px; }
  .bild-text .col-md-6.ps-lg-5 ul{ padding-left: 30px;}
  .navbar-brand{ width:60%;}
   .navbar-brand img {max-width:inherit;}
  #spenglerei .bilder p .btn-success {font-size: 1rem;}
  #spenglerei h1{ font-size: 1.6rem; hyphens: auto;}
   .inhalt p, h1, h2, h3, h4 {padding: 0 10px;}
  .bild-text h2 {padding: 0 10px; hyphens: auto;  }
  #spenglerei #c770 {margin-top: 0; margin-left: 5rem;}
}
@media screen and (max-width: 576px) {
#spenglerei #c741.frame-type-text {padding-left:15px; padding-right: 10px;}
}
@media screen and (max-width: 400px) {
.navbar-brand {   width: 53%;  }
   #spenglerei #c770 { margin-top: 0;  margin-left: 0;  }
  
}