/* Erstellt/Modifiziert durch KI der HCM Computer GmbH */
/* Oltmanns – Theme für Contao 5.7 + Bootstrap 5.3. Reihenfolge im Layout: bootstrap.min.css, dann diese Datei. */

/* ---------- Schrift lokal (keine Google-Fonts-Anfrage, DSGVO) ---------- */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/open-sans/open-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/open-sans/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/open-sans/open-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/open-sans/open-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/open-sans/open-sans-latin-700-normal.woff2') format('woff2'); }

/* ---------- Grundwerte aus dem Original ---------- */
:root {
  --olt-blau: #0072ba;
  --olt-rot: #ed1c24;
  --olt-grau: #dadada;
  --bs-body-font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --bs-link-color-rgb: 0, 114, 186;
  --bs-primary: #0072ba;
  --bs-primary-rgb: 0, 114, 186;
}

/* Erstellt/Modifiziert durch KI der HCM Computer GmbH */
/* Basis: rekonstruierte Contao-3.5-Stylesheets, Klassen auf Bootstrap 5 umgestellt (siehe README). */

/* ===== main ===== */
#startseite > div:nth-child(3) > h1, #startseite > div:nth-child(8) > h1, #startseite > div:nth-child(12) > h1 {
  margin-top: 40px!important;
}

.rechner.help-buttons {
  top:280px;
}

.front img, .center-image img {
  margin:0 auto;
}

.front > .box1 > h3, .back > .box2 > h3 {
  position: relative;
      bottom: -10em;
      padding-bottom: 8px;
      padding-top: 8px;
      background-color: rgba(255,255,255,0.9);
      font-size: 1em!important;
      color: #ed1c24!important;
      font-weight: 700;
  text-align:center;
}

.panel-flip {
  margin: 0 auto;
  	-webkit-perspective: 600px;
  	-moz-perspective: 600px;
}

.panel-flip .front {
  height: inherit;
  	top: 0;
  	z-index: 900;
  	-webkit-transform: rotateX(0deg) rotateY(0deg);
  	   -moz-transform: rotateX(0deg) rotateY(0deg);
  	-webkit-transform-style: preserve-3d;
  	   -moz-transform-style: preserve-3d;
  	-webkit-backface-visibility: hidden;
  	   -moz-backface-visibility: hidden;
  	-webkit-transition: all .4s ease-in-out;
  	   -moz-transition: all .4s ease-in-out;
  		-ms-transition: all .4s ease-in-out;
  		 -o-transition: all .4s ease-in-out;
  			transition: all .4s ease-in-out;
}

.panel-flip .back {
  height: inherit;
  	position: absolute;
  	top: -20px;
  	z-index: 1000;
  	-webkit-transform: rotateY(-180deg);
  	   -moz-transform: rotateY(-180deg);
  	-webkit-transform-style: preserve-3d;
  	   -moz-transform-style: preserve-3d;
  	-webkit-backface-visibility: hidden;
  	   -moz-backface-visibility: hidden;
  	-webkit-transition: all .4s ease-in-out;
  	   -moz-transition: all .4s ease-in-out;
  		-ms-transition: all .4s ease-in-out;
  		 -o-transition: all .4s ease-in-out;
  			transition: all .4s ease-in-out;
}

.panel-flip.flip .front {
  z-index: 900;
  	-webkit-transform: rotateY(180deg);
  	-moz-transform: rotateY(180deg);
}

.panel-flip.flip .back {
  z-index: 1000;
  	-webkit-transform: rotateX(0deg) rotateY(0deg);
  	-moz-transform: rotateX(0deg) rotateY(0deg);
}

.pull-input-left {
  float: left;
              margin-right: 20px;
              margin-bottom: 10px;
}

#f5 > div > div:nth-child(22) > label {
  width:280px!important;
}

#f5 > div > div:nth-child(13) > label {
  display:none;
}

#f5 .widget-reset,
#f5 .widget-submit {
  max-width: 250px;
              display: inline-block;
              margin-right: 20px;
}

#f5 > div > .widget-upload > div > div > button,
#ctrl_48,
#ctrl_51 {
  border-radius: 4px;
              background-color: buttonface;
              color: #333;
              width: 250px;
              border-color: transparent;
}

#ctrl_44 {
  margin-top: 50px;
}

*::-webkit-input-placeholder {
  color:#333!important;
}

*:-moz-placeholder {
  color:#333!important;
}

*::-moz-placeholder {
  color:#333!important;
}

*:-ms-input-placeholder {
  color:#333!important;
}

.select-bewerber {
  max-width: 512px;
}

.fillout-personal-plz {
  max-width:85px;
      margin-right:10px!important
}

.fillout-personal-ort {
  max-width:155px;
}

.fillout-personal {
  max-width: 250px;
              display: inline-block!important;
}

#ctrl_40_value,
#ctrl_41_value,
#ctrl_42_value,
#ctrl_43_value {
  max-width: 250px;
          border-radius: 4px!important;
}

#ctrl_44 > legend {
  font-size: 17px!important;
          border: none!important;
          margin-bottom: -5px!important;
          font-weight: 700;
}

#f5 .input-group {
  max-width: 520px;
}

#f5 .control-label {
  width: 265px;
          margin-top: 30px;
}

.onlinebewerbung.help-buttons {
  top:400px;
}

.livechat-icon,
.rueckruf-icon,
.notdienst-icon,
.kontakt-icon,
.rechner-icon,
.onlinebewerbung-icon {
  max-width:35px;
}

