/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
        display: block
    }
    
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1
    }
    
    audio:not([controls]) {
        display: none;
        height: 0
    }
    
    [hidden] {
        display: none
    }
    
    html,
    button,
    input,
    select,
    textarea {
        font-family: Roboto, Arial, sans-serif
    }
    
    body {
        margin: 0
    }
    
    /*
    a {
        outline: 3px solid transparent;
    }

    a:focus {
        outline: 3px solid blue;
    }
    */
    
    h1 {
        font-size: 2em;
        margin: .67em 0
    }
    
    h2 {
        font-size: 1.25em;
        margin: .83em 0
    }
    
    h3 {
        font-size: 1.17em;
        margin: 1em 0
    }
    
    h4 {
        font-size: 1em;
        margin: 1.33em 0
    }
    
    h5 {
        font-size: .83em;
        margin: 1.67em 0
    }
    
    h6 {
        font-size: .67em;
        margin: .33em 0
    }
    
    abbr[title] {
        border-bottom: 1px dotted
    }
    
    b,
    strong {
        font-weight: bold
    }
    
    blockquote {
        margin: 1em 40px
    }
    
    dfn {
        font-style: italic
    }
    
    hr {
        -moz-box-sizing: -box;
        box-sizing: content-box;
        height: 0
    }
    
    mark {
        background: #ff0;
        color: #000
    }
    
    p,
    pre {
        margin: 1em 0
    }
    
    code,
    kbd,
    pre,
    samp {
        font-family: monospace, serif;
        _font-family: 'courier new', monospace;
        font-size: 1em
    }
    
    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word
    }
    
    q {
        quotes: none
    }
    
    q:before,
    q:after {
        content: '';
        content: none
    }
    
    small {
        font-size: 80%
    }
    
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline
    }
    
    sup {
        top: -0.5em
    }
    
    sub {
        bottom: -0.25em
    }
    
    dl,
    menu,
    ol,
    ul {
        margin: 1em 0
    }
    
    menu,
    ol,
    ul {
        padding: 0 0 0 40px
    }
    
    nav ul,
    nav ol {
        list-style: none;
        list-style-image: none
    }

    ol.circle {
        list-style: none;
        counter-reset: steps;
        padding-left:0;
    }
    
    ol.circle li {
        counter-increment: steps;
        margin-bottom:1rem;
        padding-left:3rem;
    }
    
    ol.circle li::before {
        content: counter(steps);
        margin-left: -3rem;
        margin-right:0.85rem;
        background: #00519d;
        color: #fff;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        display: inline-grid;
        place-items: center;
        line-height: 1.5em;
        font-size:1.25rem;
    }

    img {
        border: 0;
        -ms-interpolation-mode: bicubic
    }
    
    svg:not(:root) {
        overflow: hidden
    }
    
    figure {
        margin: 0
    }
    
    form {
        margin: 0
    }
    
    button,
    input,
    select,
    textarea {
        font-size: 100%;
        margin: 0;
        vertical-align: baseline;
        *vertical-align: middle
    }
    
    button,
    input {
        line-height: normal
    }
    
    button,
    select {
        text-transform: none
    }
    
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button;
        cursor: pointer;
        *overflow: visible
    }
    
    button[disabled],
    html input[disabled] {
        cursor: default
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
        *height: 13px;
        *width: 13px
    }
    
    input[type="search"] {
        -webkit-appearance: textfield;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box
    }
    
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none
    }
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0
    }
    
    textarea {
        overflow: auto;
        vertical-align: top
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0
    }
    /* ======================
   Author's custom styles
   ======================*/
    /* roboto-300 - latin */
    
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        src: url('../fonts/roboto-v20-latin-300.eot');
        src: local('Roboto'), local('Roboto-300'), url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), url('../fonts/roboto-v20-latin-300.woff') format('woff'), url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg');
    }
    /* roboto-300italic - latin */
    /*
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-300italic.eot');
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('../fonts/roboto-v20-latin-300italic.woff2') format('woff2'),
       url('../fonts/roboto-v20-latin-300italic.woff') format('woff'),
       url('../fonts/roboto-v20-latin-300italic.ttf') format('truetype'),
       url('../fonts/roboto-v20-latin-300italic.svg#Roboto') format('svg');
}
*/
    /* roboto-regular - latin */
    
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/roboto-v20-latin-regular.eot');
        src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v20-latin-regular.woff') format('woff'), url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg');
    }
    /* roboto-italic - latin */
    
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        src: url('../fonts/roboto-v20-latin-italic.eot');
        src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), url('../fonts/roboto-v20-latin-italic.woff') format('woff'), url('../fonts/roboto-v20-latin-italic.ttf') format('truetype'), url('../fonts/roboto-v20-latin-italic.svg#Roboto') format('svg');
    }
    /* roboto-500 - latin */
    
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        src: url('../fonts/roboto-v20-latin-500.eot');
        src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), url('../fonts/roboto-v20-latin-500.woff') format('woff'), url('../fonts/roboto-v20-latin-500.ttf') format('truetype'), url('../fonts/roboto-v20-latin-500.svg#Roboto') format('svg');
    }
    /* roboto-500italic - latin */
    
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 500;
        src: url('../fonts/roboto-v20-latin-500italic.eot');
        src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url('../fonts/roboto-v20-latin-500italic.woff2') format('woff2'), url('../fonts/roboto-v20-latin-500italic.woff') format('woff'), url('../fonts/roboto-v20-latin-500italic.ttf') format('truetype'), url('../fonts/roboto-v20-latin-500italic.svg#Roboto') format('svg');
    }
    /* roboto-700 - latin */
    
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: url('../fonts/roboto-v20-latin-700.eot');
        src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), url('../fonts/roboto-v20-latin-700.woff') format('woff'), url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg');
    }
    /* roboto-700italic - latin
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v20-latin-700italic.eot');
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
       url('../fonts/roboto-v20-latin-700italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/roboto-v20-latin-700italic.woff2') format('woff2'),
       url('../fonts/roboto-v20-latin-700italic.woff') format('woff'),
       url('../fonts/roboto-v20-latin-700italic.ttf') format('truetype'),
       url('../fonts/roboto-v20-latin-700italic.svg#Roboto') format('svg');
}
*/
    
    html {
        font-family: sans-serif;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    html,
    body {
        font-size: 1em;
        line-height: 1.750em;
        color: #2c2b2b;
        font-family: 'Roboto', Arial, Verdana, sans-serif;
    }
/*    
    body {
        max-width: 1920px;
        margin: 0 auto !important; 
    }
*/
    header {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .header-container {
        position: relative;
    }
    
    a:link,
    a:visited {
        text-decoration: underline;
        color: #2362A6;
    }
    
    a:hover,
    a:active,
    a:focus {
        color: #01509C;
        font-weight: 500;
    }
    
    a.white:link,
    a.white:visited {
        text-decoration: underline;
        color: #fff;
    }
    
    a.white:hover,
    a.white:active,
    a.white:focus {
        font-weight: 500;
        color: #FFB67A;
    }
    
    a.button:link,
    a.button:visited {
        text-decoration: none;
        background-color: #ff8f35;
        color: #333;
        font-weight: 500;
        padding: 10px 25px;
    }

    a.button:hover,
    a.button:active,
    a.button:focus {
        color: #000;
    }

    *:focus-visible { 
        outline-color: currentColor; 
        outline-style: solid; 
        outline-width: .25rem; 
    }

    #tarifrechner *:focus-visible { 
        outline-color: #fff; 
        outline-style: solid; 
        outline-offset: 0.15rem;
        outline-width: .25rem; 
    }

    a.arrow {
        background: url('../img/layout/arrow.png') no-repeat;
        padding-left: 25px;
    }
    
    .new-win-icon {
      fill:currentColor;
      height:0.75rem;
      margin-inline-start:0.3em;
      vertical-align:middle;
      width:0.75rem;
    }

    footer a:link,
    footer a:visited {
        text-decoration: none;
        color: #fff;
        font-weight: 300;
    }
    
    footer a:hover,
    footer a:active,
    footer a:focus {
        color: #fff;
        text-decoration: underline;
    }
    
    #logo {
        display: none;
    }
    
    .content {
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
    }
    
    #topnav {
        display: none;
    }
    
    #bfsg-bar {
        display: none;
    }

    #breadcrumb {
        margin-bottom: 35px;
        color: #333;
        display: none;
    }
    
    #breadcrumb a {
        color: #333;
    }
    
    #breadcrumb a:hover {
        color: #000;
        font-weight:bold;
    }
    
    .breaddivider {
        font-size: 1.250rem;
        padding: 0 0.25rem;
    }
    
    .kvphighlight {
        background-color: #D1E0EE;
    }
    
    .table-borderless td {
        border: none;
    }

    .news-entry {
        border-bottom:1px solid #dee2e6;
        margin-bottom:1.5rem;
    }

    .news-entry:last-child {
        border-bottom:0;
    }

    .invalid-feedback {
        font-size: 100%;
        color: #c20013;
    }

    .custom-control-input.is-valid ~ .custom-control-label::before, .was-validated .custom-control-input:valid ~ .custom-control-label::before {
        border-color: #12852c;
    }

    .custom-control-input.is-invalid ~ .custom-control-label, .was-validated .custom-control-input:invalid ~ .custom-control-label {
        color: #c20013;
    }

