@font-face { font-display: swap; font-family: 'Fryas Standskrift'; font-style: normal; font-weight: 400; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/fryas-standskrift.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Jacques Francois Shadow'; font-style: normal; font-weight: 400; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/jacques-francois-shadow-v25-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'UnifrakturMaguntia'; font-style: normal; font-weight: 400; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/unifrakturmaguntia-v20-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Germania One'; font-style: normal; font-weight: 400; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/germania-one-v20-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Alex Brush'; font-style: normal; font-weight: 400; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/alex-brush-v22-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Style Script'; font-style: normal; font-weight: 400; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/style-script-v11-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 100; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-100.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 100; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-100italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 200; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-200.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 200; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-200italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-300.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 300; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-300italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 400; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 500; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-500italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 600; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-600italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-700.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 700; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-700italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 800; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-800.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 800; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-800italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 900; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-900.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 900; src: url('https://www.geschichtskanal.de/gestalt/schriftarten/poppins-v22-latin-900italic.woff2') format('woff2'); } @import url('schriftarten/poppins.css'); :root { --farbe-marke: hsl(214, 77%, 53%); --farbe-marke_h: 214; --farbe-marke_s: 77%; @media (prefers-color-scheme: light) { --farbe-grund-1: hsl(0, 0%, 100%); --farbe-grund-2: hsl(0, 0%, 93%); --farbe-grund-3: hsl(0, 0%, 79%); --farbe-text-1: black; --farbe-text-2: #575859; --schatten: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); --farbe-text-verweis: var(--farbe-text-1); --farbe-text-verweis: blue; --farbe-text-besucht: purple; --farbe-text-schweben: var(--farbe-text-2); --farbe-text-schweben: var(--farbe-text-1); --farbe-text-klick: hsl(0, 100%, 40%); } @media (prefers-color-scheme: dark) { --farbe-grund-1: hsl(223, 14%, 10%); --farbe-grund-2: hsl(218, 19%, 17%); --farbe-grund-3: hsl(215, 19%, 22%); --farbe-text-1: rgb(255, 255, 250); --farbe-text-2: #B3B4B6; --schatten: 0 2px 4px 0 rgba(255, 255, 255, 0.2), 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.2); --farbe-text-verweis: blue; --farbe-text-verweis: hsl(240, 100%, 70%); --farbe-text-verweis: rgb(0, 225, 255); --farbe-text-besucht: hsl(187, 100%, 30%); --farbe-text-besucht: hsl(300, 100%, 40%); --farbe-text-schweben: var(--farbe-text-2); --farbe-text-schweben: var(--farbe-text-1); --farbe-text-klick: red; } --farbe-details-grund: var(--farbe-grund-2); --farbe-summary-text: var(--farbe-text-2); --farbe-summary-dreieck: var(--farbe-text-2); --farbe-summary-trennlinie: var(--farbe-text-2); --farbe-grund-verweis: hsla(var(--farbe-marke_h), var(--farbe-marke_s), 70%, 100%); --farbe-grund-schweben: hsla(var(--farbe-marke_h), var(--farbe-marke_s), 75%, 100%); --schrift-klein: clamp(1.28rem, 0.17vw + 1.21rem, 1.43rem); --schrift-normal: clamp(1.6rem, 0.34vw + 1.46rem, 1.9rem); --schrift-mittel: clamp(2rem, 0.61vw + 1.76rem, 2.53rem); --schrift-gross: clamp(2.5rem, 1vw + 2.1rem, 3.38rem); --schrift-sehrgross: clamp(3.13rem, 1.56vw + 2.5rem, 4.5rem); --schrift-uebergross: clamp(3.91rem, 2.38vw + 2.96rem, 6rem); --schrift-riesig: clamp(4.88rem, 3.54vw + 3.47rem, 8rem); --aussenrand-abstand: var(--schrift-riesig); --olh-farbe-formleiste: rgb(255, 248, 230); --olh-farbe-fryas: darkred; --olh-farbe-original: darkgoldenrod; --olh-farbe-bearbeitet:darkgreen; --olh-farbe-woertlich: navy; --olh-farbe-deutsch: black; } *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } body { font-size: var(--schrift-normal); min-height: 100vh; background-color: var(--farbe-grund-1); font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--farbe-text-1); } ul { list-style: none; } a { color: var(--farbe-text-verweis); text-decoration: none; } a:visited { color: var(--farbe-text-besucht); } a:hover { } main .unbesucht, #fusszeile .unbesucht { color: var(--farbe-text-verweis); } main { a { position: relative; } a::after { content: ''; height: 2px; width: 0; background: var(--farbe-text-verweis); position: absolute; bottom: 0; left: 0; transition: 150ms ease-in-out; } a:hover::after { width: 100%; } #zeitlinie_sektion li, #karten_sektion .karte { a { display: inline-block; background-color: var(--farbe-marke); background-color: var(--farbe-grund-2); border: 0.4rem solid var(--farbe-marke); } a:hover { background-color: transparent; background-color: var(--farbe-grund-1); transition: 150ms ease-in-out; box-shadow: 0 2px 4px 0 rgba(121, 120, 120, 0.2), 0 4px 8px 0 rgba(121, 120, 120, 0.2), 0 6px 20px 0 rgba(121, 120, 120, 0.2); box-shadow: var(--schatten); animation: schalter-animation 300ms; } a:hover::after { width: 0; } } #zeitlinie_sektion a { height: 100%; padding: 1rem; border-radius: 2rem; hr { margin: 3px 0 2px; border: 0; border: 1px solid var(--farbe-marke); } } #karten_sektion a { padding: 0.8rem 1.6rem; border-radius: 5rem; margin-top: auto; transition: all 300ms ease; } } a:active { color: var(--farbe-text-klick); } .flex-zentriert { display: flex; justify-content: center; align-items: center; } #fusszeile { #anfang-pfeil { font-size: clamp(20px, 10.909px + 2.273vw, 40px); font-size: 5rem; z-index: 9; position: fixed; bottom: clamp(10px, 5.455px + 1.136vw, 20px); bottom: 25px; right: 10px; } #anfang-pfeil:after { width: 0; } #anfang-pfeil, #anfang-pfeil:visited { color: var(--farbe-text-2); } #anfang-pfeil:hover { color: var(--farbe-text-schweben); } } h1 { font-size: var(--schrift-sehrgross); text-align: center; } h2 { font-size: var(--schrift-gross); text-align: center; } h3 { font-size: var(--schrift-mittel); text-align: left; margin-top: 2rem; } .scroll-abstand { scroll-margin-top: 7rem; } @keyframes schalter-animation { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { transform: scale(1); } 75% { transform: scale(1.05); } 100% { transform: scale(1); } } #BLOCKIERT__kopfzeile { nav { position: absolute; top: 0; left: 0; background: var(--farbe-grund-2); padding: 1.5rem; border-radius: 0 0 2.5rem 0; } ul { display: none; } #hamburg_schalter { display: none; } #hamburg_schalter:checked ~ ul { display: block; } svg { fill: var(--farbe-text-1); } @media (width <= 600px) { margin-top: 8rem; } @media (width > 600px) { label[for="hamburg_schalter"] { display: none; } nav { position: relative; border-radius: 0 0 0 0; } ul { display: flex; flex-direction: row; gap: 2rem; } } } #kreisbild_sektion { display: flex; padding: 0 var(--aussenrand-abstand); gap: var(--aussenrand-abstand); align-items: center; .kreisbild_sektion_text { text-align: center; width: 90vw; color: var(--farbe-text-2); } .titel { color: var(--farbe-text-1); } .untertitel { color: var(--farbe-marke); } .kreisbild_sektion_bild { overflow: hidden; border-radius: 50%; border: clamp(3px, 1vw, 30px) solid var(--farbe-marke); display: flex; justify-content: center; align-items: center; img { height: 100%; } height: 50rem; width: 50rem; max-height: 90vw; max-width: 90vw; } @media (width <= 768px) { flex-direction: column; } @media (width >= 769px) { flex-direction: row; justify-content: space-evenly; align-items: center; flex-wrap: wrap; .kreisbild_sektion_text { width: 40%; p { text-align: left; } } .kreisbild_sektion_bild { max-height: 40vw; max-width: 40vw; } } } #zeitlinie_sektion { margin-top: 7rem; padding: 0 0rem 0 0rem; text-align: center; nav { background-color: var(--farbe-grund-2); padding: 0; margin: 0; } .flex_behaelter { display: flex; gap: 1em; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: calc(2rem - 5px); scrollbar-width: thin; background-color: var(--farbe-grund-2); padding: 3rem 0 3rem 2rem; li { scroll-snap-align: start; } } } #BLOCKIERT_zeitlinie_sektion { margin-top: 7rem; padding: 0 2rem; text-align: center; nav { position: relative; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; scrollbar-width: thin; padding: 8rem 0; display: flex; align-items: center; background-color: var(--farbe-grund-2); } .flex_behaelter { position: absolute; display: flex; height: 9rem; left: 2rem; justify-content:center; align-items:stretch; gap: 1rem; list-style-type: none; background-color: var(--farbe-grund-2); overflow-x: auto; scroll-snap-type: x mandatory; } li { scroll-snap-align: start; } a { display: block; height: 100%; padding: 1rem; text-decoration:none; color: var(--farbe-text-verweis); background-color: var(--farbe-marke); border-radius: 2rem; border: 0.4rem solid var(--farbe-marke); hr { margin: 3px 0 2px; } } a:hover { background-color: transparent; transition: 150ms ease-in-out; color: var(--farbe-text-schweben); } a:hover::after { width: 0; } .box-1 { width: 20rem; } .box-2 { width: 30rem; } .box-3 { width: 40rem; } } #zeitlinie_sektion::-webkit-scrollbar { display: none; } #karten_sektion { padding: 7rem 1rem; h2 { text-align: center; } .karten_behaelter { margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr)); gap: 2rem; justify-items: center; align-items: stretch; .karte { width: 100%; width: 35rem; max-width: calc(90% - (2 * 2rem)); padding: 6rem 2rem; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2rem; background-color: var(--farbe-grund-2); border-radius: 10rem; &:hover { box-shadow: 0 2px 4px 0 rgba(121, 120, 120, 0.2), 0 4px 8px 0 rgba(121, 120, 120, 0.2), 0 6px 20px 0 rgba(121, 120, 120, 0.2); box-shadow: var(--schatten); } img { width: 100%; max-width: 40rem; height: auto; border-top-left-radius: 3rem; border-top-right-radius: 3rem; } * { text-align: center; } } @media (width <= 768px) { display: flex; flex-direction: column; align-items: center; .karte { width: 100%; } } } } #banner-1 { display: flex; justify-content: center; align-items: center; height: 10rem; margin: 0; background: linear-gradient(135deg, hsla(214, 77%, 53%, 100%), hsla(214, 77%, 53%, 100%)); background: linear-gradient(135deg, hsla(var(--farbe-marke_h), var(--farbe-marke_s), 25%, 100%), hsla(var(--farbe-marke_h), var(--farbe-marke_s), 45%, 100%)); font-family: 'Arial', sans-serif; perspective: 1000px; .behaelter > .text { font-size: 3.5rem; font-weight: bold; color: goldenrod; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15), 3px 3px 0px rgba(0, 0, 0, 0.3), 5px 5px 0px rgba(0, 0, 0, 0.6); } .aktiv > .text { transform: rotateY(0deg); transform-style: preserve-3d; animation: rotiere-3d 4s 1 linear; } } @keyframes rotiere-3d { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } #banner-2 { --bg: #000000; --clr-1: #00c2ff; --clr-2: #33ff8c; --clr-3: #ffc640; --clr-4: #e54cff; --blur: 1rem; --fs: clamp(3rem, 8vw, 7rem); --ls: clamp(-1.75px, -0.25vw, -3.5px); min-height: 10rem; display: grid; place-items: center; background-color: var(--bg); color: #fff; font-family: "Poppins" "Inter", "DM Sans", Arial, sans-serif; *, *::before, *::after { font-family: inherit; box-sizing: border-box; } .inhalt { text-align: center; } .schriftzug { font-size: var(--fs); font-weight: 800; letter-spacing: var(--ls); position: relative; overflow: hidden; background: var(--bg); margin: 0; } .nordlicht { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; mix-blend-mode: darken; pointer-events: none; } .nordlicht_element { overflow: hidden; position: absolute; width: 60vw; height: 60vw; background-color: var(--clr-1); border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; filter: blur(var(--blur)); mix-blend-mode: overlay; } .nordlicht_element:nth-of-type(1) { top: -50%; animation: nordlicht-border 6s ease-in-out infinite, nordlicht-1 12s ease-in-out infinite alternate; } .nordlicht_element:nth-of-type(2) { background-color: var(--clr-3); right: 0; top: 0; animation: nordlicht-border 6s ease-in-out infinite, nordlicht-2 12s ease-in-out infinite alternate; } .nordlicht_element:nth-of-type(3) { background-color: var(--clr-2); left: 0; bottom: 0; animation: nordlicht-border 6s ease-in-out infinite, nordlicht-3 8s ease-in-out infinite alternate; } .nordlicht_element:nth-of-type(4) { background-color: var(--clr-4); right: 0; bottom: -50%; animation: nordlicht-border 6s ease-in-out infinite, nordlicht-4 24s ease-in-out infinite alternate; } } @keyframes nordlicht-1 { 0% { top: 0; right: 0; } 50% { top: 100%; right: 75%; } 75% { top: 100%; right: 25%; } 100% { top: 0; right: 0; } } @keyframes nordlicht-2 { 0% { top: -50%; left: 0%; } 60% { top: 100%; left: 75%; } 85% { top: 100%; left: 25%; } 100% { top: -50%; left: 0%; } } @keyframes nordlicht-3 { 0% { bottom: 0; left: 0; } 40% { bottom: 100%; left: 75%; } 65% { bottom: 40%; left: 50%; } 100% { bottom: 0; left: 0; } } @keyframes nordlicht-4 { 0% { bottom: -50%; right: 0; } 50% { bottom: 0%; right: 40%; } 90% { bottom: 50%; right: 25%; } 100% { bottom: -50%; right: 0; } } @keyframes nordlicht-border { 0% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; } 25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; } 50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; } 75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; } 100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; } } .ankleben { position: sticky; top: 0; } #BLOCKIERT_NEUE_VERSION_HOVER-STRICH-ANIMATION_statt___kopf-navigation-1 { @media (prefers-color-scheme: light) { --farbe-link: black; --farbe-box-shadow: rgba(0, 0, 0, 0.1); --farbe-grund-nav: white; --farbe-grund-ul-mobil: white; --farbe-grund-ul-mobil:var(--farbe-grund-3); --farbe-grund-blur: rgba(255, 255, 255, 0.2); --farbe-grund-hover: #f0f0f0; --farbe-grund-hamburg-label: lch(95.15% 0.01 296.81); } @media (prefers-color-scheme: dark) { --farbe-link: white; --farbe-box-shadow: rgba(255, 255, 255, 0.1); --farbe-grund-nav: #232933; --farbe-grund-ul-mobil: #232933; --farbe-grund-blur: rgba(255, 255, 255, 0.2); --farbe-grund-hover: #2E3744; --farbe-grund-hamburg-label: beige; } @media (prefers-color-scheme: light) { --farbe-grund-1: rgb(255, 255, 255); --farbe-grund-2: rgb(237, 237, 237); --farbe-grund-3: rgb(202, 202, 202); --farbe-text-1: black; --farbe-text-2: #575859; --schatten: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); } @media (prefers-color-scheme: dark) { --farbe-grund-1: #15171C; --farbe-grund-2: #232933; --farbe-grund-3: #2E3744; --farbe-text-1: rgb(255, 255, 250); --farbe-text-2: #B3B4B6; --schatten: 0 2px 4px 0 rgba(255, 255, 255, 0.2), 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.2); } background: var(--farbe-grund-2); box-shadow: 1px 1px 4px 0 var(--farbe-box-shadow); width: 100%; z-index: 2; .schalter { display: none; } .schalter:checked ~ nav { .ul-mobil { display: flex; max-height: 50vh; @media (width <= 400px) { width: 100%; max-width: 100%; transition: max-height .2s ease-out; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } @media (401px <= width <= 800px) { max-width: 61.8vw; transition: max-width .2s ease-out; border-bottom-left-radius: 1.5rem; } } .ul-desktop > .hamburg-li > .hamburg-label > .hamburg-strich { & { background: transparent; } &:before { transform: rotate(-45deg); top:0; } &:after { transform: rotate(45deg); top:0; } } } @media (width <= 800px) { .mobil-verbergen { display: none; } } nav { background-color: var(--farbe-grund-nav); box-shadow: 3px 3px 5px var(--farbe-box-shadow); width: 100%; top: 0; left: 0; #logo { initial-letter: 2; color: goldenrod; font-family: 'Germania One', serif; font-weight: 900; font-style: italic; font-size: 2.3rem; } ul { list-style: none; li { text-decoration: none; color: var(--farbe-link); border-top: 1px solid grey; } } li:hover { background-color: var(--farbe-grund-hover); } position: relative; .ul-mobil { position: absolute; top: 0; right: 0; max-height: 0; overflow: auto; max-width: 0; z-index: 2; background-color: var(--farbe-grund-ul-mobil); box-shadow: -10px var(--farbe-box-shadow); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; li { width: 100%; padding: 2rem 3rem; a { } } } .ul-desktop { width: 100%; display: flex; justify-content: flex-end; align-items: center; li { padding: 1rem 3rem; border:none; } li:first-child { margin-right: auto; } .hamburg-li { @media (width > 800px) { display: none; } @media (width <= 800px) { display: block; z-index: 3; padding: 0; margin-right: 1.4rem; } .hamburg-label { cursor: pointer; display: block; padding: 14px 10px; position: relative; user-select: none; background-color: var(--farbe-grund-hamburg-label); background-color: var(--farbe-grund-verweis); border-radius: 6px; .hamburg-strich { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .hamburg-strich:before, .hamburg-strich:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .hamburg-strich:before { top: 5px; } .hamburg-strich:after { top: -5px; } } .hamburg-label:hover { background-color: var(--farbe-grund-schweben); } } .hamburg-li:hover { background-color: transparent; transition: 150ms ease-in-out; animation: schalter-animation 300ms; } } } nav a::after { } } #kopf-navigation-1 { @media (prefers-color-scheme: light) { --farbe-link: black; --farbe-box-shadow: rgba(0, 0, 0, 0.1); } @media (prefers-color-scheme: dark) { --farbe-link: white; --farbe-box-shadow: rgba(255, 255, 255, 0.1); } --farbe-grund-nav: var(--farbe-grund-1); --farbe-grund-ul-mobil:var(--farbe-grund-3); --farbe-grund-hover: var(--farbe-grund-2); --farbe-grund-hamburg-label: var(--farbe-grund-2); @media (prefers-color-scheme: light) { } @media (prefers-color-scheme: dark) { } box-shadow: 1px 1px 4px 0 var(--farbe-box-shadow); width: 100%; z-index: 2; .schalter { display: none; } .schalter:checked ~ nav { .ul-mobil { display: flex; max-height: 50vh; @media (width <= 400px) { width: 100%; max-width: 100%; transition: max-height .2s ease-out; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } @media (401px <= width <= 800px) { max-width: 61.8vw; transition: max-width .2s ease-out; border-bottom-left-radius: 1.5rem; } } .ul-desktop > .hamburg-li > .hamburg-label > .hamburg-strich { & { background: transparent; } &:before { transform: rotate(-45deg); top:0; } &:after { transform: rotate(45deg); top:0; } } } @media (width <= 800px) { .mobil-verbergen { display: none; } } nav { background-color: var(--farbe-grund-nav); box-shadow: 3px 3px 5px var(--farbe-box-shadow); width: 100%; top: 0; left: 0; #logo { initial-letter: 2; color: goldenrod; font-family: 'Germania One', serif; font-weight: 900; font-style: italic; font-size: 2.3rem; } ul { list-style: none; li { height: 5rem; & > a, & > span { height: 100%; padding: 0 3rem; text-decoration: none; display: flex; align-items: center; color: var(--farbe-link); } } } a:hover { background-color: var(--farbe-grund-hover); } position: relative; .ul-mobil { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; right: 0; max-height: 0; overflow: auto; max-width: 0; z-index: 2; background-color: var(--farbe-grund-ul-mobil); box-shadow: -10px var(--farbe-box-shadow); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; li { width: 100%; min-height: 6rem; a { width: 100%; } border-top: 1px solid grey; } } .ul-desktop { width: 100%; display: flex; justify-content: flex-end; align-items: center; li:first-child { margin-right: auto; } .hamburg-li { height: 100%; padding: 0 1.4rem; display: none; @media (width <= 800px) { display: inline-block; z-index: 3; } .hamburg-label { cursor: pointer; display: inline-block; padding: 1px 10px 9px 10px; user-select: none; background-color: var(--farbe-grund-hamburg-label); border-radius: 6px; .hamburg-strich { background-color: var(--farbe-link); display: inline-block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .hamburg-strich:before, .hamburg-strich:after { background-color: var(--farbe-link); content: ''; display: inline-block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .hamburg-strich:before { top: 5px; } .hamburg-strich:after { top: -5px; } } } .hamburg-li:hover { } li:hover, .hamburg-li:hover { transition: 150ms ease-in-out; animation: schalter-animation 300ms; } } } } #kopf-navigation-3 { a { color: #000; } background-color: #fff; box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); width: 100%; z-index: 3; .schalter { display: none; } .schalter:checked ~ nav { ul { max-height: 240px; } .symbol .striche { background: transparent; } .symbol .striche:before { transform: rotate(-45deg); top:0; } .symbol .striche:after { transform: rotate(45deg); top:0; } } .logo { display: block; float: left; font-size: 2em; padding: 10px 20px; text-decoration: none; } .symbol { cursor: pointer; float: right; padding: 28px 20px; position: relative; user-select: none; .striche { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .striche:before, .striche:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .striche:before { top: 5px; } .striche:after { top: -5px; } } ul { margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: #fff; clear: both; max-height: 0; transition: max-height .2s ease-out; li { a { display: block; padding: 20px 20px; border-right: 1px solid #f4f4f4; text-decoration: none; } a:hover, .schalter:hover { background-color: #f4f4f4; } } } @media (min-width: 48em) { .symbol { display: none; } ul { clear: none; float: right; max-height: none; li { float: left; a { padding: 20px 30px; } } } } nav a::after { height: 0; } } #fusszeile_BLOCKIERT { padding: 2rem 0; background-color: var(--farbe-grund-2); border: 2px solid red; h2 { text-align: center; } .grid_behaelter { margin: 2rem auto 0; width: 150rem; max-width: 96%; display: grid; gap: 1.5rem; border: 2px solid blue; @media (width <= 768px) { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "element6 element6" "element7 element7"; } @media (769px <= width <= 1024px) { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1rem; grid-template-areas: "element7 element6 element6"; } @media (width >= 1025px) { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1rem; grid-template-areas: "element7 element7 element6 element6"; } } .grid_element { background-color: var(--farbe-grund-3); display: flex; justify-content: center; align-items: center; padding: 5rem; gap: 5rem; img { height: 12rem; width: 12rem; } } #element1 { grid-area: element1; } #element2 { grid-area: element2; flex-direction: column; gap: 1rem; } #element3 { grid-area: element3; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; } #element4 { grid-area: element4; flex-direction: column; gap: 1rem; } #element5 { grid-area: element5; } #element6 { grid-area: element6; ul { display: flex; justify-content: space-around; gap: 2rem; list-style: none; a { color: var(--farbe-text-1); font-weight: bold; text-decoration: none; position: relative; } a:hover { color: var(--farbe-text-2); } @media (prefers-color-scheme: dark) { color: var(--farbe-marke); a:hover { color: var(--farbe-text-1); } } a::after { content: ''; height: 2px; width: 0; background: var(--farbe-marke); position: absolute; bottom: 0; left: 0; transition: 150ms ease-in-out; } a:hover::after { width: 100%; } } } #element7 { grid-area: element7; } @media (width <= 600px) { h2 { font-size: 8vw; } .grid_element { padding: 20px; img { height: 100px; width: 100px; } h3 { font-size: 24px; } } } } #fusszeile { background-color: var(--farbe-grund-2); padding: calc(2 * 1.681vw) calc(1 * 1.681vw); #flex_behaelter { display: flex; justify-content: center; flex-wrap: wrap; gap: 2vw; align-items: center; @media (width <= 650px) { flex-direction: column-reverse; } a, #kopierrecht { background-color: var(--farbe-grund-3); padding: 1rem 2rem; border-radius: 10px; display: inline-block; } ul { display:flex; flex-wrap: nowrap; gap: 4rem; text-align: center; justify-content: space-between; gap: 2rem; a { color: var(--farbe-text-1); } a:hover { background-color: var(--farbe-grund-1); color: var(--farbe-text2); color: var(--farbe-text-verweis); } } #kopierrecht { text-align: center; } } } .abschnitt, .abschnitt-statisch, .abschnitt-klappbar { display: flow-root; margin-top: 4rem; } @media (width <= 600px) { .abschnitt-statisch { display: none; } } @media (width >= 601px) { .abschnitt-klappbar { display: none; } } details { background: var(--farbe-details-grund); border-radius: 5px; box-shadow: var(--schatten); summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: bold; cursor: pointer; &::-webkit-details-marker { display: none; } &::after { content: ''; width: 0; height: 0; border-top: 10px solid var(--farbe-summary-dreieck); border-inline: 7px solid transparent; transition: 0.2s; } color: var(--farbe-summary-text); border-radius: 5px; } section { opacity: 0; } } details[open] { summary { border-bottom: 2px solid var(--farbe-summary-trennlinie); &::after { transform: rotate(-180deg); } border-radius: 5px 5px 0 0; } section { animation: fadeIn .75s linear forwards; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @media (width <= 480px) { } @media (481px <= width <= 600px) { } @media (601px <= width <= 768px) { } @media (769px <= width <= 1024px) { } @media (1025px <= width <= 1280px) { } @media (1281px <= width <= 1440px) { } @media (1441px <= width) { } main { padding-top: 4.854vw; padding-bottom: 9.708rem; &.abstand { @media (width <= 600px) { padding-left: calc(7vw + 2px); padding-right: calc(7vw + 2px); } @media (width > 600px) { padding-left: 4.854vw; padding-right: 4.854vw; } } .initiale::first-letter { initial-letter: 2; color: goldenrod; font-family: 'Jacques Francois Shadow', 'UnifrakturMaguntia', 'Germania One', 'Style Script', 'Alex Brush', serif, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 900; } p { padding-top: 2rem; } .bild_links, .bild_rechts { margin-top: 10rem; @media (width <= 1080px) { width: 43.3vw; } @media (width > 1080px) { width: 34.38vw; } } .bild_rechts { float: right; shape-margin: 1.618vw; margin-left: 1.618vw; } .bild_links { float: left; shape-margin: 1.618vw; margin-right: 1.618vw; } .rechtliches { max-width: 30rem; margin-top: 4rem; .bildrahmen { border: 3px solid var(--farbe-text-2); } } img { width: 100%; } figcaption { font-size: 1.4rem; text-align: center; span { font-size: 1.1rem; } } @media (width <= 600px) { .bild_links, .bild_rechts { width: 100%; float: none; margin-top: 2rem; margin-left: 0; margin-right: 0; margin-bottom: 2rem; & { margin-top: 2rem !important; } } } .rundecken { border-radius: 2rem; } } #registrieren { fieldset { padding: 10px; } legend { margin-top: 0.85rem; font-weight: bold; } input { --fehleingabe: rgb(116, 180, 196); --valide: #CCFF99; } input { } .eingabe-huelle { input { --padding-x: 1.2em; background-color: transparent; padding: 0; border: 0; border-radius: 0; color: inherit; appearance: none; font-size: 1em; line-height: 1.2; padding: 0.8em var(--padding-x); border-width: 2px; border-style: solid; } &.eingabe-huelle { margin: 1em 0 1em 0; position: relative; } &.eingabe-huelle label { position: absolute; background: #fff; padding: 0 .5em; font-size: .7em; top: -.6em; left: .5em; } &.eingabe-huelle label.platzhalter-simulation { color: #666; font-size: 1em; top: .8em; left: .5em; background-color: var(--fehleingabe); } } input:required:invalid { background-color: var(--fehleingabe); } input:required:invalid + span::after { content: '★'; color: rgb(202, 4, 4); font-size: .8em; } input:required:valid { background-color: var(--valide); } input:focus { outline: thin solid blue; background-color: var(--fehleingabe); } input[type='radio'] { margin-bottom: 0.9rem; } input[type='radio']:focus { outline: none !important; } label::after { content: ''; display: block; } input:checked { outline: 2px solid green; } input:checked + label { color: green; font-weight: bold; } body { --brand: lime; accent-color: var(--brand); } fieldset { border-color: var(--brand); } .toggle label { position: relative; display: inline-block; width: 10em; height: 3.5em; } .toggle input { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .toggle .slider { position: absolute; cursor: pointer; top: 1.5em; left: 3em; width: 4em; height: 2em; background-color: #c32e04; border-radius: 1em; transition: all .3s ease-in-out; } .toggle .slider::before { position: absolute; content: ""; height: 1.6em; width: 1.6em; left: .2em; bottom: .2em; background-color: white; border-radius: 50%; transition: all .3s ease-in-out; } .toggle input:checked + .slider { background-color: #5a9900; } .toggle input:checked + .slider::before { transform: translateX(1.9em); } .text .slider::before { position: absolute; content: "AUS"; color: #c32e04; font-weight: bold; height: 1.6em; left: -2.5em; bottom: .2em; } .text input:checked + .slider::after { position: absolute; content: "AN"; color: #5a9900; left: 4.5em; } }