.help-buttons {
  width: 190px;
          height: 50px;
          background-color: #ed1c24;
          padding-top: 7px;
          padding-left: 10px;
          border-radius: 4px;
          position: fixed;
          right: -10px;
          top: 100px;
}

.rueckruf.help-buttons {
  top:160px;
}

.kontakt.help-buttons {
  top:340px;
}

.notdienst.help-buttons {
  top:220px;
}

.rueckruf-field > .widget-textarea > label {
  display: none;
}

.rueckrufservice-page .contact-button {
  display:none;
}

.helpdesk-menu .rueckruf-icon, .helpdesk-menu .faq-icon {
  margin-right:15px;
}

.helpdesk-menu a {
  color:#0072ba!important;
  text-decoration:none!important;
}

.helpdesk-entries {
  width:210px;
  margin-left:auto;
  margin-right:auto;
  height:100px;
}

.helpdesk-menu .icon-div {
  width:60px;
  background-color:#fff!important;
  line-height:1.2;
  height:100px;
}

.helpdesk-menu .fa {
  font-size: 14px;
}

.helpdesk-icon {
  width:50px;
  padding-top:5px;
}

.helpdesk-menu {
  text-align: center;
      background-color: #0072ba!important;
      padding-top: 1px;
      position: fixed;
      bottom: -150px;
      min-width: 320px;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
  max-height: 147px;
  z-index:999;
}

.helpdesk-menu h3, .helpdesk-menu h4 {
  color: #fff!important;
      padding-bottom: 8px;
}

ol {
  padding-left:0px;
}

.mod_customnav {
  word-wrap: break-word;
}

.mod_faqpage .toplink {
  display:none;
}

.mod_faqpage article {
  margin-bottom:35px;
}

.mod_faqpage > article > h4 {
  color:#0072ba!important;
}

.rueckruf-footer {
  max-width:600px;
  background-color:#dadada;
  margin-top: 15px;
  padding:10px;
}

#ctrl_21 {
  padding: 10px;
      background-color: #e21d3c;
      font-size: medium;
      color: #fff!important;
      text-decoration: none!important;
  width:200px;
}

.rueckruf-field {
  border: 3px solid #dadada!important;
      padding: 15px;
      max-width: 600px;
}

#rueckruf .select, #rueckruf .text {
  max-width: 30%;
      margin-left: 15px;
      display: inline-block;
}

#rueckruf .checkbox {
  margin-left:200px;
}

legend {
  width:auto;
      font-size: 14px!important;
  border: none!important;
      margin-bottom: -29px!important;
}

.site-entry > figure > figcaption > a {
  color:#fff!important;
  text-decoration:none!important;
}

.site-news-headline {
  max-width:70%;
}

#navbar-responsive-2 > nav > ul > li > a {
  word-spacing: 0px;
}

.mod-site-entry > figure > figcaption {
  padding-top: 0px!important;
}

a#scroll-top {
  border-radius: 0px;
      background: url(/files/custom/icons/Scroll-Top.png) no-repeat scroll center center #0072ba;
  border:1px solid #fff;
  	position: fixed;
      right: 20px;
      bottom: 80px;
      height: 42px;
      width: 42px;
      z-index: 9999;
      line-height: 3em;
  	transition: all 0.25s ease-in-out;
}

input[type="text"]::-webkit-input-placeholder {
  color: #0072ba;
}

input[type="text"]:-moz-placeholder {
  color: #0072ba;
}

input[type="text"]::-moz-placeholder {
  color: #0072ba;
}

input[type="text"]:-ms-input-placeholder {
  color: #0072ba;
}

#ctrl_2 {
  color: #0072ba!important;
      border-radius: 0px!important;
  background-color:#dadada!important;
}

#f1 {
  margin-top: 35px;
}

#f1 > div > div.widget.widget-explanation.form-group {
  margin-top: 93px;
}

.site-news-image {
  margin-right:20px;
}

.site-news-image img {
  max-height:150px;
  width:auto;
}

.site-news-date {
  background-color: #0072ba;
      color: #fff;
      padding: 20px 10px 20px;
      min-width: 89px;
      margin-right: 15px;
}

.site-news-entry {
  margin-bottom: 30px;
}

.team-image {
  border:2px solid #0072ba;
}

.h1, h1 {
  font-size: 25px!important;
      letter-spacing: 8px!important;
      margin-top: 64px!important;
  margin-bottom:40px!important;
}

.custom-side-nav ul {
  padding-left: 19px;
      color: #0072ba;
}

.custom-side-nav ul li span, .custom-side-nav ul li a {
  color:#000;
  text-transform:uppercase;
}

.custom-side-nav ul li.active {
  display:none;
}

.mod_customnav .invisible {
  display:none;
}

.home-news > .home-news-image img {
  width:auto;
  max-height:69px;
}

.home-news-date {
  background-color: #ed1c24;
      color: #fff;
      padding:24px 10px 24px;
      min-width: 89px;
  margin:0px;
}

.home-news-entry {
  background: #dadada;
      margin-bottom: 10px;
}

.home-news-headline {
  padding: 24px 10px 24px;
      min-width: 89px;
      margin: 0px;
}

.home-news-more {
  padding: 24px 10px 24px;
      min-width: 89px;
      margin: 0px;
}

.home-news a {
  text-decoration:none!important;
}

.contact-button-link {
  padding: 10px;
      background-color: #e21d3c;
      font-size: medium;
      color: #fff!important;
      text-decoration: none!important;
}

