@charset "UTF-8"; /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ menu ul { list-style: none; margin: 0; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @font-face { font-family: "Muto"; src: url("../font/muto-regular_v5.5.woff2") format("woff2"); src: url("../font/muto-regular_v5.5.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "Muto"; src: url("../font/muto-bold_v5.5.woff2") format("woff2"); src: url("../font/muto-bold_v5.5.woff") format("woff"); font-weight: 700; font-style: normal; } @font-face { font-family: "Muto"; src: url("../font/muto-light_v5.5.woff2") format("woff2"); src: url("../font/muto-light_v5.5.woff") format("woff"); font-weight: 200; font-style: normal; } @font-face { font-family: "Muto Book"; src: url("../font/muto-book_v5.5.woff2") format("woff2"); src: url("../font/muto-book_v5.5.woff") format("woff"); font-weight: 400; font-style: normal; } h1 { font-size: 2.5em; line-height: 1.2em; margin-bottom: 1.2em; font-weight: 700; } h2 { font-size: 2.5em; line-height: 1.2em; margin-bottom: 1.2em; font-weight: normal; } h3 { font-size: 1.3em; line-height: 1.3em; font-weight: normal; } /* ----------------------------------------- */ p { line-height: 1.3em; margin-bottom: 1.3em; } q { quotes: "„" "“"; } /* ----------------------------------------- */ hr { border: 0; border-bottom: 1px solid; border-color: inherit; margin-top: 2.6em; margin-bottom: 1.3em; } strong { font-weight: 700; } /* ----------------------------------------- */ figure { margin-bottom: 1.3em; } figcaption { font-size: 0.8em; line-height: 1em; } svg { height: 100%; } img { max-width: 100%; } /* ----------------------------------------- */ ul, ol { margin-bottom: 1.3em; margin-left: 2em; padding-left: 0; } /* ----------------------------------------- */ a, a:visited { color: inherit; text-decoration: underline; } a:focus, a:active, a:hover, a.active { color: inherit; text-decoration: none; } .silentlink, .silentlink:focus, .silentlink:visited { text-decoration: none; } .silentlink:hover, .silentlink:active, .silentlink.active { text-decoration: underline; } .nolink, .nolink:focus, .nolink:visited { text-decoration: none; } .nolink:hover, .nolink:active, .nolink.active { text-decoration: none; } /* ----------------------------------------- */ input, textarea { display: block; width: 100%; background-color: #FFFFFF; padding: 0.75em; margin-bottom: 1.3em; } textarea { height: 10em; } input::placeholder, textarea::placeholder { color: #878D90; } input[type=submit] { width: auto; padding-left: 2em; padding-right: 2em; text-transform: uppercase; cursor: pointer; } input[type=submit]:hover, input[type=submit]:active { background-color: #363132; color: #D5DAD9; } input[type=checkbox] { position: absolute; z-index: -1; width: 0; height: 0; } input[type=checkbox]:checked + label .checkbox:after { transform: translate(-50%, -50%) scale(1); } label { display: flex; } label p { width: 85%; } .checkbox { border: 2px solid #323031; width: 20px; height: 20px; display: inline-block; margin-right: 16px; position: relative; } .checkbox:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 12px; height: 12px; background-color: #323031; } html { --scroll-behavior: smooth; scroll-behavior: smooth; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Muto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 0.9rem; line-height: 1.3em; color: #0B0B0B; } section { padding-top: 1rem; padding-bottom: 2rem; height: auto; } .inner { max-width: 65em; margin: 0 auto; padding: 2em; } .light-section { background-color: #D6DBDA; color: #323031; } .dark-section { background-color: #363132; color: #D5DAD9; } .modal { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 11, 11, 0.75); display: flex; justify-content: center; align-items: center; cursor: pointer; } .modal[closed] { display: none; } .modal__text { background: #FFFFFF; font-size: 2.125em; line-height: 1.2em; padding: 10vw; border-radius: 0.5em; text-align: center; } .uniform__potty { position: absolute; left: -9999px; } header { position: fixed; z-index: 5; top: 0; left: 0; width: 100%; height: 3em; display: flex; align-items: center; justify-content: space-between; background-color: #d2d2d2; padding: 0 2em; } header .logo { height: 1.3em; } #close { cursor: pointer; height: 1.5em; } #hamburger { cursor: pointer; display: flex; align-items: center; } #hamburger div { font-weight: 200; font-size: 0.9em; line-height: 0; margin-right: 0.75em; } #hamburger svg { width: 2.1em; } .menu-header { height: 3em; display: flex; align-items: center; justify-content: flex-end; padding-right: 2em; } .menu-body { margin-left: 0; } .menu { position: absolute; z-index: 1; top: 0; right: 0; transform: translateY(-35em); transition: transform 0.35s; overflow: hidden; background-color: #fff; } .menu.active { transform: translateY(0); } .menu ul { list-style: none; } .main-menu-item, .main-menu-item:visited, .main-menu-item:focus { display: block; border-bottom: 1px solid; font-size: 1.3em; } .main-menu-item:hover, .main-menu-item:active, .main-menu-item.active { font-weight: bold; background-color: #d2d2d2; } .main-menu-item, .menu-footer { padding: 0.5em 1.5em; } .menu-footer { margin-top: 7em; margin-left: 0; display: flex; justify-content: space-between; font-weight: 200; } .secondary-menu-item { padding: 0 0.5em; } .columns { display: flex; flex-wrap: wrap; } .borders { border-top: 1px solid; border-bottom: 1px solid; padding: 1.3em 0; } .column { width: calc(50% - 2em); } .column:nth-of-type(odd) { margin-right: 2em; } .column:nth-of-type(even) { margin-left: 2em; } .appendix { padding-top: 1.3em; } .align-right { margin-left: calc(50% + 2em); } .download { display: flex; align-items: flex-end; margin-top: 1.3em; } .download svg { width: 2.5em; margin-right: 1.75em; } .download div { width: calc(100% - 2.5em); } .light-section .download { margin-left: calc(50% + 2em); } .light-section .download svg path { fill: #323031; } .dark-section .download svg path { fill: #D5DAD9; } .download + .kategorie { margin-top: 3em; } .kategorie { text-transform: uppercase; } .true-columns { columns: 2; column-gap: 2em; } .true-columns form { break-inside: avoid; } .columns-rule { column-rule: 1px solid; } details { border-top: 1px solid; border-bottom: 1px solid; margin-bottom: 1.3em; cursor: pointer; } details summary { cursor: pointer; padding: 1.25em 0; list-style-type: none; position: relative; font-size: 1.3em; } details summary::-webkit-details-marker { display: none; } details summary::after { position: absolute; top: 0.8em; right: 0; content: url("../svg/arrow_down.svg"); width: 1.2em; display: block; } details[open] summary { margin-bottom: 1.3em; border-bottom: 1px solid; } details[open] summary::after { content: url("../svg/arrow_up.svg"); } details .zitat-text { font-size: 1.3em; } .upcoming { position: relative; background-color: rgb(0, 157, 223); color: #FFFFFF; } .upcoming label { position: absolute; left: 10em; top: -3em; height: 3em; background-color: #FFFFFF; color: rgb(0, 157, 223); display: flex; align-items: center; justify-content: center; padding: 1em; gap: 1em; cursor: pointer; border-radius: 0.25rem 0.25rem 0 0; } .upcoming label:hover, .upcoming input:checked + label { background-color: rgb(0, 157, 223); } .upcoming label:hover .text, .upcoming input:checked + label .text { color: #FFFFFF; } .upcoming label:hover svg path, .upcoming input:checked + label svg path { fill: #FFFFFF; } .upcoming svg { height: 0.8em; } .upcoming svg path { fill: rgb(0, 157, 223); } .upcoming .icon { transform: rotate(180deg); transition: all 0.2s ease-in; } .upcoming input { appearance: none; display: none; } .upcoming input:checked + label .icon { transform: rotate(0deg); } .upcoming input ~ .details { max-height: 0; padding: 0; /* opacity: 0 */ overflow: hidden; transition: max-height 0.2s ease-out; } .upcoming input:checked ~ .details { max-height: 100vh; opacity: 1; transition: max-height 1s ease-in; } .upcoming .content { display: flex; flex-wrap: wrap; justify-content: space-evenly; padding-top: 1em; } .upcoming .event { background-color: rgba(255, 255, 255, 0.15); border-radius: 4em; padding: 0.5em 1.5em; margin: 0 0.5em 1em 0.5em; } .upcoming .event, .upcoming .event:visited { color: #FFFFFF; } .upcoming .event:hover, .upcoming .event:active { background-color: #FFFFFF; color: rgb(0, 157, 223); } /* adaptive height */ .flickity-viewport { transition: height 0.2s; } .flickity-prev-next-button { width: 4em; height: 4em; top: 3.5em; } .flickity-prev-next-button.next { right: -8vw; } .flickity-prev-next-button.previous { left: -8vw; } .flickity-button { border: none; background: #FFFFFF; border: 1px solid; border-color: #FFFFFF; } .flickity-button:disabled { opacity: 1; background: none; border: 1px solid; } .flickity-button:hover, .flickity-button:active { background: #FFFFFF; opacity: 1; border: 1px solid; border-color: #323031; } .light-section .flickity-button:disabled { border-color: #323031; } .light-section .flickity-page-dot.is-selected { background: #323031; } .dark-section .flickity-button:disabled { border-color: #D5DAD9; } .dark-section .flickity-button:disabled svg { fill: #D5DAD9; } .dark-section .flickity-button:hover, .dark-section .flickity-button:active { border-color: #FFFFFF; } .dark-section .flickity-page-dot.is-selected { background: #D5DAD9; } .flickity-button:focus, .flickity-page-dot:focus { box-shadow: none; } .flickity-page-dot { background: none; border: 1px solid; border-color: inherit; width: 0.8em; height: 0.8em; } .section-header { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 15em; display: flex; align-items: center; justify-content: center; } h1.section-title { color: #6F6F6F; font-weight: 200; text-transform: uppercase; letter-spacing: 5px; text-align: center; padding: 0 2em; margin-bottom: 0; } .section-menu { border: 1px solid black; border-right: none; } .section-menu .flickity-page-dots { display: none; } .section-menu-item { border-right: 1px solid black; padding: 0.5em 1em; display: flex; align-items: center; justify-content: center; cursor: pointer; width: 20%; height: 4.5rem; user-select: none; } .section-menu-item:hover, .section-menu-item:active, .section-menu-item.is-nav-selected { background-color: #878D90; color: #FFFFFF; } .slides { margin-bottom: 6em; } .slides .flickity-page-dots { bottom: -3em; } .slide { width: 100%; } .slide h1 { margin-bottom: 0; } .slide h2 { margin-bottom: 0.25em; } .slide p { font-size: 1.3em; border-bottom: 1px solid; padding-right: 50%; padding-bottom: 1em; margin-bottom: 3em; } .slide img { max-width: 80%; display: block; margin: 0 auto; } .card .column h2 { font-size: 1.3em; } .zitat { display: inline-block; margin-bottom: 2.6em; } .zitat-text, .zitat-titel { font-size: 2.5em; line-height: 1.2em; font-weight: 700; display: inline; } .zitat-text::before { content: "„"; display: inline; } .zitat-text::after { content: "“"; display: inline; padding-right: 0.5em; } .zitat-autor { text-align: right; font-size: 1.3em; } .zitat-autor.inline { display: inline; } .subline { font-size: 1.3em; margin-top: -2em; margin-bottom: 2.6em; } #coach { background: rgb(43, 43, 45); background: linear-gradient(180deg, rgb(43, 43, 45) 0%, rgb(83, 83, 85) 100%); height: 50vw; display: flex; align-items: center; justify-content: space-between; position: relative; padding-top: 3em; } #coach img { max-height: 100%; width: auto; margin-left: -7em; } .coach-text { margin-right: 5vw; color: #D5DAD9; } #netzwerk .button { display: block; text-decoration: none; border-bottom: 1px solid; padding-bottom: 1.3em; } #netzwerk .button:hover strong { text-decoration: underline; } #gmaps { height: 25em; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; margin-bottom: 3em; } .consent-button { display: inline-block; width: 20em; height: 20em; background-color: #FFFFFF; padding: 2.5em; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; background-color: #363132; color: #D5DAD9; } .consent-button:hover { background-color: #FFFFFF; color: #323031; } .anschrift { font-size: 1.3em; margin-bottom: 1.3em; } .social img { height: 25px; padding-right: 0.5em; } #kontakt_danke { margin-top: 2em; } footer section { min-height: 100vh; } footer h1 { font-size: 2.5em; margin-top: 1.3em; margin-bottom: 1.3em; } footer h2 { font-size: 1.3em; margin-top: 2.6em; } footer h3 { font-size: 0.9rem; margin-top: 1.3em; } footer svg { width: 1.5em; } footer .container { margin-top: 4em; display: flex; justify-content: space-between; } footer .columns { margin-top: 6em; } footer .column { margin-bottom: 2em; } footer .social { text-align: right; } footer .social img { height: 40px; padding-left: 0.5em; } footer .footer-menu-item { display: block; border-bottom: 1px solid; max-width: 25em; padding-left: 0.5em; line-height: 2.5em; } footer .footer-menu-item:hover { background: #FFFFFF; color: #323031; } /* ================================== * * bigger than normal * */ @media (min-width: 1200px) { body { font-size: 1rem; } #coach { height: 40vw; } .coach-text { margin-right: 15vw; margin-left: 5vw; } } @media (min-width: 1600px) { body { font-size: 1.3rem; } #coach { height: 35vw; } } /* ================================== * * smaller than normal * */ @media (max-width: 1200px) { .flickity-prev-next-button { display: none; } } @media (min-width: 901px) { .mobile-only { display: none; } } @media (max-width: 900px) { .desktop-only { display: none; } } @media (max-width: 900px) { #coach { display: block; height: auto; position: relative; } #coach img { display: block; height: 45vw; max-height: initial; margin-left: -5%; } .coach-text { background-color: #D6DBDA; max-width: 100%; margin-right: 0; color: #323031; padding: 2em; padding-bottom: 3em; } .coach-text .zitat { position: absolute; top: 12em; right: 10vw; color: #D5DAD9; } .coach-text .zitat-autor { padding-left: 2em; } .upcoming label { left: 2em; } } @media (max-width: 830px) { section { padding-top: 0; } .section-menu-item { width: 100%; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } .section-menu-item.is-nav-selected { background: none; color: #323031; } .cards .flickity-prev-next-button, .cards .flickity-prev-next-button:active, .cards .flickity-prev-next-button:hover { display: block; top: -4.5em; border: none !important; background: none; } .cards .flickity-prev-next-button.previous { left: 0; } .cards .flickity-prev-next-button.next { right: 0; } .cards .flickity-button:disabled { opacity: 0.4; } } @media (max-width: 660px) { body { font-size: 1rem; } main { overflow-y: hidden; } footer .social { text-align: left; } .inner, .coach-text { padding-left: 1em; padding-right: 1em; } .menu { transform: translateY(-40em); } .menu-footer { flex-direction: column; line-height: 1.5em; padding: 0.5em 1.5em; } .menu-footer span { display: none; } .main-menu-item, .main-menu-item:visited, .main-menu-item:focus { display: block; padding: 0.5em 1.5em; } .section-header { background: none !important; } .section-header h1 { color: #323031; } .column { width: 100%; } .column:nth-of-type(odd) { margin-right: 0; } .column:nth-of-type(even) { margin-left: 0; } .borders { border: none; padding-bottom: 0; } .appendix { margin-left: 0; padding-left: 0; border-top: 1px solid; } .true-columns { columns: 1; column-gap: none; } .anschrift { margin-top: 2em; } .columns-rule { column-rule: none; } .align-right { margin-left: 0; } .zitat-text br { display: none; } .zitat-autor { text-align: left; } .zitat-autor.inline { display: block; } .light-section .download { margin-left: 0; } .cards .flickity-prev-next-button.previous { left: -1em; } .cards .flickity-prev-next-button.next { right: -1em; } #coach img { height: 35vh; } .coach-text .zitat { position: static; color: inherit; margin-bottom: 2em; } .coach-text .zitat-autor { padding-left: 0; } #netzwerk img { padding: 0; } } @media (max-width: 430px) { .section-header { height: 12em; } .cards { padding-top: 2em; } .cards .flickity-prev-next-button, .cards .flickity-prev-next-button:active, .cards .flickity-prev-next-button:hover { top: 0; } .zitat { margin-bottom: 1em; } .zitat-text, .zitat-titel, h1 { font-size: 2em; line-height: 1.04em; } .zitat-autor { margin-top: 0.5em; } #coach img { width: 100%; height: auto; } } @media (max-width: 265px) { body { font-size: 0.81rem; } .inner, .coach-text { padding-left: 0.5em; padding-right: 0.5em; } } /*# sourceMappingURL=site.css.map */