/* ==========================================================================
Physiotherapie Baker · Bad Ems — Designsystem (Fassung 2, 13.10.2026)
Konzept „Blaue Stunde“: Dunkelblau als Markenfarbe, Gold als Akzent, helle Leseflächen.
Klar gegliederte Oberfläche (Raster, Kacheln, deutliche Abschnitte) mit edlen Details
und ruhigen Motion Graphics. Cormorant Garamond nur für große Überschriften,
Manrope für alles andere – Zahlen immer in Manrope (gut lesbar).
Gliederung: 0 Tokens · 1 Basis · 2 Typografie · 3 Layout · 4 Kopf & Navigation
5 Buttons & Links · 6 Rahmen & Bilder · 7 Komponenten · 8 Formulare · 9 Fuß & Leisten
10 Bewegung (nur html.motion) · 11 Utilities · 12 Druck
========================================================================== */
/* ---------- 0 Tokens ---------- */
:root {
--navy-950: #0a1222;
--navy-900: #0f1a2e;
--navy-800: #14233f;
--navy-700: #1b2f55;
--navy-600: #24406f;
--navy-500: #2f5290;
--ink: #10203a;
--ink-2: #1b2f55;
--ink-soft: #4a5a75;
--ink-mute: #5d697d; /* seit 18.10.2026 dunkler (vorher #7b889d): kleiner Text erreicht so 4,5:1 (WCAG AA) auf allen hellen Flächen */
--paper: #f7f8fb;
--paper-2: #eef2f8;
--paper-3: #e2e8f2;
--paper-deep: #d2dbe9;
--white: #ffffff;
--gold: #c9a24a;
--gold-2: #e3c36f;
--gold-deep: #9a7a2f; /* Gold für große Texte (Überschriften-Em, Icons) auf hell – 3:1 reicht für große Schrift */
--gold-ink: #7f6427; /* Gold für KLEINEN Text auf hell (Eyebrows, Beschriftungen): 4,5:1 auf Weiß, Paper, Tint und Sand */
--gold-soft: rgba(201, 162, 74, .14);
--green: #2f8f5b;
--red: #b24a3c;
--line: rgba(16, 32, 58, .12);
--line-strong: rgba(16, 32, 58, .24);
--shadow-soft: 0 24px 50px -28px rgba(16, 32, 58, .35), 0 2px 6px -2px rgba(16, 32, 58, .08);
--shadow-lift: 0 30px 60px -30px rgba(16, 32, 58, .45), 0 4px 12px -6px rgba(16, 32, 58, .12);
--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
--ease-expo: cubic-bezier(.16, 1, .3, 1);
--container: 1240px;
--gutter: clamp(1.25rem, 5vw, 4rem);
--section: clamp(4rem, 8vw, 7rem);
--section-sm: clamp(2.75rem, 5vw, 4.5rem);
--radius: 1rem;
--radius-sm: .6rem;
--radius-lg: 1.5rem;
--arch: var(--radius-lg);
--header-h: 5rem;
}
@media (max-width: 640px) { :root { --header-h: 4.25rem; } }
/* Dunkelblauer Kontext: Tokens drehen sich um, Komponenten passen sich automatisch an */
.is-dark, .page-head, .hero {
background: var(--navy-900);
color: #f3f6fb;
--ink: #f3f6fb;
--ink-2: #e6ebf4;
--ink-soft: rgba(243, 246, 251, .74);
--ink-mute: rgba(243, 246, 251, .58);
--paper: var(--navy-900);
--paper-2: var(--navy-800);
--paper-3: var(--navy-700);
--paper-deep: var(--navy-600);
--white: var(--navy-800);
--gold-deep: var(--gold-2);
--gold-ink: var(--gold-2);
--gold-soft: rgba(227, 195, 111, .14);
--line: rgba(255, 255, 255, .12);
--line-strong: rgba(255, 255, 255, .28);
--shadow-soft: 0 30px 60px -30px rgba(0, 0, 0, .6);
--shadow-lift: 0 34px 70px -30px rgba(0, 0, 0, .7);
}
/* ---------- 1 Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 400 1.0625rem/1.65 var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-variant-numeric: lining-nums;
overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; } /* hidden-Attribut gewinnt gegen display: flex/grid – sonst bleiben Formular-Meldungen (.form__error, .form__done) und das abgeschickte Formular sichtbar (Fehler bis 01.11.2026) */
::selection { background: var(--gold-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.skip {
position: absolute; left: 1rem; top: -4rem; z-index: 1000;
padding: .75rem 1rem; background: var(--navy-900); color: #fff; border-radius: .5rem;
font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 1rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.ico--xs { width: .9em; height: .9em; }
.ico--lg { width: 1.6em; height: 1.6em; }
.num { font-family: var(--font-body); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
/* ---------- 2 Typografie ---------- */
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 500; font-feature-settings: "lnum" 1; }
h3, h4, h5 { font-family: var(--font-body); font-weight: 600; }
h1 em, h2 em, .display-1 em, .display-2 em { font-style: italic; font-weight: inherit; color: var(--gold-deep); }
h3 em, .display-3 em, .display-4 em { font-style: normal; color: var(--gold-ink); }
.display-1 { font: 500 clamp(2.6rem, 6.4vw, 5.5rem)/1.02 var(--font-display); letter-spacing: -.015em; font-feature-settings: "lnum" 1; }
.display-2 { font: 500 clamp(2rem, 3.9vw, 3.3rem)/1.08 var(--font-display); letter-spacing: -.01em; font-feature-settings: "lnum" 1; }
.display-3 { font: 600 clamp(1.4rem, 2.2vw, 1.85rem)/1.2 var(--font-body); letter-spacing: -.015em; }
.display-4 { font: 600 1.2rem/1.3 var(--font-body); letter-spacing: -.01em; }
.display-5 { font: 600 1.05rem/1.35 var(--font-body); }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--ink-soft); font-weight: 400; text-wrap: pretty; }
.eyebrow {
display: inline-flex; align-items: center; gap: .75rem;
font: 700 .7rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--gold); flex: none; }
.eyebrow--plain::before { display: none; }
.eyebrow--plain { gap: .5rem; }
.eyebrow .ico { color: var(--gold); }
.numeral { font-family: var(--font-body); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--gold); line-height: 1; }
.serif { font-family: var(--font-display); font-feature-settings: "lnum" 1; }
.ital { font-style: italic; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
.xsmall { font-size: .8rem; }
.center { margin-inline: auto; text-align: center; }
.text-center { text-align: center; }
.flow > * + * { margin-top: 1em; }
.flow p { color: var(--ink-soft); text-wrap: pretty; }
.stack > * + * { margin-top: var(--stack, 1.25rem); }
/* ---------- 3 Layout ---------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: min(1520px, 100% - 2 * var(--gutter)); }
.container--narrow { width: min(860px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--sm { padding-block: var(--section-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--sand, .section--tint { background: var(--paper-2); }
.section--line { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4.5vw, 3.5rem); }
.section-head--center { text-align: center; justify-items: center; }
.section-head--row { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .section-head--row { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; } }
.section-head .lead { max-width: 60ch; }
.section-head .display-2 { max-width: 20ch; }
.section-head--center .display-2 { max-width: 24ch; }
.editorial { display: grid; gap: 2rem 4rem; }
.editorial__aside { display: grid; gap: 1.1rem; align-content: start; }
@media (min-width: 900px) {
.editorial { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.editorial__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
@media (min-width: 1200px) { .editorial { gap: 2rem 5rem; } }
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
.split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
.split--reverse > :first-child { order: 2; }
.split--wide-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.cols-2, .cols-3, .cols-4 { display: grid; gap: 1.25rem; }
.split > *, .editorial > *, .cols-2 > *, .cols-3 > *, .cols-4 > *, .section-head > *, .band__inner > * { min-width: 0; } /* Rasterkinder dürfen nie breiter als ihre Spalte werden */
@media (min-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } }
.actions { display: flex; flex-wrap: wrap; gap: .85rem 1rem; align-items: center; }
.actions--center { justify-content: center; }
.hairline { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent); opacity: .8; }
.rule { height: 1px; border: 0; margin: 0; background: var(--line); }
.ghost-num, .rail, .vertical-label { display: none !important; } /* Elemente der ersten Fassung – bewusst nicht mehr im Einsatz */
.rel { position: relative; }
.z1 { position: relative; z-index: 1; }
/* ---------- 4 Kopf & Navigation ---------- */
.progress {
position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); transform: scaleX(0); transform-origin: left center;
}
.header {
position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); color: #f3f6fb;
transition: transform .55s var(--ease-out), background .4s, box-shadow .4s, color .3s;
}
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.header.is-scrolled {
color: var(--navy-900);
background: rgba(247, 248, 251, .9);
-webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px);
box-shadow: 0 1px 0 rgba(16, 32, 58, .1);
}
.header.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; }
.brand__emblem { width: 2.75rem; height: 2.75rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201, 162, 74, .35), 0 6px 14px -8px rgba(0, 0, 0, .5); }
.brand__name { font: 600 1.08rem/1 var(--font-display); letter-spacing: .02em; }
.brand__name small { display: block; margin-top: .32rem; font: 700 .56rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); }
.header.is-scrolled .brand__name small { color: var(--gold-deep); }
.nav { display: none; }
.nav__list { list-style: none; display: flex; align-items: center; gap: clamp(1.3rem, 2vw, 2.2rem); }
.nav__item { position: static; }
.nav__link {
position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .55rem 0;
font: 600 .9rem/1 var(--font-body); text-decoration: none; color: inherit; white-space: nowrap; background: none; border: 0; opacity: .92;
}
.nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px; border-radius: 2px; background: var(--gold);
transform: scaleX(0); transform-origin: right center; transition: transform .45s var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item.is-open .nav__link::after { transform: scaleX(1); transform-origin: left center; }
.nav__link .ico--xs { transition: transform .35s var(--ease-out); opacity: .7; }
.nav__item.is-open .nav__link .ico--xs { transform: rotate(180deg); }
.header__actions { display: flex; align-items: center; gap: .6rem; }
.header__phone { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 2.9rem; height: 2.9rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; text-decoration: none; color: inherit; transition: color .3s, border-color .3s, background .3s; }
.header.is-scrolled .header__phone { border-color: var(--line-strong); }
.header__phone span { display: none; }
.header__phone:hover { border-color: var(--gold); }
.header__phone .ico { color: var(--gold-2); }
.header.is-scrolled .header__phone .ico { color: var(--gold-deep); }
.header__cta { --btn-bg: var(--gold); --btn-fg: var(--navy-900); }
.header__cta::before { background: #fff; }
@media (min-width: 1100px) {
.nav { display: block; }
.burger { display: none !important; }
.header__phone { width: auto; height: auto; min-height: 1.5rem; border: 0 !important; border-radius: 0; font: 700 .88rem/1 var(--font-body); }
.header__phone span { display: inline; font-variant-numeric: lining-nums tabular-nums; }
.header__actions { gap: 1rem; }
}
@media (min-width: 1100px) and (max-width: 1280px) { .header__phone span { display: none; } }
@media (max-width: 640px) { .header__actions .header__cta { display: none; } .brand__name { font-size: 1rem; } }
.burger {
display: inline-grid; place-items: center; align-content: center; justify-content: center; gap: 5px; width: 2.9rem; height: 2.9rem; padding: 0;
border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; transition: background .3s, border-color .3s;
}
.header.is-scrolled .burger { border-color: var(--line-strong); }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease-out), opacity .3s; }
.burger:hover { border-color: var(--gold); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
body.is-locked .header:not(.is-scrolled) { color: var(--navy-900); } /* offenes Menü ist hell – Kopfzeile dunkel beschriften */
body.is-locked .header:not(.is-scrolled) .header__phone, body.is-locked .header:not(.is-scrolled) .burger { border-color: rgba(16, 32, 58, .24); }
body.is-locked .header:not(.is-scrolled) .header__phone .ico { color: var(--gold-deep); }
/* Ausklapp-Panel Leistungen */
.mega {
position: absolute; top: calc(100% - .25rem); left: 50%; z-index: 5; color: var(--navy-900);
width: min(1080px, calc(100vw - 2rem)); padding: 1.5rem 1.75rem 1.1rem;
background: #fff; border: 1px solid rgba(16, 32, 58, .1); border-radius: var(--radius); box-shadow: 0 30px 60px -24px rgba(10, 18, 34, .45);
opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility .35s;
--ink: #10203a; --ink-soft: #4a5a75; --ink-mute: #5d697d; --line: rgba(16, 32, 58, .12); --gold-deep: #9a7a2f; --gold-ink: #7f6427; --paper-2: #eef2f8; --paper-3: #e2e8f2;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1.25rem; height: 1.25rem; }
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.2fr); gap: 2rem; }
.mega__feature {
display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.1rem; align-items: start; align-content: start;
padding: 1.1rem; border-radius: var(--radius); background: var(--paper-2); text-decoration: none; color: inherit; transition: background .3s;
}
.mega__feature:hover { background: var(--paper-3); }
.mega__feature-media { aspect-ratio: 4/5; border-radius: var(--radius-sm); }
.mega__feature-body { display: grid; gap: .45rem; justify-items: start; }
.mega__feature-title { font: 600 1.05rem/1.2 var(--font-body); color: var(--ink); }
.mega__feature-text { font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.mega__feature .link { font-size: .8rem; margin-top: .25rem; }
.mega__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
.mega__group h4 { margin-bottom: .5rem; }
.mega__group ul { list-style: none; border-left: 1px solid var(--line); }
.mega__group a {
display: block; padding: .32rem .8rem; font-size: .88rem; font-weight: 500; text-decoration: none; color: var(--ink-soft);
border-left: 2px solid transparent; margin-left: -1px; transition: color .2s, border-color .3s, padding-left .3s;
}
.mega__group a:hover { color: var(--ink); border-left-color: var(--gold); padding-left: 1rem; }
.mega__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); }
.mega__foot .link { font-size: .85rem; color: var(--ink); }
/* Vollbild-Menü (klein) */
.menu {
position: fixed; inset: 0; z-index: 95; overflow-y: auto; -webkit-overflow-scrolling: touch;
background: #f7f8fb; color: #10203a; padding-top: var(--header-h);
opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility .4s;
--ink: #10203a; --ink-soft: #4a5a75; --line: rgba(16, 32, 58, .12); --line-strong: rgba(16, 32, 58, .24); --gold-deep: #9a7a2f; --gold-ink: #7f6427; --paper-2: #eef2f8; --paper: #f7f8fb; --white: #fff;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__inner { min-height: calc(100% - var(--header-h)); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding-block: 1.5rem 2.5rem; }
.menu__list { list-style: none; display: grid; }
.menu__item { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.menu.is-open .menu__item { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .06s); }
.menu__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.menu__link { flex: 1; display: block; padding: 1.05rem 0; font: 500 clamp(1.8rem, 6.5vw, 2.4rem)/1.1 var(--font-display); text-decoration: none; letter-spacing: -.01em; color: var(--ink); }
.menu__link[aria-current="page"] { color: var(--gold-deep); font-style: italic; }
.menu__more { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--ink); display: grid; place-items: center; transition: transform .45s var(--ease-out), background .3s, border-color .3s; }
.menu__more .ico { width: 1.1rem; height: 1.1rem; }
.menu__item.is-open .menu__more { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.menu__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.menu__item.is-open .menu__sub { grid-template-rows: 1fr; }
.menu__sub-inner { overflow: hidden; display: grid; gap: 1.1rem; }
.menu__item.is-open .menu__sub-inner { padding-bottom: 1.5rem; }
.menu__promo { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: var(--radius-sm); background: var(--paper-2); text-decoration: none; font: 600 1.05rem/1.2 var(--font-body); color: var(--ink); }
.menu__promo small { display: block; margin-top: .2rem; font: 500 .72rem/1 var(--font-body); color: var(--ink-soft); }
.menu__promo .ico:last-child { margin-left: auto; color: var(--gold-deep); }
.menu__groups { display: grid; gap: 1rem; }
@media (min-width: 640px) { .menu__groups { grid-template-columns: 1fr 1fr; } }
.menu__group h4 { margin-bottom: .3rem; }
.menu__group a { display: block; padding: .38rem 0; font-size: .95rem; font-weight: 500; text-decoration: none; color: var(--ink-soft); }
.menu__foot { display: grid; gap: 1rem; }
.menu__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.menu__phone { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.1rem/1 var(--font-body); text-decoration: none; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.menu__phone .ico { color: var(--gold-deep); }
.menu__meta { font-size: .85rem; color: var(--ink-soft); }
/* ---------- 5 Buttons & Links ---------- */
.btn {
--btn-bg: var(--navy-800); --btn-fg: #fff;
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
padding: .95rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
font: 700 .9rem/1 var(--font-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
color: var(--btn-fg); background: var(--btn-bg); cursor: pointer;
transition: color .4s var(--ease-out), border-color .4s, box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gold); transform: translateY(102%); transition: transform .55s var(--ease-expo); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--navy-900); box-shadow: 0 14px 30px -16px rgba(201, 162, 74, .8); }
.btn .ico { transition: transform .45s var(--ease-out); }
.btn:hover .ico--arrow { transform: translate(2px, -2px); }
.is-dark .btn, .page-head .btn, .hero .btn { --btn-bg: #fff; --btn-fg: var(--navy-900); }
.btn--ghost, .is-dark .btn--ghost, .page-head .btn--ghost, .hero .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--gold); }
.btn--gold, .is-dark .btn--gold, .page-head .btn--gold, .hero .btn--gold { --btn-bg: var(--gold); --btn-fg: var(--navy-900); }
.btn--gold::before { background: #fff; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-900); }
.btn--sm { padding: .68rem 1.1rem; font-size: .8rem; }
.btn--lg { padding: 1.15rem 2rem; font-size: .98rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn { max-width: 100%; }
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; } .btn--lg { padding: 1rem 1.4rem; } }
.link {
display: inline-flex; align-items: center; gap: .45rem; position: relative; padding-bottom: .2rem;
font: 700 .9rem/1.2 var(--font-body); text-decoration: none; color: inherit;
}
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(1); transform-origin: left center; transition: transform .5s var(--ease-out); }
.link:hover::after { animation: bk-underline .7s var(--ease-out) forwards; }
.link .ico { color: var(--gold-deep); transition: transform .4s var(--ease-out); }
.link:hover .ico { transform: translate(2px, -2px); }
@keyframes bk-underline { 0% { transform: scaleX(1); transform-origin: right center; } 50% { transform: scaleX(0); transform-origin: right center; } 51% { transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } }
.link--plain::after { display: none; }
.text-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .22em; transition: color .3s; }
.text-link:hover { color: var(--gold-deep); }
/* ---------- 6 Rahmen & Bilder ---------- */
.frame { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); background: var(--paper-2); }
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame--arch, .frame--arch-down, .frame--soft { border-radius: var(--radius-lg); }
.frame--round { border-radius: 50%; aspect-ratio: 1; }
.frame--square { aspect-ratio: 1; }
.frame--portrait { aspect-ratio: 4/5; }
.frame--tall { aspect-ratio: 3/4; }
.frame--landscape { aspect-ratio: 5/4; }
.frame--wide { aspect-ratio: 16/10; }
.frame--cinema { aspect-ratio: 21/9; }
.frame--ring::after { content: ""; position: absolute; inset: .75rem; z-index: 2; border: 1px solid rgba(255, 255, 255, .55); border-radius: calc(var(--radius-lg) - .5rem); pointer-events: none; }
.frame--parallax > img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; }
.frame > [data-zoom], .frame > [data-parallax] { position: absolute; inset: 0; }
.frame > [data-zoom] > img, .frame > [data-parallax] > img { width: 100%; height: 100%; object-fit: cover; }
.frame--parallax > [data-parallax] { top: -15%; height: 130%; }
.frame--tint::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 18, 34, 0) 40%, rgba(10, 18, 34, .6)); pointer-events: none; }
.frame__cap {
position: absolute; left: 1rem; bottom: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem;
padding: .55rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy-900);
font: 700 .68rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.frame__cap .ico { color: var(--gold-deep); }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); opacity: .55; pointer-events: none; }
.ring::after { content: ""; position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.ring--dashed { border-style: dashed; opacity: .35; }
.ring--dashed::after { display: none; }
.ring--out { inset: -7%; }
.ring--out2 { inset: -15%; }
/* ---------- 7 Komponenten ---------- */
/* Seitenkopf (Unterseiten) – dunkelblau */
.page-head { position: relative; padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.75rem, 6vw, 4.5rem); overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 70% at 85% 10%, rgba(201, 162, 74, .16), transparent 60%), radial-gradient(40% 50% at 5% 100%, rgba(47, 82, 144, .35), transparent 60%); }
.page-head > * { position: relative; }
.page-head--center { text-align: center; }
.page-head--center .lead, .page-head--center .eyebrow { margin-inline: auto; }
.page-head--center .actions { justify-content: center; }
.page-head__grid { display: grid; gap: 1.5rem; }
.page-head .display-1 { max-width: 16ch; margin-block: 1.1rem 1.25rem; }
.page-head--center .display-1 { margin-inline: auto; }
.page-head .lead { max-width: 58ch; }
.page-head .actions { margin-top: 1.75rem; }
.page-head__facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 2.25rem; }
.fact { display: grid; gap: .3rem; }
.fact__label { font: 700 .64rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.fact__value { font: 700 1.1rem/1.2 var(--font-body); font-variant-numeric: lining-nums tabular-nums; }
/* Hero (Startseite) – dunkelblau, mit Glanzlichtern und Linienzeichnung */
.hero { position: relative; display: grid; align-items: center; padding: calc(var(--header-h) + 2.5rem) 0 7rem; overflow: hidden; min-height: 92svh; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: .55; }
.hero__glow--gold { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8vw; top: -10vh; background: radial-gradient(closest-side, rgba(201, 162, 74, .35), transparent 70%); }
.hero__glow--blue { width: 50vw; height: 50vw; max-width: 720px; max-height: 720px; left: -15vw; bottom: -20vh; background: radial-gradient(closest-side, rgba(47, 82, 144, .55), transparent 70%); }
.hero__grid { position: relative; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.hero .display-1 { max-width: 13ch; margin-block: 1.25rem; color: #fff; }
.hero .lead { max-width: 52ch; }
.hero__facts { display: flex; flex-wrap: wrap; gap: .9rem 2rem; margin-top: 2.25rem; font-size: .9rem; color: var(--ink-soft); }
.hero__facts li { display: inline-flex; align-items: center; gap: .55rem; list-style: none; }
.hero__facts .ico { color: var(--gold-2); }
.hero__art { position: relative; width: min(100%, 30rem); aspect-ratio: 1; margin-inline: auto; }
.hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__art img { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 50%; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 10px rgba(255, 255, 255, .04); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .5rem; font: 700 .6rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; }
.hero__scroll::after { content: ""; width: 1px; height: 2.6rem; background: linear-gradient(var(--gold), transparent); }
@media (max-width: 1023px) { .hero { min-height: auto; padding-bottom: 6rem; } .hero__art { width: min(60%, 18rem); } .hero__scroll { display: none; } }
/* Schnellzugriff-Leiste: vier Kacheln, die aus dem dunkelblauen Kopf in die helle Fläche ragen */
.quick-bar { position: relative; z-index: 3; margin-top: -3.5rem; }
.quick-bar__grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .quick-bar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.quick { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; padding: 1.05rem 1.15rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); text-decoration: none; color: var(--navy-900); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; --ink: #10203a; --ink-soft: #4a5a75; --ink-mute: #5d697d; }
.quick:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(201, 162, 74, .5); }
.quick__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: var(--navy-900); color: var(--gold-2); }
.quick__icon .ico { width: 1.25rem; height: 1.25rem; }
.quick--main .quick__icon { background: var(--gold); color: var(--navy-900); }
.quick__body { display: block; min-width: 0; }
.quick__label { display: block; font: 700 .62rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.quick__value { display: block; margin-top: .3rem; font: 700 1rem/1.2 var(--font-body); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); white-space: nowrap; }
.quick .open-badge { margin-top: .35rem; font-size: .76rem; }
@media (max-width: 640px) {
.quick { grid-template-columns: 1fr; gap: .55rem; padding: .85rem .9rem; }
.quick__icon { width: 2.4rem; height: 2.4rem; }
.quick__value { font-size: clamp(.78rem, 3.6vw, .95rem); letter-spacing: 0; }
.quick .open-badge { font-size: .7rem; white-space: normal; }
.quick .open-badge__text { overflow-wrap: anywhere; }
}
.page-start .hero__scroll { display: none; } /* die Schnellzugriff-Leiste übernimmt den Übergang */
/* Kacheln (Leistungen) */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.tile { position: relative; display: grid; gap: .55rem; align-content: start; padding: 1.5rem 1.4rem 1.3rem; min-height: 13.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .3s, background .3s; transform-style: preserve-3d; }
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgba(201, 162, 74, .55); }
.tile__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: .5rem; border-radius: .85rem; background: var(--navy-900); color: var(--gold-2); transition: background .4s, transform .5s var(--ease-out); }
.tile__icon .ico { width: 1.35rem; height: 1.35rem; }
.tile:hover .tile__icon { background: var(--gold); color: var(--navy-900); transform: rotate(-6deg); }
.tile__num { position: absolute; top: 1.2rem; right: 1.3rem; font: 700 .72rem/1 var(--font-body); letter-spacing: .14em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.tile__title { font: 700 1.08rem/1.25 var(--font-body); letter-spacing: -.01em; color: var(--ink); }
.tile__text { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.tile__arrow { position: absolute; right: 1.15rem; bottom: 1.1rem; color: var(--gold-deep); opacity: 0; transform: translate(-6px, 6px); transition: opacity .35s, transform .45s var(--ease-out); }
.tile:hover .tile__arrow { opacity: 1; transform: none; }
.is-dark .tile { background: rgba(255, 255, 255, .05); }
/* Glaskarten auf Dunkelblau */
.glass { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .4s, border-color .4s, transform .5s var(--ease-out); }
.glass:hover { background: rgba(255, 255, 255, .085); border-color: rgba(227, 195, 111, .45); }
.glass-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .glass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.glass--pad { padding: clamp(1.4rem, 3vw, 2.1rem); }
.glass__num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--gold); color: var(--navy-900); font: 700 .85rem/1 var(--font-body); font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.glass h3 { color: #fff; }
.glass p { color: var(--ink-soft); margin-top: .5rem; text-wrap: pretty; }
/* Karten */
.card { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s, background .4s; }
.card--link:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgba(201, 162, 74, .55); }
.card--sand { background: var(--paper-2); border-color: transparent; }
.card--navy { background: var(--navy-900); color: #f3f6fb; border-color: transparent; --ink: #f3f6fb; --ink-soft: rgba(243, 246, 251, .74); --ink-mute: rgba(243, 246, 251, .58); --gold-deep: var(--gold-2); --gold-ink: var(--gold-2); --line: rgba(255, 255, 255, .12); }
.card--flat { border: 0; background: transparent; padding: 0; }
.card__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: .6rem; border-radius: .85rem; background: var(--navy-900); color: var(--gold-2); transition: background .4s, color .4s; }
.card__icon .ico { width: 1.3rem; height: 1.3rem; }
.card--link:hover .card__icon { background: var(--gold); color: var(--navy-900); }
.card__num { font: 700 1.6rem/1 var(--font-body); color: var(--gold); margin-bottom: .4rem; font-variant-numeric: tabular-nums; }
.card__text { color: var(--ink-soft); font-size: .95rem; text-wrap: pretty; }
.card .link { margin-top: auto; padding-top: .9rem; }
.card__media { margin: -1.75rem -1.75rem 1.25rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16/10; background: var(--paper-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card--link:hover .card__media img { transform: scale(1.05); }
/* Leistungs-Zeilen (Seite Leistungen) */
.service { position: relative; display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.service:target { background: linear-gradient(90deg, var(--gold-soft), transparent 60%); }
@media (min-width: 900px) {
.service { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
.service--reverse .service__media { order: 2; }
}
.service__num { font: 700 clamp(2rem, 4vw, 3rem)/1 var(--font-body); color: var(--gold); opacity: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.service__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.service__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .85rem; background: var(--navy-900); color: var(--gold-2); }
.service__body .display-2 { margin-bottom: 1.1rem; }
.service__media .frame { aspect-ratio: 5/4; border-radius: var(--radius-lg); }
.service__media--empty { display: grid; place-items: center; aspect-ratio: 5/4; border-radius: var(--radius-lg); background: var(--paper-2); color: var(--gold); }
.service__media--empty .ico { width: 4rem; height: 4rem; opacity: .7; }
/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; width: max-content; animation: bk-marquee var(--mq-dur, 50s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 2rem; padding-right: 2rem; font: 600 clamp(.95rem, 1.3vw, 1.1rem)/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.marquee__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
@keyframes bk-marquee { to { transform: translateX(-50%); } }
html:not(.motion) .marquee__track { animation: none; }
.strip { padding-block: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); overflow: hidden; max-width: 100vw; }
/* Zitate, Bewertungen */
.quote { position: relative; font: 500 clamp(1.3rem, 2.3vw, 1.9rem)/1.35 var(--font-display); font-style: italic; letter-spacing: -.005em; text-wrap: balance; }
.quote .ico { width: 1.8rem; height: 1.8rem; color: var(--gold); margin-bottom: .8rem; }
.quote__by { display: block; margin-top: 1rem; font: 700 .7rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); font-style: normal; }
.quote--sm { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.stars { display: inline-flex; gap: .15rem; color: var(--gold); }
.stars .ico { width: 1rem; height: 1rem; }
.reviews { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.review { display: flex; flex-direction: column; gap: .9rem; margin: 0; padding: 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .5s var(--ease-out), box-shadow .5s; }
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.review__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.review__src { display: inline-flex; align-items: center; gap: .4rem; font: 700 .64rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.review__text { margin: 0; font: 400 1rem/1.55 var(--font-body); color: var(--ink); text-wrap: pretty; }
.review__meta { display: flex; align-items: center; gap: .75rem; margin-top: auto; font-size: .85rem; color: var(--ink-soft); }
.review__meta strong { color: var(--ink); font-weight: 700; }
.avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--navy-900); color: var(--gold-2); font: 700 .95rem/1 var(--font-body); }
.review.is-extra { display: none; }
.reviews.is-expanded .review.is-extra { display: flex; }
.rating { display: inline-flex; align-items: center; gap: .9rem; padding: .8rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-decoration: none; color: inherit; transition: border-color .3s, box-shadow .5s, transform .5s var(--ease-out); }
.rating:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.rating__value { font: 800 1.5rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.rating__label { font-size: .8rem; color: var(--ink-soft); }
/* Statistik */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: grid; gap: .35rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.stat__value { font: 800 clamp(2rem, 3.6vw, 2.9rem)/1 var(--font-body); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--navy-900); }
.stat__value small { font-size: .45em; color: var(--gold-ink); margin-left: .15em; font-weight: 700; }
.stat__label { font: 700 .66rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.is-dark .stat__value { color: #fff; }
/* Schritte */
.steps { position: relative; display: grid; gap: 1.25rem; list-style: none; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; display: grid; gap: .8rem; align-content: start; padding: 1.75rem 1.6rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.step__num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--gold); color: var(--navy-900); font: 800 .85rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.step__icon { position: absolute; top: 1.5rem; right: 1.5rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .85rem; background: var(--paper-2); color: var(--navy-900); }
.is-dark .step__icon { background: var(--paper-3); color: var(--gold-2); }
.step h3 { margin-top: .4rem; }
.step p { color: var(--ink-soft); text-wrap: pretty; }
.steps__line { display: none; }
@media (min-width: 900px) { .steps__line { display: block; position: absolute; top: 2.95rem; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform-origin: left center; z-index: 1; pointer-events: none; } }
/* Akkordeon */
.acc { border-top: 1px solid var(--line); }
.acc:last-child { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.2rem 0; font: 600 1.05rem/1.35 var(--font-body); transition: color .3s; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--gold-deep); }
.acc__icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .6rem; border: 1px solid var(--line-strong); transition: transform .5s var(--ease-out), background .3s, border-color .3s, color .3s; }
.acc__icon .ico { width: 1rem; height: 1rem; }
.acc.is-open .acc__icon, .acc[open]:not(.is-closing) .acc__icon { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.acc__body { overflow: hidden; }
.acc__inner { padding: 0 0 1.4rem; max-width: 66ch; color: var(--ink-soft); text-wrap: pretty; }
.acc__inner a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.acc-box { padding: .25rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.acc-box .acc:first-child { border-top: 0; }
.acc-box .acc:last-child { border-bottom: 0; }
/* Gestapelte Karten (z. B. Jobs) */
.stack-cards { display: grid; gap: 1rem; }
.stack-card { position: sticky; top: calc(var(--header-h) + 1.5rem + var(--i, 0) * 1rem); transform-origin: center top; display: grid; gap: 1rem; align-content: start; min-height: 12rem; padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: 0 -10px 30px -22px rgba(16, 32, 58, .3); }
.stack-card:nth-child(2n) { background: var(--paper-2); }
.stack-card__num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--gold); color: var(--navy-900); font: 800 .85rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.stack-card p { font-size: 1rem; line-height: 1.6; max-width: 54ch; color: var(--ink-soft); }
@media (min-width: 900px) { .stack-card { grid-template-columns: 4rem 1fr; gap: 1.25rem 2rem; align-items: start; } }
/* Öffnungszeiten, Status */
.hours { display: grid; margin: 0; }
.hours__row { display: flex; justify-content: space-between; gap: 1.25rem; padding: .7rem .7rem; margin: 0 -.7rem; border-bottom: 1px solid var(--line); font-size: .95rem; border-radius: .5rem; }
.hours__row dt { font-weight: 600; flex: 1; }
.hours__row dd { margin: 0; flex: none; color: var(--ink-soft); text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; font-weight: 500; }
.hours__sep { color: var(--gold); padding-inline: .2rem; }
.hours__closed { color: var(--ink-mute); }
.hours__row.is-today { background: var(--gold-soft); border-bottom-color: transparent; }
.hours__row.is-today dt::after { content: "Heute"; margin-left: .6rem; padding: .2rem .45rem; border-radius: .4rem; background: var(--gold); color: var(--navy-900); font: 800 .56rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }
.hours__row.is-today dd { color: var(--ink); font-weight: 700; }
@media (max-width: 420px) { .hours__row { font-size: .88rem; gap: .75rem; } .hours__row dd { white-space: normal; max-width: 9.5rem; } .hours__sep { display: block; height: 0; overflow: hidden; } }
.open-badge { display: inline-flex; align-items: center; gap: .6rem; font: 700 .8rem/1.3 var(--font-body); color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.open-badge__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink-mute); box-shadow: 0 0 0 3px rgba(123, 136, 157, .2); flex: none; }
.open-badge.is-open .open-badge__dot { background: var(--green); box-shadow: 0 0 0 3px rgba(47, 143, 91, .25); animation: bk-pulse 2.4s ease-in-out infinite; }
.open-badge.is-open { color: var(--ink); }
@keyframes bk-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(47, 143, 91, .25); } 50% { box-shadow: 0 0 0 7px rgba(47, 143, 91, .08); } }
/* Kontakt-Kacheln – Nummern und Adressen groß und klar */
.contact-tiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.contact-tile { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-decoration: none; color: inherit; transition: transform .5s var(--ease-out), box-shadow .5s, border-color .3s; }
.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: rgba(201, 162, 74, .55); }
.contact-tile > .ico { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; padding: .7rem; border-radius: .8rem; background: var(--navy-900); color: var(--gold-2); }
.contact-tile__label { font: 700 .62rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); align-self: end; }
.contact-tile__value { font: 700 1.05rem/1.3 var(--font-body); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; overflow-wrap: anywhere; min-width: 0; align-self: start; color: var(--ink); }
.contact-tile { min-width: 0; }
@media (max-width: 400px) { .contact-tile__value { font-size: .95rem; } }
/* Chips, Tags, Hinweise, Listen */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); font: 600 .82rem/1 var(--font-body); text-decoration: none; color: var(--ink-soft); transition: border-color .3s, background .3s, color .3s; }
.chip:hover, .chip.is-active { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
.chip--accent { border-color: var(--gold); color: var(--ink); }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: .4rem; background: var(--gold); color: var(--navy-900); font: 800 .58rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; }
.tag--outline { background: transparent; border: 1px solid var(--gold); color: var(--gold-ink); }
.notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.2rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); background: var(--paper-2); font-size: .92rem; color: var(--ink-soft); text-wrap: pretty; }
.notice .ico { color: var(--gold-deep); margin-top: .15rem; }
.notice a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.list-check { list-style: none; display: grid; gap: .75rem; }
.list-check li { display: flex; gap: .8rem; align-items: flex-start; text-wrap: pretty; }
.list-check .ico { color: var(--navy-900); background: var(--gold); border-radius: .35rem; padding: .15rem; width: 1.2rem; height: 1.2rem; margin-top: .2rem; }
.is-dark .list-check .ico { color: var(--navy-900); }
.list-dots { list-style: none; display: grid; gap: .55rem; }
.list-dots li { position: relative; padding-left: 1.25rem; }
.list-dots li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pill-list { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; }
.pill-list li { padding: .6rem 1rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; }
.feature { display: grid; gap: .6rem; align-content: start; }
.feature--row { grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center; }
.feature--row .feature__icon { grid-row: 1 / span 2; }
.feature__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .85rem; background: var(--navy-900); color: var(--gold-2); }
.feature p { color: var(--ink-soft); text-wrap: pretty; }
.timeline { display: grid; gap: 0; }
.timeline__item { position: relative; display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.5rem 0 1.5rem 1.75rem; border-left: 2px solid var(--line); }
.timeline__item::before { content: ""; position: absolute; left: -6px; top: 2.05rem; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--paper); }
.timeline__time { font: 800 1.2rem/1.2 var(--font-body); color: var(--gold-deep); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .timeline__item { grid-template-columns: 1fr; gap: .5rem; } }
/* Prosa (Rechtstexte) */
.prose { max-width: 72ch; }
.prose h2 { font: 500 clamp(1.6rem, 2.4vw, 2.1rem)/1.2 var(--font-display); margin: 2.5rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 600 1.15rem/1.3 var(--font-body); margin: 1.6rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-soft); text-wrap: pretty; }
.prose p + p { margin-top: .9em; }
.prose ul { padding-left: 1.2rem; display: grid; gap: .4rem; margin-top: .75rem; }
.prose a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .22em; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose address { font-style: normal; color: var(--ink-soft); }
.prose .notice { margin-top: 1.25rem; }
/* Karte mit Einwilligung */
.map { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-2); aspect-ratio: 16/9; min-height: 20rem; isolation: isolate; max-width: 100%; }
@media (max-width: 720px) { .map { aspect-ratio: 4/3; min-height: 0; } } /* min-height + Seitenverhältnis machten die Karte auf Handys breiter als den Bildschirm */
.map__canvas { position: absolute; inset: 0; z-index: 0; }
.map__canvas .leaflet-tile-pane { filter: saturate(.6) contrast(.95) brightness(1.02); }
.map__consent { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1.5rem; text-align: center; background: var(--paper-2); }
.map__consent-inner { display: grid; gap: .9rem; justify-items: center; max-width: 28rem; }
.map__consent .ico--lg { color: var(--gold-deep); width: 2.2rem; height: 2.2rem; }
.map__consent p { font-size: .86rem; color: var(--ink-soft); }
.map__consent a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.map.is-loaded .map__consent { display: none; }
.map-pin { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #fff inset, 0 0 0 7px rgba(201, 162, 74, .3); }
.leaflet-container { font-family: var(--font-body) !important; }
/* CTA-Band */
.band { position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 70% at 85% 15%, rgba(201, 162, 74, .2), transparent 60%), radial-gradient(40% 55% at 10% 90%, rgba(47, 82, 144, .35), transparent 60%); }
.band__inner { position: relative; display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .band__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .band__inner .actions { justify-content: flex-end; } }
.band .display-2 { max-width: 18ch; color: #fff; }
.band--final { border-bottom: 1px solid rgba(227, 195, 111, .35); } /* Band geht nahtlos in den dunklen Fuß über – Goldlinie als Trenner */
/* ---------- 8 Formulare ---------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font: 700 .7rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.field label .req { color: var(--gold-ink); }
.field input, .field select, .field textarea {
width: 100%; padding: .85rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
transition: border-color .3s, box-shadow .3s;
}
.is-dark .field input, .is-dark .field select, .is-dark .field textarea { background: rgba(255, 255, 255, .06); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.1rem; }
.field select option { color: #10203a; background: #fff; }
.field__hint { font-size: .8rem; color: var(--ink-mute); }
.form__note { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: var(--ink-mute); }
.form__note .ico { color: var(--gold-deep); flex: none; margin-top: .15rem; }
.form__done { display: flex; gap: .8rem; align-items: flex-start; padding: 1.1rem 1.4rem; border-radius: var(--radius-sm); background: var(--gold-soft); border: 1px solid var(--gold); font-size: .95rem; }
.form__done > .ico { flex: none; width: 1.5rem; height: 1.5rem; padding: .25rem; border-radius: .4rem; background: var(--gold); color: var(--navy-900); }
.form__done strong { color: var(--ink); }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .85rem; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--gold-deep); }
.check input.is-invalid { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
.check a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn.is-busy { opacity: .7; pointer-events: none; }
.btn.is-busy .ico { animation: bk-busy 1s linear infinite; }
@keyframes bk-busy { to { transform: rotate(360deg); } }
.form__done a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.form-card { padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.is-dark .form-card { background: rgba(255, 255, 255, .05); }
/* ---------- 9 Fuß & Leisten ---------- */
.footer { position: relative; overflow: hidden; padding: var(--section) 0 2rem; background: var(--navy-950); }
.footer__grid { position: relative; z-index: 1; display: grid; gap: 2.75rem 2.5rem; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.25fr; } }
.footer__brand { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.footer__text { color: var(--ink-soft); max-width: 34ch; text-wrap: pretty; }
.footer__col { display: grid; gap: 1rem; align-content: start; }
.footer__links { list-style: none; display: grid; gap: .5rem; }
.footer__links a { display: inline-flex; align-items: center; gap: .55rem; min-height: 1.5rem; font-size: .95rem; text-decoration: none; color: var(--ink-soft); transition: color .3s, padding-left .3s; }
.footer__links a:hover { color: #fff; padding-left: .25rem; }
.footer__links a.link { color: #fff; padding-left: 0; }
.footer__links .ico { color: var(--gold-2); }
.footer__links--contact a { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.footer__address { font-style: normal; color: var(--ink-soft); line-height: 1.6; }
.footer__hours { font-size: .85rem; color: var(--ink-mute); font-variant-numeric: lining-nums tabular-nums; }
.footer__bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-mute); }
.footer__legal { display: inline-flex; gap: 1.5rem; }
.footer__legal a { display: inline-block; padding-block: .2rem; text-decoration: none; color: var(--ink-soft); }
.footer__legal a:hover { color: #fff; }
.footer__wordmark { position: absolute; left: 0; right: 0; bottom: -.18em; z-index: 0; text-align: center; font: 500 clamp(5rem, 22vw, 20rem)/1 var(--font-display); letter-spacing: -.03em; color: rgba(255, 255, 255, .03); pointer-events: none; user-select: none; }
.sticky-cta {
position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 90; display: flex; gap: .35rem; padding: .35rem;
border-radius: 999px; background: rgba(15, 26, 46, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .08);
transform: translateY(140%); transition: transform .55s var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .85rem .5rem; border-radius: 999px; color: #f3f6fb; font: 700 .78rem/1 var(--font-body); text-decoration: none; }
.sticky-cta a .ico { width: 1.05rem; height: 1.05rem; }
.sticky-cta__main { background: var(--gold); color: var(--navy-900) !important; }
@media (min-width: 1100px) { .sticky-cta { display: none; } }
/* ---------- 9b Neue Bausteine (Oktober 2026, Mehrseiten-Ausbau) ---------- */
/* KI-Kennzeichnung: kleiner Hinweis unten rechts im Bildrahmen (.frame) – Pflichtangabe für KI-erzeugte Symbolbilder */
.ki-hinweis { position: absolute; right: .55rem; bottom: .55rem; z-index: 3; padding: .28rem .5rem; border-radius: .4rem; background: rgba(10, 18, 34, .62); color: rgba(255, 255, 255, .85); font: 600 .58rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.frame > [data-zoom] > .ki-hinweis, .frame > [data-parallax] > .ki-hinweis { transform-origin: right bottom; }
img + .ki-hinweis:not(.frame *) { position: static; display: inline-block; margin-top: .4rem; background: var(--paper-2); color: var(--ink-mute); }
/* Brotkrumen unter dem Seitenkopf */
.crumbs { background: var(--white); border-bottom: 1px solid var(--line); }
.crumbs__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .35rem; padding-block: .8rem; font-size: .8rem; color: var(--ink-soft); }
.crumbs__list li { display: inline-flex; align-items: center; gap: .35rem; }
.crumbs__list a { text-decoration: none; color: var(--ink-soft); font-weight: 600; }
.crumbs__list a:hover { color: var(--gold-deep); }
.crumbs__list li[aria-current] { color: var(--ink); font-weight: 600; }
.crumbs__sep { width: .8em; height: .8em; transform: rotate(-90deg); color: var(--ink-mute); }
/* Kleines Ausklapp-Menü (Nachbehandlung) in der Kopfzeile */
.nav__item--sub { position: relative; }
.mega--sub { left: 50%; width: 22rem; padding: .75rem; }
.sub-list { list-style: none; display: grid; gap: .15rem; }
.sub-list a { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; padding: .7rem .8rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font: 600 .92rem/1.2 var(--font-body); transition: background .25s; }
.sub-list a small { display: block; margin-top: .22rem; font: 500 .74rem/1.3 var(--font-body); color: var(--ink-soft); }
.sub-list a .ico { width: 1.15rem; height: 1.15rem; color: var(--gold-deep); }
.sub-list a:hover, .sub-list a[aria-current] { background: var(--paper-2); }
.sub-list__all { border-top: 1px solid var(--line); margin-top: .35rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; }
.menu__groups--one { grid-template-columns: 1fr; }
/* Kontakt-Pop-up (dialog) */
.modal { width: min(42rem, calc(100vw - 2rem)); max-height: min(92svh, 60rem); margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--white); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(10, 18, 34, .7); overflow: auto; overscroll-behavior: contain; }
.modal::backdrop { background: rgba(10, 18, 34, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__inner { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); }
.modal__close { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); transition: background .3s, border-color .3s, transform .4s var(--ease-out); }
.modal__close:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-900); transform: rotate(90deg); }
.modal__close .ico { width: 1.1rem; height: 1.1rem; }
.modal__direct { display: flex; flex-wrap: wrap; gap: .5rem; }
.modal .form { gap: 1rem; }
.modal .field textarea { min-height: 6.5rem; }
html.motion .modal[open] { animation: bk-modal-in .45s var(--ease-expo) both; }
html.motion .modal[open]::backdrop { animation: bk-fade-in .35s ease both; }
@keyframes bk-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .modal { width: calc(100vw - 1rem); max-height: 94svh; border-radius: var(--radius); } .modal__inner { padding: 1.4rem 1.1rem 1.6rem; } .modal .form__row { grid-template-columns: 1fr; } }
/* Formular: Fehlermeldung, ungültige Felder */
.form__error { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(178, 74, 60, .08); border: 1px solid rgba(178, 74, 60, .35); color: var(--red); font-size: .88rem; font-weight: 600; }
.form__error .ico { flex: none; margin-top: .1rem; }
.field .is-invalid { border-color: var(--red); box-shadow: 0 0 0 4px rgba(178, 74, 60, .12); }
/* Inhaltsverzeichnis für lange Unterseiten (Sprungmarken) */
.toc { display: flex; flex-wrap: wrap; gap: .5rem; }
.toc a { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); font: 600 .8rem/1 var(--font-body); color: var(--ink-soft); text-decoration: none; transition: border-color .3s, color .3s, background .3s; }
.toc a:hover { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
.toc--bar { position: sticky; top: var(--header-h); z-index: 20; padding-block: .6rem; background: rgba(247, 248, 251, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.toc--bar .toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.toc--bar .toc::-webkit-scrollbar { display: none; }
.toc--bar .toc a { flex: none; }
/* Personen (Team) */
.people { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.person { display: grid; gap: 1rem; align-content: start; padding: 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; }
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(201, 162, 74, .5); }
.person__media { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.person__media img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font: 700 1.15rem/1.25 var(--font-body); letter-spacing: -.01em; color: var(--ink); }
.person__role { margin-top: .25rem; font: 700 .66rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.person__text { color: var(--ink-soft); font-size: .95rem; text-wrap: pretty; }
.person__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.person__tags li { list-style: none; padding: .35rem .65rem; border-radius: 999px; background: var(--paper-2); font: 600 .74rem/1 var(--font-body); color: var(--ink-soft); }
.person--lead { grid-column: 1 / -1; }
@media (min-width: 900px) { .person--lead { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; align-items: center; padding: 1.75rem; } .person--lead .person__media { aspect-ratio: 4/5; } }
/* Platzhalter für Fotos, die noch nachgeliefert werden (Team, Räume) – Emblem-Ringe auf Dunkelblau */
.ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); color: var(--gold-2); }
.ph__inner { display: grid; justify-items: center; gap: .55rem; text-align: center; padding: 1rem; }
.ph__initials { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 1px solid rgba(201, 162, 74, .55); background: rgba(255, 255, 255, .04); font: 500 1.7rem/1 var(--font-display); color: #fff; }
.ph__label { font: 700 .58rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 246, 251, .55); }
.ph .ico { width: 2.2rem; height: 2.2rem; opacity: .8; }
/* Galerie (Räumlichkeiten) */
.gallery { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery__item--wide { grid-column: span 2; } .gallery__item--tall { grid-row: span 2; } }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 4/3; }
.gallery__item--tall { aspect-ratio: auto; min-height: 100%; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; padding: .4rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy-900); font: 700 .62rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
/* Tabellen (z. B. Phasen der Nachbehandlung) – auf Handys gestapelt, nie breiter als der Bildschirm */
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th, .tbl td { padding: .9rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl th { font: 700 .66rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-2); }
.tbl td { color: var(--ink-soft); }
.tbl td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
.tbl ul { padding-left: 1.1rem; display: grid; gap: .3rem; list-style: disc; }
@media (max-width: 720px) {
.tbl thead { display: none; }
.tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
.tbl tr { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.tbl td { padding: .25rem 0; border: 0; }
.tbl td:first-child { white-space: normal; font-size: 1.05rem; margin-bottom: .3rem; }
.tbl td[data-l]::before { content: attr(data-l); display: block; font: 700 .62rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-top: .5rem; }
}
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Kennzahlen-Zeile (z. B. Richtwerte): nie aus dem Rahmen laufen */
.kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.kpi { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); min-width: 0; }
.kpi__value { display: block; font: 800 clamp(1.5rem, 4.5vw, 2.1rem)/1.05 var(--font-body); letter-spacing: -.02em; color: var(--navy-900); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.kpi__value small { font-size: .5em; color: var(--gold-deep); margin-left: .15em; }
.kpi__label { display: block; margin-top: .35rem; font: 700 .64rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.is-dark .kpi__value { color: #fff; }
/* Verwandte Seiten (am Ende der Unterseiten) */
.related { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
/* ---------- 10 Bewegung (nur wenn html.motion) ---------- */
html.motion [data-reveal], html.motion [data-reveal-group] > * { opacity: 0; }
html.motion [data-split] { opacity: 0; }
/* Seitenkopf-Einstieg in reinem CSS (seit 18.10.2026): wartet nicht auf JavaScript, damit Überschrift und Einleitung –
das größte sichtbare Element (LCP) – sofort nach dem Stylesheet erscheinen. Reihenfolge wie vorher: Titel, dann die
data-hero-Elemente nacheinander, Medien leicht vergrößert einblendend. */
@keyframes bk-hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bk-hero-media { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
html.motion [data-hero-root] [data-hero-title] { opacity: 0; animation: bk-hero-in .9s var(--ease-out) both; }
html.motion [data-hero-root] [data-hero] { opacity: 0; animation: bk-hero-in .8s var(--ease-out) .15s both; }
html.motion [data-hero-root] [data-hero]:nth-child(n+2) { animation-delay: .23s; }
html.motion [data-hero-root] [data-hero]:nth-child(n+3) { animation-delay: .31s; }
html.motion [data-hero-root] [data-hero]:nth-child(n+4) { animation-delay: .39s; }
html.motion [data-hero-root] [data-hero]:nth-child(n+5) { animation-delay: .47s; }
html.motion [data-hero-root] [data-hero]:nth-child(n+6) { animation-delay: .55s; }
html.motion [data-hero-root] [data-hero-media] { opacity: 0; animation: bk-hero-media 1.1s var(--ease-out) .1s both; }
html.motion .ring { animation: bk-spin 70s linear infinite; }
html.motion .ring--dashed { animation-duration: 110s; animation-direction: reverse; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
html.motion .hero__glow--gold { animation: bk-drift-a 18s ease-in-out infinite alternate; }
html.motion .hero__glow--blue { animation: bk-drift-b 22s ease-in-out infinite alternate; }
@keyframes bk-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6%, 8%) scale(1.12); } }
@keyframes bk-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(8%, -6%) scale(1.1); } }
html.motion .hero__scroll::after { animation: bk-drop 2.4s var(--ease-in-out) infinite; }
@keyframes bk-drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
html.motion [data-draw-path] { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
@keyframes bk-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ---------- 11 Utilities ---------- */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; } .mt-5 { margin-top: 4.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 2rem; } .mb-4 { margin-bottom: 3rem; } .mb-5 { margin-bottom: 4.5rem; }
.hide-mobile { display: none !important; } @media (min-width: 900px) { .hide-mobile { display: initial !important; } .hide-desktop { display: none !important; } }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
/* ---------- 12 Druck ---------- */
@media print {
.header, .menu, .sticky-cta, .progress, .intro, .btn, .hero__scroll, .hero__glow { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; }
.is-dark, .page-head, .hero { background: #fff; color: #000; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}
/* ===== Seite: jobs.css ===== */
/* Jobs-Seite (/jobs) – nur Tokens und vorhandene Klassen. Präfix .jobs-
1) Vorteilskarten: Goldnummer links, Symbolfeld rechts in einer Zeile, darunter Titel und Text.
2) Bewerbungsschritte auf Dunkelblau: Symbolfeld sonst unsichtbar (gleiche Farbe wie die Karte).
3) „Fragen vor der Bewerbung?“: dunkle Karte, Text links, Knöpfe rechts; Inhalt über dem Band-Glanz. */
.page-jobs .jobs-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.page-jobs .jobs-card__top .card__num, .page-jobs .jobs-card__top .card__icon { margin-bottom: 0; }
.page-jobs .is-dark .step__icon { background: var(--paper-3); color: var(--gold-2); }
.page-jobs .jobs-ask { display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius-lg); }
.page-jobs .jobs-ask > * { position: relative; min-width: 0; }
.page-jobs .jobs-ask .muted { max-width: 52ch; }
@media (min-width: 900px) {
.page-jobs .jobs-ask { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; }
.page-jobs .jobs-ask .actions { justify-content: flex-end; }
}
/* ===== Seite: kontakt.css ===== */
/* Kontaktseite – zwei kleine Ergänzungen, nur Tokens/vorhandene Klassen.
1) Die vier Kontakt-Kacheln stehen in der rechten Editorial-Spalte: dort als ruhiges 2×2-Raster
(das automatische Raster von .contact-tiles ergäbe in dieser Breite 3 + 1).
2) In der Öffnungszeiten-Tabelle passen auf schmalen Handys „Montag“ + Marke „Heute“ + die fetten Zeiten
nicht in eine Zeile – die Marke rutscht dort unter den Tag. (Vorschlag für styles.css, falls zentral gewünscht.) */
@media (min-width: 640px) {
.page-kontakt .editorial .contact-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.page-kontakt .hours__row.is-today dt::after { display: block; width: max-content; margin: .35rem 0 0; }
}
/* ===== Seite: leistung-physikalisch.css ===== */
/* Gebündelte Leistungsseite „Physikalische Therapie“ (/leistungen/physikalische-therapie):
Sprungleiste unter den Brotkrumen und drei Anwendungs-Abschnitte (.leist-sub) mit Sprungmarken.
Nur Tokens aus styles.css, keine neuen Farben. */
.leist-toc { padding-block: .9rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.leist-toc__label { display: block; margin-bottom: .6rem; font: 700 .62rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.leist-toc .toc a .ico { width: 1em; height: 1em; color: var(--gold-deep); }
.leist-sub + .leist-sub { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.leist-sub__aside { align-self: start; }
.leist-sub__aside .list-check li { font-size: .95rem; }
.leist-sub__aside .notice { margin-top: 1.25rem; }
.leist-sub .frame { width: min(100%, 34rem); margin-inline: auto; }
/* ===== Seite: leistung.css ===== */
/* Leistungs-Einzelseiten (/leistungen/) – gemeinsames Seiten-CSS, nur Tokens und vorhandene Klassen.
Seitenkopf mit Bild rechts, Kurzfassung als dunkle Karte, Glaskarten mit Symbol statt Nummer. */
.leist-head { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .leist-head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; } }
.leist-head__media { width: min(100%, 26rem); margin-inline: auto; }
@media (max-width: 899px) { .leist-head__media { width: min(100%, 20rem); } }
.leist-summary { align-self: start; }
.leist-summary .list-check li { font-size: .95rem; }
.leist-summary .list-check .ico { background: var(--gold); }
.glass__num .ico { width: 1.1rem; height: 1.1rem; }
.section--tint .card:not(.card--navy) { background: var(--white); }
/* Gebündelte Seite (Physikalische Therapie): Anwendungen als Abschnitte mit Sprungmarken */
.leist-sub { scroll-margin-top: calc(var(--header-h) + 1rem); }
/* ===== Seite: leistungen.css ===== */
/* Seite Leistungen: klebende Schnellnavigation (Handy/Tablet) bzw. Inhaltsverzeichnis (Desktop),
Platzhalter für Leistungen ohne Foto, Vorstellung eines Zusatzangebots (nur wenn in site.json freigegeben). */
/* Schnellnavigation – unter 1100 px eine wischbare Zeile, die unter der Kopfzeile klebt */
.leist-nav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(247, 248, 251, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: top .55s var(--ease-out); }
body:has(.header.is-hidden) .leist-nav { top: 0; } /* rutscht nach oben, wenn sich die Kopfzeile beim Runterscrollen versteckt */
.leist-nav__inner { display: block; }
.leist-nav__label { display: none; }
.leist-nav__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: .7rem var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.leist-nav__chips::-webkit-scrollbar { display: none; }
.leist-nav .chip { flex: none; min-height: 2.6rem; padding-block: 0; scroll-snap-align: start; }
.leist-nav .chip .tag { padding: .22rem .45rem; }
@media (min-width: 1100px) {
.leist-nav { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; padding-block: 2.5rem 1rem; }
.leist-nav__inner { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.5rem; align-items: start; }
.leist-nav__label { display: inline-flex; margin-top: .8rem; }
.leist-nav__chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}
/* Vorstellung eines Zusatzangebots: Bild nicht breiter als 30 rem, mittig */
.leist-feature .frame { width: min(100%, 30rem); margin-inline: auto; }
/* Gruppen mit Karten (Bild oben, Text unten), jede Karte führt zur eigenen Leistungsseite */
.leist-groups { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.leist-group .section-head { margin-bottom: 1.5rem; }
.tiles--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.tile--service { padding: 0 0 1.3rem; min-height: 0; scroll-margin-top: calc(var(--header-h) + 4rem); overflow: hidden; }
.tile--service:target { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.tile__media { position: relative; display: block; aspect-ratio: 16/10; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--paper-2); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.tile--service:hover .tile__media img { transform: scale(1.05); }
.tile__media--empty { display: grid; place-items: center; background: radial-gradient(60% 55% at 50% 46%, rgba(201, 162, 74, .18), transparent 72%), var(--navy-900); color: var(--gold-2); }
.tile__media--empty .ico { width: 3.2rem; height: 3.2rem; opacity: .85; }
.tile--service .tile__icon { position: relative; left: auto; top: auto; margin: -1.45rem 0 0 1.2rem; box-shadow: 0 8px 20px -10px rgba(10, 18, 34, .6); border: 3px solid var(--white); }
.tile--service .tile__num { top: auto; bottom: 1.25rem; }
.tile--service .tile__title, .tile--service .tile__text, .tile--service .tile__more { margin-inline: 1.3rem; }
.tile--service .tile__title { margin-top: .5rem; }
.tile--service .tile__more { margin-top: .5rem; font-size: .82rem; }
.tile--service .tile__arrow { display: none; }
/* Schluss-Band: die lange Frage darf breiter laufen als 18 Zeichen */
.page-leistungen .band .display-2 { max-width: 26ch; }
/* ===== Seite: nachbehandlung.css ===== */
/* Nachbehandlung nach Gelenkersatz (/nachbehandlung, /nachbehandlung/knie-tep, /hueft-tep, /schulter-tep).
Seitenkopf mit Kurzfassung als Glaskarte, Bewegungsgrafik „Goldgravur mit Tiefe“ (Medaillon mit Gradskala,
reines CSS, Start per kleinem IntersectionObserver auf der Seite), Phasen-Zeitleiste, Phasentabelle in weißem
Rahmen, Warnhinweis, Quellenzeile. Nur Tokens aus styles.css. Ohne JavaScript, mit ?motion=0 und bei reduzierter
Bewegung ist alles statisch sichtbar: Gelenk in mittlerer Stellung, Zeitleiste komplett. Präfix .nb- */
/* ---------- Seitenkopf: Text links, Kurzfassung rechts ---------- */
.nb-head { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .nb-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.nb-head__aside .list-check { margin-top: 1rem; }
.nb-head__aside .list-check li { font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }
.nb-head__aside .list-check strong { color: #fff; font-weight: 700; }
.nb-head__aside .list-check .ico { margin-top: .25rem; }
/* ---------- Bewegungsgrafik „Goldgravur mit Tiefe“ (figure.nb-stage) ----------
Ein Medaillon wie ein Uhren-Zifferblatt: dunkelblaue Fläche mit Goldrand, davor die Gradskala (Bezel) als Goldring
mit Teilstrichen alle 5°/10° (Teilstriche = stroke-dasharray auf Kreisen mit pathLength=360, d. h. 1 Einheit = 1°),
in der Mitte das Gelenk als Goldgravur (Drehpunkt = Mittelpunkt 200/200, Bogen und Zeiger sind damit konzentrisch),
unten die Kartusche mit der laufenden Gradzahl. Vier Ebenen mit translateZ in einer perspektivischen Bühne, die
sich langsam neigt (Parallaxe); mit Maus zusätzlich leichte Neigung per Pointer (kleines Skript auf der Seite).
Ohne JavaScript, mit ?motion=0 und bei reduzierter Bewegung: Ruhelage in mittlerer Stellung (--a1).
Mit Bewegung: Ruhelage = Anfang (--a0), damit der Start nicht springt; Ablauf 0° → Richtwert 1 → Richtwert 2 und weich zurück (alternate).
Variablen je Seite (inline auf figure): --a0/--a1/--a2 (Winkel, im Uhrzeigersinn positiv), --d1/--d2/--dmax
(Bogen in Grad, ohne Einheit), --dur (Dauer). Skala: 0° unten (6 Uhr), im Uhrzeigersinn. */
.nb-stage { width: min(100%, 25rem); margin: 0 auto; perspective: 1100px;
/* Farben der Gravur bleiben auch auf Dunkelblau gleich (Tokens hier festgepinnt wie bei .card--navy) */
--paper: #f7f8fb; --paper-2: #eef2f8; --paper-3: #e2e8f2; --paper-deep: #d2dbe9; --white: #fff; }
.nb-stage__tilt { transform-style: preserve-3d; transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .8s var(--ease-out); will-change: transform; }
.nb-stage__sway { position: relative; aspect-ratio: 1 / 1; transform-style: preserve-3d; transform: rotateX(5deg) rotateY(-6deg); }
.nb-stage__sway > * { position: absolute; inset: 0; }
.nb-layer { display: block; width: 100%; height: 100%; overflow: visible; transform: translateZ(var(--z, 0px)); backface-visibility: hidden; }
.nb-layer--dial { --z: 0px; }
.nb-layer--joint { --z: 34px; }
.nb-layer--bezel { --z: 68px; }
.nb-layer--plaque { --z: 104px; }
.nb-glow { inset: 5%; border-radius: 50%; transform: translateZ(-50px);
background: radial-gradient(circle at 50% 45%, rgba(201, 162, 74, .28), rgba(201, 162, 74, 0) 70%);
box-shadow: 0 34px 54px -24px rgba(10, 18, 34, .6), 0 0 72px -10px rgba(201, 162, 74, .42); }
.nb-stage figcaption { margin-top: 1.1rem; text-align: center; font-size: .82rem; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
/* Zifferblatt */
.nb-stage .nb-face1 { stop-color: var(--navy-600); } .nb-stage .nb-face2 { stop-color: var(--navy-800); } .nb-stage .nb-face3 { stop-color: var(--navy-950); }
.nb-stage .nb-g1 { stop-color: var(--gold-2); } .nb-stage .nb-g2 { stop-color: var(--gold); } .nb-stage .nb-g3 { stop-color: var(--gold-deep); }
.nb-stage .nb-b1 { stop-color: var(--white); } .nb-stage .nb-b2 { stop-color: var(--paper-2); } .nb-stage .nb-b3 { stop-color: var(--paper-deep); }
.nb-stage .nb-m1 { stop-color: var(--white); } .nb-stage .nb-m2 { stop-color: var(--paper-deep); } .nb-stage .nb-m3 { stop-color: var(--ink-mute); }
.nb-stage .nb-face { fill: url(#nbFace); }
.nb-stage .nb-face-edge { fill: none; stroke: var(--navy-950); stroke-width: 3; }
.nb-stage .nb-guill { fill: none; stroke: var(--gold-2); stroke-opacity: .07; stroke-width: 1; }
.nb-stage .nb-sun { fill: none; stroke: var(--gold-2); stroke-opacity: .05; stroke-width: 1; }
/* Gravur: Knochen (helle Füllung, Goldlinie), Implantat (Metall), Inlay (Gold-Soft) */
.nb-stage .nb-bone { fill: url(#nbBone); stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke fill; }
.nb-stage .nb-bone--thin { stroke-width: 1.2; }
.nb-stage .nb-bone-shade { fill: var(--navy-950); opacity: .55; }
.nb-stage .nb-bone-edge { fill: none; stroke: var(--paper-deep); stroke-width: 1; opacity: .9; }
.nb-stage .nb-metal { fill: url(#nbMetal); stroke: var(--ink-soft); stroke-width: 1.1; stroke-linejoin: round; }
.nb-stage .nb-poly { fill: var(--gold-soft); stroke: var(--gold-deep); stroke-width: 1.2; }
.nb-stage .nb-axis { fill: var(--gold-2); stroke: var(--navy-950); stroke-width: 1.5; }
.nb-stage .nb-axis-dot { fill: var(--navy-950); }
/* Bezel: Goldring, gravierte Teilstriche, Richtwerte, Bogen, Zeiger, Grenzlinie */
.nb-stage .nb-band { fill: none; stroke: url(#nbGold); stroke-width: 30; }
.nb-stage .nb-band-out { fill: none; stroke: var(--gold-deep); stroke-width: 1.4; }
.nb-stage .nb-band-in { fill: none; stroke: var(--navy-950); stroke-opacity: .6; stroke-width: 1.4; }
.nb-stage .nb-band-hi { fill: none; stroke: var(--gold-2); stroke-opacity: .7; stroke-width: 1; }
.nb-stage .nb-tick { fill: none; stroke: var(--navy-950); stroke-opacity: .8; }
.nb-stage .nb-bz-bg { fill: none; stroke: url(#nbGold); stroke-width: 30; }
.nb-stage .nb-bz { font: 700 12.5px/1 var(--font-body); fill: var(--navy-950); text-anchor: middle; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
.nb-stage .nb-track { fill: none; stroke: var(--gold-2); stroke-opacity: .16; stroke-width: 5; transform-box: view-box; transform-origin: 200px 200px; transform: rotate(90deg); stroke-dasharray: var(--dmax) 360; }
.nb-stage .nb-arc { fill: none; stroke: var(--gold-2); stroke-width: 5; stroke-linecap: round; transform-box: view-box; transform-origin: 200px 200px; transform: rotate(90deg); stroke-dasharray: var(--d1) 360; }
.nb-stage .nb-ndl { stroke: var(--gold-2); stroke-width: 2; stroke-linecap: round; }
.nb-stage .nb-dot { fill: var(--gold-2); stroke: var(--navy-950); stroke-width: 1.5; }
.nb-stage .nb-lim { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.nb-stage .nb-lim-mark { fill: var(--red); }
.nb-stage .nb-lim-t { font: 700 11px/1 var(--font-body); fill: var(--paper-2); letter-spacing: .06em; }
/* Kartusche mit laufender Gradzahl */
.nb-stage .nb-plq { fill: var(--navy-950); stroke: var(--gold); stroke-width: 1.4; }
.nb-stage .nb-plq-in { fill: none; stroke: var(--gold-2); stroke-opacity: .35; stroke-width: 1; }
.nb-stage .nb-cap { font: 700 11.5px/1 var(--font-body); fill: var(--gold-2); letter-spacing: .16em; text-transform: uppercase; text-anchor: middle; }
.nb-stage .nb-num { font: 700 38px/1 var(--font-body); fill: var(--white); text-anchor: middle; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.nb-stage .nb-num tspan { fill: var(--gold-2); }
.nb-stage .nb-ph { font: 600 12px/1 var(--font-body); fill: var(--paper-deep); text-anchor: middle; letter-spacing: .02em; }
/* Ruhelage = mittlere Stellung: Segment und Zeiger auf --a1, Bogen bis --d1, mittlere Gradzahl sichtbar */
.nb-stage .nb-seg, .nb-stage .nb-ptr { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(var(--a1)); }
.nb-stage .nb-l0, .nb-stage .nb-l2 { opacity: 0; }
.nb-stage .nb-l1 { opacity: 1; }
/* Mit Bewegung (html.motion) ist die Ruhelage der Anfang (0°): Segment, Zeiger, Bogen und Zahl stehen schon dort,
wo die Animation beginnt – so springt beim Start nichts (vorher stand das Gelenk auf 90° und sprang auf 0° zurück). */
html.motion .nb-stage .nb-seg, html.motion .nb-stage .nb-ptr { transform: rotate(var(--a0)); }
html.motion .nb-stage .nb-arc { stroke-dasharray: 0 360; }
html.motion .nb-stage .nb-l0 { opacity: 1; }
html.motion .nb-stage .nb-l1 { opacity: 0; }
/* Bewegung nur mit html.motion (kein reduced-motion, kein ?motion=0) und erst, wenn das Medaillon im Bild ist (.mg-run) */
html.motion .nb-stage.mg-run .nb-stage__sway { animation: nbSway 14s var(--ease-in-out) infinite alternate; }
html.motion .nb-stage.mg-run .nb-seg, html.motion .nb-stage.mg-run .nb-ptr { animation: nbTurn var(--dur) cubic-bezier(.45, 0, .2, 1) .4s infinite alternate; }
html.motion .nb-stage.mg-run .nb-arc { animation: nbFill var(--dur) cubic-bezier(.45, 0, .2, 1) .4s infinite alternate; }
html.motion .nb-stage.mg-run .nb-l0 { animation: nbL0 var(--dur) linear .4s infinite alternate; }
html.motion .nb-stage.mg-run .nb-l1 { animation: nbL1 var(--dur) linear .4s infinite alternate; }
html.motion .nb-stage.mg-run .nb-l2 { animation: nbL2 var(--dur) linear .4s infinite alternate; }
@keyframes nbSway { from { transform: rotateX(6deg) rotateY(-8deg); } to { transform: rotateX(-4deg) rotateY(8deg); } }
@keyframes nbTurn { 0%, 14% { transform: rotate(var(--a0)); } 40%, 56% { transform: rotate(var(--a1)); } 78%, 100% { transform: rotate(var(--a2)); } }
@keyframes nbFill { 0%, 14% { stroke-dasharray: 0 360; } 40%, 56% { stroke-dasharray: var(--d1) 360; } 78%, 100% { stroke-dasharray: var(--d2) 360; } }
@keyframes nbL0 { 0%, 18% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes nbL1 { 0%, 30% { opacity: 0; } 40%, 58% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes nbL2 { 0%, 70% { opacity: 0; } 80%, 100% { opacity: 1; } }
/* ---------- Zeitleiste der Phasen (Goldlinie, dunkelblaue Punkte) ---------- */
.nb-tl { position: relative; display: grid; gap: 1.6rem; --n: 4; }
.nb-tl::before, .nb-tl::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; }
.nb-tl::before { background: var(--paper-deep); }
.nb-tl::after { background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); }
.nb-tl__item { position: relative; display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0; }
.nb-tl__dot { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--navy-900); color: var(--gold-2); box-shadow: 0 0 0 5px var(--paper-2); }
.nb-tl__dot .ico { width: 1.25rem; height: 1.25rem; }
.nb-tl__txt { display: grid; gap: .3rem; min-width: 0; padding-top: .3rem; }
.nb-tl__when { font: 700 .64rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.nb-tl__txt h3 { font: 700 1.08rem/1.3 var(--font-body); letter-spacing: -.01em; }
.nb-tl__txt p { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; text-wrap: pretty; }
/* Handy und Tablet: senkrecht, Linie links durch die Punkte */
.nb-tl::before, .nb-tl::after { left: calc(1.5rem - 2px); top: 1.5rem; bottom: 1.5rem; width: 4px; }
.nb-tl::after { transform-origin: center top; }
@media (min-width: 900px) {
.nb-tl { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; }
.nb-tl__item { flex-direction: column; align-items: center; text-align: center; padding-inline: .9rem; }
.nb-tl__txt { padding-top: .5rem; }
.nb-tl::before, .nb-tl::after { left: calc(100% / (2 * var(--n))); right: calc(100% / (2 * var(--n))); top: calc(1.5rem - 2px); bottom: auto; width: auto; height: 4px; }
.nb-tl::after { transform-origin: left center; }
}
/* Bewegung: Linie wächst, Punkte und Texte folgen nacheinander (nur html.motion) */
html.motion .nb-tl:not(.mg-run)::after { transform: scale(0); }
html.motion .nb-tl:not(.mg-run) .nb-tl__dot { opacity: 0; transform: scale(.4); }
html.motion .nb-tl:not(.mg-run) .nb-tl__txt { opacity: 0; transform: translateY(10px); }
html.motion .nb-tl.mg-run::after { animation: nbLine 2.2s var(--ease-out) .15s both; }
html.motion .nb-tl.mg-run .nb-tl__dot { animation: nbPop .8s var(--ease-expo) both; animation-delay: calc(.2s + var(--i, 0) * .45s); }
html.motion .nb-tl.mg-run .nb-tl__txt { animation: nbFade .8s var(--ease-out) both; animation-delay: calc(.4s + var(--i, 0) * .45s); }
@keyframes nbLine { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes nbPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes nbFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ---------- Phasentabelle in weißem Rahmen ---------- */
.nb-tblbox { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.nb-tblbox .tbl th:first-child, .nb-tblbox .tbl td:first-child { padding-left: 1.2rem; }
.nb-tblbox .tbl tr:last-child td { border-bottom: 0; }
.nb-tblbox .tbl td:first-child small { display: block; margin-top: .25rem; font: 600 .76rem/1.4 var(--font-body); color: var(--gold-ink); white-space: normal; }
.nb-tblbox .tbl li { text-wrap: pretty; }
@media (max-width: 720px) {
.nb-tblbox .tbl tr { padding: 1.1rem 1.2rem; }
.nb-tblbox .tbl td:first-child { padding-left: 0; }
.nb-tblbox .tbl td:first-child small { display: inline; margin-left: .45rem; }
}
.nb-hinweis { font-size: .85rem; line-height: 1.6; color: var(--ink-mute); text-wrap: pretty; max-width: 80ch; }
/* ---------- Warnhinweis (rote Kante) ---------- */
.nb-warn { border-left-color: var(--red); background: var(--white); }
.nb-warn .ico { color: var(--red); }
.nb-warn strong { display: block; margin-bottom: .25rem; color: var(--ink); font-size: 1rem; }
/* ---------- Quellen- und Standzeile ---------- */
.nb-quelle { display: grid; gap: .6rem; }
.nb-quelle p { font-size: .85rem; line-height: 1.6; color: var(--ink-mute); text-wrap: pretty; }
.nb-stand { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .8rem; color: var(--ink-mute); }
.nb-stand span { display: inline-flex; align-items: center; gap: .4rem; }
.nb-stand .ico { color: var(--gold-deep); flex: none; }
/* ---------- Weitere Nachbehandlungen (Chips) ---------- */
.nb-more { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.nb-more .chips { gap: .5rem; }
/* Glaskarten mit Symbol statt Nummer (wie auf den Leistungsseiten) */
.nb-glass .glass__num .ico { width: 1.1rem; height: 1.1rem; }
.nb-glass .glass p a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
/* ===== Seite: praxis.css ===== */
/* Praxisseite (/praxis) – nur Tokens und vorhandene Klassen.
1) Öffnungszeiten-Karte neben dem Einstiegstext (Symbol in der Überschrift).
2) Platzhalter-Galerie: breite Kachel im Seitenverhältnis einer Doppelkachel (8:3), damit die Zeilen gleich hoch bleiben;
ab 720 px zwei Spalten, ab 1024 px vier Spalten – mit einer breiten und einer hohen Kachel gehen alle Felder genau auf.
3) Schritte auf Dunkelblau: Symbolfeld sonst unsichtbar (gleiche Farbe wie die Karte). */
.page-praxis .praxis-hours { align-self: start; }
.page-praxis .praxis-hours h3 { display: flex; align-items: center; gap: .6rem; }
.page-praxis .praxis-hours h3 .ico { color: var(--gold-deep); }
@media (min-width: 720px) {
.page-praxis .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
.page-praxis .gallery__item--wide { aspect-ratio: 8 / 3; }
}
@media (min-width: 1024px) { .page-praxis .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page-praxis .gallery .ph__label { font-size: .62rem; }
@media (max-width: 719px) { .page-praxis .gallery .ph__inner { padding: .5rem; } .page-praxis .gallery .ph__label { font-size: .58rem; letter-spacing: .1em; } } /* „Behandlungsraum 1“ passt auf Handys in eine Zeile */
.page-praxis .is-dark .step__icon { background: var(--paper-3); color: var(--gold-2); }
/* ===== Seite: start.css ===== */
/* Startseite (Fassung 2): Willkommen mit schwebender Zitatkarte, Kacheln, Glaskarten, Kontaktraster */
.page-start .welcome__media { position: relative; }
.page-start .welcome__quote { position: relative; margin: -3.5rem 1rem 0 auto; width: min(100%, 24rem); padding: 1.5rem 1.6rem; z-index: 2; }
@media (min-width: 900px) { .page-start .welcome__quote { position: absolute; right: -2rem; bottom: -2.25rem; margin: 0; } .page-start .welcome__media { padding-bottom: 2rem; } }
.page-start .welcome__quote .quote { font-size: 1.2rem; line-height: 1.4; }
.page-start .features-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .page-start .features-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-start .features-row .feature { padding: 1.1rem 1.15rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.page-start .features-row .feature p { font-size: .9rem; }
/* Philosophie: große Zitatzeile über den Glaskarten */
.page-start .philo__quote { max-width: 30ch; }
/* Bewertungen: Kopf mit Bewertungs-Pille rechts */
.page-start .reviews-head { display: grid; gap: 1.25rem; align-items: end; margin-bottom: 2rem; }
@media (min-width: 900px) { .page-start .reviews-head { grid-template-columns: minmax(0, 1fr) auto; } }
/* Karriere-Einschub */
.page-start .karriere { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .page-start .karriere { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } .page-start .karriere .actions { justify-content: flex-end; } }
/* Kontakt: Kacheln + Öffnungszeiten links, Formular rechts */
.kontakt-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .kontakt-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem; } }
.kontakt-grid h3 { display: flex; align-items: center; gap: .6rem; }
.kontakt-grid h3 .ico { color: var(--gold-deep); }
.page-start .hours-card { padding: 1.4rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
/* ===== Seite: team.css ===== */
/* Teamseite (/team) – nur Tokens und vorhandene Klassen.
1) Inhaberkarte: Textspalte als eigener Stapel, Zitat mit feiner Linie abgesetzt, Schwerpunkte als Links.
2) Rezeptionskarten: kleines Raster in der rechten Split-Spalte; auf Handys als liegende Karte
(Platzhalterfoto links, Text rechts), damit das Foto nicht den halben Bildschirm füllt. */
.page-team .person__body { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.page-team .section--tint .card--navy { background: var(--navy-900); } /* leistung.css färbt Karten in getönten Flächen weiß – die dunkle Karte „Das erwartet dich“ bleibt dunkelblau */
.page-team .person__tags a { color: inherit; text-decoration: none; }
.page-team .person__tags li:hover { background: var(--gold-soft); }
.page-team .person--lead .quote { margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.page-team .person--lead .quote .ico { width: 1.4rem; height: 1.4rem; margin-bottom: .5rem; }
@media (max-width: 899px) { .page-team .person--lead .person__media { aspect-ratio: 1; } }
.page-team .team-rez { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 640px) { .page-team .team-rez { grid-template-columns: minmax(0, 22rem); justify-content: center; } } /* eine Rezeptionskarte, mittig */
@media (max-width: 639px) {
.page-team .team-rez .person { grid-template-columns: 6rem minmax(0, 1fr); align-items: start; gap: .75rem 1rem; }
.page-team .team-rez .person__body { display: contents; } /* Name/Text rechts neben dem Foto, Aufgaben darunter über die volle Breite */
.page-team .team-rez .person__media { grid-column: 1; grid-row: 1 / span 2; }
.page-team .team-rez .person__body > * { grid-column: 2; }
.page-team .team-rez .person__tags { grid-column: 1 / -1; }
.page-team .team-rez .ph__initials { width: 3.4rem; height: 3.4rem; font-size: 1.3rem; }
.page-team .team-rez .ph__inner { padding: .5rem; gap: .4rem; }
}