/*Theme: Arkeo Theme ver. 5.0
Description: Stylesheet for Stadtwerke Vilsbiburg Website.
Author: Dipl.-Ing. Dimitri Papadopoulos
Author URI: http://www.die-digitalexperten.de/  
*/
/*html * {
    background: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 1px red;
}
body, form, .aspNetHidden {
    background: transparent;
    box-shadow: none;
}*/
@font-face {
  font-family: 'Phoenica';
  src: url('fonts/phoenica-webfont.woff2') format('woff2'), url('fonts/phoenica-webfont.woff') format('woff');
  /*src: url('fonts/PhoenicaSTD/font.woff2') format('woff2'), url('fonts/PhoenicaSTD/font.woff') format('woff');*/
  font-display: swap;
}
@font-face {
  font-family: 'PhoenicaBold';
  src: url('fonts/phoenica_1-webfont.woff2') format('woff2'), url('fonts/phoenica_1-webfont.woff') format('woff');
  /*src: url('fonts/PhoenicaSTDBd/font.woff2') format('woff2'), url('fonts/PhoenicaSTDBd/font.woff') format('woff');*/
  font-display: swap;
}
@font-face {
    font-family: 'robotobold';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'robotocondbold';
    src: url('fonts/RobotoCondensed-Bold-webfont.eot');
    src: url('fonts/RobotoCondensed-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/RobotoCondensed-Bold-webfont.woff') format('woff'),
         url('fonts/RobotoCondensed-Bold-webfont.ttf') format('truetype'),
         url('fonts/RobotoCondensed-Bold-webfont.svg#robotocondbold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'robotomedium';
    src: url('fonts/Roboto-Medium-webfont.eot');
    src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'robotoregular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'opensansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#opensansregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'opensanssemibold';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#opensanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'opensanscondbold';
    src: url('fonts/OpenSans-CondBold-webfont.eot');
    src: url('fonts/OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-CondBold-webfont.woff') format('woff'),
         url('fonts/OpenSans-CondBold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-CondBold-webfont.svg#opensanscondbold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'opensanscondlightitalic';
    src: url('fonts/OpenSans-CondLightItalic-webfont.eot');
    src: url('fonts/OpenSans-CondLightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-CondLightItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-CondLightItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-CondLightItalic-webfont.svg#opensanscondlightitalic') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'opensanscondlight';
    src: url('fonts/OpenSans-CondLight-webfont.eot');
    src: url('fonts/OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-CondLight-webfont.woff') format('woff'),
         url('fonts/OpenSans-CondLight-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-CondLight-webfont.svg#opensanscondlight') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'raleway-extralight';
    src: url('fonts/raleway-extralight-webfont.eot');
    src: url('fonts/raleway-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-extralight-webfont.woff') format('woff'),
         url('fonts/raleway-extralight-webfont.ttf') format('truetype'),
         url('fonts/raleway-extralight-webfont.svg#raleway-extralight') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter/web/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter/web/InterVariable-Italic.woff2") format("woff2");
}

/* static fonts */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/Inter/web/Inter-Thin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/Inter/web/Inter-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Inter/web/Inter-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/Inter/web/Inter-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Inter/web/Inter-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Inter/web/Inter-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter/web/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Inter/web/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter/web/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Inter/web/Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter/web/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Inter/web/Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter/web/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Inter/web/Inter-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Inter/web/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/Inter/web/Inter-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Inter/web/Inter-Black.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/Inter/web/Inter-BlackItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/Inter/web/InterDisplay-Thin.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/Inter/web/InterDisplay-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Inter/web/InterDisplay-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/Inter/web/InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Inter/web/InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Inter/web/InterDisplay-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter/web/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Inter/web/InterDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter/web/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Inter/web/InterDisplay-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter/web/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Inter/web/InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter/web/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Inter/web/InterDisplay-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Inter/web/InterDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/Inter/web/InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Inter/web/InterDisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/Inter/web/InterDisplay-BlackItalic.woff2") format("woff2"); }

@font-feature-values InterVariable {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}
@font-feature-values Inter {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}
@font-feature-values InterDisplay {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}


html {
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
}
:root {
    --color-white: #fff;
    --color-grey-100: #fafafa;
    --color-grey-150: #fdfdfd;
    --color-grey-200: #f4f4f4;
    --color-grey-250: #efeff4;
    --color-grey-300: #dcdcdc;
    --color-grey-400: #949494;
    --color-grey-500: #666;
    --color-grey-550: #333;
    --color-grey-600: #181818;
    --color-black: #000;
    --main-text-color: hsl(0, 0%, 15%);
    --vib-red: hsl(358, 79%, 47%);
    --vib-red-active: hsl(358, 79%, 57%);
    --form-grey-txt: hsla(216, 33%, 50%, 20%);
    --form-grey-txt-d: hsl(224, 11%, 53%);
    --form-grey-bg: hsl(216, 33%, 97%);
    --form-grey-border-20: hsla(222, 21%, 10%, 20%);
    --form-grey-border: hsla(222, 100%, 10%, 10%);
    --form-blue-link: hsl(233, 100%, 9%);
    --footer-link: hsla(0, 0%, 7%, 60%);
    --banderole-bg-grey: hsl(0, 0%, 97%);

    --overlap: 180px;
}
body {
    padding: 0; /*remove padding */
    margin: 0; /* remove margins */
    border: 0; /* remove borders */
    color: var(--main-text-color);
    font: 125%/1.5 "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
*, :after, :before {
    box-sizing: border-box;
}
#header {
    min-height: 100px;
    padding-top: 0.1em;
    margin: 0 auto;
    width: 80%;
}
#header:after, #header:before {
        content: " ";
        display: table;
}
.headerimg {
    max-width: 100%; 
    height: auto;
}
.poslogo {
    position: absolute; 
    top: 20px; 
    left: 60px;
    z-index: 1000;
}
#pagecontent, #frontcontent {
    margin: 0 auto; 
    padding: 0; 
    /*max-width: 1600px;*/ 
    text-align: left;
    clear: both;
    /*font-size: 1.05rem;*/
}
.clear {
    clear: both;
}
.servertag {
    background-color: #ccc;
    border: 3px dotted #94BFE5;
    width: 340px;
    height: 160px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
/** Arkeo Content Start **/
h1, h2, h3, h4, h5, h6 {font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; color: var(--main-text-color); }
h1 { font-size: 2.3em; margin: 0.6em 0 0.3em; }
h2 { font-size: 2em; margin: 0.6em 0 0.1em; }
h3 { font-size: 1.5em; margin: 0.6em 0 0.1em; }
h4 { font-size: 1.17em; margin: 0.6em 0 0.1em; }
h5 { font-size: 1.12em; margin: 0.6em 0 0.1em; }
h6 { font-size: .83em; margin: 0.6em 0 0.1em; }
a { overflow: hidden; }
a:link, a:visited {
    color: #b12e30;
    text-decoration: none;
}
a:hover,a {
    color:#d7373a;
    text-decoration: underline;
}
.red { color: var(--vib-red) };
.white { color: var(--color-white)};
#pagecontent ul {
    margin: 1.5em 0 1.5em 0;
}
#pagecontent li {
    margin: 0.5em 0 0.5em 0;
    list-style: none;
    padding:0 0 0 24px;
    background: transparent url("images/elements.svg") top left no-repeat;
    background-size: 30px 22px;
}
#pagecontent ul.teaser-list {
    margin: 1.5em 0 1.5em 0;
}
#pagecontent ul.teaser-list li {
    margin: 1em 0 1em 0;
    list-style: none;
    padding:0 0 0 46px;
    background: transparent url("images/list-tick-rw.svg") 1px 3px no-repeat;
    background-size: 30px 30px;
}
strong, b {
    font-weight: 700;
}
.emobilityfront-container {
    margin-top: var(--overlap);
    padding: 0px;
    width: 100%;
    min-height: 230px;
    border-radius: 35px 35px 35px 35px;
    border: 1px solid hsla(222, 100%, 10%, 0.1);
    background: linear-gradient(0deg, hsla(358, 79%, 47%, 0.05), hsla(358, 100%, 31%, 0.1));
}
.emobilityfront {
    position: relative;
    padding: 40px 40px 40px 40px;
}
.pop-in01 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40vw;
    height: auto;
}
#subinfobanner-container {
    clear: both;
    margin: 0em;
    padding-top: 40px;
    width: 100%;
    color: #212121;
    text-align: left;
    font-size: 0.9rem;
}
.subinfobanner {
    clear: both;
    margin: 0 auto;
    padding: 40px 20px 40px 20px;
    /*width: 80%;*/
    min-height: 230px;
    color: #212121;
    /*background-color: rgba(0, 0, 0, 0.05);*/
    text-align: left;
    border-radius: 35px 35px 0px 0px;
    background: linear-gradient(hsl(222, 100%, 10%, 0.05), hsl(222, 100%, 10%, 0));
    border: 1px solid hsla(222, 100%, 10%, 0.1);
}
.subinfobanner-red-container {
    margin: 0em;
    padding: 20px 20px 40px 20px;
    width: 100%;
    min-height: 230px;
    border-radius: 35px 35px 35px 35px;
    border: 1px solid hsla(222, 100%, 10%, 0.1);
    background: linear-gradient(0deg, hsla(358, 79%, 47%, 0.05), hsla(358, 100%, 31%, 0.1));
}
.subinfobanner-redf-container {
    clear: both;
    margin: 0 auto;
    padding: 40px 20px 40px 20px;
    /* width: 80%; */
    min-height: 230px;
    color: #212121;
    /* background-color: rgba(0, 0, 0, 0.05); */
    text-align: left;
    border-radius: 35px 35px 0px 0px;
    background: linear-gradient(0deg, hsla(358, 100%, 100%, 0.05), hsla(358, 100%, 31%, 0.1));
    border: 1px solid hsla(222, 100%, 10%, 0.1);
    border-bottom: none;
}
.subinfobanner-w-container {
    display: block;
    margin: 10px;
    padding: 20px;
    /*width: 100%;*/
    border-radius: 24px;
    border: 1px solid hsla(222, 100%, 10%, 0.1);
    background-color:  hsla(0, 100%, 100%, 1);
}
.subinfocommon-container {
    margin: 2.6rem 0rem 3rem 0rem;
    padding: 10px 10px 20px 10px;
    width: 100%;
    min-height: 230px;
    border-radius: 35px 35px 35px 35px;
    border-top: 2px solid var(--vib-red);
    border-right: 2px solid var(--vib-red);
    border-bottom: 2px solid var(--vib-red);
    border-left: 4px solid var(--vib-red);
}
.subinfocommon-o-container {
    margin: 2.6rem 0rem 3rem 0rem;
    padding: 10px 10px 20px 10px;
    width: 100%;
    min-height: 230px;
    border-radius: 35px 35px 35px 35px;
    border-top: 2px solid hsl(36, 100%, 50%);
    border-right: 2px solid hsl(36, 100%, 50%);
    border-bottom: 2px solid hsl(36, 100%, 50%);
    border-left: 4px solid hsl(36, 100%, 50%);
}

