:root { --maxBreite: 1600px; --vspace: 40px; --headerHoehe: 80px; --logoBreite: 110px; --ciFarbe: #8f1812; --grau1: #ddd; --ciText: #333; --bodyBG: #e5e5e5; --mainMenuFarbe: #fff; --mainMenuHover: #444; --mainMenuActive: #444; --mainMenuUnderline: .1em; --subMenuFarbe: #aaa; --subMenuFarbeActive:#fff; --subMenuFarbeHover: #eee; --subMenuBg: var(--ciText); --menuFarbe: #fff; --menuHover: #fff; --menuActive: var(--ciFarbeDunkel); --menuActiveHover: var(--ciFarbeDunkel); --menuBg: #afa23d; --menuActiveBg: #333; --menuBgHover: #333; --menuActiveBgHover: #333; --hamburgerOpen: #999; --hamburgerClosed: #fff; --mmBG: var(--ciText); --mmNormal: #aaa; --mmNormalActive: #eee; --mmNormalHover: #fff; --mmBgActive: transparent; --mmMain: #555; --mmMainActive: #eee; --mmMainhover: #fff; --formBorderCol: var(--ciFarbe); --formTextCol: #222; --formBgCol: #cab82d00; --formLabelText: #fff; --formLabelBg: var(--ciFarbe); --formLabelBorder: #fff; --butCol: #fff; --butbg: var(--ciFarbe); --butColHover: #fff; --butbgHover: #afa23d; } @font-face { font-family: 'OpenSansCondensedMedium'; src: url('../formate/fonts/open_sans_condensed-medium.eot'); /* IE9 Compat Modes */ src: local(''), url('../formate/fonts/open_sans_condensed-medium.woff2') format('woff'), /* Modern Browsers */ url('../formate/fonts/open_sans_condensed-medium.woff') format('woff'), /* Modern Browsers */ url('../formate/fonts/open_sans_condensed-medium.ttf') format('truetype'), /* Safari, Android, iOS */ url('../formate/fonts/open_sans_condensed-medium.svg#OpenSans') format('svg'); /* Legacy iOS */ } * {margin:0; padding:0; font-family:Arial,Helvetica,Sans-Serif; font-size:.95rem; line-height:1.5rem; color:var(--ciText); box-sizing:border-box;} body {background-color:var(--bodyBG); padding:0; overflow-x:hidden; width:100vw;} body.popup {padding:10px; background-color:#fff;} a, img {border-style:none; text-decoration:none;} a {color:#fff; text-decoration:none;} a:not(.activemainmenu,.normalmainmenu, .activemenu,.normalmenu,.footerlink,.dsgvo_link) {font-weight:bold;} #mobilemenu a {font-weight:unset;} a:hover {} a, span {} h1, .titel {font-family:'OpenSansCondensedMedium', sans-serif; margin-bottom:var(--vspace); font-size:1.75rem; line-height:2rem; color:var(--ciFarbe);} h2, .untertitel {font-family:'OpenSansCondensedMedium', sans-serif; margin-bottom:calc(.25 * var(--vspace)); font-size:1.5rem; line-height:1.75rem; color:var(--ciFarbe);} h2.seitentitel {margin-bottom:var(--vspace); display:inline-block; font-family:'OpenSansCondensedMedium', sans-serif; color:var(--ciFarbe); font-size:1.5rem; line-height:2rem; text-transform:uppercase;} h3, .content {font-family:'OpenSansCondensedMedium', sans-serif; margin-bottom:calc(.25 * var(--vspace)); font-size:1.3rem; line-height:1.5rem; color:var(--ciFarbe);} h2.login {margin-bottom:12px;} h1.maintitle {margin-top:0; margin-bottom:8px;} h2.subtitle {font-size:12px; margin-top:0; margin-bottom:8px; font-weight:normal; text-transform:uppercase; letter-spacing:1px;} div {margin:0; padding:0; display:block;} p {margin-top:10px; margin-bottom:10px;} label {vertical-align:middle;} .clr {clear:both; width:0; height:0; content:''; position:relative; display:block; line-height:0px;} b,strong {font-weight:600; color:inherit; font-size:inherit; line-height:inherit;} hr {height:1px; margin:10px 0; background-color:var(--ciText); border:none;} ol, ul, li {margin:0; padding:0;} ul, ol, form {margin-top:4px; margin-bottom:8px;} form {max-width:800px;} ul {margin-left:15px;} ol {margin-left:20px;} ul ul, ul.sitemap1 {margin-left:15px;} ul ul {margin-top:1px; margin-bottom:1px;} ol ol {margin-top:1px; margin-bottom:1px;} .content {margin-bottom:0;} #vario {background-color:var(--ciText);} #pagewrap {max-width:var(--maxBreite); min-height:100vh; margin:0 auto; background-color:#fff;} #header {width:100%; max-width:var(--maxBreite); height:var(--headerHoehe); padding:0 2vw; position:fixed; z-index:10; display:grid; grid-template-columns:150px 1fr; align-items:center; background-color:var(--ciFarbe);} #logo-header img {width:var(--logoBreite);} #mainnav {display:none; text-align:right;} li.mainitem {margin-right:20px;} li.mainitem:last-child {margin-right:0;} ul.mainav {width:calc(100% - 95px); float:left;} #somm {float:left;} #somm a img {width:40px; height:40px;} #submenu {max-width:var(--maxBreite); width:100%; padding:10px 5vw 10px calc(5vw + var(--logoBreite)); top:var(--headerHoehe); position:fixed; display:none; z-index:10; border-bottom:0px solid var(--ciFarbe); background-color:var(--subMenuBg);} #pagecontent {padding:calc(var(--vspace) * 2) 2% calc(var(--vspace) * 2); background-color:var(--grau1);} #hero {height:400px; position:relative; z-index:1; display:grid;} #hero img {width:100% !important; height:100%; object-fit:cover;} .hero-ol {width:100%; bottom:1vw; padding:3vw; position:absolute; z-index:2; display:grid; justify-content:center; grid-gap:0; grid-template-columns:auto 3px auto; grid-template-rows:1fr; border-bottom-left-radius:10px; pointer-events:none;} .hero-ol * {color:#fff; pointer-events:none;} .hero-ol-update {padding:10px; font-family:'OpenSansCondensedMedium', sans-serif; font-size:1.75rem; line-height:1.75rem; text-align:left; min-height:50px; grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2; background-color:rgba(0, 0, 0, 0.5);} .hero-ol-update div {text-align:right; line-height:1.3rem;} .hero-ol-thema {align-self:center; padding:10px; position:relative; font-size:2rem; line-height:2rem; align-items:flex-start; min-height:50px; text-align:left; grid-column-start:3; grid-column-end:4; grid-row-start:1; grid-row-end:3; background-color:rgba(0, 0, 0, 0.5);} .hero-slide {width:100%; height:60vh; position:relative; z-index:1; display:flex; align-items:center; background-color:#eee;} .hbild {display:inline-block; width:100%; height:100%;} #hero,#hero img, .starthero .slick-slide { width:100%; height:400px;} #reminder {display:none;width:100vw; height:100vh; left:0; top:0; display:none; position:fixed; z-index:20; justify-content:center; align-items:center; background-color:rgba(0,0,0,.80);} #reminder-wrap {width:95vw; max-width:550px; padding:20px 10px 10px; display:inline-block; position:relative; color:#fff; overflow:hidden; background-color:var(--ciFarbe);} #reminder-wrap form[name=reg_form_2] {display:none;} #reminder-wrap * {color:#fff; line-height:1rem;} #reminder-wrap h1 {margin-bottom:20px;} #reminder-wrap input[type=text] {padding:0 5px; color:var(--ciText); font-size:.8em; height:1.5rem;} #reminder-wrap .dsgvo_layer {background-color:transparent; border-color:transparent; color:#fff;} .dsgvo_paragraph {font-size:.8em; display:none;} #reminder-wrap a.dsgvo_link {color:#fff; font-size:.9em; text-decoration:none;} #reminder-wrap form[name=reg_form] input.submit {color:#333; width:auto !important; padding:5px 15px; color:#000;} #reminder-close {width:20px; height:20px; top:10px; right:10px; position:absolute; display:flex; justify-content:center; align-items:center;} #contentwrap {display:grid; grid-gap:var(--vspace) var(--vspace); grid-template-columns:1fr; grid-template-rows:auto auto auto;} #contentwrap a {font-weight:inherit; font-size:inherit; line-height:inherit; color:inherit; text-decoration:underline;} #spalte1 {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2;} #spalte2 {grid-column-start:1; grid-column-end:2; grid-row-start:2; grid-row-end:3;} #spalte0 {grid-column-start:1; grid-column-end:2; grid-row-start:3; grid-row-end:4;} #spalte0 img, #spalte1 img, #spalte2 img {width:100%; max-width:900px; height:auto;} #footer {padding:var(--vspace) 2vw; text-align:center; font-size:.9rem; line-height:1.2rem; background-color:#e5e5e5} #footer a {color:var(--ciText); font-size:inherit; line-height:inherit;} #top {position:absolute; top:5px; left:5px; width:920px; height:40px; background-color:#efefef; border-style:solid; border-color:silver; border-width:1px;} #menu {position:absolute; top:55px; left:5px; width:255px; background-color:#efefef; border-style:solid; border-color:silver; border-width:1px;} #content {position:absolute; top:55px; left:275px; width:650px;} #editblock {border-color:silver;} #intro {width:100vw; height:100vh; position:relative; z-index:0; background-image:url('../images/page/gefat_intro3.jpg'); background-size:cover; background-position:center;} .verlauf {width:100vw; height:100vh; opacity:.95; position:absolute; z-index:1; background:rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 100%); } #intro-footer {width:100vw; padding:50px 10px; color:#fff; text-align:center; background-color:#000; border-top:1px dashed #666;} #intro-logo {display:none;width:100%; height:100vh; top:50px; margin:0 auto; position:absolute; z-index:2; display:flex; justify-content:center; align-items:flex-start;} #intro-logo img {display:none;width:130px;} #intro-unten {width:100%; height:100vh; bottom:50px; position:absolute; z-index:2; display:flex; justify-content:center; align-items:flex-end; } #intro-unten img {display:none;width:40%;} #intro-mitte div {display:none;width:300px;} #intro-mitte {display:none;width:100%; height:100vh; top:-60px; right:2vw; margin:0 auto; position:relative; z-index:3; display:flex; justify-content:flex-end; align-items:center;} li.activemenu, li.normalmenu {display:inline-block; white-space:wrap; overflow:hidden; margin-left:20px; text-transform:uppercase;} li.activemenu {background-color:transparent;} div.menupadding {margin:0; padding:0; padding-left:5px;} ul.menusubpagelist {list-style-type:none; list-style-image:none; margin:0; padding-left:20px; white-space:nowrap; overflow:hidden; background-color:#ffffff;} ul.submenu, ul.mainmenu {list-style-type:none; list-style-image:none; margin:0; padding:0; text-align:right;} li.mainitem, h2.mainmenu, li.trenner {display:inline;} a.activemenu {font-family:'OpenSansCondensedMedium',sans-serif; font-size:1.1rem; color:var(--subMenuFarbeActive); letter-spacing:.5px;} a.normalmenu {font-family:'OpenSansCondensedMedium',sans-serif; font-size:1.15rem; color:var(--subMenuFarbe); letter-spacing:.5px;} a.activemainmenu {position:relative; top:- var(--mainMenuUnderline); font-family:'OpenSansCondensedMedium',sans-serif; color:var(--mainMenuFarbe); font-size:1.75rem; text-transform:uppercase; text-decoration:none;} a.normalmainmenu {position:relative; top:- var(--mainMenuUnderline); font-family:'OpenSansCondensedMedium',sans-serif; color:var(--mainMenuFarbe); font-size:1.75rem; text-transform:uppercase; text-decoration:none;} #mainnav a {background: linear-gradient(to right, var(--ciFarbe), var(--ciFarbe)), linear-gradient(to right, #fff, #fff); background-size:100% var(--mainMenuUnderline), 0 var(--mainMenuUnderline); background-position:100% 100%, 0 100%; background-repeat:no-repeat; transition:background-size 400ms;} #mainnav a.activemainmenu {background-size: 0 var(--mainMenuUnderline), 100% var(--mainMenuUnderline);} /* #mainnav li.mainitem:first-child {display:none;} Solange INTRO noch aktiv ist. dann diese zeile weg */ .myinput, input.text, textarea.text, select {border-style:solid; border-width:1px; border-color:silver; margin-top:1px; margin-bottom:1px;} .login_input {border-style:solid; border-width:1px; border-color:silver; margin-top:1px; margin-bottom:1px;} input.loginsubmit {margin-top:10px; margin-bottom:10px;} .login_checkbox {vertical-align:middle;} .login_submit_area {padding-top:5px;} select {background-color:#ffffff;} #lg_admin_buttons {display:none;} .thumbnail_layer {max-width:var(--maxBreite); margin:var(--pagePosition); display:grid; grid-gap:5px; grid-template-columns:repeat(1, 1fr);} .galeriethumb {width:100%; height:100%; object-fit:cover;} .fwxlightbox-item {position:relative; display:inline-block;} #lightbox {position:fixed !important;} #imageData #caption {font-weight:normal !important;} #imageData #caption p:last-child {font-size:12px;} #imageData #caption p:first-child {font-size:16px;} #imageData #caption h1 {margin-bottom:20px;} #prevLink, #nextLink {min-width:63px !important;} #prevLink:hover, #prevLink:visited:hover, #nextLink:hover, #nextLink:visited:hover {background-position-y:center !important;} /* CMS SLIDER - overlay - muss hier stehen weil imageslider.css nicht bearbeitbar ist :( */ .nivo-caption {text-shadow:none; position:absolute; top:0; background-color:#ffffff00 !important; width:100%; height:100%; display:grid ; align-content:end; justify-content:center;; z-index:1000; opacity:0.8;} .fwxgalleryslider-caption h3 {/*font-size:13px;*/ width:fit-content; display:inline-block; margin:0 0 20px; padding:10px; font-weight:400; color:#fff; background-color:#000000aa;} .fwxgalleryslider-caption {background-color:#ffffff00 !important;} #slidercontainer img { width: 100%; height: 100%; object-fit: cover; } select.field_select {width:100%; margin-bottom:15px; padding:5px; display:inline-block; position:relative; font-size:16px; color:var(--formTextCol); border:3px solid var(--formBorderCol); border-radius:5px; border-top-left-radius:0; background-color:var(--formBgCol);} .captcha {border:solid silver 1px; width:120px;} img.captcha {margin-top:8px; margin-bottom:1px;} input.captcha {margin-bottom:2px;} #editblock {max-width:var(--maxBreite); margin:0 auto !important; position:relative;} @media(hover:hover) and (pointer:fine) { a:hover, a:focus {background-size: 0 var(--mainMenuUnderline), 100% var(--mainMenuUnderline);} #mainnav a.normalmainmenu:hover, #mainnav a.normalmainmenu:focus {background-size: 0 var(--mainMenuUnderline), 100% var(--mainMenuUnderline);} #contentwrap a:hover {color:var(--ciFarbe);} #footer a:hover {color:var(--ciFarbe);} .form_layer .submit:hover {color:#fff; border:3px solid #fff; background-color:var(--submitHover);} ul.submenu a.normalmenu:hover {color:var(--subMenuFarbeActive);} } @media only screen and (min-width:400px){ .thumbnail_layer {max-width:var(--maxBreite); margin:var(--pagePosition); display:grid; grid-gap:5px; grid-template-columns:repeat(2, 1fr);} } @media only screen and (min-width:650px){ :root { --headerHoehe: 120px; --logoBreite: 110px; } * {font-size:1rem; line-height:1.5rem;} #header {padding:0 5%;} #contentwrap {grid-gap: calc(var(--vspace) * 2) var(--vspace); grid-template-columns:1fr 1fr; grid-template-rows:auto auto;} #pagecontent {padding-left:calc(5vw + var(--logoBreite)); padding-right:5%;} #spalte1 {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2;} #spalte2 {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2;} #spalte0 {grid-column-start:1; grid-column-end:3; grid-row-start:2; grid-row-end:3;} #hero,#hero img, .starthero .slick-slide {height:450px;} .hero-ol-update {font-size:2rem; line-height:2rem;} .hero-ol-thema {font-size:3rem; line-height:3rem;} #submenu,#mainnav {display:block;} } @media only screen and (max-device-width:800px) and (min-width:600px) and (orientation :landscape) { #hero,#hero img, .starthero .slick-slide {height:90vh;} } @media only screen and (min-width:800px){ .thumbnail_layer {grid-template-columns:repeat(3, 1fr);} } @media only screen and (min-width:1000px){ #hero,#hero img, .starthero .slick-slide {height:500px;} .thumbnail_layer {grid-template-columns:repeat(4, 1fr);} } @media only screen and (min-width:1310px){ #hero,#hero img, .starthero .slick-slide {height:600px;} } @media only screen and (min-width:1600px){ #hero,#hero img, .starthero .slick-slide {width:var(--maxBreite);} } .cl_cookie_privacy_layer {background-color:#ffffff !important;font-family:tahoma, arial; font-size:12px !important;} .cl_cookie_privacy_layer * {font-family:tahoma, arial; font-size:12px !important;} .cl_cookie_privacy_layer span {font-family:tahoma, arial; font-size:12px !important;} .cl_cookie_privacy_layer a {background-color:#cccccc !important;} .cl_cookie_privacy_layer a:first-of-type {background-color:#960a1e !important;} /* Privacy Layer - customized */ .cl_cookie_privacy_layer {width:100vw !important; height:100vh !important; display:grid; align-content:center; background-color:#666666cc !important; } .cl_cookie_privacy_layer > div {padding:20px !important; box-shadow: 0 0 0 5px #fff,20px 20px 50px 0 rgba(0, 0, 0, 0.5);} .cl_cookie_privacy_layer * {max-width:750px !important; background-color:#353c45 !important; border-radius:20px; color:#fff !important; } .cl_cookie_privacy_layer a {margin:20px 0 0; padding:10px 15px !important; color:#fff; background-color:#999 !important; border-radius:10px;} .cl_cookie_privacy_layer a:last-child {margin-left:0px;} #cl_privacy_link_y {color:#fff; background-color:#468b0c !important;} #cl_privacy_link_n {color:#fff; background-color:#8b0c36 !important; margin-right:40px !important;}