/* INS ALLGEMEINE CSS ÜBERNEHMEN */

/*
@media (min-width: 1280px) {
.news-startseite h4 {
  font-size: 20px;
  line-height:120%;
}
  .news-startseite p {
  font-size: 16px;
  line-height:110%;
}
}
*/

/*
table, .ce-table {
  display:table;
  width: 100%;
}
*/

/*width definitions for form elements

@media screen and (min-width:1400px) {
.col-xxl-3 {
  width:33%;
}
.col-xxl-4 {
  width:25%;
}  

}  

@media screen and (min-width:1200px) and (max-width:1399.9px) {
.col-xl-3 {
  width:33%;
}
.col-xl-4 {
  width:25%;
}  
}

@media screen and (min-width:992px) and (max-width:1199.9px) {
.col-lg-3 {
  width:33%;
}
.col-lg-4 {
  width:25%;
}  
}

@media screen and (min-width:768px) and (max-width:991.9px) {
.col-md-3 {
  width:33%;
}
.col-md-4 {
  width:25%;
}  
}
*/

/*
.img-max-350 {
  position: relative;
  min-height: 400px; 

}


.img-max-350 .frame-type-sitepackage_image {
  position: relative;
  width:100%;
  height:100%;
}

.img-max-350 .frame-type-sitepackage_image img {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 350px;
}

*/

/* Mobile Menu ohne Linien bei den Bädern */

@media (max-width: 767.8px) {

  nav div.text-grey-headlines-100:has(> a[href="/baeder/parkbad"]),
  nav div.text-grey-headlines-100:has(> a[href="/baeder/panoramabad"]),
  nav div.text-grey-headlines-100:has(> a[href="/baeder/nizzabad"]) {
    border: 0 !important;
    margin-bottom: -25px;
    margin-top: 10px;
  }

}

/* Abstand mobil */
@media screen and (max-width:767.8px) {
.abstand-xs {
  padding-left:15px;
  padding-right:15px;
}
}  

/* Menü Heute geöffnet ausblenden */

/*.tx-nl-openinghours p:first-of-type {
  display:none;
}
*/

.very-light-grey {
  background-color:rgb(245, 245, 245)!important;
}

.border-top-container {
  border-top:1px solid rgb(29,29,27);
  margin-top:20px;
  padding-top:30px;
}


.video-headline {
  font-size:1em;
  margin-bottom:10px;
  color: rgb(29 29 27);
}

.video-transkript {
  margin-top:-35px;
}

.video-transkript h4 {
  font-size:1em;
  font-weight:300;
  margin-top:10px;
  margin-bottom:5px;
}

.transkript-text {
  margin-top:15px;
}

/* =========================
   Video-Transkript Accordion
   (details/summary) – kompakt
   ========================= */

/* Rahmen wie bei eurem Akkordeon */
.video-transkript details{
  border: 0px solid #e3e6ea;
  border-radius: 0;
  background: #fff;       /* hellgrauer Balken-Look */
  margin-top: .5rem;
  overflow: hidden;          /* saubere Kanten bei open */
}

/* Summary = Kopfzeile */
.video-transkript summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: .55rem .85rem;    /* weniger Padding */
  font-weight: 300;
  line-height: 1.25;

  background: #f3f5f7;
}

/* Standard-Marker entfernen */
.video-transkript summary::-webkit-details-marker{ display: none; }

/* Chevron rechts (wie im Screenshot) */
.video-transkript summary::after{
  content: "▾";
  font-size: 1rem;
  line-height: 1;
  margin-left: .75rem;
  transform: rotate(0deg);
  transition: transform .15s ease;
  opacity: .8;
}

/* Open-Zustand: Chevron nach oben + etwas dunklerer Header */
.video-transkript details[open] summary{
  background: #eef1f4;
  border-bottom: 0px solid #e3e6ea;
}
.video-transkript details[open] summary::after{
  transform: rotate(180deg);
}

/* Hover subtil */
.video-transkript summary:hover{
  background: #eef1f4;
}

/* Fokus sichtbar (für Tastatur wichtig) */
.video-transkript summary:focus-visible{
  outline: 2px solid #0a5aa5;  /* ggf. eure Markenfarbe */
  outline-offset: 2px;
}

/* Inhalt (Transkripttext) */
.video-transkript .transkript-text{
  padding: .65rem .85rem .85rem;  /* kompakt */
  background: #fff;               /* Textbereich weiß wie bei euch */
  font-size: .95rem;
  line-height: 1.55;
}

/* Optional: Absätze im Transkript etwas enger */
.video-transkript .transkript-text p{
  margin: 0 0 .75rem;
}
.video-transkript .transkript-text p:last-child{
  margin-bottom: 0;
}



.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.text-big {
  font-size:1.3em;
  line-height:120%;
}

.text-huge {
  font-size:1.6em;
  line-height:130%;
}

/* KUNDENABLESUNG */

.kundenablesung {
  margin-left:-10px;
}

.kundenablesung input:focus-visible {
  outline: 0 !important;
}

.kundenablesung input[type="text"], .kundenablesung input[type="number"], .kundenablesung input[type="date"] {
  background-color: rgb(236 236 236);
  width:100%;
  padding:10px 15px;
 }

.kundenablesung input[type="button"] {
  background-color: rgb(22 65 148);
  padding-top: var(--small);
  padding-bottom: var(--small);
  padding-left: 50px;
  padding-right: 50px;
  color:#fff;
  font-weight:bold;
  margin-top: 30px !important;
  cursor:pointer;
 }

.kundenablesung svg {
  display: inline-block;
  margin-right: 5px;
  fill: #fff;
}

.kundenablesung label.btn {
  background-color: rgb(22 65 148);
  padding: 10px 20px;
  color:#fff;
  cursor:pointer;
}

label[for="clMDE_OkCheck"] {
 padding-left: 60px!important;
}

/* LOYJOY */

.loyjoy-button {
  border-radius: 50%;
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px rgba(0,0,0,0.14), 0px 1px 18px rgba(0,0,0,0.12);
  cursor:pointer;
  z-index:1;
}

.loyjoy-button:hover {
background-color: #002d61;
  transition: background-color 0.2s ease-in-out;
}  

