@font-face { font-family: 'costura_regular'; src: url('font/costura/costura_regular.woff'); format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'costura_demibold'; src: url('font/costura/costura_demibold.woff'); format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'costura_bold'; src: url('font/costura/costura_bold.woff'); format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_thin'; src: url('font/roboto/roboto_thin.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_thin_italic'; src: url('font/roboto/roboto_thin_italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_light'; src: url('font/roboto/roboto_light.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_light_italic'; src: url('font/roboto/roboto_light_italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_regular'; src: url('font/roboto/roboto_regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_italic'; src: url('font/roboto/roboto_italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_medium'; src: url('font/roboto/roboto_medium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_medium_italic'; src: url('font/roboto/roboto_medium_italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_bold'; src: url('font/roboto/roboto_bold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_bold_italic'; src: url('font/roboto/roboto_bold_italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_black'; src: url('font/roboto/roboto_black.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_black_italic'; src: url('font/roboto/roboto_black_italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_condensed_regular'; src: url('font/roboto/roboto_condensed_regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_condensed_italic'; src: url('font/roboto/roboto_condensed_italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_condensed_light'; src: url('font/roboto/roboto_condensed_light.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'roboto_condensed_bold'; src: url('font/roboto/roboto_condensed_bold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoSlab_Thin'; src: url('font/robotoslab/RobotoSlab_Thin.woff'); format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoSlab_Light'; src: url('font/robotoslab/RobotoSlab_Light.woff'); format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoSlab_Regular'; src: url('font/robotoslab/RobotoSlab_Regular.woff'); format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoSlab_Bold'; src: url('font/robotoslab/RobotoSlab_Bold.woff'); format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nothingyoucoulddo'; src: url('font/nothingyoucoulddo/nothingyoucoulddo.woff'); format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nothingyoucoulddobold'; src: url('font/nothingyoucoulddo/nothingyoucoulddobold.woff'); format('woff'); font-weight: normal; font-style: normal; } @charset 'UTF-8'; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} * { box-sizing: border-box; } html, body, p, h1, h2, h3, td, div { font-family: 'RobotoSlab_Regular', sans-serif; font-weight: normal; font-style:normal; font-size: 0.95rem; line-height: 1.5rem; margin: 0px; padding: 0px; vertical-align: top; text-align: left; hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; -webkit-font-smoothing: grayscale; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } html, body { height: 100%; width: 100%; } #container { float:right; width: 100%; min-height: 100%; } #linkes_Deckchen { position: fixed; left: -65%; top:0px; width: 100%; height:100%; background-image:url("pic/OcchiLangLinks.webp"); background-repeat:repeat-y; background-size: 110rem; background-position: top right; background-color: #f3f; background-color: transparent; } #linke_Seite { position: absolute; left:0px; top:0px; width: 35%; } #rechte_Seite { position: absolute; top:0px; right: 0px; width: 65%; } table, tr, td { border-collapse: collapse; border: 0px none transparent; } h1, h2, h3 { font-family: 'roboto_bold', sans-serif; font-weight: normal; font-style:normal; } h1 { margin: 0px 0px 1.25rem 0px; font-size: 1.75rem; line-height: 2rem; letter-spacing: 0.05rem; } h2 { margin: 1rem 0px 0.75rem 0px; font-size: 1.5rem; line-height: 1.8rem; letter-spacing: 0.04rem; } h3 { margin: 0.75rem 0px 0.25rem 0px; padding: 0px; font-size: 1.05rem; line-height: 1.15rem; letter-spacing: 0.03rem; } p { display: inline-block; margin: 0px; } b { font-family: 'RobotoSlab_Bold', sans-serif; font-weight: normal; font-style:normal; } i { font-family: 'nothingyoucoulddobold', sans-serif; font-weight: normal; font-style:normal; } sup { display:inline-block; position:relative; line-height: 0.5rem; letter-spacing: 0px; } ul, ol { padding: 0px; margin: 0px 0px 1rem 1.1rem; } li { line-height: 1.3rem; padding: 0.25rem 0px 0rem 0.5rem; margin: 0px; background-repeat:no-repeat; background-position: left 0.7rem; background-size: 0.6rem; } img { border-width: 0px; border-style: none; border-color: transparent; padding:0px; margin:0px; } hr { height:0px; border:0px; border-top:1px solid #000; margin: 1.5rem 0px; clear: both; } a:link, a:active, a:visited { color: #000; text-decoration: none; outline: none; padding-bottom:1px; border-bottom: 1px solid black; } a:hover { color: #000; border-bottom: dashed 2px black; } a:link.rsBildlink, a:active.rsBildlink, a:visited.rsBildlink { text-decoration: none; border:none } .klein { font-size: 0.8rem; } .rot { color: red; } .blau { font-weight: bold; } /******** Startseite *********/ #homeback { position: fixed; width: 100%; height: 100%; } #homedeckchendiv { width:auto; height:auto; } #homemenue { display: none; } #hamburgerdeckchen_oben { display:none; position: fixed; width:100%; height:8rem; background-image:url("pic/OcchiLang.webp"); background-repeat: repeat-x; background-size: auto 110rem; background-position: -0.6rem -102rem; background-color:transparent; padding:0.5rem; } #hamburgerdeckchen_links { position: absolute; display:none; height:100%; width:8rem; background-image:url("pic/OcchiLangLinks.webp"); background-repeat: repeat-y; background-size: 110rem auto; background-position: -101.9rem -0.6rem; background-color: red; background-color:transparent; padding:0.5rem; } #startmenueicon { position: fixed; display:block; left: 1rem; top: 1rem; width: 2rem; height: 2rem; } #startseitentextdiv { position:absolute; top: 55vh; left: 12rem; max-width: calc(100vw - 14rem); } #startseitentextdiv h1, #startseitentextdiv h2 { display: inline-block; font-family: 'costura_bold', sans-serif; font-weight: normal; font-style:normal; background-color: rgba(255,255,255,0.8); color: #e1007d; } #startseitentextdiv h1 { margin: 1rem 0px; padding: 0.65rem 1.5rem 0.2rem 1.5rem; font-size: 2.5rem; line-height: 3.333rem; } #startseitentextdiv h2 { hyphens: none; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; margin: 0.25rem 0px; padding: 0.5rem 1.5rem 0.1rem 1.5rem; font-size: 1.5rem; line-height: 2rem; } #homeImpressumslinkcontainer { position: absolute; bottom:0.75rem; right:1.75rem; background-color: rgba(255,255,255,0.2); font-family: 'RobotoSlab_Light', sans-serif; font-size: 0.8rem; line-height: 1.1rem; padding: 0px 0.25rem; } #homeImpressumslinkcontainer a { border: none; color: #000; padding: 0.25rem; } #homeImpressumslinkcontainer a:hover { color: #fff; } /******** Zustimmungsdiv*********/ #zustimmungsdiv { position: fixed; background-color: rgba(255,255,255,0.9); font-size: 0.8rem; line-height: 1.1rem; border: 2px solid #000; bottom:0rem; margin:1rem; padding: 2rem; z-index:10000; overflow: scroll; max-height: calc(100vh - 6rem); } #zustimmungsbuttondiv { width: 100%; text-align:center; margin:0px; } #dataimp { position: relative; top:1rem; } 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 { display: inline-block; font-family: 'costura_regular', sans-serif; font-weight: normal; font-style:normal; text-decoration: none; background-color: transparent; border: 2px dashed #E50063; border-radius: 0.75rem; color: #E50063; font-size: 1rem; line-height: 1.2rem; letter-spacing: 0px; padding: 0.6rem 1rem 0.5rem 1rem; margin: 1rem 1rem 0rem 1rem; } a#consentklein, a#consentklein:link, a#consentklein:visited, a#consentklein:active, a#consentklein:hover { font-size: 1rem; line-height: 1.2rem; padding: 0.6rem 1rem 0.5rem 1rem; margin: 1rem; } a#consentgross:hover, a#consentklein:hover { background-color:rgba(255,0,150,0.05); } #zustimmungsdivEinzeln { background-color: rgba(255,255,255,0.9); border: 2px solid #000; margin:3rem auto; width: 90%; padding: 25rem; z-index:100; } /******** YouTube Video*********/ .film_container3x4, .film_container16x9, .film_container9x16 { padding-bottom: 75%; /* bei 3x4 */ position: relative; overflow: hidden; width:calc(100% + 4rem); left:-2.5rem; height: auto; } .film_container9x16 { padding-bottom: 210%; /* bei 9x16 */ } .film_container16x9 iframe, .film_container9x16 iframe, .film_container3x4 iframe { position: absolute; top: 0; left: 0; width: 90%; height: 90%; max-height: 100vh; background-color: gray; } .film_container16x9 { padding-bottom: 56.25%; /* bei 16x9 */ width: 100%; width:calc(100% - 1rem); left:0rem; top:2rem; margin-bottom:3rem; } .film_container16x9 iframe { width:calc(100% + 1rem); height: 100%; } /********* Tabelle **********/ .rsTD { padding: 5px 3px 5px 6px; font-size: 0.95rem; line-height: 1.2rem; font-family: 'fira_sanslight', sans-serif; font-weight: normal; font-style:normal; border-width: 1px; border-style: solid; border-color: silver; } /******************** Inhalt ******************/ #content { float:left; margin: 0px; padding: 3vw 0rem 2rem 2.5rem; width: 95%; max-width: 80rem; } .Abstand { display:block; height:2rem; width: 100%; border-color: silver; } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, .Textblock_4_4 { display:inline-block; vertical-align:top; padding: 0px; margin: 0px 1.5rem 1.5rem 0px; background-color: white; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.95); border-radius: 2px; } .Textblock_1_4 {width: calc(25% - 1.5rem);} .Textblock_2_4 {width: calc(50% - 1.5rem);} .Textblock_3_4 {width: calc(75% - 1.5rem);} .Textblock_4_4 {width: calc(100% - 1.5rem);} .textabstand { margin: 2rem 1rem 2rem 2rem; max-width: 40rem; } .textabstand_LZ { margin: 2rem 1rem 2rem 2rem; } .Bildblock_1_4 {width: calc(25% - 1.5rem);} .Bildblock_2_4 {width: calc(50% - 1.5rem);} .Bildblock_3_4 {width: calc(75% - 1.5rem);} .Bildblock_4_4 {width: calc(100% - 1.5rem);} .Bildblock_1_4, .Bildblock_2_4, .Bildblock_3_4, .Bildblock_4_4 { display:inline-block; vertical-align:top; padding: 0px; margin: 0px 1.5rem 2rem 0px; } .picture { width: 100%; margin: 0px; } .Bild { display:block; padding: 0px; margin: 0px; width: 100%; border: solid white 1rem; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.95); border-radius: 2px; } .legende { font-family: 'nothingyoucoulddobold', sans-serif; font-weight: normal; font-style:normal; font-size: 1.25rem; line-height: 1.35rem; padding: 1rem 0px 1rem 0rem; color: #ddd; } /******************** Fuss ******************/ #fuss { position:relative; float: left; width: calc (100% - 2.5rem); padding: 0rem 4rem 0rem 0rem; margin: 0px 0px 0px 2.5rem; } #fusscontent { float: right; position: relative; padding: 0rem 0.75rem 0rem 1rem; margin: 3rem 0.5rem 2rem -1rem; background-color: white; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.95); border-radius: 2px; max-width: 80rem; } /* width: 95%; */ /************** Impressum ***************/ #Impressumslinkcontainer { clear: both; float: right; width: calc(100% + 2.5rem); padding: 0rem 0.25rem 0.75px 0rem; margin: 0rem -0.5rem 0.3rem 1rem; } #Impressumslinkcontainer a, #Impressumslinkcontainer a:link, #Impressumslinkcontainer a:visited, #Impressumslinkcontainer a:active, #Impressumslinkcontainer a:hover { float: right; font-family: 'RobotoSlab_Light', sans-serif; font-weight: normal; font-style:normal; color: #666; font-size: 0.75rem; line-height: 0.75rem; margin: 1rem 0rem 0px 0px; padding: 0.75px 0.6rem 0.75rem 0rem; letter-spacing: 0.05rem; border: none; } #Impressumslinkcontainer a:hover { color: #E50063; } /**************** Kontaktformular *************/ .input { display: block; margin: 0px 0px 0.5rem 0px; padding: 0.3rem 0.5rem 0.2rem 0.5rem; font-family: 'RobotoSlab_Light', 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: 'RobotoSlab_Light', 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: 'RobotoSlab_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: 'RobotoSlab_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; } /************** Kopf ***************/ #Kopf { float:left; width: 100%; padding: 3vw 0px 0px 0px; margin: 0px; } a#LogoLink, a#LogoLink:link, a#LogoLink:visited, a#LogoLink:active, a#LogoLink:hover { display:block; float:left; position: relative; left: 7%; font-family: 'costura_bold', sans-serif; font-size: 2.3vw; line-height: 2.4vw; color: #E50063; text-decoration: none; border: 2px dashed transparent; border-radius: 0.75rem; padding: 1vw 1vw 0.5vw 1vw; } a#LogoLink:hover { border-color:#E50063; } /************** Anker ***************/ #hamburger_oben_container { height:5rem; } #hintergrund, #anker_ueber_menue, #anker_oben, #hamburger_oben_container, #hamburger_oben, #hamburger_unten { display: none; } /******************** Menü ******************/ #socmedlinkdiv { float: left; margin: 3rem 0rem 0rem 0.5rem; } a.socmedlink { display:inline-block; height: 1rem; text-decoration: none; border: none; } a.socmedlink img { height: 2rem; } #menue { left:0px; float: left; width: calc(93% - 5rem); margin: 2.5vw 0px 2rem 7%; padding: 0px 0px 0px 0px; } .menuezeile { float: left; width: 100%; } a.nav, a.nav:link, a.nav:visited, a.nav:active, a.nav:hover, a.navX, a.navX:link, a.navX:visited, a.navX:active, a.navX:hover, a.navA, a.navA:link, a.navA:visited, a.navA:active, a.navA:hover { display:block; font-family: 'roboto_condensed_regular', sans-serif; font-weight: normal; font-style:normal; text-decoration: none; background-color: transparent; border: 2px dashed transparent; border-radius: 0.75rem; color: black; font-size: 1.3rem; line-height: 1.5rem; letter-spacing: 0.025rem; padding: 0.25rem 0.4rem 0.3rem 0.75rem; margin: -1px 0px; } a.navX, a.navX:link, a.navX:visited, a.navX:active, a.navA, a.navA:link, a.navA:visited, a.navA:active { font-family: 'roboto_condensed_bold', sans-serif; letter-spacing: 0.01rem; } a.nav:hover, a.navX:hover, a.navA:hover{ border-color: #E50063; } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:1400px) { .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, #content .Bildblock_1_4, #content .Bildblock_2_4, #content .Bildblock_3_4 { width: calc(50% - 1.5rem); } /**************** Startseite **************/ } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:1000px) { .film_container9x16 { width:calc(100% + 5rem); padding-bottom: 220%; /* bei 9x16 */ } .film_container9x16 iframe { width: 100%; height: 100%; } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, .Textblock_4_4, #content .Bildblock_1_4, #content .Bildblock_2_4, #content .Bildblock_3_4, #content .Bildblock_4_4 { width: calc(100% - 1.5rem); } #linke_Seite { width: 45%; } #rechte_Seite { width: 55%; } #linkes_Deckchen { left: -55%; } /************** Kopf ***************/ #Kopf { padding: 9% 0px 0px 0px; } a#LogoLink, a#LogoLink:link, a#LogoLink:visited, a#LogoLink:active, a#LogoLink:hover { font-size: 3vw; line-height: 3.5vw; } /******************** Menü ******************/ #menue { margin-top: 2.5rem; } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:799px) { /******** Schriftgössen*********/ html, body, p, td, div { font-size: 1rem; line-height: 1.75rem; } td.rsTD { font-size: 1rem; line-height: 1.3rem; } #Impressumslinkcontainer a, #Impressumslinkcontainer a:link, #Impressumslinkcontainer a:visited, #Impressumslinkcontainer a:active, #Impressumslinkcontainer a:hover { font-size: 1rem; line-height: 1rem; } /******** Startseite *********/ #startseitentextdiv { left: 1.75rem; max-width: calc(100vw - 3.5rem); } #startseitentextdiv h1 { margin: 0.8rem 0px; padding: 0.52rem 1.2rem 0.16rem 1.2rem; font-size: 2rem; line-height: 2.666rem; } #startseitentextdiv h2 { margin: 0.2rem 0px; padding: 0.4rem 1.2rem 0.08rem 1.2rem; font-size: 1.2rem; line-height: 1.6rem; } /******************** Inhalt ******************/ /********* Tabelle **********/ .rsTD { padding: 2px 2px 3px 4px; font-size: 11px; line-height: 14px; border-width: 1px; border-style: solid; border-color: silver; } /************* Bereiche *****************/ #linkes_Deckchen { display:none; } #linke_Seite, #rechte_Seite { position: relative; float:left; top:auto; width: 100%; } #linke_Seite { background-color: rgba(200,0,0,0.2); background-image:url("pic/OcchiLang.png"); background-repeat:repeat-x; background-size: auto 110rem; background-position: left bottom; padding: 2rem 1rem 4rem 2rem; background-color: transparent; min-height:calc(100vh - 4rem); } #homemenue #linke_Seite { min-height: auto; } #content { top:auto; width: 100%; margin-top: 0rem; padding-top: 0rem; } /************ Kontaktformular **************/ #kontaktformular { margin-bottom: 7rem; } /******************** Fuss ******************/ #fuss { position:absolute; bottom: 0px; width: calc(100% - 2.5rem); } #fusscontent { float:left; width: calc(100% + 2.5rem); background-color: white; } #Impressumslinkcontainer { width: calc(100% + 2.5rem); } /************** Kopf ***************/ #Kopf { padding: 0px 0px 0px 0px; } a#LogoLink, a#LogoLink:link, a#LogoLink:visited, a#LogoLink:active, a#LogoLink:hover { left: -0.5rem; padding: 0.4rem 0.75rem 0.1rem 1rem; font-size: 1.8rem; line-height: 2rem; font-size: 7.4vw; line-height: 8.5vw; margin-right: -2rem; } /******************** Menü ******************/ #menue { margin: 2rem 0px 3rem 0px; width: 100%; } .menuezeile { float: left; width: calc(100% - 1rem); } /*************** Hintergrund ***************/ #hintergrund { display:block; height: 100%; width: 100%; position: fixed; } /************** Anker ***************/ #anker_ueber_menue { display: block; position: relative; top: -9rem; float:left; width: 100%; } #anker_oben { display: block; position: relative; top: -7.5rem; float:left; width: 100%; } #hamburger_oben { display: block; width: 100%; height:auto; margin: 0px; float:right; } #hamburger_oben a, #hamburger_oben a:link, #hamburger_oben a:visited, #hamburger_oben a:active, #hamburger_oben a:hover { float:right; position: relative; top: -9rem; width: 5rem; padding: 2rem 1rem 1rem 1rem; background-color: red; background-color: transparent; border: none; } #hamburger_oben a img, #hamburger_unten a img { float:right; display: block; width: 2rem; margin: 0px; } #hamburger_unten { display: block; position: relative; top: -2rem; left: 3.25rem; float:left; width: calc(100% - 2rem); height:3rem; margin: 1.5rem 0px 0rem 0px; } #hamburger_unten a, #hamburger_unten a:link, #hamburger_unten a:visited, #hamburger_unten a:active, #hamburger_unten a:hover { position: relative; display: block; float:right; width: 2rem; padding: 1.5rem; background-color: transparent; border: none; } }