/*======================================================== TH 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/y.png'); } body { background-color: #fff; color: #000; /*font-family: 'Josefin Sans', sans-serif;*/ font-family: "Montserrat", sans-serif; font-optical-sizing: auto; /*font-family: 'Muli', Arial, sans-serif;*/ /*font-family: 'Urbanist', sans-serif;*/ font-weight: 400; /* 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: 700; 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%*/ h2::after, h2::before { content: " "; margin: .2em 0; background-image: url(../pix/barkeRot.png); display: block; width: 100%; height: 30px; background-repeat: repeat-x; background-size: contain; } #footer h2::after, #footer h2::before { display: none; } h3 { font-size: 1.5rem; margin-bottom: 0em; text-transform: uppercase; text-align: center; } /* ca. 18px */ h3 { margin-bottom: .5em; margin-top: 1.5em; text-transform: uppercase; font-size: 2rem; font-weight: 700; text-align: center; } /* ca. 20px 120%*/ hhhh3::after{ content: " "; margin: .2em 0; background-image: url(../pix/barkeRot.png); display: block; width: 100%; height: 30px; background-repeat: repeat-x; background-size: contain; } h4, h5 { font-size: 1.05rem; margin-bottom: .5em; margin-top: 1.5em; /*text-transform: uppercase;*/ font-size: 1.5rem; font-weight: 100; font-weight: 300; text-align: left; text-decoration: underline; } /* ca. 20px 120%*/ h5 { text-decoration: none; margin-top: .5em; } h6 { font-size: 1.02rem; } /* ca. 14px */ ol, ul { list-style: none outside none; } ul.bulletListe { list-style: none outside disc; padding-left: 1em; } 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: 1.4rem; /*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; } .gross { font-size: 1.5rem; } .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); } .schattenInset { -moz-box-shadow: inset 0 0 40px 5px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 40px 5px rgba(0,0,0,0.3); box-shadow: inset 0 0 40px 5px rgba(0,0,0,0.3); } .boxSchatten { -webkit-filter: drop-shadow(0px 0px 12px rgba(0,0,0, .4)); filter: drop-shadow(0px 0px 12px rgba(0,0,0, .4)); } .floatLeft { float: left; } .floatRight { float: right; } .sand { background-color: #ffe2a8; background-color: #d7c4ad; background-color: #d0bca4; /* ohne absprache geänder etwas dkler und etwas entsäätigt*/ background-color: #d2c1ac; /* ohne absprache geänder etwas dkler und etwas entsäätigt*/ background-color: #dacdc1; /*vorschlag: #cfbcaa;*/ } .sandSchatten { -webkit-filter: drop-shadow(0px 0px 23px rgba(0,0,0,0.3)); filter: drop-shadow(0px 0px 23px rgba(0,0,0,0.3)); } /* 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 { font-weight: 500; float: left; font-size: 4.4rem; line-height: 0.65; margin: 0.2em 0.1em 0.1em 0; margin: 0.1em 0.0em 0.1em 0; margin: 0.1em 0.05em 0.1em 0; } /*======================================================== 2. DIV-Bereiche ========================================================*/ #contactBar { z-index: 950; position: relative; height: 40px; text-align: center; background-color: #cccc11; background-image: url(../pix/barkeGelb.png); background-size: contain; background-repeat: repeat-x; } #contactBarInner { width: auto; height: 100%; /* max-width: 960px; */ margin: 0 auto; /* position: absolute; */ /* top: 50%; left: 50%;*/ /* transform: translate(-50%, -50%); */ text-align: center; /* backdrop-filter: blur(18px); */ background-color: rgb(255 221 0 / 54%); display: inline-block; padding: 0 30px; border-radius: 42px; backdrop-filter: blur(10px); } } #contactSpalteWrapper { /*display: inline-block;*/ } .contactSpalte { padding: 0 30px; margin: 5px 0; background-size: contain; background-repeat: no-repeat; background-position: left top; font-size: 1.2rem; color: #aaa; color: #ddd; font-weight: 600; display: inline-block; text-transform: uppercase; } .contactSpalte a:link { } .contactSpalte a:visited { } .contactSpalte a:hover { text-decoration: underline; } .contactSpalte a:focus { } .contactSpalte a:active { } .contactSpalte a { color: #000; text-decoration: none; } #contactSpalte1 { /*float: left;*/ background-image: url("../pix/iconPhoneBlk.png"); } #contactSpalte2 { /*float: left;*/ background-image: url("../pix/iconMailBlk.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: 100px; background-color: rgba(255,255,255,1); } #header.scrollHeaderS { /*height: 120px;*/ height: 100px; } #header.fixed { position: fixed; top: 0; width: 100%; } #menueHolder { position: absolute; /* ex RELATIVE*/ width: 100%; left: 0; top: 0; z-index: 4567456; margin-left:auto; margin-right: auto; } #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; right: 20px; top: 20px; 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: 4px; /*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);*/ /*box-shadow: 0px 0px 8px rgba(0, 0, 0, .5);*/ } #hamburgerLinie1 { top: 10px; } #hamburgerLinie2 { top: 20px; } #hamburgerLinie3 { top: 30px; } #hamburger:checked + .hamburger #hamburgerLinie1 { transform: translateY(10px) rotate(-45deg); background: #000; /*#333;*/ box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); } #hamburger:checked + .hamburger #hamburgerLinie2 { opacity: 0; } #hamburger:checked + .hamburger #hamburgerLinie3 { transform: translateY(-10px) rotate(45deg); background: #000; /*#333;*/ box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); } #menue { height: 0; /* margin-top: -3.3rem; */ /* margin-top: -67PX; */ /* padding-top: 8rem; */ /* margin-top: 100px; */ max-height: 0; overflow: hidden; background: rgba(0, 0, 0, .0); text-align: center; transition: all .3s; opacity: 0; } #menue img { height: 150px; width: auto; } #hamburger:checked + .hamburger + #menue { height: 3000px; height: 100vh; max-height: 0; max-height: 100%; background: rgba(255, 255, 255, .5); opacity: 1; backdrop-filter: blur(20px); } #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-family: 'Josefin Sans', sans-serif;*/ text-align: left; font-size: 2rem; font-weight: 700; color: #000; letter-spacing: .04em; word-spacing: -.05em; line-height: 1em; text-transform: uppercase; text-decoration: none; display: block; margin: 0 .5em; padding: .5em 0; transition: all .2s; text-align: center; } #menue ul li a:link { } #menue ul li a:visited { } #menue ul li a:hover { margin-left: 0; } #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; margin: 0 auto; } #naviHolder { box-sizing: border-box;/*ACHTUNG #header und töchter BORDER-BOX */ position: relative; 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: 180px;*/ height: 80px; 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; /*-webkit-filter: drop-shadow(2px 9px 13px rgba(0,0,0,0.5)); filter: drop-shadow(0px 0px 23px rgba(0,0,0,0.5));*/ } #topLogo.scrollTopLogoS { /*height: 90px;*/ height: 80px; } #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 {} /********************** bis hier sauber ***************************/ #slideshowHolder.fullscreenSlideshow { position: relative; margin-top: 60px; /* HEader - Conatctbar*/ width: 100%; height: 67%; } #slideshowHolder.normalSlideshow { position: relative; padding-top: 40%; /* ex 50%*/ /*height: 500px;*/ } /* nur bei header initial position relative wenn header auf fixed umgestellt wird rutscht slideshow nach oben, weil header aus dem flow raus ist. deswegen margin in höhe von #header height */ /*#header.fixed ~ #slideshowHolder.normalSlideshow { margin-top: 100px; }*/ #slideshow { z-index:0;/*-1*/ overflow: hidden; /* sonst kommt vertikaler scrollbalken bei sliding*/ } #slideshowHolder.fullscreenSlideshow #slideshow { position: absolute; position: fixed; top: 100px ;/* height - Conatctbar*/ left: 0; width: 100%; height: 67%; } #slideshowHolder.fullscreenSlideshow #slideshow.isIOS { /* bei ios kein position fixed*/ position: absolute; } #slideshowHolder.normalSlideshow #slideshow { /*height: 500px;*/ } #slideshow #slideLogo { width: 200px; /*300*/ height: auto; /* margin-right: 50px; margin-bottom: 50px;*/ position: absolute; /* bottom: 0; right: 0;*/ top: 50%; left: 50%; margin-left: -100px; /*-150*/ margin-top: -80px; /*-160*/ /* viewport ist von oben 100px + 40px kleiner wegen navi und contactbar */ z-index: 800; /*transform: rotate(-15deg);*/ } #slideshowHolder.normalSlideshow #slideshow #slideLogo { display: none; } #slideshow #slideLogo h1 { margin: 0; padding: 0; } #slideshow #slideLogo h1 img { width: 100%; height: auto; } #slideshow #slideLogo h1 span span { /* IOS indicator */ display: none; } #slideshow .slide { position: absolute; /*ex fixed*/ left: 0; top: 0; width: 100%; height: 100%; min-height: 100%; /*2check ob noetig*/ } #slideshow .slide.active { z-index: 10; opacity: 1.0; } /*für CHROME !!!! */ #slidesHolder.notIOS { /*notIOS wird bei IOS entfernt und somit keine animation auf IOS */ position: absolute; top: 0 ; left: 0; width: 100%; height: 100%; z-index:0;/*-1*/ overflow: hidden; /* sonst kommt vertikaler scrollbalken bei sliding*/ /* -moz-animation-name: dropHeader; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -moz-animation-duration: 32s; *//* abhaengig von slideshow geschwindigkeit in .js*/ /* -webkit-animation-name: dropHeader; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 32s; animation-name: dropHeader; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 32s;*/ } /*@-moz-keyframes dropHeader { 0% { -moz-transform: scale(1,1); } 50% { -moz-transform: scale(1.05,1.05); } 100% { -moz-transform: scale(1,1); } } @-webkit-keyframes dropHeader { 0% { -webkit-transform: scale(1,1); } 50% { -webkit-transform: scale(1.05,1.05); } 100% { -webkit-transform: scale(1,1); } } @keyframes dropHeader { 0% { transform: scale(1,1); } 50% { transform: scale(1.05,1.05); } 100% { transform: scale(1,1); } } */ #slideshow .slide.last-active { z-index: 9; } /*#slideshow h2 { position: absolute; top: 50%; left: 0; margin-left: 7rem; margin-top: -3.5rem; font-size: 5rem; color: #fff; background-color: #000; padding: 0 1.5rem; }*/ #slideshow .nachUnten { display: none; position: absolute; /*position: fixed; */ bottom: 10px; width: 100%; display: block; z-index: 30; text-align: center; display: none; } #slideshowHolder.normalSlideshow #slideshow .nachUnten { display: none; } #slideshow .nachUnten img { width: 70px; height: auto; } #vorHolder { display: none; position: absolute; top: 0; right: 0; height: 100%; width: 100px; z-index: 855; } #vorHolder img { width: 37px; height: 111px; position: absolute; top: 50%; margin-top: 15px; /* 54 von img und -70 weil oben die navigaionsleiste 100px + contactbar 40px hoch ist*/ left: 40px; } #slideshowHolder.normalSlideshow #vorHolder img { margin-top: -10px; } #zurueckHolder { display: none; position: absolute; top: 0; left: 0; height: 100%; width: 100px; z-index: 855; } #zurueckHolder img { width: 37px; height: 111px; position: absolute; top: 50%; margin-top: 15px; /* 54 von img und -70 weil oben die navigaionsleiste 100px + contactbar 40px hoch ist*/ right: 40px; } #slideshowHolder.normalSlideshow #zurueckHolder img { margin-top: -10px; } .held { position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-height: 100%; /*2check ob noetig*/ text-align: center; /*background-attachment: fixed;*/ background-position: center center; background-repeat: no-repeat; background-size: cover; } #held1 { background-image: url(../bilder/slider/slider01.jpg); } #held2 { background-image: url(../bilder/slider/slider02.jpg); } #held3 { background-image: url(../bilder/slider/slider03.jpg); } #held4 { background-image: url(../bilder/slider/slider04.jpg); } #held5 { background-image: url(../bilder/slider/slider05.jpg); } #held6 { background-image: url(../bilder/slider/slider06.jpg); } #heroHolder { position: relative; padding-top: 40%; /* ex 50%*/ background-position: center center; background-repeat: no-repeat; background-size: cover; } #heroHolder { position: relative; margin-top: 250px; /*max-width: 960px;*/ /*max-width: 1200px;*/ margin: 100px auto 0 auto; /* wegen schrumpfendem header bei scroll muss es weiter oben sein*/ padding-top: 36%; /* ex 42%*/ background-position: center 50%; background-repeat: no-repeat; background-size: cover; background-image: url(../bilder/held.jpg); } #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; text-align: center; z-index: 10; background-color: #fff; } #inhalt:before {/* #202020 rand oben bei inhalt*/ content:" "; display:block; width: 100%; height: 2px; } #inhalt #YorkZuelsdorfPortrait { border: 20px solid #fff; width: 220px; height: auto; margin-bottom: 1em; /*border-radius: 50%;*/ } #inhalt #heldBildHolder { width: 100%; text-align: left; margin-bottom: 1em; } #inhalt #heldBild67 { box-sizing: border-box; border: 20px solid #fff; /* margin-bottom: 3em;*/ width: 67%; height: auto; /* margin-top: 70px; border-radius: 50%;*/ } #inhalt #heldBild100 { box-sizing: border-box; /*border: 10px solid #fff;*/ /* margin-bottom: 3em;*/ width: 100%; height: auto; padding: 20px; background-image: url(../pix/barkeGelb.png); background-image: url(../pix/barkeRot.png); background-repeat: no-repeat; /* background-clip: unset; */ /* background-attachment: local; */ background-size: cover; /* margin-top: 70px; border-radius: 50%;*/ } #inhalt h2 { color: #000; text-transform: none; margin-bottom: 1em; /*font-weight: 400;*/ font-size: 3rem; /*'Shadows Into Light Two' 3rem*/ padding-bottom: .1em;/*'Shadows Into Light Two' .6em*/ /*font-weight: 100;*/ letter-spacing: .1em; text-transform: uppercase; } #inhalt h2, #inhalt h3, .teaserText h3, .teaserText h4 { letter-spacing: .2em; /*font-weight: 300;*/ text-transform: uppercase; font-size: 3rem; margin-bottom: .5em; } #inhalt h2 span { margin-top: 0; display: block;; font-size: 2rem; letter-spacing: .1em; } #inhalt h3 { font-size: 1.8rem; font-size: 2rem; margin-bottom: 1.5em; letter-spacing: .1em; } #inhalt h3 span { margin-top: .5em; display: block; font-size: 1.5rem; letter-spacing: 0.1em; } #inhalt p { /*font-family: 'Josefin Sans', sans-serif;*/ } #inhalt p.kategorieText { margin-bottom: 15rem; } .callToAction { font-family: "Saira Stencil One", sans-serif; font-weight: 400; font-style: normal; font-size: 3rem; color: #cb0301; text-transform: uppercase; transform: rotate(356deg); text-align: center; border: 10px solid #cb0301; display: inline-block; max-width: 80%; padding: 0 0.2em; border-radius: 20px; margin-bottom: 0; } .callToAction a:link { text-decoration: none; color: #cb0301;} .callToAction a:visited { color: #cb0301;} .callToAction a:hover, a:focus { text-decoration: underline;} .callToAction a:active{ color: #cb0301;} .callToAction a { text-decoration: none; outline: none; color: #cb0301;}/* outline entfernt beim klicken den gepunkteten rahmen um den link*/ .mail { display: inline-block; } .call { display: none; } #inhaltLogo { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); padding: 5px; width: 100px; height: 100px; border-radius: 50%; } .imFliesstext { text-align: center; margin: 2em 0; } .imFliesstext#inhaltLogo { position: relative; top: initial; left: initial; text-align: center; display: inline-block; transform: initial; } #inhaltLogo img { width: 75px; height: auto; transform: translateY(23%); } .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; } .absatzmarke { text-align: center; font-size: 1500%; font-weight: 100; margin-bottom: 1rem; line-height: 100%; margin: 0; } #inhaltLogo .absatzmarke img { transform: translate(0); } .zeile { position: relative; height: 100%; max-width: 720px; /*ex 960 wegen wenig text verkleinert*/ max-width: 960px; max-width: 1280px; max-width: 1260px; /* wegen barken HG von h2 */ background-color: rgba(255,255,255, .0); margin: 0px auto; text-align: center; } #inhalt #heroText { margin-top: -2px; margin-bottom: 100px; background-image: url(../pix/barkeRot.png); background-size: auto; background-repeat: repeat-x; } #inhalt #heroText p { display: inline-block; color: #000; font-weight: 700; /*font-family: 'Shadows Into Light Two', cursive;*/ font-size: 2.5rem; word-spacing: 0; padding: 0.4em 1.4em; margin-bottom: 0; text-transform: uppercase; } #heroText p span { font-size: 2rem; display: inline-block; width: 100%; text-align: right; } .teaserHolder { margin-bottom: 3rem; } .homestyleSeite.alternate .teaserHolder, .newsSeite.alternate .teaserHolder{ margin-bottom: 5rem; } .teaserHolderGross .teaserWrapper { padding: 0 15%; } #options { margin-bottom: 2em; } /* https://codepen.io/alvarotrigo/pen/jOZOzoq */ /*******************************************/ .linkOffset { border: 0 !important; padding: 0; border: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; padding-top: 120px; margin-top: -120px; position: relative; display: block; visibility: hidden; } 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*/ margin: 1.5%; /* 5 */ height: auto; width: 23%; /* 142*/ margin: 1%; /* 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.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;*/ border: 10px solid #fff; /* 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; font-weight: 500; margin: .5em 0 1em 0 ; text-align: right; padding: 0 1em; 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%); } /* ==== Anfang footer ====================================*/ #footer { position: relative; /* padding-top: 50px; padding-bottom: 50px; padding: 3rem 2rem;*/ background-color: #a0a8a1; background-color: #ccc; background-color: #ddd; background-color: #333; background-color: #fff; margin-top: -2px; background-image: url(../pix/barkeRot.png); background-size: auto; background-repeat: repeat-x; } .footerBlur { width: 100%; height: 100%; padding: 2rem 2rem; box-sizing: border-box; /*backdrop-filter: blur(10px);*/ } #footerInhalt { max-width: 960px; /* margin: auto; height: auto;*/ } #footerInhalt #footerLogo { position: absolute; /*top: 35px;*/ /* top: 0;*/ left: 0; /*text-align: left; margin-bottom: 20rem*/ top: 50%; left: 0; transform: translateY(-50%); } #footerInhalt #footerLogo>img { /* position: absolute; top: 0; left: 0;*/ float: left; width: 320px; margin: auto; height: auto; padding: 20px; background-color: #fff; } #fffffffooterInhalt #footerLogo { margin-bottom: 2rem; /*margin-left: 200px;*/ margin-top: 7px; /*border-bottom: 2px solid #000;*/ text-align: right; } #ffffffooterInhalt #footerLogo img { width: 75px; height: auto; margin-bottom: 5px; margin-right: 5px; } #footerInhalt p { /*font-family: 'Josefin Sans', sans-serif;*/ font-size: .95rem; font-size: 1.1rem; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; color: #000; line-height: 1.3em; word-spacing: .1em; } #footerInhalt a:link, #footerInhalt a:visited, #footerInhalt a:active { color: #000; 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 { float: right; text-align: right; background: rgba(255,255,255,1); padding: 1em; } #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; background-color: #333; /* font-size: .8rem; font-weight: 300;*/ margin: 0; padding: 0; border-top: 1px solid #ddd; } #subFooter p { /* position: absolute; display: block; top: 0;*/ position: relative; display: block; max-width: 1024px; margin: 0 auto; /* top: 0;*/ /*transform: translateY(-50%);*/ width: 100%; height: 2rem; /*margin: 0;*/ /*margin-top: -.5rem;*/ padding-top: .5em; /*font-family: 'Josefin Sans', sans-serif;*/ font-size: .9rem; /* 125 % bei SpecialEliteRegular*/ letter-spacing: .12em; font-weight: 700; text-transform: uppercase; text-align: center; vertical-align: center; box-sizing: border-box; } #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: 10rem; } body.impressumSeite #menueHolder, body.datenschutzSeite #menueHolder { display: none; } body.impressumSeite h2, body.datenschutzSeite h2 { font-size: 2.5rem; } body.impressumSeite h3, body.datenschutzSeite h3 { font-size: 1.8rem; text-align: left; text-transform: none; font-weight: 400; margin-bottom: .5em; } body.impressumSeite h4, body.datenschutzSeite h4 { font-size: 1.6rem; 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; font-weight: 600; } .datenschutzSeite .zeile ul, #impressumSeite .zeile ul { list-style: none outside disc; padding-left: 1em; /*font-size: 1rem;*/ word-spacing: .1rem; text-align: left; margin-bottom: 1em; line-height: 1.375; } /* 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; } } @media (max-aspect-ratio: 7/8){ .mail { display: none; } .call { display: inline-block; } } /*======================================================== 3. media query ========================================================*/ @media only screen and (min-width: 0px) and (max-width: 980px) { /*881 1000*/ #slideshowHolder.normalSlideshow, #heroHolder { padding-top: 50%; } } @media only screen and (min-width: 0px) and (max-width: 920px) { /*881 1000*/ #contactSpalteWrapper { /*margin-top: -4px;*/ /*????*/ } #contactBar #contactBarInner .contactSpalte { /* float: none; display: inline;*/ } #logoHolder { float: none; width: initial; } #logo h1 { display: block; } #logo #socialHolder { display: block; } .teaserHolder .teaserWrapper { padding: 0 15%; } .teaserImage { width: 100%; } .teaserText { width: 100%; float: right; margin-top: 3rem; padding: 0; } .teaserText h3 { text-align: center; margin-bottom: .5em; } li.galerie { width: 31.333333%; } } @media only screen and (min-width: 0px) and (max-width: 800px) { /* 760 881 1000*/ #header { width: 100%; height: 100px; } #logo { height: 100px; } #inhalt #heroText p { font-size: 2rem; } #inhalt #praxisraum { width: 100%; box-sizing: border-box; } .callToAction { line-height: 1em; } #footer { background-size: cover; } #footerInhalt #footerLogo { position: relative; top: initial; left: initial; margin-bottom: 1em; transform: translateY(0); } #footerInhalt #footerLogo>img { box-sizing: border-box; float: none; width: 200px; width: 100%; height: auto; display: block; margin: 0 auto; } #footerInhalt p.adresse { float: none; text-align: left; text-align: center; } #footerInhalt p.adresse span { display: block; float: none; margin-right: 1em; } #footerInhalt p.adresse span.mail { margin-top: .5em; } } @media only screen and (min-width: 0px) and (max-width: 600px) { /*881 1000*/ #inhalt h2, .teaserText h3, .teaserText h4 { font-size: 2rem; } #naviBottom ul { display: none; } .styled-select { display: block; left: 50%; /* right: 20px;*/ top: 8px; margin-left: -71px; } #slideshowHolder.normalSlideshow, #heroHolder { padding-top: 80%; } #slideshow #slideLogo { margin-top: -110px; } #slideshow #slideLogo h1 { font-size: 1.8rem; } #zurueckHolder img { margin-top: -19px; } #vorHolder img { margin-top: -19px; } li.galerie { width: 48%; } #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; } } @media only screen and (min-height: 0px) and (max-width: 500px) { /*881 1000*/ #contactBar { height: 60px; } .contactSpalte { margin: 2px 0; display: block; } #contactSpalteWrapper { /*margin-top: 13px;*/ } #contactBar #contactBarInner .contactSpalte span { display: block; text-align: center; } #header { top: 60px; height: 90px; } #logoHolder { text-align: left; padding-left: 20px; } #topLogo { height: 70px; } label.hamburger { right: 10px; } #slideshow #slideLogo { width: 200px; margin-left: -100px; margin-top: -60px; /* viewport ist von oben 100px + 40px kleiner wegen navi und contactbar */ } #slideshowHolder.fullscreenSlideshow { margin-top: 40px; } } @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; } } @media only screen and (min-width: 0px) and (max-width: 300px) { /*881 1000*/ #subFooter span.floatLeft, #subFooter span.floatRight { margin: 0; } } /* PSICOs ND */