@media screen and (min-width:768.8px) {
.loyjoy-button {
  position: fixed;
  right:40px;
  bottom:200px;
  width:64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
  .loyjoy-button img {
  height: auto;  
width: 40px;    
}
}  

@media screen and (min-width:628.8px) and (max-width:768px) {
.loyjoy-button {
  position: fixed;
  right:40px;
  bottom:150px;
  width:44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
 .loyjoy-button img {
height: auto;  
width: 26px;    
}
}

@media screen and (max-width:628px) {
.loyjoy-button {
  position: fixed;
  right:24px;
  bottom:135px;
  width:44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loyjoy-button img {
height: auto;  
width: 26px;    
}
}

/* SCROLL */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* Schwimmkurse 2025 */


.schwimmkurse-container .kurs a {
  font-weight:bold;
  text-decoration:underline;
}

/* Basis */
.kurs {
  display: grid;
  border: 1px solid #0069b4;
  gap: .2rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "kurstyp"
    "detail1"
    "detail2"
    "buchung";
}

/* Elemente zuordnen */
.kurstyp {
  grid-area: kurstyp;
}

.kursdetail:nth-of-type(1) {
  grid-area: detail1;
}

.kursdetail:nth-of-type(2) {
  grid-area: detail2;
}

.kursbuchung {
  grid-area: buchung;
}

.schwimmkurse-container .kurs {
  margin-bottom:15px;
  color: #1d1d1b;  
} 

/* small */
@media screen and (max-width:768px) {


.kurs {
  margin:0 15px 25px!important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "kurstyp  kurstyp"
      "detail1  detail2"
      "buchung  buchung";
  }
 

.schwimmkurse-container .beschriftung {
  font-size:.85em;
}  


  .kurstyp {
  background-color: rgba(0, 105, 180, .2);
  padding:10px;
}

  
.kursdetail {
   padding:10px;
  background-color: rgba(0, 105, 180, .05);
}  

  .kursbuchung {
  background-color: rgba(0, 105, 180, .1);
  padding:10px;
}

  
}


/* medium */
@media screen and (min-width:768.2px) and (max-width:1279.6px) {


   .kurs {
     margin:0 0 20px!important;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-areas:
      "kurstyp  kurstyp  kurstyp"
      "detail1  detail2  buchung";
  } 
  
.schwimmkurse-container .beschriftung {
  font-size:.8em;
} 

  .kurstyp {
  background-color: rgba(0, 105, 180, .2);
  padding:15px;
}

  
.kursdetail {
   background-color: rgba(0, 105, 180, .05);
   padding:15px;
}  

  .kursbuchung {
  background-color: rgba(0, 105, 180, .1);
  padding:15px;
}
  
}



/* large */
@media screen and (min-width:1280px) {

.schwimmkurse-container .beschriftung {
  font-size:.7em;
}   

  .kurs {
    grid-template-columns: 40% 15% 15% 30%;
    grid-template-areas:
      "kurstyp detail1 detail2 buchung";
  }

  .kurstyp {
  background-color: rgba(0, 105, 180, .2);
  padding:15px;
}

  
.kursdetail {
   background-color: rgba(0, 105, 180, .05);
   padding:15px;
}  

  .kursbuchung {
  background-color: rgba(0, 105, 180, .1);
  padding:15px;
}  
  
}


/* KKO-Link ausblenden 

ul.flex.gap-small.items-center.text-center.justify-center.gap-small > li:first-child {
   display:none!important;
}
*/

/* rechte Spalte vertikal zentrieren */
#c9734 .grid > div:nth-child(2) {
    display: flex;
    align-items: center;
  justify-content:center;
  
}


.abt2, .abt3, .abt4  {
  border-bottom:1px solid #646463;
  padding-bottom:10px;
  margin-bottom:10px;
  background-color:#fcfafa;
}  

.abt .overflow-hidden {
  background-color:#fcfafa;
  color:#1d1d1b;
}

.abt1 .overflow-hidden, .abt7 .overflow-hidden {
  background-color:#ececec;
}


@media screen and (min-width:768px) and (max-width:1279.8px)  {
.abt1 .overflow-hidden, .abt2 .overflow-hidden, .abt3 .overflow-hidden, .abt4 .overflow-hidden, .abt5 .overflow-hidden, .abt6 .overflow-hidden, .abt7 .overflow-hidden {
 padding:15px!important; 
}  
}


@media screen and (min-width:1280px) {

.abt1 .overflow-hidden {
    min-height:auto;
  }

.abt2 .overflow-hidden {
    min-height:200px;
  }

.abt4 .overflow-hidden {
    min-height:230px;
  }  

.abt5 .overflow-hidden {
    min-height:240px;
  }  

.abt7 .overflow-hidden {
    min-height:185px;
  }    
  
}  


@media screen and (min-width:620.2px) {
.show-mobile {
 display:none; 
}
}  

@media screen and (max-width:620px) {
.show-mobile {
 display:block; 
  margin-bottom:-30px;
}
}  

@media screen and (min-width:768px) {
.show-mobile-768 {
 display:none; 
}
}  

@media screen and (max-width:767.8px) {
.show-mobile-768 {
 display:block; 
}
}  

@media screen and (max-width:767.8px) {
.hide-mobile-768 {
 display:none; 
}
} 

@media screen and (min-width:768px) {
.hide-mobile-768 {
 display:block; 
}
}  

 

.img-right img {
  margin: auto 0 auto auto;
}

.text-small {
  font-size:0.9em;
}

.p-bottom-15 p {
  margin-bottom:15px;
}

.mitarbeiter-name-kontakt p {
  padding: 3px 5px;
  background-color: rgb(236 236 236);
  color: rgb(29 29 27);
}

.text-kleiner {
  font-size:.9em;
  margin-top:-10px;
}

.baustellenstoerer {
  position: relative;
  overflow: visible; /* wichtig */
  height: auto!important; /* falls h-full gesetzt war – überschreiben */
}


@media screen and (min-width:1280px) {
.baustellenstoerer img {
  width: 100%; 
  padding-left:30px;
}
}  

@media screen and (mAX-width:1279.9px) {
.baustellenstoerer img {
 width: 70%;
  margin-bottom:30px;
}
}  


/* 1. Vertikale Zentrierung von allen Headlines */
.baeder-termin {
  min-height:200px;
}

.baeder-termin h3 {
  padding-bottom: var(--extra-small);
}

.baeder-termin .frame-type-sitepackage_headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* 2. Sicherstellen, dass die Gridelemente volle Höhe nutzen */
baeder-termin .frame-type-sitepackage_gridelement {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 3. Bild-container und Bild auf volle Höhe & Breite */
baeder-termin .frame-type-sitepackage_image .relative {
  width: 100%;
  height: 100%;
  position: relative;
}

baeder-termin .frame-type-sitepackage_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-height: none;
}

.video-container-shorts {
    position: relative;
  width: 100%;
  padding-bottom: 177.78%; /* Für Shorts: 9:16 = 100 / (9/16) = 177.78% */
  height: 0;
  overflow: hidden;
  max-width: 400px; /* Optional: maximale Breite */
  margin: auto;
}

.video-container-shorts iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}
}

.p-margin-bottom p {
  margin-bottom:10px;
}

footer .bg-bewerbung-100 {
background-color: rgb(22 65 148 / var(--tw-bg-opacity))!important;
}

.start2024-tarifrechner .text-error-red {
  color:#000!important;
  font-weight:bold!important;
}

