@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');


body {font-family: 'Open Sans', sans-serif !important; color:#323946 !important;}

.rot {background: #cd1719;}
.rot h3, .rot h2, .rot h1, .rot .textmedia-text, .rot a {color:#fff;}
.dunkelgrau {background: #323946;}
.dunkelgrau .textmedia-text, .orange .textmedia-text, .dunkelgrau h2, .dunkelgrau h3, .dunkelgrau h1, .orange h1, .orange h2, .orange h3, .dunkelgrau a, .orange a {color:#fff;}
.hellgrau {background: #e3e3e3;}
.slider {padding: 0 !important;}
.slider h5 {
    background: #cd1719 none repeat scroll 0 0;
    color: #fff;
    display: inline;
    float: inherit;
    font-size: 60px;
    font-weight: normal;
    padding: 5px 11px;
    width: auto;
}


#c252 .ce-gallery img {padding: 0 8%;}

footer img {  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);}

#kabeltv .logo img {
    width: 270px;
}
#kabeltv .kopfbereich {background-color: rgb(255, 221,0 );}
main .tx-powermail .powermail_legend {display: none;}
main .tx-powermail .container-fluid {padding: 0 !important;}

main h1 {margin-top: 30px;}
main .dunkelgrau h1 {margin: 30px 0;}
main .hellgrau {padding: 0; margin:0% 0;}

main h2 {font-weight: 600; margin-top:20px; margin-bottom: 6px; color:#cd1719; }

main .col .row .col .ce-gallery img  {  }




#kabeltv .kopfbereich .textmedia-text p {background:#cd1719; }

#kabeltv .dunkelgrau h1 {color:rgb(255, 221,0 );}

.kopfbereich .textmedia-text a:hover {color: #323946;}

.kopfbereich .textmedia-text .fa {color:#fff !important;}

.tx-powermail h3 {display: none;}

.frame-custom-20 p {font-size: 10px;}
.dunkelgrau .frame,
.kopfbereich .frame {padding:0; margin:0; gap:0;}
.dunkelgrau .textmedia  { gap:0;}
.kopfbereich .textmedia  { gap:0;}

main .dunkelgrau h1 {
  margin: 30px 0 !important;
}
.dunkelgrau a {color:#fff !important;}
.dunkelgrau * {color:#fff;}
.hellgrau h1 {
  margin-top: 00px;
}

footer p {
  margin-top: 0;
  margin-bottom: 0;
}

footer a:hover {color:#fff;}

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


main {padding: 0 0;}
#pageid1 main  {padding: 0% 0 2%;}
header a,
main a {color: #cd1719;}
footer {margin: 2% 0;}
.footer {margin: 2% 0 ;}
.footertrenner {border-bottom: 1px solid #fff;}
.footer .ce-center .ce-gallery {max-width: 200px;}
#c2 p {font-size: 25px; font-weight: 600;}
.whitetext .textmedia-text, .whitetext h1,.whitetext h2, .whitetext h3, .whitetext h4, .whitetext a {color:#fff !important;}

.menuebalken {margin-top:10px;}
.menuebalken,
.breadcrumps { width: 100%;}
.grau  {background: #d2d2d2;}

.footerleiste {background: #9f9f9f;}


.topmenu {float:right; width: 65%;}


.mobilelogo {display: none;}

.footerpadding {padding: 2% 0 0;}



.copyright {font-size: 12px; color:404040; padding: 1% 0; text-align: center;}


main a {text-decoration: underline;;}
.animation p {
    height: 5px;
    width: 100%;
}

.flexslider .ce-left .ce-gallery, 
.flexslider  .ce-column {
    float: left;
    width: 100%;
}


.flexslider 
.flexslider .ce-left .ce-gallery {float:inherit;}


.flexslider  .ce-gallery figure {
    display: table;
    margin: 0;
    width: 100%;
}

.flexslider {
	margin: 0 !important;
	border: 0px !important;
}


.animation .flexman, .animation .slides, .animation .frame, .animation .image, .animation .ce-row, .animation figure, .animation img, .animation .ce-column, .animation .ce-gallery, .animation .ce-outer {
    width: 100% !important;
    position: relative;
    float: left;
    padding: 0;
    margin: 0;
    border: none;
}



.animation .textmedia-text {
    top: 40%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.animation h5 {
    background: #cd1719 none repeat scroll 0 0;
    color: #fff;
    display: inline;
    float: inherit;
    font-size: 46px;
    font-weight: normal;
    padding: 10px 25px;
    width: auto;
	border-radius: 8px;
}


#inhalt .btn:hover {
  transition: 1s ease-in-out;
  background: #4F95DA;
}

#inhalt  .btn:hover svg {
  stroke-dashoffset: -480;
}

#inhalt  .btn span {
  color: white;
  font-size: 18px;
  font-weight: 100;
}

#inhalt  .btn {text-decoration: none !important; font-weight: bold;}
#inhalt  .btn {
  cursor: pointer;
  background: transparent;
 
  outline: none;
  transition: 1s ease-in-out;
	background: #cd1719;
	color:#fff;
	padding: 12px 30px;
	

}
/* =========================================================
   HEADER-BUTTONS – OHNE FONT AWESOME
   ========================================================= */

/* Gemeinsamer Button-Container */
#elektro .kopfbereich .top-buttons,
#kabeltv .kopfbereich .top-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;

    margin: 28px 0 0;
    padding: 0;
}


/* Gemeinsamer Button */
#elektro .kopfbereich .action-btn,
#kabeltv .kopfbereich .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 54px;
    padding: 10px 22px 10px 12px;

    border: 0;
    border-radius: 999px;

    color: #fff;
    text-decoration: none;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;

    box-shadow: 0 8px 17px rgba(0, 0, 0, 0.18);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   ICON-KREIS
   ========================================================= */

#elektro .kopfbereich .action-btn > i,
#kabeltv .kopfbereich .action-btn > i {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;
    width: 34px;
    height: 34px;

    margin: 0;
    padding: 0;

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);

    color: #fff;

    font-size: 0;
    font-style: normal;
    line-height: 1;
}


/*
 * Alte Font-Awesome-Pseudoelemente sicher ausblenden.
 * Dadurch erscheinen keine Kästchen mehr.
 */
#elektro .kopfbereich .action-btn > i::before,
#kabeltv .kopfbereich .action-btn > i::before {
    content: "" !important;

    display: block;
    width: 17px;
    height: 17px;

    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* =========================================================
   TELEFON
   fa-phone
   ========================================================= */

#elektro .kopfbereich .fa-phone::before,
#kabeltv .kopfbereich .fa-phone::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E");
}


/* =========================================================
   SUPPORT
   fa-life-ring
   ========================================================= */

#elektro .kopfbereich .fa-life-ring::before,
#kabeltv .kopfbereich .fa-life-ring::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 4a6 6 0 0 1 3.54 1.16l-2.1 2.1A3 3 0 0 0 12 9a3 3 0 0 0-1.44.37l-2.1-2.1A6 6 0 0 1 12 6zm-6 6c0-1.31.42-2.52 1.14-3.51l2.11 2.11A3 3 0 0 0 9 12c0 .52.13 1.01.36 1.44l-2.1 2.1A6 6 0 0 1 6 12zm6 6a6 6 0 0 1-3.51-1.14l2.1-2.1A3 3 0 0 0 12 15c.52 0 1.01-.13 1.44-.36l2.1 2.1A6 6 0 0 1 12 18zm4.75-2.47-2.1-2.1A3 3 0 0 0 15 12c0-.52-.13-1.01-.36-1.44l2.1-2.1A6 6 0 0 1 18 12c0 1.31-.42 2.52-1.25 3.53z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 4a6 6 0 0 1 3.54 1.16l-2.1 2.1A3 3 0 0 0 12 9a3 3 0 0 0-1.44.37l-2.1-2.1A6 6 0 0 1 12 6zm-6 6c0-1.31.42-2.52 1.14-3.51l2.11 2.11A3 3 0 0 0 9 12c0 .52.13 1.01.36 1.44l-2.1 2.1A6 6 0 0 1 6 12zm6 6a6 6 0 0 1-3.51-1.14l2.1-2.1A3 3 0 0 0 12 15c.52 0 1.01-.13 1.44-.36l2.1 2.1A6 6 0 0 1 12 18zm4.75-2.47-2.1-2.1A3 3 0 0 0 15 12c0-.52-.13-1.01-.36-1.44l2.1-2.1A6 6 0 0 1 18 12c0 1.31-.42 2.52-1.25 3.53z'/%3E%3C/svg%3E");
}


/* =========================================================
   ONLINE-SHOP
   fa-shopping-bag
   ========================================================= */

#elektro .kopfbereich .fa-shopping-bag::before,
#kabeltv .kopfbereich .fa-shopping-bag::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3l-1 14H5L4 7h3zm2 0h6V6a3 3 0 0 0-6 0v1zm0 3a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm8 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3l-1 14H5L4 7h3zm2 0h6V6a3 3 0 0 0-6 0v1zm0 3a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm8 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0z'/%3E%3C/svg%3E");
}


/* =========================================================
   TV / BKTV
   fa-tv
   ========================================================= */

#elektro .kopfbereich .fa-tv::before,
#kabeltv .kopfbereich .fa-tv::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 5H3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 13H3V7h18v11zM8 22h8v-2H8v2z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 5H3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 13H3V7h18v11zM8 22h8v-2H8v2z'/%3E%3C/svg%3E");
}


/* =========================================================
   ELEKTRO: GRAUE BUTTONS
   ========================================================= */

#elektro .kopfbereich .action-btn {
    background-color: #343b45;
}

#elektro .kopfbereich .action-btn:hover,
#elektro .kopfbereich .action-btn:focus {
    color: #fff;
    background-color: #e52331;
    text-decoration: none;

    transform: translateY(-2px);
    box-shadow: 0 11px 22px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   KABEL-TV: ROTE BUTTONS
   ========================================================= */

#kabeltv .kopfbereich .action-btn {
    background-color: #ed2635;
}

#kabeltv .kopfbereich .action-btn:hover,
#kabeltv .kopfbereich .action-btn:focus {
    color: #fff;
    background-color: #343b45;
    text-decoration: none;

    transform: translateY(-2px);
    box-shadow: 0 11px 22px rgba(0, 0, 0, 0.22);
}


/* Buttontext */
#elektro .kopfbereich .action-btn > span,
#kabeltv .kopfbereich .action-btn > span {
    display: inline-block;
    white-space: nowrap;
}


/* Letzten Button in die nächste Zeile rechts setzen */
#elektro .kopfbereich .top-buttons .action-btn:last-child,
#kabeltv .kopfbereich .top-buttons .action-btn:last-child {
    margin-left: auto;
}