.contact-button {
  text-align: center;
      margin-bottom: 25px;
      margin-top: 40px;
}

.dropdown-menu>li>a {
  color:#fff!important;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
  color:#fff!important;
  background-color:#0072ba!important;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  background-color: #0072ba!important;
}

#navbar-responsive-2 {
  text-transform:uppercase;
}

#startseite > .ce_image > h3 {
  position: relative;
      bottom: -10em;
      padding-bottom: 8px;
      padding-top: 8px;
      background-color: rgba(255,255,255,0.9);
      font-size: 1em!important;
      color: #ed1c24!important;
      font-weight: 700;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
  background-color:#fff!important;
}

.caret {
  display:none!important;
}

.navbar-brand {
  height:auto!important;
}

.home > #wrapper > #container,.center-site > #wrapper > #container {
  text-align:center;
}

.center-site > #wrapper > #container ol {
  list-style-position: inside;
}

#navbar-responsive-2 {
  max-width: 800px;
      margin-right: 0;
      margin-left: auto;
}

.container {
  width:100%!important;
}

.ce_gallery {
  min-height: 190px;
}

#trends-auf-der-spur > div.ce_text > div > div.col-lg-6.col-md-6.col-6.mod-col > figure > img {
  max-width:220px;
  height:auto;
}

#trends-auf-der-spur > div.ce_text {
  margin-top: 15px;
      margin-bottom: 15px;
}

.text-leistung h5 {
  padding-top: 5px!important;
      padding-bottom: 5px!important;
}

.panel-default.ce_accordion:before, .text-leistung:before {
  content: "";
      display: block;
      background: none /* Bild /files/falk/icons/bullet.jpg fehlt im Export */;
      width: 6px;
      height: 6px;
      float: left;
      margin-top: 9px;
}

.panel-heading, .panel-collapse, .text-leistung h5, .text-leistung p {
  margin-left: 14px;
}

.img-footer-zweit {
  border:1px solid #777;
}

.rsts-skin-default .rsts-nav {
  text-align:center!important;
}

.rsts-skin-default .rsts-nav-bullets a {
  width: 15px!important;
      height: 15px!important;
      background-color: #777!important;
}

.rsts-skin-default .rsts-nav-bullets a:hover, .rsts-skin-default .rsts-nav-bullets a.active {
  background-color:#0072ba!important;
      -webkit-box-shadow: none!important;
      -moz-box-shadow: none!important;
      box-shadow: none!important;
}

.img-logo-header {
  padding-bottom: 25px;
      padding-top: 25px;
}

#header-image {
  max-width:180px;
}

.img-news {
  max-height: 200px;
      width: auto;
}

.panel-title {
  background-color: #fff;
}

#main-headline {
  padding-bottom:35px;
}

.ce_gallery > ul > li {
  margin-left:0px;
}

#ihre-beraterinnen > div > figure {
  position: relative;
      min-height: 250px;
      padding-right: 15px;
      padding-left: 15px;
}

.personal-text > div > div > figure > figcaption {
  text-align:center;
  color:#747100!important;
  font-weight:bold;
}

#header-image {
  z-index:999;
}

.personal-text {
  margin-top: 45px;
  margin-bottom: 45px;
}

.ce_gallery > ul {
  list-style:none;
  
  padding:0px;
  margin-top:50px;
}

.ce_gallery > ul > li {
  float:left;
  margin:10px;
}

.home #main {
  padding:0px!important;
  background-color:transparent;
  margin-top: 0px!important;
  margin-bottom: 0px!important;
}

#header > div > div.header-border > div > div > div {
  padding:0px!important;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border:none!important;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body,.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
  border:none!important;
}

.panel {
  margin-bottom: 20px!important;
      background-color: transparent!important;
      border: none!important;
      border-radius: 0!important;
      box-shadow: none!important;
}

.panel-heading {
  border:none!important;
  padding:0!important;
}

.panel-heading > div > strong,.text-head, .text-leistung h5 {
  color: #fff!important;
      width: 250px;
      padding-left: 5px;
      padding-top: 2px;
      padding-bottom: 2px;
      background-color: #c00034!important;
      margin-bottom: 5px;
}

.panel-heading {
  text-decoration:none!important;
      display: block;
      cursor: pointer;
}

.panel-body {
  padding:0!important;
}

.panel-title {
  font-size:14px!important;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active, .navbar-default .navbar-nav>.active, .navbar-default .navbar-nav>.active {
  background-color: #fff!important;
  color:#0072ba!important;
  text-decoration:underline;
  font-weight:bold;
}

#navbar-responsive-2 > nav > ul  a {
  display: block;
  
      margin: 0 1px;
}

#navbar-responsive-2 > nav > ul  a {
  padding: 3px 13px!important;
}

.dropdown-menu {
  border-radius:0px!important;
  background-color:#0072ba!important;
}

h1,h2,h3,h4,h5 {
  color:#333!important;
}

#header > div > nav > div {
  background-color:#fff;
  color:#000;
}

.navbar {
  margin-bottom:0!important;
}

.site-entry > figure > figcaption {
  background-color: #0072ba;
      padding-top: 20px;
      padding-bottom: 5px;
      text-align: center;
      color: #fff;
}

.site-entry > figure {
  border: 1px solid #0072ba;
}

.spacer {
  min-height:20px;
}

#main a,#main a:hover,#main a:visited {
  color:#000;
  text-decoration:underline;
}