form .bg-hellgrau-30 {
  background-color: rgb(29 29 27 / var(--tw-text-opacity))!important;
}

.headline-visibly-hidden {
  opacity:0;
  height:0;
  width:0
}

.tx-nl-tariffcalculator .rounded-full span {
  color: #000!important;
}

.tx-nl-tariffcalculator .rounded-full.bg-strom-100 span {
  color: #000!important;
}

.tx-nl-tariffcalculator h3.text-white-100 {
  color: rgb(29 29 27)!important;
}

.tx-nl-tariffcalculator .text-strom-100, .tx-nl-tariffcalculator .text-gas-100 {
 color: rgb(29 29 27)!important;
  font-weight:500!important;
}

.tx-nl-tariffcalculator .text-white-100 {
  color: rgb(29 29 27)!important;
}

.tx-nl-tariffcalculator .text-white-100.bg-hellgrau-30  {
  color: #fff!important;
}

.tx-nl-tariffcalculator input[type=radio]:checked:valid {
     border-color: rgb(29 29 27)!important;
}

.tx-nl-tariffcalculator input[type=radio] {
    color: rgb(29 29 27)!important;
}

.combert-produkte .text-white-100, .combert-produkte .text-glasfaser-100, .combert-produkte .text-tdl-100, .combert-produkte .text-gas-100 {
  color: rgb(29 29 27)!important;
} 

input[type=radio], input[type=checkbox] {
  color: rgb(29 29 27)!important;
}

.baeder-zeiten .text-dunkelblau-100 {
  color: rgb(22 65 148)!important;
}

.baeder-zeiten p {
  color: rgb(29 29 27);
}

.swimming-courses .bg-dunkelblau-20 {
  background-color:rgb(22 65 148 / var(--tw-bg-opacity))!important;
  color:#fff!important;
}

.swimming-courses .text-error-red {
  color:#000!important;
}


.footericon-display-large {
  display: flex!important;
  align-items: center;
  flex-direction: column;
}

.footericon-display-large img {
  margin-bottom:15px;
}


.ueber-uns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 5px;
  padding: 0;
}

.uug-content {
  aspect-ratio: 1 / 1; /* quadratisch */
  display: flex;
  align-items: center;
  justify-content: center;  
  padding: 30px;
  color: rgb(29 29 27 / var(--tw-text-opacity));
  hyphens: auto;
}


.uug-content p {
text-align:center;
}


.uug-content span {
font-size:1.3em;
  font-weight:500;
}

.dunkler {
  background-color: #ddddf1;
}

.heller {
  background-color:#e8e9f6;
}


.gapless-form .py-\[20px\] {
    padding-top: 0!important;    
}

.gapless-form .input p {
    font-weight: 300;
    color: rgb(100 100 99 / var(--tw-text-opacity));
}

.gapless-form p.text-grey-headlines-100 {
    font-weight: 500;
    }



.buttons-inline .frame-type-sitepackage_button {
  display:inline-block!important;
}

.navigationContent .aktuelles-teaserblock {
  padding: var(--extra-small);
  background-color: rgb(236 236 236 / var(--tw-bg-opacity));
  font-size: 16px;
}

.navigationContent .baeder-news-menu-headline {
  display:block;
}

.baeder-news-onsite .baeder-news-menu-headline {
  display:none;
}


.big-textarea textarea {
  min-height:200px;
}



.max-h-100 img {
  max-height: 100%;
}

header input {
line-height: 23px;
}

.news-single {
  margin-bottom:30px;
}

#magazine {
  scroll-margin-top:220px;
}

.form-pdf-download-block {
 font-size: unset!important;
}

@media (max-width: 767.99px) {
.form-pdf-download-block p  {
padding-left: 15px;
padding-right: 15px;
    }
}


.bd {
  border:1px solid rgb(100, 100, 99);
}

.magazin-kategorie span {
 padding: 1px 8px 3px 8px;
  display: inline-block;
  margin: 0 -2px 2px 0;
  background-color: rgb(100, 100, 99);
  color:#fff;
  font-size:15px;
  font-weight:bold;
  cursor:pointer;
    transition: all 0.2s ease-in-out;
}

.magazin-kategorie span:hover {
  background-color: rgba(100, 100, 99,0.7);  
  transition: all 0.2s ease-in-out;
 }

.magazin-kategorie .begriff-active {
 background-color: rgb(22, 65, 148); 
}

/*Version 2*/

.magazin-kategoriev2 span {
 padding: 1px 8px 3px 8px;
  display: inline-block;
  margin: 0 -2px 2px 0;
  border: 1px solid rgb(100, 100, 99);
  color:rgb(100, 100, 99);
  font-size:15px;
  font-weight:bold;
  cursor:pointer;
    transition: all 0.2s ease-in-out;
}

.magazin-kategoriev2 span:hover {
  background-color: rgba(100, 100, 99,0.3);  
  transition: all 0.2s ease-in-out;
 }

.magazin-kategoriev2 .begriff-active {
 background-color: rgb(22, 65, 148); 
  color:#fff;
}

.magazin-kategoriev2 .begriff-activev2 {
 border: 1px solid rgb(22, 65, 148); 
 color:rgb(100, 100, 99);
}

/*Version 2*/


/*Version 3*/

.magazin-kategoriev3 span {
 padding: 1px 8px 3px 8px;
  display: inline-block;
  margin: 0 -2px 2px 0;
  border: 1px solid rgb(100, 100, 99);
  color:rgb(100, 100, 99);
  font-size:15px;
  font-weight:normal;
  cursor:pointer;
    transition: all 0.2s ease-in-out;
}

.magazin-kategoriev3 span:hover {
  background-color: rgba(100, 100, 99,0.1);  
  transition: all 0.2s ease-in-out;
 }

.magazin-kategoriev3 .begriff-active {
 background-color: rgb(22, 65, 148); 
  color:#fff;
}

.magazin-kategoriev3 .begriff-activev2 {
  background-color: rgb(22, 65, 148); 
  color:#fff;
}

.magazin-kategoriev3 .begriff-activev2:hover {
  background-color: rgba(100, 100, 99,0.1);  
  color: rgb(22, 65, 148); 
}

/*Version 3*/

.kategorie-detailpage p {
 /* border-top:1px solid rgb(29, 29, 27);*/
  padding-top:15px;
}

.magazin-outer {
  background-color:#fff;
  padding-top:50px;
  padding-bottom:80px;
}

.magazin-titel {
position:absolute;
  width:100%;
  height:50vh;
  background-image: url(/fileadmin/images/magazin/mein-stadtwerk-titel.png);
  background-position: center;
  background-size:contain;
  background-repeat:no-repeat;
      left: 50%;
    transform: translate(-50%, 0);
    max-width: 1200px;
}

