/*======================================================== ESSSER 1. Allgemeine HTML-Elemente ========================================================*/ /* CHECK MENU display TABLE CELL #menue ul li a transition fallback */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: none repeat scroll 0 0 transparent; border: 0 none; margin: 0; outline: 0 none; padding: 0; vertical-align: baseline; } html { height: 100%; font-size: 16px; /* SPINNER */ background-color: #fff; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-image: url('../pix/spinner.gif'); } body { background-color: #fff; color: #000; color: #333; /*font-family: 'Roboto', Arial, sans-serif;*/ /*font-family: 'Muli', Arial, sans-serif;*/ font-family: 'Urbanist', sans-serif; font-weight: 300; /* ACHTUNG das hier testen ob es im IE funzt. bei z-index: -32 sind links in navi oben nicht anklickbar weil darüberliegt ?!?!?*/ /* */ /*z-index: -32; /* damit body unter #heldIos liegt (sonst überdeckt bg-color von body #heldIos)*/ /* */ height: 100%; line-height: 1.375; position: relative; /* bei position fixed ist schrift im safari dünner*/ /*http://stackoverflow.com/questions/22204752/mac-safari-font-rendering-changes-thinner-when-any-element-on-the-page-gets-posi*/ -webkit-font-smoothing: subpixel-antialiased; /*background: url(../pix/bgr50.jpg) fixed;*/ } h1, h2 { margin: 0px; margin-bottom: .5em; font-weight: 300; font-size: 4rem; /* 4rem */ text-transform: uppercase; } h1 .subline, h2 .subline { display: block; font-size: .6em; padding: 0; margin: 0; margin-top: -.2em; } h1 { /* titel! */ font-size: 8rem; /* 5rem;*/ } h2 { margin-bottom: .5em; text-transform: uppercase; font-size: 3rem; font-weight: 100; } /* ca. 20px 120%*/ h3 { margin-bottom: .5em; text-transform: uppercase; font-size: 3rem; font-weight: 100; } /* ca. 20px 120%*/ h3 .subline { display: block; font-size: .8rem; line-height: 1; } h3.fluss { margin-bottom: .5em; text-transform: uppercase; font-size: 1.8rem; font-weight: 100; letter-spacing: .1em; } /* ca. 20px 120%*/ h4 { font-size: 1.5rem; margin-bottom: 0em; text-transform: uppercase; font-weight: 100; } /* ca. 18px */ h5 { font-size: 1.05rem; } /* ca. 16px */ h6 { font-size: 1.02rem; } /* ca. 14px */ ol, ul { list-style: none outside none; } div { overflow: visible; } a:link { text-decoration: none; color: #000;} a:visited { color: #000;} a:hover, a:focus { text-decoration: none;} a:active{ color: #000;} a { text-decoration: none; outline: none;}/* outline entfernt beim klicken den gepunkteten rahmen um den link*/ p, ul { font-size: 1rem; /*ex 1.2rem; wegen zuwenig text vergrößert*/ word-spacing: .1rem; margin: 0; text-align: left; margin-bottom: 1em; } ul ul { margin: 0; margin-left: 1em; } li { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } img { border: none; } .kursiv { font-style: italic; } .fett { font-weight: bold; } .linksbuendig { text-align: left; } .rechtsbuendig { text-align: right; } .zentriert { text-align: center; } .unterstrichen { text-decoration: underline; } .schatten { -moz-box-shadow: 0 0 25px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.3); box-shadow: 0 0 25px rgba(0,0,0,0.3); } .floatLeft { float: left; } .floatRight { float: right; } /* micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** http://nicolasgallagher.com/micro-clearfix-hack/ * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } .lazy { /* lazy load per default ausgeblendet, wird nir bei aktivem js eingeblendet in custom.js -> $("img.lazy").show().lazyload({... */ display: none; } /*https://css-tricks.com/snippets/css/drop-caps/*/ .drop-cap:first-letter { float: left; font-size: 3.3rem; line-height: 0.5; margin: 0.2em 0.1em 0.1em 0; } .schwarzVerlauf { /* background: rgb(34,34,34); background: -moz-linear-gradient(180deg, rgba(34,34,34,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(180deg, rgba(34,34,34,1) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(180deg, rgba(34,34,34,1) 0%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#222222",endColorstr="#000000",GradientType=1); background: rgb(24,24,24); background: -moz-linear-gradient(180deg, rgba(24,24,24,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(180deg, rgba(24,24,24,1) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(180deg, rgba(24,24,24,1) 0%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#181818",endColorstr="#000000",GradientType=1);*/ /* background: rgb(24,24,24); background: -moz-linear-gradient(135deg, rgba(24,24,24,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(135deg, rgba(24,24,24,1) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(135deg, rgba(24,24,24,1) 0%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#181818",endColorstr="#000000",GradientType=1); */ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#222222+0,000000+100 */ background: #222222; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #222222 0%, #000000 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#000000)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, #222222 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, #222222 0%,#000000 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, #222222 0%,#000000 100%); /* IE10 preview */ background: linear-gradient(to bottom, #222222 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#181818+0,000000+100 */ background: #181818; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4MTgxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #181818 0%, #000000 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#181818), color-stop(100%,#000000)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, #181818 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, #181818 0%,#000000 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, #181818 0%,#000000 100%); /* IE10 preview */ background: linear-gradient(to bottom, #181818 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181818', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#181818+0,080808+100 */ background: #181818; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4MTgxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwODA4MDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #181818 0%, #080808 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#181818), color-stop(100%,#080808)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, #181818 0%,#080808 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, #181818 0%,#080808 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, #181818 0%,#080808 100%); /* IE10 preview */ background: linear-gradient(to bottom, #181818 0%,#080808 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181818', endColorstr='#080808',GradientType=0 ); /* IE6-8 */ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#181818+0,080808+90,000000+100 */ background: #181818; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4MTgxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzA4MDgwOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #181818 0%, #080808 90%, #000000 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#181818), color-stop(90%,#080808), color-stop(100%,#000000)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, #181818 0%,#080808 90%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, #181818 0%,#080808 90%,#000000 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, #181818 0%,#080808 90%,#000000 100%); /* IE10 preview */ background: linear-gradient(to bottom, #181818 0%,#080808 90%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181818', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ } /*======================================================== 2. DIV-Bereiche ========================================================*/ #contactBar { z-index: 950; position: relative; height: 40px; text-align: center; } #contactBarInner { width: 100%; max-width: 960px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .contactSpalte { padding: 0 25px; margin: 5px 0; background-size: contain; background-repeat: no-repeat; background-position: left top; font-size: .85rem; letter-spacing: .12em; color: #aaa; color: #ddd; font-weight: 400; } .contactSpalte a:link { } .contactSpalte a:visited { } .contactSpalte a:hover { text-decoration: underline; } .contactSpalte a:focus { } .contactSpalte a:active { } .contactSpalte a { color: #ddd; text-decoration: none; } #contactSpalte1 { float: left; background-image: url("../pix/iconPhoneDDD.png"); } #contactSpalte2 { float: left; background-image: url("../pix/iconMailDDD.png"); } #contactSpalte3 { float: right; background-image: url("../pix/iconClockDDD.png"); padding-right: 0; } #header { box-sizing: border-box; /*ACHTUNG #header und töchter BORDER-BOX */ /*border-bottom: 1px solid #000;*/ z-index: 932; position: absolute; top: 40px; /*2 check: oder besser top und left auskommentieren*/ left: 0; width: 100%; height: 220px; background-color: #fff; background-color: rgba(255,255,255,.9); background-color: #fff; /* -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;*/ } /*.scrollHeaderL { height: 230px; }*/ #header.scrollHeaderS { height: 150px; } #header.fixed { position: fixed; top: 0; width: 100%; } #menueHolder { position: absolute; /* ex RELATIVE*/ /*position: fixed;*/ left: 0; top: 0; /*width: 250px; */ z-index: 4567456; /*height: 100%; */ margin-left:auto; margin-right: auto; /*background: #17B5EB;*/ /*display: none;*/ } #header.weiss #menueHolder { height: initial; } input#hamburger { display: none; } label.hamburger { display: block; width: 1em; width: 32px; height: 1em; height: 23px; position: relative; position: absolute; /* left: 50%; transform: translateX(-490px); */ left: 20px; top: 20px; /*padding: 1em; clickbereich vergrößern*/ cursor: pointer; padding: 10px; z-index: 100; text-align: center; margin-top: -5px; } .hamburger { text-align: right; font-family: "Roboto"; color: #333; padding-top: .2rem; font-size: 2rem; } .hamburgerLinie { display: block; position: absolute; right: 0; margin-right: 10px; height: 2px; /*5px*/ width: 32px; background: #000; /*#333;*/ /*border-radius: 2px;*/ transition: 0.3s; transform-origin: center; /*box-shadow: 0 0 5px rgba(255,255,255,.8);*/ } #hamburgerLinie1 { top: 10px; } #hamburgerLinie2 { top: 20px; } #hamburgerLinie3 { top: 30px; } #hamburger:checked + .hamburger #hamburgerLinie1 { transform: translateY(10px) rotate(-45deg); } #hamburger:checked + .hamburger #hamburgerLinie2 { opacity: 0; } #hamburger:checked + .hamburger #hamburgerLinie3 { transform: translateY(-10px) rotate(45deg); } #menue { height: 100vh; max-height: 100%; /* entweder scrollIn oder fade In */ /*margin-top: -3.3rem;*/ /*-8rem;*/ /*margin-top: -67PX;*/ /*padding-top: 8rem;*/ padding-top: 50px; /* damit menue oben den #navi bereich überdeckt aber logo liegt drüber*/ /*max-height: 0; */ overflow: hidden; overflow: auto; background: rgba(255,255,255,.95); text-align: center; transition: all .3s; transform: translateX(-110%); border-right: 2px solid #000; /*opacity: 1;*/ width: 0; /*display: none;*/ } ????header.weiss #menue { background: rgba(255,255,255,.9); /* entweder scrollIn oder fade In */ } #menue.scrollMenue { /*padding-top: 100px;*/ } #menue img { height: 70px; width: auto; } #hamburger:checked + .hamburger + #menue { height: 3000px; height: 100vh; /* krücke weil #menueholder darf nicht height:100% sein, sonst überdeckt er steuerelemete von slideshow. so "dehnt" #menue den #menueholder nur bei #hamburger:checked */ max-height: 0; max-height: 100%; /* entweder scrollIn oder fade In */ /*background: rgba(255,255,255,1);*/ transform: translateX(0); /*opacity: 1;*/ width: 16rem; /*display: block;*/ } #menue ul { /*width: 50%;*/ /*display: inline-block;*/ display: table-cell; /*background-color: #fff;*/ padding: 2rem 1.5rem; /*padding-right: 0;*/ margin-bottom: 0; } #menue ul li { /*text-align: center;*/ list-style-type: none; color: white; /*margin-right: 3em;*/ /* border-top: 4px solid #000; */ /*padding: .2em 0;*/ } #menue ul li:last-child { border-bottom: 0; } #menue ul li a { /* font-weight: 500; font-size: 1.2rem;*/ /*font-family: 'Montserrat', Arial, sans-serif;*/ font-family: 'Urbanist', sans-serif; text-align: left; font-size: 1.2rem; /*font-weight: 600;*/ color: #333; /* letter-spacing: .03rem; word-spacing: .03rem;*/ letter-spacing: .04em; word-spacing: -.05em; line-height: 1em; text-transform: uppercase; /*text-shadow: 0 0 10px rgba(255,255,255,.5);*/ /*color: #000; */ text-decoration: none; display: block; margin: 0 .5em; /*margin-bottom: .3em;*/ padding: .5em 0; transition: all .2s; /*display: none;*/ } #menue ul li a:link { } #menue ul li a:visited { } #menue ul li a:hover { margin-left: 0; /*color: #f8f0e8;*/ } #menue ul li a:focus { } #menue ul li a:active { } #menue ul li a { } #menue .menueSubItem { font-size: .8em; padding-left: 1em; } #menue #holderTable { display: table; /*width: 900px;*/ /* margin-right: 0px; margin-left: auto;*/ margin: 0; /*margin-left: 3rem;*/ /* -moz-box-shadow: -15px 15px 25px rgba(0,0,0,.25); -webkit-box-shadow: -15px 15px 25px rgba(0,0,0,.25); box-shadow: -15px 15px 25px rgba(0,0,0,.25);*/ } #naviHolder { box-sizing: border-box;/*ACHTUNG #header und töchter BORDER-BOX */ position: relative; /* max-width: 960px; margin: 0 auto;*/ z-index: 100; text-align: center; } #ios { /* display -IOS neben LOGO wenn ios*/ display: none; } #logoHolder { box-sizing: inherit;/*ACHTUNG #header und töchter BORDER-BOX */ /* width: 66.66667%; float: left*/; } #logo { position: relative; box-sizing: inherit;/*ACHTUNG #header und töchter BORDER-BOX */ height: 220px; } #logo.scrollLogoS { height: 120px; } #logo h1 { /*display: none;*/ margin: 0; } #topLogo { height: 130px; margin-top: 10px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #topLogo.scrollTopLogoS { height: 70px; } #logoClaim { font-family: 'Urbanist', sans-serif; /*font-family: 'Montserrat', Arial, sans-serif;*/ display: block; text-align: center; text-transform: uppercase; font-weight: 200; letter-spacing: .25em; line-height: 1.2em; } h1 #logoClaim { font-size: 1.1rem; color: #000; transform: translateY(-8px) scale(1, 0.9); } h1 #logoClaim.scrollLogoClaimS { font-size: 1.1rem; font-size: .9rem; transform: translateY(-6px); } h2 #logoClaim { font-size: 1.1rem; color: #ddd; transform: translateY(-8px); } /*h2 #logoClaim:before { content:" "; display:block; width: 100%; height: 200px; } h2 img:after { content:" qq"; display:block; width: 100%; height: 200px; }*/ #nnnnnnnnnnnnnnnnnnnaviBottom { position: relative; box-sizing: inherit;/*ACHTUNG #header und töchter BORDER-BOX */ height: 30px; display: none; margin-top: 3rem; /* nur für submenue in inhalt*/ } #socialHolder { /*display: none;*/ position: absolute; top: 25px; right: 20px; /*transform: translateX(480px); */ } #socialHolder a img { height: 30px; width: auto; margin-left: 10px; } #socialHolder a:link {} #socialHolder a:visited {} #socialHolder a:hover { opacity: .5; } #socialHolder a:focus {} #socialHolder a:active {} #socialHolder a {} a.terminvereinbarung:link, a.terminvereinbarung:visited {} a.terminvereinbarung:hover, a.terminvereinbarung:focus, a.terminvereinbarung:active { color: #fff; background-color: #181818; } /*a.terminvereinbarung:active {}*/ a.terminvereinbarung { width: 23rem; margin: 0 auto; text-shadow: none; display: block; text-align: center; padding: 1px 10px; /*0 10px;*/ letter-spacing: .04em; border: 1px solid #000; border-radius: 1em; text-decoration: none; outline: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #footer a.terminvereinbarung { border: 1px solid #ddd; color: #ddd; width: initial; } #footer a.terminvereinbarung:hover, #footer a.terminvereinbarung:focus, #footer a.terminvereinbarung:hover/*, #terminvereinbarung li a:focus*/ { color: #181818; background-color: #ddd; } /********************** bis hier sauber ***************************/ #heroHolder { position: relative; margin-top: 250px; /*max-width: 960px;*/ /*max-width: 1200px;*/ margin: 120px auto 0 auto; /* wegen schrumpfendem header bei scroll muss es weiter oben sein*/ padding-top: 42%; /* ex 35%*/ padding-top: 50%; /* ex 35%*/ background-position: 50% 25%; background-position: 50% -20%; background-repeat: no-repeat; background-size: cover; background-image: url(../bilder/tresorini/slider/slider01.jpg); background-image: url(../bilder/tresorini/slider/slider02.jpg); background-image: url(../bilder/tresorini/slider/slider03.jpg); background-image: url(../bilder/tresorini/slider/slider04.jpg); background-image: url(../bilder/tresorini/slider/slider05.jpg); background-image: url(../bilder/tresorini/slider/slider06.jpg); /*background-image: url(../bilder/tresorini/slider/slider07.jpg);*/ background-image: url(../bilder/held.jpg); } #heroHolder.scrollHeroHolder { margin: 40px auto 0 auto; /* wegen schrumpfendem header bei scroll muss es weiter oben sein*/ } #inhalt { margin-top: -90px; /* wegen der navileiste (50px) und #contactBar (40px) position relaive ( wird zum 100% height von slideshow addiert) */ margin-top: 0; /* bei header initial position: absolut braucht man das nicht */ width: 100%; position: relative; /*background-color: #fbfbfb;*/ text-align: center; z-index: 10; background-color: #fff; /* background-position: center center; background-repeat: no-repeat; background-size: cover;*/ /*background-image: url(../pix/bgr50.jpg);*/ /*background-attachment: fixed;*/ /*border-top: 20px solid #333;*/ } #inhalt:before {/* #202020 rand oben bei inhalt*/ content:" "; display:block; width: 100%; height: 2px; /*background-image:url('../pix/202020.png');*/ /* position:absolute; bottom:-10px; left:0px;*/ } #inhalt h2 { color: #333; text-transform: none; /*font-family: 'Shadows Into Light Two', Arial, sans-serif;*/ /*font-family: 'Shadows Into Light Two', cursive;*/ /*text-align: left;*/ /*Caveat:400,700|Kalam:300,400*/ /*Shadows+Into+Light|Shadows+Into+Light+Two" r*/ /*margin-top: 70px;*/ margin-top: 4.5em; margin-bottom: 1em; font-weight: 400; font-size: 3rem; /*'Shadows Into Light Two' 3rem*/ padding-bottom: .1em;/*'Shadows Into Light Two' .6em*/ /*margin-top: 25px;*/ /* wegen #inhaltLogo */ /*margin-left: -.1em;*//* für CAVEAT */ /*letter-spacing: -.05em;*/ /* für CAVEAT */ /*margin-left: -.1em;*//* für CAVEAT */ /*letter-spacing: -.05em;*/ /* für CAVEAT */ font-weight: 100; letter-spacing: .1em; text-transform: uppercase; } #inhalt h2, .teaserText h3, .teaserText h4 { font-family: 'Urbanist', sans-serif; letter-spacing: .3em; transform: scale(1, 0.9); /*font-family: 'Montserrat', sans-serif;*/ /*letter-spacing: .1em;*/ font-weight: 100; text-transform: uppercase; font-size: 2rem; margin-top: 6em; margin-bottom: .5em; } .indexSeite #inhalt h2, .impressumSeite #inhalt h2, .datenschutzSeite #inhalt h2, .terminvereinbarungSeite #inhalt h2 { font-size: 2.5rem; margin-top: 2em; margin-bottom: .5em; } #inhalt p { font-family: 'Roboto', sans-serif; font-size: 1rem; } #inhalt p { font-family: 'Urbanist', sans-serif; font-size: 1.3rem; /* letter-spacing: .01em; */ letter-spacing: .05em; font-weight: 200; line-height: 1.1em; } #inhalt p.kategorieText { margin-bottom: 15rem; } .indexSeite #inhalt p.kategorieText { margin-bottom: 3rem; } #iiiiiiiiiiiiiinhalt h3 { color: #333; text-transform: none; /*font-family: 'Shadows Into Light Two', Arial, sans-serif;*/ font-family: 'Shadows Into Light Two', cursive; /*text-align: left;*/ /*Caveat:400,700|Kalam:300,400*/ /*Shadows+Into+Light|Shadows+Into+Light+Two" r*/ margin-top: 3rem; margin-bottom: 0; font-weight: 400; font-size: 3rem; /*'Shadows Into Light Two' 3rem*/ padding-bottom: .1em;/*'Shadows Into Light Two' .6em*/ /*margin-left: -.1em;*//* für CAVEAT */ /*letter-spacing: -.05em;*/ /* für CAVEAT */ } /*body.newsSeite #inhalt h2 { margin-top: 0; }*/ #inhaltLogo { position: absolute; top: 90px; left: 50%; /*margin-left: -70px;*/ transform: translateX(-50%); background-color: #fff; /*padding: 5px;*/ } /*body.newsSeite #inhaltLogo { display: none; }*/ #inhaltLogo img { width: 75px; height: auto; } .fliesstext { padding: 8rem 2rem; /*12rem 1.5rem; 6rem 1.5rem; 4rem 1.5rem; *//* damit bei ios text nicht bis zum rand geht*/ padding-top: 0; } .zeile { position: relative; /*height: 100%;*/ max-width: 720px; /*ex 960 wegen wenig text verkleinert*/ max-width: 960px; background-color: rgba(255,255,255, .0); margin: 0px auto; text-align: center; } .teaserHolder { margin-bottom: 3rem; } .homestyleSeite.alternate .teaserHolder, .newsSeite.alternate .teaserHolder{ margin-bottom: 5rem; } .teaserHolderGross .teaserWrapper { padding: 0 15%; } /* aktuelles !!!!! */ .teaserImage { box-sizing: border-box; /*border: 8px solid #fff;*/ width: 33%; /*margin-top: 2rem;*/ /* padding-top: 33.33333334%; background-position: center center; background-repeat: no-repeat; background-size: cover;*/ float: left; /*transform: rotate(-2deg);*/ } .teaserQuerformat .teaserImage { width: 55%; } .teaserHochformat .teaserImage { width: 35%; } .teaserQuadratformat .teaserImage { width: 45%; } .teaserHolderGross .teaserImage { width: 100%; } .teaserImage img { width: 100%; } .teaserHochformat .teaserText { width: 63%; } /*.imageNaviImage { box-sizing: border-box; border: 8px solid #fff; width: 55%; padding-top: 33.33333334%; background-position: center center; background-repeat: no-repeat; background-size: cover; float: left; transform: rotate(-2deg); } */ /*body.homestyleSeite .imageNaviImage { padding-top: 33.33333334%; background-position: center center; background-repeat: no-repeat; background-size: cover; }*/ body.alternate .teaserLink:nth-of-type(odd) .teaserImage, body.alternate .teaserHolder:nth-of-type(odd) .teaserImage { float: left; transform: rotate(-2deg); } body.alternate .teaserLink:nth-of-type(even) .teaserImage, body.alternate .teaserHolder:nth-of-type(even) .teaserImage { float: right; transform: rotate(2deg); } .teaserText { box-sizing: border-box; width: 66%; float: right; padding-left: 3rem; } body.alternate .teaserLink:nth-of-type(odd) .teaserText, body.alternate .teaserHolder:nth-of-type(odd) .teaserText { float: right; padding-left: 3rem; padding-right: 0; } body.alternate .teaserLink:nth-of-type(even) .teaserText, body.alternate .teaserHolder:nth-of-type(even) .teaserText { float: left; padding-right: 3rem; padding-left: 0; } .teaserQuerformat .teaserText { width: 45%; } .teaserHochformat .teaserText { width: 65%; } .teaserQuadratformat .teaserText { width: 55%; } .teaserHolderGross .teaserText { width: 100%; margin-top: 3rem; padding: 0; } .teaserHolderGross .teaserText:after { content: " "; display: block; margin: 0 10rem; margin-top: 3rem; border-bottom: 2px solid #000; } .teaserText h3, .teaserText h4 { /* color: #333; text-transform: none; font-family: 'Urbanist', sans-serif; letter-spacing: .3em; transform: scale(1, 0.9);*/ text-align: left; /*Caveat:400,700|Kalam:300,400*/ /*Shadows+Into+Light|Shadows+Into+Light+Two" r*/ /* font-weight: 400; font-size: 4rem; margin-top: 0; padding-bottom: .1em; line-height: 75%;*/ /*margin-top: -.5em;*/ /*margin-left: -.1em;*//* für CAVEAT */ /*letter-spacing: -.05em;*/ /* für CAVEAT */ margin-bottom: .5em; } #inhalt .teaserText h3 {/* um spezifität zu erhöhen */ margin-top: 0; letter-spacing: 0.1em; } .teaserHolderGross .teaserText h4 { text-align: center; } body.newsandtrends .teaserText h3 { /* muss noch richtig gemacht werden */ font-size: 3rem; line-height: .8em; } #inhalt .teaserHolderGross .teaserText h3 { text-align: center; margin-bottom: .5em; } .teaserText p { font-size: 1.2rem; } .tapetenSeite .teaserText p a:link {} .tapetenSeite .teaserText p a:visited {} .tapetenSeite .teaserText p a:hover { text-decoration: none; } .tapetenSeite .teaserText p a:focus { color: #000;} .tapetenSeite .teaserText p a:active { color: #000;} .tapetenSeite .teaserText p a { color: #000; text-decoration: underline; } #inhalt .teaserHolder .teaserText p.datum { font-size: .8rem; text-align: right; margin-bottom: .5em; font-weight: 300; } #options { margin-bottom: 2em; } /* https://codepen.io/alvarotrigo/pen/jOZOzoq */ .styledCheck { position: relative; /* padding: 0px 20px 0px 20px; text-align: left;*/ display: inline-block; /*font-size: 1.1em;*/ } .styledCheck label { cursor: pointer; /*padding: 0 0 2px 0;*/ color: #999; padding: 3px 5px 3px 5px ; border: 1px solid #999; border-radius: 10%; margin: 0 3px; /* -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; */ } /*.styledCheck label:hover{ color: #000; border-color: #000; }*/ .styledCheck input[type=radio], .styledCheck input[type=checkbox] { position: absolute; top: 0; left: -9999px; visibility: hidden; } .styledCheck input[type=radio]:checked + label:after, .styledCheck input[type=checkbox]:checked + label:after { transform: translate3d(0, 0, 0); opacity: 1; } .styledCheck input[type=radio]:checked + label, .styledCheck input[type=checkbox]:checked + label, .styledCheck label:hover { /*text-decoration: underline;*/ /*border-bottom: 1px solid #333;*/ /*background-color: red;*/ border-color: #000; color: #000; padding: 5px 5px 5px 5px; } ul.galerieHolder { margin-bottom: 0; } li.galerie { position: relative; /*evtl. wegen position:absolute von itemInfo - Preis*/ box-sizing: border-box; /*border: 5px solid #fff;*/ /*width: 20%; /*33.33%*/ width: 22%; /* 142*/ height: auto; margin: 1.5%; /* 5 */ display: inline-block; /* prozentuale angabe besser, da skalierbar. margin in % plus width in % muss immer 100 geben hier 5er raster, d.h. pro thumb 2*.5% margin seitlich, macht pro thumb 1% margin. bei 5 thumbs 5%. es bleiben also 100- 5 = 95% für 5 thumbs. macht (95/5) 19% width pro thumb */ /*flex-grow: 1;*/ /* default 0 */ } li.galerieKlein { width: 18%; /* 142*/ margin: 1%; /* 5 */ } li.galerie a:link {} li.galerie a:visited {} li.galerie a:hover { /* padding: 0px !important; border:0 !important;*/ } li.galerie a:focus { color: #000;} li.galerie a:active { color: #000;} li.galerie a { display: block; overflow: hidden; /* für a:hover img -> scale */ padding: 0px !important; border: 0 !important; /* margin: 1px;*/ } li.galerie img { width: 100%; height: auto; } /* GrayScale */ li.galerie a img { /* -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);*/ -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; /*filter: grayscale(100%);*/ } li.galerie a:hover img { /* -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%);*/ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); /*filter: grayscale(0%);*/ } .galerieItemInfo { /*background-color: green;*/ font-size: .9rem; margin: .5em 0 4em 0 ; text-align: right; line-height: 1.2em; } .galerieItemInfo2 { right: 0; /* background-color: green; */ font-size: 1rem; POSITION: ABSOLUTE; /* margin-top: 0.5em; */ bottom: 0; text-align: right; padding: 0 1em; /* line-height: .9em; */ margin: 0; background-color: rgb(255 255 255 / 63%); } .mitarbeiterContainer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .mitarbeiterHolder { width: 47%; display: inline-block; /*margin-bottom: 2rem;*/ } .miHoMitte { width: 64%; margin: 0 auto; display: block; margin-bottom: 2em; } /*.miHoRechts { margin-left: 2%; } .miHoLinks { margin-right: 2%; }*/ /*.mitarbeiter { position: relative; font-size: 100%; padding-left: 160px; padding-right: 5px; margin-bottom: 3em; height: 200px; width: 50%; width: inherit; display: table-cell; vertical-align: middle; border-radius: 10px; }*/ .mitarbeiter { position: relative; font-size: 100%; padding-left: 160px; padding-right: 5px; margin-bottom: 3em; min-height: 200px; width: 50%; width: inherit; width: auto; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; border-radius: 10px; } .mitarbeiter .passbildHolder { position: absolute; top: 0; left: 0; height: 200px; } .mitarbeiter .passbildHolder img { height: 100%; /*float: left;*/ border-radius: 10px; } h4.mitarbeiterHead { display: block; margin-bottom: 1em; } .mitarbeiter h4 { text-align: left; font-size: 1.8rem; margin-bottom: .5rem; letter-spacing: 0.15rem; line-height: 1em; } #inhalt .mitarbeiter p.mitarbeiterName { font-size: 1.3rem; margin: 0; } #inhalt .mitarbeiter p.mitarbeiterFunktion { font-size: 1rem; padding-bottom: .5em; margin: 0; } /*******************************************/ /* #portfolio h3 { margin-bottom: 0 } */ .linkOffset { border: 0!important; } .aaaschaumstoffItem { /*background-image: url(../pix/papierBGR.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;*/ /*margin-top: 1rem;*/ /*border-bottom: 1px solid #333;*/ padding: 1rem; padding-right: 0; } body.aaaschaumstoffSeite .schaumstoffItem:nth-of-type(odd) { background-color: rgba(0,0,0, .2); } body.aaaschaumstoffSeite .schaumstoffItem:nth-of-type(even) { background-color: rgba(255,255,255, .6); } .aaaschaumstoffItem p.raumgewicht { width: 150px; float: left; margin-left: 0; } body.aaaschaumstoffSeite h5, body.aaakontaktSeite h5, body.aaakontaktSeite .wieH5 { margin-top: 3rem; color: #333; text-transform: none; font-family: 'Shadows Into Light Two', cursive; text-align: left; font-weight: 400; font-size: 3rem; /*'Shadows Into Light Two' 3rem*/ padding-bottom: .5em;/*'Shadows Into Light Two' .6em*/ line-height: 75%; /*margin-top: -.5em;*/ letter-spacing: -.05em; /* für CAVEAT */ margin-left: -.2em; padding-left: 0; } .aaaschaumstoffItem h6 { color: #333; text-transform: none; font-family: 'Shadows Into Light Two', cursive; text-align: left; font-weight: 400; font-size: 2.5rem; /*'Shadows Into Light Two' 3rem*/ padding-bottom: .1em;/*'Shadows Into Light Two' .6em*/ line-height: 75%; /*margin-top: -.5em;*/ letter-spacing: -.05em; /* für CAVEAT */ } .aaaschaumstoffItem h6 span { float: left; font-size: 70%; line-height: .9em; /*display: inline-block;*/ width: 150px; } .aaaschaumstoffItem p { margin-left: 160px; margin-bottom: 0; } .aaafuellmaterialItem p { margin-left: 5px; } body.aaaschaumstoffSeite .fliesstext ul { list-style-type: square; margin-left: 1em; } /*body.schaumstoffSeite .fliesstext table { display: table; border-collapse: separate; border-spacing: 2px; border-color: grey; } body.schaumstoffSeite .fliesstext table, body.schaumstoffSeite .fliesstext tr, body.schaumstoffSeite .fliesstext td { margin: 0; padding: 0; border: 0; border-collapse: collapse; border-spacing: 0; }*/ body.aaaschaumstoffSeite .fliesstext table, tr, td { margin: 0; padding: 0; border: 0; border-collapse: collapse; border-spacing: 0; } body.aaaschaumstoffSeite .fliesstext table thead { background-color: rgba(0,0,0, .3); border-bottom: 1px solid #000; } body.aaaschaumstoffSeite .fliesstext table tr td, body.aaaschaumstoffSeite .fliesstext table tr th { border-right: 1px solid #000; width: 100px; padding: .5rem; } body.aaaschaumstoffSeite .fliesstext table tr:nth-of-type(even) { background-color: rgba(0,0,0, .2); } body.aaaschaumstoffSeite .fliesstext table tr th:nth-of-type(even), body.aaaschaumstoffSeite .fliesstext table tr td:nth-of-type(even) { border-right: 0; width: 200px; } body.aaaschaumstoffSeite .nachOben { margin-bottom: -1rem; } .subNavi a.linkOffset, .zeile #portfolio.fliesstext .linkOffset, #inhalt .galerieHolder a.linkOffset, #kontakt a.linkOffset { /* "#inhalt" wichtig um spezifizität zu erhönen. sonst werden eigenschaften durch "#inhalt a" überschrieben */ border: 0!important; padding: 0; border: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; padding-top: 130px;/*85*/ margin-top: -130px;/*-85*/ /*-40*/ position: relative; display: block; visibility: hidden; } /* ==== Anfang footer ====================================*/ #footer { position: relative; /*width: 100%;*/ /*height: 500px;*/ padding-top: 50px; padding-bottom: 50px; padding: 3rem 2rem; background-color: #a0a8a1; background-color: #ccc; background-color: #ddd; /*background-color: #e6e6e6;*/ /*background-size: auto 50%;*/ /* background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url(../pix/bgr.jpg);*/ } #footerInhalt { max-width: 960px; /* margin: auto; height: auto;*/ } #footerInhalt h2 { position: absolute; /*top: 35px;*/ top: 0; left: 0; /*text-align: left; margin-bottom: 20rem*/ } #footerInhalt h2>img { /* position: absolute; top: 0; left: 0;*/ float: left; width: 320px; margin: auto; height: auto; } #footerInhalt #footerLogo { margin-bottom: 2rem; margin-bottom: 4rem; /*margin-left: 200px;*/ margin-top: 7px; /*border-bottom: 2px solid #000;*/ text-align: right; } #footerInhalt #footerLogo img { width: 75px; height: auto; margin-bottom: 5px; margin-right: 5px; } #footerInhalt p { /* font-family: Verdana, Arial, Helvetica, sans-serif;*/ /*font-family: 'Lato', Arial, sans-serif;*/ font-family: 'Urbanist', sans-serif; /*font-family: 'Montserrat', Arial, sans-serif;*/ /* font-size: .9rem;*/ /* 125 % bei SpecialEliteRegular*/ font-size: .95rem; letter-spacing: .12em; font-weight: 200; text-transform: uppercase; color: #ddd; line-height: 1.3em; word-spacing: .1em; /*transform: scale(1, .9);*/ } #footerInhalt a:link, #footerInhalt a:visited, #footerInhalt a:active { color: #ddd; text-decoration: none; outline: none;/* outline entfernt beim klicken den gepunkteten rahmen um den link*/ } #footerInhalt a:hover, #footerInhalt a:focus { text-decoration: underline; } #footerInhalt p.oeffnungszeiten span { float: left; } #footerInhalt p.adresse span/*, body.kontaktSeite #inhalt span */{ float: left; /*margin-right: 1rem;*/ padding-left: 25px; background-size: contain; /*background-size: auto 50%;*/ background-repeat: no-repeat; background-position: left top; margin-right: 1em; } #footerInhalt p.adresse span.whatsapp, body.kontaktSeite span.whatsapp { background-image: url(../pix/iconWhatsappDDD.png); background-repeat: no-repeat; } body.kontaktSeite #inhalt span.web, body.kontaktSeite #inhalt span.mail, body.kontaktSeite #inhalt span.fon, body.kontaktSeite #inhalt span.fax, body.kontaktSeite #inhalt span.place{ padding-left: 35px; background-size: contain; background-repeat: no-repeat; background-position: left top; } body.kontaktSeite .adresseFliesstext { font-size: 1.3em; } body.kontaktSeite span.oeffnungszeitenFliesstext { width: 12em; padding: 0; } body.kontaktSeite table#oeffnungszeiten { font-size: 1.2rem; word-spacing: .1rem; } body.kontaktSeite table#oeffnungszeiten td.tage { /*width: auto;*/ text-align: right; padding-right: 1em; } body.kontaktSeite table#oeffnungszeiten td.uhrzeit { text-align: left; } #footerInhalt p.adresse span.fon, body.kontaktSeite span.fon { /* symbole fuer telefon / fax / mail im footer */ background-image: url(../pix/iconPhoneDDD.png); background-repeat: no-repeat; } #footerInhalt p.adresse span.fax, body.kontaktSeite span.fax {/* symbole fuer telefon / fax / mail im footer */ background-image: url(../pix/iconFaxBlk.png); background-repeat: no-repeat; } #footerInhalt p.adresse span.mail, body.kontaktSeite span.mail {/* symbole fuer telefon / fax / mail im footer */ background-image: url(../pix/iconMailDDD.png); background-repeat: no-repeat; } #footerInhalt p.adresse span.web, body.kontaktSeite span.web {/* symbole fuer telefon / fax / mail im footer */ background-image: url(../pix/iconWebBlk.png); background-repeat: no-repeat; } #footerInhalt p.adresse span.place, body.kontaktSeite span.place {/* symbole fuer telefon / fax / mail im footer */ background-image: url(../pix/iconPlaceBlk.png); background-repeat: no-repeat; } #footerInhalt p.adresse { float: right; text-align: right; } #footerInhalt p.oeffnungszeiten { /* float: left;*/ position: absolute; left: 0; bottom: 0; text-align: right; } #footerInhalt p.oeffnungszeiten span.unterstrichenRahmen { border-bottom: 1px solid #ddd; } #footerInhalt p.oeffnungszeiten span#oeffnungszeitenAB { } #footerInhalt p.oeffnungszeiten span#terminvereinbarung { /*font-size: .9em;*/ width: 20em; /* ex 24*/ margin-right: 0; text-align: left; margin-top: .6em; hyphens: auto; } /* ==== Ende footer ====================================*/ #subFooter { position: relative; z-index: 10; height: 2rem; background-color: #333; background-color: #202020; background-color: #000; color: #ddd; /* font-size: .8rem; font-weight: 300;*/ margin: 0; padding: 0; border-top: 1px solid #ddd; } #subFooter p { position: absolute; display: block; top: 0; /*transform: translateY(-50%);*/ width: 100%; height: 2rem; margin: 0; /*margin-top: -.5rem;*/ padding-top: .5em; /*font-family: 'Montserrat', Arial, sans-serif; */ font-family: 'Urbanist', sans-serif; font-size: .9rem; /* 125 % bei SpecialEliteRegular*/ letter-spacing: .12em; font-weight: 200; text-transform: uppercase; /*color: #fff;*/ /* font-size: 1rem; font-weight: 300; letter-spacing: .06rem;*/ text-align: center; vertical-align: center; box-sizing: border-box; /*transform: scale(1, .9);*/ } #subFooter span.floatLeft, #subFooter span.floatRight { margin: 0 2em; } #subFooter a:link { color: #ddd;} #subFooter a:visited { color: #ddd;} #subFooter a:hover { color: #ddd; text-decoration: underline; } #subFooter a:focus { color: #ddd;} #subFooter a:active { color: #ddd;} #subFooter a { color: #ddd; outline: none;/* outline entfernt beim klicken den gepunkteten rahmen um den link*/ } /***************************************** impressum / Datenschutz *****************************************/ #impressum .fliesstext p { text-align: center; } #impressum a:link, #datenschutz a:link { text-decoration: underline; color: #000;} #impressum a:visited, #datenschutz a:visited { color: #000;} #impressum a:hover, #impressum a:focus, #datenschutz a:hover, #datenschutz a:focus { text-decoration: none;} #impressum a:active, #datenschutz a:active { color: #000;} #impressum a, #datenschutz a { text-decoration: underline; outline: none;}/* outline entfernt beim klicken den gepunkteten rahmen um den link*/ #nachOben { position: absolute; position: fixed; z-index: 9658; bottom: 50px; right: 50px; } #nachOben a img { width: 60px; height: auto; } #inhalt #nachOben a:link { } #inhalt #nachOben a:visited { } #inhalt #nachOben a:hover { border-bottom: none; padding-bottom: 0; } #inhalt #nachOben a:focus { } #inhalt #nachOben a:active { } #inhalt #nachOben a { padding: 0; border-bottom: none; outline: none;/* outline entfernt beim klicken den gepunkteten rahmen um den link*/ -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /*body.impressumSeite .fliesstext, body.datenschutzSeite .fliesstext { padding-top: 9rem; } */ body.impressumSeite h2, body.datenschutzSeite h2 { font-size: 2.5rem; } body.impressumSeite h3, body.datenschutzSeite h3 { font-size: 1.4rem; text-align: left; text-transform: none; font-weight: 400; margin-bottom: .5em; } body.impressumSeite h4, body.datenschutzSeite h4 { font-size: 1.2rem; text-align: left; text-transform: none; font-weight: 400; margin-bottom: .5em; } body.impressumSeite h5, body.datenschutzSeite h5 { /*font-size: 1.1rem;*/ text-align: left; text-transform: none; font-weight: 400; margin-bottom: .5em; } /* background-position fixed in IE 10+ abschalten weil scroll bug */ /* http://www.impressivewebs.com/ie10-css-hacks/ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .held { background-attachment: scroll !important; } } /*======================================================== 3. media query ========================================================*/ /*breiter als 1800 px*/ @media only screen and (min-width: 1800px) { /*881 1000*/ #heroHolder { padding-top: 35%; background-position: 50% 40%; } } @media only screen and (min-width: 0px) and (max-width: 980px) { /*881 1000*/ #slideshowHolder.normalSlideshow, #heroHolder { padding-top: 50%; background-position: 50% -90%; } .subNavi li { font-size: 1.1rem; margin: 0 .1rem; } .subNavi li.breaker { display: block; } .mitarbeiterHolder { width: 421px; } .mitarbeiterContainer { flex-direction: column; align-items: center; flex-wrap: nowrap; } .miHoMitte { /* margin: 0 auto; */ margin: 0; } /* body.sitzenundliegenSeite .subNavi li ul#sitzenUndLiegenSub, body.tapetenSeite .subNavi li ul#tapetenSub, body.schaumstoffSeite .subNavi li ul#schaumstoffSub { display: block; left: 0; top: 3em; background-color: #ccc; padding: 1rem 5rem; margin-left: -5rem; } */ } @media only screen and (min-width: 0px) and (max-width: 920px) { /*881 1000*/ #contactSpalteWrapper { margin-top: -4px; } #contactBar #contactBarInner .contactSpalte { float: none; display: inline; } #contactSpalte2 { padding-right: 0; } .subNavi li a { /* check 4 m.hock ob nötig*/ /* !WICHTIG sonst geht bei machen iphones 6/7 scroll von Industry-submenue zu unterpunkten (produktion/storrsge ...etc.) nicht*/ -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /* #logo, #rightEnd { display: none; }*/ #logoHolder { float: none; width: initial; } #logo h1 { display: block; } #logo #socialHolder { display: block; } .teaserHolder .teaserWrapper { padding: 0 15%; } .teaserImage { width: 50%; } .teaserText { width: 100%; float: right; margin-top: 3rem; padding: 0; } .teaserText h3 { text-align: center; margin-bottom: .5em; } body.alternate .teaserLink:nth-of-type(odd) .teaserImage, body.alternate .teaserHolder:nth-of-type(odd) .teaserImage { float: initial; transform: rotate(-2deg); margin: 0 auto; } body.alternate .teaserLink:nth-of-type(even) .teaserImage, body.alternate .teaserHolder:nth-of-type(even) .teaserImage { float: initial; transform: rotate(2deg); margin: 0 auto; } body.alternate .teaserLink:nth-of-type(odd) .teaserText, body.alternate .teaserHolder:nth-of-type(odd) .teaserText { float: right; padding-left: 0; padding-right: 0; } body.alternate .teaserLink:nth-of-type(even) .teaserText, body.alternate .teaserHolder:nth-of-type(even) .teaserText { float: left; padding-right: 0; padding-left: 0; } } @media only screen and (min-width: 0px) and (max-width: 760px) { /*881 1000*/ #heroHolder { padding-top: 70%; background-position: 50% -90%; margin: 140px auto 0 auto; } li.galerie { width: 32.3333%; margin: .5%; } #footerInhalt h2 { position: relative; top: initial; left: initial; margin-bottom: 0; } #footerInhalt h2>img { float: none; width: 200px; width: 80%; height: auto; } #footerInhalt #footerLogo { margin-bottom: 2rem; margin-left: 0; text-align: center; border: 0; } #footerInhalt #footerLogo img { /*margin-right: 20px;*/ /* optisch zentriert */ margin: 0; width: 150px; width: 20%; height: auto; } #footerInhalt p.adresse { float: none; text-align: left; text-align: center; } #footerInhalt p.adresse span { float: none; margin-right: 1em; } #footerInhalt p.oeffnungszeiten { position: relative; float: none; left: initial; bottom: initial; text-align: center; margin-top: 3em; } #footerInhalt p.oeffnungszeiten span.unterstrichen { margin-right: 0; } #footerInhalt p.oeffnungszeiten span { float: none; margin-right: 1em; } #footerInhalt p.oeffnungszeiten span.unterstrichenRahmen { margin-right: 0; } } @media only screen and (min-width: 0px) and (max-width: 600px) { /*881 1000*/ #header { /* position: fixed; top: 0;*/ width: 100%; height: 160px; } #logo { height: 120px; } #topLogo { height: 70px; } h1 #logoClaim { /*font-size: 1.1rem;*/ font-size: .9rem; transform: translateY(-6px); } #naviBottom ul { display: none; } .styled-select { display: block; left: 50%; /* right: 20px;*/ top: 8px; margin-left: -71px; } XXXXX#header.fixed #naviHolder .styled-select, XXXXbody.portfolioSeite #naviHolder .styled-select, XXXXbody.impressumSeite #naviHolder .styled-select, XXXXbody.datenschutzSeite #naviHolder .styled-select { display: block; /*left: 50%;*/ left: initial; right: 20px; top: 8px; /*margin-left: -71px;*/ } #slideshowHolder.normalSlideshow, #heroHolder { padding-top: 80%; } #heroHolder { /*padding-top: 120%;*/ background-position: 50% -90%; margin: 80px auto 0 auto; } #heroHolder.scrollHeroHolder { margin: 80px auto 0 auto !important; } #slideshow #slideLogo { margin-top: -110px; } #slideshow #slideLogo h1 { font-size: 1.8rem; } #zurueckHolder img { margin-top: -19px; } #vorHolder img { margin-top: -19px; } .subNavi li a { /* !WICHTIG sonst geht bei machen iphones 6/7 scroll von Industry-submenue zu unterpunkten (produktion/storrsge ...etc.) nicht*/ -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } li.galerie { width: 49%; margin: .5%; } .teaserImage { width: 70%; } #subFooter { height: 4rem; } #subFooter p { position: relative; top: initial; height: 4rem; } #subFooter span.floatLeft, #subFooter span.floatRight { display: block; float: initial; margin: 0 2em; margin-top: .5em; } #subFooter span.floatLeft { margin-top: .5em; } #socialHolder { top: 10px; } } @media only screen and (min-height: 0px) and (max-width: 480px) { /*881 1000*/ #contactBar { height: 60px; height: 80px; } #contactBar #contactBarInner .contactSpalte span.trenner { display: none; } #contactSpalteWrapper { /*margin-top: 13px;*/ } #contactBar #contactBarInner #contactSpalte1 { padding-right: 5px; } #contactBar #contactBarInner .contactSpalte span { display: block; text-align: center; } #header { top: 60px; top: 80px; } a.terminvereinbarung { width: initial; } #socialHolder { max-width: 100px; text-align: right; right: 10px; } #socialHolder a img { margin-left: 5px; margin-bottom: 2px; } #slideshow #slideLogo { width: 200px; margin-left: -100px; margin-top: -60px; /* viewport ist von oben 100px + 40px kleiner wegen navi und contactbar */ } .indexSeite #inhalt h2 { font-size: 2rem; } .mitarbeiterHolder { width: 90%; } .mitarbeiter { padding-top: 220px; /* höhe von passbild +20 px*/ padding-left: 5px; min-height: initial; justify-content: flex-end; } .mitarbeiter .passbildHolder { width: 100%; } .mitarbeiter .passbildHolder img { border-top-right-radius: 0; border-top-left-radius: 0; } .mitarbeiter h4 { text-align: center; font-size: 1.5rem; } #inhalt .mitarbeiter p.mitarbeiterName, #inhalt .mitarbeiter p.mitarbeiterFunktion { text-align: center; } } @media only screen and (min-height: 0px) and (max-width: 350px) { /*881 1000*/ #contactBar { height: 75px; } #contactSpalteWrapper { /*margin-top: 13px;*/ } #header { top: 75px; } #slideshow #slideLogo { display: none; } #slideshowHolder.normalSlideshow { padding-top: 140px; } #slideshowHolder.normalSlideshow #slideshow { display: none; /*padding-top: 140px;*/ } /* #heroHolder { background-image: none !important; padding-top: 140px; }*/ #footerInhalt p.adresse span { margin-right: .3em; } /* #held .fliesstext { position: absolute; top: 40%; } #held .nachUnten img { width: 60px; } */ } @media only screen and (min-width: 0px) and (max-width: 300px) { /*881 1000*/ #subFooter span.floatLeft, #subFooter span.floatRight { margin: 0; } } /* PSICOs ND */