#navbar-responsive-2 > nav > ul > li.sibling.last, #navbar-responsive-2 > nav > ul > li.active.last, #navbar-responsive-2 > nav > ul > li.last {
  border:none;
}

.navbar-default .navbar-nav>li>a {
  color:#000!important;
}

.home > #wrapper > #container {
  border-bottom:none;
}

#header > div > nav {
  border: none;
  background-color:#fff;
}

#header > div > div.container > div,#wrapper > #container, #main {
  background-color:#fff;
}

.footer-img,.img-footer {
  max-width: 90px;
  max-height: 90px;
}

.footer-img-text, .logo-footer p {
  max-width:90px;
}

.footer-block a, .footer-block a:hover, .footer-block a:visited {
  color:#fff;
  text-decoration: underline;
}

#footer a, #footer a:hover, #footer a:visited {
  color:#fff;
}

.footer-nav a {
  text-decoration:none;
}

#footer {
  background-color:#0072ba;
  color:#fff;
  font-weight:normal;
  word-wrap: break-word;
  margin-top:30px;
}

.footer-block {
  padding-top:35px;
}

.header-text > p {
  min-width: 300px;
  color:#be002e;
}

.header-text > p > a {
  text-decoration:underline;
  color:#be002e;
}

.padded-content {
  padding-left:25px;
  padding-right:25px;
}

.header-text {
  font-size: 14pt;
      padding-bottom: 25px;
}

.header-border {
  border-bottom: 3px solid #fff;
}

body {
  font-family: 'Open Sans'!important;
}

.border-text {
  color: #747100;
      margin-top: 100px;
  padding-left: 25px;
  padding-bottom: 25px;
}

/* ===== min-width-768px ===== */
@media (min-width: 768px) {
  #navbar-responsive-2 > nav > ul > li > ul > li {
    float: left;
        display: block;
        width: 100%;
  }
  
  #wrapper > #container, #footer .footer-container,#header > div > nav > div {
    width: 750px!important;
  }
  
  .icon-bar-info {
    display:none!important;
  }
  
  .mod-col-2 {
    min-height:150px!important;
  }
  
  #main {
    padding-left: 50px;
        padding-right: 50px;
  }
  
  #header > div > nav > div, #navbar-responsive-2 {
    padding: 0!important;
  }
  
  #navbar-responsive-2 > nav > ul > li.sibling.first, #navbar-responsive-2 > nav > ul > li.sibling, #navbar-responsive-2 > nav > ul > li.active,#navbar-responsive-2 > nav > ul > li {
    border-right: 3px solid #fff;
  }
  
  #navbar-responsive-2 > nav > ul {
    width: 100%;
        height: 109.08px;
        display: table;
    padding-bottom: 10px;
  }
  
  #navbar-responsive-2 > nav > ul li {
    display: table-cell;
        height: 100%;
        vertical-align: bottom;
  }
  
  .navbar-nav>li {
    float: none!important;
  }
  
  .image-responsive {
    max-height:250px;
  }
  
  .header-text {
    position:absolute;
    bottom:0;
  }
}

/* ===== min-width-992px ===== */
@media (min-width: 992px) {
  ul.nav li.submenu:hover > ul.dropdown-menu {
    display:block;
  }
  
  #wrapper > #container, #footer .footer-container,#header > div > nav > div {
    width: 970px!important;
  }
  
  .mod-col-1 {
    padding:0px!important;
  }
  
  .mod-col-2 {
    padding-right: 0px!important;
        max-width: 260px;
  }
  
  .footer-img, .img-footer {
    position: absolute;
            margin-top: -50px;
  }
  
  .footer-img-text {
    padding-top:40px;
  }
}

/* ===== max-width-767px ===== */
@media (max-width: 767px) {
  .help-buttons {
    right: -142px!important;
  }
  
  #rueckruf .select, #rueckruf .text {
    max-width: 85%!important;
  }
  
  legend {
    margin-bottom: 0px!important;
  }
  
  #rueckruf .checkbox {
    margin-left: 0px!important;
  }
  
  .home-news-more, .home-news-headline {
    padding: 14px 10px 14px!important;
  }
  
  h1 {
    font-size: 16px!important
  }
  
  .site-news-date {
    margin-right: 8px!important;
  }
  
  .site-news-image {
    margin-right:0px!important;
  }
  
  .team-image {
    min-width:85px;
  }
  
  .site-entry > figure > figcaption {
    font-size: 10px;
  }
  
  #header > div > nav > div > a > img {
    max-width:150px!important;
  }
  
  .mod-col-1 {
    padding:0px!important;
  }
  
  #footer > div > div > div > div {
    min-height:150px;
  }
  
  #main {
    padding-left: 15px;
        padding-right: 15px;
  }
  
  #header > div > nav > div {
    text-align: right;
  }
  
  .navbar-toggle {
    float:none!important;
  }
}

/* ===== IOS ===== */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html, body {
    width:100%;
    overflow-x:hidden;
  }
}

/* ===== min-width-1200px ===== */
@media (min-width: 1200px) {
  #wrapper > #container, #footer .footer-container,#header > div > nav > div {
    width: 1170px!important;
  }
}


/* ===== Ersatz für die entfernten Bootstrap-3-Hilfsklassen (gleich hohe Spalten) ===== */
.row-eq-height, .set-flex, .row-height, .row-sm-height, .row-md-height { display: flex; flex-wrap: wrap; }
.col-xs-top, .col-sm-top, .col-md-top, .col-lg-top, .col-top { align-self: flex-start; }
.col-xs-middle, .col-sm-middle, .col-md-middle, .col-lg-middle, .col-middle { align-self: center; }
.col-xs-bottom, .col-sm-bottom, .col-md-bottom, .col-lg-bottom, .col-bottom { align-self: flex-end; }