.magazin-titel img {
display:none;
}

.magazin-header-bg {
    width: 100%;
    height: 50vh;
      z-index: -1;
 /* background-image: url(/fileadmin/images/magazin/mein-stadtwerk-header_small.jpg);
  background-position: center 60px;
  background-size:contain;
  background-repeat:no-repeat;
  background-attachment: fixed;*/
  max-width:2000px;
  margin: 0 auto;
}


@media (min-width: 1280px) {
.magazin-header-bg  {
       background-position: center 160px;
    }
}

.magazin-header-bg img {
    position: fixed;
  left:0;
    height:50vh;
  
}

.hero-magazin {
  height:auto!important;
  max-height:100%!important;
}

.magazin-headline {
  background-color:rgb(100 100 99);
      margin-top: -15px;
      position: relative;
    width: 90%;
}

.magazin-headline-detail { 
background-color:rgb(100 100 99);
position: relative;
margin-top: -30px;
width: 90%;
}


@media screen and (min-width:1280px){
.magazin-headline-detail h1 { 
font-size: 2.8em!important;
line-height:130%!important;
font-weight:500!important;
margin-bottom: 10px;
}
}

@media screen and (max-width:1279.9px) and (min-width:768px){
.magazin-headline-detail h1 { 
font-size: 2.2em!important;
line-height:130%!important;
font-weight:500!important;
margin-bottom: 10px;
}
}

@media screen and (max-width:767.9px) {
.magazin-headline-detail h1 { 
font-size: 1.9em!important;
line-height:130%!important;
font-weight:500!important;
margin-bottom: 10px;
}
}

@media screen and (min-width:1280px){
.magazin-headline h4 {
font-size: 1.3em!important;
line-height:130%!important;
  font-weight:500!important;
  margin-bottom: 5px;
}
}

@media screen and (max-width:1279.9px) and (min-width:768px){
.magazin-headline h4 {
font-size: 1.6em!important;
line-height:130%!important;
  font-weight:500!important;
  margin-bottom: 5px;
}
}

@media screen and (max-width:767.9px) {
.magazin-headline h4 {
font-size: 1.6em!important;
line-height:130%!important;
  font-weight:500!important;
  margin-bottom: 5px;
}
}


.magazinteaser-container .border {
  border-right-width:0!important;
  border-bottom-width:0!important;
  border-top-width:0!important;
}


@media screen and (max-width:768px) {
.oeffnungszeiten-startseite .tx-nl-openinghours {
padding: 0 15px;  
}
}

.start2024-tarifrechner .tx-nl-tariffcalculator .whitespace-nowrap {
  display: inline-block;
  white-space: wrap;
}

.start2024-tarifrechner .tx-nl-tariffcalculator .whitespace-nowrap li {
  display: inline-block;
  margin-right:3px;
  margin-bottom:3px;
}

@media screen and (min-width:768px) {
.news-startseite .w-full:nth-of-type(1) { 
 order: 2; 
}

.news-startseite .w-full:nth-of-type(2) { 
padding-left:0!important; 
}
}

@media screen and (max-width:767.9px) {
.news-startseite .w-full:nth-of-type(2) { 
padding-bottom:30px!important; 
}
}

.news-startseite .bg-dunkelblau-100 h2 {
  display:none;
}

@media screen and (max-width:767.9px) {
.news-startseite h4 {
  font-size:16px;
}
}

@media screen and (min-width:768px) {
.news-startseite h4 {
  font-size:18px;
}
}

.news-startseite a.text-grey-headlines-100 {
  text-align:center;
}


.startseite-kachel-text {   
  opacity:1;
  transition: opacity 0.2s ease-in-out;
}

.startseite-kachel-text:hover {   
  opacity:0.8;
  transition: opacity 0.2s ease-in-out;
}


.startseite-kachel-text .absolute {
  bottom:0!important;
 top: unset !important;
  width:100%!important;
  max-width:100%!important;
  text-align: center;
  margin: 0 !important;
  transition: background 0.2s ease-in-out;
}


.startseite-kachel-text .absolute .flex  {
   padding:10px!important;
  opacity:1;
  }

.startseite-kachel-text .absolute:hover {
  transition: background 0.2s ease-in-out;
}

.startseite-kachel-text .absolute .rte  {
  width:100%!important;
  text-align: center;  
  opacity:1;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


@media (max-width: 768px) {
.epilot-button {
 margin-left:15px; 
}
}

#\32 023Neuanmelden-7237 > fieldset > legend,
#\32 023Abmeldung1Ichzieheaus-6880 > fieldset > legend
{
  text-transform:none!important;
}


.form-group legend {
    color: rgb(29 29 27 / var(--tw-text-opacity));
      width: 100%;
      padding-top: 30px;
}

@media (min-width: 1280px) {
.form-group legend {
  font-size: 42px;
  border-bottom: 1px solid;
  padding-bottom:20px;
  margin-bottom:40px;
}
}

@media (max-width:1279.9px) {
.form-group legend {
  font-size: 30px;
}
}

.form-group tr {
  border-bottom:1px solid;
}

.form-group td {
  padding-bottom:10px;
  padding-top:10px;
}

.form-group table {
  margin-bottom:30px;
}


.aquacycling button {
  display:none;
}


#overlayContent #main {
  padding-bottom:30px;
}


@media (min-width: 740px) {
.btn-group.previous {
    float: left;
}

.btn-group.next, button[type="submit"] {
    float: right;
}
}

@media (max-width: 739.9px) {
.btn-group.previous {
width:100%;
}

.btn-group.next, button[type="submit"] {
width:100%;
}

  .btn-group.previous button,  .btn-group.next button, button[type="submit"] {
width:100%;    
  }  
}


.btn-group.previous button {
background-color:rgb(100 100 99 / var(--tw-text-opacity));
}


.form-button-big .border:hover {
  background-color: rgb(236 236 236);
  transition: background-color 0.2s ease-in-out;
}


@media (max-width: 548px) {
.tarifoption-tabs .border-white-100 {
 min-height: 63px!important;
  display:flex;
  align-items: center;
  justify-content:center;
}
}

@media (max-width: 367px) {
.tarifoption-tabs .border-white-100 {
 min-height: 85px!important;
  display:flex;
  align-items: center;
  justify-content:center;
}
}


form h2 {
  text-transform:none!important;
  margin-bottom:40px!important;
  margin-top: 30px;  
  border-bottom: 1px solid;
  padding-bottom: 10px;
}

form .actions {
  margin-top:20px;
}

.datenschutz-container p {
 margin-bottom:15px; 
  }

.datenschutz-container h1 {
border-bottom: 1px solid;
  }

.datenschutz-container h2 {
 margin-top:45px; 
  font-size:2em;
  }

.datenschutz-container ol {
    list-style-type: decimal;
  list-style-position:outside;
  margin-bottom: 15px;
    margin-left: 15px;
}

