:root {
    --trickyScale: 0.5;
    --primary: #00749e;
    --primary-light: #00749e;
    --primary-dark: #004b67;
}
html body .white-text { color: #fff; }
textarea, html{overflow-y:scroll; scrollbar-width: thin;}
img{border:0}
.detailimage{margin:5px 0 30px 20px;float:right;max-width:65%}
body{margin:0; -webkit-text-size-adjust: 100%;overflow-x:hidden}
h1,h3,.h1,.h3{background-color:transparent;text-decoration:none;text-align:left;line-height:1.2;margin:0 0 5px 0;font-weight:300}
h1,.h1{margin:48px 0 20px 0;font-size:44px;font-weight:600}
.h3,h3 {font-size:24px;}
.bigtext {font-size:24px;}
h2,.h2{font-size:34px;color:#666;margin: 3px 0 0 0; padding:0;font-weight:600}
h2.big,.h2.big{font-size:48px;color:#666;margin: 3px 0 0 0; padding:0;font-weight:300}
h4{font-size:18px;margin:4px 0;font-weight:600}
body,td{font-size:18px;line-height:1.5;color:#666;font-weight:300} /* #214f62;  */
body,td,select, .edit, textarea,.button {font-family:"Outfit",Arial,Helvetica,sans-serif;}
b, strong {font-weight:600}
a{text-decoration:none;color:#214f62;transition: all 0.3s}
a img { transition: transform 0.3s;}
.footer a:hover, #header a:hover{  opacity: 0.85;}
.footer_links a { display: block; float:right;margin-right:20px}
.footer_links a:first-child { margin-right: 0}
#footercanvas { filter: saturate(0%)}

a:hover img{ transform: scale(1.15); display: inline-block;}
/*.contentwrapper.main {min-height: 550px;} */
.main a:hover {color: #666}
.hasicon{padding-left:48px; position:relative; padding-bottom:4px}
.hasicon img {position:absolute; top:-4px; left:0;}
#logo {float:left;margin:18px 0 0 0;}
#header {width:100%; margin-bottom:20px;padding-bottom:8px; min-height:150px;background:#007d9f; /*background-size:cover; background-position:center; */ position: relative;  box-sizing:border-box;overflow:hidden}
#header.shadow { box-shadow: 0 3px 15px RGBA(0,0,0,0.2);}

 .start #header {min-height: calc(200px + 33vh);}
#header > * { position: relative}
#header h1 {float:left; width:100%;color:#fff; margin:50px 0;}
#header h1.hassubline {margin-bottom:15px;}
#header .subline { color:#fff; margin-top: -25px; padding: 0 0 20px 0; clear: both; line-height: 1.1; font-weight: 300}
#footer {width:100%; background:#666; overflow:hidden;background-size:cover; padding:40px 0 30px 0 ;color:#fff; box-shadow: 0 -3px 15px RGBA(0,0,0,0.2); z-index:1;position:relative}
#footer a,#footer h1,#footer .h2,#footer h2,#footer h3,#footer h4, #footer p {color:#fff}
select,.edit,.textarea,.button {
    margin-top:18px;
    background:#f0f0f0;
    color:#666;
    border: 0;
    border-bottom: 2px solid #bbb;
    clear:both;display:block;font-size:18px; border-radius: 0; -webkit-border-radius:0;-webkit-appearance: none;
}


div.light { background: #eee}
svg.light { fill: #eee}

#surfon { position: fixed; bottom: 16px; right: 16px; border-radius: 12px;z-index: 1; box-shadow: 0 0 20px RGBA(0,0,0,0.2);}

/* mail protect */
.cryptedmail:after {
    content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);
}

.edit:focus-visible,.textarea:focus-visible {
 outline: 0;
 background: #a7d5dc;
 border-bottom: 2px solid #008da3;
 color: #008da3;
}

select:focus, select:focus-visible {
    outline: 0;
    background: #a7d5dc url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyLjEzIDMuNjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDQ0O308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMCAxLjQ5IDEuMDcgMCAyLjEzIDEuNDkgMCAxLjQ5Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjIuMTMgMi4xNSAxLjA3IDMuNjQgMCAyLjE1IDIuMTMgMi4xNSIvPjwvc3ZnPg==) no-repeat 98% 50%; background-size: 10px;
    border-bottom: 2px solid #008da3;
    color: #008da3;
}

select{padding:20px; width: 100%; background: #f0f0f0 url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyLjEzIDMuNjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDQ0O308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMCAxLjQ5IDEuMDcgMCAyLjEzIDEuNDkgMCAxLjQ5Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjIuMTMgMi4xNSAxLjA3IDMuNjQgMCAyLjE1IDIuMTMgMi4xNSIvPjwvc3ZnPg==) no-repeat 98% 50%; background-size: 10px; }
.kontakt .edit,.kontakt .textarea, .kontakt .select { width: 100%}
.edit,textarea, .select{padding: 20px; box-sizing: border-box;}
textarea {resize: vertical;min-height: 100px;max-height:400px}
.button{padding:8px;background:#007ea0;color:#fff;font-weight:600;border:0 solid #666; cursor:pointer;transition: all 0.5s ease-in-out}
.button:hover {background:#666 }
.bread{margin:20px 0 3px 0; float:left; width:100%; color:#fff}
.bread a {color:#fff}
#navwrapper {float:right; height: 70px;position: relative;z-index:1;}
a.nav{ font-size:24px; width:auto; padding:0 0 0 44px; margin:20px 0; text-decoration:none;display:inline-block;color:#fff;}
a.nav.active{ font-weight: 600}
a.other4{color:#555}
a.other4:hover{color:#0c70bc}
.dwnld {
    transition:0.3s all;
    font-size:21px;
    display: block;
    line-height:1.05;
    text-align:center;
    color:#fff;
    position: absolute;
    right: 30px;
    top: 5px;
    transform: rotate(0);
}
a:hover .dwnld {transform: rotate(90deg);}
.rss{float:left; margin:16px 2px 4px 0;display:block;color:#fff}
.rss img { vertical-align: bottom; }
.contentwrapper{clear:both;padding:0 20px;box-sizing:border-box;width:94%;max-width:1280px;min-width:300px;margin:0 auto;text-align:left;}
.contentwrapper:after {
    content: "";
    display: table;
    clear: both;
}
.download .contentwrapper.main { min-height: 50vh; }
.xs{background:transparent;width:47%;margin-right:3%;float:left;margin-bottom:9px;box-sizing: border-box}
.xboxcontent{margin:20px 0;padding:0;display:block}
.scrolltotop{ overflow:hidden; text-indent:-2000px; background: #666; color:#fff; width: 60px;height: 60px; margin-left:-30px; display: block;border-radius: 8px; transform: rotate(45deg);position:absolute; left:50%; top:-8px;z-index:1}
.scrolltotop:hover {opacity:1 !important; top:-16px;}
.scrolltotop::before{content:'';position:absolute;left:-6px;top:4px;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #fff;clear:both;transform:rotate(-45deg);z-index:10}
.scrolltotop::after{content:'';position:absolute;left:-4px;top:6px;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #999;clear:both;transform:rotate(-45deg);z-index:10}

#header .contentwrapper { transition: margin 1s}
#look_showSideNav {position: absolute;display: none; right:12px; top:5px;z-index:1;opacity: 1 !important;}
.look_formIcon{position:relative;width:50px;height:50px;display:block;padding:0}

/* Burger Menu*/
.look_formIcon .look_line{height:1px;position:absolute;background:#fff;width:30px;left:10px;transition-duration:.5s;transition-property:transform,top,height,width,left,opacity}
.look_formIcon .look_line.look_lineOne{top:16px}
.look_formIcon .look_line.look_lineTwo{top:23px}
.look_formIcon .look_line.look_lineThr{top:30px}

/* Schließen X */
.close .look_formIcon .look_line.look_lineThr{top:16px;transform:rotate(45deg)}
.close .look_formIcon .look_line.look_lineOne{top:16px;transform:rotate(-45deg)}
.close .look_formIcon .look_line.look_lineTwo{display:none}

/* Meldungen */
.error-message {
    color: #f46;
    font-size: 20px;
    font-weight: bold;
    padding-top:8px;
    text-shadow: 0 0 5px rgba(255,255,255,0.4);
}
#footer .error-message {
    text-shadow: 0 0 5px rgba(0,0,0,0.4);
}

.col1,.col1p5,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12 {position:relative;margin:0;display:block;vertical-align: bottom; box-sizing: border-box; float:left; height: auto}
body .col1 {box-sizing:border-box;width:8.333333332%; padding-left: 0; padding-right: 0;}
body .col1p5 {box-sizing:border-box;width:12.5%; }
body .col2 {box-sizing:border-box;width:16.666666665%}
body .col3 {box-sizing:border-box;width:25%}
body .col4 {box-sizing:border-box;width:33.333333332%}
body .col5 {box-sizing:border-box;width:41.666666665%}
body .col6 {box-sizing:border-box;width:50%}
body .col7 {box-sizing:border-box;width:58.333333332%}
body .col8 {box-sizing:border-box;width:66.666666665%}
body .col9 {box-sizing:border-box;width:75%}
body .col10 {box-sizing:border-box;width:83.333333332%}
body .col11 {box-sizing:border-box;width:91.666666665%}
body .col12 {box-sizing:border-box;width:100%}
body img.col12 { height:auto; }
body .margin_v1 { margin-top: 6px; margin-bottom: 6px;}
body .margin_v2 { margin-top: 12px; margin-bottom: 12px;}
body .margin_v3 { margin-top: 18px; margin-bottom: 18px;}
body .margin_v4 { margin-top: 24px; margin-bottom: 24px;}
body .margin_v5 { margin-top: 30px; margin-bottom: 30px;}
body .margin_t2 { margin-top: 12px; }
body .margin_t3 { margin-top: 18px; }
body .margin_t4 { margin-top: 24px; }
body .margin_t5 { margin-top: 30px; }
body .margin_t6 { margin-top: 36px; }
body .margin_t8 { margin-top: 48px; }
body .margin_t10 { margin-top: 60px; }
body .margin_t12 { margin-top: 72px; }
body .margin_t0 { margin-top: 0; }
body .margin_b0 { margin-bottom: 0; }
body .margin_b2 { margin-bottom: 12px; }
body .margin_b3 { margin-bottom: 18px; }
body .margin_b4 { margin-bottom: 24px; }
body .margin_b6 { margin-bottom: 36px; }
body .margin_b8 { margin-bottom: 48px; }
body .padding_l1 { padding-left: 6px}
body .padding_r1 { padding-right: 6px}
body .padding_l2 { padding-left: 12px}
body .padding_r2 { padding-right: 12px}
body .padding_l3 { padding-left: 18px}
body .padding_r3 { padding-right: 18px}
body .padding_l4 { padding-left: 24px}
body .padding_r4 { padding-right: 24px}
body .padding_l5 { padding-left: 32px}
body .padding_r5 { padding-right: 32px}
body .padding_l6 { padding-left:  40px}
body .padding_r6 { padding-right: 40px}
body .padding_l7 { padding-left:  48px}
body .padding_r7 { padding-right: 48px}
body .padding_l8 { padding-left:  56px}
body .padding_r8 { padding-right: 56px}

.mobileonly { display: none; }

.divider {clear: both; margin: 26px 0 8px 0; border-bottom: 1px solid #ddd}

body .paddings2 {padding:48px; box-sizing: border-box}
body .paddings {padding:24px; box-sizing: border-box}
body .paddingss {padding:12px; box-sizing: border-box}
body .padding_t0 {padding-top: 0 !important;}
body .padding_b0 {padding-bottom: 0  !important;}
body .paddingsLeftRight {padding:0 12px; box-sizing: border-box}
body .paddingsNotTop {padding:0 24px 24px 24px; box-sizing: border-box}
body .paddingsNotBottom {padding: 24px 24px 0 24px; box-sizing: border-box}
html body .upper { text-transform: uppercase }
html body .right {float:right}
html body .button.right {float:right}
html body .button.tleft {text-align:left !important; }
html body .tleft {text-align:left;}
html body .tright {text-align:right}
html body .tcenter {text-align:center}
html body .center { float: none !important; left: 0; position: relative; right: 0; margin-left: auto; margin-right: auto; display: block}
html body .vcenter { float: none !important; top:50%;transform: translate(0%,-50%); display: block}

.svg-section {  padding:0; margin: 0; display: block; position: relative}

.readmore {
    display: inline-block;
    font-weight: 300;
    font-size: 18px;
    margin: 12px 0;
    background: #808080;
    padding: 18px 24px 16px 24px;
    border-radius: 6px;
    color:#fff;
    clear: both
}
.readmore:hover { color:#fff !important; transform: scale(1.175); }
.readmore.small { padding: 5px 20px 4px 20px; border-radius: 24px; }


/* Filter */
.invert { filter: invert(1); }
.soft { opacity:0.2}


/* START SCREENS */

.screen-image {
    transform: perspective(3200px) rotateX(41.8deg) rotateY(48.5deg) rotateZ(-23.2deg) translateX(135px) translateY(190px) scale(1.348);
    z-index: 2;
}

@supports not (-webkit-touch-callout: none) {
    /* CSS for other than iOS devices */
    .screen-image {
        transition: transform 600ms ease-in-out, box-shadow 600ms ease-in-out;
        transition-delay: 200ms;
    }
    .screen-frame {
        transition: opacity 600ms ease-in-out;
        transition-delay: 200ms;
    }

}




.screen-frame {
    opacity: 1;
    z-index: 1;
    transform-style: flat;
}

.screen-wrapper:hover .screen-image  {
    transform: perspective(2000px) rotateX(0) rotateY(0) rotateZ(0) translateX(560px) translateY(220px) scale(2.5);
    cursor: pointer;
    box-shadow: 0 0 20px 20px rgb(255, 255, 255);
}



.screen-wrapper:hover .screen-frame {
    opacity: 0;
}

.screen-wrapper img, .screen-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
}

.screen-wrapper {
    transform: translateX(-12px) scale(var(--trickyScale));
    transform-origin: top left;
    clear: both;
}
@media screen and (max-width: 1600px) {
    #surfon { bottom: 90px; }
}
@media screen and (min-width:769px) and (max-width:1024px) {
    #surfon { width: 100px; }

}


    @media screen and (max-width: 1380px){   .screen-wrapper { min-height: 50vw; } }
@media screen and (max-width: 768px){ .screen-wrapper { min-height: 85vw; } }
@media screen and (min-width: 1381px){ .screen-wrapper { min-height: 670px; } }
/* ENDE SCREENS */







@media (min-width:769px) {
    .flex_desktop {display: flex;   align-items: center; }
    .table { display: table}
    .td { display: table-cell; vertical-align: center}
    .app_kinderplayer .detailimage, .app_eiswarnung .detailimage { margin-bottom:0;}
    /* START FLIPPED SCREENS */
    .screen-wrapper.flip .screen-image {
        transform: perspective(3100px) rotateX(44.2deg) rotateY(-51.0deg) rotateZ(26.4deg) translateX(292px) translateY(246px) scale(1.165);
    }

    .screen-wrapper.flip:hover .screen-image {
        transform: perspective(2000px) rotateX(0) rotateY(0) rotateZ(0) translateX(-340px) translateY(220px) scale(2.5);
        cursor: pointer;
        /* border: 1px solid #eee;
        margin: -1px; */
    }

    .screen-wrapper.flip .screen-frame {
        transform: scaleX(-1);
    }
    /* ENDE FLIPPED SCREENS */


}

@media (max-width:768px) {


    select,.edit,.textarea,.button {  font-size:15px;}
    h4 {font-size:15px;}
    body,td{font-size:15px;}


    .mobileonly { display: block; }

    .screen-wrapper:hover .screen-image {
       transform: perspective(2000px) rotateX(0) rotateY(0) rotateZ(0) translateX(15.5%) translateY(220px) scale(1.53) !important;
     }

    /* captcha
    #captcha { height: 61px;}

     */

    /* zentriert */
    .screen-wrapper {
        left: 50%;
        margin-left: -40vw;
    }

    h1,h2,h3 { text-align: center}
    .left-s { float: left !important}

    #surfon { display: none; }

    /* Größe S */
    body .onlyright.paddingss { padding-right:6px}
    body .onlyleft.paddingss { padding-left:6px}
    body .onlyright.paddings { padding-right:12px}
    body .onlyleft.paddings { padding-left:12px}
    body .col1s {box-sizing:border-box;width:8.333333332%}
    body .col2s {box-sizing:border-box;width:16.666666665%}
    body .col3s {box-sizing:border-box;width:25%}
    body .col4s {box-sizing:border-box;width:33.333333332%}
    body .col5s {box-sizing:border-box;width:41.666666665%}
    body .col6s {box-sizing:border-box;width:50%}
    body .col7s {box-sizing:border-box;width:58.333333332%}
    body .col8s {box-sizing:border-box;width:66.666666665%}
    body .col9s {box-sizing:border-box;width:75%}
    body .col10s {box-sizing:border-box;width:83.333333332%}
    body .col11s {box-sizing:border-box;width:91.666666665%}
    body .col12s {box-sizing:border-box;width:100%}
    body .padding_l0s { padding-left: 0}
    body .padding_r0s { padding-right: 0}
    body .padding_l1s { padding-left: 6px}
    body .padding_r1s { padding-right: 6px}
    body .padding_l2s { padding-left: 12px}
    body .padding_r2s { padding-right: 12px}
    body .padding_l3s { padding-left: 18px}
    body .padding_r3s { padding-right: 18px}
    body .padding_l4s { padding-left: 24px}
    body .padding_r4s { padding-right: 24px}
    body .padding_l5s { padding-left: 32px}
    body .padding_r5s { padding-right: 32px}
    body .special_s {padding-top:0 !important; }
    html body .tcenters { text-align: center}
    html body .centers { float: none !important; left: 0; position: relative; right: 0; margin-left: auto; margin-right: auto; display: block}
}




@media screen and (max-width: 1024px) {
    .content1{width:57%;margin-left:5%}
    .content2{width:38%}
}
@media screen and (max-width: 768px) {
    .m100 {width: 100%}
    .content1{width:51%;margin-left:5%}
    .content2{width:44%}
    .xs{width:100%;margin-right:0}
    .contentwrapper{width:100%;margin:0}
    #footer { padding:25px 0 10px 0 }
    .center-image-small {
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 12px;
    }
    .center-image-small img {
      float: none !important;
    }
}

@media screen and (max-width: 640px) {
    .detailimage{max-width:100%;width: 100%}
    .bread{margin:20px 0 0}
    #look_showSideNav{display:block}
    #navwrapper{margin-top:-200px;width:100%;height:auto;transition: margin 1s ease-in-out; margin-bottom: -70px;}
    a.nav{font-size:22px;width:100%;padding:0;margin:0 0 12px;text-align:center}
    #logo{position:absolute;left:50%;margin-left:-85px}
    #header h1{font-size:34px;margin:90px 0 10px}
    #header .subline{font-size:18px;}
    h2, .h2 { font-size: 28px;}
    h2.big, .h2.big { font-size: 34px;}
    .footer_links { width: 100%; display: block;  clear:both; overflow:hidden; text-align: center; padding-bottom:20px }
    .footer_links a { display: inline-block; float:none;margin: 20px 20px 0 20px !important;}
}

@media screen and (min-width: 641px) {
    #navwrapper{margin-top:0 !important;}
}


/* DARK MODE
@media (prefers-color-scheme: dark ){

    :root {
        --primary: #004b67;
    }

    body {
        background: #2e3236;
        color: #eee;
    }
     #header canvas, #captcha, svg.primary, .screen-frame{
        filter: brightness(0.65)
    }

    html body #footercanvas { filter: brightness(0.65) ; }
    .darker, #logo img,#footer img, #surfon { filter: brightness(0.95);}
    .darker.invert  { filter:invert(1)  brightness(0.85) ; }


    #footer #captcha    { filter: brightness(0.85) hue-rotate(-10deg); }

    #footer .button   {   box-shadow: inset 0 0 0 2px #ddd; background: transparent !important; }

     div.light { background: #8995a1; color: #2e3236 }
    svg.light { fill: #8995a1}
    select, .edit, .textarea, .button { background: #25282b; border-bottom-color: #202225;}
    #footer select, #footer .edit, #footer .textarea, #footer .button { background: #2e3236; border-bottom-color: #202225;}
    .edit:focus-visible,.textarea:focus-visible {
        background: #8995a1  !important;
        border-bottom: 2px solid #202225  !important;;
        color: #202225  !important;
    }
    select:focus, select:focus-visible {
        background: #8995a1 url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyLjEzIDMuNjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDQ0O308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMCAxLjQ5IDEuMDcgMCAyLjEzIDEuNDkgMCAxLjQ5Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjIuMTMgMi4xNSAxLjA3IDMuNjQgMCAyLjE1IDIuMTMgMi4xNSIvPjwvc3ZnPg==) no-repeat 98% 50%; background-size: 10px;
        border-bottom: 2px solid #202225 !important;
        color: #202225  !important;
    }

    svg.white {fill:#2e3236 }
    #footer a, #footer h1, #footer .h2, #footer h2, #footer h3, #footer h4, #footer p,h2.big, .h2.big,
    html body .white-text, #header h1, #header .subline, a.nav, #footer, .bread a { color: #eee ; }

    .light h2.big,.readmore { color: #2e3236; }
    html body input.readmore { color: #eee; }


    .soft {  opacity: 0.85; }
    .screen-wrapper:hover .screen-image { box-shadow: 0 0 20px 20px #222128}

    .positive { filter: invert(1); }
    a { color: #00749e;}
    h2, .h2 { color: #eee; }
    .light h2, .light h2 { color: #2e3236; }
}
*/