/* ══════════════════════════════════════════════════════════════════════════ ARCHE PFLEGEZENTRUM — Seiten-Stil „Die Arche" Tokens: assets/tokens.css · Motion-Werte nach REF-C · nichts wird vorversteckt. ══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; } body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { max-width: 74rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width: 768px) { .wrap { padding-left: 2rem; padding-right: 2rem; } } .sektion { padding: 4rem 0; position: relative; } @media (min-width: 768px) { .sektion { padding: 7rem 0; } } .sektion-eng { padding: 3rem 0; } @media (min-width: 768px) { .sektion-eng { padding: 4.5rem 0; } } .lead { font-size: var(--text-lead); line-height: 1.35; font-weight: 500; color: var(--muted); max-width: var(--mass); text-wrap: pretty; } .mass { max-width: var(--mass); } .prosa p { margin: 0 0 1rem; max-width: var(--mass); text-wrap: pretty; } .prosa ul { padding-left: 1.2rem; max-width: var(--mass); list-style: disc; } .prosa li { margin: .35rem 0; } .prosa a { color: var(--tuerkis-tief); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .prosa a:hover { color: var(--koralle-tief); } .prosa h2, .prosa h3 { margin: 2.2rem 0 .8rem; } .untertitel { color: var(--muted); margin: .35rem 0 0; font-size: .95rem; font-weight: 500; letter-spacing: .01em; } .sektion-kopf { max-width: 48rem; margin-bottom: 2.5rem; } .sektion-kopf h2 { margin: 0 0 .9rem; } .sektion-kopf p { margin: 0; } /* Flächen */ .auf-gischt { background: var(--surface); } .auf-tiefsee { background: var(--tiefsee); color: var(--auf-tiefsee); } .auf-tiefsee .lead, .auf-tiefsee .untertitel { color: var(--auf-tiefsee-muted); } .auf-tiefsee .prosa a { color: #7FDDE6; } .auf-tuerkis { background: var(--tuerkis-fix); color: #FFFFFF; } /* Knöpfe — Fläche Pflicht, Kontrast gerechnet (Tiefsee auf Weiß 14:1 · Weiß auf Tiefsee 14:1 · Tiefsee auf Türkis 5.6:1) */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .8rem 1.45rem; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; letter-spacing: .005em; transition: translate .22s var(--ease-out), scale .14s var(--ease-out), background-color .2s ease, color .2s ease, box-shadow .2s ease; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .knopf:active { scale: .96; transition-duration: .22s, .08s, .2s, .2s, .2s; } /* Selektoren bewusst spezifischer als .prosa a / .auf-tiefsee .prosa a — Knopffarben gelten überall. */ a.knopf.knopf-primaer, button.knopf.knopf-primaer, .prosa a.knopf.knopf-primaer, .auf-tiefsee .prosa a.knopf.knopf-primaer { background-color: #0A2E36; color: #FFFFFF; box-shadow: 0 10px 24px -14px rgb(10 46 54 / .7); } a.knopf.knopf-primaer:hover, button.knopf.knopf-primaer:hover, .prosa a.knopf.knopf-primaer:hover, .auf-tiefsee .prosa a.knopf.knopf-primaer:hover { background-color: #00707C; color: #FFFFFF; } a.knopf.knopf-tuerkis, .prosa a.knopf.knopf-tuerkis, .auf-tiefsee .prosa a.knopf.knopf-tuerkis { background-color: #14ABBA; color: #0A2E36; } a.knopf.knopf-tuerkis:hover, .prosa a.knopf.knopf-tuerkis:hover, .auf-tiefsee .prosa a.knopf.knopf-tuerkis:hover { background-color: #BFE7EC; color: #0A2E36; } a.knopf.knopf-hell, .prosa a.knopf.knopf-hell, .auf-tiefsee .prosa a.knopf.knopf-hell { background-color: #FFFFFF; color: #0A2E36; } a.knopf.knopf-hell:hover, .prosa a.knopf.knopf-hell:hover, .auf-tiefsee .prosa a.knopf.knopf-hell:hover { background-color: #BFE7EC; color: #0A2E36; } a.knopf.knopf-koralle, .prosa a.knopf.knopf-koralle { background-color: #E4664F; color: #10262B; } a.knopf.knopf-koralle:hover, .prosa a.knopf.knopf-koralle:hover { background-color: #F08A75; color: #10262B; } a.knopf.knopf-rand, .prosa a.knopf.knopf-rand { background-color: #EAF6F8; color: #0A2E36; border: 1.5px solid #009BAA; } a.knopf.knopf-rand:hover, .prosa a.knopf.knopf-rand:hover { background-color: #BFE7EC; color: #0A2E36; } html.dark a.knopf.knopf-rand, html.dark .prosa a.knopf.knopf-rand { background-color: #12303A; color: #E6EEF0; border-color: #2FC1CF; } html.dark a.knopf.knopf-rand:hover, html.dark .prosa a.knopf.knopf-rand:hover { background-color: #1B4350; color: #E6EEF0; } html.dark a.knopf.knopf-primaer, html.dark .prosa a.knopf.knopf-primaer, html.dark .auf-tiefsee .prosa a.knopf.knopf-primaer { background-color: #2FC1CF; color: #0A2E36; } html.dark a.knopf.knopf-primaer:hover, html.dark .prosa a.knopf.knopf-primaer:hover, html.dark .auf-tiefsee .prosa a.knopf.knopf-primaer:hover { background-color: #7FDDE6; color: #0A2E36; } @media (hover: hover) and (pointer: fine) { .knopf:hover { translate: 0 -2px; } .knopf:active { translate: 0 0; } } .knopf svg { width: 20px; height: 20px; flex: none; } /* Zwei-Ebenen-Icons */ .ico { width: 2.25rem; height: 2.25rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ico .akzent { fill: var(--icon-akzent); stroke: none; } .ico-kachel { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: color-mix(in srgb, var(--tuerkis) 13%, transparent); color: var(--fg); flex: none; } .auf-tiefsee .ico-kachel { background: rgb(255 255 255 / .1); color: #FFFFFF; --icon-akzent: #2FC1CF; } /* Bilder in Wellen-/Bogenrahmen (Signatur) */ .bild-bogen { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--surface-2); } .bild-bogen img { width: 100%; height: 100%; object-fit: cover; } .bild-bogen::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(to top, rgb(10 46 54 / .35), transparent); pointer-events: none; } .bild-innen { width: 100%; height: 100%; } .bild-welle { clip-path: url(#clip-welle); } .bild-bogen .bild-innen img { width: 100%; height: 100%; object-fit: cover; } .bild-hoch { aspect-ratio: 3 / 4; } .bild-breit { aspect-ratio: 16 / 9; } .bild-quadrat { aspect-ratio: 1 / 1; } .bild-erfolge { aspect-ratio: 3 / 2; } /* Kopfzeile */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; color: #FFFFFF; background: transparent; transition: background .3s, color .3s, box-shadow .3s; } .site-header.scrolled { background: var(--bg); color: var(--fg); box-shadow: 0 1px 14px rgb(10 46 54 / .12); } .site-header.hell-hero { color: var(--fg); } .nav-wrap { max-width: 74rem; margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center; gap: .4rem; min-width: 0; } @media (min-width: 768px) { .nav-wrap { padding: .8rem 2rem; } } .nav-logo { display: inline-flex; align-items: center; margin-right: auto; color: inherit; text-decoration: none; height: 48px; } .nav-logo .logo-svg { height: 42px; width: auto; } @media (min-width: 1100px) { .nav-logo .logo-svg { height: 52px; } } .site-header nav { display: none; align-items: center; gap: .1rem; } .site-header nav a { color: inherit; text-decoration: none; padding: .7rem .7rem; border-radius: var(--r-pill); font-weight: 500; font-size: .95rem; line-height: 1.4; white-space: nowrap; transition: background-color .18s ease; display: inline-flex; align-items: center; min-height: 44px; } @media (min-width: 768px) and (max-width: 1099px) { .site-header nav a { padding: .7rem .5rem; font-size: .9rem; } } .site-header nav a:hover, .site-header nav a:focus-visible { background-color: rgb(127 127 127 / .16); } .site-header nav a[aria-current="page"] { font-weight: 700; } .nav-item { position: relative; display: flex; align-items: center; } .nav-item > a { display: inline-flex; align-items: center; gap: .3rem; } .nav-chevron { flex: none; transition: transform .2s; } .nav-item.offen .nav-chevron, .nav-gruppe[open] .nav-chevron { transform: rotate(180deg); } .nav-sub { position: absolute; top: 100%; left: 0; min-width: 16rem; z-index: 80; padding: .9rem 0 .5rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; } .nav-sub-innen { background: var(--card); color: var(--fg); border-radius: var(--r); box-shadow: 0 18px 40px rgb(10 46 54 / .2); padding: .5rem; border: 1px solid var(--line); } .nav-item.offen > .nav-sub { opacity: 1; visibility: visible; transform: none; } .site-header nav .nav-sub a { display: flex; padding: .7rem .8rem; border-radius: .6rem; font-size: .94rem; min-height: 44px; } .site-header nav .nav-sub a:hover { background-color: var(--surface); } .nav-sub .nav-sub-alle { font-weight: 600; color: var(--tuerkis-tief); } .nav-theme { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid currentColor; background: rgb(127 127 127 / .16); color: inherit; cursor: pointer; flex: none; transition: background .2s; } .nav-theme:hover { background: rgb(127 127 127 / .3); } .nav-theme .ic-sonne { display: none; } .dark .nav-theme .ic-sonne { display: block; } .dark .nav-theme .ic-mond { display: none; } .nav-cta { display: none; margin-left: .4rem; } .nav-burger { background: rgb(127 127 127 / .16); border: 1px solid currentColor; border-radius: 999px; color: inherit; padding: .5rem; cursor: pointer; min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } @media (min-width: 768px) { .site-header nav { display: flex; } .nav-burger { display: none; } } @media (min-width: 1100px) { .nav-cta { display: inline-flex; } } .nav-overlay { position: fixed; inset: 0; z-index: 70; background: var(--bg); color: var(--fg); display: flex; flex-direction: column; gap: .15rem; padding: 5.5rem 1.5rem 2rem; overflow-y: auto; } .nav-overlay[hidden] { display: none; } .nav-overlay a { color: inherit; text-decoration: none; font-size: 1.3rem; padding: .7rem 0; font-weight: 600; font-family: var(--font-head); } .nav-overlay .nav-gruppe summary { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; padding: .7rem 0; cursor: pointer; list-style: none; font-weight: 600; font-family: var(--font-head); } .nav-overlay .nav-gruppe summary::-webkit-details-marker { display: none; } .nav-overlay .nav-gruppe a { display: block; font-size: 1.05rem; line-height: 1.35; padding: .5rem 0 .5rem 1.25rem; font-weight: 500; font-family: var(--font-body); opacity: .9; } .nav-close { position: absolute; top: .9rem; right: 1.25rem; background: var(--surface); border: 0; color: inherit; font-size: 1.4rem; padding: .6rem; cursor: pointer; min-width: 44px; min-height: 44px; border-radius: 999px; } .nav-overlay .nav-overlay-cta { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .6rem; } .nav-overlay .nav-overlay-cta a { font-size: 1rem; font-family: var(--font-body); padding: .8rem 1.4rem; } :target, [id] { scroll-margin-top: 5.5rem; } /* Hero (Startseite) */ .hero { position: relative; min-height: 100svh; display: block; color: #FFFFFF; overflow: hidden; background: #0A2E36; padding: 7rem 0 9rem; isolation: isolate; } .hero .wrap.hero-grid { min-height: calc(100svh - 16rem); } .hero-foto { position: absolute; inset: 0; z-index: -2; } .hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; } .hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(10 46 54 / .94) 0%, rgb(10 46 54 / .82) 42%, rgb(10 46 54 / .38) 100%); } .hero-licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 20% 30%, rgb(0 155 170 / .42), transparent 70%), radial-gradient(30% 40% at 85% 72%, rgb(228 102 79 / .22), transparent 70%); animation: licht-drift calc(16s * var(--tempo)) var(--ease-in-out) infinite alternate; will-change: transform; } .hero-licht::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(24% 32% at 62% 22%, rgb(47 193 207 / .26), transparent 70%); animation: licht-drift-2 calc(23s * var(--tempo)) var(--ease-in-out) infinite alternate; } @keyframes licht-drift { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.12); } } @keyframes licht-drift-2 { from { transform: translate3d(8%, 4%, 0) scale(1.1); } to { transform: translate3d(-7%, -3%, 0) scale(.95); } } .hero-grid { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; } } .hero h1 { margin: 0 0 1.2rem; color: #FFFFFF; } .hero .lead { color: #D5ECF0; } .hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } .hero-badges { display: grid; gap: .6rem 1.2rem; margin-top: 2rem; color: #BFE7EC; font-size: .95rem; font-weight: 500; list-style: none; padding: 0; } @media (min-width: 1024px) { .hero-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .hero-badges li { display: inline-flex; align-items: center; gap: .45rem; } .hero-badges svg { width: 20px; height: 20px; } .hero-buehne { position: relative; min-height: 320px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-lg); } @media (min-width: 1024px) { .hero-buehne { min-height: 440px; } } .hero-buehne .bildmarke { width: min(100%, 420px); color: #FFFFFF; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .35)); animation: boot-wiegen calc(7s * var(--tempo)) var(--ease-in-out) infinite; transform-origin: 50% 90%; } @keyframes boot-wiegen { 0%, 100% { transform: rotate(-1.6deg) translateY(0); } 50% { transform: rotate(1.6deg) translateY(-8px); } } .hero-wellen { position: absolute; left: 0; right: 0; bottom: -2px; height: 120px; z-index: 1; pointer-events: none; } .hero-welle { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; } .hero-welle-1 { animation: hwelle-lauf-1 calc(29s * var(--tempo)) linear infinite; } .hero-welle-2 { animation: hwelle-lauf-2 calc(15s * var(--tempo)) linear infinite reverse; height: 80%; } /* Vordere Bahn (hero-welle-2, liegt oben, reicht bis zur Unterkante) = exakt die Farbe der Folgesektion, deckend — sonst scheint Foto/Band durch und an der Kante entsteht ein grauer Streifen. Hintere Bahn = halbtransparente Vorwelle. Startseite: Folgesektion ist hell (--bg), seit die Filmsektion raus ist (21.09.2026). */ .hero-wellen .hero-welle-1 path { fill: var(--surface); opacity: .55; } .hero-wellen .hero-welle-2 path { fill: var(--bg); opacity: 1; } /* Wellen-Loops: jede Bahn (viewBox 3000 breit, Element 200 %) wird um GENAU eine Periode ihres Pfads verschoben — sonst springt die Welle bei jedem Neustart. Perioden aus den Pfaden gemessen: welle-1 1500 (50 %) · welle-2 375 (12,5 %) · welle-3 1300 (43,33 %) · hero-welle-1 1200 (40 %) · hero-welle-2 425 (14,17 %) · trenner-1 1275 (42,5 %) · trenner-2 875 (29,17 %). Die Pfade sind exakt periodisch (Rest-Versatz am Periodenende linear ausgeglichen) und unten geschlossen: … L3000 y L3000 H L0 H Z (nie L0 H L3000 H — das kreuzt sich zu Keilen). */ @keyframes welle-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes welle-lauf-2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-12.5%, 0, 0); } } @keyframes welle-lauf-3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-43.3333%, 0, 0); } } @keyframes hwelle-lauf-1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-40%, 0, 0); } } @keyframes hwelle-lauf-2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-14.1667%, 0, 0); } } @keyframes trenner-lauf-1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-42.5%, 0, 0); } } @keyframes trenner-lauf-2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-29.1667%, 0, 0); } } .hero-buehne-wasser { position: absolute; left: -10%; right: -10%; bottom: 8%; height: 34%; z-index: -1; opacity: .55; } .hero-buehne-wasser .welle-bahn { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; } .hero-buehne-wasser .welle-1 { animation-duration: calc(40s * var(--tempo)); } .hero-buehne-wasser .welle-2 { animation-duration: calc(15s * var(--tempo)); } .hero-buehne-wasser .welle-3 { animation-duration: calc(64s * var(--tempo)); } .hero-buehne-wasser .welle-bahn path { fill: #2FC1CF; } /* Hero-Band der Unterseiten */ .band { position: relative; color: #FFFFFF; background: #0A2E36; padding: 8.5rem 0 5rem; overflow: hidden; isolation: isolate; } .band::after { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(34% 52% at 16% 34%, rgb(0 155 170 / .32), transparent 70%), radial-gradient(24% 40% at 88% 78%, rgb(228 102 79 / .15), transparent 70%); animation: licht-drift calc(20s * var(--tempo)) var(--ease-in-out) infinite alternate; } .band-foto { position: absolute; inset: 0; z-index: -2; } .band-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; } .band-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(10 46 54 / .76) 0%, rgb(10 46 54 / .66) 45%, rgb(10 46 54 / .36) 100%); } /* 20 % durchsichtiger (Marcus 29.09.2026) */ .band h1 { color: #FFFFFF; margin: .6rem 0 1rem; } .band .lead { color: #D5ECF0; } .band .krumen { font-size: .9rem; color: #BFE7EC; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; } .band .krumen a { color: inherit; text-decoration: none; } .band .krumen a:hover { text-decoration: underline; } .band .krumen li + li::before { content: "›"; margin-right: .4rem; opacity: .7; } .band-wellen { position: absolute; left: 0; right: 0; bottom: -2px; height: 70px; z-index: 1; pointer-events: none; } /* .hero/.band schneiden mit overflow:hidden die 2px Überstand der Wellen ab → an der Unterkante blieb eine Subpixel-Haarlinie in Bandfarbe. overflow:clip + 2px Clip-Rand lässt die Welle in die Folgesektion reichen. */ .hero, .band { overflow-x: clip; overflow-y: visible; } /* seitlich exakt, unten darf die Welle 2px in die Folgesektion reichen */ .hero-licht, .band-licht, .hero-foto, .band-foto { overflow: hidden; } /* skalierte Fotos/Lichter bleiben im Kopfbereich */ /* Folgesektion der Bänder ist hell (--bg): vordere Bahn deckend in --bg, hintere als Gischt-Vorwelle. */ .band-wellen .hero-welle-1 path { fill: var(--surface); opacity: .55; } .band-wellen .hero-welle-2 path { fill: var(--bg); opacity: 1; } .band + .sektion, .band + .auf-gischt { padding-top: 5rem; } /* Kennwerte */ .kennwerte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } @media (min-width: 768px) { .kennwerte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } } .kennwert { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; box-shadow: var(--shadow-sm); } .kennwert strong { font-family: var(--font-head); font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; color: var(--tuerkis-tief); font-weight: 700; } .kennwert > span { color: var(--muted); font-size: .95rem; font-weight: 500; } /* Scrollytelling */ .scrolly-buehne { position: relative; } .scrolly-innen { width: 100%; max-width: 74rem; margin: 0 auto; padding: 5rem 1.25rem 2rem; display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 1024px) { .scrolly-innen { grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr); padding: 5.5rem 2rem 2rem; gap: 2.5rem; } } .scrolly-buehne .sp-boot { width: 100%; height: auto; max-height: 72svh; filter: drop-shadow(0 30px 40px rgb(10 46 54 / .18)); } .scrolly-text { display: grid; gap: .6rem; align-content: center; } .scrolly-text p { margin: 0; padding: .8rem 1rem; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); font-weight: 500; color: var(--fg); box-shadow: var(--shadow-sm); } .scrolly-text p strong { color: var(--tuerkis-tief); } .scrolly-wert { margin-top: .6rem; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--tuerkis-tief); display: flex; align-items: baseline; gap: .5rem; } .scrolly-wert small { font-size: .9rem; font-family: var(--font-body); font-weight: 500; color: var(--muted); } .scrolly-titel { margin: 0 0 .5rem; } .scrolly-titel + p { margin: 0 0 1rem; color: var(--muted); } .sp { width: 100%; height: auto; display: block; } .sp text { font-family: var(--font-body); } .sp-label { font-size: 17px; font-weight: 600; fill: var(--fg); } .sp-label-hell { fill: #FFFFFF; } .sp-klein { font-size: 14px; } .sp-mono { font-size: 13px; font-weight: 600; fill: #BFE7EC; letter-spacing: .04em; } .sp-mono-dunkel { fill: #0A2E36; } .sp-mono-hell { fill: #FFFFFF; } .sp-mono-koralle { fill: #E4664F; font-size: 12px; letter-spacing: .1em; } .sp-grad { font-size: 30px; font-weight: 700; fill: #FFFFFF; font-family: var(--font-head); } .sp-jahr { font-size: 22px; font-weight: 700; fill: var(--fg); font-family: var(--font-head); } html.dark .sp-label { fill: #E6EEF0; } html.dark .sp-jahr { fill: #E6EEF0; } html.dark .sp-verordnung .sp-label, html.dark .sp-hausschnitt .sp-label, html.dark .sp-zeit .sp-label, html.dark .sp-kompass .sp-label, html.dark .sp-fahrt .sp-label, html.dark .sp-fahrt .sp-jahr, html.dark .sp-bojen .sp-label, html.dark .sp-anker .sp-label, html.dark .sp-tagesbogen .sp-label, html.dark .sp-atem .sp-label, html.dark .sp-deck .sp-label { fill: #0A2E36; } /* Set-Piece-Bühne auf Unterseiten */ .setpiece { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--surface); } .setpiece .sp { width: 100%; height: auto; } .setpiece-split { display: grid; gap: 2rem; align-items: center; } @media (min-width: 1024px) { .setpiece-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 3rem; } } .setpiece-split .scrolly-text p { background: var(--card); } /* Dauerhafte Objekt-Loops (laufen ohne Scroll) */ .monitor-kurve { stroke-dasharray: 6 4; animation: kurve-lauf calc(2.4s * var(--tempo)) linear infinite; } @keyframes kurve-lauf { to { stroke-dashoffset: -60; } } .monitor-led { animation: led calc(1.4s * var(--tempo)) ease-in-out infinite; } @keyframes led { 50% { opacity: .2; } } .laterne-glow { animation: glow calc(3.2s * var(--tempo)) ease-in-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes glow { 50% { opacity: .55; transform: scale(1.12); } } .flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: flamme calc(2.6s * var(--tempo)) ease-in-out infinite; } @keyframes flamme { 0%, 100% { transform: scaleY(1) skewX(0); } 30% { transform: scaleY(1.15) skewX(-4deg); } 60% { transform: scaleY(.92) skewX(4deg); } } .flagge { transform-box: fill-box; transform-origin: 0% 50%; animation: flagge calc(5s * var(--tempo)) ease-in-out infinite; } @keyframes flagge { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(.96); } } .lunge { animation: atmen calc(4s * var(--tempo)) ease-in-out infinite; } @keyframes atmen { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.02); } } .balg { transform-box: fill-box; transform-origin: 50% 0; animation: balg calc(4s * var(--tempo)) ease-in-out infinite; } @keyframes balg { 50% { transform: scaleY(1.12); } } .stern { animation: funkeln calc(3s * var(--tempo)) ease-in-out infinite; } @keyframes funkeln { 50% { opacity: .25; } } .kerzen-glow { animation: glow calc(2.6s * var(--tempo)) ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .dampf { animation: dampf calc(2.4s * var(--tempo)) ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes dampf { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-10px); } } .trommel { animation: drehen calc(6s * var(--tempo)) linear infinite; } @keyframes drehen { to { transform: rotate(360deg); } } .bus { animation: bus calc(14s * var(--tempo)) var(--ease-in-out) infinite; } @keyframes bus { 0% { transform: translateX(120px); } 40%, 60% { transform: translateX(0); } 100% { transform: translateX(120px); } } .strahl-rot { animation: drehen calc(12s * var(--tempo)) linear infinite; } .feuer { animation: glow calc(2s * var(--tempo)) ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .pin { animation: pin calc(2.4s * var(--tempo)) var(--ease-in-out) infinite; } @keyframes pin { 50% { transform: translateY(-8px); } } .anker { animation: anker calc(6s * var(--tempo)) var(--ease-in-out) infinite; } @keyframes anker { 50% { transform: translateY(10px) rotate(1.5deg); } } .blase { animation: blase calc(4.5s * var(--tempo)) linear infinite; } @keyframes blase { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .7; } 100% { transform: translateY(-110px); opacity: 0; } } .boje { animation: boje calc(7s * var(--tempo)) var(--ease-in-out) infinite; } @keyframes boje { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-6px); } } .boje.aktiv, .boje:hover { animation-duration: calc(2.5s * var(--tempo)); } .stunde { transform-box: fill-box; transform-origin: center; } .fahrt-boot { transition: transform 1.2s var(--ease-in-out); } .hero .flagge { animation-duration: calc(4s * var(--tempo)); } /* Site-weiter Wasser-Loop (fixiert, dezent) */ .wellen { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 0; pointer-events: none; overflow: hidden; } .welle-bahn { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; } .welle-1 { animation: welle-lauf calc(36s * var(--tempo)) linear infinite; } .welle-2 { animation: welle-lauf-2 calc(13s * var(--tempo)) linear infinite reverse; height: 80%; } .welle-3 { animation: welle-lauf-3 calc(61s * var(--tempo)) linear infinite; height: 60%; } main { position: relative; z-index: 1; } .site-footer { position: relative; z-index: 2; } /* Karten & Raster */ .raster-2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .raster-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .raster-4 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .raster-2, .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, border-color .3s ease, translate .35s var(--ease-out); } .karte h3 { margin: 0; } .karte h3 a { display: block; padding: .55rem 0; } .karte p { margin: 0; color: var(--muted); } .karte .karte-link { margin-top: auto; color: var(--tuerkis-tief); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; } .karte .karte-link:hover { color: var(--koralle-tief); } .karte h3 a, .karte h2 a { display: inline-flex; align-items: center; min-height: 44px; } @media (hover: hover) and (pointer: fine) { .karte-hover:hover { translate: 0 -5px; box-shadow: var(--shadow); border-color: var(--tuerkis); } } .karte-foto { padding: 0; overflow: hidden; } .karte-foto .karte-bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); } .karte-foto .karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .karte-foto:hover .karte-bild img { scale: 1.05; } } .karte-foto .karte-text { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; } .leistungen-raster { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .leistungen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .leistungen-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .leistungen-raster .karte-featured { grid-column: span 2; } .leistungen-raster .karte-featured .karte-bild { aspect-ratio: 16 / 7.6; } } .karte-featured { background: var(--tiefsee); color: var(--auf-tiefsee); border-color: transparent; } .karte-featured p { color: var(--auf-tiefsee-muted); } .karte-featured .karte-link { color: #7FDDE6; } .karte-featured .karte-link:hover { color: #FFFFFF; } .karte-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: var(--r-pill); background: #D9F0F3; color: #005A64; font-size: .8rem; font-weight: 600; letter-spacing: .04em; width: max-content; } html.dark .karte-chip { background: #1B4350; color: #7FDDE6; } .karte-featured .karte-chip { background: rgb(255 255 255 / .12); color: #BFE7EC; } /* Split */ .split { display: grid; gap: 2rem; align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; } .split-umgekehrt > :first-child { order: 2; } } .split h2 { margin: 0 0 1rem; } .split .prosa p { margin-bottom: .9rem; } .liste-haken { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; } .liste-haken li { display: flex; gap: .7rem; align-items: flex-start; } .liste-haken svg { width: 22px; height: 22px; flex: none; color: var(--tuerkis-tief); margin-top: .15rem; } .auf-tiefsee .liste-haken svg { color: #7FDDE6; } /* Ablauf */ .ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; counter-reset: schritt; position: relative; } @media (min-width: 900px) { .ablauf { grid-template-columns: repeat(var(--schritte, 4), minmax(0, 1fr)); } } .ablauf li { position: relative; padding: 1.4rem 1.3rem 1.3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); counter-increment: schritt; } .ablauf li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: var(--tuerkis); line-height: 1; display: block; margin-bottom: .6rem; } .ablauf h3 { margin: 0 0 .4rem; font-size: 1.1rem; } .ablauf p { margin: 0; color: var(--muted); font-size: .98rem; } .ablauf-linie { position: absolute; left: 0; right: 0; top: 2.35rem; height: 2px; z-index: 0; display: none; } @media (min-width: 900px) { .ablauf-linie { display: block; } } .ablauf-linie path { stroke: var(--tuerkis); stroke-width: 2; fill: none; stroke-dasharray: 8 8; } /* Werte-Kacheln */ .werte { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .werte { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .wert { display: grid; gap: .8rem; padding: 1.6rem; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); } .wert h3 { margin: 0; } .wert p { margin: 0; color: var(--muted); } .auf-tiefsee .wert { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); } .auf-tiefsee .wert p { color: var(--auf-tiefsee-muted); } .auf-tiefsee .wert h3 { color: #FFFFFF; } /* FAQ */ .faq { display: grid; gap: .8rem; max-width: 52rem; } .faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 0 1.3rem; transition: border-color .2s; } .faq details[open] { border-color: var(--tuerkis); } .faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 600; font-family: var(--font-head); font-size: 1.08rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary svg { width: 22px; height: 22px; flex: none; color: var(--tuerkis-tief); transition: transform .2s; } .faq details[open] summary svg { transform: rotate(45deg); } .faq details p { margin: 0 0 1.2rem; color: var(--muted); max-width: 60ch; } /* Team-Monogramm */ .person { display: flex; gap: 1.2rem; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; } .monogramm { width: 72px; height: 72px; border-radius: 22px; background: var(--tiefsee); color: #FFFFFF; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; flex: none; letter-spacing: .02em; } .person h3 { margin: 0 0 .15rem; } .person p { margin: .5rem 0 0; color: var(--muted); } /* CTA-Band */ .cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--tiefsee); color: #FFFFFF; padding: 3rem 1.8rem; isolation: isolate; } @media (min-width: 768px) { .cta-band { padding: 4rem 3.5rem; } } .cta-band .cta-foto { position: absolute; inset: 0; z-index: -2; } .cta-band .cta-foto img { width: 100%; height: 100%; object-fit: cover; opacity: .45; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 46 54 / .96), rgb(10 46 54 / .7)); } .cta-band h2 { margin: 0 0 .8rem; color: #FFFFFF; } .cta-band p { margin: 0; color: #D5ECF0; max-width: 60ch; } .cta-band .cta-aktion { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } /* Kontakt-Karten */ .kontakt-karten { display: grid; gap: 1.2rem; } @media (min-width: 640px) { .kontakt-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .kontakt-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .kontakt-karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; display: grid; gap: .5rem; align-content: start; } .kontakt-karte strong { font-family: var(--font-head); font-size: 1.15rem; } /* Vier Karten nebeneinander: Überschrift immer zwei Zeilen hoch, damit Nummern und Adressen auf einer Linie stehen. */ @media (min-width: 1024px) { .kontakt-karte strong { min-height: 2lh; } } .kontakt-karte a { color: var(--tuerkis-tief); text-decoration: none; font-weight: 600; font-size: 1.1rem; } .kontakt-karte a:hover { color: var(--koralle-tief); text-decoration: underline; } .kontakt-karte span { color: var(--muted); font-size: .95rem; } /* E-Mail-Adresse nie am Bindestrich umbrechen: notfalls nach dem @, Schrift auf schmalen Karten etwas kleiner. */ .kontakt-karte a.k-mail { font-size: clamp(.9rem, 1.2vw, 1.1rem); } .kontakt-karte .k-nobr { white-space: nowrap; color: inherit; font-size: inherit; } /* Formular (Vorlage Block A — nur Farben) */ .k-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; } @media (min-width: 768px) { .k-card { padding: 2.2rem; } } .k-card h2 { margin: 0 0 .35rem; } .k-sub { color: var(--muted); margin: 0 0 1.25rem; } .k-card label { display: block; font-size: .92rem; font-weight: 600; margin: .8rem 0 .35rem; } .k-card input, .k-card textarea, .k-card select { width: 100%; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--bg); color: var(--fg); font: inherit; } .k-card input:focus, .k-card textarea:focus, .k-card select:focus { outline: 2px solid var(--tuerkis); border-color: var(--tuerkis); } .k-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 560px) { .k-row { grid-template-columns: 1fr; } } .k-btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: .85rem 1.4rem; border-radius: var(--r-pill); background: #0A2E36; color: #FFFFFF; min-height: 48px; } .k-btn:hover { background: #00707C; color: #FFFFFF; } .k-btn[disabled] { opacity: .55; cursor: not-allowed; } html.dark .k-btn { background: #2FC1CF; color: #0A2E36; } html.dark .k-btn:hover { background: #7FDDE6; color: #0A2E36; } .k-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--muted); margin: .9rem 0; } .k-consent input { width: auto; margin-top: .25rem; flex: none; } .k-consent label { font-weight: 400; margin: 0; } .k-note { font-size: .92rem; padding: .75rem .9rem; border-radius: .7rem; margin-top: .9rem; display: none; } .k-note.ok { display: block; background: #E3F5EC; color: #0F6B52; } .k-note.err { display: block; background: #FDEAEA; color: #A5251F; } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .k-card input[type=file] { padding: .6rem; cursor: pointer; } .k-files-hint { font-size: .82rem; color: var(--muted); margin: .4rem 0 0; } .k-files-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; } .k-files-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--bg); font-size: .88rem; } .k-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-file-size { color: var(--muted); font-size: .8rem; white-space: nowrap; } .k-file-x { appearance: none; font: inherit; font-size: .8rem; padding: .25rem .55rem; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); } .k-file-x:hover, .k-file-x:focus-visible { border-color: var(--tuerkis); color: var(--tuerkis-tief); } /* Pflegegrad-Schnellcheck */ .check { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; display: grid; gap: 1rem; } .check fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; } .check legend { font-weight: 600; font-family: var(--font-head); font-size: 1.05rem; margin-bottom: .4rem; } .check-option { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: .7rem; cursor: pointer; } .check-option:has(input:checked) { border-color: var(--tuerkis); background: color-mix(in srgb, var(--tuerkis) 10%, transparent); } .check-ergebnis[hidden] { display: none; } .check-ergebnis { padding: 1.2rem; border-radius: var(--r); background: var(--surface); display: grid; gap: .4rem; } .check-ergebnis strong { font-family: var(--font-head); font-size: 1.2rem; color: var(--tuerkis-tief); } .check-balken { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .check-balken i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--tuerkis), var(--koralle)); transition: transform .6s var(--ease-out); } /* Stellen */ .stellen { display: grid; gap: 1.2rem; } @media (min-width: 640px) { .stellen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .stellen { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .stelle { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; display: grid; gap: .6rem; align-content: start; } .stelle h3 { margin: 0; } .stelle p { margin: 0; color: var(--muted); font-size: .97rem; } .stelle .karte-link { color: var(--tuerkis-tief); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } /* Blog */ .artikel-raster { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .artikel-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .artikel-kopf { max-width: 52rem; } .artikel-meta { color: var(--muted); font-size: .92rem; display: flex; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; } .artikel .prosa { max-width: 46rem; } .artikel .prosa h2 { font-size: var(--text-h3); } .artikel .prosa h3 { font-size: var(--text-h4); } .artikel-hinweis { margin: 2rem 0; padding: 1.2rem 1.4rem; border-left: 4px solid var(--tuerkis); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; max-width: 46rem; } .artikel-hinweis p { margin: 0; } /* Footer */ .site-footer { background: var(--tiefsee); color: var(--auf-tiefsee); padding: 4rem 0 1.5rem; } .footer-raster { display: grid; gap: 2.2rem; } @media (min-width: 768px) { .footer-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } } @media (min-width: 1024px) { .footer-raster { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } .footer-kontakt a, .footer-kontakt span { overflow-wrap: anywhere; } .site-footer h3 { margin: 0 0 .9rem; font-size: 1rem; letter-spacing: .04em; color: #FFFFFF; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; } .site-footer a { color: inherit; text-decoration: none; } .site-footer a:hover { color: #FFFFFF; text-decoration: underline; } .footer-logo { color: #FFFFFF; width: 220px; } .footer-marke p { color: var(--auf-tiefsee-muted); margin: .9rem 0 0; max-width: 34ch; } .footer-kontakt address { font-style: normal; display: grid; gap: .3rem; line-height: 1.55; } /* Drei ruhige Gruppen: Firma + Anschrift · Telefon + Fax · E-Mail + Erreichbarkeit */ .footer-kontakt address > :nth-child(1) { color: #FFFFFF; font-weight: 600; } .footer-kontakt address > :nth-child(3), .footer-kontakt address > :nth-child(5) { margin-top: 1rem; } .footer-kontakt address > :nth-child(6) { margin-top: .9rem; color: var(--auf-tiefsee-muted); font-size: .92rem; } .footer-schluss { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgb(255 255 255 / .12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-bottom: 15px; } .footer-rechts { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .92rem; } .footer-demo { width: 100%; font-size: .8rem; color: var(--auf-tiefsee-muted); margin: .8rem 0 0; } /* Ladeauftritt „Die Arche legt ab" — neue Bildmarke aus 5 gefüllten Flächen (+1 Altfragment, ausgeblendet). Ablauf (lader-voll, --ld:1): Wasser steigt · Bug-Bogen wächst von oben · drei Rumpf-Schwünge laufen gestaffelt von links nach rechts aus wie Bugwellen · Dach hebt sich · Wortmarke · JS zieht den Lader bei 1250 ms als Wasser-Vorhang nach oben ab (harter Kill 1600 ms, CSS-Fallback 2,2 s ohne JS). Unterseiten (lader-kurz, --ld:.5) laufen doppelt so schnell. Reduced motion: gleicher Ablauf, kürzer, Abgang als Überblendung statt Fahrt. Die Pfade tragen ein transform-Attribut: deshalb NUR clip-path/opacity auf .ld-linie, nie CSS-transform (würde die Matrix ersetzen). */ .lader { --ld: 1; position: fixed; inset: 0; z-index: 100; background: #0A2E36; color: #FFFFFF; display: grid; place-items: center; overflow: visible; animation: lader-aus .6s var(--ease-in-out) 2.2s both; } .lader.weg { animation: lader-aus .6s var(--ease-in-out) both; } .lader-kurz { --ld: .5; } .lader-innen { position: relative; z-index: 1; width: min(62vw, 280px); text-align: center; translate: -4% 0; } .ld-boot { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 18px 26px rgb(0 0 0 / .38)); transform-origin: 50% 80%; animation: ld-ablegen calc(var(--ld) * 1.3s) var(--ease-out) both, boot-wiegen calc(4.5s * var(--tempo)) var(--ease-in-out) calc(var(--ld) * .5s) infinite; } @keyframes ld-ablegen { from { translate: -7% 3%; } to { translate: 0 0; } } .ld-linie { animation: ld-welle calc(var(--ld) * .62s) var(--ease-out) both; animation-delay: calc(var(--ld) * (.22s + var(--i) * .1s)); } .ld-boot .ld-linie:nth-child(3) { animation-delay: calc(var(--ld) * .24s); } /* oberer Rumpf-Schwung */ .ld-boot .ld-linie:nth-child(2) { animation-delay: calc(var(--ld) * .34s); } /* mittlerer */ .ld-boot .ld-linie:nth-child(1) { animation-delay: calc(var(--ld) * .44s); } /* unterer */ .ld-boot .ld-linie:nth-child(4) { animation-name: ld-bug; animation-duration: calc(var(--ld) * .55s); animation-delay: calc(var(--ld) * .08s); } /* Bug-Bogen */ .ld-boot .ld-linie:nth-child(5) { animation-name: ld-dach; animation-duration: calc(var(--ld) * .5s); animation-delay: calc(var(--ld) * .62s); } /* Dach */ .ld-boot .ld-linie:nth-child(n+6) { display: none; } /* Rest der alten Marke im Lader-SVG */ @keyframes ld-welle { from { clip-path: inset(0 100% 0 0); opacity: .35; } to { clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes ld-bug { from { clip-path: inset(0 0 100% 0); opacity: .35; } to { clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes ld-dach { from { clip-path: inset(100% 0 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } } .ld-wort { margin-top: 1.1rem; translate: 4% 0; font-family: var(--font-head); font-weight: 600; letter-spacing: .18em; font-size: .85rem; color: #BFE7EC; animation: ld-wort calc(var(--ld) * .5s) var(--ease-out) calc(var(--ld) * .72s) both; } @keyframes ld-wort { from { opacity: 0; transform: translateY(8px); letter-spacing: .3em; } to { opacity: 1; transform: none; letter-spacing: .18em; } } .ld-wasser { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; overflow: hidden; animation: ld-flut calc(var(--ld) * 1s) var(--ease-out) both; } @keyframes ld-flut { from { transform: translateY(60%); } to { transform: translateY(0); } } .ld-wasser .welle-bahn { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; } .ld-wasser .welle-1 { animation-duration: calc(14s * var(--tempo)); } .ld-wasser .welle-2 { animation-duration: calc(5s * var(--tempo)); } .ld-wasser .welle-3 { animation-duration: calc(23s * var(--tempo)); } .ld-wasser .welle-bahn path { fill: #2FC1CF; } @keyframes lader-blende { to { opacity: 0; visibility: hidden; } } @keyframes ld-flut-rm { from { transform: translateY(15%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .lader { --ld: .7; animation-name: lader-blende; } .lader.weg { animation: lader-blende .45s ease both; } .lader-kurz { --ld: .45; } .ld-boot { animation: boot-wiegen calc(4.5s * var(--tempo)) var(--ease-in-out) infinite; } .ld-wasser { animation-name: ld-flut-rm; } } /* Seiten-Übergang (View Transition) */ @keyframes vt-aus { to { opacity: 0; transform: translateY(-12px); } } @keyframes vt-ein { from { opacity: 0; transform: translateY(14px); } } /* Cookie-Banner Optik (Logik unverändert) */ #cookie-banner { font-family: var(--font-body) !important; } /* Reduced Motion — dämpfen, nicht killen: alle Dauerschleifen laufen mit calc(Xs * var(--tempo)); --tempo ist 1 und unter „Bewegung reduzieren" 2.5 (tokens.css). KEIN animation:none, KEIN !important. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: calc(.2s * var(--tempo)); } } @media print { .lader, .wellen, .site-header, .nav-overlay, .vorhang { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ ÄNDERUNGSLAUF 06.09.2026 — ruhiger Hero, Reise-Scrolly, Pflegegrade, WhatsApp, Wellen-Übergänge, Wasser-Hover in der Navigation, Quiz, Drucksachen ══════════════════════════════════════════════════════════════════════════ */ /* ── Hero, minimalistisch ── */ .hero-ruhig { padding: 8rem 0 10rem; } .hero-ruhig .wrap.hero-grid { min-height: calc(100svh - 18rem); grid-template-columns: minmax(0, 1fr); } .hero-ruhig .hero-text { max-width: 38rem; } .hero-ruhig h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 1rem; } .hero-ruhig .lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 30rem; } .hero-ruhig .hero-overlay { background: linear-gradient(100deg, rgb(10 46 54 / .92) 0%, rgb(10 46 54 / .74) 38%, rgb(10 46 54 / .22) 100%); } .hero-ruhig .hero-badges { grid-template-columns: repeat(auto-fit, minmax(11rem, max-content)); } /* ── Reise-Scrolly: passt in jede Bühne, nichts wird abgeschnitten ── */ .scrolly-reise .scrolly-innen { padding: 5.5rem 1.25rem 1.5rem; gap: 1rem; align-content: center; grid-template-rows: auto auto; } .scrolly-reise .scrolly-bild { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: #FFFFFF; } .scrolly-reise .sp-reise { width: 100%; height: auto; max-height: 40svh; display: block; } .scrolly-reise .scrolly-titel { font-size: clamp(1.4rem, 3vw, 2.2rem); margin: 0 0 .2rem; } .scrolly-reise .scrolly-titel + p { margin: 0 0 .7rem; font-size: .95rem; } .scrolly-reise .scrolly-text { gap: .45rem; } .scrolly-reise .scrolly-text p { padding: .6rem .85rem; font-size: .92rem; line-height: 1.4; font-weight: 500; } .scrolly-reise .scrolly-wert { margin-top: .5rem; font-size: clamp(1.3rem, 2.4vw, 1.9rem); } @media (max-width: 1023px) and (max-height: 700px) { .scrolly-reise .scrolly-titel + p { display: none; } .scrolly-reise .sp-reise { max-height: 32svh; } .scrolly-reise .scrolly-text p { padding: .45rem .75rem; font-size: .86rem; } .scrolly-reise .scrolly-wert { display: none; } } @media (min-width: 1024px) { .scrolly-reise .scrolly-innen { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); grid-template-rows: none; padding: 6rem 2rem 2rem; gap: 2.5rem; } .scrolly-reise .sp-reise { max-height: 70svh; } .scrolly-reise .scrolly-text p { font-size: 1rem; padding: .8rem 1rem; } } .rs-label { font-size: 26px; font-weight: 700; paint-order: stroke; stroke: #FFFFFF; stroke-width: 6px; stroke-linejoin: round; } .rs-nr { font-size: 18px; } html.dark .sp-reise .rs-label { fill: #0A2E36; } .rs-wasser-h { animation: rs-treiben calc(9s * var(--tempo)) var(--ease-in-out) infinite alternate; } .rs-wasser-m { animation: rs-treiben calc(7s * var(--tempo)) var(--ease-in-out) infinite alternate-reverse; } .rs-wasser-v { animation: rs-treiben calc(11s * var(--tempo)) var(--ease-in-out) infinite alternate; } @keyframes rs-treiben { from { transform: translateX(-6px); } to { transform: translateX(6px); } } .rs-licht-halo { animation: rs-licht calc(3.2s * var(--tempo)) var(--ease-in-out) infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes rs-licht { from { opacity: .18; transform: scale(.9); } to { opacity: .4; transform: scale(1.15); } } .reise-boot-wiege { animation: boot-wiegen calc(5s * var(--tempo)) var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: 50% 80%; } .reise-boot path { fill: #0A2E36; } /* ── Pflegegrade (Tabelle — die Spalten selbst sind die Auswahl) ── Versteckte Radios #pgr1…#pgr5 tragen den Zustand (CSS hebt die Spalte hervor); Kopfzelle = Button mit aria-pressed, Klick auf Kopf oder Zelle setzt das Radio (assets/seiten/index.js). */ .pg-karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); } @media (min-width: 640px) { .pg-karte { padding: 1.75rem; } } .pg-radio { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } .pg-scroll { overflow-x: auto; } .pg-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; } .pg-tabelle caption { caption-side: bottom; text-align: left; font-size: .8rem; color: var(--muted); padding-top: .8rem; } .pg-tabelle th, .pg-tabelle td { padding: .8rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .pg-tabelle thead th { font-family: var(--font-head); font-size: .85rem; letter-spacing: .02em; color: var(--muted); border-bottom: 2px solid var(--line); } .pg-tabelle thead th.pg-grad { padding: .35rem .3rem; vertical-align: bottom; } .pg-tabelle tbody th { font-weight: 600; color: var(--fg); } .pg-tabelle tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; margin-top: .15rem; } .pg-tabelle td { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--fg); white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s; } .pg-tabelle td.pg-null { color: var(--muted); font-weight: 500; } .pg-wahl { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: .3em; width: 100%; min-height: 44px; margin: 0; padding: .45rem .3rem; border: 0; border-radius: .4rem; background: transparent; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted rgb(0 112 124 / .55); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: background-color .2s, color .2s; } .pg-wahl:hover { color: var(--tuerkis-tief); background: rgb(0 155 170 / .1); } .pg-wahl:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 2px; } .pg-wahl[aria-pressed="true"] { color: #0A2E36; text-decoration: none; } .pg-wahl-kurz { display: none; } @media (hover: hover) { .pg-tabelle:has(td:nth-child(2):hover, .pg-grad-1:hover) td:nth-child(2), .pg-tabelle:has(td:nth-child(3):hover, .pg-grad-2:hover) td:nth-child(3), .pg-tabelle:has(td:nth-child(4):hover, .pg-grad-3:hover) td:nth-child(4), .pg-tabelle:has(td:nth-child(5):hover, .pg-grad-4:hover) td:nth-child(5), .pg-tabelle:has(td:nth-child(6):hover, .pg-grad-5:hover) td:nth-child(6) { background: rgb(0 155 170 / .07); } } #pgr1:checked ~ .pg-scroll td:nth-child(2), #pgr2:checked ~ .pg-scroll td:nth-child(3), #pgr3:checked ~ .pg-scroll td:nth-child(4), #pgr4:checked ~ .pg-scroll td:nth-child(5), #pgr5:checked ~ .pg-scroll td:nth-child(6) { background: #D9F0F3; color: #0A2E36; border-radius: .4rem; cursor: default; } #pgr1:checked ~ .pg-scroll .pg-grad-1, #pgr2:checked ~ .pg-scroll .pg-grad-2, #pgr3:checked ~ .pg-scroll .pg-grad-3, #pgr4:checked ~ .pg-scroll .pg-grad-4, #pgr5:checked ~ .pg-scroll .pg-grad-5 { color: #0A2E36; background: #D9F0F3; border-radius: .4rem .4rem 0 0; } html.dark #pgr1:checked ~ .pg-scroll td:nth-child(2), html.dark #pgr2:checked ~ .pg-scroll td:nth-child(3), html.dark #pgr3:checked ~ .pg-scroll td:nth-child(4), html.dark #pgr4:checked ~ .pg-scroll td:nth-child(5), html.dark #pgr5:checked ~ .pg-scroll td:nth-child(6), html.dark #pgr1:checked ~ .pg-scroll .pg-grad-1, html.dark #pgr2:checked ~ .pg-scroll .pg-grad-2, html.dark #pgr3:checked ~ .pg-scroll .pg-grad-3, html.dark #pgr4:checked ~ .pg-scroll .pg-grad-4, html.dark #pgr5:checked ~ .pg-scroll .pg-grad-5 { background: #1B4350; color: #FFFFFF; } html.dark .pg-wahl { text-decoration-color: rgb(47 193 207 / .6); } html.dark .pg-wahl:hover { color: #FFFFFF; background: rgb(47 193 207 / .14); } html.dark .pg-wahl[aria-pressed="true"] { color: #FFFFFF; } /* Handy: Kopfzeile wird zur Auswahlleiste IN der Tabelle, darunter nur die gewählte Spalte */ @media (max-width: 767px) { .pg-tabelle { display: flex; flex-direction: column; } .pg-tabelle thead { display: block; order: 1; } .pg-tabelle tbody { display: block; order: 2; } .pg-tabelle caption { display: block; order: 3; } .pg-tabelle thead tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; padding-bottom: .9rem; border-bottom: 2px solid var(--line); } .pg-tabelle thead th { border-bottom: 0; } .pg-tabelle thead th:first-child { display: none; } .pg-tabelle thead th.pg-grad { padding: 0; background: none !important; border-radius: 0 !important; } .pg-wahl { justify-content: center; text-align: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); font-weight: 600; font-size: .8rem; letter-spacing: 0; text-decoration: none; padding: .3rem .2rem; } .pg-wahl:hover { border-color: var(--tuerkis); } .pg-wahl[aria-pressed="true"] { background: #0A2E36; color: #FFFFFF; border-color: #0A2E36; } html.dark .pg-wahl[aria-pressed="true"] { background: #2FC1CF; color: #0A2E36; border-color: #2FC1CF; } .pg-wahl-lang { display: none; } .pg-wahl-kurz { display: inline; } .pg-tabelle td { display: none; text-align: right; } .pg-tabelle tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .pg-tabelle tbody th { border-bottom: 0; } .pg-tabelle tbody td { border-bottom: 0; } .pg-tabelle tbody tr { border-bottom: 1px solid var(--line); } #pgr1:checked ~ .pg-scroll td:nth-child(2), #pgr2:checked ~ .pg-scroll td:nth-child(3), #pgr3:checked ~ .pg-scroll td:nth-child(4), #pgr4:checked ~ .pg-scroll td:nth-child(5), #pgr5:checked ~ .pg-scroll td:nth-child(6) { display: block; } } .pg-hinweis { margin: 1.2rem 0 0; color: var(--muted); font-size: .92rem; max-width: 62ch; } .pg-aktion { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; } /* ── Wellen-Übergänge zwischen Sektionen ── */ .trenner-wellen { position: relative; height: 70px; margin-bottom: -1px; overflow: hidden; pointer-events: none; z-index: 1; } .trenner-bahn { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; } .trenner-1 { animation: trenner-lauf-1 calc(41s * var(--tempo)) linear infinite; } .trenner-2 { animation: trenner-lauf-2 calc(37s * var(--tempo)) linear infinite reverse; } @media (min-width: 768px) { .trenner-wellen { height: 96px; } } /* ── Seiten-Übergang: Wasser-Vorhang mit Wellenkante ── */ .vorhang { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99; background: #0A2E36; transform: translateY(calc(100% + 90px)); pointer-events: none; } .vorhang::before { content: ""; position: absolute; left: 0; right: 0; top: -58px; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 40 10, 80 10, 120 30 S 200 50, 240 30 L240 60 L0 60 Z' fill='%230A2E36'/%3E%3C/svg%3E") repeat-x; background-size: 240px 60px; animation: vorhang-welle calc(2.4s * var(--tempo)) linear infinite; } .vorhang.aktiv { transition: transform .46s var(--ease-in-out); transform: translateY(0); pointer-events: auto; will-change: transform; } .vorhang::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(40vw, 200px); aspect-ratio: 676 / 392; translate: -50% -50%; background: url("img/arche-bildmarke.svg") center / contain no-repeat; opacity: 0; transition: opacity .25s ease .2s; } .vorhang.aktiv::after { opacity: .5; } @media (prefers-reduced-motion: reduce) { .vorhang { transform: none; opacity: 0; visibility: hidden; } .vorhang.aktiv { transform: none; opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s; } .vorhang::before { display: none; } } @keyframes vorhang-welle { from { background-position-x: 0; } to { background-position-x: 240px; } } .lader::after { content: ""; position: absolute; left: 0; right: 0; bottom: -58px; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L240 0 L240 30 C 200 50, 160 50, 120 30 S 40 10, 0 30 Z' fill='%230A2E36'/%3E%3C/svg%3E") repeat-x; background-size: 240px 60px; animation: vorhang-welle calc(2.4s * var(--tempo)) linear infinite; } .lader .lader-innen, .lader .ld-wasser { z-index: 1; } .lader::before { content: ""; position: absolute; inset: 0; background: #0A2E36; } .lader .lader-innen { position: relative; } @keyframes lader-aus { to { transform: translateY(-115%); visibility: hidden; } } /* ── WhatsApp: schwebender Knopf auf jeder Seite ── */ .wa-knopf { font: inherit; border: 0; cursor: pointer; position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .7rem 1.1rem .7rem .85rem; border-radius: 999px; background: #25D366; color: #0A2E36; font-weight: 700; text-decoration: none; box-shadow: 0 10px 28px rgb(10 46 54 / .28); transition: translate .18s var(--ease-out), box-shadow .2s; } .wa-knopf svg { width: 26px; height: 26px; flex: none; } .wa-knopf:hover, .wa-knopf:focus-visible { translate: 0 -2px; box-shadow: 0 14px 32px rgb(10 46 54 / .34); } .wa-knopf .wa-text { display: none; } @media (min-width: 640px) { .wa-knopf { right: 1.5rem; bottom: 1.5rem; } .wa-knopf .wa-text { display: inline; } } .wa-knopf::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid #25D366; opacity: 0; animation: wa-puls calc(3.4s * var(--tempo)) var(--ease-out) infinite; pointer-events: none; } @keyframes wa-puls { 0% { transform: scale(.9); opacity: .55; } 60% { transform: scale(1.15); opacity: 0; } 100% { opacity: 0; } } .nm-cookie:not([hidden]) ~ .wa-knopf { bottom: 8.5rem; } .knopf-wa { background: #25D366; color: #0A2E36; } a.knopf.knopf-wa, .prosa a.knopf.knopf-wa { background: #25D366; color: #0A2E36; } .knopf-wa:hover { background: #1FBF5B; } /* ── Navigation: Wasser-Hover (leise Wellenlinie unter dem Reiter) ── */ .site-header nav a { position: relative; } .site-header nav > a::after, .site-header nav .nav-item > a::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .3rem; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 C 3 0.5, 6 0.5, 9 3 S 15 5.5, 18 3 S 22 1, 24 3' fill='none' stroke='%23009BAA' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x; background-size: 24px 6px; opacity: 0; transform: translateY(3px); transition: opacity .25s ease, transform .3s var(--ease-out); pointer-events: none; } .site-header.scrolled nav > a::after, .site-header.scrolled nav .nav-item > a::after, .site-header.hell nav > a::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 C 3 0.5, 6 0.5, 9 3 S 15 5.5, 18 3 S 22 1, 24 3' fill='none' stroke='%23009BAA' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .site-header nav > a:hover::after, .site-header nav > a:focus-visible::after, .site-header nav .nav-item > a:hover::after, .site-header nav .nav-item.offen > a::after, .site-header nav > a[aria-current="page"]::after { opacity: 1; transform: translateY(0); animation: nav-welle calc(1.8s * var(--tempo)) linear infinite; } .site-header nav > a[aria-current="page"]::after { animation: none; } @keyframes nav-welle { from { background-position-x: 0; } to { background-position-x: 24px; } } .site-header nav a:hover, .site-header nav a:focus-visible { background-color: rgb(127 127 127 / .08); } .site-header nav .nav-sub a { position: relative; overflow: hidden; } .site-header nav .nav-sub a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--tuerkis); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .28s var(--ease-out); } .site-header nav .nav-sub a:hover::before, .site-header nav .nav-sub a:focus-visible::before { transform: scaleY(1); } .site-header nav .nav-sub a:hover { transform: translateX(3px); transition: transform .28s var(--ease-out), background-color .2s; } .nav-overlay > a, .nav-overlay .nav-gruppe a { position: relative; } .nav-overlay > a:hover, .nav-overlay .nav-gruppe a:hover { color: var(--tuerkis-tief); } /* ── Team-Portraits (Kundenfotos) ── */ .person-foto { width: 128px; height: 160px; border-radius: 22px; object-fit: cover; flex: none; box-shadow: var(--shadow-sm); } @media (max-width: 479px) { .person { flex-direction: column; } .person-foto { width: 100%; height: auto; aspect-ratio: 4 / 5; max-width: 16rem; } } .geschichte { position: relative; } .geschichte .prosa p:first-of-type::first-letter { font-family: var(--font-head); font-size: 3.2em; float: left; line-height: .85; padding-right: .12em; color: var(--tuerkis-tief); font-weight: 700; } .geschichte-zitat { border-left: 4px solid var(--tuerkis); padding: .6rem 1rem; margin: 1.4rem 0; font-family: var(--font-head); font-size: 1.15rem; color: var(--fg); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; } .geschichte-bild { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } .geschichte-bild svg { width: 100%; height: auto; display: block; } /* ── Interaktive Ratgeber: Frage-Karten, Quiz, Checkliste, Rechner ── */ .quiz { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 1.4rem; margin: 2rem 0; box-shadow: var(--shadow-sm); } .quiz-kopf { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; } .quiz-kopf .ico-kachel { width: 42px; height: 42px; border-radius: 12px; } .quiz-frage { margin: 0 0 .8rem; font-weight: 600; } .quiz-optionen { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; } .quiz-optionen button { text-align: left; width: 100%; font: inherit; padding: .75rem 1rem; min-height: 48px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s var(--ease-out); display: flex; align-items: center; gap: .6rem; } .quiz-optionen button:hover { border-color: var(--tuerkis); transform: translateX(2px); } .quiz-optionen button[disabled] { cursor: default; } .quiz-optionen button.richtig { background: #DDF3E4; border-color: #1E7A44; color: #0F3D24; } .quiz-optionen button.falsch { background: #FBE3DE; border-color: #B8442C; color: #5B1E12; } html.dark .quiz-optionen button.richtig { background: #16442A; border-color: #5CCB8B; color: #E6F5EA; } html.dark .quiz-optionen button.falsch { background: #4A1F17; border-color: #F08C76; color: #FBE3DE; } .quiz-antwort { margin: .9rem 0 0; padding: .9rem 1rem; border-radius: var(--r); background: var(--surface); color: var(--fg); font-size: .95rem; border-left: 4px solid var(--tuerkis); } .quiz-antwort[hidden] { display: none; } .quiz-stand { margin-top: 1rem; display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--muted); } .quiz-stand .balken { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .quiz-stand .balken i { display: block; height: 100%; width: 100%; background: var(--tuerkis); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); } .quiz-fazit { margin-top: 1rem; font-weight: 600; color: var(--tuerkis-tief); } .quiz-fazit[hidden] { display: none; } .checkliste { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .5rem; } .checkliste label { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: background-color .2s, border-color .2s; min-height: 48px; } .checkliste label:hover { border-color: var(--tuerkis); } .checkliste input { width: 20px; height: 20px; margin-top: .15rem; accent-color: #009BAA; flex: none; } .checkliste input:checked + span { text-decoration: line-through; color: var(--muted); } .check-fortschritt { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--muted); margin-top: .4rem; } .check-fortschritt .balken { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .check-fortschritt .balken i { display: block; height: 100%; width: 100%; background: var(--koralle); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease-out); } .rechner { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 1.4rem; margin: 2rem 0; } .rechner .k-feld { margin-bottom: .9rem; } .rechner-ergebnis { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .rechner-ergebnis strong { font-family: var(--font-head); font-size: 1.6rem; color: var(--tuerkis-tief); display: block; } .rechner-ergebnis[hidden] { display: none; } .szenario { border-radius: var(--r-lg); background: var(--tiefsee); color: #FFFFFF; padding: 1.4rem; margin: 0 0 2rem; } .szenario .quiz-frage { color: #FFFFFF; font-family: var(--font-head); font-size: 1.15rem; } .szenario .quiz-optionen button { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .18); color: #FFFFFF; } .szenario .quiz-optionen button:hover { border-color: #2FC1CF; } .szenario .quiz-optionen button.richtig { background: #1E7A44; border-color: #5CCB8B; color: #FFFFFF; } .szenario .quiz-optionen button.falsch { background: #8A2F1D; border-color: #F08C76; color: #FFFFFF; } .szenario .quiz-antwort { background: rgb(255 255 255 / .1); color: #E6EEF0; border-left-color: #2FC1CF; } /* ── Drucksachen: Visitenkarten & Briefbogen (mm-echt, druckbar) ── */ .druck-raster { display: grid; gap: 2rem; } @media (min-width: 900px) { .druck-raster { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); } } .druck-satz { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; } .druck-satz h3 { margin: 0 0 .3rem; } .druck-satz .untertitel { color: var(--muted); margin: 0 0 1rem; font-size: .92rem; } .druck-seiten { display: grid; gap: 1rem; justify-items: start; } .vk { width: 85mm; height: 55mm; max-width: 100%; aspect-ratio: 85 / 55; position: relative; overflow: hidden; border-radius: 3mm; box-shadow: 0 12px 30px rgb(10 46 54 / .18); font-family: var(--font-body); color: #10262B; background: #FFFFFF; container-type: inline-size; } .vk * { box-sizing: border-box; } .vk .logo-svg { display: block; } .vk .vk-name { font-family: var(--font-head); font-weight: 700; font-size: 4.6cqw; line-height: 1.1; margin: 0; } .vk .vk-rolle { font-size: 3cqw; color: #00707C; font-weight: 600; margin: .3cqw 0 0; letter-spacing: .02em; } .vk .vk-daten { font-size: 2.9cqw; line-height: 1.55; margin: 0; } .vk .vk-daten span { display: block; } .vk-wellen { position: absolute; left: -10%; right: -10%; bottom: 0; height: 32%; pointer-events: none; } .vk-wellen svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; } .druck-label { font-size: .78rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin: 0 0 .3rem; } .brief { width: 210mm; height: 297mm; max-width: 100%; aspect-ratio: 210 / 297; position: relative; overflow: hidden; background: #FFFFFF; color: #10262B; box-shadow: 0 16px 40px rgb(10 46 54 / .18); font-family: var(--font-body); container-type: inline-size; } .brief * { box-sizing: border-box; } .brief-kopf { position: absolute; left: 9.5%; right: 9.5%; top: 5.5%; display: flex; justify-content: space-between; align-items: flex-start; } .brief-kopf .logo-svg { width: 26cqw; height: auto; color: #009BAA; } .brief-kopf .brief-adresse { text-align: right; font-size: 1.55cqw; line-height: 1.55; color: #3E5A60; } .brief-kopf .brief-adresse strong { color: #10262B; font-family: var(--font-head); } .brief-rueck { position: absolute; left: 9.5%; top: 21.5%; font-size: 1.3cqw; color: #00707C; border-bottom: .5px solid #D5ECF0; padding-bottom: .3cqw; } .brief-empf { position: absolute; left: 9.5%; top: 23.5%; font-size: 1.7cqw; line-height: 1.5; } .brief-info { position: absolute; right: 9.5%; top: 23.5%; font-size: 1.5cqw; line-height: 1.6; text-align: right; color: #3E5A60; } .brief-info strong { color: #10262B; } .brief-text { position: absolute; left: 9.5%; right: 9.5%; top: 38%; font-size: 1.75cqw; line-height: 1.6; } .brief-text h2 { font-family: var(--font-head); font-size: 2.3cqw; margin: 0 0 1.4cqw; color: #10262B; } .brief-text p { margin: 0 0 1.2cqw; } .brief-fuss { position: absolute; z-index: 1; left: 9.5%; right: 9.5%; bottom: 8%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; font-size: 1.3cqw; line-height: 1.55; color: #3E5A60; border-top: .5px solid #D5ECF0; padding-top: 1.2cqw; } .brief-fuss strong { color: #10262B; display: block; } .brief-wellen { position: absolute; left: 0; right: 0; bottom: 0; height: 7%; pointer-events: none; opacity: .8; } .brief-wellen svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; } .brief-falz { position: absolute; left: 0; width: 4mm; height: .3mm; background: #B8C9CE; } .druck-aktion { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } @media print { body.seite-firmen-identitaet * { visibility: hidden; } body.seite-firmen-identitaet .druck-satz, body.seite-firmen-identitaet .druck-satz * { visibility: visible; } body.seite-firmen-identitaet .druck-satz { border: 0; box-shadow: none; page-break-after: always; } .vk, .brief { box-shadow: none; } } @media (min-width: 640px) { .footer-schluss { padding-right: 11rem; } } /* ── Grundlage-Hilfen für alle Seiten (site.js · window.ARCHE) ── */ /* Lenis (Pflicht-CSS des Pakets) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Bild-Ladeeffekt data-reveal="bild": Foto schärft sich, Maske öffnet sich (Tween in site.js) */ [data-reveal="bild"] img { transition: scale .7s var(--ease-out); } /* Film-Helfer