.datenschutz-container ul {
    list-style-type: disc;
  list-style-position:outside;
  margin-bottom: 15px;
    margin-left: 15px;
}

@media (max-width: 768.01px) {
  .datenschutz-container {
    padding:0 15px;
  }
}
 
.eyeable-icon {
  position:fixed;
  z-index: 9999;
  left: initial;
  border-radius:50%;
  cursor: pointer;
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px rgba(0,0,0,0.14), 0px 1px 18px rgba(0,0,0,0.12);
}

.eyeable-icon:hover {
background-color: #002d61;
    transition: background-color 0.2s ease-in-out;
}

@media (min-width: 768.01px) {
  
.eyeable-icon {
  right:40px;
  bottom:120px;
  width:64px;
  height:64px;  
}

.eyeable-icon img {
    width: 36px;
    height: auto;
    margin: 8px auto;
}  
}


@media (min-width: 628.1px) and (max-width:768px) {
  
  
    .eyeable-icon {
  right:40px;
  bottom:95px;
  width:44px;
  height:44px;  
}

.eyeable-icon img {
    width: 24px;
    height: auto;
    margin: 7px auto;
}  
  
  
  
}

@media  (max-width:628px) {
  
  .eyeable-icon {
  right:24px;
  bottom:80px;
  width:44px;
  height:44px;  
}

.eyeable-icon img {
    width: 24px;
    height: auto;
    margin: 7px auto;
}  
}



@media (min-width: 1280px) {
  .hide-small {
  display:flex;  
}

.hide-big {
  display:none;  
}
}


@media (max-width: 1279.9px) {
  .hide-small {
  display:none;  
}

.hide-big {
  display:block;  
}
}


.hide-big li {
  display:inline-block;
}



@media (max-width: 660px) {
.swiper-container .h-full {
min-height:310px;  
}
.swiper-container .max-w-\[60\%\] {
    max-width: 90%;
}  
}  


form fieldset {
  margin-bottom:15px;
}

.h-captcha {
  margin-bottom:20px;
}

.event-button .button {
  border-bottom-width: 1px;
}

.event-button .button::after {
margin-left: 5px;
content: ">";
}


@media (max-width: 1279.9px){
.h-\[350px\].hero-sm {
  height: auto!important;
}
}


/* ENERGIESPARTIPPS */ 


.responsive-video {
  position:relative;
padding-bottom: 60%;
padding-top: 0px;
height: 0;
overflow: hidden;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.energieakkordeon-text {
background: rgba(255,255,255,.85);
padding:10px;
transition: none!important;
  -webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;
} 

@media (min-width: 1280px) {
.plus {
  width:50px;
  height:auto;
}
}  

@media (min-width:430px) and (max-width: 1279.9px) {
.plus {
  width:30px;
  height:auto;
}
}

@media (max-width: 429.9px) {
.plus {
  width:20px;
  height:auto;
}
}

/* OVERVIEW */ 

.arbeitszimmer {
  position:absolute;
  top:27%;
  left:40%;
}

.pv {
  position:absolute;
  top:12%;
  left:40%;
}

.kinderzimmer {
  position:absolute;
  top:27%;
  left:57%;
}

.schlafzimmer {
  position:absolute;
  top:45%;
  left:40%;
}

.bad {
  position:absolute;
  top:45%;
  left:57%;
}


.hauswirtschaftsraum {
  position:absolute;
  top:45%;
  left:77%;
}

.garten {
  position:absolute;
  top:62%;
  left:15%;
}

.wohnzimmer {
  position:absolute;
  top:62%;
  left:40%;
}

.kueche {
  position:absolute;
  top:62%;
  left:57%;
}

.garage {
  position:absolute;
  top:62%;
  left:77%;
}

.keller {
  position:absolute;
  top:86%;
  left:77%;
}




.display-inline-block img {
  display: inline-block;
}


@media (max-width: 767.9px) {
.padding-sm {
    padding-right:15px;
    padding-left:15px;
  }

  .sm-display-none {
 display:none;   
  }  
  
}


@media (min-width: 1280px) {
.news-startseite .overflow-auto {
  overflow-x:hidden!important;
}
}



@media (min-width: 768px) {
.openeningtimes-page .text-1\.6 .font-bold {
  font-size: 18px;
}
}

.openeningtimes-page .text-1\.6 .font-bold {
  font-weight: 300;
}


.tx-nl-tariffcalculator .text-grey-headlines-100 .bg-strom-100 {
    min-height: 120px;
    justify-content: center;
    display: flex;
    align-items: center;
}


.rte.border-b {
  padding-bottom: 4px;
}

.marginbottom-30px {
  margin-bottom:-30px;
}


@media (min-width: 1280px) {
h1 {
  font-size: 54px;
}
h2 {
  font-size: 42px;
}  
  
}

footer .font-bold {
  font-weight:300;
}

footer ul.items-center {
  border-top: 1px solid rgb(29,29,27);
  padding-top:15px;
}

.news-startseite .news h2, .news-startseite .news h4 {
  text-transform:none!important;
}


.news .bg-dunkelblau-100 {
  background-color: rgb(236,236,236);
  margin-top: -20px;
}

.news h2.text-white-100 {
  color: rgb(29,29,27);
}

.news h2.pb-small {
  padding-bottom:0;
}

.news h2.border-b-white-100 {
  border-bottom-color: rgb(22,65,148);
}

.news h4.text-white-100 {
  color: rgb(22,65,148);
  margin-top:-10px;
}

.news svg.text-white-100 {
   color: rgb(22,65,148);
}

.news p.text-white-100 {
  color: rgb(29,29,27);  
}

.overflow-x-none .overflow-x-auto {
  overflow-x: visible;
}

.history-button {
  border-top:1px solid rgb(29 29 27);
  padding-top:30px;
}

#overlayModal .history-button {
  display:none;
}

@media (min-width: 1280px) {
.padding-md .rte {
 padding:0 20px; 
}
  
  .padding-md .max-h-\[600px\] {
    max-height: 100%;
}  
  
}

@media (max-width: 1279.98px) {
.padding-md .container {
  margin-bottom:20px;
}
  
.padding-md .rte {
 padding:20px 0; 
}  
  
.padding-md .max-h-\[600px\] {
    max-height: 100%;
}  
  
}  
  
  
  

.border-bottom {
  border-bottom:1px solid rgb(236, 236, 236);
}

.border-bottom-white {
  border-bottom:1px solid #fff;
}

nav ul .z-50 {
box-shadow: 1px 20px 39px -36px #000;
}

nav ul .z-50 ul:first-child {
padding-bottom:10px;
}


.max-h-auto img {
  max-height:100%!important;
}


