@charset "utf-8"; /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ * { margin:0; padding: 0; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* 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; } :root { --primary: #6E6D6D; /* Beispiel: Blau */ --highlight: #FF5033; /* Beispiel: Gelb */ --light: #FFFFFF; /* Beispiel: Hellgrau */ --grey: #F3F3F3; } /* roboto-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } h3 { font-size: 20px; text-transform: uppercase; color: var(--primary); } h1 { font-weight: 700; font-size: 35px; } h2 { font-weight: 700; font-size: 35px; } h4 { font-weight: 700; font-size: 45px; } .accent { color: var(--highlight); } body { font-family: 'Roboto', sans-serif; } .navi { z-index: 999; position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1200px; width: 100%; transition: 0.3s ease; /* Übergangsstil für das Sticky-Verhalten */ } .sticky_nav { position: fixed; height: 50px; background-color: rgba(20, 20, 20, 0.95); padding-inline: 100px; border-bottom-left-radius: 50px; /* Abrunden der linken unteren Ecke */ border-bottom-right-radius: 50px; /* Abrunden der rechten unteren Ecke */ padding-bottom: 100px; } .sticky_nav img { height: 75px; } .content { height: 75vh; } .hero_image { position: relative; width: 100%; height: 100vh; object-fit: cover; background-image: url(./assets/hero_grafik.jpg); background-position: center top; /* Hintergrundbild von der Mitte aus positionieren */ } .hero_image::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #333, #fff); /* Verlauf von dunkelgrau zu weiß */ mix-blend-mode: multiply; /* Blendmodus 'multiply' */ } .hero_content { position: absolute; z-index: 2; top: 30%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); min-width: 350px; max-width: 1200px; width: 100%; } .intro p { margin-top: 25px; } .info p { margin-top: 25px; } .large { width: 100%; /* border: solid 2px rgb(68, 0, 255); */ display: flex; justify-content: space-between; flex-wrap: wrap; height: 100%; } .timeline_wrap { width: 100%; /* border: solid 2px rgb(233, 214, 131); */ display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: column; height: 100%; } .timeline_wrap .wrapper { margin-top: 75px; } .timeline { margin-bottom: 75px; } .row { width: calc(50%); /* border: solid 2px rgb(0, 255, 170); */ padding: 25px; } .large .row { padding-inline: 50px; } .wrapper .row { width: calc(50% - 20px); } .light { color: var(--light) } .grey { background-color: var(--grey); } .grid { display: grid; grid-template-columns: minmax(150px, auto) minmax(150px, auto) ; grid-template-rows: 50% 50%; gap: 12px; margin-top: 75px; /* border: 2px solid black; */ color: var(--light); } .grid_item p { margin-top: 10px; max-width: 200px; /* border: 2px solid green; */ } .park_info_header { margin-top: 50px; } .row_pic { width: calc(50%); /* border: solid 2px rgb(0, 255, 170); */ max-height: 780px; overflow: hidden; } .row_pic img { width: 100%; object-fit: cover; height: 100%; } .wrapper { gap: 20px; max-width: 1200px; width: 100%; /* border: solid 2px red; */ margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .margin { margin-top: 100px; } .navi { align-items: center; justify-content: space-between; height: 120px; padding-top: 20px; } button.highlight { margin-top: 20px; padding: 10px 20px; border: none; border-radius: 51.5rem; background-color: var(--highlight); color: var(--light); cursor: pointer; transition: all 0.475s; } button.highlight:hover { background-color: var(--light); color: var(--highlight); border: 1px solid var(--highlight); } .btn_light { margin-block: 50px; padding: 10px 20px; border: none; border-radius: 51.5rem; background-color: var(--light); color: var(--highlight); cursor: pointer; transition: all 0.475s; } .btn_light:hover { background-color: var(--highlight); color: var(--light); border: 1px solid var(--light); } .park_info { background-color: var(--highlight); } .punkt { font-weight: 400; position: relative; color: var(--primary); } .punkt2 { font-weight: 700; position: relative; } .punkt::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -35px); width: 20px; /* Durchmesser des Kreises */ height: 20px; /* Durchmesser des Kreises */ background-color: var(--primary); /* Farbe des Kreises */ border-radius: 50%; /* Runder Kreis */ z-index: 80; /* Über dem Text */ } .punkt2::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -35px); width: 20px; /* Durchmesser des Kreises */ height: 20px; /* Durchmesser des Kreises */ background-color: var(--highlight); /* Farbe des Kreises */ border-radius: 50%; /* Runder Kreis */ z-index: 80; /* Über dem Text */ } .timeline { position: relative; } .timeline::after { content: ''; position: absolute; bottom: 33px; /* Position der Linie anpassen */ left: 0; width: 100%; /* Breite der Linie anpassen */ height: 2px; /* Dicke der Linie */ background-color: var(--primary); /* Farbe der Linie */ } .container{ width: 100%; max-width: 80rem; margin: 25px auto; } .accordion-item{ border-radius: .4rem; } .accordion-item hr{ border: 1px solid var(--primary); } .accordion-link{ font-size: 1.6rem; color: var(--primary); text-decoration: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } .accordion-link h3{ font-weight:400; font-size: 20px; } .accordion-link i{ color: var(--primary); padding: .5rem; } .accordion-link ul{ display:flex; align-items: flex-end; list-style-type: none; margin-left: 25px; } .accordion-link li{ font-size: 10px; color: var(--primary); padding: 0 0 1px 5px; } .accordion-link div{ display: flex; } .accordion-link .ion-md-arrow-down{ display: none; } .answer{ max-height: 0; overflow: hidden; position: relative; transition: max-height 650ms; } .answer p{ color:var(--primary)f; font-size: 15px; padding: 2rem; } .accordion-item:target .answer{ max-height: 20rem; } .accordion-item:target .accordion-link .ion-md-arrow-forward{ display: none } .accordion-item:target .accordion-link .ion-md-arrow-down{ display: block; } .divider { position: relative; height: 60vh; width: 100%; object-fit: cover; } .last { position: relative; width: 100%; height: 100%; /* border: 2px solid green; */ } .stoerer { position: absolute; max-width: 500px; min-width: 300px; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } footer { background-color: #1d1d1d; padding-top: 75px; } .imp { margin-top: 25px; } .foot_logo img { height: 150px; } .impressum { margin-top: 150px; padding: 50px; } a img { height: 120px; } a { text-decoration: none; } .fade_in { opacity: 0; transform: translateY(50px); /* Startposition von unten */ transition: opacity 0.5s, transform 0.8s; } .fade_in.active { opacity: 1; transform: translateY(0); /* Endposition */ } .fade_in .stagger { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; } .fade_in.active .stagger { opacity: 1; transform: translateY(0); z-index: 90; } /* Stagger-Effekt für die Elemente */ .fade_in .stagger:nth-child(1) { transition-delay: 0.1s; } .fade_in .stagger:nth-child(2) { transition-delay: 0.4s; } .fade_in .stagger:nth-child(3) { transition-delay: 0.6s; } .fade_in .stagger:nth-child(4) { transition-delay: 0.8s; } .fade_in .stagger:nth-child(5) { transition-delay: 1s; } @media screen and (max-width: 1200px) { .navi { padding-left: 20px; padding-right: 20px; } .timeline_wrap { padding-left: 20px; padding-right: 20px; } .sticky_nav { position: fixed; /* height: 50px; */ background-color: rgba(20, 20, 20, 0.8); padding-inline: 100px; } } @media screen and (max-width: 800px) { .hero_image { height: 75vh; } .wrapper { flex-direction: column; } .intro p { margin-top: 0px; } .row { width: 100%; } .wrapper .row { width: 100%; } .row_pic { width: 100%; } } @media screen and (max-width: 500px) { .grid { grid-template-columns: 1fr ; grid-template-rows: 20% 20% 20% 20%; gap:45px; text-align: center; } .park_info { padding-bottom: 150px; } .btn_light { position: absolute; margin-inline: auto; left: 50%; transform: translateX(-50%); } .grid_item { margin-inline: auto; text-align: center; } } @media screen and (max-width: 915px) { .timeline { flex-direction: column; padding-left: 50px; gap: 60px; margin-top: 50px; margin-bottom: 100px; } .timeline_wrap .wrapper { margin-block: 25px; padding-bottom: 50px; } .punkt::after { content: ''; position: absolute; top: 50%; left: 0%; transform: translate(-30px, -10px); width: 20px; /* Durchmesser des Kreises */ height: 20px; /* Durchmesser des Kreises */ background-color: var(--primary); /* Farbe des Kreises */ border-radius: 50%; /* Runder Kreis */ z-index: 1; /* Über dem Text */ } .punkt2::after { content: ''; position: absolute; top: 50%; left: 0%; transform: translate(-30px, -10px); width: 20px; /* Durchmesser des Kreises */ height: 20px; /* Durchmesser des Kreises */ background-color: var(--highlight); /* Farbe des Kreises */ border-radius: 50%; /* Runder Kreis */ z-index: 1; /* Über dem Text */ } .timeline::after { content: ''; position: absolute; top: 0; left: 29px; width: 2px; /* Dicke der Linie */ height: 100%; /* Höhe der Linie anpassen */ background-color: var(--primary); /* Farbe der Linie */ } }