/* Kleinere Darstellung */
@media (max-width: 1199px) {

    #elektro .kopfbereich .top-buttons,
    #kabeltv .kopfbereich .top-buttons {
        gap: 10px;
        margin-top: 20px;
    }

    #elektro .kopfbereich .action-btn,
    #kabeltv .kopfbereich .action-btn {
        min-height: 48px;
        padding: 8px 16px 8px 10px;
        font-size: 14px;
    }

    #elektro .kopfbereich .action-btn > i,
    #kabeltv .kopfbereich .action-btn > i {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    #elektro .kopfbereich .action-btn > i::before,
    #kabeltv .kopfbereich .action-btn > i::before {
        width: 15px;
        height: 15px;
    }
}

/* =========================================================
   HEADER-BUTTONS 20 % KLEINER
   ========================================================= */

#elektro .kopfbereich .top-buttons,
#kabeltv .kopfbereich .top-buttons {
    gap: 11px;
    margin-top: 22px;
}

#elektro .kopfbereich .action-btn,
#kabeltv .kopfbereich .action-btn {
    min-height: 43px;

    /* bisher ungefähr 10px 22px 10px 12px */
    padding: 8px 18px 8px 10px;

    gap: 8px;

    font-size: 13px;
    line-height: 1.15;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.17);
}