#footerbanner-container {
    clear: both;
    margin: 0em;
    padding: 20px 20px 40px 20px;
    width: 100%;
    color: var(--color-white);
    text-align: left;
    min-height: 230px;
    background: var(--vib-red) url('images/emblem_vib.svg') no-repeat center right;
    background-size: 350px 314px;
}
#footerbanner-container h3 { color: var(--color-white); }
.footerbanner {
    margin: 0 auto;
    width: 80%;
    min-height: 340px;
    align-content: center;
}
.icongrid-30a, .icongrid-30 {
    margin: 0.6em 0em;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 1rem;
}
.icongrid-30 {
    color: var(--main-text-color);
}
.icongrid-30a {
    color: var(--color-white);
}
.icongrid-60a {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 1rem;
    color: var(--vib-red);
    margin: 24px 12px 12px 12px;
}
.icongrid-60 {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 1rem;
    margin: 24px 12px 12px 12px;
}
.icongrid-center4 {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    align-items: center;
    justify-items: start;
    gap: 1rem;
    color: var(--vib-red);
    margin: 24px 12px 12px 12px;
}
.tickicon {
    width: 24px;
    height: auto;
}
#footer-container {
    clear: both;
    margin: 0em;
    padding: 40px 20px 40px 20px;
    width: 100%;
    color: #212121;
    text-align: left;
    font-size: 0.9rem;
}
.footerhl {
     font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
     font-weight: 700;
     font-size: 1.5em; margin: 0.6em 0em 0.3em 0em; 
     text-align: left;
     color: #212121;
 }
 #footer-container a, #footer a:link, #footer a:link, #footer a:active {
    text-decoration: none;
    color: var(--footer-link);
}
#footer-container a:hover, #footerfront a:hover {
    text-decoration: none;
    color: var(--footer-link);
}
#footer-container ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#footer-container ul {*display:inline;}
#footer-container li {
    margin: 12px 0px;
    list-style: none;
    padding: 0px;
    background: none;
}
.dlogo { display:block; }
.mlogo { display: none; }
.slidermsg-container {
    position: relative;
    min-height: 750px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient( to bottom, transparent, hsla(202, 93%, 22%, 0.40) 160% ), url('images/header/Windrad_Luftaufnahme.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.slidermsg-container2 {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.2), hsla(222, 100%, 10%, 0.4) 50%), url('images/header/header_stromkennzeichnung.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.sliderstrominfo-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient( 205deg, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.4) 80% ), url('images/header/header_strominfo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 5% 85%;
}
.slidercompany-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.6), hsla(222, 100%, 10%, 0.2) 40% ), url('images/header/header_waermenetz.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.sliderwater-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.6), hsla(222, 100%, 10%, 0.2) 40% ), url('images/header/header_waermenetz.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.slidernahwaerme-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.6), hsla(222, 100%, 10%, 0.2) 40% ), url('images/header/header_waermenetz.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.sliderwaermenetz-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.6), hsla(222, 100%, 10%, 0.2) 70% ), url('images/header/header_nahwaermenetz.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.slidermessstellen-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.6), hsla(222, 100%, 10%, 0.2) 40% ), url('images/header/header_messstellenbetrieb.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.sliderfiber-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.6), hsla(222, 100%, 10%, 0.2) 70% ), url('images/header/header_glasfaser.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.sliderbauherren-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.6), hsla(222, 100%, 10%, 0.2) 40% ), url('images/header/header_bauherren.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
 }
