/*---------------------------------------------------------ALLGEMEINE EINSTELLUNGEN-------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------*/ html{height:100%;line-height:16px;font-size:16px}/*nötig, damit height im header weiß, woran er sich orientieren soll;line-height hier wichtig, da browser ein line-height vorgegeben hatte, verwirrend;16px nötig, da sich rem daran orientiert*/ body{display:flex;flex-flow:column;min-height:100vh;width:100%;overflow-x: hidden}/*body und main bewirken, dass header und footer immer außen sind, sind fixiert;font-size als Angabe, wonach sich rem richten soll*/ /* overflow gehört zum mobile menue, needed because hiding the menu on the right side is not perfect*/ main{flex:1}/*das div wird in der gleichen Fenstergröße wachsen*/ li,a,ol,ul,h1,h2,h3,blockquote{margin:0;padding:0;list-style-type:none;text-decoration:none}/*margin rückt die Listeneinträge über den ausgeblendeten dot*/ *{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}/*chrome: -webkit-tap-highlight-color: transparent;notwendig, sonst wird der Hintergrund beim Anklicken von links blau*/ input:focus,a:active,a:focus{outline:none} figure{margin:0}/*ersetzt div, ein Bild, Tabelle etc., was im Print zB. einen Kasten gesetzt werden würde, Bild mit Unterschrift*/ img{width:100%;height:auto} /*---------------------------------------------------------SCHRIFTFAMILIEN----------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------*/ @font-face { font-family:'avenirlight'; src: url(../fonts/fontsfree-net-avenir-light-webfont.woff2) format('woff2'), url(../fonts/fontsfree-net-avenir-light-webfont.woff) format('woff'); font-display:swap} /*swap weist den Browser an, bis zum Laden der Schrift eine Schrift aus der Liste der Alternativen zu benutzen und auf den Webfont umzuschalten, wenn die Schrift geladen ist*/ @font-face { font-family:'FontsFree-Net-MoonTime-Regular-1'; src: url(../fonts/FontsFree-Net-MoonTime-Regular-1.eot); src: url(../fonts/FontsFree-Net-MoonTime-Regular-1.eot?#iefix) format('embedded-opentype'), url(../fonts/FontsFree-Net-MoonTime-Regular-1.otf) format('otf'), url(../fonts/FontsFree-Net-MoonTime-Regular-1.ttf) format('truetype'), url(../fonts/FontsFree-Net-MoonTime-Regular-1.woff) format('woff'), url(../fonts/FontsFree-Net-MoonTime-Regular-1.woff2) format('woff2'); font-display:swap} @font-face { font-family:'brandon-grotesque-light-58a8a4b38001d'; src: url(../fonts/brandon-grotesque-light-58a8a4b38001d.eot); src: url(../fonts/brandon-grotesque-light-58a8a4b38001d.eot?#iefix) format('embedded-opentype'), url(../fonts/brandon-grotesque-light-58a8a4b38001d.otf) format('otf'), url(../fonts/brandon-grotesque-light-58a8a4b38001d.ttf) format('truetype'), url(../fonts/brandon-grotesque-light-58a8a4b38001d.woff) format('woff'), url(../fonts/brandon-grotesque-light-58a8a4b38001d.woff2) format('woff2'); font-display:swap} @font-face { font-family: 'DidotItalic'; src: url(../fonts/DidotItalic.eot); src: url(../fonts/DidotItalic.eot) format('embedded-opentype'), url(../fonts/DidotItalic.woff2) format('woff2'), url(../fonts/DidotItalic.woff) format('woff'), url(../fonts/DidotItalic.ttf) format('truetype'), url(../fonts/DidotItalic.svg#DidotItalic) format('svg'); font-display:swap} /*--------------------------------------------------GÜLTIG FÜR ALLE SEITEN----------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------*/ /*-----------------Hauptmenü------------------*/ /*--------------------------------------------*/ /*Textlogo + Sprachenmenü kleine Version*/ .header_sprachenmenu{font-family:'brandon-grotesque-light-58a8a4b38001d',Helvetiva,sans-serif;letter-spacing:0.03rem;height:3.125rem;color:#000;font-size:1.125rem;line-height:1.375rem} /*Textlogo*/ .header_textlogo{font-family:'avenirlight',Helvetiva,sans-serif;letter-spacing:0.1rem;color:#000;font-size:1.0625rem;line-height:1.375rem;font-weight:bold}/*Michael Köllner*/ .header_textlogo_zusatz{font-weight:400}/*Tantra-Massagen für Männer*/ /*header menu mobile + menu desktop Links*/ a.menu_link{color:#000;text-decoration:none} a.menu_link:visited{} a.menu_link:focus{} a.menu_link:hover{color:#e6c619;text-decoration:none} a.menu_link:active{color:#000;text-decoration:none} /*header menu mobile Hamburger*/ #overlay{background:#f9f6f3} #overlay-button{position:absolute;right:1.5rem;top:0;padding:2.1875rem 0;z-index:5;cursor:pointer;position:fixed} #overlay-button span{height:0.1875rem;width:1.875rem;border-radius:0.125rem;position:relative;display:block;background:#000;transition:all 0.2s ease-in-out} #overlay-button span:before{top:-0.625rem;visibility:visible;background:#000;transition:all 0.2s ease-in-out} #overlay-button span:after{top:0.625rem;background:#000;transition:all 0.2s ease-in-out} #overlay-button span:before,#overlay-button span:after{height:0.1875rem;width:1.875rem;border-radius:0.125rem;position:absolute;content:""} input[type=checkbox]{display:none} input[type=checkbox]:checked ~ #overlay{visibility: visible} input[type=checkbox]:checked ~ #overlay-button span:before{transform:rotate(45deg)translate(7px, 7px);opacity:1} input[type=checkbox]:checked ~ #overlay-button span:after {transform:rotate(-45deg) translate(7px, -7px)} input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span, .item{background:#f9f6f3}/*löscht mittleren Strich, wenn sich das Menü öffnet*/ #overlay{height:25rem;width:150vw;z-index:2;visibility:hidden;position:fixed;margin-top:-1.875rem;margin-left:5rem;box-shadow:rgba(0, 0, 0, 0.1) 0 0.25rem 0.75rem} #overlay.active {visibility: visible} #overlay ul {display:flex;justify-content:center;flex-direction:column} #overlay ul li{padding:0.65rem} /*header menu desktop*/ .header_menu_desktop{display:none} .header_menu_desktop_liste,.header_menu_mobile_liste{font-family:'brandon-grotesque-light-58a8a4b38001d',Helvetiva,sans-serif;font-size:1.1rem;line-height:1.375rem;color:#000;letter-spacing:0.03rem} .header_menu_mobile_liste{padding:5rem 0 0 2rem} /*weiter lesen*/ .moreless.less{padding-top:0.625rem;display:inline-block} .moreless.more:hover,.moreless.less:hover{color:#e6c619} .moreless.more,.moreless.less{color:#000} .moreless.more,.moreless.less{text-decoration:underline} .moreless.more,.moreless.less{font-weight:bold} /*moreless wird im js als Begriff verwendet!*/ /*Sprachenversionen*/ .header_menu_desktop_liste.sprachversionen{font-size:14px} .mobile_sprachversionen{float:right;font-size:14px} .trennstrich{color:black} /*-----------------SEITENBEREICHE------------------*/ /*-------------------------------------------------*/ /*
Regeln*/ .header_menu_mobile_outer{width:100%;height:6rem;padding:1.5rem 1rem;position:fixed;z-index:99999;background:#f9f6f3} /*Fließtext*/ h1,h2,h3{font-weight:400} p,.footer_text,h1,h2{hyphens:auto;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto} p,h1,h2{font-family:'avenirlight',Helvetiva,sans-serif;letter-spacing:0.05rem;color:#000;font-size:1rem;line-height:1.7rem;margin:0}/*margin:0 gleicht Browservoreinstellung aus*/ .unterschrift_michael{font-family:'FontsFree-Net-MoonTime-Regular-1',Helvetiva,sans-serif;color:#9f816a;font-size:2.5rem;line-height:1.5rem} /*Links auf den Seiten*/ a.seiten_links{color:#000;text-decoration:underline} a.seiten_links:visited:{} a.seiten_links:focus{} a.seiten_links:hover{color:#e6c619;text-decoration:underline} a.seiten_links:active{color:#ee791f;text-decoration:underline} /*