/* Icon-Kreis ebenfalls 20 % kleiner */
#elektro .kopfbereich .action-btn > i,
#kabeltv .kopfbereich .action-btn > i {
    flex: 0 0 27px;

    width: 27px;
    height: 27px;
}

/* SVG-Symbol innerhalb des Kreises */
#elektro .kopfbereich .action-btn > i::before,
#kabeltv .kopfbereich .action-btn > i::before {
    width: 14px;
    height: 14px;
}

/* Buttontexte nicht umbrechen */
#elektro .kopfbereich .action-btn > span,
#kabeltv .kopfbereich .action-btn > span {
    white-space: nowrap;
}


/* =========================================================
   MOBILES MENÜ
   Standardmäßig auf Desktop und Tablet ausblenden
   ========================================================= */

#elektro > #hamburger,
#kabeltv > #hamburger {
    display: none;
}

/*
 * Das ursprüngliche mobile <nav> liegt bei dir außerhalb
 * von #elektro beziehungsweise #kabeltv.
 */
body > #my-menu {
    display: none;
}


/* =========================================================
   NUR SMARTPHONE – bis einschließlich 767 px
   ========================================================= */

@media screen and (max-width: 767px) {

    /* Hamburger anzeigen */
    #elektro > #hamburger,
    #kabeltv > #hamburger {
        display: block;

        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 9999;
    }

    /* Mobiles Menü für das Menü-Script verfügbar machen */
    body > #my-menu {
        display: block;
    }

    /* Desktop-Headerbereiche auf dem Smartphone ausblenden */
    #elektro .hiddenmobile,
    #kabeltv .hiddenmobile {
        display: none !important;
    }

    /* Logo über die ganze Breite */
    #elektro .kopfbereich .logo .col-md-4,
    #kabeltv .kopfbereich .logo .col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}