.slidermobility-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.3), hsla(222, 100%, 10%, 0.2) 40% ), url('images/header/header_ladestation.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.slidermobility2-container {
    position: relative;
    min-height: 500px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.6), hsla(222, 100%, 10%, 0.2) 40% ), url('images/header/header_emobilitaet.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.sliderstromkenn-container {
    position: relative;
    min-height: 750px;
    display: block;
    border-radius: 35px 35px 35px 35px;
    background-image: linear-gradient(to bottom, hsla(0 , 0%, 0%, 0.2), hsla(222, 100%, 10%, 0.4) 50%), url('images/header/header_stromkennzeichnung.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.cline {position: absolute; top: 16.5rem; left: 8rem; color: var(--color-white);
        display: grid;
        grid-template-rows: 32px auto 30px;
        gap: 1.2rem;
}
.clinetxt {
    font-size: 3rem;
    font-family: 'opensansregular';
    font-weight: 500;
    line-height: 1.35;
    padding: 0;
}
.clinec {position: absolute; top: 7rem; left: 5rem; color: var(--color-white);
        display: grid;
        grid-template-rows: 32px auto 30px;
        gap: 1.2rem;
}
.clinectxt {
    font-size: 2.7rem;
    font-family: 'opensansregular';
    font-weight: 500;
    line-height: 1.2;
    padding: 0;
}
.clineu {position: absolute; bottom: 2rem; left: 5rem; color: var(--color-white);
        display: grid;
        grid-template-rows: 32px auto 30px;
        gap: 1.2rem;
}
.clineutxt {
    font-size: 2.7rem;
    font-family: 'opensansregular';
    font-weight: 500;
    line-height: 1.2;
    padding: 0;
}
.actionbanner-container {
    clear: both;
    margin: 2em 0em;
    padding: 20px;
    width: 100%;
    color: #212121;
    text-align: left;
    font-size: 1.2rem;
    border-radius: 35px 35px 35px 35px;
    background-color: var(--form-grey-bg);
    border: 1px solid hsla(222, 100%, 10%, 0.1)
}
.actionbanner { padding: 20px; }
.roundedImg { 
    border-radius: 24px;
    height: auto;
    width: 100%;
    max-width: 100%;
}
.flip-x {
  transform: scaleX(-1);
}
.stoerer {
    position: relative;
    width: min(100%, 1920px);
    aspect-ratio: 16 / 5;
    background: url('images/fotos/Stromtarif_VIB_Regio.jpg') center / cover no-repeat;
    border-radius: 24px;
    /*overflow: hidden;*/
}
/* Fallback für sehr alte Browser ohne aspect-ratio */
@supports not (aspect-ratio: 1) {
  .stoerer::before {
    content: "";
    display: block;
    padding-top: 25%;               /* 16:4 */
  }
}
/*.stoerertxt {
    position: absolute;
    top: 3.5rem;
    left: 18rem;
    color: var(--color-white);
    font-size: 3.5rem;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    line-height: 1.35;
    padding: 24px 72px 16px 24px;
}*/
.stoererimg {
    /*position: absolute;
    top: 0rem;
    right: 12rem;
    color: var(--color-white);
    font-size: 3.5rem;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    line-height: 1.35;
    padding: 24px 72px 16px 24px;*/
}
a.btnStylelnk:link, a.btnStylelnk:visited, a.btnStyle:link, a.btnStyle:visited {
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
}
a.btnStylelnk:hover, a.btnStyle:hover {
    color:var(--color-white);
    font-weight: 600;
    text-decoration: none;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btnStyle {
    width: fit-content;
    background-color: var(--vib-red); /*#D71920*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: var(--color-white);
    font-size: clamp(0.7rem, 1vw + 0.2rem, 1.2rem);
    padding: clamp(6px, 0.7vw, 12px) clamp(16px, 1.6vw, 26px);
    /*padding: 12px 25px 12px 25px;*/
    text-decoration: none;
    border-color: #7B9CBD;
}
.btnStylesml {
    width: fit-content;
    background-color: var(--vib-red);
    background-image: url('images/pfeilsmlw.svg');
    background-size: 20px 20px;
    background-position: right 18px center;
    background-repeat: no-repeat;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    color: var(--vib-red);
    padding: 8px 41px 8px 21px;
    text-decoration: none;
    border-color: none;
    font-size: 1.1rem;
}
a.btnStyleInvlnk:link, a.btnStyleInvlnk:visited, a.btnStyleInvlnk:link, a.btnStyleInvlnk:visited {
    color: var(--vib-red);
    font-weight: 600;
    text-decoration: none;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
a.btnStyleInvlnk:hover, a.btnStyleInvlnk:hover {
    color:var(--vib-red);
    font-weight: 600;
    text-decoration: none;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btnStyleInv {
    width: fit-content;
    background-color: var(--color-white);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: var(--vib-red);
    font-size: clamp(0.7rem, 1vw + 0.2rem, 1.2rem);
    padding: clamp(6px, 0.7vw, 12px) clamp(16px, 1.6vw, 26px);
    /*padding: 12px 25px 12px 25px;*/
    text-decoration: none;
}
.btnStyleInvsml, .btnStyledlInvsml {
    width: fit-content;
    background-color: var(--color-white);
    background-size: 20px 20px;
    background-position: left 18px center;
    background-repeat: no-repeat;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    color: var(--vib-red);
    padding: 8px 21px 8px 51px;
    text-decoration: none;
    border-color: none;
    font-size: 1.1rem;
}
.btnStyleInvsml {
    background-image: url('images/pfeilsmlr.svg');
}
.btnStyledlInvsml {
    background-image: url('images/dl-icon.svg');
}
a.btnStyleGrylnk:link, a.btnStyleGrylnk:visited, a.btnStyleGrylnk:link, a.btnStyleGrylnk:visited {
    color: var(--main-text-color);
    font-weight: 600;
    text-decoration: none;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
a.btnStyleGrylnk:hover, a.btnStyleGrylnk:hover {
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btnStylGryesml, .btnStylGrybsml {
    width: fit-content;
    background-color: var(--form-grey-bg);
    background-image: url('images/pfeilsmlg.svg');
    background-size: 20px 20px;
    background-position: right 18px center;
    background-repeat: no-repeat;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    color: var(--main-text-color);
    padding: 8px 41px 8px 21px;
    text-decoration: none;
    border-color: none;
    font-size: 1.1rem;
}
.btnStylGryesml:hover {
    color: var(--color-white);
    background-color:  var(--vib-red);
    background-image: url('images/pfeilsmlw.svg');
    background-size: 20px 20px;
    background-position: right 18px center;
    background-repeat: no-repeat;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btnStylGrybsml:hover {
    color: var(--color-white);
    background-color:  var(--form-blue-link);
    background-image: url('images/pfeilsmlw.svg');
    background-size: 20px 20px;
    background-position: right 18px center;
    background-repeat: no-repeat;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btnStylGryesml a, .btnStylGrybsml a {
    color: var(--form-blue-link);
}
.btnStylGryesml:hover a, .btnStylGrybsml:hover a {
    color: var(--color-white);
    /*background-color: var(--vib-red);*/
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    text-decoration: none;
}
.btnStylWhtsml {
    width: fit-content;
    margin: 8px 0px;
    background-color: var(--color-white);
    background-image: url('images/pfeilsmlg.svg');
    background-size: 20px 20px;
    background-position: right 18px center;
    background-repeat: no-repeat;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    color: var(--main-text-color);
    padding: 8px 41px 8px 21px;
    text-decoration: none;
    border-color: none;
    font-size: 1.1rem;
}
.btnStylWhtsml:hover {
    color: var(--color-white);
    background-color:  var(--vib-red);
    background-image: url('images/pfeilsmlw.svg');
    background-size: 20px 20px;
    background-position: right 18px center;
    background-repeat: no-repeat;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
btnStylWhtsml a {
    color: var(--form-blue-link);
}
btnStylWhtsml:hover a {
    color: var(--color-white);
    /*background-color: var(--vib-red);*/
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    text-decoration: none;
}
/* --------- Text-Badge ---------- */
.stoerertxt {
  position: absolute;
  /* prozentuale Positionen skalieren mit */
  bottom: 12%;
  left: 6%;
  /* Typo & Padding responsiv mit clamp */
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.35;
  font-size: clamp(1.1rem, 1.1vw + 0.2rem, 1.6rem);
  color: var(--color-white);
  padding: clamp(12px, 1.5vw, 24px) clamp(16px, 2.4vw, 36px);
  max-width: min(70ch, 65%);
  backdrop-filter: blur(2px) saturate(90%);
  box-shadow: 0px 20px 20px 0px hsla(0, 0%, 100%, 0.2);
  border-radius: 10px;
  border: 1px solid var(--color-white);
}
.stoererhl {
    color: var(--vib-red);
    font-weight: 700;
    font-size: clamp(1.5rem, 2vw + 0.15rem, 4rem);
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.stoererinner { padding: clamp(16px, 1.6vw, 26px) 0; }
/* --------- Logo/Badge rechts ---------- */
.stoererimg {
  position: absolute;
  top: 40%;
  right: 6%;
}

.stoererimg img {
  display: block;
  /*width: clamp(56px, 23vw, 560px);*/
  width: clamp(120px, 43vw, 460px);
  height: auto;
}

/* --------- Breakpoints ---------- */
/* Tablet: etwas kompakter */
@media (max-width: 900px) {
  .stoerertxt {
    max-width: 75%;
  }
}

/* Mobile: höheres Seitenverhältnis, Elemente weiter nach innen */
@media (max-width: 640px) {
  .stoerer {
    aspect-ratio: 5 / 6;
    /*border-radius: 10px;*/
  }
  .stoerertxt {
    left: 3%;
    right: 3%;
    bottom: 18%;
    max-width: 100%;
    text-wrap: balance;
  }
  .stoererimg {
    top: 60%;
    right: 2%;
  }
}

/* Sehr kleine Geräte: Schrift & Abstände minimieren */
@media (max-width: 380px) {
  .stoerertxt {
    padding: 10px 14px;
  }
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}
.responsive {
    height: auto;
    width: 100%;
}
.responsive-video {
    max-width: 100%; 
    height: auto;
    position: relative;
}
.responsive-video video {
    width: 100%;
	height: 100%;
}
/*.responsive-video::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 98%;
    width: 100%;
    background-image: url(images/videos/grey-dots.png);
}*/

.hint {
    font-size: 0.8em;
}
dt {
    float: left;
    clear: left;
    width: 108px;        
    padding: 5px 0;
    margin:0;
    font-weight: bold;
    display:table;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
    text-align: right;
}
.table-display dt {
    float: left;
    clear: left;
    width: 164px;        
    padding: 5px 0;
    margin:0;
    font-weight: bold;
    display:table;
}
.table-display dd {
    float: left;
    width: 180px;
    padding: 5px 0;
    margin: 0;
}
.dl-table:after {
    /*content:'';
    display:table;
    clear:both;*/
}
.dblue {
    font-size: 1.4em;
    color: var(--color-white);
    background-color: #3a4660;
    padding: 8px;
}
.arkeofilegrid {
    padding: 0px;
    width: 100%;
    min-height: 230px;
    /*border-radius: 35px 35px 35px 35px;*/
    border-radius: 35px 35px 35px 35px;
    border: 1px solid hsla(222, 100%, 10%, 0.1);
    background: hsl(0, 0%, 100%);
    overflow: hidden;
}
.ltlHeader {
    padding: 20px;
    font-weight: 700;
    border-radius: 35px 35px 0px 0px;
    border-top: 0px solid hsla(222, 100%, 10%, 0);
    border-left: 0px solid hsla(222, 100%, 10%, 0);
    border-right: 0px solid hsla(222, 100%, 10%, 0);
    background: linear-gradient(0deg, hsla(358, 79%, 47%, 0.05), hsla(358, 100%, 31%, 0.1));
}
.colbgalt { background: hsl(220, 33%, 98%); }
.arkeofilegrid .row + .row {
    border-top: solid 1px var(--form-grey-border-20);
}
.legend {
    display: grid;
    gap: 12px;
}

.legend-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 20px;
    align-items: center;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
}
/** News Modul Start**/
.eventbox {
    max-width: 1270px;
}
.eventbox .column {
    padding: 6px;
}
article {
    margin: 0px 8px 16px 8px;
}
article a {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--color-white);
    border: 1px solid #f2f2f2;
    border-radius: 9px 11px 9px 9px;
    /*box-shadow: 4px 4px 10px 0 #cccccc;*/
    transition: box-shadow 0.2s ease;
}
a {
    cursor: pointer;
    text-decoration: none;
    color: #003C51;
    -webkit-transition: color 0.1s ease-in-out;
    transition: color 0.1s ease-in-out;
    -webkit-backface-visibility: hidden;
}
article a:hover {
    border: 1px solid #aaa;
}
.teaserimg {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0;
    width: 100%;
    height: 225px;
    border: none;
}
.teaserimg-inner {
    background-color: var(--color-white);
    background-position: center center;
    background-size: cover;
}
.teaserimg .teaserimg-inner {
    display: block;
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 100%;
    background-image: url('images/001.svg');
    background-size: cover;
    background-position-y: top;
}
.teasercontent {
    display: block;
    float: left;
    height: 300px;
    padding: 1.5em 1.5em 1.5em 1.5em;
    position: relative;
}
.sortierdatum {
    font-weight: 500;
    font-size: 0.83em;
    color: var(--main-text-color);
}
.teaserhl {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500; 
    color: var(--main-text-color); 
    hyphens: auto; 
    word-wrap: break-word;
    font-size: 1.3em;
    margin: 0.3em 0em 0.3em 0em;
}
.teasertext {
    display: block;
    color: #212121;
    font-size: 15px;
    font-weight: 400;
    margin: 13px 0 0 0;
    width: 100%;
    overflow: hidden;
    text-align: left;
    line-height: 1.6;
    position: relative;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
.alllnk {
    float: right;
    margin: 12px 24px 0px 0px;
}
/** News Modul End**/
/* News Ticker Start*/
@-webkit-keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.ticker-tick {
    position: fixed;
    bottom: 50px;
    right: 30px;
    cursor:pointer;
    height: 38px;
    width: 38px;
    background-color: rgba(245, 247, 250, 0.7);
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}
.cross {
    margin: -5px 0px 0px 0px;
    padding: 0;
    font-size: 30px;
    font-weight: 700;
    transform: rotate(315deg);
}
.ticker-wrap {
    position: fixed;
    bottom: 0px;
    width: 100%;
    overflow: hidden;
    height: 4rem;
    background-color: rgba(245, 247, 250, 0.9);
    padding-left: 100%;
    box-sizing: content-box;
    border-top: 1px solid #e83b41;
    border-bottom: 1px solid #e83b41;
}
.ticker-wrap .ticker {
    display: inline-block;
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    /*-webkit-animation-duration: 50s;
    animation-duration: 50s;*/
}
.ticker-wrap .ticker__item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 2rem;
    color: #5A5757;
}
.ticker-wrap .ticker:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}
/* News Ticker End*/

/** Arkeo Forms Start **/
#valSummary {
    padding: 4px;
    border: 2px solid #ff0000;
    width: 100%;
    margin: 10px;
    background-color: #ffcccc;
}
#valSummary li {
    margin: 0.5em 0 0.5em 0;
    list-style: none;
    padding:0 0 0 12px;
    color: #ff0000;
    background: transparent url("images/elements.png") no-repeat 0px -696px;
}
.req {
    display: none;
}
.rela {
    position: relative;
}
.rstar {
    color: #ff0000;
    /*vertical-align: super;*/
    font-size: 0.75em;
    padding: 0px 1px 0px 2px;
    position: relative;
    top: -2px;
}
.frmspacer {padding: 6px 0px;}
input.error, textarea.error, select.error {
    border: 2px solid red;
    background-color: #ffcccc;
}
label.error {
    color: #ff0000;
    font-weight: bold;
}
.error label {
    background-color: #ffcccc;
}

input, select {
    border: 1px solid #888888; /*A9A9A9*/
}
div.colinput, div.acc-content div.colinput {
    padding: 2px;
    clear: both;
}
div.colinput label, div.acc-content div.colinput label {
    display: block;
    width: 175px;
    float: left;
    padding: 0px 0px 0px 16px;
}
div.acc-content div.colinput label {
    position: initial;
    display: initial;
    padding: 0em;
    font-weight: normal;
    line-height: 1.8;
    cursor: default;
    color: var(--main-text-color);
}
div.acc-content input {
    position: initial;
    opacity: 1;
    z-index: inherit;
}
div.inputlist label, div.acc-content div.inputlist label {
    display: block;
    width: 185px;
    float: left;
    padding-left: 16px;
    padding-top: 5px;
    padding-bottom: 185px;
}
#fileSelector1 {
    height: 42px;
    font-size: 1.2em;
    border: none;
}
.applyAddress {
    display: block;
    cursor: pointer;
    color: #00729D;
}
.applyAddress:hover {
    color:#099cd5;
}
#OKButton, #btnSubmit {
    background: #d71920;
    background-image:  linear-gradient(hsl(358, 79%, 47%), hsl(358, 79%, 40%));
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: var(--color-white);
    font-size: 16px;
    letter-spacing: 2px;
    padding: 8px 25px 8px 25px;
    text-decoration: none;
    border-color: #d71920;
    margin: 1em;
}
#btnDispatch {
    background: #d71920;
    background-image:  linear-gradient(hsl(358, 79%, 47%), hsl(358, 79%, 40%));
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: var(--color-white);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 8px 25px 8px 25px;
    text-decoration: none;
    border-color: #d71920;
    margin: 0.2em 0.5em 0.2em 0.5em;
}
#btnDispatch2 {
    background: #d71920;
    background-image:  linear-gradient(hsl(358, 79%, 47%), hsl(358, 79%, 40%));
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: var(--color-white);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 8px 12px 8px 12px;
    text-decoration: none;
    border-color: #d71920;
    margin-left: 0.5em;
}
#OKButton:hover, #btnSubmit:hover, #btnDispatch:hover, #btnDispatch2:hover {
    background: hsl(358, 79%, 57%);
    color: var(--color-white);
}
.btnDelRowSmll, .btnUpdateRowSmll, .btnCancelRowSmll, .btnEditRowSmll, .btnAddRowSmll,
.btnUpRowSmll, .btnDownRowSmll {
  background: var(--color-white);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  color: #3d3d36;
  border: 1px solid #ccc;
  margin: 8px 0px 0px 2px;
  text-decoration: none;
  font-size: 16px;
  width: 30px;
  height: 30px;
}
.btnDelRowSmll {
  background: url('images/btnDelete.svg') no-repeat 0px 0px, linear-gradient(hsl(360, 73%, 63%), hsl(360, 57%, 57%));
}
.btnDelRowSmll:hover {
  background: url('images/btnDelete.svg') no-repeat 0px 0px, linear-gradient(hsl(0, 74%, 93%), hsl(360, 73%, 63%));
  cursor: pointer;
}
.btnUpdateRowSmll {
  background: url('images/btnIo2.svg') no-repeat 0px 0px, linear-gradient(hsl(84, 67%, 45%), hsl(85, 67%, 40%));
}
.btnUpdateRowSmll:hover {
  background: url('images/btnIo2.svg') no-repeat 0px 0px, linear-gradient(hsl(84, 54%, 89%), hsl(84, 67%, 45%));
  cursor: pointer;
}
.btnCancelRowSmll {
  background: url('images/btnCancel2.svg') no-repeat 0px 0px, linear-gradient(hsl(24, 100%, 62%), hsl(24, 100%, 51%));
}
.btnCancelRowSmll:hover {
  background: url('images/btnCancel2.svg') no-repeat 0px 0px, linear-gradient(hsl(24, 98%, 80%), hsl(24, 100%, 62%));
  cursor: pointer;
}
.btnEditRowSmll {
  background: url('images/btnEdit.svg') no-repeat 0px 0px, linear-gradient(hsl(84, 67%, 45%), hsl(85, 67%, 40%));
}
.btnEditRowSmll:hover {
  background: url('images/btnEdit.svg') no-repeat 0px 0px, linear-gradient(hsl(84, 54%, 89%), hsl(84, 67%, 45%));
  cursor: pointer;
}
.btnAddRowSmll {
  background: url('images/btnAdd.svg') no-repeat 0px 0px, linear-gradient(hsl(84, 67%, 45%), hsl(85, 67%, 40%));
}
.btnAddRowSmll:hover {
  background: url('images/btnAdd.svg') no-repeat 0px 0px, linear-gradient(hsl(84, 54%, 89%), hsl(84, 67%, 45%));
  cursor: pointer;
}
.btnUpRowSmll {
  background: url('images/btnUp.svg') no-repeat 0px 0px, linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
}
.btnUpRowSmll:hover {
  background: url('images/btnUp.svg') no-repeat 0px 0px, linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 67%));
  cursor: pointer;
}
.btnDownRowSmll {
  background: url('images/btnDown.svg') no-repeat 0px 0px, linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
}
.btnDownRowSmll:hover {
  background: url('images/btnDown.svg') no-repeat 0px 0px, linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 67%));
  cursor: pointer;
}
input[type="text"], input[type="number"], input[type="time"], input[type="date"], input[type="email"], input[type="password"], textarea {
    font: 15px/24px "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--main-text-color);
    width: 100%;
    letter-spacing: 1px;
    padding: 2px 4px 2px 4px;
}
select {
    font: 16px/24px "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--main-text-color);
    padding: 4px;
}
#txtNamekt, #txtEmailkt, #txtCommentkt {
    border: 0;
    padding: 4px 0;
    border-bottom: 1px solid #ccc;
    background-color: transparent;
    min-width: 200px;
    max-width: 400px;
}
#txtNamekt ~ label, #txtEmailkt ~ label, #txtCommentkt ~ label {
    position: absolute;
    left: 0;
    width: 100%;
    top: 1px;
    color: #aaa;
    transition: 0.3s;
    z-index: -1;
    letter-spacing: 0.5px;
}
#txtNamekt ~ .focus-border, #txtEmailkt ~ .focus-border, #txtCommentkt ~ .focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #009DDA;
    transition: 0.4s;
}
#txtNamekt:focus ~ .focus-border, .has-content#txtNamekt ~ .focus-border,
#txtEmailkt:focus ~ .focus-border, .has-content#txtEmailkt ~ .focus-border,
#txtCommentkt:focus ~ .focus-border, .has-content#txtCommentkt ~ .focus-border {
    width: 100%;
    transition: 0.4s;
}
#txtNamekt ~ .focus-border, #txtEmailkt ~ .focus-border, #txtCommentkt ~ .focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #009DDA;
    transition: 0.4s;
    
}
input:focus {
    outline: 0;
}
#txtNamekt:focus ~ label, .has-content#txtNamekt ~ label,
#txtEmailkt:focus ~ label, .has-content#txtEmailkt ~ label,
#txtCommentkt:focus ~ label, .has-content#txtCommentkt ~ label {
    top: -16px;
    font-size: 12px;
    font-weight: 700;
    color: #009DDA;
    transition: 0.4s;
}
.hascontent {
    top: -16px;
    font-size: 12px;
    font-weight: 700;
    color: #009DDA;
    transition: 0.4s;
}
.defaultchk {font-size: 0.8em;}
/* Arkeo Acordion Start*/
.tabfaq {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}
.tabfaq input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tabfaq label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  font-weight: bold;
  line-height: 2.6;
  cursor: pointer;
  /*border: 1px solid #eaeaea;*/
}
.tabfaq-content {
  max-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--color-white);
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  border-top: 1px solid #d8d8d8;
  padding: 8px 40px 8px 20px;
}
/* :checked */
.tabfaq input:checked ~ .tabfaq-content {
  max-height: 100vh;
}
/* Icon */
.tabfaq label::after {
  position: absolute;
  right: 0;
  top: -18px;
  display: block;
  width: 2.7em;
  height: 2.7em;
  line-height: 2.7;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tabfaq input[type=checkbox] + label::after {
  content: "+";
  color: #a8171a;
  font-size: 2em;
  font-weight: normal;
}
.tabfaq input[type=radio] + label::after {
  content: "\25BC";
}
.tabfaq input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tabfaq input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}
/* Arkeo Acoridion End*/
/** Accordion Start **/
.arkeotab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}
.arkeotab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.arkeotab label {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  color: var(--main-text-color);
  /*font-size: 1.5em;*/ 
  margin: 0.6em 0em 0.3em 0em;
  padding: 0 0 0 1em;
  position: relative;
  display: block;
  line-height: 2;
  cursor: pointer;
  /*border: 1px solid #eaeaea;*/
}
.arkeotab-content {
  max-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-white);
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  border-top: 1px solid #ccc;
  padding: 0px 0px 0px 18px;
}
/* :checked */
.arkeotab input:checked ~ .arkeotab-content {
  max-height: 40vh;
}
/* Icon */
.arkeotab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 2em;
  height: 2em;
  line-height: 2.2;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.arkeotab input[type=checkbox] + label::after {
  content: "+";
  color: #b12e30;
  font-size: 2em;
  font-weight: normal;
}
.arkeotab input[type=radio] + label::after {
  content: "\25BC";
}
.arkeotab input[type=checkbox]:checked + label::after {
  transform: rotate(270deg);
}
.arkeotab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}
/** Accordion End **/
.empNm {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500; 
    color: var(--main-text-color);
    font-size: 1.17em; 
    margin: 0.6em 0em 0.3em 0em;
}
/** Arkeo Suche Modul Start **/
#search {
    display: flex;
    margin: 0px 20px 0px 0px;
    padding: 3px 3px 3px 5px;
    height:40px; 
    border: 1px solid hsl(225, 22%, 93%);
    border-radius: 20px 20px 20px 20px;
    background-color: var(--color-white);
    justify-content: flex-end;
}
.ym {
    background-color: var(--color-white)fcc;
}
.searchitem {
    font-size: 1.1em;
    font-weight: 500;
}
.searchitem img {
    vertical-align: middle;
}
a.searchitem, a.searchitem:link, a.searchitem:visited {
    text-decoration: none;
}
.ym {
    background-color: var(--color-white)fcc;
}
#MainNav1_btnSearch, #MainNav11_btnSearch, #MainNav21_btnSearch, #MainNav31_btnSearch, #MainNav41_btnSearch, #MainNav51_btnSearch, 
#MainNav61_btnSearch, #MainNavEx1_btnSearch, #btnSearch {
    display: inline-flex;
    background: var(--color-white);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 8px;
    border: none;
}
input#MainNav1_txtSearch, input#MainNav11_txtSearch, input#MainNav21_txtSearch, input#MainNav31_txtSearch, input#MainNav41_txtSearch, input#MainNav51_txtSearch, 
input#MainNav61_txtSearch, input#MainNavEx1_txtSearch, input#txtSearch {
    display: inline-flex;
    border: none;
    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    
    padding: 4px 3px;
    text-indent: 16px;
    
    -webkit-transition: all 0.2s;
    -moz-transition: all 2s;
    transition: all 0.2s;
    -o-transition: all 2s;
    
    width: 198px;
    vertical-align: top;
}
input#MainNav1_txtSearch::-webkit-input-placeholder, input#MainNav11_txtSearch::-webkit-input-placeholder, input#MainNav21_txtSearch::-webkit-input-placeholder, 
input#MainNav31_txtSearch::-webkit-input-placeholder, input#MainNav41_txtSearch::-webkit-input-placeholder, input#MainNav51_txtSearch::-webkit-input-placeholder, 
input#MainNav61_txtSearch::-webkit-input-placeholder, input#MainNavEx1_txtSearch::-webkit-input-placeholder, input#txtSearch::-webkit-input-placeholder {
    text-indent: 6px;
}
input:focus#MainNav1_txtSearch, input:focus#MainNav11_txtSearch, input:focus#MainNav21_txtSearch, input:focus#MainNav31_txtSearch, input:focus#MainNav41_txtSearch, 
input:focus#MainNav51_txtSearch, input:focus#MainNav61_txtSearch, input:focus#MainNavEx1_txtSearch, input:focus#txtSearch {
    background-position: -20px center;
    text-indent: 0;
    width: 200px;
}
input:focus#MainNav1_txtSearch::-webkit-input-placeholder, input:focus#MainNav11_txtSearch::-webkit-input-placeholder, input:focus#MainNav21_txtSearch::-webkit-input-placeholder, 
input:focus#MainNav31_txtSearch::-webkit-input-placeholder, input:focus#MainNav41_txtSearch::-webkit-input-placeholder, input:focus#MainNav51_txtSearch::-webkit-input-placeholder, 
input:focus#MainNav61_txtSearch::-webkit-input-placeholder, input:focus#MainNav611_txtSearch::-webkit-input-placeholder, input:focus#MainNavEx1_txtSearch::-webkit-input-placeholder,
input:focus#txtSearch::-webkit-input-placeholder {
    background-position: -20px center;
    text-indent: 0;
    width: 110px;
    color: var(--color-white);

    -webkit-transition: all 0.2s;
    -moz-transition: all 2s;
    transition: all 0.2s;
    -o-transition: all 2s;
}
#searchin404 input#btnSearch {
    background: var(--color-white);
    float: right;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 0px 0px 0px 3px;
    padding: 4px;
    border: 1px solid #ccc;
}
#searchin404 input#txtSearch {
    border: 1px solid #ccc;
    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    
    padding: 4px 2px;
    text-indent: 26px;
    
    -webkit-transition: all 0.2s;
    -moz-transition: all 2s;
    transition: all 0.2s;
    -o-transition: all 2s;
    
    width: 300px;
}
#searchin404 {
    width: 340px;
    padding: 16px;
    background: #fcf1da;
}
hr {
    margin: 1.5em 1.5em 1.5em 1.5em;
    background:#F2F2F2;
    height:1px;
    color:#F2F2F2;
    border:none;
    clear:both
}
/** Arkeo Suche Modul Ende **/
#map_canvas {
    width: 100%; 
    height: 100vh; 
    margin: 0px 0px 20px 0px; 
    overflow: auto;
}