/* ===== Artikel im Hauptbereich als Zeile =====
   In Bootstrap 3 lagen die Spalten-Elemente (col-…) per float nebeneinander. Bootstrap 5 braucht einen Flex-Container. */
#main .mod_article { --bs-gutter-x: 1.5rem; display: flex; flex-wrap: wrap; margin-left: calc(-.5 * var(--bs-gutter-x)); margin-right: calc(-.5 * var(--bs-gutter-x)); }
:where(#main .mod_article) > * { flex: 0 0 auto; width: 100%; max-width: 100%; padding-left: calc(.5 * var(--bs-gutter-x)); padding-right: calc(.5 * var(--bs-gutter-x)); }

/* ===== Ersetzte Content-Templates (CSS-Klassen werden von tools/migrate-bs3-classes.php gesetzt) ===== */
.center-image figure, .center-image img { margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto; }
.team-entry::after { content: ""; display: block; clear: both; }
.team-entry figure { float: left; width: 16.66%; margin: 0 8.33% 1rem 0; }
.team-entry figure img { max-width: 100%; height: auto; }

/* ===== Navigation (neues Markup aus templates/nav_bs5_dropdown.html5 + snippets/header-navbar.html) ===== */
.navbar-default { background-color: #fff; }
.navbar-default .navbar-nav .nav-link,
.navbar-default .navbar-nav strong.nav-link { color: #333; font-weight: 600; }
.navbar-default .navbar-nav .active > .nav-link,
.navbar-default .navbar-nav .nav-link:hover,
.navbar-default .navbar-nav .nav-link:focus { color: var(--olt-blau); }
.navbar-default .nav-item.dropdown { display: flex; flex-wrap: wrap; align-items: center; }
.navbar-default .nav-item.dropdown > .dropdown-menu { flex-basis: 100%; }
.navbar-default .dropdown-toggle-split { color: #333; padding: .25rem .5rem; }
.navbar-default .dropdown-menu { border-radius: 0; }
@media (min-width: 992px) { .navbar-default .nav-item.dropdown { position: relative; } .navbar-default .nav-item.dropdown > .dropdown-menu { position: absolute; top: 100%; left: 0; } }
.navbar-default .dropdown-item.active,
.navbar-default .dropdown-item:active { background-color: var(--olt-blau); color: #fff; }
.navbar-toggler { border-color: transparent; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(0, 114, 186, .35); }
.icon-bar-info { font-size: .9rem; margin-right: .35rem; vertical-align: middle; }
@media (min-width: 992px) {
  /* Untermenü auf dem Desktop bei Hover öffnen, der Pfeil-Button bleibt für Tastatur/Touch */
  .navbar-default .nav-item.dropdown:hover > .dropdown-menu,
  .navbar-default .nav-item.dropdown:focus-within > .dropdown-menu { display: block; margin-top: 0; }
}

/* ===== Startseiten-Kacheln mit Flip-Effekt ohne eigenes Template =====
   Standard-Bildelement mit Überschrift + Link, CSS-Klasse "home-entry-flip" im Element setzen. */
.home-entry-flip { position: relative; overflow: hidden; text-align: center; }
.home-entry-flip figure { margin: 0; }
.home-entry-flip img { display: block; margin: 0 auto; max-width: 100%; height: auto; transition: transform .4s ease-in-out; }
.home-entry-flip :is(h2, h3, h4) {
  position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2; margin: 0; padding: 8px;
  background: rgba(255, 255, 255, .9); color: var(--olt-rot); font-size: 1rem; font-weight: 700;
}
.home-entry-flip a::after {
  content: "mehr"; position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 114, 186, .85); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  opacity: 0; transition: opacity .4s ease-in-out;
}
.home-entry-flip:hover a::after, .home-entry-flip a:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home-entry-flip img, .home-entry-flip a::after { transition: none; } }

/* ===== Scroll-Top-Button (theme.js) ===== */
#scroll-top { position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px; display: none;
  background: url(/files/custom/icons/Scroll-Top.png) center / contain no-repeat; z-index: 1030; }
#scroll-top.is-visible { display: block; }

/* ===== Helpdesk-Leiste (theme.js) ===== */
#helpdesk-menu { transition: bottom 1.5s ease; }
#helpdesk-menu.is-collapsed { bottom: -100px !important; }
#helpdesk-menu.is-open { bottom: 0 !important; }


/* ===== Contao-5-Anpassungen nach Sichtvergleich mit der Altseite (06.11.2026) =====
   Erstellt/Modifiziert durch KI der HCM Computer GmbH
   Hintergrund: Das alte Seiten-Template fe_bootstrap gab #container die Klasse "container" (zentriert)
   und setzte den Header-Slider in einen vollbreiten Container. fe_page (Contao 5) tut das nicht. */

/* 1. Inhaltsbereich wieder zentrieren (Breiten 750/970/1170 px kommen aus den Regeln oben) */
#wrapper > #container { margin-left: auto; margin-right: auto; }

/* 2. Header-Slider wie früher über die volle Breite (Bootstrap 5 begrenzt .container per max-width) */
#header .header-border > .container { max-width: none; padding-left: 0; padding-right: 0; }
#header .header-border > .container > .row { margin-left: 0; margin-right: 0; }

/* 3. Navigation: Tabellen-Layout aus Bootstrap 3 nur auf dem Desktop, wo das BS5-Menü ausgeklappt ist (ab 992 px) */
@media (max-width: 991.98px) {
  #navbar-responsive-2 > nav > ul { display: flex; flex-direction: column; height: auto; padding-bottom: 0; }
  #navbar-responsive-2 > nav > ul li { display: block; height: auto; }
  #navbar-responsive-2 > nav > ul > li.nav-item.dropdown { display: flex; flex-wrap: wrap; align-items: center; }
  #navbar-responsive-2 > nav > ul > li > ul > li { float: none; }
  #navbar-responsive-2 > nav > ul > li { border-right: 0 !important; }
}
@media (min-width: 992px) {
  /* Pfeil-Button ausblenden: Untermenü öffnet per Hover bzw. Tastaturfokus (focus-within), Texte stehen wieder auf einer Linie */
  #navbar-responsive-2 .dropdown-toggle-split { display: none; }
  #navbar-responsive-2 > nav > ul > li.nav-item.dropdown { display: table-cell; position: relative; }
  #navbar-responsive-2 > nav > ul > li > .dropdown-menu { top: 100%; left: 0; }
}

/* 4. Aktiver Menüpunkt wird in Contao als <strong> ausgegeben – gleiche Abstände wie die Links (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
#navbar-responsive-2 > nav > ul strong.nav-link { display: block; margin: 0 1px; padding: 3px 13px !important; }

/* 5. Handy/Tablet (< 992 px) wie die Altseite: Logo oben über die volle Breite, darunter rechts der Menü-Button,
      Menüpunkte rechtsbündig untereinander. #main bekommt die Innenabstände der früheren col-xs-12 zurück,
      sonst ragen die Artikel-Zeilen (negativer Rand) 12 px über den Bildschirm. (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
@media (max-width: 767.98px) {
  #main { padding-left: .75rem; padding-right: .75rem; }
}
@media (max-width: 991.98px) {
  #header nav > .container { flex-wrap: wrap; }
  #header .navbar-brand { flex: 0 0 100%; margin-right: 0; text-align: center; }
  #header .navbar-brand img { display: inline-block; }
  #header .navbar-toggler { margin-left: auto; }
  #navbar-responsive-2 > nav > ul > li.nav-item.dropdown { justify-content: flex-end; }
  #navbar-responsive-2 > nav > ul > li > .nav-link { text-align: right; }
  #navbar-responsive-2 > nav > ul > li.nav-item.dropdown > .nav-link { flex: 1 1 auto; }
  #navbar-responsive-2 .dropdown-toggle-split { flex: 0 0 2rem; width: 2rem; padding-left: 0; padding-right: 0; }
  #navbar-responsive-2 > nav > ul > li.nav-item:not(.dropdown) > .nav-link { margin-right: 2rem; }
  #navbar-responsive-2 .dropdown-menu { text-align: right; border: 0; }
}

/* 6. Handy: Menü links neben den festen roten Service-Buttons halten, sonst verdecken diese die Untermenü-Pfeile
      (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
@media (max-width: 991.98px) {
  #navbar-responsive-2 { padding-right: 3.25rem !important; }
}


/* 7. OpenStreetMap-Karte als Zwei-Klick-Lösung (Seite Kontakt) – Erstellt/Modifiziert durch KI der HCM Computer GmbH */
.osm-consent { margin: 1.5rem 0; }
.osm-consent__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  min-height: 350px; padding: 2rem 1.5rem; text-align: center;
  background: #f2f2f2; border: 1px solid #dadada;
}
.osm-consent__address { margin: 0; font-size: 1.1rem; }
.osm-consent__note { margin: 0; max-width: 34rem; font-size: .9rem; color: #555; }
.osm-consent__button { background-color: #ed1c24; border-color: #ed1c24; color: #fff; font-weight: 600; padding: .5rem 1.5rem; }
.osm-consent__button:hover, .osm-consent__button:focus { background-color: #be002e; border-color: #be002e; color: #fff; }
.osm-consent__frame { display: block; width: 100%; height: 350px; border: 1px solid #dadada; }
.osm-consent__credit, .osm-consent__links { margin: .4rem 0 0; font-size: .85rem; }

/* 8. Formulare – Contao 5 gibt kein Bootstrap-Markup mehr aus (früher: form-group, form-control, col-lg-3/9)
      und die <form>-Tags tragen keine IDs (f1, f2, f5) mehr. Die Formulare werden hier über ein eindeutiges
      Feld per :has() angesprochen, damit keine Datenbankänderung nötig ist:
        Suche = Feld ctrl_2, Kontakt = ctrl_4, Rückruf = Wrapper #rueckruf, Bewerbung = ctrl_44.
      (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */

/* 8a. Eingabefelder wie früher .form-control (Bootstrap 3) */
.ce_form input.text, .ce_form input[type="text"], .ce_form input[type="email"], .ce_form input[type="tel"],
.ce_form input[type="number"], .ce_form textarea, .ce_form select {
  display: block; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 1.42857; color: #555;
  background-color: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.ce_form input.text, .ce_form select { height: 34px; }
.ce_form input:focus, .ce_form textarea:focus, .ce_form select:focus {
  border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
.ce_form .formbody > .widget { margin-bottom: 15px; }
.ce_form label { font-weight: 700; margin-bottom: 5px; }
.ce_form .checkbox_container { border: 0; padding: 0; margin: 0; }
.ce_form .checkbox_container > span { display: flex; gap: .5rem; align-items: flex-start; }
.ce_form .checkbox_container label { font-weight: 400; margin: 0; }
.ce_form .checkbox_container input[type="checkbox"] { margin-top: .3rem; flex: 0 0 auto; }
.ce_form button.submit {
  display: inline-block; padding: 6px 12px; font-size: 14px; line-height: 1.42857; color: #333;
  background-color: #fff; border: 1px solid #ccc; border-radius: 4px;
}
.ce_form button.submit:hover, .ce_form button.submit:focus { background-color: #e6e6e6; border-color: #adadad; }

/* 8b. Kontaktformular: Beschriftung links (25 %), Feld rechts (75 %) wie früher col-lg-3 / col-lg-9 */
@media (min-width: 992px) {
  .ce_form:has(#ctrl_4) .formbody > .widget { display: grid; grid-template-columns: 25% 75%; align-items: start; }
  .ce_form:has(#ctrl_4) .formbody > .widget > label { grid-column: 1; padding: 7px 15px 0 0; }
  .ce_form:has(#ctrl_4) .formbody > .widget > :not(label) { grid-column: 2; }
}

/* 8c. Frühere #f1-Regeln (Suchformular) */
.ce_form:has(#ctrl_2) { margin-top: 35px; }
.ce_form:has(#ctrl_2) .formbody > .widget-explanation { margin-top: 93px; }

/* 8d. Frühere #f5-Regeln (Bewerbungsformular); nth-child zählt wie früher die zwei versteckten Felder mit */
.ce_form:has(#ctrl_44) .formbody > div:nth-child(22) > label { width: 280px !important; }
.ce_form:has(#ctrl_44) .formbody > div:nth-child(13) > label { display: none; }
.ce_form:has(#ctrl_44) .widget-reset,
.ce_form:has(#ctrl_44) .widget-submit { max-width: 250px; display: inline-block; margin-right: 20px; }
.ce_form:has(#ctrl_44) .input-group { max-width: 520px; }
.ce_form:has(#ctrl_44) .widget-upload input[type="file"] { max-width: 520px; }

/* 8e. Kontaktformular: Beschriftungen rechtsbündig wie früher .form-horizontal (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
@media (min-width: 992px) { .ce_form:has(#ctrl_4) .formbody > .widget > label { text-align: right; } }

/* 8f. Contao setzt in Pflichtfeld-Beschriftungen <span class="invisible">Pflichtfeld</span> für Screenreader.
       Bootstrap 5 definiert .invisible als visibility:hidden (nimmt Platz ein) – hier wieder nur für Screenreader.
       (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
.ce_form label .invisible, .ce_form legend .invisible {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; visibility: visible;
}

/* 9. Bewerbungsformular neu geordnet (12-Spalten-Raster statt der alten Floats)
      Felder: 27 Anrede, 28 Vorname, 29 Name, 30 Geburtsdatum, 31 Geburtsort, 32 Nationalität, 33 Straße,
      34 PLZ, 35 Ort, 36 Land, 37 Telefon, 38 Mobil, 39 E-Mail, 40 Eintrittstermin, 41–43 Uploads.
      (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
.ce_form:has(#ctrl_44) .formbody {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 15px; max-width: 900px;
}
.ce_form:has(#ctrl_44) .formbody > * { grid-column: 1 / -1; }
.ce_form:has(#ctrl_44) .formbody > input[type="hidden"] { display: none; }
/* alte Float-/Breitenregeln (.fillout-personal, .pull-input-left, nth-child) neutralisieren */
.ce_form:has(#ctrl_44) .formbody > .widget,
.ce_form:has(#ctrl_44) .formbody > .widget input,
.ce_form:has(#ctrl_44) .formbody > .widget select {
  float: none !important; display: block !important; max-width: none !important; width: 100% !important; margin-right: 0 !important;
}
.ce_form:has(#ctrl_44) .formbody > .widget > label { display: block !important; width: auto !important; margin-top: 0; }
/* Straße hat einen Platzhalter – Beschriftung nur für Screenreader */
.ce_form:has(#ctrl_44) .widget:has(> #ctrl_33) > label {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
}
.ce_form:has(#ctrl_44) .formbody > .widget-select:has(> #ctrl_25) { max-width: 512px !important; }
.ce_form:has(#ctrl_44) .formbody > .widget-upload input[type="file"] { padding: 4px; height: auto; }
.ce_form:has(#ctrl_44) .formbody > .widget-checkbox,
.ce_form:has(#ctrl_44) .formbody > .widget-submit { margin-top: 10px; }
.ce_form:has(#ctrl_44) .formbody > .widget-submit { max-width: none; }
.ce_form:has(#ctrl_44) .formbody > .widget-submit button { width: auto !important; min-width: 250px; }
.ce_form:has(#ctrl_44) .checkbox_container > legend { font-size: 1rem !important; font-weight: 700; margin-bottom: .5rem !important; }
.ce_form:has(#ctrl_44) .checkbox_container > span { display: flex !important; }
.ce_form:has(#ctrl_44) .checkbox_container input[type="checkbox"] { width: auto !important; display: inline-block !important; }
.ce_form:has(#ctrl_44) #ctrl_44 { margin-top: 20px; }
@media (min-width: 768px) {
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_27) { grid-column: span 2; }
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_28),
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_29) { grid-column: span 5; }
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_30),
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_31),
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_32) { grid-column: span 4; }
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_34) { grid-column: span 3; }
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_35) { grid-column: span 6; }
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_36) { grid-column: span 3; }
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_37),
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_38),
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_39) { grid-column: span 4; }
  .ce_form:has(#ctrl_44) .widget:has(> #ctrl_40) { grid-column: span 6; }
  .ce_form:has(#ctrl_44) .formbody > .widget-upload { grid-column: span 6; }
}

/* 9b. Bootstrap 5 lässt <legend> nach links floaten – in Formularen wieder als Überschrift über den Optionen.
       Uploads im Bewerbungsformular in einer eigenen Zeile nebeneinander. (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
.ce_form legend { float: none !important; width: 100% !important; }
.ce_form .checkbox_container > span + span { margin-top: .15rem; }
.ce_form:has(#ctrl_44) .formbody > .widget-upload { align-self: end; }
@media (min-width: 768px) {
  .ce_form:has(#ctrl_44) .formbody > .widget-upload { grid-column: span 4; }
  .ce_form:has(#ctrl_44) .formbody > .widget-upload:has(> #ctrl_41) { grid-column: 1 / span 4; }
}

/* 10. Kundenrückmeldung 06.11.2026 (Erstellt/Modifiziert durch KI der HCM Computer GmbH)
   a) Rote Service-Buttons rechts: Bootstrap 5 unterstreicht Links standardmäßig (Bootstrap 3 nicht) */
.help-buttons a, .help-buttons a:hover, .help-buttons a:focus { text-decoration: none !important; }
/* b) Navigation: Ist ein Weiterleitungs-Menüpunkt (z. B. Kundendienst) aktiv, den übergeordneten Pfad (Leistungen)
      nicht mit hervorheben – sonst sind zwei Menüpunkte markiert */
#navbar-responsive-2 > nav > ul:has(> li.forward.active) > li.trail:not(.forward),
#navbar-responsive-2 > nav > ul:has(> li.forward.active) > li.trail:not(.forward) > .nav-link {
  color: #000 !important; text-decoration: none !important; font-weight: 600 !important; background-color: transparent !important;
}
/* c) Sprunglink „Navigation überspringen“: Bootstrap-5-.invisible nimmt Platz ein – nur für Screenreader */
.mod_navigation > a.invisible, .mod_customnav > a.invisible {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important;
}
/* d) Nachrichten (news_full wie auf der Altseite) */
.site-news-image img { max-width: 100%; height: auto; }
.site-news-entry { margin-left: 0; margin-right: 0; }
.site-news-entry::after { content: ""; display: block; clear: both; }

/* 10e. News: .row-Kinder bekommen in Bootstrap 5 Innenabstand – auf der Altseite nicht (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
.site-news-entry > .site-news { padding-left: 0; padding-right: 0; }

/* 11. Zwei-Klick-Hinweis für den Heizungsrechner (gleiche Optik wie die Karte) – Erstellt/Modifiziert durch KI der HCM Computer GmbH */
.consent-box {
  display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: 1.5rem 0; padding: 2rem 1.5rem;
  text-align: center; background: #f2f2f2; border: 1px solid #dadada;
}
.consent-box__title, .consent-box__note { margin: 0; }
.consent-box__note { max-width: 34rem; font-size: .9rem; color: #555; }
.consent-box__button { background-color: #ed1c24; border-color: #ed1c24; color: #fff; font-weight: 600; padding: .5rem 1.5rem; }
.consent-box__button:hover, .consent-box__button:focus { background-color: #be002e; border-color: #be002e; color: #fff; }

/* 12. Startseiten-News (news_latest wie früher news_latest_home) und Contao-Klasse .invisible
       Contao nutzt .invisible für reine Screenreader-Texte (z. B. „Weiterlesen <span class="invisible">Titel</span>“),
       Bootstrap 5 macht daraus visibility:hidden mit Platzbedarf. (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
.invisible {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.home-news-entry { margin-left: 0; margin-right: 0; }
.home-news-entry > .home-news { padding-left: 0; padding-right: 0; }
.home-news-entry::after, .home-news::after { content: ""; display: block; clear: both; }
.home-news-image img { max-width: 100%; height: auto; }

/* 13. Fußzeile: Die alten Texte nutzten das Template ce_text_footer mit col-lg-3/col-md-4/col-sm-6 – heute nur noch
       Klasse "footer-block". Spalten wieder wie früher (BS3 sm/md/lg = BS5 md/lg/xl). Der Footer-Artikel legt zusätzlich
       einen eigenen .container an, obwohl das HTML-Modul „Resources - Footer“ schon einen öffnet – den inneren neutralisieren.
       (Erstellt/Modifiziert durch KI der HCM Computer GmbH) */
#footer .footer-container .footer-container { width: auto !important; max-width: none; padding-left: 0; padding-right: 0; margin: 0; }
#footer .footer-container .footer-container > .row { margin-left: 0; margin-right: 0; }
#footer .row-sm-height { display: flex; flex-wrap: wrap; }
#footer .row-sm-height > .footer-block,
#footer .row-sm-height > .ce_form { flex: 0 0 auto; width: 100%; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px)  { #footer .row-sm-height > .footer-block, #footer .row-sm-height > .ce_form { width: 50%; } }
@media (min-width: 992px)  { #footer .row-sm-height > .footer-block { width: 33.3333%; } #footer .row-sm-height > .ce_form { width: 25%; } }
@media (min-width: 1200px) { #footer .row-sm-height > .footer-block, #footer .row-sm-height > .ce_form { width: 25%; } }