/* =========================================================
   TABLET UND DESKTOP – ab 768 px
   ========================================================= */

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

    /* Hamburger sicher ausblenden */
    #elektro > #hamburger,
    #kabeltv > #hamburger {
        display: none !important;
    }

    /* Mobiles Original-Menü ausblenden */
    body > #my-menu {
        display: none !important;
    }

    /* Desktopnavigation und Buttonbereich anzeigen */
    #elektro .hiddenmobile,
    #kabeltv .hiddenmobile {
        display: block;
    }

    /*
     * Bootstrap-Spalten mit top-buttons müssen weiterhin
     * als normale Spalte funktionieren.
     */
    #elektro .hiddenmobile .top-buttons,
    #kabeltv .hiddenmobile .top-buttons {
        display: flex;
    }
}

/* =========================================
   BKTV Buttons: Farbe + 3/2-Aufteilung
   ========================================= */

/* =========================================
   Header-Buttons Elektro + BKTV
   ========================================= */

#elektro .kopfbereich .top-buttons,
#kabeltv .kopfbereich .top-buttons {
    display: grid;

    grid-template-columns: repeat(3, max-content);
    justify-content: end;

    column-gap: 11px;
    row-gap: 11px;

    margin-top: 22px;
    padding-bottom: 10px;
}

/* 2. Reihe rechtsbündig */
#elektro .kopfbereich .action-btn:nth-child(4),
#kabeltv .kopfbereich .action-btn:nth-child(4) {
    grid-column: 2;
}

#elektro .kopfbereich .action-btn:nth-child(5),
#kabeltv .kopfbereich .action-btn:nth-child(5) {
    grid-column: 3;
}

/* Automatische Verschiebung deaktivieren */
#elektro .kopfbereich .top-buttons .action-btn:last-child,
#kabeltv .kopfbereich .top-buttons .action-btn:last-child {
    margin-left: 0;
}

/* Farben */
#elektro .kopfbereich .action-btn {
    background: #343b45;
}

#elektro .kopfbereich .action-btn:hover {
    background: #cd1719;
}

#kabeltv .kopfbereich .action-btn {
    background: #cd1719;
}

#kabeltv .kopfbereich .action-btn:hover {
    background: #343b45;
}


/* Footer-Logos gleich hoch */

.footercontainer #c319 img,
.footercontainer #c320 img {
    height: 140px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Falls das <picture>-Element mit skaliert werden soll */
.footercontainer #c319 picture,
.footercontainer #c320 picture {
    display: block;
    text-align: center;
}