@media (min-width: 1280px) {

  .only-lg {
    display:block;
  }  
  
.only-sm {
  display:none;
}
  .sm-pb-30  {
    padding-bottom:0;
  } 

  .hidden-md {
    display:block;
  }  
  
}  

@media (max-width: 1279.98px) {

   .only-lg {
    display:none;
  }  
  
  
.only-sm {
  display:block;
}

  .sm-pb-30  {
    padding-bottom:30px;
  }
  
  .hidden-md {
    display:none;
  }    
  
} 

.no-text p {
  color:rgba(255,255,255,0);
}


.full-width-container {
  width:100%!important;
  }

.full-width-container-container .container {
  width:100%!important;
  max-width:100%!important;
  }

@media (min-width: 1280px) {
.bg-img-freie-bahn {
 background-image: url(/fileadmin/images/baeder/freie-bahn-im-panoramabad.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}

  .bg-img-triathlon {
 background-image: url(/fileadmin/images/baeder/triathlon-karte-velbert.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}
  
   .bg-img-baby {
 background-image: url(/fileadmin/images/baeder/babyschwimmen.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
} 
  
   .bg-img-kinder {
 background-image: url(/fileadmin/images/baeder/schwimmkurse-kinder.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}   
  
  
   .bg-img-sparen-strom {
 background-image: url(/fileadmin/images/strom/SWV_Sparschwein_gruen.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}    
  
  
   .bg-img-sparen-gas {
 background-image: url(/fileadmin/images/gas/SWV_Sparschwein_gelb.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}     
  
  .bg-img-einzel-parkbad {
 background-image: url(/fileadmin/images/baeder/parkbad-einzelltraining.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
} 
  
  .bg-img-aqua-parkbad {
 background-image: url(/fileadmin/images/baeder/aqua-fitness-parkbad.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  .bg-img-einzel-panorama {
 background-image: url(/fileadmin/images/baeder/panoramabad-einzeltraining.jpg);
 background-position: left center;
 background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  .bg-img-aquavida {
 background-image: url(/fileadmin/images/baeder/aquavida-panoramabad.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}    
  
  .bg-img-aquacycling {
 background-image: url(/fileadmin/images/baeder/kurse-nizzabad.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
  .bg-img-aquavida-nizza {
 background-image: url(/fileadmin/images/baeder/aqua-vida-nizzabad.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
  .bg-img-umweltbildung {
 background-image: url(/fileadmin/images/ueber-uns/umweltbildung.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  
    .bg-img-elektromuseum {
 background-image: url(/fileadmin/images/ueber-uns/betreiber-elektromuseum-bg.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
      .bg-img-elektromuseum-2 {
 background-image: url(/fileadmin/images/ueber-uns/elektromuseum-velbert2.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  

  .bg-img-standrohre {
 background-image: url(/fileadmin/images/service/standrohre-mieten.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}     
  
  
  .bg-img-energieausweis {
 background-image: url(/fileadmin/images/service/mehr-transparenz-energieausweis.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}     
  
  .bg-img-wasser-hochhaus {
 background-image: url(/fileadmin/images/wasser/wasser-im.hochhaus.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}     
  
    .bg-img-historie {
 background-image: url(/fileadmin/images/ueber-uns/historische-ansichten.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   

  .bg-img-wasser-faq2 {
 background-image: url(/fileadmin/images/combert/combert-faq-bg.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  .bg-img-wasser-faq {
 background-image: url(/fileadmin/images/wasser/wasser-fragen.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   

   .bg-img-strom-faq {
 background-image: url(/fileadmin/images/strom/strom-faq.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
 .bg-img-emob-faq {
 background-image: url(/fileadmin/images/wasser/wasser-fragen.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}    
  
  .bg-img-strom2024 {
 background-image: url(/fileadmin/images/strom/Strom.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}   
  
  .bg-img-baeder-start {
 background-image: url(/fileadmin/images/startseite/baeder.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  .bg-img-kundencenter {
 background-image: url(/fileadmin/images/kontakt/kundencenter-stadtwerke-velbert.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}    
    
  
  .bg-img-meerjungfrau {
 background-image: url(/fileadmin/images/baeder/meerjungfrau.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
} 
  
  .bg-img-gas-pacht {
 background-image: url(/fileadmin/images/gas/gas-pacht.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
  
  .bg-img-moderne-messeinrichtung {
 background-image: url(/fileadmin/images/netze/zaehler.jpg);
 background-position: right -210px;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
  .bg-img-imsys {
 background-image: url(/fileadmin/images/netze/smartmeter.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  .bg-img-parkbad {
 background-image: url(/fileadmin/images/baeder/parkbad-alle-infos.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
       
.bg-img-panorama-alleinfos  {
 background-image: url(/fileadmin/images/baeder/panoramabad-alle-infos.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
.bg-img-panorama-alleinfos-2  {
 background-image: url(/fileadmin/images/baeder/panoramabad-alle-infos2.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}    
  
  .bg-img-panorama-hallenbad {
 background-image: url(/fileadmin/images/baeder/panoramabad-hallenbad.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  .bg-img-panorama-freibad {
 background-image: url(/fileadmin/images/baeder/panoramabad-freibad.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
.bg-img-nizza-alleinfos  {
 background-image: url(/fileadmin/images/baeder/nizzabad-alle-infos.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}    
  
 .bg-img-gk-strom  {
 background-image: url(/fileadmin/images/geschaeftskunden/strom-geschaeftskunden.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}    
  
 .bg-img-gk-gas  {
 background-image: url(/fileadmin/images/geschaeftskunden/gas-geschaeftskunden.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}    
  
  
 .bg-img-gk-wasser  {
 background-image: url(/fileadmin/images/geschaeftskunden/wasser-geschaeftskunden.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}   
  
.bg-img-gk-ladeloesung  {
 background-image: url(/fileadmin/images/geschaeftskunden/ladeloesung.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}   
   
  
.bg-img-gk-projekt-maull  {
 background-image: url(/fileadmin/images/geschaeftskunden/projekt-maull.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}   
  
.bg-img-gk-projekt-ucar  {
 background-image: url(/fileadmin/images/geschaeftskunden/projekt-ucar.jpg);
 background-position: left center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}   
  
.bg-img-gk-glasfaser  {
 background-image: url(/fileadmin/images/geschaeftskunden/glasfaser-velbert.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}   

.bg-img-energiewende {
    position: relative; 
}
  
.bg-img-energiewende::before  {
      content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
  background: url("/fileadmin/images/strom/solar-zertifikat.jpg") center / cover no-repeat;
}  
  
.bg-img-gnv  {
 background-image: url(/fileadmin/images/combert/combert-gnv.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}    
  
.bg-img-ausbau  {
 background-image: url(/fileadmin/images/combert/ausbaustatus.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}    
   
.bg-img-combert-gnv  {
 background-image: url(/fileadmin/images/combert/combert-background.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
.bg-img-combert-gnv-bildrechts  {
 background-image: url(/fileadmin/images/combert/gnv.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
  
.bg-img-combert-tv  {
 background-image: url(/fileadmin/images/combert/combert-tv.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
     

.bg-img-combert-info  {
 background-image: url(/fileadmin/images/combert/combert-info.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
  
  .bg-img-combert-router  {
 background-image: url(/fileadmin/images/combert/combert-router.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  .bg-img-combert-sender  {
 background-image: url(/fileadmin/images/combert/combert-sender.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}  
  
  
  .bg-img-combert-kundencenter  {
 background-image: url(/fileadmin/images/combert/combert-beratung.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}    
  
  
  .bg-img-combert-app  {
 background-image: url(/fileadmin/images/combert/net-tv-app.jpg);
 background-position: left center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}    
    
  
  
.bg-img-gebanschluss  {
 background-image: url(/fileadmin/images/combert/hausanschluss.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
.bg-img-hausint  {
 background-image: url(/fileadmin/images/combert/hausinterne-technik.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}   
  
  
.bg-img-waerme  {
 background-image: url(/fileadmin/images/rund-ums-haus/waermeservice.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}     
      
  
.bg-img-solar  {
 background-image: url(/fileadmin/images/rund-ums-haus/solarservice.jpg);
 background-position: right center;
    background-size: 50% auto;
  background-repeat:no-repeat; 
}     
  
  
.bg-img-gascheck  {
 background-image: url(/fileadmin/images/rund-ums-haus/gascheck.jpg);
 background-position: right center;
    background-size: 40% auto;
  background-repeat:no-repeat; 
}    
     
.bg-notfall {
 background-color: rgb(253 230 209);
}        
 
  
}  

.container-bg-combert-tv .container {
  background-image:url(/fileadmin/images/combert/tv-bg.jpg);
  background-size:cover; 
  background-repeat:no-repeat;
}



.tabs-kinderkurse .bg-dunkelblau-100, .tabs-kinderkurse li button:hover {
  color:#fff;
}

.tabs-kinderkurse .ce-table th, .tabs-kinderkurse .ce-table td {
  border-top:0!important;
}

/*.tabs-kinderkurse .bg-dunkelblau-100 {
  padding-bottom:60px;
}*/

.tabs-kinderkurse thead {
  background-color:rgb(0 105 180);
  color:#fff;
  border-top:0!important;
}

.tabs-kinderkurse th {
  border-top:0!important;
}


.tabs-kinderkurse tbody tr:nth-child(even) {
  background-color:#d3ddf2;

}

.tabs-kinderkurse tbody tr:nth-child(odd) {
   background-color: #fff;

}

.tabs-kinderkurse tbody td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.tabs-kinderkurse tbody td:first-child { 
  color:#0069b4;
}

th {
  text-align:left;
}

table caption {
  font-weight:600;
  margin-bottom:15px;
}

.download-box-header {
  font-weight:700;
  background-color:#ececec;
  width:100%;
  margin-bottom:20px;
  padding:10px 0;
}

form .text-grey-headlines-100, form .placeholder-grey-headlines-100, input, select, textarea {
  color:rgb(100 100 99 / var(--tw-text-opacity));
  font-weight:300;
}

ul .news {
    padding: 15px;
  background-color: rgb(236 236 236);
}

ul .news .font-bold {
  font-weight: 300;
}

ul .news span {
  min-width:80px;
}

@media (max-width: 767.99px) {
.rte p, .rte h1, .rte h2, .rte h3, .rte h4, form, .frame-type-sitepackage_button, .rte ul, .rte ol  {
padding-left:15px;
  padding-right:15px;
}
  

  .no-padding-sm p, .no-padding-sm h1, .no-padding-sm h2, .no-padding-sm h3, .no-padding-sm h4 {
 padding-left:0!important;
  padding-right:0!important;   
  } 

  .frame-type-sitepackage_akkordeon .rte p {
padding-left:0;
  padding-right:0;    
  }
  
}

  
.frame-type-sitepackage_footer ul.flex {
/*display: block;*/
text-align: center;  
  }  
  
.frame-type-sitepackage_footer ul.flex a {
/*padding:0 10px; */
  }  
  
}  


.frame-type-sitepackage_footer h2 {
  text-align:center;
}

.input p {
  font-weight:500;
  color: rgb(29 29 27);
}

.rte ul, .rte ol {
margin-left: 20px;
list-style-position: outside  
}

.rte ul li, .rte ol li {
margin-top: 10px;
}

@media (min-width: 768px) {
.statements img {
padding-right:120px; 
}

  .statements .rte  {
 margin-left:100px;
margin-top:-30px;
    position:relative;
  }

   .statements-lg .rte  {
 margin-left:-30px;
    position:relative;
  } 
  
}

.job-akkordeon .flex p {
  font-weight:500;
}

.no-break .rte {
  hyphens:none;
  overflow-wrap: unset;
}

b, strong {
  font-weight: bold;
}

.object-center {
  margin: 0 auto;
}

.img-maxh-300 img {
  max-height:300px;
}

.img-maxh-400 img {
  max-height:400px;
}

.img-maxh-400-wa img {
  max-height:400px;
  width:auto;
}

.img-maxh-500 img {
  max-height:500px;
}

.img-maxh-auto img {
  max-height:100%;
}

h3 {
  font-weight:300;
}

footer a span.font-bold {
  font-size: 14px;
}

footer a span.font-bold:hover {
color:#696965;
}

/* HERO-HEIGHT */

.bg-top.object-center {
  -o-object-position: top;
  object-position: top;
} 

.bg-bottom.object-center {
  -o-object-position: bottom;
  object-position: bottom;
} 



@media (min-width: 1880px) {
.hero-sm {
  height:450px!important;
  }
 .hero-lg {
  height:550px!important;
  }  
  .hero-home {
    height:700px!important;
  }
  
  .max-h-\[600px\] {
  max-height: 100%;
}
  
}


@media (min-width: 1500px) and (max-width: 1879.99px) {
  .lg\:h-\[450px\] {
  height: 350px;
}
  
.hero-sm {
  height:250px!important;
  }
 .hero-lg {
  height:450px!important;
  }
    .hero-home {
    height:550px!important;
  }
}


@media (min-width: 1280px) and (max-width: 1499.99px) {
.hero-sm {
  height:250px!important;
  }
 .hero-lg {
  height:450px!important;
  }   
     .hero-home {
    height:500px!important;
  }
}


@media (min-width:768px) and (max-width: 1279.99px) {
     .hero-home {
    height:600px!important;
  }
}


@media (max-width: 767.9px) {
     .hero-home {
    height:400px!important;
  }
}



.hero-start-small h2 {
  font-size:24px;
  font-weight:400;
  line-height: 100%;
  margin-bottom:10px;
} 

.hero-start-small p {
  font-size:12px;
  font-weight:400;
  line-height: 110%;
} 

@media (max-width: 1279.99px) {
  .hero-start-small h2 {
  font-weight:300;
  font-size:30px;
  margin-bottom:10px;
} 

.hero-start-small p {
  font-size:18px;
  font-weight:300;
  } 
}



/* ALIGN */

.va-center .container .grid, .va-center .container {
align-items: center;
justify-items: center;
display:grid;  
}


.va-center-box .container .grid {
  align-items: center;
}

.va-ji .container .grid {
  align-items: center;
  justify-items: center;
}





/* IMG */

.img-max-real300-allviewports img {
  max-width:300px!important;
}

.img-max-real450-allviewports img {
  max-width:450px!important;
}

.img-max-real800-allviewports img {
  max-width:800px!important;
}

@media (max-width: 767.99px) {

.img-max-real300 img {
  max-width:300px!important;
}
}

.img-max-300 img {
  max-width:200px;
}

.img-max-30 img {
  max-width:30px;
}

.img-max-200 img {
  max-width:150px;
}

.img-max-150 img {
  max-width:150px;
}

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

.img-max-400 img {
  max-width:400px;
}

.img-max-500 img {
  max-width:500px;
}

.img-max-70 img {
  max-width:70px;
}


.img-max-100 img {
  max-width:100px;
  height:auto;
  margin: 0 auto;
  padding-bottom:20px;
}

.img-max-100-no-p img {
  max-width:100px;
}

.img-max-30-no-p img {
  max-width:30px;
}

.align-left {
  text-align:left!important;
  }

.align-left .object-center {
  margin-left:0!important;
}

.padding-rl-30 {
  padding:0 30px;
}

.padding-rl-50 {
  padding:0 50px;
}

/* BG */

.bg-gruen-20 {
  background-color:#ecf3da;
}

.bg-blau-20 {
  background-color:#e3effb;
}

.bg-orange-20 {
  background-color:#fff2d7;
}

.bg-orange-50 {
  background-color:#ffdd93;
}

.bg-neutral {
  background-color:#ececec
}

/* ----------------  SPECIAL ----------------------- */

.box-wasser-faq {
background-image: url(/fileadmin/images/wasser/wasser-fragen.jpg);
 background-size:cover;
  height:100%;
  display:flex;
  align-items: center;
justify-items: center;
}

.box-baeder-startseite {
background-image: url(/fileadmin/images/startseite/baeder.jpg);
 background-size:cover;
  height:100%;
  display:flex;
  align-items: center;
justify-items: center;
}

.h-immer-auto {
  height:auto!important;
}

@media (min-width: 1280px) {

.height-auto {
  height:auto;
    align-items: center;
justify-items: center;
}

.v-center-hero .swiper-wrapper {
  align-items: center;
justify-content: center;
}
 
 } 

@media (max-width: 1279.98px){
  .small-h-auto {
    height:auto;
    align-items: center;
justify-items: center;
}
}


  .faq-hero-left .swiper-slide-active {
align-items: center;
justify-items: center;
  } 

.baeder-hero-startseite .swiper-slide-next {
align-items: center;
justify-items: center;
  } 

@media (min-width: 1280px){
.baeder-hero-startseite a.bg-hellgrau-10 {
  margin-right:150px;
}

.hero-img-full-h img {
    max-height:100%!important;
    height:100%!important;
  }  
  
}





.h-full-auto .h-full {
  height:auto;
}

.quadratisch p {
  display:flex;
align-items: center;
justify-content: center;
  height:100%;
font-size: 16px;
line-height: 110%;
}

.quadratisch p:before {
    content: "";
    display:block;
    padding-top: 100%;
    }


@media (min-width: 1280px){
  .text-abstand-startseite p {
 padding-right:100px;   
  }

  .text-mh-110 p {
    min-height:110px;
  }  
  
  .text-mh-80 p {
    min-height:80px;
  }   
  
    .text-mh-75 p {
    min-height:75px;
  }   
  
    .text-mh-50 p {
    min-height:50px;
  }     
  
    .text-mh-100 p {
    min-height:100px;
  }      
  
.text-mh-180 .rte {
    min-height:201px;
  align-items: center;
justify-items: center;
display:grid;  
  }   
  
 
 .text-mh-90 .rte {
    min-height:90px;
  align-items: center;
justify-items: center;
display:grid;  
  }   
   
 
  
}

@media (min-width: 768px){
  
 .text-mh-125 .rte {
    min-height:125px;
  align-items: center;
justify-items: center;
display:grid;  
  }   
  
 .text-mh-147 .rte {
    min-height:147px;
  align-items: center;
justify-items: center;
display:grid;  
  }     
}

@media (max-width: 767.98px){
.grid-change-3-1 {
 grid-item:nth-child(1) { order: 2; }
  grid-item:nth-child(2) { order: 3; }
  grid-item:nth-child(3) { order: 1; }  
  }
}

.span-min-width-100 span {
  min-width:100px;
  display:inline-block;
}

.span-min-width-120 span {
  min-width:120px;
  display:inline-block;
}

/* ------------------- WASSERTROPFEN ----------------- */

@media (min-width: 1280px){
  
.strom-text-oben {
  padding-bottom:30px!important;
  padding-top:0!important;
}

.strom-text-unten {
  padding-top: 50px !important;
padding-bottom: 120px!important;
}  
  
  
  
.wasser-text-oben {
  padding-bottom:30px!important;
  padding-top:40px!important;
}

.wasser-text-unten {
  padding-top: 50px !important;
padding-bottom: 0!important;
}
  
.gas-text-oben {
  padding-bottom:20px!important;
  padding-top:60px!important;
}

.gas-text-unten {
  padding-top: 50px !important;
padding-bottom: 0!important;
}  
  
}


.wasser-text-oben {
  padding-bottom:20px;
  padding-top:10px;
}

.wasser-text-unten {
  padding-top:20px;
}


.pt-sm {
 padding-top:30px;   
  }

@media (min-width: 1280px){
  .pt-sm {
 padding-top:0;   
  }

  .sonderabstand-haus {
    margin-top:68px;
  }  
  
.m-top-neg-xl {
  margin-top:-80px;
}
  
  
}





/* ------------------- CAROUSEL -------------------------- */

@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}



.carousel ol, .carousel li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  padding-top: 75%;
  filter 
}


.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}


#bewerbungsformular-466-fileupload-1, #bewerbungsformular-558-fileupload-1 {
  	margin-bottom: -20px !important;
	display: block;
}

#bewerbungsformular-466-fileupload-2, #bewerbungsformular-466-fileupload-3, 
#bewerbungsformular-558-fileupload-2, #bewerbungsformular-558-fileupload-3 {
  	margin-bottom: -40px !important;
	display: block;
}