@font-face { font-family: 'fontregular'; src: url('../fonts/Akkurat.woff2') format('woff2'), url('../fonts/Akkurat.woff') format('woff'), url('../fonts/Akkurat.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'fontbold'; src: url('../fonts/Akkurat-Bold.woff2') format('woff2'), url('../fonts/Akkurat-Bold.woff') format('woff'), url('../fonts/Akkurat-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'fontlight'; src: url('../fonts/Akkurat-Light.woff2') format('woff2'), url('../fonts/Akkurat-Light.woff') format('woff'), url('../fonts/Akkurat-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'fontmono'; src: url('../fonts/Akkurat-Mono.woff2') format('woff2'), url('../fonts/Akkurat-Mono.woff') format('woff'), url('../fonts/Akkurat-Mono.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } * { margin: 0px; padding: 0px; box-sizing: border-box; } ul.text, ol.text { padding-left: 1.2em; overflow:auto; } html { width: 100%; height: 100%; } body { font-family: fontlight, Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; -webkit-font-smoothing: antialiased; color: #2B2B2A; background-color: #fff; } hr { height: 1px; border: none; background-color: #2B2B2A; margin-top: 2em; margin-bottom: 2em; } .tbl { width: 100%; border: 0px; border-collapse: separate; border-spacing: 1px; margin-top: 1em; margin-bottom: 1em; } .tbltitle { font-family: fontbold; text-align: left; font-size: 1em; line-height: 1.8em; font-weight: bold; text-align: left; color: #E7E5E0; background-color: #5F5045; border: 1px solid transparent; border-bottom: 0; padding-left: 3px; } .tblsubtitle { font-family: fontregular; text-align: left; font-size: 1.1em; color: #2B2B2A; background-color: #E8CC9F; } .tblcolumntitle { font-family: fontregular; text-align: left; font-size: 0.9em; font-weight: bold; color: #2B2B2A; background-color: #E8CC9F; border: 1px solid transparent; padding: 3px; white-space: nowrap; vertical-align: top; } .tbltext { font-family: fontlight; font-size: 0.9em; line-height: 1.4em; color: #2B2B2A; background-color: #E7E5E0; border: 1px solid transparent; padding: 3px; vertical-align: top; } .tbltitle .helpicon { margin: 0.2em 0.3em 0px 0px; } .default .error, .articles .error { border: unset; border-left: 1px solid transparent; border-right: 1px solid transparent; border-radius: 0; } .title { font-family: fontlight; font-weight: normal; font-size: 2.8em; margin: 1em 0 1em 0; text-transform: uppercase; } .subtitle { font-family: fontlight; font-weight: normal; font-size: 1.4em; margin: 0.7em 0 0.5em 0; } .text { font-family: fontlight, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 1em; line-height: 1.5em; margin-bottom: 1em; } .tag { display: inline-block; text-decoration: none; margin: 0 0.3em 0.5em 0; color: #efefef; border-radius: 3px; border: 1px solid #5F5045; padding: 0 0.3rem; background-color: #5F5045; } .link { color: #2B2B2A; } .form { font-family: fontlight, Arial, Helvetica, sans-serif; font-size: 1em; line-height: normal; color: #2B2B2A; border: 1px solid #E7E5E0; background-color: #E7E5E0; margin-bottom: 1px; padding: 2px 1px 2px 1px; box-sizing: border-box; outline: none; } .form:not(:last-child) { margin-right: 0.3em; } .form optgroup { font-family: inherit; font-size: 1em; } .form_input { font-size: 1em; padding: 0.22em; } .form_input[type='text'], .form_textarea { -moz-appearance: none; -webkit-appearance: none; appearance: none; resize: none; } .form_input:focus, .form_textarea:focus { outline: none; } .form_input::placeholder { color: #2B2B2A; opacity: 0.5; } .form_select:not([multiple]) { padding: 0.3em 1.3em 0.3em 0.3em; font-size: 1em; overflow: hidden; background-color: #E7E5E0; border: 1px solid #E7E5E0; background-image: url("data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat, repeat; background-position: calc(100% - 0.5em) center; background-size: 0.65em auto, 100%; -moz-appearance: none; -webkit-appearance: none; appearance: none; } .form_select[multiple] { padding: 3px; font-size: 0.9em; border: 1px solid #E7E5E0; cursor: pointer; } .form_radio { margin-right: 5px; border: 1px solid; width: 0.8em; height: 0.8em; border-radius: 2px; vertical-align: middle; } .form_radio:checked, .form_checkbox:checked { background-color: #000; } .form_spamprotect { background-position: 7em 1em; width: 14em; width: 100%; } .form_checkbox { margin-right: 5px; vertical-align: middle; border: 1px solid; width: 0.8em; height: 0.8em; border-radius: 2px; } .form_dropdown_parent { padding-left: 3px; } .form_dropdown_child { padding-left: 3px; } .form_fieldset { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 0.6em; margin-bottom: 1em; } .form_fieldset legend { margin: 0 0 0 0.6em; padding: 0px 0.3em 0px 0.3em; } .form_btn { font-family: fontbold; display: inline-block; font-size: 1em; background-color: #5F5045; color: #E7E5E0; fill: #E7E5E0; border: 1px solid #5F5045; padding: 0.22em 1em; -moz-appearance: none; -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 0; } .image_left { margin-right: 1em; margin-bottom: 1em; } .image_right { margin-left: 1em; margin-bottom: 1em; } .pagenavigator, .link_btn { font-family: fontbold; display: inline-block; white-space: nowrap; font-size: 1em; background-color: #5F5045; color: #efefef; border: 1px solid #5F5045; padding: 0.22em 1em; text-decoration: none; } .text > .pagenavigator, .text > .link_btn { margin-bottom: 0.5em; } .pagenavigator:not(:last-of-type), .link_btn:not(:last-of-type) { margin-right: 0.3em; } .form_btn:hover, .link_btn:hover { background-color: #E8CC9F; color: #2B2B2A; fill: #2B2B2A; border-color: #E8CC9F; } .pagenavigator_active, .pagenavigator:hover { background-color: #E8CC9F; color: #2B2B2A; border: 1px solid #E8CC9F; } .bold { font-family: fontbold; } .italic { font-style: italic; } .underline { text-decoration: underline; } .error { display: block; border: 3px solid #993A42; padding: 0.5em; background-image: linear-gradient(45deg, rgba(153, 58, 66, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(153, 58, 66, 0.2) 50%, rgba(153, 58, 66, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%); background-size: 2em 2em; } .error ul { margin-left: 1em; list-style: none; } .error ul li { color: #2B2B2A; margin-bottom: 0.5em; line-height: 2.2em;} .error ul li::before { font-family: IcoFont; content: "\f026"; font-size: 2em; color: #993A42; vertical-align: middle;} .calendar { border-collapse: separate; border-spacing: 1px; margin-bottom: 1em; width: 100%; } .calendar.title { font-size: 1.8em; margin: 0; text-align: center; } .calendar .tblcolumntitle { text-align: center; cursor: pointer; } .calendar .row { height: 7em; } .calendar .cell { background-color: rgb(231, 229, 224); background-position: top right; background-size: 2em 1.5em; border: 1px solid transparent; color: #2B2B2A; vertical-align: top; width: 14.28%; } .calendar .cell.inactive { background-color: rgba(232, 204, 159, .7); } .calendar .day { display: block; font-family: fontbold; } .calendar .cell .editor { border: 1px solid #000; width: 0.8em; height: 0.8em; background-color: #fff; margin-right: 0.3em; vertical-align: baseline; } .calendar .cell .editor:checked { border: 1px solid #888; background-color: #888; } .calendar .category input:not(.editor) { display: none; } .calendar_btn { border: 1px solid #eee; font-size: 0.9em; background-color: #58382d; color: #ffffff; padding: 3px 0.6em; } .calendar .category { font-family: fontbold; position: relative; display: block; text-align: center; cursor: pointer; } .calendar .category_0 { background-color: #000; background-image: url(../graphics/ico_error.gif); background-repeat: no-repeat; background-position: 0.3em center; background-size: auto 70%; color: rgba(255, 255, 255, .8); } .calendar .category_1 { background-color: #BE1E2D; color: rgba(255, 255, 255, .8); } .calendar .category_2 { background-color: #F9ED31; color: rgba(0, 0, 0, .8); } .calendar .category_3 { background-color: #FBB03F; color: rgba(0, 0, 0, .8); } .calendar .category_4 { background-color: #F15A29; color: rgba(255, 255, 255, .8); } .calendar .category_5 { background-color: #2E3092; color: rgba(255, 255, 255, .8); } .calendar .category_6 { background-color: #EE2B7B; color: rgba(255, 255, 255, .8); } .calendar .category_7 { background-color: #00B050; color: rgba(255, 255, 255, .8); } .calendar .category_8 { background-color: #00B0F0; color: rgba(255, 255, 255, .8); } .calendar .category_9 { background-color: #C3C3C3; color: rgba(0, 0, 0, .8); } .calendar .category_10 { background-color: #05EB20; color: rgba(0, 0, 0, .8); } .calendar .category_11 { background-color: #0070C0; color: rgba(255, 255, 255, .8); } .calendar .category_12 { background-color: #D06800; color: #efefef; } .calendar .category_13 { background-color: #CC00FF; color: #efefef; } .calendar .category_14 { background-color: #DADDFF; color: rgba(0, 0, 0, .8); } .header { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .header > * { display: flex; flex-direction: column; align-items: flex-end; /* border: 1px solid; */ } .spacer { flex: 1 1 auto; } .header .logo { display: block; background-repeat: no-repeat; background-size: contain; background-position: left center; } .header .menu { position: relative; margin: auto; display: flex; flex-direction: row; /* border: 1px solid; */ } .header .menu > div { position: relative; } .header .menu a { font-family: fontlight; text-decoration: none; display: block; white-space: nowrap; color: #2B2B2A; } .header .menu a:hover, .header .submenu a:hover, .header .menu .active, .header .login:hover { color: #993A42; } .header .menu > div:hover .submenu { visibility: visible; } .header .menu > div:hover .submenu hr { animation: menu-line-in 0.2s linear forwards; } .header .submenu { position: absolute; left: -1em; visibility: hidden; display: flex; flex-direction: column; padding-bottom: 1em; background-color: rgba(255, 255, 255, 0.9); z-index: 1; } .header .submenu hr { height: 1px; width: 0px; color: #2B2B2A; border: #2B2B2A; background-color: #2B2B2A; } .header .submenu a { display: block; font-family: fontlight; font-size: 1em; line-height: 2em; margin: 0 1em; color: #2B2B2A; } .header .login { position: relative; display: block; margin: auto 1em; text-decoration: none; text-align: center; color: #2B2B2A; } .header .login::before { position: absolute; top: -1em; left: 0.4em; font-family: IcoFont; font-size: 1.5em; content: "\ed05"; display: inline-block; } .header .langselect { flex-direction: row; margin: auto; } .header .langselect a { display: block; font-family: fontlight; text-transform: uppercase; text-decoration: none; padding: 0px 0.5em; color: #2B2B2A; } .header .langselect a:not(:last-child) { border-right: 2px solid; } .header .search { margin: auto; } .header .search > a { display: block; text-decoration: none; color: #000; } .teasing { position: relative; } .teasing .mobilevideo, .teasing .video { position: relative; display: block; width: 100%; object-fit: cover; } .teasing .image { position: relative; width: 100%; height: 15em; background-repeat: no-repeat; background-size: cover; background-position: center; } .teasing > div { position: absolute; top: 0px; left: 0px; width:100%; height: 100%; } .teasing .news > div.active { animation: teasingnews-in 1s ease-in forwards; } .teasing .news > div.inactive { animation: teasingnews-out 1s ease-in forwards 1s; } .teasing .news > div { position: absolute; height: auto; background-color: #5F5045; } .teasing .news .title { font-family: fontlight; font-weight: normal; text-transform: uppercase; color: #eee; margin: 0px; } .teasing .news .description { font-family: fontlight; color: #eee; } .teasing .news .link {display: block; color: #eee; margin-bottom: 1em; } .teasing .news .link::after { font-family: IcoFont; font-size: 0.7em; content: "\ef1f"; margin-left: 0.3em; text-decoration: none; display: inline-block; } .teasing .news .picture { width: 100%; background-size: cover; } .two_col .tbl { width: 100%; border-collapse: collapse; } table.frm { width:100%; } .frmcolumntitle { display:flex; align-items:center; padding-bottom: 1em; padding-right:1em; } .frm .form_textarea, .frm .form_input { background-color: #E7E5E0; padding: 1em 3em; margin-bottom: 1em; outline: none; border: 1px solid transparent; border-radius: unset; } .frm .form_input + #password_strength { position: absolute; line-height: 3.3em; transform: translateX(-100%); } .frm .form_textarea::placeholder, .frm .form_input::placeholder { font-family: fontlight; color: #2B2B2A; } .frm .link_btn { border-radius: unset; border: 1px solid transparent; background-color: #E8CC9F; color: #2B2B2A; padding: 1em 3em; } .frm .form_btn { border-radius: unset; border: 1px solid transparent; background-color: #5F5045; color: #E7E5E0; padding: 1em 3em; } .frm .form_select { background-color: #E7E5E0; padding: 1em 3em; margin-bottom: 1em; outline: none; border: 1px solid transparent; border-radius: unset; width: 100%; } .header, .content, .leftnav { text-align: left; } .content .default:last-child, .content .bordered:last-child { margin-bottom: 6em; } .partners, .footer { clear: both; } .default + .box, .bordered + .box, .box + .default, .box + .bordered { margin-top: 4.5em; } .bordered + .bordered { margin-bottom: 1em; } #search { visibility: hidden; flex-direction: column; justify-content: center; position: absolute; background-color: #fff; top: 0; right: 2em; padding: 0 1em; transform: translateY(-3em); } #search .searchtext { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 1px solid #2B2B2A; color: #2B2B2A; width: 100%; font-size: 1.1em; padding: 0.2em 0.3em; } #search.active { display: flex; animation: search-in 0.2s ease-in forwards; } #search.inactive { animation: search-out 0.2s ease-in forwards; } #searchtext { outline: none; width: 20em; } /* Animations -------------------------------------------------------------------------------------------------------------------------------------- */ @keyframes mobilemenu-in { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @keyframes mobilemenu-out { 0% { visibility: visible; opacity: 1; } 100% { visibility: hidden; opacity: 0; } } @keyframes menu-line-in { 0% { width: 0px; } 100% { width: 40%; } } @keyframes mobilemenu-line-in { 0% { width: 0px; } 100% { width: 30%; } } @keyframes mobilesubmenu-in { 0% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes search-in { 0% { transform: translateY(-3em); visibility: visible; } 100% { transform: translateY(0); visibility: visible; } } @keyframes search-out { 0% { transform: translateY(0); visibility: visible; } 100% { transform: translateY(-3em); visibility: hidden; } } @keyframes webshop-in { 0% { transform: scale(0); } 80% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes teasingnews-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes teasingnews-out { 0% { opacity: 1; } 100% { opacity: 0; } } /* Darkmode ---------------------------------------------------------------------------------------------------------------------------------------- */ @media (prefers-color-scheme:light) { body { color: #000; background-color: #fff; } .main { background-color: transparent; } .menu a, .langselect a { color: #000; } } @media (prefers-color-scheme:dark) { } /* Mobile devices ---------------------------------------------------------------------------------------------------------------------------------- */ @media(min-width:300px) { html { scroll-padding-top: 4em; } body { background-image: none; padding-top: 4em; } .title { font-size: 1.9em; } .subtitle { font-size: 1.5em; } .title, .subtitle { hyphens: auto; -webkit-hyphens: auto; text-align: center; } .form_checkbox { width:2em; height:2em; } .main { width: 100%; } .header { position: fixed; top: 0; width: 100%; padding: 0.5em 1em 0.5em 1em; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); background-color: #fff; z-index: 4; } .header .logo { height: 2.2em; flex: 0 0 8em; } .header .webshop { position: relative; display: block; flex: 0 0 2em; height: 2em; margin-right: 1em; background-image: url(../graphics/icon_shoppingcart.svg); background-position: center; background-size: 100%; background-repeat: no-repeat; } .header .webshop > span { position: absolute; left: 2em; bottom: -0.3em; border-radius: 0.6em; display: inline-block; background-color: #f00; color: #fff; font-family: fontbold; font-size: 0.7em; padding: 0 0.3em; transform: scale(0); animation: webshop-in .5s ease-in forwards .5s; } .header .search { flex: 0 0 1%; margin-right: 1em; } .header .search > a { font-size: 1.5em; line-height: 2em; } .header .login, .header .langselect, .header .menu, .leftnav .categories, .teasing > div, .leftnav .articles .title { display: none; } #search { top: 0em; height: 3em; right: 1em; width: calc(100% - 2em); } .mobilemenu { display: inline-block; flex: 0 0 2em; height: 2em; background-image: url(../graphics/icon_mobile_menu.svg); background-position: center; background-size: 2em 2em; background-repeat: no-repeat; } .teasing .image { height: 10em; } .teasing .video { display: none; } .teasing .mobilevideo { height: 60vw; } .teasing .news { position: relative; width:77vw; height: 70vh; margin: -2em auto 0 auto; } .teasing .news > div { width:100%; top: 0; } .teasing .news > div > div:nth-child(1) { border-top: 1em solid #5F5045; border-left: 3em solid #5F5045; border-right: 3em solid #5F5045; } .teasing .news .title { font-size: 1.4em; text-align: center; } .teasing .news .description { font-size: 0.9em; margin: 1em 0px; text-align: center; } .teasing .news .link { text-align: center; } .teasing .news .picture { height: 43vw; } #menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: auto; background-color: #fff; visibility: hidden; z-index: 1; text-align: left; font-size: 1em; padding: 5em 0 5em 0; } #menu.active { animation: mobilemenu-in 0.2s ease-in forwards; } #menu.inactive { animation: mobilemenu-out 0.2s ease-out forwards; } #menu > div:nth-child(1) { display: flex; flex-direction: column; } #menu > div:nth-child(1) > div { flex: 1 1 auto; } #menu > div:nth-child(1) > label { display: block; cursor: pointer; } #menu > div:nth-child(1) > label > a, #menu > div:nth-child(2) > a, #menu > div:nth-child(3) > a { display: inline-block; line-height: 2.2em; font-family: fontregular; padding-left: 2em; padding-right: 0.5em; text-decoration: none; color: #2B2B2A; } #menu > div:nth-child(1) > input { display: none; } #menu > div:nth-child(1) > label + .submenu { display: none; opacity: 0; } #menu > div:nth-child(1) > input[type=checkbox].active + label + .submenu, #menu > div:nth-child(1) > input[type=checkbox].subactive + label + .submenu { display: block; opacity: 1; } #menu > div:nth-child(1) > input[type=checkbox]:checked + label + .submenu, #menu > div:nth-child(1) > input[type=checkbox].active + label + .submenu { display: block; animation: mobilesubmenu-in 0.2s ease-in forwards; } #menu > div:nth-child(1) > hr { height: 1px; color: #2B2B2A; border: #2B2B2A; background-color: #2B2B2A; margin-top: 2em; margin-bottom: 2em; } #menu .submenu { margin-bottom: 1.2em; } #menu .submenu hr { margin-left: 2em; height: 1px; color: #2B2B2A; border: #2B2B2A; background-color: #2B2B2A; width: 0px; margin-top: 0.5em; margin-bottom: 0.5em; } #menu > div:nth-child(1) > input[type=checkbox].active + label a { display: block; } #menu > div:nth-child(1) > input[type=checkbox].active + label a.active,#menu .submenu a.active { font-family: fontbold; color: #993A42; } #menu > div:nth-child(1) > input[type=checkbox]:checked + label + .submenu hr, #menu > div:nth-child(1) > input[type=checkbox].active + label + .submenu hr { animation: mobilemenu-line-in 0.2s linear forwards; } #menu > div:nth-child(2) { margin-top: 2em; } #menu > div:nth-child(3) > a { text-transform: uppercase; } #menu > div:nth-child(3) > a:not(:first-child) { padding-left: 0.5em; } #menu .submenu a { display: block; line-height: 2em; text-decoration: none; color: #2B2B2A; padding-left: 4em; } #menu .submenu ul { margin-left: 2em; } .default, .bordered { margin-left: 1em; margin-right: 1em; } .leftnav { display: block; margin-bottom: 5em; } .leftnav .articles { width: 100%; } .leftnav .articles > div { position: relative; margin: 0 1em; } .box { display: block; } .box > div { display: flex; flex-direction: column; align-items: stretch; } .box > div > div > div { margin: 2em 2em; } .box .col1 > div:nth-child(1) { background-color: #E8CC9F; color: #2B2B2A; flex: 1 1 auto; } .box .col1 > div:nth-child(2) { background-color: #E7E5E0; color: #2B2B2A; } .box .col2 > div:nth-child(1) { background-color: #5F5045; color: #ccc; } .box .col2 > div:nth-child(2) { background-color: #2B2B2A; color: #ccc; flex: 1 1 auto; } .box .title { font-size: 1.8em; text-transform: uppercase; text-align: center; } .box .light .link { color: #000; } .box .dark .link { color: #ccc; } .two_col .col1 > div { margin: 1em 0px; } .two_col .col2 > div { margin: 1em 0px; } .default .title { text-align: center; } .timeline { position: relative; margin-left: 1em; margin-right: 1em; display: block; } .timeline .milestone { position: relative; display: flex; flex-direction: column; justify-content: center; } .timeline > .spacer { display: none; } .timeline .milestone { padding-left: 2rem; } .timeline .milestone .title { font-family: fontbold; margin: 0; hyphens: auto; -webkit-hyphens: auto; } .timeline .milestone.col1 .title { font-size: 2em; text-align: left; } .timeline .milestone.col2 .title { font-size: 1.2em; text-align: left; } .timeline > .col1:not(.milestone), .timeline > .col2:not(.milestone) { padding: 1rem 0 0 2rem; } .timeline .milestone.col1::before { content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 100%; background-repeat: no-repeat; background-size: 0.8rem; background-position: center; background-image: url("data:image/svg+xml; charset=UTF8,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20511%20511%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C-630.631%2C-40.0793%29%22%3E%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C293.079%2C91.7577%29%22%3E%3Ccircle%20cx%3D%22592.748%22%20cy%3D%22203.518%22%20r%3D%22192.696%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A90px%3B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .timeline > div { position:relative; font-size: 0.8em; } .timeline > div:not(.milestone.col1)::before { position: absolute; content: ""; top: -0.4rem; left: 0; width: 2rem; height: calc(100% + 0.8rem + 1em); background-image: linear-gradient(0deg, #000 0%, #000 100%); background-size: 2px 100%; background-position: center; background-repeat: repeat-y; } .timeline > div:last-child::before { background-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%) !important; background-size: 2px 100%; } .timeline .image { position: relative; } .timeline .image::after { content: ""; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 1em; background-color: #f00; } .calendar.title { font-size: 1.3em; } .calendar .cell { height: 4em; } .calendar .tblcolumntitle { font-size: 0.5em; } .calendar .day { font-size: 0.7em; } .calendar .category { font-size: 0.7em; padding: 0.2em; margin: 0 0.2em 0.2em 0.2em; } .calendar .tblcolumntitle > span:nth-child(2), .calendar .category > span:nth-child(3) { display: none; } .calendar .category > span:nth-child(3) { position: absolute; top: 1.5em; font-size: 1rem; background-color: #efefef; border: 1px solid #000; border-radius: 0.3rem; color: #000; padding: 0.5rem; white-space: nowrap; z-index: +1; } .calendar .category.middle > span:nth-child(3) { transform: translateX(-50%); } .calendar .category.right > span:nth-child(3) { right: 0; } .calendar .category > input:not(.editor):checked ~ span:nth-child(3) { display: block; } .partners { background-color: #5F5045; } .partners, .socialmedia { padding: 2em 0; } .partners > div, .socialmedia > div { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .partners > div > a, .socialmedia > div > a { display: block; background-repeat: no-repeat; background-position: center; background-size: 80% 80%; flex: 0 0 33.33%; height: 5em; margin-bottom: 1.5em; } .socialmedia > div > a { flex: 0 0 16.66%; height: 3em; margin-bottom: unset; } .footer { font-size: 0.9em; padding: 2em 0px 4em 0px; } .footer > div:not(:first-child) { display: block; margin-bottom: 3em; } .footer > div > * { margin-bottom: 1em; } .footer > div > a { display: block; color: #000; } } /* Tablet devices ---------------------------------------------------------------------------------------------------------------------------------- */ @media(min-width:820px) { html { scroll-padding-top: unset; } body { padding: 0; } .title { font-size: 2.8em; } .subtitle { font-size: 1.4em; } .title, .subtitle { hyphens: unset; -webkit-hyphens: unset; text-align: unset; } .form_checkbox { width:1em; height:1em; } .header { position: relative; padding: 1em 2em; box-shadow: none; justify-content: stretch; } .header > * { } .header > *:not(.spacer) { flex: 0 0 1%; } .header .logo { height: 3.5em; flex: 0 0 11em; } .header .menu { display: flex; flex-direction: row; flex: 1 1 auto; justify-content: flex-end; } .header .menu a { font-size: 0.8em; margin-right: 1.5em; } .header .submenu hr { margin: 1.2em 1em; } .header .login { display: block; font-size: 0.8em; } .header .langselect { display: flex; } .header .langselect a { font-size: 1em; } .header .search > a { border-left: 2px solid; padding-left: 0.5em; font-size: 1em; line-height: normal; } #search { top: 0px; height: 3em; width: 25%; right: 2em; } #menu, .header .webshop, .mobilemenu { display: none; } .teasing { padding: unset; position: relative; } .teasing > div { display: block; } .teasing .image { height: 15em; } .teasing .video { display:block ;height: 35vw; } .teasing .mobilevideo { display: none; } .teasing .webshop { position: absolute; display: block; top: 4em; left: 6em; width:3em; height:3em; background-image: url(../graphics/icon_shoppingcart.svg); background-position: center; background-size: 100%; background-repeat: no-repeat; } .teasing .webshop > span { position: absolute; left:2.5em; bottom: 0; border-radius: 0.6em; display: inline-block; background-color: #f00; color: #fff; font-family: fontbold; font-size: 0.8em; padding: 0 0.3em; transform: scale(0); animation: webshop-in .5s ease-in forwards .5s; } .teasing .news { position: absolute; display: block; width: 27vw; max-width: 30%; flex-direction: unset; align-items: unset; bottom: 0px; right: 2em; margin: 0; } .teasing .news > div { width: 100%; top: unset; bottom: 0; margin: 0; } .teasing .news > div > div:nth-child(1) { border-top: 1.8em solid #5F5045; border-left: 1.8em solid #5F5045; border-right: 1.8em solid #5F5045; } .teasing .news .title { font-size: 1.2em; text-align: left; } .teasing .news .description { font-size: 0.8em; text-align: left; margin: 1em 0px; } .teasing .news .link { text-align: left; } .teasing .news .picture { height: 15vw; } .default { margin-left: 6em; margin-right: 6em; } .bordered { margin-left: 2em; margin-right: 2em; } .leftnav { display: flex; flex-direction: row; margin-bottom: 10em; } .leftnav .articles { flex: 0 0 75%; } .leftnav .articles > div { margin: 0 4em 0 2em; } .leftnav .articles .title { display: block; } .leftnav .categories ul { list-style: none; } .leftnav .categories ul li { margin-bottom: 1em; } .leftnav .categories ul > li > ul { margin-left: 2em; margin-top: 1em; } .leftnav .categories { display: block; flex: 0 0 25%; padding: 4em 1em 2em 4em; } .leftnav .categories a { display: inline-block; color: #2B2B2A; text-decoration: none; transition: color ease-out .2s; hyphens: auto; -webkit-hyphens: auto; } .leftnav .categories a:hover { color: #993A42; } .leftnav .categories a.active { font-family: fontbold; color: #993A42; } .leftnav .categories hr { height: 1px; color: #2B2B2A; border: #2B2B2A; background-color: #2B2B2A; width: 0px; animation: menu-line-in 0.5s linear forwards 0.5s; margin-top: 0.5em; margin-bottom: 0.5em; } .leftnav .submenu { flex: 0 0 25%; padding: 2em 1em 0 4em; } .leftnav .submenu ul { list-style: none; } .leftnav .submenu ul li a { display: block; color: #2B2B2A; text-decoration: none; line-height: 2em; } .leftnav .submenu a:hover { color: #993A42; } .leftnav .submenu a.active { font-family: fontbold; color: #993A42; } .leftnav .default { flex: 1 1 auto; margin-left: unset; margin-right: unset; padding: 2em 4em 0 0;} .box { display: flex; flex-direction: row; } .box > div { flex: 0 0 50%; display: flex; flex-direction: column; align-items: stretch; } .box > div > div > div { margin: 3em 4.5em; } .box .col1 > div:nth-child(1) { background-color: #E8CC9F; color: #2B2B2A; flex:1; } .box .col1 > div:nth-child(2) { background-color: #E7E5E0; color: #2B2B2A; } .box .col2 > div:nth-child(1) { background-color: #5F5045; color: #ccc; flex:1; } .box .col2 > div:nth-child(2) { background-color: #2B2B2A; color: #ccc; } .box .title { font-size: 1.8em; text-transform: uppercase; text-align: left; } .box .subtitle { font-size: 1.2em; } .box .light .link { color: #000; } .box .dark .link { color: #ccc; } .two_col { display: flex; flex-direction: row; } .two_col > div { flex: 0 0 50%; } .two_col .col1 > div { margin: 0; margin-right: 2em; } .two_col .col2 > div { margin: 0; margin-left: 2em; } .default { margin-left: 9em; margin-right: 9em; } .default .title { text-align: left; } .bordered { margin-left: 4.5em; margin-right: 4.5em; } .timeline { margin-left: 10em; margin-right: 10em; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 1em; } .timeline > div { position: relative; flex: 0 0 47%; font-size: 0.9em; } .timeline > .spacer { position: relative; display: block; flex: 0 0 6%; } .timeline > .spacer:not(.milestone)::after { content: ""; position: absolute; top: -0.4rem; left: 0; width: 100%; height: calc(100% + 0.8rem); background-image: linear-gradient(0deg, #000 0%, #000 100%); background-size: 2px 100%; background-position: center; background-repeat: repeat-y; } .timeline > .spacer:last-of-type::after { background-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%); background-size: 2px 100%; } .timeline .milestone .title { hyphens: unset; -webkit-hyphens: unset; } .timeline .milestone { padding: 0; } .timeline .milestone.col1 .title { font-size: 2em; text-align: right; } .timeline .milestone.col2 .title { font-size: 1.2em; } .timeline .milestone.spacer::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 0.6rem; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml; charset=UTF8,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20511%20511%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C-630.631%2C-40.0793%29%22%3E%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C293.079%2C91.7577%29%22%3E%3Ccircle%20cx%3D%22592.748%22%20cy%3D%22203.518%22%20r%3D%22192.696%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A90px%3B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .timeline > .col1:not(.milestone) .title, .timeline > .col2:not(.milestone) .title { font-size: 1.4em; } .timeline > .col1:not(.milestone) .subtitle, .timeline > .col2:not(.milestone) .subtitle { font-size: 1.2em; } .timeline > .col1:not(.milestone), .timeline > .col2:not(.milestone) { padding: 1rem 0; } .timeline .milestone.col1::before, .timeline > div:not(.milestone.col1)::before, .timeline > div:last-child::before { background-image: unset !important; } .calendar .cell { height: 8em; } .calendar .tblcolumntitle { font-size: 0.9em; } .calendar .day { font-size: 1em; } .calendar .category { padding: 0.5em 0; margin: 0 0.3em 0.3em 0.3em; font-size: 0.7em; } .calendar .category > span:nth-child(2) { display: none; } .calendar .tblcolumntitle > span:nth-child(2), .calendar .category > span:nth-child(3) { display: inline; } .calendar .category > span:nth-child(3) { position: unset; top: unset; font-size: unset; background-color: unset; border: none; border-radius: unset; color: unset; padding: unset; white-space: unset; z-index: initial; } .calendar .category.middle > span:nth-child(3) { transform: unset; } .calendar .category.right > span:nth-child(3) { right: unset; } .partners, .socialmedia { padding: 2em; } .partners > div > a, .socialmedia > div > a { display: block; background-repeat: no-repeat; background-position: center; flex: 0 0 20%; height: 6em; margin-bottom: 3em; } .socialmedia > div > a { flex: 0 0 10%; height: 4em; margin-bottom: unset; } .footer { display: flex; flex-direction: row; justify-content: center; text-align: left; } .footer > div { padding-right: 4em; } .footer > div:nth-child(3) { border-left: 1px solid; padding-left: 4em; } } @media(min-width:1000px) { .header .menu a { font-size: 0.8em; margin-right: 2em; } .header .login { font-size: 0.8em; } .header .langselect a { font-size: 1em; } .two_col .col1 > div { margin: 0; margin-right: 4.5em; } .two_col .col2 > div { margin: 0; margin-left: 4.5em; } } /* Desktop PC -------------------------------------------------------------------------------------------------------------------------------------- */ @media(min-width:1800px) { .body { text-align: center; } .header { padding: 1.5em 4.5em; } .header .logo { height: 4em; flex: 0 0 15em; } .header .menu a { font-size: 0.9em; margin-right: 1.5em; } .header .submenu hr { margin: 1.5em 1em; } .header .login { font-size: 0.9em; } .header .langselect a { font-size: 1.1em; } .header .search a { font-size: 1.1em; } #search { background-color: #fff; height: 3em; right: 4em; } .teasing > div { left: 50%; margin-left: -900px; } .teasing .image { left: 0px; margin-left: unset; width: 100%; height: 20em; max-width: unset; } .teasing .video { height: 35vw; } .teasing .news { right: 4em; width: calc((100% - 8em) / 3.33); } .teasing .news > div > div:nth-child(1) { border-top: 2em solid #5F5045; border-left: 2em solid #5F5045; border-right: 2em solid #5F5045; } .teasing .news .title { font-size: 1.8em; } .teasing .news .description { font-size: 1em; margin: 1em 0px; } .teasing .news .picture { height: 15em; } .teasing .webshop { left: 10em; width:4em; height:4em; } .teasing .webshop > span { left:3.5em; } .header, .content { margin-left:auto; margin-right: auto; max-width: 1800px;} .timeline .milestone.col1::after { content: ""; position: absolute; top: 50%; margin-top: -0.4rem; right: -1.3rem; width: 0.8rem; height: 0.8rem; } .calendar .category { padding: 0.5em 0; margin: 0 0.3em 0.3em 0.3em; font-size: 0.9em; } .partners, .socialmedia { padding: 2em 4.5em; } .partners > div, .socialmedia > div { max-width: 1800px; margin-left: auto; margin-right: auto; } .default .title { max-width: 50%; } }