.ql-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 2em 0em;
    padding: 20px 20px 20px 20px;
    width: 100%;
    color: #212121;
    font-size: 1.2rem;
    border-radius: 35px 35px 35px 35px;
    background-color: var(--form-grey-bg);
    justify-content: space-between;
}
.ql-container a { color: var(--main-text-color); }
.qltm {
    margin: 12px 0px 6px 0px;
}

.ql-item {
    /*width: 320px;
    height: 236px;*/
    flex-shrink: 0;
    width: 25%;
    aspect-ratio: 2/1;
    /*margin: 0em 1.6em 1.6em 0em;*/
    margin: 0 auto;
    padding: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
}
.ql:hover {
    background-color: hsl(358, 79%, 97%);
    cursor: pointer;
}
.ql-item + .ql-item {
    border-left: solid 1px var(--form-grey-border-20);
}
/*.qlntnrtm {
}*/
.ql-container2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 2em 0em;
    padding: 20px 20px 20px 20px;
    width: 100%;
    color: #212121;
    font-size: 1.2rem;
    border-radius: 35px 35px 35px 35px;
    background-color: var(--color-white);
    justify-content: space-between;
}
.ql-container2 a { color: var(--main-text-color); }
.ql-item2 {
    /*width: 320px;
    height: 236px;*/
    flex-shrink: 0;
    width: 33%;
    /*aspect-ratio: 1/1;*/
    /*margin: 0em 1.6em 1.6em 0em;*/
    margin: 0 auto;
    padding: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
}
.ql-item2 + .ql-item2 {
    border-left: solid 1px var(--form-grey-border-20);
}
.subql-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 1em;
    justify-content: space-evenly;
}
.defwht-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.defwht, .defwhtsml {
    flex-wrap: wrap;
    margin: 2em 0.8em;
    width: 100%;
    color: #212121;
    text-align: left;
    font-size: 1rem;
    border-radius: 35px 35px 35px 35px;
    background-color: var(--color-white);
    border: 1px solid hsla(222, 100%, 10%, 0.1);
}
.defwht {
    padding: 40px;
}
.defwhtsml {
    padding: 20px;
}
.gry-container {
    /*flex-wrap: wrap;*/
    margin: 2em 0.8em;
    padding: 40px;
    width: 100%;
    text-align: left;
    /*font-size: 1rem;*/
    border-radius: 35px 35px 35px 35px;
    background: linear-gradient(hsla(222, 100%, 10%, 0.1), hsla(222, 100%, 10%, 0));
    border: 1px solid hsla(222, 100%, 10%, 0.1);
}
.lblSmlr { font-size: 0.8em; font-weight: 700; color: var(--vib-red);}
.cntct {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.cntct-item {
    padding:  0px 12px 0px 12px;
    display: flex;
    align-items: center;
}
.tcmicon {
    width: 60px;
    height: auto;
    margin: 0px 24px;
}
.chronikhl { padding: 0; margin: 0; font-size: 1.5em; color: #363636;}
.chroniktxt {margin: 0em 0em 1em 0em;}
@media only screen and (max-width: 759px) {
    #header {
        position: fixed;
        top: 0;
        padding: 10px 0;
        height: 102px;
        z-index: 999;
        background-color: #fff;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    body {  
      padding-top: 142px;
    }  

    .dlogo {
        display: none;
    }

    .mlogo {
        display: block;
        position: absolute;
        top: 20px;
        left: 20px;
    }

    h1, h2, h3, h4, h5, h6, .qlhl {
        background: none;
    }

    .slidermsg-container {
        position: relative;
        min-height: 340px;
        display: block;
        border-radius: 35px 35px 35px 35px;
        background-image: linear-gradient( to bottom, transparent, hsla(0, 0%, 0%, 0.5) 60% ), url('images/header/Windrad_Luftaufnahme.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    .slidermsg-container2 {
        position: relative;
        min-height: 500px;
        display: block;
        border-radius: 35px 35px 35px 35px;
        background-image: linear-gradient( 205deg, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.7) 80% ), url('images/header/header_stromtarif.jpg');
        background-size: 1550px auto;
        background-repeat: no-repeat;
        background-position: 5% 85%;
    }
    .sliderstrominfo-container {
        position: relative;
        min-height: 500px;
        display: block;
        border-radius: 35px 35px 35px 35px;
        background-image: linear-gradient( 205deg, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.4) 80% ), url('images/header/header_strominfo.jpg');
        background-size: 1550px auto;
        background-repeat: no-repeat;
        background-position: 5% 85%;
    }
    .sliderstromkenn-container {
        min-height: 340px;
    }
    .cline {position: absolute; top: 6.5rem; left: 1.5rem; color: var(--color-white);
            display: grid;
            grid-template-rows: 32px auto 30px;
            gap: 1.2rem;
            font-size: 1rem;
    }
    .clinetxt {
        font-size: 1.8rem;
        font-family: 'opensansregular';
        font-weight: 500;
        line-height: 1.2;
        padding: 0;
    }
    .clinec {position: absolute; top: 6.5rem; left: 1.5rem; color: var(--color-white);
            display: grid;
            grid-template-rows: 32px auto 30px;
            gap: 1.2rem;
            font-size: 1rem;
    }
    .clinectxt {
        font-size: 1.8rem;
        font-family: 'opensansregular';
        font-weight: 500;
        line-height: 1.2;
        padding: 0;
    }
    .clineu {position: absolute; bottom: 2rem; left: 3rem; color: var(--color-white);
            display: grid;
            grid-template-rows: 32px auto 30px;
            gap: 1.2rem;
            font-size: 1rem;
    }
    .clineutxt {
        font-size: 1.8rem;
        font-family: 'opensansregular';
        font-weight: 500;
        line-height: 1.2;
        padding: 0;
    }

    .cn-content {
        padding: 0px 12px 0px 12px;
    }

    .teasercontent {
        height: 385px;
    }

    .arkeo-content-block {
        padding-top: 0.1em;
    }

    div.colinput {
        padding: 8px 2px 8px 2px;
        clear: both;
    }

    .arkeoimagegrid {
        margin: 0px auto;
    }

    .galleryitem {
        width: 320px;
        height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .flpos {
        float: right;
        padding: 6px 6px 0px 0px;
    }

    #subinfobanner-container {
        width: auto;
        margin: 0px 12px 0px 12px;
    }

    #footerbanner-container {
        min-height: 230px;
        background-image: none;
        background-color: var(--vib-red);
    }

    #footer {
        clear: both;
        margin: 5em 0em 0em 0em;
        padding: 10px 20px 40px 20px;
        width: 100%;
        color: #5a5a5a;
        background-color: rgba(0, 0, 0, 0.05);
        text-align: left;
        font-size: 1em;
    }

    #helpline {
        display: none;
    }

    #helpline_m {
        display: block;
        font-weight: 700;
    }
    /*.responsive-video::after {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        height: 98%;
        width: 100%;
        background-image: url(images/videos/white-dots.png);
    }*/
    .columntarifh, .columntarifhc {
        margin: 2px;
        padding: 12px;
        font-size: 1.4em;
        color: var(--color-white);
        background-color: #687dac;
    }

    .columntarifhc {
        display: none;
    }

    .columntarifhb {
        margin: 2px;
        padding: 12px;
        font-size: 1.2em;
        font-weight: 700;
        color: var(--color-white);
        background-color: #7F98D2;
    }

    .columntarifb {
        margin: 2px;
        padding: 12px;
        color: #009ADF;
        background-color: #C4C8D0;
    }

    .ellipsis {
        display: inline-block;
        max-width: 350px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ql-container, .ql-container2 {
        /*display: flex;*/
        flex-direction: column;
        /*flex-wrap: nowrap;
        overflow-x: auto;
        margin: 2em 0em;
        padding: 20px 20px 20px 20px;
        width: 100%;
        color: #212121;
        text-align: left;
        font-size: 1.2rem;
        border-radius: 35px 35px 35px 35px;
        background-color: var(--form-grey-bg);
        justify-content: space-between;*/
    }
    .ql-item {
        width: 100%;
        flex-shrink: 0;
        aspect-ratio: 2/1;
        /*margin: 0em 1.6em 1.6em 0em;*/
        margin: 0 auto;
        padding: 0.6em 0em 0.6em 0em;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        align-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        text-align: left;
    }
    .ql-item2 {
        width: 100%;
        flex-shrink: 0;
        aspect-ratio: 2/1;
        /*margin: 0em 1.6em 1.6em 0em;*/
        margin: 0 auto;
        padding: 0.6em 0em 0.6em 0em;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        align-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        text-align: left;
    }
    .ql-item a {
        display: flex;
        flex-direction: row;
    }
    .ql:hover {
        background-color: hsl(358, 79%, 97%);
        cursor: pointer;
    }
    .ql-item + .ql-item, .ql-item2 + .ql-item2 {
        border-top: solid 1px var(--form-grey-border-20);
        border-left: none;
    }
    img.qltm { width: 90px; height: auto; }

    .defwht-container {
        flex-direction: column;
    }

    .defwht, .defwhtsml, .gry-container {
        width: auto;
    }
    #pagecontent ul.teaser-list {
        padding: 0;
    }
    #pagecontent ul.teaser-list li {
        margin: 0.6em 0 0.6em 0;
        padding:0 0 0 34px;
    }
    .pop-in01 {
        z-index: -1;
    }
    .cntct {
        flex-direction: column;
    }
    .spacer515 .column, .spacer515 .columnlv {
        padding: 5px 5px 5px 15px;
    }
    .icongrid-60a { grid-template-columns: auto; }
    .btnStyleInvsml, .btnStyledlInvsml {
        margin: 6px 0px 6px 0px;
    }
    .gry-container {
        padding: 12px;
    }
}
@media only screen and (min-width: 760px ) {
    .poslogo {
        position: absolute; 
        top: 20px; 
        left: 60px;
        z-index: 1000;
        height: 70px;
        color: #ccc;
    }
    #footer {
        clear: both;
        margin: 3em 0em 0em 0em;
        padding: 40px 20px 40px 20px;
        width: 100%;
        color: #5a5a5a;
        background-color: rgba(0, 0, 0, 0.05);
        text-align: left;
        
    }
    .ellipsis {
        display: inline-block;
        max-width: 520px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media screen and (min-width: 801px) {
    #pagecontent {
        min-height: 450px;
    }
    /* Grid Start */
    .row, .rowlv, .rowtariff {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
    }
    .column, .columnlv, .columntarifh, .columntarifhc, .columntarifhb, .columntarifb {
        flex: 1;
        -ms-flex: 1;
        -webkit-flex: 1;
    }
    .columntarifh, .columntarifhc, .columnavailh, .columnavailhc {
        margin: 2px;
        padding: 12px;
        font-size: 1.4em;
        color: var(--color-white);
        background-color: #3a4660;
    }
    .columntarifhc {
        max-width: 315px;
    }
    .columntarifhb {
        margin: 2px;
        padding: 12px;
        font-size: 1.2em;
        font-weight: 700;
        color: var(--color-white);
        background-color: #7F98D2;
        max-width: 315px;
    }
    .columntarifb {
        margin: 2px;
        padding: 12px;
        color: #009ADF;
        background-color: #7F98D2;
    }
    .dblue {
        font-size: 1em;
        color: var(--color-white);
        background-color: #3a4660;
        padding: 8px;
    }
    ._15 {
        flex: 1.5;
        -ms-flex: 1.5;
        -webkit-flex: 1.5;
    }
    ._2 {
        flex: 2;
        -ms-flex: 2;
        -webkit-flex: 2;
    }
    ._25 {
        flex: 2.5;
        -ms-flex: 2.5;
        -webkit-flex: 2.5;
    }
    ._3 {
        flex: 3.0;
        -ms-flex: 3.0;
        -webkit-flex: 3.0;
    }
    ._33 {
        flex: 3.33;
        -ms-flex: 3.33;
        -webkit-flex: 3.33;
    }
    ._4 {
        flex: 4.0;
        -ms-flex: 4.0;
        -webkit-flex: 4.0;
    }
    ._5 {
        flex: 5;
        -ms-flex: 5;
        -webkit-flex: 5;
    }
    ._6 {
        flex: 6;
        -ms-flex: 6;
        -webkit-flex: 6;
    }
    ._66 {
        flex: 6.6;
        -ms-flex: 6.6;
        -webkit-flex: 6.6;
    }
    ._7 {
        flex: 7;
        -ms-flex: 7;
        -webkit-flex: 7;
    }
    ._75 {
        flex: 7.5;
        -ms-flex: 7.5;
        -webkit-flex: 7.5;
    }
    ._8 {
        flex: 8;
        -ms-flex: 8;
        -webkit-flex: 8;
    }

    .borderbottom {
        border-bottom: 1px solid #7f98d2;
    }
    .borderbottom2 {
        border-bottom: 2px solid #f6f6f6;
    }
    .brdrbottom2p {
        border-bottom: 2px solid #f6f6f6;
        margin-bottom: 12px;
    }
    .borderbottomg {
        border-bottom: 1px solid #ccc;
    }
    .borderbottomb {
        border-bottom: 2px solid #2299D1
    }
    .bordertop {
        border-top: 1px solid #f6f6f6;
    }
    .borderright {
        border-right: 1px solid #808080;
    }
    .borderleft {
        border-left: 1px solid #808080;
    }
    .border {
        border: 1px solid #808080;
    }
    .tbvcenter {
        align-content: center;
    }
    .tbcenter, .tbcenter h1, .tbcenter h2, .tbcenter h3, .tbcenter h4, .tbcenter h5 .tbcenter h6, .tbcenter p {
        text-align: center;
    }
    .allcenter {
        justify-items: center;
    }
    .tbleft {
        text-align: left;
    }
    .tbright {
        text-align: right;
    }
    .center {
        text-align: center;
    }
    .right {
        text-align: right;
    }
    .resright {
        text-align: right;
    }
    .resleft {
        text-align: left;
    }
    .spacer2 .column, .spacer2 .columnlv {
        padding: 2px;
    }
    .spacer5 .column, .spacer5 .columnlv {
        padding: 5px;
    }
    .spacer50 .column, .spacer50 .columnlv {
        padding: 10px 5px 10px 5px;
    }
    .spacer515 .column, .spacer515 .columnlv {
        padding: 5px 5px 5px 15px;
    }
    .spacer012 .column {
        padding:  0px 12px 0px 12px;
    }
    .mspacer12 {
        margin: 5px 12px;
    }
    .mspacer120 {
        margin: 12px 0px 12px 0px;
    }
    .mspacer240 {
        margin: 24px 0px 24px 0px;
    }
    .spacer20 .column, .spacer20 .columnlv {
        padding: 20px;
    }
    .lblbrdrl {
        border-left: solid 1px var(--form-grey-border-20);
    }
    .ellipsis {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .banderole-bg-grey {
        background-color: var(--banderole-bg-grey);
    }
    .banderole-bg-red {
        background: linear-gradient(0deg, hsla(358, 100%, 100%, 0.05), hsla(358, 100%, 31%, 0.1));
    }
}

@media screen and (min-width: 962px) {
    .arkeo-content-block[class*=cb-][class*="-left"] .cb-content {
        float: left;
    }

    .cn-content {
        margin: 0 auto;
        width: 90%;
    }

    .cn-contentall {
        margin: 0 auto;
        width: 80%;
    }
    .arkeo-content-block[class*=cb-50-50] .cb-content, .arkeo-content-block[class*=cb-50-50] .cb-media {
        float: left;
        width: 50%;
    }

    .arkeo-content-block[class*=cb-80-20] .cb-content {
        float: left;
        width: 80%;
    }

    .arkeo-content-block[class*=cb-80-20] .cb-media {
        float: left;
        width: 20%;
    }

    .arkeo-content-block[class*=cb-70-30] .cb-content {
        float: left;
        width: 70%;
    }

    .arkeo-content-block[class*=cb-70-30] .cb-media {
        float: left;
        width: 30%;
    }

    .arkeo-content-block[class*=cb-66-33] .cb-content {
        float: left;
        width: 70%;
    }

    .arkeo-content-block[class*=cb-66-33] .cb-media {
        float: left;
        width: 30%;
    }

        .arkeo-content-block[class*=cb-60-40] .cb-content {
        float: left;
        width: 60%;
    }

    .arkeo-content-block[class*=cb-60-40] .cb-media {
        float: left;
        width: 40%;
    }

    .arkeo-content-block[class*=cb-50-50] .cb-content, .arkeo-content-block[class*=cb-50-50] .cb-media, .arkeo-content-block[class*=cb-33-66-left] .cb-content,
    .arkeo-content-block[class*=cb-33-66-left] .cb-media, .arkeo-content-block[class*=cb-66-33-right] .cb-content, .arkeo-content-block[class*=cb-66-33-right] .cb-media,
    .arkeo-content-block[class*=cb-66-33-left] .cb-content, .arkeo-content-block[class*=cb-66-33-left] .cb-media, .arkeo-content-block[class*=cb-60-40-left] .cb-content, 
    .arkeo-content-block[class*=cb-60-40-left] .cb-media, .arkeo-content-block[class*=cb-33-66-right] .cb-content, .arkeo-content-block[class*=cb-33-66-right] .cb-media, 
    .arkeo-content-block[class*=cb-70-30-left] .cb-content, .arkeo-content-block[class*=cb-70-30-left] .cb-media {
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after,
    .dl-horizontal dd:before, .modal-footer:after, .modal-footer:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before,
    .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, 
    .row:after, .row:before, .rowlv:after, .rowlv:before {
        content: " ";
        display: table;
    }
}
@media only screen and (min-width:1152px) and (max-width:1290px) {
    .stoererimg img {
      width: clamp(120px, 25vw, 360px);
    }
}

@media screen and (min-width: 1279px) and (max-width:1438px) {
    .cn-content {
        margin: 0 auto;
        width: 90%;
    }
    #header, .subinfobanner {
        width: 90%;
    }
    #footer-container {
        margin: 0em;
        padding: 3% 12.5% 2% 12.5%;
    }
}

@media screen and (min-width: 1439px) and (max-width:1540px)  {
    .cn-content {
        margin: 0 auto;
        width: 90%;
    }
    #header, .subinfobanner {
        width: 90%;
    }
}

@media screen and (min-width: 1540px) {
    .cn-content {
        margin: 0 auto;
        width: 80%;
    }
    #header, .subinfobanner {
        width: 80%;
    }
}
@media screen and (min-width: 2540px) {
    .pop-in01 {
        width: 30vw;
    }
}