@font-face { font-family: 'bitter_bold'; src: url('font/bitter-bold-webfont.woff2') format('woff2'), url('font/bitter-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bitter_bold_italic'; src: url('font/bitter-bolditalic-webfont.woff2') format('woff2'), url('font/bitter-bolditalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bitter_italic'; src: url('font/bitter-italic-webfont.woff2') format('woff2'), url('font/bitter-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bitter_regular'; src: url('font/bitter-regular-webfont.woff2') format('woff2'), url('font/bitter-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @charset "UTF-8"; @-ms-viewport { width: extend-to-zoom; zoom: 1.0; } * { box-sizing: border-box;} html, body, td { color: black; margin:0px; width: 100%; height: 100%; padding: 0px; vertical-align: top; font-family: 'bitter_regular', serif; font-size: 1rem; line-height: 1.75rem; letter-spacing: 0rem; text-align: left; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: grayscale; } #allesCenter { position: relative; height:100%; max-width: 1040px; margin:0px auto; } #alles { position: relative; max-width: 1000px; margin:0px auto; padding: 0px 2rem; } table, table.rstable { width: 100%; border-collapse:collapse; background-color: transparent; } td { background-color: transparent; } .rsTD { width: auto; margin: 0px; padding: 0px 0.2rem 0.2rem 0px; border-top:1px solid #fff; border-bottom:1px solid #fff; background-color: transparent; } /***************** Tags ***************/ h1 { font-family: 'bitter_bold', sans-serif; font-weight: normal; font-size: 1.5rem; line-height: 1.8rem; letter-spacing: 0rem; margin: 0px 0px 0.5rem 0px; } h2, h3, b { font-family: 'bitter_bold', serif; font-weight: normal; font-size: 1rem; line-height: 1.5rem; margin: 0px; } ul, ol { padding: 0px; margin: 0px; } li { margin: 0rem 0px 0.5rem 1rem; padding: 0px; line-height: 1.5rem; } hr { height:0px; border:0px; border-top:1px solid #5c5c5c; margin: 1rem 0px; clear: both; } a:link, a:visited, a:active, a:focus, a:hover { display: inline-block; text-decoration: none; color: #46e; border: 0px; outline: none; } a:hover { background-color:#ddd; } img, a img, p a img, a.rsBildlink { display: block; padding: 0px; margin: 0px; border: 0px; text-decoration: none; outline: none; background-color: transparent; } /***************** Inhalt ****************/ #scroll { padding: 0px; margin: 0px; } #bodywrapper { float:left; width: 100%; min-height: 60vh; margin: 0px auto auto auto; padding: 2rem 0px; } .content { width: 1000px; max-width: 100%; margin: 0px auto; padding: 0px; } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, .Textblock_4_4 { display: inline-block; vertical-align: top; margin: 0px 0px 1rem 0px; padding-left: 1rem; } .Textblock_1_4 { width: 25%; } .Textblock_2_4 { width: 50%; } .Textblock_3_4 { width: 75%; } .Textblock_4_4 { width: 100%; } .Textabstand { width: calc(100% - 2rem); width: 100%; padding: 0px 1rem 0px 0rem; } .Abstand { width: 100%; height: 1.5rem; } .Bild_und_Legende { background-color: white; text-align: center; padding-bottom: 1rem; } picture.Bild { padding: 0px; margin: 0px; } .Bild { width: 100%; padding: 0px 1rem 0px 0px; margin: 0px; } .legende { display: block; width: 100%; text-align: center; font-size: 0.85rem; line-height: 1.25rem; min-height: 2rem; padding-top:0.5rem; } /***************** Diaschau ****************/ #diaframe { } .Diasteuerung { position: relative; } a.pfeil_links, a.pfeil_links:link, a.pfeil_links:link, a.pfeil_links:visited, a.pfeil_links:active, a.pfeil_links:hover, a.pfeil_rechts, a.pfeil_rechts:link, a.pfeil_rechts:link, a.pfeil_rechts:visited, a.pfeil_rechts:active, a.pfeil_rechts:hover , a.kreuz, a.kreuz:link, a.kreuz:link, a.kreuz:visited, a.kreuz:active, a.kreuz:hover { position: absolute; z-index: 10; width: 50%; height:100%; top:0px; left: 0px; color: white; display: block; background-repeat: no-repeat; background-size:3rem; text-decoration: none; border: none; background-color: transparent; } a.pfeil_links, a.pfeil_links:link, a.pfeil_links:link, a.pfeil_links:visited, a.pfeil_links:active, a.pfeil_links:hover { background-image: url('pic/Pfeil_Links.png'); background-position:left 45%; } a.pfeil_links:hover { background-image:url(pic/Pfeil_Links_H.png); } a.pfeil_rechts, a.pfeil_rechts:link, a.pfeil_rechts:link, a.pfeil_rechts:visited, a.pfeil_rechts:active, a.pfeil_rechts:hover { left: 50%; background-image: url('pic/Pfeil_Rechts.png'); background-position: calc(100% - 1rem) 45%; } a.pfeil_rechts:hover { background-image:url(pic/Pfeil_Rechts_H.png); } a.kreuz, a.kreuz:link, a.kreuz:link, a.kreuz:visited, a.kreuz:active, a.kreuz:hover { z-index: 11; width: 5rem; height:5rem; left: calc(100% - 6rem); background-image: url('pic/Kreuz.png'); background-position: calc(100% - 0.5rem) 45%; } a.kreuz:hover { background-image:url(pic/Kreuz_H.png); } #diaframe { position:absolute; z-index: 5; top:0px; left: 0px; height:100%; width:100%; } #hinterDia { position: fixed; top: 0px; left: 0px; width:100vw; height: 100vh; background-color: rgba(50,50,50,0.8); } /**************** Kontaktformular *************/ .input { display: block; margin: 0px 0px 0.5rem 0px; padding: 0.3rem 0.5rem 0.2rem 0.5rem; font-family: 'bitter_regular', sans-serif; font-weight: normal; font-style:normal; font-size: 1rem; letter-spacing: 0.03rem; width:100%; border:none; border: 1px solid #000; } .Mitteilungsarea { width:100%; height:100px; padding: 0.3rem 0.5rem 0.2rem 0.5rem; margin: 0.5rem 0px; font-family: 'bitter_regular', sans-serif; font-weight: normal; font-style:normal; font-size: 1rem; letter-spacing: 0.03rem; border:none; } #d1 .Mitteilungsarea, #d2 .input , #d3 .input , #d4 .input , #d5 .input , #d6 .input , #d7 .input { border: 1px solid #000; } #Absendebutton { display: block; margin: 1.5rem 0px 0.5rem 0px; padding: 0.2rem 0.5rem; font-family: 'bitter_bold', sans-serif; font-weight: normal; font-style:normal; letter-spacing: 0.05rem; font-size: 1rem; background-color: #fff; color: #000; border: 2px solid black; } #MeldungRot, #MeldungGruen { font-family: 'bitter_bold', sans-serif; font-weight: normal; font-size: 1.2rem; font-style:normal; letter-spacing: 0.03rem; margin-top: 1rem; padding: 0.2rem 0rem; color: red; } #MeldungGruen { color: green; margin-top: 2rem; } #d8 { vertical-align:middle; padding: 0.5rem 0rem 0.5rem 0.3rem; } #d8 input[type="checkbox"] { width:2rem; height:2rem; vertical-align:middle; margin-left: -0.3rem; border: 1px solid black; } #d7 { display:none; } /****************** Händlerliste ****************/ .haendlerliste { display:table; width:100%; } .Haendlerlogo, .Haendlerfirmenname, .Haendleradresse, .Haendlerkartenlink, .Haendlertelefon, .Haendlerwebseite, .Haendlersortierung { display: table-cell; width: 18%; padding: 0.2rem 0.5rem 0.2rem 0.5rem; vertical-align: top; text-align:left; height:1rem; font-size: 0.9rem; line-height: 1.3rem; } .Haendlersortierung { padding: 0rem 0.5rem 0rem 0.5rem; } .Haendlerkartenlink{ position:relative; left: -0.5rem; display: inline-block; width: 100%; padding-top:0.5rem; padding-bottom:0.5rem; height:2rem; } .Haendlerlogo { padding: 0rem 0.5rem 0rem 0rem; line-height:1rem; text-align:center; min-height:5rem; width: 28%; } .Haendlerlogo .Bild { display:inline-block; padding: 0rem; max-width: 150px; max-height: 6rem; } .Haendlersortierung a:link, .Haendlersortierung a:visited, .Haendlersortierung a:active, .Haendlersortierung a:hover { font-size: 1rem; line-height: 1.3rem; } .Haendlersortierung a.fett:link, .Haendlersortierung a.fett:visited, .Haendlersortierung a.fett:active, .Haendlersortierung a.fett:hover { font-family: 'bitter_bold', sans-serif; font-size: 1rem; line-height: 1.3rem; color:black; } /****************** Kopf ****************/ #kopf { width: 100%; margin: 0px; padding-top: 3rem; background-color: #fff; } #branding { position: absolute; top:0px; left:2rem; width: 17rem; padding-top: 1rem; } .brandingverdraenger { float:left; width: 14rem; height:3rem; padding-top: 1rem; text-align: left; background-color: transparent; } #Logo, #LiviBikes, #Logograu, #LiviBikesgrau { display:inline-block; height: 5rem; } #LiviBikes, #LiviBikesgrau { height: 5rem; } a#logolink, a#logolink:link, a#logolink:link, a#logolink:visited, a#logolink:active, a#logolink:hover { border: 0px; padding: 0px; text-decoration: none; outline: none; } a#logolink:hover { background-color:#ddd; } /****************** Fuss ***************/ #fuss { float:left; width: 100%; min-height: 7rem; padding: 1rem 0px 0px 1rem; margin: 0px; background-color: red; background-color: #eee; } #fussinhlalt { height:100%; width:100%; } #fussmenuecontainer { float: right; padding: 2rem 0px 1rem 0px; background-color: transparent; } #fussbranding { position: absolute; width: 17rem; } #fussmenue { float:left; width: 100%; padding: 1rem 0px; text-align: center; } a.fussnav, a.fussnav:link, a.fussnav:visited, a.fussnav:active, a.fussnav:hover { display: inline-block; font-family: 'bitter_regular', sans-serif; font-weight: normal; font-size: 1.18rem; line-height: 1.2rem; text-decoration: none; letter-spacing: 0.02rem; color: #808080; border: none; margin: 0rem; padding: 0.2rem 1rem 8px 1rem; white-space: nowrap; } a.fussnav:hover { color: black; } .ankerV { float: right; top: -2rem; visibility: hidden; position:absolute; } /******** Zustimmungsdiv*********/ #zustimmungsabdecker { display:none; position: fixed; width:100%; height:100%; top:0px; z-index:9999; padding-bottom:1rem; background-color: rgba(240,240,240,0.5); } #zustimmungsdiv { position: fixed; background-color: #eee; border-top: 2rem solid white; bottom:0px; width: 100vw; padding: 1rem 2rem; z-index:10000; overflow:auto; } #zustimmungsbuttondiv { width: 100%; text-align:center; margin: 1rem 0px; } a#consentgross, a#consentgross:link, a#consentgross:visited, a#consentgross:active, a#consentgross:hover, a#consentklein, a#consentklein:link, a#consentklein:visited, a#consentklein:active, a#consentklein:hover { text-decoration: none; border:none; display: inline-block; margin: 0.25rem 1rem; padding: 0.5rem 1rem; color:black; letter-spacing: 0.025rem; background-color:#fbf321; color: black; } a#consentgross:hover { background-color:#99c800; color: white; } a#consentklein:hover { background-color:#b8c895; color: #888; } /***************** Menü ****************/ #hinterPhonemenue, #Phonemenuecontainer, .Ph2container, .Pnavcontainer { display: none; } #menuecontainer { float: right; padding: 0px; background-color: transparent; } .h2container { display:none; position:absolute; z-index: 20; padding-top:0.5rem; min-width: 8rem; background-color: rgba(255,255,255,0.7); } .navcontainer { display: inline-block; vertical-align:top; } a.nav1, a.nav1:link, a.nav1:visited, a.nav1:active, a.nav1:hover, a.nav1X, a.nav1X:link, a.nav1X:visited, a.nav1X:active, a.nav1X:hover { display: inline-block; font-family: 'bitter_regular', sans-serif; font-weight: normal; font-size: 1.18rem; line-height: 1.2rem; text-decoration: none; letter-spacing: 0.02rem; color: black; border: none; margin: 0rem; padding: 0.2rem 1rem 0.5rem 1rem; white-space: nowrap; } a.nav1X, a.nav1X:link, a.nav1X:visited, a.nav1X:active, a.nav1X:hover { font-family: 'bitter_bold', sans-serif; letter-spacing: 0px; } a.nav1:hover { font-family: 'bitter_regular', sans-serif; background-color:#ddd; } a.nav1X:hover { background-color:#ddd; } a.nav2, a.nav2:link, a.nav2:visited, a.nav2:active, a.nav2:hover, a.nav2X, a.nav2X:link, a.nav2X:visited, a.nav2X:active, a.nav2X:hover { display: inline-block; font-family: 'bitter_regular', sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.1rem; text-decoration: none; letter-spacing: 0.02rem; color: black; border: none; margin: 0rem; white-space: nowrap; padding: 0.5rem 1rem; background-color:transparent; } a.nav2X, a.nav2X:link, a.nav2X:visited, a.nav2X:active, a.nav2X:hover { font-family: 'bitter_bold', sans-serif; letter-spacing: 0px; } a.nav2:hover { font-family: 'bitter_regular', sans-serif; background-color:#eee; } a.nav2X:hover { background-color:#ddd; } #fussmenue a.nav, #fussmenue a.nav:link, #fussmenue a.nav:visited, #fussmenue a.nav:active, #fussmenue a.nav:hover, #fussmenue a.navX, #fussmenue a.navX:link, #fussmenue a.navX:visited, #fussmenue a.navX:active, #fussmenue a.navX:hover { color: #fff; } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:650px) { html, body { background-color: #eee; } #alles { margin: 0px; padding: 0px; } #bodywrapper { background-color: #fff; } /****************** Kopf ****************/ #kopf { position:fixed; top:0px; width: 100%; height: 5rem; margin: 0px; padding: 0px; z-index: 30; background-color: #fff; } #kopf .brandingverdraenger, #LiviBikes { display: none; } #branding { padding: 0px; width: auto; left: calc(50% - 3rem); } #Logo { height: 4.5rem; padding: 0.5rem 0px 0px 0.65rem; margin: 0px; } /****************** Fuss ***************/ #fuss { padding: 1rem 0px 0px 0rem; } #fussbranding { padding: 0px; width: auto; left: 0rem; } #Logograu { height: 4rem; padding: 0rem 0px 0px 1.5rem; margin: 0px; } #LiviBikesgrau { height: 4rem; padding: 0rem; margin: 0px; } #fussmenue { padding: 0.3rem 0px 0px 0px; } #fussmenuecontainer { float: left; width:100%; padding: 2rem 0px 0px 0px; } #fussmenuecontainer .navcontainer { display: block; width:100%; padding: 0.5rem 0px 0.5rem 0.5rem; border-bottom: 2px solid white; } a.fussnav, a.fussnav:link, a.fussnav:visited, a.fussnav:active, a.fussnav:hover { display: block; width:100%; } /***************** Inhalt ****************/ #bodywrapper { margin-top: 4rem; } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, .Textblock_4_4 { width: 100%; margin: 0px; padding: 0px; } .Textabstand { padding: 0px 1.5rem ; } .Bild { width: 100%; margin: 0px; padding: 0px; } #diaframe { top: 5rem; border-top: 1px solid gray; } /****************** Händlerliste ****************/ .haendlerliste { display:inline-block; } .Haendlerlogo, .Haendlerfirmenname, .Haendleradresse, .Haendlertelefon, .Haendlerwebseite, .Haendlersortierung { display:block; float: right; width: 70%; height:auto; text-align:left; } .Haendlerlogo { line-height:6rem; float: left; width: 30%; padding: 0rem 1rem 0rem 0rem; } .Haendlerfirmenname { font-family: 'bitter_bold', sans-serif; font-weight: normal; } .Haendlersortierung { float: left; display:inline-block; width:auto; padding: 0rem 0.5rem 0rem 0rem; } /************** Menüicon **************/ a#menue_zeigen, a#menue_verbergen { position: fixed; display:block; top:0px; right: 0px; background-color: red; background-color: transparent; background-image: url("pic/menueicon.svg"); background-repeat: no-repeat; background-size: 2rem; background-position: center; height: 5rem; width: 6rem; } a#menue_verbergen { background-image: url("pic/menuekreuz.svg"); display: none; } /***************** Menü ****************/ #menuecontainer { display: none; } #hinterPhonemenue { position: fixed; width: 100%; height: 100%; background-color: rgba(240,240,240,0.7); background-color: rgba(50,50,50,0.8); z-index: 19; } #Phonemenuecontainer { position: fixed; width: calc(100vw - 5rem); max-height: calc(100vh - 7rem); margin: 5rem 0px 0px 3rem; padding: 3rem 0px 3rem 0rem; background-color: rgba(255,255,255,0.95); z-index: 20; overflow: auto; border: 1px dotted black; border: none; } .Ph2container { display: block; width: 100%; background-color: blue; background-color:transparent; } .Pnavcontainer { display: block; width: 100%; margin: 0px; padding: 0px; } a.Pnav1, a.Pnav1:link, a.Pnav1:visited, a.Pnav1:active, a.Pnav1:hover { display: block; width: 100%; font-family: 'bitter_regular', sans-serif; font-weight: normal; font-size: 1.18rem; line-height: 1.2rem; text-decoration: none; letter-spacing: 0.02rem; color: black; border: none; border-top: 2px solid black; margin: 0rem; padding: 0.75rem 0.5rem 1rem 1rem; white-space: nowrap; background-color: yellow; background-color:transparent; } a.Pnav2, a.Pnav2:link, a.Pnav2:visited, a.Pnav2:active, a.Pnav2:hover { display: block; width: calc(100% - 4rem); margin: 0rem 0rem 0rem 2rem; padding: 0.5rem 0rem 0.5rem 0rem; font-family: 'bitter_regular', sans-serif; font-weight: normal; font-size: 0.95rem; line-height: 1rem; text-decoration: none; letter-spacing: 0.02rem; color: black; border: none; border-top: 1px dotted black; white-space: nowrap; background-color: red; background-color:transparent; } }