/* Ticker Startseite
********************************/

.TickerNews {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
  
  .ti_wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 50px;
  }
  
  .ti_slide {
    width: 30000px;
    position: relative;
    left: 0;
    top: 0;
  }
  
  .ti_content {
    width: 8000px;
    position: relative;
    float: left;
  }
  
  .ti_news { float: left; }

    /* mobile nav
    *************************/
    
    .navbar-light .navbar-nav .nav-link {
        color: #00519D;
        background: #fff;
        padding: 10px 20px;
    }
    
    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .show>.nav-link {
        color: #fff;
        background: #FF8F35;
    }
    
    .navbar .mega-dropdown .dropdown-menu.mega-menu {
        width: 100%;
        padding: 20px;
        border: none;
        background-color: #00519D;
        color: #fff;
    }
    
    .dropdown-menu {
        background-color: #00519D;
        color: #fff;
    }
    
    .dropdown-menu .dropdown-item,
    .mega-menu .dropdown-item {
        padding: .5rem 1rem;
        text-decoration: none;
        color: #fff;
    }
    
    .mega-menu .dropdown-item:focus,
    .dropdown-item:hover {
        text-decoration: none;
        background-color: #FF8F35;
        color: #fff;
    }
    
    .navbar-brand {
        display: block;
        width: 90px;
        background: transparent url("../img/layout/ewg-logo.png") no-repeat 0 5px;
        background-size: contain;
        height: 75px;
        margin: 0 0 0;
    }
    
    footer {
        padding: 25px 0;
        background: #00519d;
        color: #fff;
    }
    
    .listing,
    .haken,
    .hakenw {
        margin-top: 0px;
        font-size: 1rem;
        padding-left: 0;
    }
    
    .listing li {
        margin-left: 15px;
        line-height: 30px;
    }
    
    .haken {
        list-style-image: url('../img/layout/haken.png');
    }
    
    .hakenw {
        list-style-image: url('../img/layout/hakenw.png');
    }
    
    .haken li,
    .hakenw li {
        margin-left: 25px;
        line-height: 30px;
    }
    
    .listing-square {
        margin-top: 0;
        padding-left: 0;
        list-style-type: square;
        color: #00519d;
    }
    
    .listing-square li {
        color: #00519d;
        margin-left: 15px;
    }
    
    .listing-square li span {
        color: #000;
    }
    
    ul.linklist {
        padding-left: 0;
        list-style-type: none;
        margin: 30px 0;
    }
    
    li.pdf-icon {
        padding-left: 25px;
        background: url('../img/layout/pdf-icon.png') no-repeat 0 5px;
        background-size: 16px;
    }
    
    p {
        line-height: 1.5em;
        margin: 0px 0 24px 0px;
    }
    
    p.menuhead {
        padding-bottom: 7px;
        border-bottom: 2px solid #fff;
        font-size: 1.250rem;
        letter-spacing: 0.2em;
        font-weight: 500;
        padding-left: 0px;
        margin-bottom: 10px;
    }
    
    .footer-headline {
        font-size: 1.25rem;
        letter-spacing: 0.15em;
        padding-bottom: 5px;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    
    .sidebar-headline {
        font-size: 1.125rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }
    
    .footer p {
        font-weight: 400;
    }
    
    h1,
    .h1 {
        font-size: 1.75rem;
        line-height: 2rem;
        font-weight: 700;
        margin: 0 0 25px 0;
        color: #00519d;
    }
    
    h2,
    .h2 {
        font-size: 1.250rem;
        line-height: 1.25em;
        margin: 0 0 5px 0;
        font-weight: 500;
        color: #00519d;
    }
    
    h3,
    .h3 {
        font-size: 1.250rem;
        line-height: 1.250em;
        margin: 0 0 5px 0;
        font-weight: 500;
        color: #00519d;
    }
    
    .square:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 5px;
        margin-bottom: 2px;
        background: #00519d;
    }
    /*
.arrow:before {
  content: "\203A\00A0";
  font-size:1.25rem;
  margin-right: 0px;
}
*/
    
    .italic {
        font-style: italic;
    }
    
    .fw300,
    .small {
        font-weight: 300;
    }
    
    .strong,
    strong {
        font-weight: 500;
    }
    
    .fw500 {
        font-weight: 500;
    }
    
    .uppercase {
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    
    hr {
        margin-bottom: 20px;
        border-color: #dee2e6;
    }


    .lightgreen {
        background-color: #d1e7dd;
        color:#198754;
    }

    legend {
        font-size: 1.250rem;
        line-height: 1.25em;
        font-weight: 500;
        color: #00519d;    
    }
    

    .text-lightblue {
        color: #a2d9f7;
    }
    
    .text-turquoise {
        color: #0298a4;
    }
    
    .text-blue {
        color: #0050a0;
    }

    .text-black {
        color: #333;
    }    

    .bg-lightblue {
        background-color: #eaf6fe;
    }
    
    .bg-blue {
        background-color: #00519d !important;
        color: #fff;
    }
    
    .table-bordered-blue {
        border:1px solid #00519d;
    }

    .table-bordered-blue thead th {
        border:1px solid #00519d;
        border-bottom:0;
    }    

    .table-bordered-blue td {
        border:1px solid #00519d;
    }    


    ul.haken-lightblue,
    ul.haken-turquoise,
    ul.haken-blue {
        margin-top: 0px;
        font-size: 1rem;
        padding-left: 40px;
    }
    
    ul.haken-lightblue li,
    ul.haken-turquoise li,
    ul.haken-blue li {}
    
    ul.haken-lightblue {
        list-style-image: url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='15' viewBox='0 0 8.5 7.83' enable-background='new 0 0 8.5 7.83' xml:space='preserve'%3E%3Cpath fill='%23A2D9F7' d='M8.504,0.582c0-0.21-0.025-0.36-0.075-0.449 c-0.05-0.089-0.133-0.134-0.251-0.134c-0.157,0-0.347,0.073-0.572,0.22C7.382,0.365,7.127,0.58,6.842,0.865L3.448,4.227 C3.244,4.428,3.07,4.585,2.924,4.7c-0.146,0.116-0.246,0.174-0.3,0.174c-0.128,0-0.229-0.098-0.304-0.294 C2.245,4.385,2.179,4.038,2.122,3.543C2.118,3.508,2.113,3.452,2.106,3.377C2.038,2.733,1.828,2.41,1.475,2.41 c-0.37,0-0.709,0.156-1.015,0.468C0.153,3.19,0,3.529,0,3.896c0,0.673,0.035,1.299,0.104,1.876c0.07,0.577,0.144,0.955,0.222,1.133 c0.093,0.214,0.298,0.422,0.615,0.623S1.523,7.83,1.737,7.83c0.203,0,0.552-0.201,1.045-0.604c0.494-0.403,1.091-0.974,1.793-1.711 l3.304-3.479l0.058-0.059c0.378-0.395,0.567-0.802,0.567-1.219V0.582z'/%3E%3C/svg%3E");
    }
    
    ul.haken-turquoise {
        list-style-image: url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='15' viewBox='0 0 8.5 7.83' enable-background='new 0 0 8.5 7.83' xml:space='preserve'%3E%3Cpath fill='%2300a8b5' d='M8.504,0.582c0-0.21-0.025-0.36-0.075-0.449 c-0.05-0.089-0.133-0.134-0.251-0.134c-0.157,0-0.347,0.073-0.572,0.22C7.382,0.365,7.127,0.58,6.842,0.865L3.448,4.227 C3.244,4.428,3.07,4.585,2.924,4.7c-0.146,0.116-0.246,0.174-0.3,0.174c-0.128,0-0.229-0.098-0.304-0.294 C2.245,4.385,2.179,4.038,2.122,3.543C2.118,3.508,2.113,3.452,2.106,3.377C2.038,2.733,1.828,2.41,1.475,2.41 c-0.37,0-0.709,0.156-1.015,0.468C0.153,3.19,0,3.529,0,3.896c0,0.673,0.035,1.299,0.104,1.876c0.07,0.577,0.144,0.955,0.222,1.133 c0.093,0.214,0.298,0.422,0.615,0.623S1.523,7.83,1.737,7.83c0.203,0,0.552-0.201,1.045-0.604c0.494-0.403,1.091-0.974,1.793-1.711 l3.304-3.479l0.058-0.059c0.378-0.395,0.567-0.802,0.567-1.219V0.582z'/%3E%3C/svg%3E");
    }
    
    ul.haken-blue {
        list-style-image: url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='15' viewBox='0 0 8.5 7.83' enable-background='new 0 0 8.5 7.83' xml:space='preserve'%3E%3Cpath fill='%2300519d' d='M8.504,0.582c0-0.21-0.025-0.36-0.075-0.449 c-0.05-0.089-0.133-0.134-0.251-0.134c-0.157,0-0.347,0.073-0.572,0.22C7.382,0.365,7.127,0.58,6.842,0.865L3.448,4.227 C3.244,4.428,3.07,4.585,2.924,4.7c-0.146,0.116-0.246,0.174-0.3,0.174c-0.128,0-0.229-0.098-0.304-0.294 C2.245,4.385,2.179,4.038,2.122,3.543C2.118,3.508,2.113,3.452,2.106,3.377C2.038,2.733,1.828,2.41,1.475,2.41 c-0.37,0-0.709,0.156-1.015,0.468C0.153,3.19,0,3.529,0,3.896c0,0.673,0.035,1.299,0.104,1.876c0.07,0.577,0.144,0.955,0.222,1.133 c0.093,0.214,0.298,0.422,0.615,0.623S1.523,7.83,1.737,7.83c0.203,0,0.552-0.201,1.045-0.604c0.494-0.403,1.091-0.974,1.793-1.711 l3.304-3.479l0.058-0.059c0.378-0.395,0.567-0.802,0.567-1.219V0.582z'/%3E%3C/svg%3E");
    }
    
    .combox {
        border: 1px solid #0050a0;
        padding: 0px;
        position: relative;
    }
    
    .combox .listing-square {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
        list-style-type: square;
        color: #00519d;
    }
    
    .combox .listing-square li {
        color: #00519d;
        margin-left: 5px;
    }
    
    .combox .preisleistung {
        height: 55px;
        font-size: 1.125rem;
        line-height: 1.125rem;
        padding-top: 8px;
        text-align: center;
        color: #fff;
        margin: 0px;
        font-weight: bold;
    }
    
    .combox p {
        line-height: 1.75em;
    }
    
    .combox .xxlarge {
        font-weight: 600;
    }
    
    .combox .comprice {
        margin: 0;
    }
    
    .download-rate-lightblue,
    .download-rate-turquoise,
    .download-rate-blue,
    .upload-rate-lightblue,
    .upload-rate-turquoise,
    .upload-rate-blue {
        padding-left: 20px;
        display: inline-block;
        font-weight: bold;
        background-repeat: no-repeat;
        background-position: 0 7px;
    }
    
    .download-rate-lightblue {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 8.5 8.5' enable-background='new 0 0 8.5 8.5' xml:space='preserve'%3E%3Cpolygon fill='%23666666' points='2.126,-0.004 2.126,4.249 0,4.249 4.252,8.5 8.504,4.249 6.379,4.249 6.379,-0.004 '/%3E%3C/svg%3E");
    }
    
    .download-rate-turquoise {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 8.5 8.5' enable-background='new 0 0 8.5 8.5' xml:space='preserve'%3E%3Cpolygon fill='%2300a8b5' points='2.126,-0.004 2.126,4.249 0,4.249 4.252,8.5 8.504,4.249 6.379,4.249 6.379,-0.004 '/%3E%3C/svg%3E");
    }
    
    .download-rate-blue {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 8.5 8.5' enable-background='new 0 0 8.5 8.5' xml:space='preserve'%3E%3Cpolygon fill='%2300519d' points='2.126,-0.004 2.126,4.249 0,4.249 4.252,8.5 8.504,4.249 6.379,4.249 6.379,-0.004 '/%3E%3C/svg%3E");
    }
    
    .upload-rate-lightblue {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 8.5 8.5' enable-background='new 0 0 8.5 8.5' xml:space='preserve'%3E%3Cpolygon fill='%23666666' points='4.251,-0.004 0,4.249 2.125,4.249 2.125,8.5 6.379,8.5 6.379,4.249 8.505,4.249 '/%3E%3C/svg%3E");
    }
    
    .upload-rate-turquoise {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 8.5 8.5' enable-background='new 0 0 8.5 8.5' xml:space='preserve'%3E%3Cpolygon fill='%2300a8b5' points='4.251,-0.004 0,4.249 2.125,4.249 2.125,8.5 6.379,8.5 6.379,4.249 8.505,4.249 '/%3E%3C/svg%3E");
    }
    
    .upload-rate-blue {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 8.5 8.5' enable-background='new 0 0 8.5 8.5' xml:space='preserve'%3E%3Cpolygon fill='%2300519d' points='4.251,-0.004 0,4.249 2.125,4.249 2.125,8.5 6.379,8.5 6.379,4.249 8.505,4.249 '/%3E%3C/svg%3E");
    }
    
    .separator {
        display: flex;
        align-items: center;
        padding: 10px;
    }
    
    .separator p {
        padding: 0 2rem;
        margin: 0;
    }
    
    .separator .line {
        flex: 1;
        height: 3px;
        background-color: #fff;
    }
    
    .white {
        color: #fff;
    }
    
    .blue {
        color: #00519D;
    }
    
    .green {
        color: #649543;
    }
    .dark-green {
        color:#4c792e;
    }
    
    .combluebox {
        color: #000;
        padding: 10px;
        background: #9adaf6;
        position: relative;
    }
    
    .comboxprice {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #00519d;
        color: #fff;
        padding: 5px 40px;
        margin: 0;
    }
    
    .turquoise {
        background: #007780;
        color: #fff;
    }
    
    .tr-head {
        padding: 20px 0 0;
        text-align: center;
    }
    
    .tr-head2 {
        padding: 20px 0 0;
        text-align: center;
        min-height: 100px;
    }
    
    .tr-head3 {
        padding: 20px 0 0;
        text-align: center;
        min-height: 135px;
    }
    
    .tr-desc {
        min-height: 80px;
    }
    
    .tr-zeit {
        min-height: 70px;
    }
    
    .tr-preis {
        min-height: 80px;
    }
    
    .tr-result {
        text-align: center;
        font-weight: 500;
        color: #00519D;
    }
    
    .tr-empf {
        position: absolute;
        top: -40px;
        right: 10px;
    }
    
    .turquoise .tr-head h2,
    .turquoise .tr-head2 h2,
    .turquoise .tr-head3 h2,
    .turquoise .tr-desc,
    .turquoise .tr-zeit,
    .turquoise .tr-preis,
    .turquoise .tr-result {
        color: #fff;
    }
    
    .bluebox {
        color: #fff;
        padding: 10px;
        background: #00519D;
        position: relative;
    }
    
    .bluepuzzle {
        padding: 40px 40px 20px;
        height: 100%;
    }
    
    .showcase {
        background: #00519D;
        color: #fff;
        padding: 20px 20px 50px;
        margin: 0x;
        height: 100%;
    }
    
    .showcase-icon {
        text-align: center;
    }
    
    .showcase-text {
        text-align: center;
        font-size: 1.5rem;
    }
    
    .showcasebutton {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
        left: 0;
    }
    
    .comshowcase {
        position: relative;
        padding: 0 10px 10px 10px;
        border: 1px solid #2371B9;
        margin-bottom: 20px;
    }
    
    .comshowcase-head {
        background: #2371B9;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        padding: 3px 0 3px 10px;
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .lw {
        letter-spacing: 0.2em;
        font-weight: 700;
        text-transform: uppercase;
    }
    
    #contact-bar {
        display: none;
    }
    
    #contact-info {
        position: relative;
        display: none;
        float: left;
        background: #00519D;
        color: #fff;
        width: 250px;
        padding: 25px 15px 15px;
    }
    
    #contact-bar a:focus-visible { 
        border:3px dashed #fff;
    }

    .tarif-headline {
        background-color: #00519d;
        color: #fff;
        padding: 0.5rem 0.75rem;
        font-weight: 500;
    }
    
    .tarif-row {
        padding: 0.75rem 0.75rem;
        border-bottom: 1px solid #000;
    }
    
    .tarif-row-sm {
        padding: 0.75rem 0.75rem;
    }
    
    .tarif-row-small {
        padding: 0rem 0.75rem 0.75rem;
        border-bottom: 1px solid #000;
    }
    
    .border-xs-none {
        border-bottom: none;
    }
    
    .upperwide {
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }
    
    .uppersemiwide {
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }
    
    .large {
        font-size: 1.50rem;
    }
    
    .xlarge {
        font-size: 2rem;
        line-height: 2.25rem;
    }
    
    .xxlarge {
        font-size: 5rem;
        line-height: 5rem;
    }
    
    .preisleistung {
        background-color: #fa9124;
        height: 50px;
        font-size: 1rem;
        line-height: 1.125rem;
        padding-top: 5px;
        text-align: center;
        color: #fff;
        margin: -10px;
        font-weight: bold;
    }
    
    .comprice {
        background-color: #fa9124;
        font-size: 1.25rem;
        text-align: center;
        color: #fff;
        padding: 10px 0;
        margin: -10px;
        font-weight: bold;
    }
    
    .accordion-button:focus {
        z-index: 3;
        outline: 0;
        box-shadow: var(--bs-accordion-btn-focus-box-shadow);
    }

    .accordion .card-header {
        padding: 2px;
        /*background-color: #00519d; */
    }

    
    .accordion .card {
        margin-bottom: 5px;
        background: #fff;
        border: none;
    }
    
    .accordion .card-header .btn {
        background-color: #00519d;
        color: #fff;
        width: 100%;
        text-align: left;
        border:3px solid #00519d;
    }
    
    .accordion .card-header .btn:focus-visible { 
        border:3px dashed #fff;
    }


    .accordion .card-header button[aria-expanded="true"] {
        background-color: #FF8F35;
        border:3px solid #FF8F35;
        color:#000;
    }
    
    .accordion .card-header .btn:hover,
    .accordion .card-header .btn:active,
    .accordion .card-header .btn:focus {
        text-decoration: none;
    }
    /*
.accordion .card-header:after {
font-family: 'FontAwesome';
content: "\f068";
content: "+";
float: right;
}
.accordion .card-header[aria-expanded='true']:after {
content: "\f067";
content: "-";
}
*/
    
    .btn-success {
        background-color: #ff8f35;
        border-color: #ff8f35;
        border-radius: 0;
        padding: 10px 25px;
        font-size: 0.875rem;
        font-weight: 500;
        text-transform: uppercase;
        color: #333;
    }

    .btn-success:hover {
        background-color: #00519d;
        border-color: #00519d;
        color: #fff;
    }

    a.btn-primary {
        color:#fff;
        text-decoration: none;
        background-color: #00529e;
    }

    .btn-primary {
        background-color: #00519d;
    }


    .puzzle {
        position: relative;
    }
    
    .puzzletext {
        position: absolute;
        top: 0;
        left:0;
        width: 100%;
        height:100%;
        background-color: rgba(51, 51, 51, 0.3);
        color: #fff;
        text-align: center;
        font-size: 1.5rem;
        line-height: 2.25rem;
        letter-spacing: 0.2em;
        font-weight: 500;
        text-transform: uppercase;
        text-shadow: 2px 2px rgba(51, 51, 51, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .pt-xs-20 {
        top: 15%;
    }
    
    .puzzlebox {
        padding: 15px 30px;
        border: 2px solid #fff;
        font-size: 1rem;
        letter-spacing: 0.18em;
        text-shadow: 2px 2px rgba(51, 51, 51, 0.8);
        -webkit-box-shadow: 2px 2px 3px 0px rgba(51, 51, 51, 0.2), inset 2px 2px 3px 0px rgba(51, 51, 51, 0.2);
        -moz-box-shadow: 2px 2px 3px 0px rgba(51, 51, 51, 0.2), inset 2px 2px 3px 0px rgba(51, 51, 51, 0.2);
        box-shadow: 2px 2px 3px 0px rgba(51, 51, 51, 0.2), inset 2px 2px 3px 0px rgba(51, 51, 51, 0.2);
    }
    
    .combox-pt-spacer {
        padding-top: 63px;
    }
    
    .pt-spacer {
        padding-top: 66px;
    }
    
    .mwstbutton {
        width: 125px;
        margin-bottom: 20px;
        position: absolute;
        right: 0;
        bottom: -130px;
    }
    
    .mwstspacer {
        position: relative;
        margin-bottom: 130px;
    }
    
    .formnav li {
        border: none;
    }
    
    .formnav .nav-item {
        margin-bottom: 0px !important;
        position: relative;
    }
    
    .formnav .nav-link {
        padding: 0.5rem 0.5rem;
        border: none !important;
    }
    
    .formnav .nav-link:focus,
    .formnav .nav-link:hover {
        border: none !important;
        color: #000;
        font-weight: normal !important;
    }
    
    .formnav .nav-item.show .nav-link,
    .formnav .nav-link.active {
        border: none !important;
        color: #fff;
        font-weight: bold;
        border-top: 2px solid #00519d;
        background-color:#00519d;
    }
    
    .border-leftside {
        display: inline-block;
        width: 50%;
        height: 4px;
        background-color: #ccc;
    }
    
    .border-rightside {
        display: inline-block;
        width: 50%;
        height: 4px;
        background-color: #ccc;
    }
    
    .navstep-active .border-leftside {
        background-color: #00529e;
    }
    
    .navstep-done .border-leftside,
    .navstep-done .border-rightside {
        background-color: #00529e;
    }
    
    .progress-bar {
        background-color: #00519d;
    }
    
    .tooltip-inner {
        background-color: #00529e;
    }
    
    .tooltip.bs-tooltip-right .arrow:before {
        border-right-color: #00529e !important;
    }
    
    .tooltip.bs-tooltip-left .arrow:before {
        border-left-color: #00529e !important;
    }
    
    .tooltip.bs-tooltip-bottom .arrow:before {
        border-bottom-color: #00529e !important;
    }
    
    .tooltip.bs-tooltip-top .arrow:before {
        border-top-color: #00529e !important;
    }
    
    @media (min-width: 576px) {
        .pt-xs-20 {
            top: 30%;
        }
        .pt35 {
            top: 35%;
        }
        .puzzletext {
            font-size: 1.75rem;
        }
        .puzzlebox {
            padding: 20px 40px;
            border: 3px solid #fff;
            font-size: 1rem;
        }
        #index-fibers {
            width: 100%;
            height: 100%;
            background-image: url("../img/fibers_545.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        #contact-bar {
            display: block;
            position: fixed;
            top: 40%;
            right: 0;
            height: 128px;
            z-index: 10;
            -webkit-transform: translateY(-20%);
            -ms-transform: translateY(-20%);
            transform: translateY(-20%);
        }
        .tarif-row-sm {
            padding: 0.75rem 0.75rem;
            border-bottom: 1px solid #000;
        }
        .border-sm {
            border: 1px solid #dee2e6;
        }
    }
    
    @media (min-width: 768px) {
        header {
            border-bottom: 20px solid #00519d;
        }
        #topnav {
            display: flex;
            list-style-type: none;
        }
        #topnav li {
            margin: 0;
            font-size: 0.875rem;
            line-height: 0.875rem;
            padding: 0 5px;
            border-right: 1px solid #9a9a9a;
        }
        #topnav li:last-child {
            border-right: none;
        }
        #topnav li a {
            color: #333;
            text-decoration: none;
        }
        #topnav li a:hover {
            color: #000;
        }
        #bfsg-bar {
            display:block;
            background-color:#004f9c;
            padding-top:5px;
            padding-bottom:5px;
        }
        #bfsg-bar a {
            color: #fff;
            text-decoration: none;
            font-size:1.25rem;
            font-weight:300;
        }
        #bfsg-bar a:hover {
            color: #fff;
            text-decoration: underline;
        }        
        .navbar {
            padding: 0;
            min-height: auto;
            border-bottom: none;
        }
        #navbarCollapse {
            margin-top: 0px;
        }
        .navbar-light .navbar-nav {
            margin: 0;
            background: transparent;
        }
        .nav-item {
            margin: 0;
            padding: 0;
            border-right: 1px solid #9a9a9a;
        }
        .navbar-light .navbar-nav .nav-link {
            color: #00519d;
            font-size: 1rem;
            line-height: 1.5rem;
            padding: 5px 5px;
            font-weight: 500;
            text-decoration: none;
        }
        .navbar-nav li.last {
            border-right: none;
            margin-right: 0px;
        }
        .dropdown-toggle::after {
            display: none;
        }
        .navbar-light .navbar-nav .nav-link:hover {
            background: #00519d;
        }
        .navbar-light .navbar-nav .nav-link:focus,
        .navbar-light .navbar-nav .show>.nav-link {
            color: #fff;
            background: #00519d;
        }
        #parkhaus #nav10,
        #strom #nav1,
        #strom-produkte #nav1,
        #allgemeiner-tarif #nav1,
        #city-tarife #nav1,
        #oekostrom-tarife #nav1,
        #waermepumpen-tarife #nav1,
        #speicher-tarife #nav1,
        #aussernetz-tarife #nav1,
        #info-gewerbekundentarif #nav1,
        #strom-informationen #nav1,
        #zusammensetzung-strompreise #nav1,
        #stromkennzeichnung #nav1,
        #strom-energiedienstleistungsgesetz #nav1,
        #strom-grundversorgung #nav1,
        #strom-schlichtung-energie #nav1,
        #belastungsausgleich #nav1,
        #strom-e-mobilitaet #nav1,
        #strom-stromcheck #nav1,
        #energiespartipps-strom #nav1,
        #erdgas #nav1,
        #erdgas-produkte #nav1,
        #allgemeine-preise #nav1,
        #erdgas-sondertarif #nav1,
        #gas-gewerbekundentarif #nav1,
        #erdgas-informationen #nav1,
        #erdgas-schlichtung-energie #nav1,
        #erdgas-grundversorgung #nav1,
        #erdgas-energiedienstleistungsgesetz #nav1,
        #erdgas-gasgeruch #nav1,
        #erdgastankstelle #nav1,
        #erdgas-foerderung #nav1,
        #energiespartipps-erdgas #nav1,
        #gasinstallateure #nav1,
        #wasser #nav1,
        #wasser-preise #nav1,
        #trinkwasseranalyse #nav1,
        #energiespartipps-wasser #nav1,
        #online-service #nav2,
        #anmelden #nav2,
        #abmelden #nav2,
        #zaehlerstand #nav2,
        #service-faq #nav2,
        #service-bauherren #nav2,
        #service-ablesen #nav2,
        #schadensmeldung #nav2,
        #contracting #nav3,
        #thermografie #nav3,
        #dienstleistungen-e-mobilitaet #nav3,
        #balkonkraftwerk #nav3,
        #energieausweis #nav3,
        #dienstleistungen-stromcheck #nav3,
        #energieberatung #nav3,
        #energieeffizenz #nav3,
        #heizungspumpe #nav3,
        #dienst-foerderungen #nav3,
        #vdsl-produkte #nav4,
        #glasfaser-produkte #nav4,
        #ip-tv #nav4,
        #office-produkte #nav4,
        #komm-wlanhotspot #nav4,
        #komm-cloudpbx #nav4,
        #komm-geschaeftkunden #nav4,
        #komm-geschaeftkunden-internet #nav4,
        #komm-geschaeftkunden-telefonie #nav4,
        #komm-geschaeftkunden-standort #nav4,
        #komm-geschaeftkunden-rechenzentrum #nav4,
        #komm-hausanschluss #nav4,
        #komm-hausinstallation #nav4,
        #komm-verfuegbarkeit #nav4,
        #komm-erklaerfilme #nav4,
        #komm-feldkahl #nav4,
        #komm-rottenberg #nav4,
        #kommunikation-download #nav4,
        #kunden-werben #nav4,
        #hardware #nav4,
        #komm-wlanoptimierung #nav4,
        #kommunikation-fragen #nav4,
        #speedtest #nav4,
        #infovideo #nav4,
        #immo-erfahrung #nav5,
        #immo-verwaltung #nav5,
        #immo-nebenkosten #nav5 {
            color: #fff;
            background: #00519d;
        }
        .dropdown-menu {
            background-color: #00519D;
        }
        .dropdown-menu .dropdown-item {
            padding: .375rem 1rem;
            text-decoration: none;
            color: #fff;
        }
        .dropdown-item:focus,
        .dropdown-item:hover {
            text-decoration: none;
            background-color: #FF8F35;
            color: #000;
            font-weight: normal;
        }
        .navbar-nav {
            margin: 0;
        }
        .navbar .mega-dropdown {
            position: static !important;
        }
        .navbar .mega-dropdown .dropdown-menu.mega-menu {
            width: 100%;
            max-width: 690px;
            padding: 20px;
            background-color: #00519D;
            border: none;
            color: #fff;
        }
        #breadcrumb {
            display: block;
        }
        #logo {
            display: inline-block;
            width: 200px;
        }
        .navbar-brand {
            display: none;
        }
        h1,
        .h1 {
            font-size: 1.75rem;
            line-height: 2rem;
            font-weight: 700;
            margin: 0 0 35px 0;
            color: #00519d;
        }
        h2,
        .h2 {
            font-size: 1.250rem;
            line-height: 1.25em;
            margin: 0 0 5px 0;
            font-weight: 500;
            color: #00519d;
        }
        h3,
        .h3 {
            font-size: 1.250rem;
            line-height: 1.250em;
            margin: 0 0 5px 0;
            font-weight: 500;
            color: #00519d;
        }
        p.menuhead {
            letter-spacing: 0.05em;
            font-size: 1.125rem;
        }
        .showcase-text {
            text-align: center;
            font-size: 1.25rem;
        }
        .upperwide {
            letter-spacing: 0.25em;
            text-transform: uppercase;
        }
        .lw {
            letter-spacing: 0.1em;
            font-weight: 500;
            text-transform: uppercase;
        }
        #index-fibers {
            background-image: url("../img/fibers_730.jpg");
        }
        .puzzletext {
            font-size: 1.25rem;
            line-height: 1.75rem;
        }
        .puzzlebox {
            padding: 10px 20px;
            border: 3px solid #fff;
            font-size: 0.875rem;
            letter-spacing: 0.15em;
        }
        .pt35 {
            top: 35%;
        }
        .warrow {
            width: 30px;
        }
        .mwstbutton {
            width: 125px;
            position: absolute;
            right: 60px;
            top: -20px;
            z-index: 10;
        }
        .mwstspacer {
            padding-right: 180px;
            position: relative;
            margin-bottom: 0;
        }
        .mwstkom {
            margin-top: -50px
        }
        .show>.dropdown-menu {
            animation-name: slidenavAnimation;
            animation-duration: .5s;
            animation-iteration-count: 1;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
            -webkit-animation-name: slidenavAnimation;
            -webkit-animation-duration: .5s;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-timing-function: ease;
            -webkit-animation-fill-mode: forwards;
            -moz-animation-name: slidenavAnimation;
            -moz-animation-duration: .5s;
            -moz-animation-iteration-count: 1;
            -moz-animation-timing-function: ease;
            -moz-animation-fill-mode: forwards;
        }
        @keyframes slidenavAnimation {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        @-webkit-keyframes slidenavAnimation {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        .tr-empf {
            position: absolute;
            top: -45px;
            right: -15px;
            width: 90px;
        }
    }
    
    @media (min-width: 992px) {
        .navbar-light .navbar-nav .nav-link {
            padding: 15px 20px;
        }
        .navbar .mega-dropdown .dropdown-menu.mega-menu {
            max-width: 900px;
        }
        .navbar-light .navbar-nav .nav-link {
            color: #00519d;
            font-size: 1.125rem;
            line-height: 1.5rem;
            padding: 10px 12px;
            font-weight: 500;
        }
        p.menuhead {
            letter-spacing: 0.2em;
            font-size: 1.25rem;
        }
        .showcase-text {
            text-align: center;
            font-size: 1.5rem;
        }
        .lw {
            letter-spacing: 0.2em;
            font-weight: 500;
            text-transform: uppercase;
        }
        .puzzletext {
            font-size: 1.5rem;
            line-height: 2rem;
        }
        .puzzlebox {
            padding: 20px 40px;
            border: 3px solid #fff;
            font-size: 1rem;
            letter-spacing: 0.18em;
        }
        .pt35 {
            top: 40%;
        }
        .warrow {
            width: 30px;
        }
        .mwstbutton {
            width: 125px;
            position: absolute;
            right: 60px;
            top: -20px;
            z-index: 10;
        }
        .mwstspacer {
            padding-right: 180px;
            position: relative;
        }
    }
    
    @media (min-width: 1200px) {
        .navbar-light .navbar-nav .nav-link {
            padding: 10px 15px;
        }

        .showcase-text {
            text-align: center;
            font-size: 1.5rem;
        }
        .lw {
            letter-spacing: 0.2em;
            font-weight: 700;
            text-transform: uppercase;
        }
        .puzzletext {
            font-size: 1.75rem;
            line-height: 2.25rem;
        }
        .pt35 {
            top: 40%;
        }
        .warrow {
            width: 40px;
        }
    }
    
    @media (min-width: 1400px) {
        .container {
            //max-width: 1200px;
        }
        .navbar .mega-dropdown .dropdown-menu.mega-menu {
            max-width: 900px;
            left: auto;
            right: auto;
        }
    }