/* ══════════════════════════════════════════════════════════════════════════ ██ C O P Y R I G H T ██ ────────────────────────────────────────────────────────────────────────── COLOREA GbR · Nadine und Florian Munzert Im Ziegelfeld 22 · 27432 Bremervörde info@colorea.de · www.colorea.de ────────────────────────────────────────────────────────────────────────── Projekt Ingenieurbüro Thomann Entwicklung Nadine Munzert, Florian Munzert Datei stil.css ────────────────────────────────────────────────────────────────────────── Gestaltung und Quelltext sind urheberrechtlich geschützt. Vervielfältigung oder Weitergabe nur mit schriftlicher Zustimmung. ══════════════════════════════════════════════════════════════════════════ */ /* ========================================================================== Ingenieurbüro Thomann Hallen-Graphit, Thomann-Rot und die Farbe der Prüfplakette des laufenden Jahres (wird vom Server gesetzt und wechselt von selbst). Überschriften in Archivo breit, Fließtext in Inter. Das wiederkehrende Motiv sind die Streifen aus dem T der Wortbildmarke. ========================================================================== */ @font-face { font-family: 'Archivo'; src: url('schriften/archivo-breit.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: 'Inter'; src: url('schriften/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @property --blende { syntax: ''; initial-value: 0%; inherits: false; } :root { --tinte: #1A2029; --tinte-2: #232B36; --tinte-3: #2E3846; --papier: #F2F4F7; --weiss: #FFFFFF; --rot: #D0333D; --rot-tief: #A8242D; --stahl: #5E6977; --nebel: #A9B3BF; --linie: #DCE1E7; --gruen: #1F9D57; --gelb: #E5A00D; --plakette: #19A9E6; --plakette-dunkel: #0b5e85; --schrift-titel: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --breite: 1320px; --rand: clamp(1rem, 4vw, 2.5rem); --kopfhoehe: 76px; --weich: cubic-bezier(.2, .8, .2, 1); --feder: cubic-bezier(.5, 1.5, .45, 1); --rund-gross: 22px; --rund: 14px; --start: 0s; --schatten: 0 1px 2px rgba(26, 32, 41, .06), 0 12px 32px -12px rgba(26, 32, 41, .18); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfhoehe) + 1rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: .28s var(--weich) both seite-raus; } ::view-transition-new(root) { animation: .45s var(--weich) both seite-rein; } @keyframes seite-raus { to { opacity: 0; transform: translateY(-12px); } } @keyframes seite-rein { from { opacity: 0; transform: translateY(18px); } } body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.65; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } picture { display: contents; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; } a:hover { text-decoration-color: currentColor; } h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: 750; font-stretch: 112%; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .kachel__titel, .liste__titel, .artikelkarte__text b, .blaettern b, .ortkarte__name { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } p { margin: 0 0 1em; text-wrap: pretty; } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--plakette); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--rot); color: #fff; } .rahmen { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } .rahmen--schmal { max-width: 980px; } .rahmen--text { max-width: calc(760px + 2 * var(--rand)); } .nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .springmarke { position: fixed; left: 1rem; top: -4rem; z-index: 999; background: var(--rot); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .2s; } .springmarke:focus { top: 1rem; } /* ── Knöpfe ─────────────────────────────────────────────────────────── */ .knopf, .schalter { --knopf-grund: var(--tinte); --knopf-farbe: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .75em 1.4em; border: 0; border-radius: 999px; background: var(--knopf-grund); color: var(--knopf-farbe); font-family: var(--schrift); font-weight: 600; font-size: .98rem; line-height: 1.1; letter-spacing: -.005em; text-decoration: none; cursor: pointer; isolation: isolate; overflow: hidden; white-space: nowrap; transition: transform .35s var(--weich), box-shadow .35s var(--weich), background-color .25s, color .25s; } .knopf::before, .schalter::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 45%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--weich); } .knopf:hover::before, .schalter:hover::before { transform: translateX(120%); } .knopf:hover, .schalter:hover { box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--knopf-grund) 80%, transparent); } .knopf:active { transform: scale(.97); } .knopf--rot, .schalter { --knopf-grund: var(--rot); } .knopf--rot:hover, .schalter:hover { --knopf-grund: var(--rot-tief); } .knopf--weiss { --knopf-grund: #fff; --knopf-farbe: var(--tinte); } .knopf--hell { --knopf-grund: rgba(255,255,255,.1); --knopf-farbe: #fff; } .knopf--glas { --knopf-grund: rgba(255,255,255,.08); --knopf-farbe: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); backdrop-filter: blur(8px); } .knopf--glas:hover { --knopf-grund: rgba(255,255,255,.16); } .knopf--rand, .schalter--rand { --knopf-grund: transparent; --knopf-farbe: var(--tinte); box-shadow: inset 0 0 0 1.5px currentColor; } .knopf--rand:hover, .schalter--rand:hover { --knopf-grund: var(--tinte); --knopf-farbe: #fff; box-shadow: none; } .knopf--klein, .schalter--klein { min-height: 40px; padding: .55em 1.1em; font-size: .9rem; } .knopf--gross { min-height: 56px; padding: .9em 1.7em; font-size: 1.02rem; } .knopf--breit { width: 100%; } .knopf__zeichen { width: 1.15em; height: 1.15em; flex: none; } .knopf__pfeil { width: 1.1em; height: 1.1em; transition: transform .35s var(--weich); } .knopf:hover .knopf__pfeil { transform: translateX(4px); } .pfeilverweis { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; color: var(--rot); text-decoration: none; } .pfeilverweis svg { width: 1.1em; height: 1.1em; transition: transform .35s var(--weich); } .pfeilverweis:hover svg { transform: translateX(5px); } .rund { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--linie); background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .rund svg { width: 20px; height: 20px; } .rund:hover { background: var(--tinte); color: #fff; border-color: var(--tinte); } /* ── Lampen und Zustände ───────────────────────────────────────────── */ .lampe { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--nebel); flex: none; position: relative; } .lampe--an, .stand--an .lampe { background: #2BD27A; box-shadow: 0 0 0 0 rgba(43,210,122,.6); animation: puls 2.2s infinite; } .lampe--bald, .stand--bald .lampe { background: var(--gelb); box-shadow: 0 0 0 0 rgba(229,160,13,.6); animation: puls 1.4s infinite; } .lampe--aus, .stand--aus .lampe { background: #E2545C; } @keyframes puls { 70% { box-shadow: 0 0 0 9px rgba(43,210,122,0); } 100% { box-shadow: 0 0 0 0 rgba(43,210,122,0); } } .stand { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; font-size: .95rem; } /* ── Vorzeile ───────────────────────────────────────────────────────── */ .vorzeile { display: inline-flex; align-items: center; gap: .7em; margin: 0 0 1rem; font-weight: 600; font-size: .95rem; color: var(--rot); letter-spacing: -.005em; } .vorzeile::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: currentColor; box-shadow: 4px 6px 0 -0px color-mix(in srgb, currentColor 55%, transparent); } .vorzeile--hell { color: #FF6B73; } /* ── Kopf ──────────────────────────────────────────────────────────── */ .kopf { position: fixed; inset: 0 0 auto 0; z-index: 100; color: #fff; transition: transform .45s var(--weich); } .kopf::before { content: ''; position: absolute; inset: 0; background: rgba(26,32,41,.78); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,.07); transition: opacity .4s; z-index: -1; } .ist-start .kopf:not(.ist-fest)::before { opacity: 0; } .kopf::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--rot), #FF6B73); transform-origin: 0 50%; transform: scaleX(0); } @supports (animation-timeline: scroll()) { .kopf::after { animation: fortschritt linear both; animation-timeline: scroll(root); } @keyframes fortschritt { to { transform: scaleX(1); } } } .kopf.ist-weg { transform: translateY(calc(-100% - 2px)); } .kopf__leiste { font-size: .8rem; color: var(--nebel); border-bottom: 1px solid rgba(255,255,255,.06); max-height: 40px; overflow: hidden; transition: max-height .4s var(--weich), opacity .3s; } .kopf.ist-fest .kopf__leiste { max-height: 0; opacity: 0; } .kopf__leiste-innen { display: flex; align-items: center; gap: 1.6rem; height: 36px; } .kopf__ort { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; } .kopf__ort b { color: #fff; font-weight: 600; } .kopf__ort:hover span:last-child { color: #fff; } .kopf__leiste-rechts { margin-left: auto; } .kopf__innen { display: flex; align-items: center; gap: 2rem; height: var(--kopfhoehe); transition: height .4s var(--weich); } .kopf.ist-fest .kopf__innen { height: 64px; } .kopf__marke { flex: none; display: block; } .kopf__marke img { width: clamp(150px, 15vw, 196px); height: auto; } .kopf__marke b { font-family: var(--schrift-titel); font-size: 1.4rem; } .hauptnav { margin-left: auto; } .hauptnav__liste { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; } .hauptnav__punkt { position: relative; display: flex; align-items: center; } .hauptnav__verweis { position: relative; display: block; padding: .6rem .8rem; font-weight: 550; font-size: .97rem; text-decoration: none; color: rgba(255,255,255,.86); transition: color .2s; } .hauptnav__verweis::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px; background: var(--rot); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--weich); } .hauptnav__punkt:hover > .hauptnav__verweis, .hauptnav__punkt.ist-aktiv > .hauptnav__verweis { color: #fff; } .hauptnav__punkt:hover > .hauptnav__verweis::after, .hauptnav__punkt.ist-aktiv > .hauptnav__verweis::after { transform: scaleX(1); transform-origin: left; } .hauptnav__auf { display: none; } .hauptnav__mobil { display: none; } /* ── Aufklappmenüs: dunkle Tafel direkt unter der Kopfzeile ───────── */ .unter ul { list-style: none; margin: 0; padding: 0; } @media (min-width: 1081px) { .hauptnav__punkt { position: static; } .unter { position: absolute; top: 100%; left: 50%; width: min(1180px, calc(100vw - 2 * var(--rand))); color: #fff; border-radius: 0 0 24px 24px; background: rgba(26,32,41,.97); background-image: var(--rauschen); box-shadow: 0 50px 90px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; visibility: hidden; transform: translate(-50%, -10px); clip-path: inset(0 0 100% 0 round 0 0 24px 24px); transition: clip-path .6s var(--weich), opacity .25s, transform .55s var(--weich), visibility 0s linear .6s; } .unter::before { content: ''; position: absolute; left: 0; right: 0; top: -30px; height: 30px; } .unter::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--rot), transparent); opacity: .8; } .hauptnav__punkt:hover > .unter, .hauptnav__punkt:focus-within > .unter { opacity: 1; visibility: visible; transform: translate(-50%, 0); clip-path: inset(-30px 0 0 0 round 0 0 24px 24px); transition-delay: 0s; } .unter--standorte { width: min(980px, calc(100vw - 2 * var(--rand))); } .unter--wissenswertes { width: min(920px, calc(100vw - 2 * var(--rand))); } .hauptnav__punkt.hat-unter > .hauptnav__verweis { padding-right: 1.5rem; } .hauptnav__punkt.hat-unter > .hauptnav__verweis::before { content: ''; position: absolute; right: .55rem; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .35s var(--weich), margin .35s var(--weich); } .hauptnav__punkt.hat-unter:hover > .hauptnav__verweis::before { transform: rotate(225deg); margin-top: -1px; } .menue-schleier { position: fixed; inset: 0; z-index: 90; background: rgba(12,15,20,.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .45s var(--weich); } body:has(.hauptnav__punkt.hat-unter:hover) .menue-schleier, body:has(.hauptnav__punkt.hat-unter:focus-within) .menue-schleier { opacity: 1; } /* Leistungen */ .mega { display: grid; grid-template-columns: 270px minmax(0, 1.55fr) 290px; gap: 2.4rem; padding: 2.4rem 2.6rem 2.6rem; } .mega__vorzeile { margin: 0 0 .6rem; color: #FF6B73; font-weight: 600; font-size: .9rem; } .mega__titel { margin: 0 0 1.2rem; font-family: var(--schrift-titel); font-stretch: 115%; font-weight: 780; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.02em; } .mega__alle, .ortmenue__alle, .listenmenue__alle { display: inline-flex; align-items: center; gap: .45rem; color: #FF6B73; font-weight: 600; text-decoration: none; font-size: .95rem; } .mega__alle svg, .ortmenue__alle svg, .listenmenue__alle svg { width: 1.1em; height: 1.1em; transition: transform .35s var(--weich); } .mega__alle:hover svg, .ortmenue__alle:hover svg, .listenmenue__alle:hover svg { transform: translateX(5px); } .mega__einstieg { display: flex; flex-direction: column; } .mega__hucheck { position: relative; margin-top: auto; display: grid; grid-template-columns: 74px 1fr; gap: 1rem; align-items: center; padding: 1rem; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); text-decoration: none; color: var(--nebel); font-size: .86rem; line-height: 1.45; overflow: hidden; transition: background .3s; } .mega__hucheck:hover { background: rgba(255,255,255,.09); } .mega__hucheck b { display: block; color: #fff; font-family: var(--schrift-titel); font-stretch: 112%; font-size: 1.1rem; margin-bottom: .15rem; } .plakette--menue { width: 74px; transition: transform .9s var(--feder); } .mega__hucheck:hover .plakette--menue { transform: rotate(-60deg); } .mega__gruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; } .mega__gruppentitel { margin: 0 0 .7rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--nebel); font-size: .84rem; font-weight: 600; } .mega__gruppe li { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--weich); } .hauptnav__punkt:hover .mega__gruppe li, .hauptnav__punkt:focus-within .mega__gruppe li { opacity: 1; transform: none; } .mega__gruppe li:nth-child(2) { transition-delay: .03s; } .mega__gruppe li:nth-child(3) { transition-delay: .06s; } .mega__gruppe li:nth-child(4) { transition-delay: .09s; } .mega__gruppe li:nth-child(5) { transition-delay: .12s; } .mega__gruppe li:nth-child(6) { transition-delay: .15s; } .mega__eintrag { display: flex; align-items: center; gap: .85rem; padding: .5rem .6rem; border-radius: 13px; color: rgba(255,255,255,.88); text-decoration: none; font-weight: 550; font-size: .97rem; transition: background .25s, color .25s, padding .35s var(--weich); } .mega__eintrag:hover, .mega__eintrag:focus-visible { background: rgba(255,255,255,.07); color: #fff; padding-left: .9rem; } .mega__symbol { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.06); color: #FF6B73; transition: background .25s, color .25s, transform .4s var(--feder); } .mega__symbol svg { width: 21px; height: 21px; } .mega__eintrag:hover .mega__symbol { background: var(--rot); color: #fff; transform: rotate(-6deg) scale(1.06); } .mega__vorschau { display: flex; flex-direction: column; gap: .8rem; } .mega__bild { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--tinte-2); } .mega__bild img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform 1.2s var(--weich); } .mega__bild.ist-wechsel img { opacity: 0; transform: scale(1.06); } .mega__vorschautitel { margin: 0; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 750; font-size: 1.15rem; } .mega__vorschautext { margin: 0; color: var(--nebel); font-size: .9rem; line-height: 1.5; } /* Standorte */ .ortmenue { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.6rem 1.8rem 1.4rem; } .ortmenue__ort { display: grid; grid-template-columns: 150px 1fr; gap: 1.1rem; align-items: center; padding: .8rem; border-radius: 18px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: #fff; text-decoration: none; transition: background .3s; } .ortmenue__ort:hover { background: rgba(255,255,255,.09); } .ortmenue__bild { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; } .ortmenue__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weich); } .ortmenue__ort:hover .ortmenue__bild img { transform: scale(1.07); } .ortmenue__text { display: grid; gap: .25rem; } .ortmenue__text small { color: var(--nebel); font-size: .8rem; } .ortmenue__text b { font-family: var(--schrift-titel); font-stretch: 118%; font-size: 1.45rem; line-height: 1; } .ortmenue__text .stand { font-size: .84rem; font-weight: 550; color: rgba(255,255,255,.85); } .ortmenue__adresse { color: var(--nebel); font-size: .82rem; } .ortmenue__alle { grid-column: 1 / -1; justify-self: end; } /* Listen (Wissenswertes) */ .listenmenue { padding: 1.6rem 2rem 1.5rem; } .listenmenue ul { columns: 2; column-gap: 1.6rem; } .listenmenue li { break-inside: avoid; } .listenmenue a:not(.listenmenue__alle) { display: block; padding: .5rem .7rem; border-radius: 11px; color: rgba(255,255,255,.86); text-decoration: none; font-weight: 500; font-size: .95rem; transition: background .25s, color .25s, padding .35s var(--weich); } .listenmenue a:not(.listenmenue__alle):hover { background: rgba(255,255,255,.07); color: #fff; padding-left: 1rem; } .listenmenue__alle { margin-top: 1rem; } } .kopf__aktionen { display: flex; align-items: center; gap: .8rem; flex: none; } .kopf__hucheck { display: inline-flex; align-items: center; gap: .55em; padding: .5rem .9rem; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); transition: box-shadow .25s, background .25s; } .kopf__hucheck:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px var(--plakette); } .kopf__punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--plakette); box-shadow: inset 0 0 0 3px rgba(0,0,0,.18); } .menue { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); cursor: pointer; position: relative; } .menue i { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; border-radius: 2px; transition: transform .45s var(--weich), top .45s var(--weich); } .menue i:first-of-type { top: 18px; } .menue i:last-of-type { top: 26px; right: 18px; } .ist-menue-offen .menue i:first-of-type { top: 22px; transform: rotate(45deg); } .ist-menue-offen .menue i:last-of-type { top: 22px; right: 13px; transform: rotate(-45deg); } @media (max-width: 1180px) { .kopf__hucheck { display: none; } } @media (max-width: 1080px) { .menue { display: block; } .kopf__aktionen { margin-left: auto; } .kopf__aktionen .knopf { display: none; } .hauptnav { position: fixed; inset: 0; z-index: -1; margin: 0; padding: calc(var(--kopfhoehe) + 2.5rem) var(--rand) 7rem; background: var(--tinte); overflow-y: auto; overscroll-behavior: contain; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--weich); visibility: hidden; } .ist-menue-offen .hauptnav { clip-path: inset(0 0 0 0); visibility: visible; } .hauptnav__liste { flex-direction: column; align-items: stretch; gap: 0; } .hauptnav__punkt { flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--weich); } .ist-menue-offen .hauptnav__punkt { opacity: 1; transform: none; } .ist-menue-offen .hauptnav__punkt:nth-child(2) { transition-delay: .05s; } .ist-menue-offen .hauptnav__punkt:nth-child(3) { transition-delay: .1s; } .ist-menue-offen .hauptnav__punkt:nth-child(4) { transition-delay: .15s; } .ist-menue-offen .hauptnav__punkt:nth-child(5) { transition-delay: .2s; } .ist-menue-offen .hauptnav__punkt:nth-child(6) { transition-delay: .25s; } .hauptnav__verweis { flex: 1; padding: 1.05rem 0; font-family: var(--schrift-titel); font-stretch: 118%; font-weight: 700; font-size: clamp(1.5rem, 6vw, 2.1rem); color: #fff; } .hauptnav__verweis::after { display: none; } .hauptnav__auf { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; } .hauptnav__auf svg { width: 20px; height: 20px; transition: transform .35s var(--weich); } .hauptnav__punkt.ist-offen .hauptnav__auf svg { transform: rotate(180deg); } .unter { position: static; width: 100%; display: none; color: #fff; } .hauptnav__punkt.ist-offen > .unter { display: block; padding-bottom: 1.2rem; } .menue-schleier { display: none; } .mega__einstieg, .mega__vorschau, .ortmenue__bild, .ortmenue__adresse { display: none; } .mega__gruppen { display: grid; gap: 1rem; } .mega__gruppentitel { margin: .3rem 0 .4rem; color: var(--nebel); font-size: .85rem; font-weight: 600; } .mega__eintrag, .listenmenue a, .ortmenue__ort { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; color: rgba(255,255,255,.88); text-decoration: none; } .mega__symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.07); color: #FF6B73; } .mega__symbol svg { width: 18px; height: 18px; } .ortmenue { display: grid; gap: .3rem; } .ortmenue__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; } .ortmenue__text small { display: none; } .ortmenue__text b { font-weight: 600; } .ortmenue__text .stand { font-size: .82rem; color: var(--nebel); font-weight: 500; } .ortmenue__alle, .listenmenue__alle, .mega__alle { color: #FF6B73 !important; font-weight: 600; } .ortmenue__alle svg, .listenmenue__alle svg { width: 1em; height: 1em; } .hauptnav__mobil { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; } } @media (max-width: 720px) { :root { --kopfhoehe: 64px; } .kopf__leiste { display: none; } } /* ── Erscheinen beim Scrollen ──────────────────────────────────────── */ .js [data-erscheint] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--weich), transform 1s var(--weich), filter .9s var(--weich); transition-delay: var(--verz, 0s); } .js [data-erscheint].ist-sichtbar { opacity: 1; transform: none; filter: none; } /* Streifenblende: Bilder öffnen sich in Streifen wie das T im Logo. */ .blende { position: relative; overflow: hidden; border-radius: var(--rund-gross); background: var(--tinte-2); } .blende img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--weich), scale .8s var(--weich); } .js .blende { --blende: 0%; -webkit-mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--blende), transparent var(--blende), transparent 11.11%); mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--blende), transparent var(--blende), transparent 11.11%); transition: --blende 1.2s var(--weich); } .js .blende img { transform: scale(1.18) translateX(-2%); } .js .blende.ist-sichtbar { --blende: 11.12%; } .js .blende.ist-sichtbar img { transform: none; } .js .blende.ist-fertig { -webkit-mask-image: none; mask-image: none; } /* ── Held (Startseite) ─────────────────────────────────────────────── */ .held { position: relative; min-height: max(640px, 100svh); padding: calc(var(--kopfhoehe) + 5.5rem) 0 2rem; display: flex; flex-direction: column; justify-content: center; color: #fff; background: var(--tinte); overflow: hidden; isolation: isolate; } .held__bild { position: absolute; inset: 0; z-index: -2; } .held__foto { width: 100%; height: 115%; object-fit: cover; object-position: 60% 40%; transform-origin: 50% 30%; animation: held-zoom 2.4s var(--weich) both var(--start); } @keyframes held-zoom { from { transform: scale(1.14); filter: brightness(.4) saturate(.6); } } @supports (animation-timeline: scroll()) { .held__bild { animation: parallaxe linear both; animation-timeline: scroll(root); animation-range: 0 100svh; } @keyframes parallaxe { to { transform: translateY(14%); } } } .held::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(26,32,41,.97) 0%, rgba(26,32,41,.86) 34%, rgba(26,32,41,.35) 68%, rgba(26,32,41,.55) 100%), linear-gradient(0deg, rgba(26,32,41,.95) 0%, transparent 36%); } .held__streifen { position: absolute; left: 52%; top: 12%; width: min(46vw, 640px); z-index: -1; display: grid; justify-items: start; gap: 9px; pointer-events: none; } .held__streifen i { display: block; height: 7px; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, var(--rot) 30%, rgba(208,51,61,0)); width: calc(100% - var(--i) * 6%); transform: scaleX(0) skewX(-28deg); transform-origin: 0 50%; animation: streifen 1.5s var(--weich) both; animation-delay: calc(var(--start) + .4s + var(--i) * 45ms); } .held__streifen i:nth-child(3n) { width: calc(80% - var(--i) * 4%); opacity: .7; } .held__streifen i:nth-child(4n+1) { width: calc(100% - var(--i) * 2%); } @keyframes streifen { to { transform: scaleX(1) skewX(-28deg); } } .held__innen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3rem; align-items: center; } .held__vorzeile { display: inline-flex; align-items: center; gap: .7em; font-weight: 600; color: #FF6B73; margin-bottom: 1.4rem; animation: auftauchen .8s var(--weich) both calc(var(--start) + .1s); } .held__vorzeile::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: currentColor; } .held__titel { font-size: clamp(2.7rem, 5.6vw, 5.9rem); font-stretch: 125%; font-weight: 800; line-height: .92; letter-spacing: -.035em; margin-bottom: 1.6rem; } .zeile { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } .zeile > span { display: inline-block; animation: zeile-hoch 1.1s var(--weich) both; animation-delay: calc(var(--start) + .2s + var(--z, 0) * .13s); } @keyframes zeile-hoch { from { transform: translateY(108%) rotate(4deg); } } @keyframes auftauchen { from { opacity: 0; transform: translateY(20px); } } .held__einleitung { max-width: 46ch; font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: rgba(255,255,255,.8); margin-bottom: 2.2rem; animation: auftauchen 1s var(--weich) both calc(var(--start) + .6s); } .held__knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; animation: auftauchen 1s var(--weich) both calc(var(--start) + .75s); } .held__plakette { position: relative; justify-self: center; display: grid; justify-items: center; gap: 1.4rem; text-decoration: none; color: #fff; perspective: 900px; animation: auftauchen 1.2s var(--weich) both calc(var(--start) + .5s); } .held__plakette-schein { position: absolute; top: 8%; left: 50%; width: 80%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--plakette) 70%, transparent), transparent 66%); filter: blur(30px); opacity: .55; animation: glimmen 5s ease-in-out infinite; z-index: -1; } @keyframes glimmen { 50% { opacity: .85; transform: scale(1.08); } } .held__plakette-text { display: grid; justify-items: center; text-align: center; gap: .2rem; } .held__plakette-text b { font-family: var(--schrift-titel); font-stretch: 115%; font-size: 1.15rem; } .held__plakette-text span { display: inline-flex; align-items: center; gap: .4em; color: var(--nebel); font-size: .92rem; } .held__plakette-text svg { width: 1em; height: 1em; transition: transform .35s var(--weich); } .held__plakette:hover .held__plakette-text svg { transform: translateX(4px); } .held__orte { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(2.5rem, 6vh, 4.5rem); animation: auftauchen 1s var(--weich) both calc(var(--start) + 1s); } .ortchip { display: inline-flex; align-items: center; gap: .65rem; padding: .7rem 1.1rem .7rem .95rem; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(10px); text-decoration: none; font-size: .92rem; transition: background .25s; } .ortchip:hover { background: rgba(255,255,255,.14); } .ortchip__name { font-weight: 650; } .ortchip__stand { color: var(--nebel); } /* ── Prüfplakette ──────────────────────────────────────────────────── */ .plakette { --pk: var(--plakette); width: 100%; height: auto; overflow: visible; } .plakette__grund { fill: var(--pk); stroke: color-mix(in srgb, var(--pk) 70%, #000); stroke-width: 1.5; transition: fill .6s; } .plakette__scheibe { transform: rotate(var(--drehung)); transition: transform 1.2s var(--feder); } .plakette__striche text { font-family: var(--schrift-titel); font-weight: 800; font-stretch: 100%; font-size: 23px; fill: #111; } .plakette__striche line { stroke: #111; stroke-width: 1.6; } .plakette__balken rect { fill: #111; } .plakette__ring { fill: none; stroke: #111; stroke-width: 2; } .plakette__mitte { fill: color-mix(in srgb, var(--pk) 88%, #fff); stroke: #111; stroke-width: 2; transition: fill .6s; } .plakette__jahr { font-family: var(--schrift-titel); font-weight: 900; font-stretch: 110%; font-size: 40px; fill: #111; } .plakette--held { width: clamp(230px, 27vw, 430px); filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); transition: transform .6s var(--weich); transform-style: preserve-3d; } .plakette--held .plakette__scheibe { animation: einrollen 2.2s var(--feder) both calc(var(--start) + .35s); } @keyframes einrollen { from { transform: rotate(calc(var(--drehung) + 540deg)); } } .plakette--gross { width: min(100%, 420px); filter: drop-shadow(0 30px 40px rgba(26,32,41,.25)); } .plakette--klein { width: 64px; } .plakette--fehler { width: clamp(180px, 22vw, 300px); } .plakette--fehler .plakette__scheibe { animation: wackeln 6s ease-in-out infinite; } @keyframes wackeln { 0%, 100% { transform: rotate(120deg); } 50% { transform: rotate(160deg); } } /* ── Abschnitte ────────────────────────────────────────────────────── */ .abschnitt { position: relative; padding-block: clamp(4.5rem, 9vw, 8.5rem); } .abschnitt--dunkel { background: var(--tinte); color: #fff; } .abschnitt--grau { background: #E7EAEE; } .abschnitt--wissen { padding-bottom: clamp(2rem, 4vw, 3rem); } .abschnitt__kopf { max-width: 760px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); } .abschnitt__kopf--zeile { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .abschnitt__titel { font-size: clamp(2rem, 4.4vw, 3.7rem); font-stretch: 116%; font-weight: 780; line-height: 1; letter-spacing: -.03em; margin: 0; } .abschnitt__text { color: var(--stahl); font-size: 1.08rem; margin-top: 1rem; } .abschnitt--dunkel .abschnitt__text { color: var(--nebel); } /* ── Standorte ─────────────────────────────────────────────────────── */ .abschnitt--orte { background: linear-gradient(180deg, var(--papier), #E9ECF0); } .orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); } .orte--untereinander, .orte--eins { grid-template-columns: minmax(0, 1fr); } .orte__hinweis { display: flex; align-items: center; gap: .7rem; margin: 2rem 0 0; color: var(--stahl); } .orte__hinweis svg { width: 22px; height: 22px; color: var(--rot); flex: none; } .ortkarte { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--rund-gross); overflow: hidden; box-shadow: var(--schatten); transition: transform .5s var(--weich), box-shadow .5s var(--weich); } .ortkarte:hover { box-shadow: 0 2px 4px rgba(26,32,41,.06), 0 30px 60px -24px rgba(26,32,41,.3); } .ortkarte__bild { display: block; aspect-ratio: 16 / 9; border-radius: 0; } .ortkarte:hover .ortkarte__bild img { scale: 1.05; } .ortkarte__inhalt { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: .4rem; align-content: start; } .ortkarte__art { margin: 0; color: var(--stahl); font-weight: 550; font-size: .92rem; } .ortkarte__name { font-size: clamp(1.8rem, 3vw, 2.6rem); font-stretch: 122%; margin: 0 0 .3rem; } .ortkarte__name a { text-decoration: none; } .ortkarte__name a:hover { color: var(--rot); } .ortkarte__stand { margin: 0 0 .5rem; } .ortkarte__adresse { font-style: normal; color: var(--stahl); margin-bottom: .6rem; } .ortkarte__adresse span { white-space: nowrap; } .ortkarte__zeiten { list-style: none; margin: .2rem 0 1.2rem; padding: 0; border-top: 1px solid var(--linie); } .ortkarte__zeiten li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); font-size: .95rem; } .ortkarte__zeiten b { font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; } .ortkarte__zeiten li.ist-heute { color: var(--rot); } .ortkarte__zeiten li.ist-heute span::after { content: ' · heute'; font-weight: 600; } .ortkarte__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; } .ortkarte--gross { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; } .ortkarte--gross .ortkarte__bild { aspect-ratio: auto; min-height: 100%; } /* ── Leistungsliste mit Bild am Zeiger ─────────────────────────────── */ .leistungsgruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); } .leistungsgruppe__titel { font-size: 1.05rem; font-stretch: 105%; font-weight: 700; color: var(--stahl); margin-bottom: .8rem; } .liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); } .liste__zeile { border-bottom: 1px solid var(--linie); } .liste__verweis { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 28px; grid-template-areas: "s t p" "s x p"; column-gap: 1rem; align-items: center; padding: 1.15rem .9rem 1.15rem .4rem; text-decoration: none; isolation: isolate; overflow: hidden; border-radius: 12px; transition: color .35s, padding .5s var(--weich); } .liste__verweis::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tinte); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--weich); border-radius: inherit; } .liste__verweis:hover, .liste__verweis:focus-visible { color: #fff; padding-left: 1.1rem; } .liste__verweis:hover::before, .liste__verweis:focus-visible::before { transform: scaleX(1); transform-origin: left; } .liste__symbol { grid-area: s; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--rot); box-shadow: inset 0 0 0 1px var(--linie); transition: background .35s, color .35s, box-shadow .35s; } .liste__symbol svg { width: 24px; height: 24px; } .liste__verweis:hover .liste__symbol { background: var(--rot); color: #fff; box-shadow: none; } .liste__titel { grid-area: t; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 700; font-size: 1.22rem; line-height: 1.2; } .liste__text { grid-area: x; color: var(--stahl); font-size: .93rem; line-height: 1.45; margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .35s; } .liste__verweis:hover .liste__text { color: var(--nebel); } .liste__pfeil { grid-area: p; justify-self: end; } .liste__pfeil svg { width: 22px; height: 22px; transition: transform .4s var(--weich); } .liste__verweis:hover .liste__pfeil svg { transform: translateX(5px); color: #FF6B73; } .vorschaubild { position: fixed; left: 0; top: 0; z-index: 90; width: 300px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); transition: opacity .3s, transform .5s var(--weich); box-shadow: 0 30px 60px -20px rgba(10,14,20,.5); } .vorschaubild.ist-sichtbar { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); } .vorschaubild img { width: 100%; height: 100%; object-fit: cover; } @media (hover: none), (max-width: 960px) { .vorschaubild { display: none; } } /* ── GTÜ-Abschnitt ─────────────────────────────────────────────────── */ .gtue { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .gtue__saetze { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .gtue__saetze li { font-family: var(--schrift-titel); font-stretch: 116%; font-weight: 750; font-size: clamp(1.6rem, 3.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.025em; color: rgba(255,255,255,.18); transition: color .6s var(--weich); } .gtue__saetze li.ist-an { color: #fff; } .no-js .gtue__saetze li, html:not(.js) .gtue__saetze li { color: #fff; } .gtue__seite { position: sticky; top: calc(var(--kopfhoehe) + 2rem); display: grid; gap: 1.6rem; } .gtue__bild { aspect-ratio: 4 / 3; } .gtue__text { color: var(--nebel); font-size: 1.08rem; margin: 0; } .gtue__logo { width: 180px; height: auto; } /* ── HU-Check ──────────────────────────────────────────────────────── */ .abschnitt--hucheck { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--plakette) 16%, transparent), transparent 60%), #fff; } .hucheck { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hucheck__plakette { display: grid; justify-items: center; gap: 1rem; } .hucheck__farbe { margin: 0; color: var(--stahl); } .hucheck__farbe b { color: var(--tinte); text-transform: capitalize; } .hucheck__wahl { display: grid; gap: 1.6rem; } .hucheck__feld { border: 0; margin: 0; padding: 0; min-width: 0; } .hucheck__feld legend { font-family: var(--schrift-titel); font-stretch: 110%; font-weight: 700; font-size: 1.15rem; margin-bottom: .8rem; padding: 0; } .hucheck__monate { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; } .hucheck__jahre { display: flex; flex-wrap: wrap; gap: .5rem; } .wahlchip { position: relative; cursor: pointer; } .wahlchip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .wahlchip span { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .4rem .9rem; border-radius: 12px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); font-weight: 650; font-variant-numeric: tabular-nums; transition: background .25s, color .25s, box-shadow .25s, transform .35s var(--feder); } .wahlchip:hover span { box-shadow: inset 0 0 0 1.5px var(--tinte); } .wahlchip input:checked + span { background: var(--tinte); color: #fff; box-shadow: none; transform: translateY(-2px); } .wahlchip input:focus-visible + span { outline: 3px solid var(--plakette); outline-offset: 2px; } .wahlchip--jahr span i { width: 14px; height: 14px; border-radius: 50%; background: var(--chip); box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); } .wahlchip--text span { min-height: 44px; padding-inline: 1.1rem; border-radius: 999px; font-weight: 550; } .hucheck__ergebnis { --farbe: var(--gruen); position: relative; padding: 1.2rem 1.4rem 1.2rem 1.6rem; border-radius: var(--rund); background: color-mix(in srgb, var(--farbe) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--farbe) 30%, transparent); overflow: hidden; } .hucheck__ergebnis::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--farbe); } .hucheck__ergebnis p { margin: 0; font-weight: 550; font-size: 1.05rem; } .hucheck__ergebnis--bald, .hucheck__ergebnis--jetzt { --farbe: var(--gelb); } .hucheck__ergebnis--ueber, .hucheck__ergebnis--vertieft { --farbe: var(--rot); } .hucheck__ergebnis.ist-neu { animation: ergebnis .6s var(--weich); } @keyframes ergebnis { from { opacity: 0; transform: translateY(10px); } } .hucheck__hinweis { margin: 0; color: var(--stahl); font-size: .92rem; } /* ── Video mit Zustimmung ──────────────────────────────────────────── */ .video { margin: 0; } .video__flaeche { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rund-gross); overflow: hidden; background: var(--tinte-2); } .video__bild { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: transform 1.2s var(--weich), filter .5s; } .video__start { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem; border: 0; background: none; color: #fff; cursor: pointer; } .video__knopf { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: var(--rot); box-shadow: 0 0 0 0 rgba(208,51,61,.6); animation: puls-rot 2.4s infinite; transition: transform .4s var(--feder); } .video__knopf svg { width: 32px; height: 32px; fill: #fff; stroke: none; margin-left: 4px; } @keyframes puls-rot { 70% { box-shadow: 0 0 0 22px rgba(208,51,61,0); } 100% { box-shadow: 0 0 0 0 rgba(208,51,61,0); } } .video__start:hover .video__knopf { transform: scale(1.1); } .video__flaeche:hover .video__bild { transform: scale(1.04); filter: brightness(.45); } .video__beschriftung { font-weight: 600; } .video__hinweis { margin-top: .9rem; font-size: .85rem; color: var(--nebel); display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; } .abschnitt:not(.abschnitt--dunkel) .video__hinweis { color: var(--stahl); } .video__immer { display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Wissenswertes: Schiene und Karten ─────────────────────────────── */ .schiene { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 380px); gap: 1.2rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); padding: .5rem max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))) 2rem; scrollbar-width: none; cursor: grab; } .schiene::-webkit-scrollbar { display: none; } .schiene.ist-gezogen { cursor: grabbing; scroll-snap-type: none; } .schiene.ist-gezogen a { pointer-events: none; } .schiene > * { scroll-snap-align: start; } .schiene__steuerung { display: flex; gap: .6rem; } .artikelkarte { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--rund-gross); overflow: hidden; text-decoration: none; box-shadow: var(--schatten); transition: transform .5s var(--weich), box-shadow .5s var(--weich); } .artikelkarte:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(26,32,41,.06), 0 30px 60px -24px rgba(26,32,41,.32); } .artikelkarte__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tinte-2); } .artikelkarte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); } .artikelkarte:hover .artikelkarte__bild img { transform: scale(1.07); } .artikelkarte__text { display: grid; align-content: start; gap: .45rem; padding: 1.4rem 1.5rem 1.6rem; } .artikelkarte__text small { color: var(--rot); font-weight: 600; font-size: .85rem; line-height: 1.35; } .artikelkarte__text b { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 750; font-size: 1.35rem; line-height: 1.12; } .artikelkarte__text span { color: var(--stahl); font-size: .95rem; line-height: 1.5; } .artikelraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .artikelkarte--gross { grid-column: span 2; grid-row: span 2; } .artikelkarte--gross .artikelkarte__bild { aspect-ratio: auto; min-height: 320px; } .artikelkarte--gross .artikelkarte__text b { font-size: clamp(1.6rem, 2.6vw, 2.3rem); } /* ── Fragen ────────────────────────────────────────────────────────── */ .zweispalt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .zweispalt > .abschnitt__kopf { position: sticky; top: calc(var(--kopfhoehe) + 2rem); } .zweispalt .abschnitt__kopf .knopf { margin-top: 1.4rem; } .fragen { border-top: 1px solid var(--linie); } .frage { border-bottom: 1px solid var(--linie); } .frage summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; font-family: var(--schrift-titel); font-stretch: 108%; font-weight: 700; font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.25; transition: color .25s; } .frage summary::-webkit-details-marker { display: none; } .frage summary:hover { color: var(--rot); } .frage summary i { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); transition: background .3s, transform .5s var(--weich); } .frage summary i::before, .frage summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; border-radius: 2px; transition: transform .5s var(--weich); } .frage summary i::after { transform: rotate(90deg); } .frage[open] summary i { background: var(--rot); color: #fff; box-shadow: none; transform: rotate(180deg); } .frage[open] summary i::after { transform: rotate(0); } .frage__antwort { padding: 0 3.5rem 1.4rem 0; color: var(--stahl); } .frage__antwort p:last-child { margin: 0; } @supports (interpolate-size: allow-keywords) { .fragen { interpolate-size: allow-keywords; } .frage::details-content { height: 0; overflow: clip; transition: height .5s var(--weich), content-visibility .5s allow-discrete; } .frage[open]::details-content { height: auto; } } /* ── Über uns ──────────────────────────────────────────────────────── */ .ueberblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; } .ueberblock__bild { aspect-ratio: 4 / 5; } .ueberblock--gedreht .ueberblock__bild { aspect-ratio: 5 / 4; } .ueberblock__text .abschnitt__titel { margin-bottom: 1.2rem; } .ueberblock__text .fliesstext p, .ueberblock__text > p { color: var(--stahl); } .abschnitt--dunkel .ueberblock__text .fliesstext p { color: var(--nebel); } .ueberblock__jahre { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; } .ueberblock__jahre b { font-family: var(--schrift-titel); font-stretch: 125%; font-weight: 900; font-size: clamp(4rem, 8vw, 7rem); line-height: .8; color: var(--rot); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .ueberblock__jahre span { max-width: 15ch; font-weight: 600; line-height: 1.3; color: var(--stahl); } /* ── Karriere-Band ─────────────────────────────────────────────────── */ .karrierebanner { position: relative; overflow: hidden; background: var(--rot); color: #fff; padding-block: clamp(3.5rem, 7vw, 6rem); isolation: isolate; } .karrierebanner__streifen { position: absolute; right: -5%; top: 50%; translate: 0 -50%; width: 55%; display: grid; gap: 12px; z-index: -1; opacity: .22; } .karrierebanner__streifen i { height: 14px; border-radius: 8px; background: #fff; width: calc(100% - var(--i) * 9%); justify-self: end; transform: skewX(-28deg); animation: gleiten 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.6s); } @keyframes gleiten { to { translate: -8% 0; } } .karrierebanner__innen { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .karrierebanner__titel { font-size: clamp(2rem, 4.6vw, 3.8rem); font-stretch: 120%; margin: 0 0 .4rem; } .karrierebanner p { margin: 0; font-size: 1.1rem; color: rgba(255,255,255,.85); } .karrierebanner .vorzeile { color: #fff; } /* ── Beiträge ──────────────────────────────────────────────────────── */ .beitraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .beitrag { display: grid; align-content: start; gap: .5rem; text-decoration: none; } .beitrag__bild { display: block; aspect-ratio: 3 / 2; border-radius: var(--rund); overflow: hidden; margin-bottom: .5rem; background: var(--tinte-2); } .beitrag__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weich); } .beitrag:hover .beitrag__bild img { transform: scale(1.06); } .beitrag time { font-size: .88rem; color: var(--rot); font-weight: 600; } .beitrag b { font-family: var(--schrift-titel); font-stretch: 110%; font-size: 1.3rem; line-height: 1.15; } .beitrag span { color: var(--stahl); font-size: .96rem; } .leerhinweis { color: var(--stahl); font-size: 1.1rem; } /* ── Seitenkopf der Unterseiten ────────────────────────────────────── */ .seitenkopf { position: relative; background: var(--tinte); color: #fff; padding: calc(var(--kopfhoehe) + 36px + clamp(3rem, 6vw, 5rem)) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; isolation: isolate; } .seitenkopf::before { content: ''; position: absolute; inset: auto -10% -60% 40%; height: 120%; background: radial-gradient(closest-side, rgba(208,51,61,.28), transparent); z-index: -1; } .seitenkopf__streifen { position: absolute; left: 0; bottom: 2.2rem; width: 30vw; display: grid; gap: 7px; z-index: -1; opacity: .7; } .seitenkopf__streifen i { height: 5px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, transparent, var(--rot)); width: calc(100% - var(--i) * 9%); transform: scaleX(0) skewX(-28deg); transform-origin: 0 50%; animation: streifen 1.2s var(--weich) both; animation-delay: calc(var(--start) + .3s + var(--i) * 50ms); } .seitenkopf__text { min-width: 0; } .seitenkopf__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .seitenkopf--bild .seitenkopf__innen { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .krumen { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .88rem; color: var(--nebel); margin-bottom: 1.6rem; animation: auftauchen .7s var(--weich) both var(--start); } .krumen a { text-decoration: none; } .krumen a:hover { color: #fff; } .krumen > * + *::before { content: '/'; margin-right: .6rem; color: rgba(255,255,255,.3); } .krumen [aria-current] { color: #fff; } .seitenkopf__vorzeile { color: #FF6B73; font-weight: 600; margin-bottom: 1rem; animation: auftauchen .8s var(--weich) both calc(var(--start) + .05s); } .seitenkopf__titel { font-size: clamp(2.3rem, 5.4vw, 5rem); font-stretch: 122%; font-weight: 800; line-height: .96; letter-spacing: -.035em; margin-bottom: 1.3rem; animation: titel-rein 1s var(--weich) both calc(var(--start) + .1s); } @keyframes titel-rein { from { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -20% 0); } } .seitenkopf__einleitung { max-width: 58ch; color: rgba(255,255,255,.78); font-size: clamp(1.05rem, 1.3vw, 1.2rem); animation: auftauchen 1s var(--weich) both calc(var(--start) + .3s); } .seitenkopf__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; animation: auftauchen 1s var(--weich) both calc(var(--start) + .45s); } .seitenkopf--bild .seitenkopf__titel { font-size: clamp(2.2rem, 4.4vw, 4.3rem); } .seitenkopf__bild { aspect-ratio: 4 / 3; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); } /* ── Leistungsübersicht ────────────────────────────────────────────── */ .kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .kachel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 380px; border-radius: var(--rund-gross); overflow: hidden; text-decoration: none; color: #fff; background: var(--tinte); isolation: isolate; transform-style: preserve-3d; transition: transform .6s var(--weich), box-shadow .6s var(--weich); } .kachel--breit { grid-column: span 2; } .kachel__bild { position: absolute; inset: 0; z-index: -2; } .kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--weich); } .kachel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26,32,41,.1) 0%, rgba(26,32,41,.55) 45%, rgba(26,32,41,.95) 100%); transition: opacity .5s; } .kachel:hover .kachel__bild img { transform: scale(1.08); } .kachel:hover { box-shadow: 0 30px 60px -24px rgba(26,32,41,.45); } .kachel__inhalt { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: .55rem; padding: clamp(1.4rem, 2.5vw, 2rem); } .kachel__symbol { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--rot); margin-bottom: .4rem; transition: transform .6s var(--feder); } .kachel:hover .kachel__symbol { transform: rotate(-8deg) scale(1.08); } .kachel__symbol svg { width: 25px; height: 25px; } .kachel__titel { font-family: var(--schrift-titel); font-stretch: 116%; font-weight: 780; font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.05; } .kachel__text { color: rgba(255,255,255,.78); font-size: .96rem; line-height: 1.5; max-width: 52ch; } .kachel__mehr { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; margin-top: .3rem; color: #fff; } .kachel__mehr svg { width: 1.1em; height: 1.1em; transition: transform .4s var(--weich); } .kachel:hover .kachel__mehr svg { transform: translateX(5px); } /* ── Artikel: Leistung ─────────────────────────────────────────────── */ .artikel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 6vw, 6rem); align-items: start; } .artikel__symbol { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--rot); color: #fff; margin-bottom: 1.8rem; } .artikel__symbol svg { width: 34px; height: 34px; } .artikel__bild { margin: 2.5rem 0 0; aspect-ratio: 16 / 10; } .artikel__seite { position: sticky; top: calc(var(--kopfhoehe) + 1.5rem); display: grid; gap: 1.2rem; } .artikel__haupt { min-width: 0; } .seitenverzeichnis { padding: 1.4rem 1.5rem; border-radius: var(--rund-gross); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); } .seitenverzeichnis__titel { margin: 0 0 .8rem; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 750; font-size: 1.05rem; } .seitenverzeichnis ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; } .seitenverzeichnis a { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .3rem; padding: .45rem .5rem; margin-inline: -.5rem; border-radius: 10px; text-decoration: none; font-size: .93rem; font-weight: 550; line-height: 1.35; color: #3A4452; transition: background .25s, color .25s; } .seitenverzeichnis a span { color: var(--rot); font-variant-numeric: tabular-nums; font-weight: 700; font-size: .82rem; padding-top: .1em; } .seitenverzeichnis a:hover { background: #fff; color: var(--tinte); } .artikel__haupt h3[id] { scroll-margin-top: calc(var(--kopfhoehe) + 2rem); } .seitentafel { background: #fff; border-radius: var(--rund-gross); padding: 1.6rem; box-shadow: var(--schatten); display: grid; gap: 1rem; } .seitentafel__titel { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 750; font-size: 1.2rem; margin: 0; } .seitentafel__ort { display: grid; gap: .35rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); } .seitentafel__ort > a:first-child { text-decoration: none; font-size: 1.05rem; } .seitentafel__ort .stand { font-size: .88rem; font-weight: 550; color: var(--stahl); } .seitentafel__tel { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; text-decoration: none; color: var(--rot); font-variant-numeric: tabular-nums; } .seitentafel__tel svg { width: 18px; height: 18px; } .fliesstext { font-size: 1.08rem; } .fliesstext > :first-child { margin-top: 0; } .fliesstext h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 2.4rem 0 .9rem; } .fliesstext h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-stretch: 112%; margin: 2.4rem 0 .8rem; } .fliesstext h4 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; } .fliesstext p { color: #3A4452; } .abschnitt--dunkel .fliesstext p { color: var(--nebel); } .fliesstext a { color: var(--rot); font-weight: 550; } .fliesstext ul, .punkte { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: .6rem; } .fliesstext ul li, .punkte li { position: relative; padding-left: 1.9rem; color: #3A4452; } .fliesstext ul li::before, .punkte li::before { content: ''; position: absolute; left: 0; top: .62em; width: 1.05rem; height: 4px; border-radius: 3px; background: var(--rot); transform: skewX(-28deg); box-shadow: 3px 6px 0 -1px rgba(208,51,61,.4); } .hinweis-kasten { position: relative; margin: 2rem 0; padding: 1.4rem 1.6rem 1.4rem 1.8rem; border-radius: var(--rund); background: color-mix(in srgb, var(--rot) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rot) 22%, transparent); overflow: hidden; } .hinweis-kasten::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rot); } .hinweis-kasten p { margin: 0; color: var(--tinte) !important; } .blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: clamp(4rem, 8vw, 7rem); } .blaettern a { display: grid; gap: .3rem; padding: 1.6rem 1.8rem; border-radius: var(--rund-gross); background: #fff; box-shadow: var(--schatten); text-decoration: none; transition: background .35s, color .35s, transform .5s var(--weich); } .blaettern a:hover { background: var(--tinte); color: #fff; transform: translateY(-4px); } .blaettern small { color: var(--stahl); font-weight: 550; } .blaettern a:hover small { color: var(--nebel); } .blaettern b { font-family: var(--schrift-titel); font-stretch: 112%; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.15; } .blaettern__vor { text-align: right; grid-column: 2; } /* ── Standortseite ─────────────────────────────────────────────────── */ .standort { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .standort__zeiten { background: #fff; border-radius: var(--rund-gross); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--schatten); } .standort__stand { margin-bottom: 1.2rem; } .standort__titel { font-size: 1.6rem; font-stretch: 116%; } .zeittafel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .zeittafel th, .zeittafel td { padding: .75rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; } .zeittafel th { font-weight: 550; padding-right: 1rem; } .zeittafel td { text-align: right; font-weight: 600; } .zeittafel tr.ist-heute th, .zeittafel tr.ist-heute td { color: var(--rot); } .zeittafel tr.ist-zu td { color: var(--stahl); font-weight: 450; } .zeittafel small { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--rot); color: #fff; font-size: .72rem; font-weight: 700; vertical-align: middle; } .standort__hinweis { margin: 1.2rem 0 0; color: var(--stahl); font-size: .95rem; } .datenliste { margin: 1.6rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--linie); } .datenliste div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--linie); } .datenliste dt { color: var(--stahl); font-weight: 550; } .datenliste dd { margin: 0; font-weight: 550; } .datenliste small { color: var(--stahl); font-weight: 450; } /* ── Bildstreifen ──────────────────────────────────────────────────── */ .bildstreifen { overflow: hidden; padding-bottom: clamp(4rem, 8vw, 7rem); } .bildstreifen__bahn { display: flex; gap: 1.2rem; width: max-content; animation: band 50s linear infinite; } .bildstreifen:hover .bildstreifen__bahn { animation-play-state: paused; } .bildstreifen__bild { width: clamp(260px, 30vw, 440px); aspect-ratio: 4 / 3; border-radius: var(--rund-gross); overflow: hidden; flex: none; } .bildstreifen__bild img { width: 100%; height: 100%; object-fit: cover; } @keyframes band { to { transform: translateX(-50%); } } /* ── Abbildungen, Erklärpunkte ─────────────────────────────────────── */ .abbildung { margin: 2.4rem 0; } .abbildung__knopf { display: block; width: 100%; padding: 1rem; border: 0; border-radius: var(--rund); background: #fff; box-shadow: var(--schatten); cursor: zoom-in; transition: transform .5s var(--weich); } .abbildung__knopf:hover { transform: scale(1.01); } .abbildung__knopf img { margin-inline: auto; } .abbildung figcaption, .quelle { margin-top: .8rem; color: var(--stahl); font-size: .9rem; } .dreier { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: 2rem; } .dreier__punkt { position: relative; padding: 1.6rem 1.6rem 1.7rem; border-radius: var(--rund-gross); background: #fff; box-shadow: var(--schatten); overflow: hidden; } .dreier__punkt::before { content: ''; position: absolute; left: 1.6rem; top: 0; width: 42px; height: 5px; border-radius: 0 0 4px 4px; background: var(--rot); } .dreier__punkt b { display: block; font-family: var(--schrift-titel); font-stretch: 114%; font-size: 1.3rem; margin: .6rem 0 .5rem; } .dreier__punkt p { margin: 0; color: var(--stahl); } /* ── Karriere ──────────────────────────────────────────────────────── */ .stelle { background: #fff; border-radius: var(--rund-gross); padding: clamp(1.6rem, 4vw, 3.4rem); box-shadow: var(--schatten); margin-bottom: 2rem; position: relative; overflow: hidden; } .stelle::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--rot) 0 60%, color-mix(in srgb, var(--rot) 50%, transparent) 60% 72%, transparent 72% 76%, color-mix(in srgb, var(--rot) 30%, transparent) 76% 84%, transparent 84%); } .stelle__titel { font-size: clamp(2rem, 4vw, 3.2rem); font-stretch: 120%; margin-bottom: .3rem; } .stelle__unter { color: var(--rot); font-weight: 600; font-size: 1.1rem; margin-bottom: 1.6rem; } .stelle__einleitung { max-width: 78ch; } .stelle__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); margin: 2.2rem 0; padding-top: 2rem; border-top: 1px solid var(--linie); } .stelle__spalte h3 { font-size: 1.25rem; font-stretch: 112%; margin-bottom: 1rem; } .haken { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .haken li { position: relative; padding-left: 2rem; color: #3A4452; line-height: 1.5; } .haken li::before { content: ''; position: absolute; left: 0; top: .2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; } .stelle__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; } /* ── Kontakt ───────────────────────────────────────────────────────── */ .kontakt { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } .formular { display: grid; gap: 1.8rem; background: #fff; border-radius: var(--rund-gross); padding: clamp(1.4rem, 4vw, 2.8rem); box-shadow: var(--schatten); } .formular__gruppe { border: 0; margin: 0; padding: 0; min-width: 0; } .formular__gruppe legend { font-family: var(--schrift-titel); font-stretch: 110%; font-weight: 700; font-size: 1.12rem; margin-bottom: .8rem; padding: 0; } .wahlreihe { display: flex; flex-wrap: wrap; gap: .5rem; } .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; } .feld { display: grid; gap: .4rem; transition: opacity .35s, transform .45s var(--weich); } .feld--breit { grid-column: 1 / -1; } .feld > span { font-weight: 600; font-size: .92rem; } .feld i { color: var(--rot); font-style: normal; } .feld input, .feld textarea, .aufgabe__eingabe { width: 100%; min-height: 52px; padding: .8rem 1rem; border: 0; border-radius: 12px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); font: inherit; font-size: 1rem; color: var(--tinte); transition: box-shadow .25s, background .25s; } .feld textarea { min-height: 150px; resize: vertical; line-height: 1.55; } .feld input:hover, .feld textarea:hover { box-shadow: inset 0 0 0 1.5px var(--nebel); } .feld input:focus, .feld textarea:focus, .aufgabe__eingabe:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--tinte), 0 0 0 5px color-mix(in srgb, var(--plakette) 22%, transparent); } .feld.ist-aus { display: none; } .formular__hinweis { margin: -.6rem 0 0; color: var(--stahl); font-size: .9rem; } .haken-feld { position: relative; display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; font-size: .95rem; color: #3A4452; } .haken-feld input { appearance: none; flex: none; width: 24px; height: 24px; margin: .1rem 0 0; border-radius: 7px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--nebel); cursor: pointer; transition: background .2s, box-shadow .2s; } .haken-feld input:checked { background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 75% no-repeat; box-shadow: none; } .haken-feld i { color: var(--rot); font-style: normal; } .formular .knopf { justify-self: start; } .gesendet { display: grid; justify-items: start; gap: 1rem; background: #fff; border-radius: var(--rund-gross); padding: clamp(1.8rem, 5vw, 3.4rem); box-shadow: var(--schatten); } .gesendet h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0; } .gesendet p { color: var(--stahl); margin: 0; } .gesendet__haken { width: 72px; height: 72px; } .gesendet__haken circle { fill: none; stroke: var(--gruen); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: zeichnen .8s var(--weich) forwards; } .gesendet__haken path { fill: none; stroke: var(--gruen); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: zeichnen .5s var(--weich) forwards .6s; } @keyframes zeichnen { to { stroke-dashoffset: 0; } } .kontakt__seite { display: grid; gap: 1rem; position: sticky; top: calc(var(--kopfhoehe) + 1.5rem); } .kontaktort { background: var(--tinte); color: #fff; border-radius: var(--rund-gross); padding: 1.5rem 1.6rem; display: grid; gap: .45rem; } .kontaktort__name { margin: 0; font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 750; font-size: 1.2rem; } .kontaktort__name a { text-decoration: none; } .kontaktort .stand { color: var(--nebel); font-weight: 500; font-size: .9rem; } .kontaktort__tel { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 800; font-size: 1.6rem; text-decoration: none; font-variant-numeric: tabular-nums; } .kontaktort__tel:hover { color: #FF6B73; } .kontaktort__adresse { margin: 0; color: var(--nebel); font-size: .92rem; } .kontaktort .pfeilverweis { color: #FF6B73; } .kontaktort__mail { font-weight: 600; word-break: break-all; } /* Sicherheitsfrage des Formularschutzes */ .honigtopf { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .aufgabe { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; background: rgba(26,32,41,.6); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; } .aufgabe.ist-offen { opacity: 1; } .aufgabe__kasten { width: min(420px, 100%); background: #fff; border-radius: var(--rund-gross); padding: 2rem; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); transform: translateY(20px) scale(.97); transition: transform .45s var(--feder); } .aufgabe.ist-offen .aufgabe__kasten { transform: none; } .aufgabe.ist-falsch .aufgabe__kasten { animation: ruetteln .45s; } @keyframes ruetteln { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } .aufgabe__marke { color: var(--rot); font-weight: 600; font-size: .9rem; } .aufgabe__frage { font-family: var(--schrift-titel); font-stretch: 112%; font-size: 1.5rem; font-weight: 700; margin: .4rem 0 1rem; } .aufgabe__hinweis { color: var(--stahl); font-size: .88rem; margin: .7rem 0 1.2rem; } .aufgabe__knoepfe { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; } body.ist-gesperrt { overflow: hidden; } /* ── Galerie und Bildansicht ───────────────────────────────────────── */ .bilderraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; } .bilderraster button { padding: 0; border: 0; border-radius: var(--rund); overflow: hidden; aspect-ratio: 1; cursor: zoom-in; background: var(--tinte-2); } .bilderraster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--weich); } .bilderraster button:hover img { transform: scale(1.06); } .leuchtkasten { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 4rem 1rem; background: rgba(14,17,22,.94); } .leuchtkasten[hidden] { display: none; } .leuchtkasten figure { margin: 0; display: grid; gap: .8rem; justify-items: center; } .leuchtkasten img { max-height: 80vh; width: auto; border-radius: 10px; background: #fff; } .leuchtkasten figcaption { color: var(--nebel); font-size: .9rem; text-align: center; } .leuchtkasten button { position: absolute; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; } .leuchtkasten button:hover { background: var(--rot); } .lk-zu { top: 1rem; right: 1rem; } .lk-zurueck { left: 1rem; top: 50%; translate: 0 -50%; } .lk-vor { right: 1rem; top: 50%; translate: 0 -50%; } /* ── Fehlerseite, Einzelseiten ─────────────────────────────────────── */ .fehlerseite { background: var(--tinte); color: #fff; min-height: 90svh; display: grid; align-items: center; padding: calc(var(--kopfhoehe) + 5rem) 0 5rem; } .fehlerseite__innen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } .fehlerseite h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); font-stretch: 122%; } .fehlerseite p { color: var(--nebel); max-width: 48ch; } .fehlerseite__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } .einzelseite { background: var(--tinte); color: #fff; min-height: 100svh; display: grid; place-items: center; padding: 2rem var(--rand); } .einzelseite__innen { max-width: 720px; } .einzelseite__logo { width: 220px; margin-bottom: 3rem; } .einzelseite h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-stretch: 122%; } .einzelseite p { color: var(--nebel); } .einzelseite__orte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; margin: 2.4rem 0; } .einzelseite__orte p { margin: 0; color: #fff; } .einzelseite__orte b { font-family: var(--schrift-titel); font-stretch: 112%; } .einzelseite__orte a { color: #FF6B73; font-weight: 700; } .einzelseite__fuss { font-size: .85rem; display: flex; gap: 1.2rem; flex-wrap: wrap; } /* ── Fußbereich ────────────────────────────────────────────────────── */ .fuss { background: var(--tinte); color: var(--nebel); font-size: .95rem; position: relative; overflow: hidden; } .fuss a { text-decoration: none; } .fuss a:hover { color: #fff; } .fuss__ruf { border-bottom: 1px solid rgba(255,255,255,.08); padding-block: clamp(3.5rem, 7vw, 6rem); background: radial-gradient(80% 140% at 100% 0%, rgba(208,51,61,.24), transparent 60%); } .fuss__ruf-innen { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; } .fuss__ruf-titel { margin: 0; font-family: var(--schrift-titel); font-stretch: 122%; font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: .98; letter-spacing: -.03em; color: #fff; max-width: 14ch; } .fuss__nummern { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 3rem); } .fuss__nummer { display: grid; gap: .2rem; } .fuss__nummer span { font-weight: 550; } .fuss__nummer b { font-family: var(--schrift-titel); font-stretch: 116%; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.1rem); color: #fff; font-variant-numeric: tabular-nums; background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; transition: background-size .5s var(--weich), color .3s; } .fuss__nummer:hover b { background-size: 100% 3px; color: #FF6B73; } .fuss__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 4.5rem); } .fuss__logo img { width: 210px; margin-bottom: 1.2rem; } .fuss__marke p { max-width: 38ch; } .fuss__gtue { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; } .fuss__gtue img { width: 110px; flex: none; } .fuss__gtue span { font-size: .82rem; line-height: 1.4; } .fuss__titel { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 750; font-size: 1.05rem; color: #fff; margin: 0 0 1rem; } .fuss address { font-style: normal; margin-bottom: 1rem; } .fuss__zeiten { margin: 0; display: grid; gap: .3rem; font-size: .88rem; } .fuss__zeiten div { display: grid; gap: 0; } .fuss__zeiten dt { color: #fff; font-weight: 550; } .fuss__zeiten dd { margin: 0; font-variant-numeric: tabular-nums; } .fuss__zeiten .ist-heute dt::after { content: ' · heute'; color: #FF6B73; } .fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .fuss__liste a { display: inline-block; transition: transform .35s var(--weich), color .2s; } .fuss__liste a:hover { transform: translateX(4px); } .fuss__unten { display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; justify-content: space-between; padding-block: 1.6rem 2rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; } .fuss__recht { display: flex; flex-wrap: wrap; gap: 1.4rem; } .fuss__recht button { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; } .fuss__recht button:hover { color: #fff; } .herz { color: var(--rot); } .fuss__urheber a { color: #fff; font-weight: 600; } .dock { display: none; } @media (max-width: 720px) { .dock { position: fixed; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 95; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: .35rem; border-radius: 18px; background: rgba(26,32,41,.88); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); transform: translateY(140%); transition: transform .6s var(--weich); } .dock.ist-sichtbar { transform: none; } .dock__knopf { display: grid; justify-items: center; gap: .15rem; padding: .5rem .3rem; border-radius: 13px; color: #fff; text-decoration: none; font-size: .78rem; font-weight: 600; } .dock__knopf svg { width: 20px; height: 20px; } .dock__knopf--rot { background: var(--rot); } .fuss { padding-bottom: 5.5rem; } } /* ── Einwilligung: Hinweis und Einstellungen ───────────────────────── */ .zustimmung { position: fixed; left: clamp(.6rem, 2vw, 1.5rem); bottom: calc(clamp(.6rem, 2vw, 1.5rem) + env(safe-area-inset-bottom)); z-index: 140; width: min(440px, calc(100% - 1.2rem)); display: grid; gap: 1rem; padding: 1.4rem 1.5rem 1.2rem; border-radius: 22px; color: #fff; background: rgba(26,32,41,.94); background-image: var(--rauschen); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -24px rgba(0,0,0,.7); overflow: hidden; isolation: isolate; } .zustimmung[hidden] { display: none; } .zustimmung::before { content: ''; position: absolute; right: -30%; top: -60%; width: 80%; height: 140%; z-index: -1; background: radial-gradient(closest-side, rgba(208,51,61,.35), transparent); } .zustimmung.ist-da { animation: zustimmung-rein .9s var(--weich) both; } .zustimmung.ist-weg { animation: zustimmung-raus .5s var(--weich) forwards; } @keyframes zustimmung-rein { from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(6px); } } @keyframes zustimmung-raus { to { opacity: 0; transform: translateY(30px) scale(.97); visibility: hidden; } } .zustimmung__kopf { display: flex; align-items: center; gap: .8rem; } .zustimmung__kopf h2 { margin: 0; font-size: 1.25rem; font-stretch: 112%; line-height: 1.15; } .zustimmung__zeichen { flex: none; display: grid; gap: 4px; width: 34px; } .zustimmung__zeichen i { height: 4px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, transparent, var(--rot)); transform: skewX(-28deg) scaleX(0); transform-origin: 0 50%; } .zustimmung.ist-da .zustimmung__zeichen i { animation: streifen .9s var(--weich) both; } .zustimmung__zeichen i:nth-child(1) { width: 100%; animation-delay: .25s !important; } .zustimmung__zeichen i:nth-child(2) { width: 82%; animation-delay: .32s !important; } .zustimmung__zeichen i:nth-child(3) { width: 64%; animation-delay: .39s !important; } .zustimmung__zeichen i:nth-child(4) { width: 46%; animation-delay: .46s !important; } .zustimmung p { margin: 0; color: rgba(255,255,255,.76); font-size: .93rem; line-height: 1.55; } .zustimmung__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .zustimmung__knoepfe .knopf { justify-content: center; width: 100%; } .zustimmung__fuss { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .84rem; } .zustimmung__fuss a, .zustimmung__fuss button { padding: .2rem 0; border: 0; background: none; color: rgba(255,255,255,.7); font: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; cursor: pointer; } .zustimmung__fuss a:hover, .zustimmung__fuss button:hover { color: #fff; text-decoration-color: currentColor; } .zustimmung__fuss button { font-weight: 650; color: #fff; } @media (max-width: 720px) { .zustimmung { left: .5rem; right: .5rem; width: auto; padding: 1.15rem 1.15rem 1rem; border-radius: 20px; } .zustimmung__knoepfe { grid-template-columns: minmax(0, 1fr); } } .einwilligung { width: min(600px, calc(100% - 1.2rem)); max-height: calc(100dvh - 1.2rem); padding: 0; border: 0; border-radius: var(--rund-gross); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); color: var(--tinte); overflow: auto; overscroll-behavior: contain; } .einwilligung::backdrop { background: rgba(14,18,24,.6); backdrop-filter: blur(8px); } .einwilligung[open] { animation: einwilligung-rein .6s var(--weich); } @keyframes einwilligung-rein { from { opacity: 0; transform: translateY(30px) scale(.97); } } .einwilligung__kasten { padding: clamp(1.3rem, 4vw, 2.1rem); display: grid; gap: 1rem; } .einwilligung__oben { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .einwilligung h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); font-stretch: 112%; margin: 0; } .einwilligung__zu { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--papier); color: var(--tinte); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .25s, transform .4s var(--feder); } .einwilligung__zu:hover { background: var(--tinte); color: #fff; transform: rotate(90deg); } .einwilligung p { margin: 0; color: var(--stahl); font-size: .93rem; line-height: 1.55; } .ew-art { display: grid; gap: .55rem; padding: 1rem 1.1rem; border-radius: var(--rund); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .3s; } .ew-art--wahl { cursor: pointer; } .ew-art--wahl:hover { box-shadow: inset 0 0 0 1.5px var(--tinte); } .ew-art__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ew-art__kopf b { display: block; font-family: var(--schrift-titel); font-stretch: 110%; font-size: 1.05rem; } .ew-art__kopf small { display: block; color: var(--stahl); font-size: .82rem; margin-top: .1rem; } .ew-art p { font-size: .88rem; } .ew-immer { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--gruen) 16%, #fff); color: #17784A; font-weight: 800; font-size: .9rem; } .ew-art details summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .82rem; font-weight: 650; color: var(--tinte); list-style: none; } .ew-art details summary::-webkit-details-marker { display: none; } .ew-art details summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .3s var(--weich); } .ew-art details[open] summary::after { rotate: 225deg; translate: 0 2px; } .ew-liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem .9rem; margin: .6rem 0 0; font-size: .82rem; line-height: 1.45; } .ew-liste dt { font-weight: 650; color: var(--tinte); } .ew-liste dd { margin: 0; color: var(--stahl); overflow-wrap: anywhere; } .ew-liste code { font-size: .78rem; padding: .1em .35em; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); } @media (max-width: 520px) { .ew-liste { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .ew-liste dd { margin-bottom: .45rem; } } .schieber { position: relative; flex: none; display: inline-block; } .schieber input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; } .schieber__bahn { position: relative; display: block; width: 52px; height: 30px; border-radius: 999px; background: var(--nebel); transition: background .3s; } .schieber__bahn::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.22); transition: transform .45s var(--feder); } .schieber input:checked + .schieber__bahn { background: var(--gruen); } .schieber input:checked + .schieber__bahn::after { transform: translateX(22px); } .schieber input:focus-visible + .schieber__bahn { outline: 3px solid var(--plakette); outline-offset: 2px; } .einwilligung__knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .2rem; } .einwilligung__knoepfe .knopf { justify-content: center; width: 100%; padding-inline: .7em; } @media (max-width: 560px) { .einwilligung__knoepfe { grid-template-columns: minmax(0, 1fr); } } .einwilligung__recht { display: flex; gap: 1.2rem; font-size: .84rem; } /* ── HU-Erinnerung im HU-Check ─────────────────────────────────────── */ .hucheck__rechts { display: grid; gap: 1.4rem; min-width: 0; } /* Bewusst ohne eigenen Stapelkontext: Die Rechenaufgabe im Formular liegt fest über der ganzen Seite. */ .erinnerung { position: relative; display: grid; gap: 1.2rem; padding: 1.2rem 1.3rem; border-radius: var(--rund-gross); color: #fff; background: radial-gradient(closest-side, color-mix(in srgb, var(--plakette) 40%, transparent), transparent) 135% -120% / 70% 220% no-repeat, var(--rauschen), var(--tinte); box-shadow: 0 30px 60px -30px rgba(26,32,41,.55); overflow: hidden; } .erinnerung[hidden] { display: none; } .erinnerung::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--rot), #FF6B73); } .erinnerung__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; } .erinnerung__glocke { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .erinnerung__glocke svg { width: 26px; height: 26px; transform-origin: 50% 12%; animation: glocke 4.5s var(--weich) infinite; } @keyframes glocke { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(16deg); } 80% { transform: rotate(-13deg); } 84% { transform: rotate(9deg); } 88% { transform: rotate(-5deg); } 92% { transform: rotate(2deg); } } .erinnerung__text { display: grid; gap: .2rem; min-width: 0; } .erinnerung__text b { font-family: var(--schrift-titel); font-stretch: 112%; font-size: 1.15rem; line-height: 1.15; } .erinnerung__text span { color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.45; } .erinnerung__auf { white-space: nowrap; } .erinnerung__auf.ist-laden { opacity: .6; pointer-events: none; } .erinnerung__formular { display: grid; gap: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.12); } .erinnerung__formular[hidden] { display: none; } .erinnerung.ist-offen .erinnerung__formular { animation: erinnerung-auf .7s var(--weich); } @keyframes erinnerung-auf { from { opacity: 0; transform: translateY(-14px); } } .erinnerung__felder { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .9rem; } .erinnerung .feld > span { color: rgba(255,255,255,.85); } .erinnerung .feld i { color: #FF6B73; } .erinnerung .feld input { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); } .erinnerung .feld input:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); } .erinnerung .feld input:focus { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px #fff, 0 0 0 5px color-mix(in srgb, var(--plakette) 30%, transparent); } .erinnerung__legende { font-size: 1rem !important; color: #fff; margin-bottom: .6rem !important; } .erinnerung .wahlchip span { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); } .erinnerung .wahlchip:hover span { box-shadow: inset 0 0 0 1.5px #fff; } .erinnerung .wahlchip input:checked + span { background: #fff; color: var(--tinte); } .erinnerung .haken-feld { color: rgba(255,255,255,.75); font-size: .88rem; line-height: 1.5; } .erinnerung .haken-feld input { background-color: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); } .erinnerung .haken-feld input:checked { background-color: var(--rot); box-shadow: none; } .erinnerung .haken-feld a { color: #fff; } .erinnerung .haken-feld i { color: #FF6B73; } .erinnerung__formular > .knopf { justify-self: start; } .erinnerung .aufgabe__kasten { color: var(--tinte); } .erinnerung__fehler { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: rgba(208,51,61,.22); box-shadow: inset 0 0 0 1px rgba(255,107,115,.5); color: #fff; font-size: .92rem; animation: ruetteln .5s var(--weich); } @media (max-width: 720px) { .erinnerung__kopf { grid-template-columns: auto minmax(0, 1fr); } .erinnerung__auf { grid-column: 1 / -1; justify-content: center; } .erinnerung__felder { grid-template-columns: minmax(0, 1fr); } .erinnerung__formular > .knopf { justify-self: stretch; justify-content: center; } } /* Statusseite der Erinnerung */ .seitenkopf--erinnerung { min-height: min(86vh, 760px); display: grid; align-items: center; } .erinnerungsseite { display: grid; justify-items: start; } .erinnerungsseite__plakette { width: clamp(120px, 16vw, 170px); margin-bottom: 1.6rem; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); animation: erinnerung-plakette 1.4s var(--feder) both calc(var(--start) + .1s); } .erinnerungsseite__plakette .plakette { width: 100%; height: auto; } @keyframes erinnerung-plakette { from { opacity: 0; transform: rotate(-200deg) scale(.4); } } .erinnerungsseite__adresse { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; padding: .55rem 1rem; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; animation: auftauchen 1s var(--weich) both calc(var(--start) + .4s); } .seitenkopf--erinnerung form { display: contents; } /* ── Startseite: letzte Karte der Wissensschiene, Textabschnitt ────── */ .artikelkarte--alle { position: relative; grid-template-rows: 1fr; min-height: 100%; color: #fff; background: var(--rot); background-image: var(--rauschen), linear-gradient(150deg, var(--rot) 0%, var(--rot-tief) 100%); isolation: isolate; } .artikelkarte--alle::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-62deg, transparent 0 22px, rgba(255,255,255,.07) 22px 30px); transition: transform 1.2s var(--weich); } .artikelkarte--alle:hover::before { transform: translateX(30px); } .artikelkarte--alle .artikelkarte__text { align-content: end; gap: .7rem; padding: 2rem 1.8rem; } .artikelkarte--alle .artikelkarte__text b { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.02; } .artikelkarte--alle .artikelkarte__text span { color: rgba(255,255,255,.82); } .artikelkarte__pfeil { display: grid; place-items: center; width: 58px; height: 58px; margin-top: .6rem; border-radius: 50%; background: #fff; color: var(--rot); transition: transform .6s var(--feder); } .artikelkarte__pfeil svg { width: 24px; height: 24px; } .artikelkarte--alle:hover .artikelkarte__pfeil { transform: translateX(10px) rotate(-45deg); } .abschnitt--suche { padding-block: clamp(3rem, 7vw, 6rem); background: var(--papier); } .suchtext { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; } .suchtext .abschnitt__titel { font-size: clamp(1.6rem, 2.8vw, 2.5rem); margin: 0; } .suchtext__spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.2rem; } .suchtext__spalten p { margin: 0; color: #3A4452; line-height: 1.7; } @media (max-width: 960px) { .suchtext, .suchtext__spalten { grid-template-columns: minmax(0, 1fr); } } /* ── Meldungen, Bearbeitungsleiste ─────────────────────────────────── */ .meldung { position: fixed; left: 50%; top: calc(var(--kopfhoehe) + 48px); z-index: 120; translate: -50% 0; width: min(640px, calc(100% - 2rem)); padding: 1rem 1.3rem; border-radius: var(--rund); background: var(--tinte); color: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); animation: auftauchen .5s var(--weich), weg .6s var(--weich) 7s forwards; } .meldung .rahmen { padding: 0; } .meldung--fehler { background: var(--rot-tief); } .meldung--erfolg { background: #17784A; } @keyframes weg { to { opacity: 0; visibility: hidden; transform: translateY(-10px); } } .vorschauleiste { position: fixed; left: 1rem; bottom: 1rem; z-index: 300; display: flex; align-items: center; gap: .6rem; padding: .45rem; border-radius: 999px; background: rgba(26,32,41,.94); color: #fff; font-size: .85rem; box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); } .vorschauleiste--wartung { background: #8a5a00; } .vorschauleiste__griff { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--rot); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; } .vorschauleiste__griff svg { width: 18px; height: 18px; } .vorschauleiste .zeichen-auf { display: none; } .vorschauleiste.ist-zu .zeichen-auf { display: block; } .vorschauleiste.ist-zu .zeichen-zu { display: none; } .vorschauleiste__innen { display: flex; align-items: center; gap: 1rem; padding-right: .8rem; } .vorschauleiste.ist-zu .vorschauleiste__innen { display: none; } .vorschauleiste__knoepfe { display: flex; gap: .8rem; } .vorschauleiste__knoepfe a { color: #fff; font-weight: 600; } @media (max-width: 720px) { .vorschauleiste { bottom: 6rem; } .vorschauleiste__lage { display: none; } } /* ── Impressum, Datenschutz, COLOREA ───────────────────────────────── */ .impressum { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .impressum__haupt h2 { font-size: 1.5rem; margin-top: 2rem; } .urhebertafel { position: sticky; top: calc(var(--kopfhoehe) + 1.5rem); overflow: hidden; border-radius: var(--rund-gross); background: var(--tinte); color: var(--nebel); padding: 2rem; font-size: .92rem; } .urhebertafel__schein { position: absolute; inset: -40% -40% auto auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(208,51,61,.35), transparent 70%); } .urhebertafel__kopf { position: relative; margin-bottom: 1.2rem; } .urhebertafel__logo { width: 160px; } .urhebertafel__wortmarke { font-family: var(--schrift-titel); font-stretch: 125%; font-weight: 900; font-size: 1.8rem; color: #fff; margin: 0; } .urhebertafel__marke { margin: .3rem 0 0; color: #FF6B73; font-weight: 600; } .urhebertafel__einleitung { position: relative; } .urhebertafel .leistungen { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .9rem; } .urhebertafel .leistungen li { display: grid; grid-template-columns: 36px 1fr; gap: .8rem; } .urhebertafel .leistungen b { display: block; color: #fff; } .leistungen__zeichen { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #FF6B73; } .leistungen__zeichen svg { width: 20px; height: 20px; } .urhebertafel__zeilen { display: grid; gap: .4rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; margin-top: 1rem; } .urhebertafel__zeilen div { display: grid; grid-template-columns: 6rem 1fr; gap: .6rem; } .urhebertafel__zeilen b { color: #fff; font-weight: 550; } .urhebertafel__zeilen a { color: #fff; } .urhebertafel__knopf { display: inline-flex; margin-top: 1.4rem; padding: .7rem 1.2rem; border-radius: 999px; background: var(--rot); color: #fff; font-weight: 600; text-decoration: none; } .urhebertafel__notiz { margin: 1.2rem 0 0; font-size: .8rem; } .urhebertafel__notiz a { color: #fff; } .rechtstext { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .rechtstext__verzeichnis { position: sticky; top: calc(var(--kopfhoehe) + 1.5rem); background: #fff; border-radius: var(--rund-gross); padding: 1.4rem; box-shadow: var(--schatten); font-size: .9rem; } .verzeichnisklapp summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .verzeichnisklapp summary::-webkit-details-marker { display: none; } .verzeichnisklapp__pfeil { width: 18px; height: 18px; transition: transform .3s; } .verzeichnisklapp[open] .verzeichnisklapp__pfeil { transform: rotate(180deg); } .rechtstext__marke { margin: 0; font-family: var(--schrift-titel); font-weight: 700; font-stretch: 110%; } .rechtstext__verzeichnis ol { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .3rem; } .rechtstext__verzeichnis li { display: grid; grid-template-columns: 2rem 1fr; } .rechtstext__verzeichnis li span { color: var(--rot); font-weight: 600; font-variant-numeric: tabular-nums; } .rechtstext__verzeichnis a { text-decoration: none; } .rechtstext__verzeichnis a:hover { color: var(--rot); } .rechtstext__stand { color: var(--stahl); margin: 1rem 0 0; } .rechtstext__verzeichnis .knopf { margin-top: 1rem; } .rechtstext__haupt h2 { font-size: 1.45rem; margin-top: 2.4rem; } .seitenkopf--colorea { padding-bottom: clamp(4rem, 8vw, 7rem); } .seitenkopf--colorea .seitenkopf__titel { font-size: clamp(3.4rem, 12vw, 9rem); background: linear-gradient(100deg, #fff 30%, #FF6B73 60%, #fff 90%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: titel-rein 1s var(--weich) both .1s, schimmer 6s linear infinite; } @keyframes schimmer { to { background-position: -220% 0; } } /* ========================================================================== Zweite Stufe: Intro, Zeiger, Laufband, Wörter, Querschiene, Licht, Rolltext, Uhrwerk, Riesen-Schriftzug, Bildfahrt, Körnung ========================================================================== */ :root { --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .mit-intro { --start: 1.15s; } /* ── Intro beim ersten Besuch ──────────────────────────────────────── */ .intro { display: none; } .mit-intro .intro { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; align-content: center; gap: 1.4rem; background: var(--tinte); background-image: var(--rauschen); pointer-events: none; clip-path: inset(0 0 0 0); animation: intro-weg .85s cubic-bezier(.7, 0, .2, 1) forwards 1.05s; } .intro__zeichen { width: min(34vw, 190px); overflow: visible; } .intro__zeichen path { opacity: 0; transform: translateX(-90px); animation: intro-streifen .7s var(--weich) forwards; animation-delay: calc(var(--i) * 32ms); } .intro__wort { font-family: var(--schrift-titel); font-stretch: 125%; font-weight: 300; font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: .55em; padding-left: .55em; color: #fff; opacity: 0; animation: intro-wort .8s var(--weich) forwards .35s; } .intro__linie { position: relative; width: min(46vw, 240px); height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; } .intro__linie::after { content: ''; position: absolute; inset: 0; background: var(--rot); transform-origin: 0 50%; transform: scaleX(0); animation: intro-laden .95s cubic-bezier(.6, 0, .2, 1) forwards .1s; } @keyframes intro-streifen { to { opacity: 1; transform: none; } } @keyframes intro-wort { from { letter-spacing: 1.2em; } to { opacity: 1; } } @keyframes intro-laden { to { transform: scaleX(1); } } @keyframes intro-weg { to { clip-path: inset(0 0 100% 0); visibility: hidden; } } /* ── Mauszeiger ────────────────────────────────────────────────────── */ .zeiger { display: none; } .hat-zeiger .zeiger { display: block; position: fixed; left: 0; top: 0; z-index: 1500; pointer-events: none; } .zeiger__punkt, .zeiger__ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; } .zeiger__punkt { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--rot); transition: opacity .2s, scale .25s; } .zeiger__ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(208,51,61,.6); transition: width .4s var(--weich), height .4s var(--weich), margin .4s var(--weich), background-color .3s, box-shadow .3s, opacity .3s; } .zeiger__text { font-family: var(--schrift); font-size: .76rem; font-weight: 700; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s var(--feder); white-space: nowrap; } .zeiger.ist-ueber .zeiger__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(208,51,61,.1); box-shadow: inset 0 0 0 1.5px rgba(208,51,61,.9); } .zeiger.mit-text .zeiger__ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--rot); box-shadow: 0 10px 30px -8px rgba(208,51,61,.6); } .zeiger.mit-text .zeiger__text { opacity: 1; transform: none; } .zeiger.mit-text .zeiger__punkt { opacity: 0; } .zeiger.ist-gedrueckt .zeiger__punkt { scale: 2.2; } .zeiger__ring, .zeiger__punkt { opacity: 0; scale: .3; transition: width .4s var(--weich), height .4s var(--weich), margin .4s var(--weich), background-color .3s, box-shadow .3s, opacity .25s, scale .45s var(--feder); } .zeiger.ist-ueber .zeiger__ring, .zeiger.mit-text .zeiger__ring, .zeiger.ist-ueber .zeiger__punkt { opacity: 1; scale: 1; } .zeiger.ist-weg .zeiger__ring, .zeiger.ist-weg .zeiger__punkt, .zeiger.ist-scrollend .zeiger__ring, .zeiger.ist-scrollend .zeiger__punkt { opacity: 0; scale: .3; } /* ── Laufband zwischen Held und Standorten ─────────────────────────── */ .laufband { position: relative; height: clamp(150px, 15vw, 230px); overflow: hidden; background: linear-gradient(180deg, var(--tinte) 0 50%, var(--papier) 50%); } .laufband__band { position: absolute; left: -6%; right: -6%; top: 50%; padding: clamp(.7rem, 1.2vw, 1.1rem) 0; overflow: hidden; } .laufband__band--rot { background: var(--rot); color: #fff; z-index: 2; transform: translateY(-50%) rotate(-3deg); box-shadow: 0 20px 40px -20px rgba(168,36,45,.7); } .laufband__band--dunkel { background: var(--tinte-2); background-image: var(--rauschen); color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.5); z-index: 1; transform: translateY(-50%) rotate(2.6deg); } .laufband__spur { display: flex; width: max-content; will-change: transform; transform: translate3d(0, 0, 0) skewX(var(--neigung, 0deg)); } .laufband__eintrag { display: inline-flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); padding-right: clamp(1rem, 2vw, 1.8rem); font-family: var(--schrift-titel); font-stretch: 125%; font-weight: 800; font-size: clamp(1.3rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; transition: color .25s; } .laufband__eintrag i { width: .62em; height: .62em; border-radius: 50%; background: var(--plakette); box-shadow: inset 0 0 0 .1em rgba(0,0,0,.2); flex: none; } .laufband__band--rot .laufband__eintrag:hover { color: var(--tinte); } .laufband__band--dunkel .laufband__eintrag i { background: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); } /* ── Überschriften Wort für Wort ───────────────────────────────────── */ .wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .wort > span { display: inline-block; transform: translateY(112%) rotate(5deg); transform-origin: 0 100%; transition: transform 1s var(--weich); transition-delay: calc(var(--w, 0) * 55ms); } .ist-gesprochen .wort > span { transform: none; } /* ── Held: Scrollhinweis ───────────────────────────────────────────── */ .held__weiter { position: absolute; left: 50%; bottom: 1.6rem; width: 26px; height: 42px; translate: -50% 0; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); animation: auftauchen 1s var(--weich) both calc(var(--start) + 1.4s); } .held__weiter span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: rad 1.7s ease-in-out infinite; } @keyframes rad { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(15px); } } .held__bild::after { content: ''; position: absolute; inset: 0; background-image: var(--rauschen); pointer-events: none; } .held__plakette svg { will-change: transform; } .held__plakette-schein { animation: glimmen 5s ease-in-out infinite, schein-wandern 12s ease-in-out infinite alternate; } @keyframes schein-wandern { to { translate: -40% 12%; } } /* ── Querschiene (Wissenswertes) ───────────────────────────────────── */ .quer__fortschritt { height: 3px; margin-top: .5rem; border-radius: 3px; background: var(--linie); overflow: hidden; } .quer__fortschritt i { display: block; height: 100%; background: linear-gradient(90deg, var(--rot), #FF6B73); transform-origin: 0 50%; transform: scaleX(var(--quer, .08)); transition: transform .15s linear; } @media (min-width: 1080px) { .abschnitt--wissen.ist-quer { padding: 0; } .ist-quer .quer__haft { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 4rem; } .ist-quer .schiene { overflow: hidden; scroll-snap-type: none; cursor: default; grid-auto-columns: min(31vw, 460px); padding-bottom: 1.5rem; } .ist-quer .schiene__steuerung { display: none; } .ist-quer .artikelkarte { transition: transform .5s var(--weich), box-shadow .5s var(--weich); } .ist-quer .artikelkarte__bild { aspect-ratio: 16 / 11; } } /* ── Lichtkegel unter dem Zeiger ───────────────────────────────────── */ .licht { position: relative; --licht: rgba(208,51,61,.09); } .licht::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), var(--licht), transparent 42%); opacity: 0; transition: opacity .45s; } .licht:hover::after { opacity: 1; } .kontaktort.licht, .stelle.licht { --licht: rgba(255,255,255,.1); } .kontaktort, .formular, .blaettern a, .seitentafel { position: relative; } .stelle.licht { --licht: rgba(208,51,61,.06); } .kachel::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 45%); opacity: 0; transition: opacity .45s; } .kachel:hover::before { opacity: 1; } .kachel__inhalt { position: relative; z-index: 2; } /* ── Knöpfe: Text rollt beim Überfahren ────────────────────────────── */ .knopf__rolle { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; } .knopf__rolle > span { display: block; transition: transform .5s var(--weich); } .knopf__rolle::after { content: attr(data-text); position: absolute; left: 0; top: 100%; width: 100%; text-align: inherit; transition: transform .5s var(--weich); } .knopf:hover .knopf__rolle > span, .knopf:hover .knopf__rolle::after, .knopf:focus-visible .knopf__rolle > span, .knopf:focus-visible .knopf__rolle::after { transform: translateY(-100%); } /* ── Uhrwerk: Restzeit bis zum Schließen oder Öffnen ───────────────── */ .uhrwerk { display: inline-flex; align-items: center; gap: .75rem; width: fit-content; margin: 0 0 .7rem; padding: .4rem .45rem .4rem .9rem; border-radius: 12px; background: var(--tinte); color: #fff; } .uhrwerk__marke { font-size: .82rem; font-weight: 600; color: var(--nebel); } .uhrwerk__zeit { display: inline-flex; padding: .2rem .55rem; border-radius: 8px; background: rgba(255,255,255,.07); font-family: var(--schrift-titel); font-stretch: 100%; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .uhrwerk__zeit i { display: inline-block; min-width: .64em; text-align: center; font-style: normal; } .uhrwerk__zeit i.ist-neu { animation: ziffer .4s var(--weich); } @keyframes ziffer { from { transform: translateY(-55%); opacity: 0; } } .uhrwerk--offen .uhrwerk__zeit { color: #2BD27A; } .uhrwerk.ist-um { opacity: .5; } .standort__zeiten .uhrwerk { margin-bottom: 1.4rem; } /* ── Riesen-Schriftzug im Fußbereich ───────────────────────────────── */ .fuss__riese { overflow: hidden; padding-top: 1.5rem; text-align: center; user-select: none; pointer-events: none; } .fuss__riese span { display: inline-block; padding: 0 .12em 0 .06em; font-family: var(--schrift-titel); font-stretch: 125%; font-weight: 900; font-size: 13.4vw; line-height: .8; letter-spacing: -.04em; color: transparent; background: repeating-linear-gradient(180deg, var(--rot) 0 .052em, rgba(208,51,61,.22) .052em .1em); -webkit-background-clip: text; background-clip: text; translate: 0 8%; } @supports (animation-timeline: view()) { .fuss__riese span { animation: riese-steigen linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } @keyframes riese-steigen { from { translate: 0 60%; opacity: .2; background-position: 0 -.6em; } to { translate: 0 8%; opacity: 1; background-position: 0 0; } } } /* ── Bildfahrt: Bilder gleiten beim Scrollen im Rahmen ─────────────── */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .blende img { height: 116%; animation: bild-fahrt linear both; animation-timeline: view(); } @keyframes bild-fahrt { from { translate: 0 0; } to { translate: 0 -13.5%; } } .artikelkarte__bild img, .beitrag__bild img { height: 112%; animation: bild-fahrt-klein linear both; animation-timeline: view(); } @keyframes bild-fahrt-klein { from { translate: 0 0; } to { translate: 0 -10%; } } } } /* ── Körnung und wandernde Lichter auf dunklen Flächen ─────────────── */ .abschnitt--dunkel, .fuss, .seitenkopf, .fehlerseite, .einzelseite { background-image: var(--rauschen); } .seitenkopf::before { animation: treiben 16s ease-in-out infinite alternate; } .seitenkopf::after { content: ''; position: absolute; left: -12%; top: -30%; width: 55%; height: 110%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--plakette) 22%, transparent), transparent); animation: treiben 19s ease-in-out infinite alternate-reverse; } @keyframes treiben { 50% { transform: translate(8%, -6%) scale(1.1); } 100% { transform: translate(-6%, 8%) scale(.95); } } .abschnitt--gtue { overflow: hidden; } .abschnitt--gtue::before { content: ''; position: absolute; right: -20%; top: 10%; width: 70%; height: 80%; background: radial-gradient(closest-side, rgba(208,51,61,.2), transparent); animation: treiben 18s ease-in-out infinite alternate; pointer-events: none; } .gtue { position: relative; } /* Vorzeilen: der Strich wächst, wenn der Abschnitt erscheint */ .js [data-erscheint] .vorzeile::before { width: 0; transition: width .9s var(--weich) .25s; } .js [data-erscheint].ist-sichtbar .vorzeile::before { width: 26px; } @media (max-width: 720px) { .held__weiter { display: none; } .laufband { height: 130px; } .uhrwerk { padding-left: .75rem; } } @media (prefers-reduced-motion: reduce) { .intro, .zeiger { display: none !important; } .wort > span { transform: none !important; } .laufband__spur { transform: none !important; } .fuss__riese span { translate: none; } } /* ── Anpassungen für kleinere Bildschirme ──────────────────────────── */ @media (max-width: 1080px) { .held__innen { grid-template-columns: minmax(0, 1fr); } .held__plakette { grid-template-columns: auto 1fr; justify-self: start; align-items: center; text-align: left; } .held__plakette-text { justify-items: start; text-align: left; } .held__plakette-text span { display: block; } .held__plakette-text svg { display: inline; vertical-align: -2px; } .plakette--held { width: clamp(120px, 26vw, 180px); } .held__plakette-schein { left: 0; width: 180px; translate: 0 0; } .gtue, .hucheck, .zweispalt, .ueberblock, .standort, .artikel, .kontakt, .impressum, .rechtstext { grid-template-columns: minmax(0, 1fr); } .gtue__seite, .zweispalt > .abschnitt__kopf, .artikel__seite, .kontakt__seite, .urhebertafel, .rechtstext__verzeichnis { position: static; } .seitenverzeichnis { display: none; } .ueberblock--gedreht .ueberblock__bild, .ueberblock--gedreht .ueberblock__video { order: 2; } .fuss__raster { grid-template-columns: 1fr 1fr; } .fuss__marke { grid-column: 1 / -1; } .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stelle__spalten { grid-template-columns: minmax(0, 1fr); } .artikelraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beitraege { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .orte, .leistungsgruppen { grid-template-columns: minmax(0, 1fr); } .ortkarte--gross { grid-template-columns: minmax(0, 1fr); } .ortkarte--gross .ortkarte__bild { aspect-ratio: 16 / 9; } .seitenkopf--bild .seitenkopf__innen { grid-template-columns: minmax(0, 1fr); } .seitenkopf__bild { aspect-ratio: 16 / 10; } .hucheck__plakette .plakette--gross { width: min(76vw, 320px); } } @media (max-width: 720px) { body { font-size: 1rem; } .held { padding-top: calc(var(--kopfhoehe) + 3rem); min-height: auto; padding-bottom: 2.5rem; } .held__streifen { display: none; } .held__knoepfe .knopf { flex: 1 1 auto; } .held__plakette { gap: 1rem; } .held__orte { margin-top: 2rem; } .ortchip { flex: 1 1 100%; } .seitenkopf { padding-top: calc(var(--kopfhoehe) + 2.5rem); } .seitenkopf__streifen { display: none; } .seitenkopf__titel, .seitenkopf--bild .seitenkopf__titel { font-stretch: 104%; font-size: clamp(2rem, 9.2vw, 2.7rem); } .kacheln, .artikelraster, .beitraege { grid-template-columns: minmax(0, 1fr); } .kachel--breit, .artikelkarte--gross { grid-column: auto; grid-row: auto; } .kachel { min-height: 320px; } .hucheck__monate { grid-template-columns: repeat(4, minmax(0, 1fr)); } .felder { grid-template-columns: minmax(0, 1fr); } .fuss__raster { grid-template-columns: minmax(0, 1fr); } .fuss__ruf-titel { max-width: none; } .blaettern { grid-template-columns: minmax(0, 1fr); } .blaettern__vor { grid-column: auto; } .liste__verweis { grid-template-columns: 40px minmax(0, 1fr) 22px; column-gap: .8rem; } .liste__symbol { width: 40px; height: 40px; } .frage__antwort { padding-right: 0; } .fehlerseite__innen { grid-template-columns: minmax(0, 1fr); } .datenliste div { grid-template-columns: 5.5rem 1fr; } } /* ── Weniger Bewegung ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js [data-erscheint] { opacity: 1; transform: none; filter: none; } .js .blende { -webkit-mask-image: none; mask-image: none; } .js .blende img { transform: none; } .gtue__saetze li { color: #fff; } .bildstreifen__bahn { animation: none; flex-wrap: wrap; width: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } @media print { .kopf, .dock, .fuss__ruf, .vorschauleiste, .held__streifen, .seitenkopf__streifen, .video, .einwilligung { display: none !important; } .held, .seitenkopf, .abschnitt--dunkel, .fuss { background: #fff !important; color: #000 !important; } .js [data-erscheint] { opacity: 1 !important; transform: none !important; filter: none !important; } }