/* Site shell — extracted from index.html so country pages inherit the exact same design DNA. */
:root{
--pill-r:999px; /* Rundung aller Pills und Buttons, zentral */
/* Grounds — white / light green tint / deep green */
--paper:#f7f4ec; /* pure white ground */
--paper-tint:#f1ead6;
--paper-tint-strong:#eae0c6;
/* Ink — all text green */
--ink:#9c7d2e;
--ink-strong:#8a6e28;
--ink-soft:rgba(156,125,46,.72);
--muted:rgba(156,125,46,.5);
/* Lines */
--line:rgba(156,125,46,.18);
--line-soft:rgba(156,125,46,.10);
--accent:#8a6e28;
/* Deep green — for full-coloured panels with white text */
--green-deep:#9c7d2e;
--green-deep-2:#63501d;
/* Warm dot accent — used in status pills */
--dot-warm:#d99a5a;
/* Legacy aliases (hero/header inherit these; hero is now white with green text) */
--cream:#9c7d2e; /* was "light text on dark hero" — now green text on white hero */
--cream-2:#8a6e28;
--navy:#f7f4ec; /* was dark hero background — now white */
--navy-2:var(--paper-tint);
--navy-line:var(--line);
--max:1200px;
--gutter:32px;
--sans:"Avenir Next","Avenir","Nunito Sans",system-ui,-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Lenis Smooth-Scroll — wenn aktiv, native scroll-behavior aus */
html.lenis, html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto}
html.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;overflow:auto}
.lenis.lenis-smooth iframe{pointer-events:none}
body{
margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);
font-weight:400;line-height:1.6;font-size:17px;letter-spacing:.005em;
}
/* Einheitlicher Underline-Link — alles gleiche Farbe, kein Opacity-Fade */
a{
color:var(--ink);text-decoration:none;
border-bottom:1px solid var(--ink);
padding-bottom:2px;
transition:color .2s ease, border-color .2s ease;
}
a:hover{color:var(--green-deep-2);border-bottom-color:var(--green-deep-2)}
a.plain{border-bottom:none;padding-bottom:0}
::selection{background:var(--ink);color:var(--paper)}
.wrap{max-width:var(--max);margin:auto;padding:0 var(--gutter)}
.wrap--wide{max-width:1440px;margin:auto;padding:0 var(--gutter)}
/* Meta label */
.k{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Header */
.site-header{
position:sticky;top:0;z-index:60;
background:var(--navy);color:var(--cream);
border-bottom:1px solid var(--navy-line);
}
.site-strip{
border-bottom:1px solid var(--navy-line);
font-size:12px;color:rgba(156,125,46,.55);
}
.site-strip-inner{
display:flex;justify-content:space-between;align-items:center;
padding:10px 0;letter-spacing:.02em;
}
.site-strip-inner .left{display:flex;gap:14px;align-items:center}
.site-strip-inner .right{display:flex;gap:14px;align-items:center}
.site-strip-inner .sep{color:rgba(156,125,46,.25)}
.site-strip-inner .dot{
width:5px;height:5px;border-radius:50%;background:var(--cream);display:inline-block;
margin-right:8px;vertical-align:middle;
}
.site-strip-inner .langs a{
color:rgba(156,125,46,.55);border-bottom:none;padding-bottom:0;
}
.site-strip-inner .langs a[aria-current="true"]{color:var(--cream)}
.site-nav{
display:flex;justify-content:space-between;align-items:center;
padding:20px 0;
}
.brand{
font-size:19px;font-weight:700;letter-spacing:-.012em;color:var(--cream);
border:none;
}
.brand small{
display:inline-block;margin-left:6px;font-weight:400;color:rgba(156,125,46,.5);
font-size:12px;letter-spacing:.04em;
}
.navlinks{display:flex;gap:28px;align-items:center;color:rgba(156,125,46,.6);font-size:13px}
.navlinks a{color:rgba(156,125,46,.6);border:none}
.navlinks a:hover{color:var(--cream)}
.navlinks .nav-cta{
margin-left:8px;padding:8px 16px;color:var(--navy);
background:var(--cream);border:1px solid var(--cream);
border-radius:var(--pill-r,999px);font-weight:500;letter-spacing:.02em;
transition:background .2s,color .2s;
}
.navlinks .nav-cta:hover{background:transparent;color:var(--cream)}
/* Top block: hero container (default weiß, .green invertiert auf tief-grün) */
.top-block{
background:var(--navy);color:var(--cream);position:relative;
display:flex;flex-direction:column;
min-height:100vh;
min-height:100svh;
}
/* Modifier — Header + Hero komplett grün, alle Kinder erben weißen Text */
.top-block.green{
background:var(--green-deep);
--cream:#ffffff;
--navy:var(--green-deep);
--line:rgba(255,255,255,.18);
--line-soft:rgba(255,255,255,.10);
--navy-line:rgba(255,255,255,.14);
}
.top-block.green .brand,
.top-block.green .brand small,
.top-block.green .site-strip-inner,
.top-block.green .site-strip-inner .langs a,
.top-block.green .navlinks,
.top-block.green .navlinks a{color:rgba(255,255,255,.75)}
.top-block.green .brand{color:#ffffff}
.top-block.green .navlinks .nav-cta{
background:#ffffff;color:var(--green-deep);border-color:#ffffff;
}
.top-block.green .hero h1{color:#ffffff}
.top-block.green .hero .hero-lead{color:rgba(255,255,255,.78)}
.top-block.green::after{display:none}
.top-block::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:36px;
background:linear-gradient(to bottom,transparent,var(--paper));
pointer-events:none;
}
/* Hero */
.hero{padding:96px 0 96px;position:relative}
/* Hero-Content mittig im Rest-Bereich unter dem Header.
.top-block ist 100vh, Header oben, Hero füllt den Rest,
Content wird über justify-content:center vertikal zentriert. */
.top-block > .site-header{flex-shrink:0 !important}
.top-block > .hero{
flex:1 1 0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:stretch !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
.hero-eyebrow{
font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:rgba(156,125,46,.55);margin:0 0 28px;
}
.hero h1{
font-family:var(--sans);font-weight:400;
font-size:clamp(48px,6.4vw,92px);
line-height:1.04;letter-spacing:-.032em;
margin:0 0 40px;max-width:900px;color:var(--cream);
text-wrap:balance;
}
.hero .hero-lead{
font-size:clamp(18px,1.5vw,22px);color:rgba(156,125,46,.72);line-height:1.5;
max-width:600px;margin:0;font-weight:400;
}
.hero .hero-lead + .hero-lead{margin-top:16px;font-style:italic;color:rgba(156,125,46,.58)}
.hero-cta-row{margin-top:44px;display:flex;flex-wrap:wrap;gap:12px}
.hero-cta{
display:inline-block;padding:10px 18px;border-radius:var(--pill-r,999px);
font-size:13px;font-weight:500;letter-spacing:.02em;line-height:1.4;
background:var(--cream);color:var(--navy);border:1px solid var(--cream);
transition:background .2s,color .2s;
}
.hero-cta:hover{background:transparent;color:var(--cream);border-color:var(--cream)}
/* Harter Wechsel statt Überblendung: beim Blenden wären Schrift und Grund kurz beide grün und der Text unlesbar */
.hero-cta{transition:none}
.hero-cta.ghost{background:transparent;color:var(--cream);border-color:rgba(156,125,46,.35)}
.hero-cta.ghost:hover{border-color:var(--cream)}
.top-block ::selection{background:var(--cream);color:var(--navy)}
/* Flow bar */
.flow-bar{
overflow:hidden;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--paper);
padding:22px 0;position:relative;
}
.flow-bar::before,.flow-bar::after{
content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.flow-bar::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.flow-bar::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.flow-inner{
display:flex;gap:64px;white-space:nowrap;width:max-content;
animation:flow-scroll 42s linear infinite;
font-size:15px;color:var(--ink-soft);letter-spacing:-.005em;
}
.flow-inner span{display:inline-flex;align-items:center;gap:64px}
.flow-inner span em{font-style:normal;color:var(--ink)}
.flow-inner span::after{content:"·";color:var(--accent);margin-left:0}
@keyframes flow-scroll{
from{transform:translateX(0)}
to {transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
.flow-inner{animation:none}
}
/* Sections */
section{padding:120px 0;border-top:1px solid var(--line)}
.sec-head{display:block;padding-bottom:64px;text-align:center}
.sec-head .k{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink);
padding:8px 16px;
background:rgba(156,125,46,.11);
border:1px solid rgba(156,125,46,.38);
border-radius:var(--pill-r,999px);
margin-bottom:32px;
box-shadow:0 2px 8px rgba(156,125,46,.08);
}
.sec-head .k::before{
content:"";display:inline-block;
width:6px;height:6px;border-radius:50%;
background:var(--dot-warm);flex:none;
vertical-align:middle;margin:0;transform:none;
}
/* On deep-green panels, invert the pill so it stays readable */
.panel-full .sec-head .k,
.panel-full .k{
color:#ffffff;
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.22);
}
.panel-full .sec-head .k::before,
.panel-full .k::before{background:var(--dot-warm)}
.sec-head h2{
font-family:var(--sans);font-weight:400;
font-size:clamp(36px,4.6vw,68px);
line-height:1.05;letter-spacing:-.03em;
margin:0 auto;max-width:960px;color:var(--ink);
}
/* Pill card */
.pill-card{
background:var(--paper-tint);border:1px solid var(--line-soft);border-radius:28px;
padding:32px 40px;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 40px -18px rgba(156,125,46,.10);
}
.pill-card + .pill-card{margin-top:20px}
/* USP grid */
.usps{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
}
.usp{padding:36px 24px 40px 0;display:flex;flex-direction:column}
.usp + .usp{padding-left:32px;border-left:1px solid var(--line)}
.usp .n{
font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:var(--accent);margin-bottom:64px;
}
.usp .l{
font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-bottom:14px;
}
.usp .v{
font-family:var(--sans);font-weight:400;
font-size:clamp(22px,2.1vw,30px);letter-spacing:-.02em;line-height:1.15;
color:var(--ink);
}
.usp .v small{
display:block;margin-top:16px;font-size:14px;color:var(--ink-soft);
letter-spacing:0;line-height:1.5;font-weight:400;
}
/* Definition rows */
.rows{display:grid;grid-template-columns:180px 1fr}
.rows > div{padding:24px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.55}
.rows > div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.rows .k{padding-top:24px;padding-right:16px}
.rows .v{color:var(--ink);padding-right:8px}
.rows .v p{margin:0 0 8px;color:var(--ink-soft)}
.rows .v p:last-child{margin:0}
.rows .v strong{font-weight:500;color:var(--ink)}
.rows .v a{color:var(--ink);border-bottom-color:var(--line)}
.rows .v a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Journey — 3 pill cards side by side */
.journey-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.journey-3 .pill-card{padding:36px 34px 32px}
.journey-3 .n{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
font-weight:500;margin-bottom:24px;display:block;
}
.journey-3 h3{
font-family:var(--sans);font-weight:500;font-size:26px;letter-spacing:-.018em;
line-height:1.15;margin:0 0 14px;color:var(--ink);
}
.journey-3 p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.55}
/* Symptom list — subtle editorial */
.sym-list{list-style:none;padding:0;margin:0;
display:grid;grid-template-columns:1fr 1fr;gap:0 40px;
border-top:1px solid var(--line);
}
.sym-list li{
padding:20px 0;border-bottom:1px solid var(--line);
font-size:17px;color:var(--ink);
display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:baseline;
}
.sym-list li::before{content:"·";color:var(--accent);font-weight:500}
/* Contact block */
.contact-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.contact-cta a{
display:inline-block;padding:14px 22px;border-radius:var(--pill-r,999px);
font-size:14px;font-weight:500;letter-spacing:.02em;border:1px solid var(--ink);
background:var(--ink);color:var(--paper);
transition:background .2s,color .2s;
}
.contact-cta a:hover{background:transparent;color:var(--ink)}
.contact-cta a.ghost{background:transparent;color:var(--ink)}
.contact-cta a.ghost:hover{background:var(--ink);color:var(--paper)}
/* Footer */
footer{
padding:80px 0 48px;border-top:1px solid var(--line);
display:grid;grid-template-columns:160px 1fr auto;gap:56px;
font-size:13px;color:var(--ink-soft);
}
footer .k{padding-top:2px}
footer .foot-mid a{display:inline-block;margin-right:24px;border-bottom:none;color:var(--ink-soft)}
footer .foot-mid a:hover{color:var(--ink)}
footer .foot-right{text-align:right;color:var(--muted);font-size:12px}
@media(max-width:900px){
.site-strip-inner{flex-wrap:wrap;gap:6px}
.navlinks{gap:16px}
.hero{padding:64px 0 64px}
section{padding:80px 0}
.sec-head{padding-bottom:40px}
.usps{grid-template-columns:1fr 1fr}
.usp + .usp{border-left:none;padding-left:0}
.usp:nth-child(n+3){border-top:1px solid var(--line)}
.journey-3{grid-template-columns:1fr}
.rows{grid-template-columns:1fr}
.rows .k{padding-top:24px}
.rows .v{padding:0}
.sym-list{grid-template-columns:1fr}
footer{grid-template-columns:1fr;gap:24px}
footer .foot-right{text-align:left}
}
/* ————————————————————————————————————————————————————
Design-system utilities — Weiß · Light-Green Tint · Deep-Green Panel
———————————————————————————————————————————————————— */
/* Section variants — tinted backgrounds */
section.tint{background:var(--paper-tint);border-top-color:transparent}
section.tint-strong{background:var(--paper-tint-strong);border-top-color:transparent}
/* Full-coloured deep-green panel (rounded, white text) — like the CTA block */
.panel-full{
background:linear-gradient(135deg,var(--green-deep-2) 0%,var(--green-deep) 100%);
color:#ffffff;
border-radius:24px;
padding:clamp(56px,7vw,80px) clamp(24px,5vw,72px);
position:relative;overflow:hidden;
text-align:center;
}
.panel-full h1,.panel-full h2,.panel-full h3,
.panel-full p{margin-left:auto !important;margin-right:auto !important}
.panel-full > *{margin-left:auto;margin-right:auto}
.panel-full h1,.panel-full h2,.panel-full h3{color:#ffffff;font-weight:400;letter-spacing:-.03em;line-height:1.05}
.panel-full p{color:#ffffff;font-weight:400}
.panel-full .k{color:rgba(255,255,255,.82)}
.panel-full .k::before{background:rgba(255,255,255,.82);width:36px;height:2px}
.panel-full a{color:#ffffff;border-bottom-color:rgba(255,255,255,.7)}
.panel-full a:hover{border-bottom-color:#ffffff}
.panel-full .rows > div{border-top-color:rgba(255,255,255,.28)}
.panel-full .rows > div:nth-last-child(-n+2){border-bottom-color:rgba(255,255,255,.28)}
.panel-full .rows .k{color:rgba(255,255,255,.72)}
.panel-full .panel-cta{
display:inline-flex;align-items:center;gap:10px;
background:#ffffff;color:var(--green-deep);
padding:10px 18px;border-radius:var(--pill-r,999px);
font-weight:500;font-size:13px;letter-spacing:.02em;line-height:1.4;
border:1px solid #ffffff;
transition:background .2s,color .2s;
}
.panel-full .panel-cta:hover{background:transparent;color:#ffffff}
/* Subtle dot-pattern background — layered over tint */
.dots-bg{
background-color:var(--paper-tint);
background-image:none;
background-size:22px 22px;
}
.dots-bg-strong{
background-color:var(--paper-tint-strong);
background-image:none;
background-size:22px 22px;
}
/* Status pill — card-artig: weißer Grund, Border, Schatten */
.status-pill{
display:inline-flex;align-items:center;gap:10px;
padding:9px 18px;border-radius:var(--pill-r,999px);
background:#ffffff;
color:var(--ink);
font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
border:1px solid rgba(156,125,46,.28);
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 32px -18px rgba(156,125,46,.18);
transition:transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.status-pill:hover{
transform:translateY(-3px) scale(1.06);
border-color:rgba(156,125,46,.55);
box-shadow:0 1px 0 rgba(156,125,46,.04), 0 22px 48px -18px rgba(156,125,46,.32);
}
.status-pill::before{
content:"";width:6px;height:6px;border-radius:50%;
background:var(--dot-warm);flex:none;
}
/* On deep-green panels, invert the pill */
.panel-full .status-pill{
background:rgba(255,255,255,.08);
color:#ffffff;
border-color:rgba(255,255,255,.2);
}
/* Solid variant — full green fill, white text (for emphasis) */
.status-pill.solid,
.sec-head .k.solid,
.k.solid{
background:var(--green-deep);
color:#ffffff;
border-color:var(--green-deep);
}
.status-pill.solid::before,
.sec-head .k.solid::before,
.k.solid::before{
background:var(--dot-warm);
}
/* ————————————————————————————————————————————————————
Pill trio — segmented pill (3 joined pills, one active)
Useful for audience switch, filter, tab-nav
———————————————————————————————————————————————————— */
.pill-trio{
display:inline-flex;align-items:center;
padding:5px;gap:10px;
background:var(--paper-tint);
border:1px solid var(--line);
border-radius:var(--pill-r,999px);
}
.pill-trio a,
.pill-trio button{
display:inline-flex;align-items:center;gap:8px;
padding:9px 18px;
font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink);
background:transparent;border:none;border-radius:var(--pill-r,999px);
cursor:pointer;text-decoration:none;
transition:background .2s ease,color .2s ease;
font-family:inherit;
}
.pill-trio a:hover,
.pill-trio button:hover{background:rgba(156,125,46,.08)}
.pill-trio a.active,
.pill-trio button.active,
.pill-trio a[aria-current="true"]{
background:var(--green-deep);
color:#ffffff;
}
.pill-trio a.active::before,
.pill-trio button.active::before,
.pill-trio a[aria-current="true"]::before{
content:"";width:6px;height:6px;border-radius:50%;
background:var(--dot-warm);flex:none;
}
.pill-trio a.active:hover,
.pill-trio button.active:hover{background:var(--green-deep)}
/* ————————————————————————————————————————————————————
Logo marquee — durchlaufende Partner-/Klinik-Zeile
Track ist im HTML zu duplizieren (2× dieselben Items) für nahtlosen Loop
———————————————————————————————————————————————————— */
.logo-marquee{
overflow:hidden;padding:40px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-marquee__track{
display:flex;align-items:center;gap:32px;
width:max-content;
animation:logo-scroll 55s linear infinite;
}
/* Läuft immer, kein Stopp bei Hover. */
.logo-marquee__item{
flex:0 0 auto;
display:inline-flex;align-items:center;gap:16px;
padding:28px 44px;min-height:96px;
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:20px;
color:var(--ink);
font-size:24px;font-weight:600;letter-spacing:-.012em;
white-space:nowrap;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 14px 34px -18px rgba(156,125,46,.18);
}
.logo-marquee__item svg{width:32px;height:32px;flex:none;fill:currentColor}
.logo-marquee__item img{max-height:56px;max-width:220px;object-fit:contain;display:block}
@keyframes logo-scroll{
from{transform:translateX(0)}
to {transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
.logo-marquee__track{animation:none;overflow-x:auto}
}
/* ————————————————————————————————————————————————————
Nav pill — schwebender Kompakt-Header (Logo · Zusatzinfo · CTA)
Alternative zum Standard site-header
———————————————————————————————————————————————————— */
.nav-pill{
position:sticky;top:16px;z-index:60;
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
height:56px;padding:0 6px 0 24px;
max-width:900px;margin:16px auto 0;
background:#ffffff;
border:1px solid var(--line);
border-radius:var(--pill-r,999px);
box-shadow:0 16px 60px rgba(156,125,46,.10);
}
.nav-pill .logo{
font-family:var(--sans);font-weight:700;letter-spacing:-.012em;font-size:17px;
color:var(--ink);text-decoration:none;border:none;line-height:1;
}
.nav-pill .center{
text-align:center;font-size:13px;color:var(--ink-soft);letter-spacing:.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-pill .center b{color:var(--ink);font-weight:600}
.nav-pill .cta{
display:inline-flex;align-items:center;gap:8px;
padding:11px 20px;border-radius:var(--pill-r,999px);
background:var(--green-deep);color:#ffffff;
font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1;
border:none;text-decoration:none;
transition:background .2s;
}
.nav-pill .cta:hover{background:var(--green-deep-2)}
@media(max-width:640px){
.nav-pill{grid-template-columns:auto auto;padding:0 6px 0 18px;gap:12px;height:52px}
.nav-pill .center{display:none}
}
/* ————————————————————————————————————————————————————
Step cards — 3-column process, icon + number badge + copy
———————————————————————————————————————————————————— */
.step-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;
}
.step-card{
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:20px;
padding:32px 30px 30px;
position:relative;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 40px -18px rgba(156,125,46,.10);
transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.step-card:hover{
transform:translateY(-4px);
border-color:var(--line);
box-shadow:0 1px 0 rgba(156,125,46,.04), 0 24px 60px -20px rgba(156,125,46,.24);
}
.step-card .icon{
display:inline-grid;place-items:center;
width:44px;height:44px;border-radius:12px;
background:var(--paper-tint);color:var(--ink);
margin-bottom:44px;
}
.step-card .icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.step-card .num{
position:absolute;top:22px;right:26px;
width:38px;height:38px;border-radius:50%;
background:var(--green-deep);color:#ffffff;
display:grid;place-items:center;
font-size:15px;font-weight:600;line-height:1;
}
.step-card h3{
font-family:var(--sans);font-size:22px;font-weight:500;letter-spacing:-.012em;
color:var(--ink);margin:0 0 12px;line-height:1.2;
}
.step-card p{color:var(--ink);font-size:16px;line-height:1.55;margin:0}
@media(max-width:900px){
.step-cards{grid-template-columns:1fr}
}
/* ————————————————————————————————————————————————————
Accordion layout — 2-column: intro on left, expandable list on right
———————————————————————————————————————————————————— */
.accordion-layout{
display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start;
}
.accordion-layout .accordion-intro h2{
font-family:var(--sans);font-weight:500;
font-size:clamp(30px,3.6vw,52px);
line-height:1.08;letter-spacing:-.018em;
margin:0 0 24px;color:var(--ink);max-width:18ch;
}
.accordion-layout .accordion-intro p{
font-family:var(--sans);color:var(--ink);
font-size:20px;line-height:1.55;max-width:44ch;margin:0;font-weight:400;
}
.accordion-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.accordion-list details{
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:16px;
transition:box-shadow .2s,border-color .2s;
}
.accordion-list details[open]{
border-color:var(--line);
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 32px -18px rgba(156,125,46,.14);
}
.accordion-list summary{
list-style:none;cursor:pointer;outline:none;
display:flex;justify-content:space-between;align-items:center;gap:16px;
padding:26px 26px 26px 32px;
font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.012em;
line-height:1.3;
-webkit-tap-highlight-color:transparent;
}
.accordion-list summary::-webkit-details-marker{display:none}
.accordion-list summary::marker{display:none}
.accordion-list summary::after{
content:"+";display:grid;place-items:center;
width:34px;height:34px;border-radius:50%;
background:var(--paper-tint);color:var(--ink);
font-size:22px;font-weight:400;line-height:1;flex:none;
transition:background .2s,color .2s;
}
.accordion-list details[open] summary::after{
content:"–";background:var(--green-deep);color:#ffffff;
}
.accordion-list .acc-body{
padding:0 32px 26px;color:var(--ink-soft);font-size:17px;line-height:1.65;
max-width:64ch;
}
@media(max-width:900px){
.accordion-layout{grid-template-columns:1fr;gap:32px}
}
/* ————————————————————————————————————————————————————
Feature cards — 4-column icon+title+copy tiles
———————————————————————————————————————————————————— */
.feature-cards{
display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;
}
.feature-card{
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:20px;
padding:32px 26px;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 40px -18px rgba(156,125,46,.10);
transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.feature-card:hover{
transform:translateY(-4px);
border-color:var(--line);
box-shadow:0 1px 0 rgba(156,125,46,.04), 0 24px 60px -20px rgba(156,125,46,.24);
}
.feature-card .icon{
display:inline-grid;place-items:center;
width:44px;height:44px;border-radius:12px;
background:var(--paper-tint);color:var(--ink);
margin-bottom:36px;
}
.feature-card .icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.feature-card h3{
font-family:var(--sans);font-size:20px;font-weight:500;letter-spacing:-.012em;
color:var(--ink);margin:0 0 14px;line-height:1.25;
}
.feature-card p{color:var(--ink);font-size:15px;line-height:1.55;margin:0}
@media(max-width:1000px){.feature-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feature-cards{grid-template-columns:1fr}}
/* Warme Dot-Akzente auf allen Pillen ausblenden */
.status-pill::before,
.sec-head .k::before,
.k::before,
.pill-trio a::before,
.pill-trio button::before{
display:none !important;
}
/* Symmetrisches Padding (Dot ist raus) + kleine Letter-Spacing-Kompensation
Uppercase-Text mit letter-spacing wirkt sonst nach links versetzt —
+.07em links, -.07em rechts gleicht das optisch aus. */
.status-pill{
padding-inline-start:calc(18px + .07em);
padding-inline-end:calc(18px - .07em);
}
.sec-head .k{
padding-inline-start:calc(16px + .07em);
padding-inline-end:calc(16px - .07em);
}
.pill-trio a,
.pill-trio button{
padding-inline-start:calc(18px + .07em);
padding-inline-end:calc(18px - .07em);
}
/* ————————————————————————————————————————————————————
Card-Scroll — draggable horizontal carousel mit Portrait-Karten
———————————————————————————————————————————————————— */
.card-scroll{
display:flex;gap:20px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
cursor:grab;
-webkit-overflow-scrolling:touch;
padding:8px 0 24px;margin:0;
scroll-padding:0;
}
.card-scroll::-webkit-scrollbar{display:none}
.card-scroll.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
/* Passen alle Karten in die Breite (z. B. drei Säulen), stehen sie mittig; bei Überlauf bleibt der Start links (safe) */
.card-scroll{justify-content:safe center}
.symptom-card{
flex:0 0 320px;height:440px;
scroll-snap-align:start;
border-radius:24px;overflow:hidden;position:relative;
background:var(--green-deep);color:#ffffff;
display:flex;flex-direction:column;justify-content:flex-end;
transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease;
}
.symptom-card:hover{transform:translateY(-4px)}
.symptom-card .media{
position:absolute;inset:0;
background:linear-gradient(180deg,var(--green-deep) 0%, var(--green-deep-2) 100%);
overflow:hidden;
}
.symptom-card .media img{width:100%;height:100%;object-fit:cover;display:block}
.symptom-card .caption{
position:relative;z-index:2;padding:28px 26px 26px;
background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}
.symptom-card h3{
font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.012em;
color:#ffffff;margin:0 0 10px;line-height:1.2;
min-height:1.2em; /* eine Zeile fix, damit alle Titel bündig starten */
}
.symptom-card p{
color:rgba(255,255,255,.78);font-size:14px;line-height:1.5;margin:0;
min-height:3em; /* zwei Zeilen fix, damit die Beschreibung immer gleich hoch endet */
}
@media(max-width:640px){
.card-scroll{padding:8px 0 20px;margin:0;scroll-padding:0}
.symptom-card{flex:0 0 78vw;height:400px}
}
/* ————————————————————————————————————————————————————
Credential-Cards — Mitgliedschaften-Kacheln
Logo (grayscale) oben, Titel, kleines grünes Label
———————————————————————————————————————————————————— */
.credential-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;
}
.credential-card{
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:28px;
padding:56px 40px 44px;
min-height:320px;
display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 40px -18px rgba(156,125,46,.10);
transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.credential-card:hover{
transform:translateY(-4px);
border-color:var(--line);
box-shadow:0 1px 0 rgba(156,125,46,.04), 0 24px 60px -20px rgba(156,125,46,.24);
}
.credential-card .logo{
height:88px;display:flex;align-items:center;justify-content:center;
padding:8px 0;
}
.credential-card .logo img,
.credential-card .logo svg{
max-height:72px;max-width:180px;width:auto;height:auto;object-fit:contain;
filter:grayscale(1);opacity:.6;
}
/* Hover-Effekt entfernt — kein Farbumschlag zu schwarz */
.credential-card h4{
font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:-.008em;
color:var(--ink);margin:0;line-height:1.35;max-width:22ch;
}
.credential-card .tag{
font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink);
}
@media(max-width:900px){
.credential-cards{grid-template-columns:1fr}
}
/* Sektions-Absätze zentriert, Hero bleibt linksbündig */
section:not(.hero) > .wrap > p,
section:not(.hero) > .wrap--wide > p{
text-align:center !important;
margin-left:auto !important;margin-right:auto !important;
}
/* Hero komplett zentriert (auf allen Seiten einheitlich) */
.hero{text-align:center !important}
.hero h1,.hero .hero-h1,
.hero p,.hero .hero-lead{
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
.hero-cta-row{justify-content:center !important}
.hero .hero-cta-row{justify-content:flex-start}
/* Card-scroll navigation arrows */
.card-scroll-nav{
display:flex;justify-content:center;gap:12px;margin-top:24px;
}
.card-scroll-nav button{
width:48px;height:48px;border-radius:50%;
background:#ffffff;border:1px solid var(--line);
color:var(--ink);cursor:pointer;
display:grid;place-items:center;
font-size:20px;line-height:1;
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.card-scroll-nav button:hover{
background:var(--green-deep);color:#ffffff;border-color:var(--green-deep);
transform:translateY(-1px);
}
.card-scroll-nav button:disabled{opacity:.3;cursor:default;transform:none;background:#fff;color:var(--ink);border-color:var(--line-soft)}
.card-scroll-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ————————————————————————————————————————————————————
Testimonial-Karte — Zitat, Autor, optional Sterne
———————————————————————————————————————————————————— */
.testimonial-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;
}
.testimonial-card{
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:24px;
padding:36px 32px 32px;
display:flex;flex-direction:column;gap:24px;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 40px -18px rgba(156,125,46,.10);
transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.testimonial-card:hover{
transform:translateY(-4px);
border-color:var(--line);
box-shadow:0 1px 0 rgba(156,125,46,.04), 0 24px 60px -20px rgba(156,125,46,.24);
}
.testimonial-card .stars{
display:flex;gap:4px;color:var(--ink);font-size:16px;letter-spacing:2px;line-height:1;
}
.testimonial-card blockquote{
margin:0;font-family:var(--sans);
font-size:17px;line-height:1.55;color:var(--ink);
quotes:"„" """ "‚" "'";
}
.testimonial-card blockquote::before{content:open-quote}
.testimonial-card blockquote::after{content:close-quote}
.testimonial-card .author{
display:flex;align-items:center;gap:12px;
padding-top:20px;border-top:1px solid var(--line-soft);margin-top:auto;
}
.testimonial-card .avatar{
width:40px;height:40px;border-radius:50%;
background:var(--green-deep);color:#ffffff;
display:grid;place-items:center;font-size:14px;font-weight:600;flex:none;
}
.testimonial-card .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.testimonial-card .name{
font-size:14px;font-weight:500;color:var(--ink);line-height:1.3;
}
.testimonial-card .name small{
display:block;font-weight:400;color:var(--ink-soft);font-size:13px;margin-top:2px;
}
@media(max-width:900px){.testimonial-cards{grid-template-columns:1fr}}
/* ————————————————————————————————————————————————————
Leistungs-Karte — Titel, Beschreibung, optional Preis + CTA
———————————————————————————————————————————————————— */
.service-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;
}
.service-card{
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:24px;
padding:36px 32px 32px;
display:flex;flex-direction:column;gap:16px;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 40px -18px rgba(156,125,46,.10);
transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{
transform:translateY(-4px);
border-color:var(--line);
box-shadow:0 1px 0 rgba(156,125,46,.04), 0 24px 60px -20px rgba(156,125,46,.24);
}
.service-card h3{
font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.012em;
color:var(--ink);margin:0;line-height:1.2;
}
.service-card .price{
font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.005em;
}
.service-card .price small{
display:inline-block;margin-left:6px;font-weight:400;color:var(--ink-soft);font-size:13px;
}
.service-card p{color:var(--ink);font-size:15px;line-height:1.55;margin:0}
.service-card ul{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:8px;
}
.service-card ul li{
display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:baseline;
font-size:14px;color:var(--ink);line-height:1.5;
}
.service-card ul li::before{
content:"·";color:var(--accent);font-weight:600;
}
.service-card .cta{
align-self:flex-start;margin-top:8px;
display:inline-flex;align-items:center;gap:8px;
padding:11px 20px;border-radius:var(--pill-r,999px);
background:var(--green-deep);color:#ffffff;
font-size:13px;font-weight:500;letter-spacing:.02em;line-height:1;
border:none;text-decoration:none;
transition:background .2s ease;
}
.service-card .cta:hover{background:var(--green-deep-2)}
@media(max-width:900px){.service-cards{grid-template-columns:1fr}}
/* ————————————————————————————————————————————————————
Split-Card — horizontale Karte: Text links, Bild rechts
Nummer-Badge oben links, für "Leistungsumfang"-Listen
———————————————————————————————————————————————————— */
.split-cards{
display:flex;flex-direction:column;gap:40px;margin-top:8px;padding-bottom:40vh;
}
/* Sticky-Stack — jede Karte klebt beim Scrollen, die nächste rutscht drüber */
.split-card{position:sticky}
.split-cards > .split-card:nth-child(1){top:80px}
.split-cards > .split-card:nth-child(2){top:100px}
.split-cards > .split-card:nth-child(3){top:120px}
.split-cards > .split-card:nth-child(4){top:140px}
.split-cards > .split-card:nth-child(5){top:160px}
.split-cards > .split-card:nth-child(6){top:180px}
@media(max-width:820px){
.split-cards > .split-card:nth-child(n){top:24px}
.split-cards{gap:24px}
}
.split-card{
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:28px;overflow:hidden;
display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;gap:0;
min-height:440px;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 12px 40px -18px rgba(156,125,46,.10);
transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.split-card:hover{
border-color:var(--line);
box-shadow:0 1px 0 rgba(156,125,46,.04), 0 24px 60px -20px rgba(156,125,46,.24);
}
.split-card:hover{
transform:translateY(-3px);
box-shadow:0 24px 60px -24px rgba(156,125,46,.20);
}
.split-card .text{
padding:64px 64px 64px 64px;
display:flex;flex-direction:column;justify-content:center;gap:28px;
}
.split-card .num{
font-family:var(--sans);font-weight:500;
font-size:20px;color:var(--ink);letter-spacing:.005em;line-height:1;
}
.split-card h3{
font-family:var(--sans);font-weight:500;font-size:clamp(24px,2.4vw,32px);
letter-spacing:-.015em;color:var(--ink);margin:0;line-height:1.15;max-width:20ch;
}
.split-card p{
color:var(--ink);font-size:16px;line-height:1.55;margin:0;max-width:44ch;
}
.split-card .image{
background:var(--green-deep);position:relative;overflow:hidden;
min-height:280px;
}
.split-card .image img{width:100%;height:100%;object-fit:cover;display:block}
.split-card.reverse{grid-template-columns:1fr 1.15fr}
.split-card.reverse .image{order:-1}
@media(max-width:820px){
.split-card{grid-template-columns:1fr}
.split-card .text{padding:32px 28px}
.split-card .image{min-height:220px}
.split-card.reverse .image{order:0}
}
/* ————————————————————————————————————————————————————
Reiter — Tab-Switcher mit nummerierten Buttons
Aktiver Tab: grün gefüllt, weißer Text
———————————————————————————————————————————————————— */
.reiter-tabs{
display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
margin:0 auto 56px;
}
.reiter-tab{
display:inline-flex;align-items:center;gap:12px;
padding:12px 22px;border-radius:var(--pill-r,999px);
background:rgba(156,125,46,.07);color:var(--ink);
border:1px solid rgba(156,125,46,.32);
font:inherit;cursor:pointer;
font-size:15px;font-weight:500;letter-spacing:.005em;
transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.reiter-tab:hover{
background:rgba(156,125,46,.12);border-color:rgba(156,125,46,.45);
transform:translateY(-2px) scale(1.05);
}
.reiter-tab{transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.6,.2,1)}
.reiter-tab .n{
font-size:12px;font-weight:500;color:var(--ink-soft);
transition:color .2s ease;
}
.reiter-tab.active,
.reiter-tab.active:hover{
background:var(--green-deep);color:#ffffff;border-color:var(--green-deep);
}
.reiter-tab.active .n{color:rgba(255,255,255,.72)}
.reiter-panels{position:relative}
.reiter-panel{display:none}
.reiter-panel.active{display:grid}
.reiter-panel{
grid-template-columns:1.05fr 1fr;align-items:stretch;gap:0;
background:#ffffff;
border:1px solid var(--line-soft);
border-radius:24px;overflow:hidden;
box-shadow:0 1px 0 rgba(156,125,46,.03), 0 24px 60px -20px rgba(156,125,46,.18);
}
.reiter-panel .text{
text-align:left;
padding:56px 56px 56px 60px;
display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.reiter-panel h3{
font-family:var(--sans);font-weight:500;font-size:clamp(28px,3vw,44px);
letter-spacing:-.018em;color:var(--ink);margin:0;line-height:1.1;
}
.reiter-panel p{
color:var(--ink);font-size:17px;line-height:1.6;margin:0;max-width:44ch;
}
.reiter-panel .image{
background:var(--green-deep);min-height:340px;
position:relative;overflow:hidden;
}
.reiter-panel .image img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){
.reiter-panel{grid-template-columns:1fr;gap:28px}
.reiter-panel .image{min-height:240px;order:-1}
.reiter-tabs{margin-bottom:36px}
}
/* ————————————————————————————————————————————————————
Scroll-Highlight-Text — Headline färbt sich Wort für Wort
beim Scrollen von blass-grün auf voll-grün
———————————————————————————————————————————————————— */
.scroll-text{
font-family:var(--sans);font-weight:500;
font-size:clamp(28px,3.4vw,52px);
line-height:1.2;letter-spacing:-.018em;
color:rgba(156,125,46,.18);
max-width:28ch;margin:0 auto;text-align:center;
text-wrap:balance;
}
.scroll-text span{
transition:color .55s cubic-bezier(.22,.7,.15,1);
will-change:color;
}
.scroll-text span.on{color:var(--ink)}
@media(prefers-reduced-motion:reduce){
.scroll-text{color:var(--ink)}
.scroll-text span{color:inherit !important}
}
/* ————————————————————————————————————————————————————
Reading-Progress-Bar — dünne grüne Linie am Viewport-Rand
Zeigt Scroll-Position der ganzen Seite
———————————————————————————————————————————————————— */
.progress-bar{
position:fixed;top:0;left:0;right:0;height:2px;
background:transparent;z-index:100;pointer-events:none;
}
.progress-bar__fill{
height:100%;background:var(--green-deep);
transform-origin:0 50%;transform:scaleX(0);
transition:transform .08s linear;
}
/* ————————————————————————————————————————————————————
Reveal-on-scroll — zweigleisig:
· Modern (Scroll-Driven Animations): CSS-nativ, kein JS
· Fallback (JS IntersectionObserver setzt .on)
———————————————————————————————————————————————————— */
.reveal{
opacity:0;transform:translateY(24px);
transition:opacity .8s ease, transform .8s cubic-bezier(.22,.7,.15,1);
will-change:opacity,transform;
}
.reveal.on{opacity:1;transform:translateY(0)}
/* CSS-native Variante — übernimmt sobald der Browser scroll-timeline kann.
Ersetzt die JS-Steuerung komplett, ohne Class-Toggle. */
@supports (animation-timeline: view()){
.reveal{
opacity:1;transform:none;transition:none;will-change:auto;
animation:dhs-reveal linear both;
animation-timeline:view();
animation-range:entry 5% entry 45%;
}
@keyframes dhs-reveal{
from{opacity:0;transform:translateY(24px)}
to {opacity:1;transform:translateY(0)}
}
}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none;animation:none}
}
/* ————————————————————————————————————————————————————
View Transitions — nahtloser Übergang beim Seitenwechsel.
Funktioniert nur über http(s):// (nicht file://).
———————————————————————————————————————————————————— */
@view-transition{
navigation:auto;
}
::view-transition-old(root),
::view-transition-new(root){
animation-duration:.42s;
animation-timing-function:cubic-bezier(.22,.7,.15,1);
}
/* Header + Chip-Nav bleiben persistent (crossfaden nicht) */
.site-header{view-transition-name:dhs-header}
.chip-nav{view-transition-name:dhs-chip-nav}
@media(prefers-reduced-motion:reduce){
::view-transition-old(root),
::view-transition-new(root){animation:none}
}
/* ————————————————————————————————————————————————————
Countup — große Zahlen die beim Sichtbarwerden hochzählen
———————————————————————————————————————————————————— */
.countup-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center;
border-top:1px solid var(--ink);padding-top:0;
}
.countup-item{
padding:40px 24px 0;
border-left:1px solid var(--line);
}
.countup-item:first-child{border-left:none}
.countup-item .num{
font-family:var(--sans);font-weight:500;
font-size:clamp(52px,6.4vw,96px);letter-spacing:-.028em;line-height:1;
color:var(--ink);font-variant-numeric:tabular-nums;
display:inline-flex;align-items:baseline;gap:0;
}
.countup-item .num .suffix{
font-weight:500;color:var(--ink);letter-spacing:-.02em;
margin-left:2px;
}
.countup-item .label{
margin-top:16px;font-size:13px;color:var(--ink-soft);
letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
@media(max-width:820px){
.countup-row{grid-template-columns:1fr 1fr;gap:0}
.countup-item:nth-child(2){border-left:1px solid var(--line)}
.countup-item:nth-child(3){border-left:none;border-top:1px solid var(--line);padding-top:40px;margin-top:16px}
.countup-item:nth-child(4){border-top:1px solid var(--line);padding-top:40px;margin-top:16px}
}
/* ————————————————————————————————————————————————————
Statement-Field — vollflächig grüne Zäsur zwischen Sektionen.
Weißer Text auf --green-deep, großes Statement,
optionales Ghost-Wort im Hintergrund.
———————————————————————————————————————————————————— */
.statement{
background:var(--green-deep);
color:#ffffff;
padding:200px 0 180px;
border-top:none;border-bottom:none;
position:relative;overflow:hidden;
view-transition-name:none; /* verhindert Konflikt mit persistenten Nav-Elementen */
}
.statement > .wrap,
.statement > .wrap--wide{position:relative;z-index:2;text-align:center}
/* Eyebrow-Pill invertiert für dunklen Ground */
.statement .k{
color:#ffffff;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.24);
padding:10px 20px;border-radius:var(--pill-r,999px);
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.statement h2{
font-family:var(--sans);
font-weight:400;
font-size:clamp(38px,5.4vw,82px);
letter-spacing:-.028em;line-height:1.08;
margin:56px auto 64px;color:#ffffff;
max-width:22ch;text-wrap:balance;
}
.statement .lede{
font-size:clamp(17px,1.4vw,20px);
color:rgba(255,255,255,.82);line-height:1.6;
max-width:52ch;margin:0 auto 56px;font-weight:400;
}
/* Belegzeilen — Auszeichnungen, Kooperationen, Zahlen */
.statement .credits{
display:flex;flex-direction:column;gap:14px;
font-size:14px;color:rgba(255,255,255,.68);line-height:1.5;
max-width:58ch;padding-top:40px;border-top:1px solid rgba(255,255,255,.16);
margin-top:24px;
}
.statement .credits span{position:relative;padding-left:26px}
.statement .credits span::before{
content:"";position:absolute;left:0;top:.68em;
width:14px;height:1px;background:rgba(255,255,255,.4);
}
.statement .credits span strong{color:#ffffff;font-weight:400}
/* Ghost-Wort im Hintergrund — schwebt rechts, halb raus. Text via data-ghost. */
.statement .ghost{
position:absolute;
top:50%;right:-6%;
transform:translateY(-50%);
font-family:var(--sans);font-weight:500;
font-size:clamp(200px,24vw,380px);
letter-spacing:-.04em;line-height:.82;
color:rgba(255,255,255,.055);
white-space:nowrap;text-transform:uppercase;
z-index:1;pointer-events:none;user-select:none;
}
.statement .ghost + .ghost{top:auto;bottom:-8%;right:auto;left:-4%;transform:none}
/* Modifier: kompakter */
.statement.compact{padding:120px 0 100px}
.statement.compact h2{font-size:clamp(40px,5.5vw,80px)}
/* Selektion invertieren */
.statement ::selection{background:#ffffff;color:var(--green-deep)}
@media(max-width:820px){
.statement{padding:100px 0 90px}
.statement .ghost{font-size:clamp(140px,44vw,220px);right:-12%}
}
/* Statement — Logo-Zeile (Wortmarken oder echte SVGs)
Horizontale Reihe, mittig, unter dem Trennstrich. */
.statement .logos{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:28px 56px;
padding-top:56px;margin-top:32px;
border-top:1px solid rgba(255,255,255,.16);
}
.statement .logos .mark{
font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.72);line-height:1;
display:inline-flex;align-items:center;
}
.statement .logos img{
height:32px;width:auto;
filter:brightness(0) invert(1);
opacity:.78;
}
@media(max-width:640px){
.statement .logos{gap:20px 32px;padding-top:40px}
.statement .logos .mark{font-size:12px}
}
/* ————————————————————————————————————————————————————
DHS Ink-Reveal — Text erscheint Wort für Wort beim Scrollen.
Wörter starten blass und faden zur Vollfarbe, sobald im Viewport-Mittel.
Kein Layout-Shift, kein Blur, keine Transform. Nur Farbsättigung.
Steuert JS-Klasse:
· .ink-reveal auf Text-Container
· .ink-word auf einzelnen Wörtern (JS zerlegt)
· .on wird gesetzt sobald das Wort sichtbar ist
———————————————————————————————————————————————————— */
/* Standard: helles Textgrün auf weißem Ground → volles --ink */
.ink-reveal .ink-word{
color:rgba(156,125,46,.16);
transition:color .55s cubic-bezier(.22,.7,.15,1);
will-change:color;
}
.ink-reveal .ink-word.on{
color:var(--ink);
}
/* Weiche Text-Ziele (Lede, Intro, Beschreibungen): faden nicht auf --ink,
sondern auf ihre passive Farbe --ink-soft */
.hero-lead.ink-reveal .ink-word.on,
.lede.ink-reveal .ink-word.on,
.intro.ink-reveal .ink-word.on,
.leist-list .desc.ink-reveal .ink-word.on,
.split-card p.ink-reveal .ink-word.on,
.prog-card .lede.ink-reveal .ink-word.on,
.stack-card p.ink-reveal .ink-word.on,
.area-card p.ink-reveal .ink-word.on,
.credential-card p.ink-reveal .ink-word.on{
color:var(--ink-soft);
}
/* Alle grün-gefüllten Grounds — voll-weißer Text, kein Blass-Effekt.
Ink-Reveal bleibt technisch aktiv, aber die Wörter sind immer 100% weiß. */
.statement .ink-reveal .ink-word,
.statement .ink-reveal .ink-word.on,
.panel-full .ink-reveal .ink-word,
.panel-full .ink-reveal .ink-word.on,
.top-block.green .ink-reveal .ink-word,
.top-block.green .ink-reveal .ink-word.on,
.symptom-card .ink-reveal .ink-word,
.symptom-card .ink-reveal .ink-word.on,
.stack-card.dark .ink-reveal .ink-word,
.stack-card.dark .ink-reveal .ink-word.on,
[data-dark] .ink-reveal .ink-word,
[data-dark] .ink-reveal .ink-word.on,
.site-footer .ink-reveal .ink-word,
.site-footer .ink-reveal .ink-word.on{
color:#ffffff;
}
/* Beschreibungs-Absätze (Lede/Intro) auf grünem Ground: leicht softer,
aber immer noch echtes Weiß mit hoher Opacity — kein Grünstich */
.statement .lede.ink-reveal .ink-word,
.statement .lede.ink-reveal .ink-word.on,
.panel-full p.ink-reveal .ink-word,
.panel-full p.ink-reveal .ink-word.on,
[data-dark] .lede.ink-reveal .ink-word,
[data-dark] .lede.ink-reveal .ink-word.on,
[data-dark] .intro.ink-reveal .ink-word,
[data-dark] .intro.ink-reveal .ink-word.on,
[data-dark] p.ink-reveal .ink-word,
[data-dark] p.ink-reveal .ink-word.on{
color:rgba(255,255,255,.9);
}
@media(prefers-reduced-motion:reduce){
.ink-reveal .ink-word{color:inherit !important;transition:none !important}
}
/* ————————————————————————————————————————————————————
Fade-In — Karten, Bilder, Zahlen faden sanft ein.
Nur Opacity, kein Lift, kein Blur. Sehr dezent.
Karten sind praktisch immer sichtbar, werden nur beim Scrollen
scharfgezogen. Trigger früh (siehe JS rootMargin), damit sie
schon fast fertig gefaded sind wenn man sie erreicht.
———————————————————————————————————————————————————— */
.fade-in{
opacity:.55;
transition:opacity 1.4s cubic-bezier(.16,1,.3,1);
will-change:opacity;
}
.fade-in.on{opacity:1}
@media(prefers-reduced-motion:reduce){
.fade-in{opacity:1 !important;transition:none !important}
}
/* ————————————————————————————————————————————————————
Line-In — dünne Trennstriche laufen von links nach rechts ein.
Ersetzt die border-top durch ein animiertes Pseudo-Element.
———————————————————————————————————————————————————— */
.line-in{
position:relative;
border-top-color:transparent !important;
}
.line-in::before{
content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
background:var(--line);
transform:scaleX(0);transform-origin:left;
transition:transform 1s cubic-bezier(.22,.7,.15,1);
}
.line-in.on::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
.line-in{border-top-color:var(--line) !important}
.line-in::before{display:none}
}
/* ————————————————————————————————————————————————————
Optische Zentrierung für Uppercase-Pills mit padding
Nur für Pills mit Rahmen/Füllung — text-indent greift auf
inline-flex nicht zuverlässig, deshalb via asymmetrischem padding.
Für Klassen wo weder padding noch text-indent gesetzt sind,
hilft die kleine text-indent-Shift.
———————————————————————————————————————————————————— */
.setting,
.chip-nav a,
.reiter-tab,
.area-card .num,
.area-card .setting,
.area-head .setting,
.statement .k,
.credential-card .k{
padding-inline-start:calc(16px + .07em);
padding-inline-end:calc(16px - .07em);
}
/* Für frei stehende Uppercase-Labels (kein padding-Container) */
.k:not(.sec-head .k):not(.statement .k):not(.split-card .text .k):not(.prog-card .info .k):not(.stack-card .info .k),
.hero-eyebrow,
.scroll-hero__eyebrow,
.countup-item .label{
text-indent:.12em;
}
/* ————————————————————————————————————————————————————
Karten-Hover — smoother Transitions
Deckt alle Karten-Typen ab. Kombiniert opacity (Fade-In)
mit transform/box-shadow/border-color (Hover) in einer Regel.
———————————————————————————————————————————————————— */
.split-card,
.prog-card,
.area-card,
.stack-card,
.step-card,
.feature-card,
.service-card,
.credential-card,
.symptom-card,
.testimonial-card{
transition:
opacity 1.4s cubic-bezier(.16,1,.3,1),
transform .6s cubic-bezier(.22,.7,.15,1),
box-shadow .6s cubic-bezier(.22,.7,.15,1),
border-color .6s cubic-bezier(.22,.7,.15,1),
background-color .35s ease !important;
}
/* ————————————————————————————————————————————————————
Site Footer — grüner Panel, fast edge-to-edge, rounded
Claim links, Menüspalten rechts, Marken-Zeile, Legal unten
———————————————————————————————————————————————————— */
.site-footer{
padding:24px;
background:transparent;
border-top:none;
margin:0;
display:block;
}
.footer-panel{
background:var(--green-deep);
color:#ffffff;
border-radius:40px;
padding:88px 88px 40px;
position:relative;overflow:hidden;
}
/* Großer CTA-Block */
.footer-cta{
display:grid;grid-template-columns:1fr auto auto;align-items:baseline;
column-gap:32px;row-gap:16px;
padding-bottom:72px;
border-bottom:1px solid rgba(255,255,255,.14);
color:#ffffff;text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-cta__label{
font-family:var(--sans);font-weight:400;
font-size:clamp(36px,4.6vw,68px);letter-spacing:-.028em;line-height:1.02;
color:#ffffff;
}
.footer-cta__meta{
font-size:14px;color:rgba(255,255,255,.55);
max-width:32ch;text-align:right;line-height:1.5;
}
.footer-cta__arrow{
font-size:34px;color:#ffffff;line-height:1;
transition:transform .4s cubic-bezier(.22,.7,.15,1);
display:inline-block;align-self:center;
}
.footer-cta:hover .footer-cta__arrow{transform:translateX(8px)}
.footer-cta:hover .footer-cta__label{color:#ffffff}
/* 4-Spalten-Info-Grid */
.footer-info{
display:grid;grid-template-columns:1.2fr 1.1fr 1fr .8fr;
gap:64px;
padding:56px 0;
border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-info .footer-col{
display:flex;flex-direction:column;gap:14px;
}
.footer-info .k{
font-size:11px;font-weight:500;letter-spacing:.22em;
color:rgba(255,255,255,.42);
padding:0 !important;background:none !important;border:none !important;
text-indent:0 !important;
margin-bottom:8px;
}
.footer-info address{
font-style:normal;color:rgba(255,255,255,.88);
font-size:16px;line-height:1.55;
}
.footer-info .hours{display:flex;flex-direction:column;gap:6px}
.footer-info .hours > div:not(.hours-status){
color:rgba(255,255,255,.88);font-size:15px;line-height:1.55;
}
.hours-status{
display:inline-flex;align-items:center;gap:10px;
margin-top:14px;
font-size:13px;color:#ffffff;font-weight:500;letter-spacing:.002em;
padding:8px 14px 8px 12px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
border-radius:var(--pill-r,999px);align-self:flex-start;
}
.hours-dot{
width:9px;height:9px;border-radius:50%;
background:#ffffff;flex:none;
animation:dot-blink 1.6s ease-in-out infinite;
}
.hours-status.is-open{
background:rgba(74,222,128,.16);
border-color:rgba(74,222,128,.4);
}
.hours-status.is-open .hours-dot{background:#4ade80}
.hours-status.is-open .hours-label{color:#ffffff}
.hours-status.is-closed{
background:rgba(255,204,136,.12);
border-color:rgba(255,204,136,.28);
}
.hours-status.is-closed .hours-dot{background:#ffcc88}
.hours-status.is-closed .hours-label{color:#ffffff}
/* Blink-Puls für den Live-Dot — sichtbar in Opacity, für alle Status-Farben */
@keyframes dot-blink{
0%,100%{opacity:1;transform:scale(1)}
50% {opacity:.35;transform:scale(.88)}
}
.footer-link{
color:rgba(255,255,255,.88);font-size:16px;font-weight:400;line-height:1.4;
letter-spacing:-.005em;border-bottom:none;padding:0;
transition:color .25s ease;
align-self:flex-start;
}
.footer-link:hover{color:#ffffff}
.footer-notice{
padding:22px 0;
border-bottom:1px solid rgba(255,255,255,.14);
font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.005em;
}
.footer-bottom{
padding-top:28px;
display:grid;grid-template-columns:1fr auto auto;align-items:center;
gap:24px 40px;
font-size:12px;color:rgba(255,255,255,.42);letter-spacing:.02em;
}
.footer-legal{display:flex;gap:28px;flex-wrap:wrap}
.footer-legal a{
font-size:12px;color:rgba(255,255,255,.42);
border-bottom:none;letter-spacing:.02em;
transition:color .25s ease;
}
.footer-legal a:hover{color:#ffffff}
.footer-lang{display:flex;gap:4px}
.footer-lang a{
font-size:12px;color:rgba(255,255,255,.42);border-bottom:none;
padding:4px 10px;border-radius:var(--pill-r,999px);letter-spacing:.06em;
transition:color .25s, background .25s;
}
.footer-lang a[aria-current="true"]{color:#ffffff;background:rgba(255,255,255,.08)}
.footer-lang a:hover{color:#ffffff}
@media(max-width:900px){
.site-footer{padding:16px}
.footer-panel{padding:56px 36px 28px;border-radius:28px}
.footer-cta{grid-template-columns:1fr auto;padding-bottom:48px}
.footer-cta__meta{grid-column:1/-1;text-align:left;order:3;max-width:44ch}
.footer-info{grid-template-columns:1fr 1fr;gap:36px;padding:44px 0}
.footer-notice{padding:18px 0}
.footer-bottom{grid-template-columns:1fr;gap:16px;padding-top:24px}
}
@media(max-width:560px){
.footer-info{grid-template-columns:1fr}
}
/* ————————————————————————————————————————————————————
Footer 2.0 — Corporate Klinik-Style
Newsletter · Disclaimer · 5-Spalten-Menü · Bottom
———————————————————————————————————————————————————— */
/* Newsletter-Zeile */
.footer-news{
display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;
padding-bottom:44px;
border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-news__title{
font-family:var(--sans);font-weight:400;
font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;line-height:1.18;
color:#ffffff;margin:0;max-width:24ch;text-wrap:balance;
}
.footer-news__form{
display:flex;gap:8px;align-items:center;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
border-radius:var(--pill-r,999px);padding:6px 6px 6px 24px;
transition:border-color .25s ease, background .25s ease;
}
.footer-news__form:focus-within{
border-color:rgba(255,255,255,.4);
background:rgba(255,255,255,.12);
}
.footer-news__form input{
flex:1;min-width:0;
background:transparent;border:none;outline:none;
color:#ffffff;font-family:var(--sans);font-size:15px;padding:14px 0;
}
.footer-news__form input::placeholder{color:rgba(255,255,255,.45)}
.footer-news__form button{
flex:none;width:44px;height:44px;border-radius:50%;
background:#ffffff;color:var(--green-deep);
border:none;font-size:20px;cursor:pointer;
transition:transform .3s cubic-bezier(.22,.7,.15,1), background .25s ease;
display:grid;place-items:center;
}
.footer-news__form button:hover{transform:translateX(3px);background:#f3faf6}
/* Disclaimer */
.footer-disclaimer{
padding:32px 0;margin:0;
border-bottom:1px solid rgba(255,255,255,.14);
font-size:13px;line-height:1.6;color:rgba(255,255,255,.5);
max-width:96ch;letter-spacing:.002em;
}
/* Menü-Grid — 5 Spalten */
.footer-menu{
display:grid;grid-template-columns:repeat(5, 1fr);
gap:40px;
padding:56px 0;
border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-menu .footer-col{
display:flex;flex-direction:column;
}
.footer-col__title{
font-family:var(--sans);font-weight:500;font-size:15px;
color:#ffffff;letter-spacing:-.005em;
margin:0 0 16px;
}
.footer-col__title--sub{margin-top:32px}
.footer-menu ul{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:10px;
}
.footer-menu li a{
color:#ffffff;font-size:14px;font-weight:400;line-height:1.4;
letter-spacing:.002em;
border-bottom:none;padding:0;
transition:opacity .2s ease;
opacity:1;
}
.footer-menu li a:hover{opacity:.75;color:#ffffff}
.footer-menu address{
font-style:normal;color:#ffffff;
font-size:14px;line-height:1.55;margin:0 0 10px;
}
.footer-menu .footer-link{
color:#ffffff;font-size:14px;font-weight:400;
border-bottom:none;
align-self:flex-start;
transition:opacity .2s ease;
opacity:1;
}
.footer-menu .footer-link:hover{opacity:.75;color:#ffffff}
/* Sprechzeiten mit Live-Ticker */
.footer-menu .hours{display:flex;flex-direction:column;gap:6px}
.footer-menu .hours-line{
color:#ffffff;font-size:14px;line-height:1.55;
}
.footer-menu .hours-line--dim{color:#ffffff;opacity:.5}
/* Bottom */
.footer-bottom{
padding-top:24px;
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:32px;
font-size:12px;color:rgba(255,255,255,.42);letter-spacing:.02em;
}
/* Sprachumschalter — Details/Summary Popover mit Globus */
.footer-lang{position:relative}
.footer-lang > summary{
list-style:none;cursor:pointer;outline:none;
display:inline-flex;align-items:center;gap:10px;
padding:8px 14px 8px 12px;border-radius:var(--pill-r,999px);
color:rgba(255,255,255,.72);font-size:13px;letter-spacing:.005em;
transition:background .2s ease, color .2s ease;
-webkit-tap-highlight-color:transparent;
}
.footer-lang > summary::-webkit-details-marker{display:none}
.footer-lang > summary::marker{display:none}
.footer-lang > summary:hover{color:#ffffff;background:rgba(255,255,255,.08)}
.footer-lang[open] > summary{color:#ffffff;background:rgba(255,255,255,.08)}
.footer-lang__globe{width:16px;height:16px;flex:none;stroke:currentColor}
.footer-lang__current{font-weight:400;letter-spacing:.002em}
.footer-lang__menu{
position:absolute;bottom:calc(100% + 10px);left:0;
min-width:180px;
background:#ffffff;
border-radius:18px;
padding:6px;
box-shadow:0 20px 40px -12px rgba(0,0,0,.28), 0 4px 12px -2px rgba(0,0,0,.1);
display:flex;flex-direction:column;
z-index:10;
animation:lang-menu-in .18s ease-out;
}
@keyframes lang-menu-in{
from{opacity:0;transform:translateY(6px)}
to {opacity:1;transform:translateY(0)}
}
.footer-lang__menu a{
padding:16px 20px;
color:var(--ink);font-size:15px;font-weight:500;letter-spacing:-.005em;
border:none;border-radius:12px;
transition:background .18s ease;
}
.footer-lang__menu a + a{
margin-top:1px;border-top:1px solid var(--line-soft);border-radius:0 0 12px 12px;
}
.footer-lang__menu a:first-child{border-radius:12px 12px 0 0}
.footer-lang__menu a:hover{background:rgba(156,125,46,.06);color:var(--ink)}
.footer-lang__menu a[aria-current="true"]{color:var(--ink)}
.footer-copy{text-align:center}
.footer-legal{display:flex;gap:28px;flex-wrap:wrap;justify-content:flex-end}
.footer-legal a{
font-size:12px;color:rgba(255,255,255,.42);
border-bottom:none;letter-spacing:.02em;
transition:color .25s ease;
}
.footer-legal a:hover{color:#ffffff}
/* CTA-Band vor dem Footer — großer Termin-Pill */
.cta-band{
padding:120px 24px 60px;text-align:center;
border-top:none;background:transparent;
}
.cta-band .wrap{
display:flex;flex-direction:column;align-items:center;gap:20px;
max-width:none;
}
.cta-pill{
display:inline-flex;align-items:center;gap:28px;
padding:22px 44px;
background:var(--green-deep);color:#ffffff;
border-radius:var(--pill-r,999px);border:1px solid var(--green-deep);
font-family:var(--sans);font-size:clamp(20px,2.4vw,32px);
font-weight:500;letter-spacing:-.02em;
text-decoration:none;
box-shadow:0 12px 40px -14px rgba(156,125,46,.35);
transition:background .35s cubic-bezier(.22,.7,.15,1),
transform .5s cubic-bezier(.22,.7,.15,1),
box-shadow .5s ease,
padding .35s ease;
}
.cta-pill:hover{
background:var(--green-deep-2);color:#ffffff;
transform:translateY(-4px);
box-shadow:0 24px 56px -18px rgba(156,125,46,.45);
padding-right:52px;
}
.cta-pill__arrow{
display:inline-block;
transition:transform .4s cubic-bezier(.22,.7,.15,1);
}
.cta-pill:hover .cta-pill__arrow{transform:translateX(6px)}
.cta-band__meta{
font-size:14px;color:var(--ink-soft);margin:0;letter-spacing:-.005em;
}
@media(max-width:1100px){
.footer-menu{grid-template-columns:repeat(3, 1fr);row-gap:56px}
}
@media(max-width:820px){
.footer-news{grid-template-columns:1fr;gap:24px}
.footer-menu{grid-template-columns:1fr 1fr;row-gap:48px;padding:44px 0}
.footer-bottom{grid-template-columns:1fr;gap:16px;text-align:left}
.footer-copy{text-align:left}
.footer-legal{justify-content:flex-start}
}
@media(max-width:520px){
.footer-menu{grid-template-columns:1fr;gap:40px}
}
/* Footer-Brand-Zeile — großer Marken-Anker oben im Footer
Als Platzhalter mit Wortmarke, später gegen echtes SVG-Logo austauschbar. */
.footer-brand{
display:flex;justify-content:space-between;align-items:flex-end;
gap:32px;flex-wrap:wrap;
padding-bottom:56px;margin-bottom:56px;
border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand__mark{
font-family:var(--sans);font-weight:400;
font-size:clamp(32px,4.2vw,60px);letter-spacing:-.028em;line-height:1;
color:#ffffff;text-decoration:none;border:none;padding:0;
}
.footer-brand__mark:hover{color:#ffffff;opacity:.85}
.footer-brand__sub{
font-size:13px;font-weight:400;letter-spacing:.005em;
color:rgba(255,255,255,.5);
padding-bottom:6px;
}
@media(max-width:820px){
.footer-brand{padding-bottom:36px;margin-bottom:36px;gap:16px;align-items:flex-start}
.footer-brand__sub{padding-bottom:0}
}
/* Text-Selektion auf grünen Grounds — reines Weiß, grüner Text */
.site-footer ::selection,
.site-footer *::selection,
.statement ::selection,
.statement *::selection,
.panel-full ::selection,
.panel-full *::selection,
.top-block.green ::selection,
.top-block.green *::selection,
.symptom-card ::selection,
.symptom-card *::selection,
.stack-card.dark ::selection,
.stack-card.dark *::selection,
[data-dark] ::selection,
[data-dark] *::selection{
background-color:#ffffff !important;
color:var(--green-deep) !important;
text-shadow:none !important;
}
.site-footer ::-moz-selection,
.site-footer *::-moz-selection,
.statement ::-moz-selection,
.statement *::-moz-selection,
.panel-full ::-moz-selection,
.panel-full *::-moz-selection,
.top-block.green ::-moz-selection,
.top-block.green *::-moz-selection,
.symptom-card ::-moz-selection,
.symptom-card *::-moz-selection,
.stack-card.dark ::-moz-selection,
.stack-card.dark *::-moz-selection,
[data-dark] ::-moz-selection,
[data-dark] *::-moz-selection{
background-color:#ffffff !important;
color:var(--green-deep) !important;
text-shadow:none !important;
}
/* Footer: dezenter Text (z. B. "WhatsApp — folgt") — keine aktive Link-Farbe */
.footer-muted{
color:rgba(255,255,255,.5);
font-size:14px;font-weight:400;line-height:1.4;
letter-spacing:.002em;font-style:italic;
}
/* ————————————————————————————————————————————————————
Feature-Row — alternierender Text-Bild-Wechsel
(Referenz: Orthopädie-Klinik-Praxen 2026)
Links Text, rechts Bild — nächste Reihe umgekehrt
———————————————————————————————————————————————————— */
.feature-row{
display:grid;grid-template-columns:1fr 1fr;
gap:80px;align-items:center;
padding:80px 0;
}
.feature-row + .feature-row{
border-top:1px solid var(--line-soft);
}
.feature-row.reverse .feature-row__text{order:2}
.feature-row.reverse .feature-row__media{order:1}
.feature-row__text{
padding:0 8px;
}
.feature-row__text .k{
display:inline-block;margin-bottom:20px;color:var(--ink);
padding:8px 16px;background:rgba(156,125,46,.07);
border:1px solid rgba(156,125,46,.28);border-radius:var(--pill-r,999px);
font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.feature-row__text h2{
font-family:var(--sans);font-weight:500;
font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;line-height:1.1;
margin:0 0 24px;color:var(--ink);text-wrap:balance;
}
.feature-row__text p{
font-size:17px;line-height:1.65;color:var(--ink-soft);
margin:0 0 18px;max-width:44ch;
}
.feature-row__text p:last-of-type{margin-bottom:32px}
.feature-row__text .cta{
display:inline-block;
padding:14px 28px;border-radius:var(--pill-r,999px);
background:var(--green-deep);color:#ffffff;
font-size:15px;font-weight:500;letter-spacing:.005em;
border:1px solid var(--green-deep);
transition:background .35s ease, transform .3s ease;
}
.feature-row__text .cta:hover{
background:var(--green-deep-2);color:#ffffff;transform:translateY(-2px);
}
.feature-row__media{
position:relative;overflow:hidden;
border-radius:24px;aspect-ratio:5/4;
background:linear-gradient(135deg,#e8f0eb,#d4e5db);
}
.feature-row__media img{
width:100%;height:100%;object-fit:cover;display:block;
}
.feature-row__media[data-video]::after{
content:"▶";
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:76px;height:76px;border-radius:50%;
background:var(--green-deep);color:#ffffff;
display:grid;place-items:center;
font-size:26px;line-height:1;padding-left:6px;
box-shadow:0 12px 32px -8px rgba(0,0,0,.25);
cursor:pointer;
transition:transform .35s cubic-bezier(.22,.7,.15,1);
}
.feature-row__media[data-video]:hover::after{transform:translate(-50%,-50%) scale(1.08)}
@media(max-width:900px){
.feature-row{grid-template-columns:1fr;gap:40px;padding:56px 0}
.feature-row.reverse .feature-row__text{order:0}
.feature-row.reverse .feature-row__media{order:0}
.feature-row__text{padding:0}
}
/* ————————————————————————————————————————————————————
Wide-Image — großes edge-to-edge Bild als Full-Width-Statement
(Referenz: Orthopädie-Klinik-Hero 2026)
———————————————————————————————————————————————————— */
.wide-image{
width:auto;
aspect-ratio:16/6;
overflow:hidden;
background:linear-gradient(135deg,#e8f0eb,#d4e5db);
position:relative;
margin:0 24px;padding:0;border-radius:40px; /* eingerückt wie alle großen Bilder (Regelwerk 6c), mobil 16px / Radius 24 */
border:none;
}
@media(max-width:640px){.wide-image{margin:0 16px;border-radius:24px}}
.wide-image img{
width:100%;height:100%;object-fit:cover;display:block;
}
.wide-image[data-video]::after{
content:"▶";
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:96px;height:96px;border-radius:50%;
background:var(--green-deep);color:#ffffff;
display:grid;place-items:center;
font-size:32px;line-height:1;padding-left:8px;
box-shadow:0 16px 48px -12px rgba(0,0,0,.35);
cursor:pointer;
transition:transform .35s cubic-bezier(.22,.7,.15,1);
}
.wide-image[data-video]:hover::after{transform:translate(-50%,-50%) scale(1.08)}
/* Variante: mit Text-Overlay unten links */
.wide-image__overlay{
position:absolute;bottom:56px;left:56px;right:auto;
color:#ffffff;max-width:44ch;z-index:2;
}
.wide-image__overlay h2{
font-family:var(--sans);font-weight:500;
font-size:clamp(28px,3.4vw,52px);letter-spacing:-.02em;line-height:1.08;
margin:0 0 12px;color:#ffffff;text-wrap:balance;
text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.wide-image__overlay p{
font-size:16px;line-height:1.55;color:rgba(255,255,255,.92);
margin:0;text-shadow:0 1px 12px rgba(0,0,0,.3);
}
.wide-image::before{
/* Optionales Gradient-Overlay für Text-Lesbarkeit */
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.35) 100%);
pointer-events:none;opacity:0;
transition:opacity .35s ease;
}
.wide-image.has-overlay::before{opacity:1}
@media(max-width:820px){
.wide-image{aspect-ratio:4/3}
.wide-image__overlay{bottom:32px;left:32px}
}
/* Feature-Row Variante: edge-to-edge, ohne Rundungen */
.feature-row--flush .feature-row__media{border-radius:0;aspect-ratio:auto;height:100%;min-height:520px}
.feature-row--flush{padding:0;gap:0;border-top:none}
.feature-row--flush .feature-row__text{padding:80px 64px}
@media(max-width:900px){
.feature-row--flush .feature-row__text{padding:48px 32px}
.feature-row--flush .feature-row__media{min-height:280px;aspect-ratio:4/3}
}
/* ————————————————————————————————————————————————————
Symptom-Tiles — große Karten mit Icon oben, Titel, Text, Link
Für die Beschwerden-Seite (Referenz: Klinik-Style 2026)
———————————————————————————————————————————————————— */
.symptom-band{
background:linear-gradient(180deg,#f0f6f2 0%,#e5eee9 100%);
padding:96px 32px;
}
.symptom-band__inner{
max-width:1200px;margin:0 auto;
}
.symptom-band__head{
text-align:center;margin-bottom:64px;
}
.symptom-band__head h2{
font-family:var(--sans);font-weight:500;
font-size:clamp(32px,4.2vw,52px);letter-spacing:-.022em;line-height:1.05;
margin:0 0 20px;color:var(--ink);text-wrap:balance;
}
.symptom-band__head p{
font-size:17px;color:var(--ink-soft);line-height:1.6;
max-width:60ch;margin:0 auto;
}
.symptom-tiles{
display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.symptom-tile{
background:#ffffff;border-radius:20px;
padding:56px 48px 48px;
display:flex;flex-direction:column;gap:20px;
border:1px solid var(--line-soft);
text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-soft);
transition:transform .4s cubic-bezier(.22,.7,.15,1),
box-shadow .4s ease,
border-color .3s ease;
padding-bottom:48px;
}
.symptom-tile:hover{
transform:translateY(-4px);
box-shadow:0 24px 56px -20px rgba(156,125,46,.25);
border-color:rgba(156,125,46,.32);
color:var(--ink);
}
.symptom-tile__icon{
width:64px;height:64px;
display:grid;place-items:center;
color:var(--green-deep);
}
.symptom-tile__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}
.symptom-tile h3{
font-family:var(--sans);font-weight:500;
font-size:24px;letter-spacing:-.012em;line-height:1.2;
margin:12px 0 0;color:var(--ink);
}
.symptom-tile p{
font-size:16px;line-height:1.55;color:var(--ink-soft);
margin:0;flex:1;
}
.symptom-tile__more{
display:inline-flex;align-items:center;gap:6px;
color:var(--green-deep);font-size:15px;font-weight:500;
margin-top:12px;
}
.symptom-tile:hover .symptom-tile__more{color:var(--green-deep-2)}
@media(max-width:900px){
.symptom-tiles{grid-template-columns:1fr;gap:16px}
.symptom-tile{padding:40px 32px 36px}
.symptom-band{padding:64px 20px}
}
/* ————————————————————————————————————————————————————
Symptom-Finder — client-side Keyword-Chat auf beschwerden.html
Kein KI, kein Backend, keine Speicherung. Nur Content-Suche.
———————————————————————————————————————————————————— */
.symptom-finder{
padding:64px 32px;
background:linear-gradient(180deg,#f0f6f2 0%,#e5eee9 100%);
}
.symptom-finder__inner{
max-width:840px;margin:0 auto;
text-align:center;
}
.symptom-finder h2{
font-family:var(--sans);font-weight:500;
font-size:clamp(26px,3.2vw,40px);letter-spacing:-.02em;line-height:1.1;
margin:0 0 16px;color:var(--ink);text-wrap:balance;
}
.symptom-finder__lead{
font-size:16px;color:var(--ink-soft);line-height:1.55;
max-width:52ch;margin:0 auto 32px;
}
.symptom-finder__form{
display:flex;gap:8px;
background:#ffffff;border:1px solid var(--line);border-radius:var(--pill-r,999px);
padding:6px 6px 6px 24px;
box-shadow:0 4px 20px -6px rgba(156,125,46,.15);
max-width:640px;margin:0 auto;
transition:border-color .25s ease, box-shadow .25s ease;
}
.symptom-finder__form:focus-within{
border-color:var(--green-deep);
box-shadow:0 8px 32px -8px rgba(156,125,46,.28);
}
.symptom-finder__form input{
flex:1;min-width:0;
background:transparent;border:none;outline:none;
color:var(--ink);font-family:var(--sans);font-size:16px;
padding:14px 0;
}
.symptom-finder__form input::placeholder{color:var(--muted)}
.symptom-finder__form button{
flex:none;padding:12px 24px;border-radius:var(--pill-r,999px);
background:var(--green-deep);color:#ffffff;
border:none;font-family:var(--sans);font-size:14px;font-weight:500;
letter-spacing:.005em;cursor:pointer;
transition:background .25s ease, transform .3s ease;
}
.symptom-finder__form button:hover{
background:var(--green-deep-2);transform:translateY(-1px);
}
.symptom-finder__hint{
font-size:13px;color:var(--muted);margin:16px 0 0;
letter-spacing:.005em;
}
/* Ergebnis-Anzeige */
.symptom-finder__result{
margin-top:40px;text-align:left;max-width:840px;
padding:0 20px;
}
.symptom-finder__result:empty{margin-top:0}
.finder-emergency{
background:#fff4ee;
border:1px solid #e8b48f;
border-radius:16px;padding:20px 24px;
margin-bottom:20px;
color:#8a3e10;font-size:15px;line-height:1.5;
}
.finder-emergency strong{color:#5e2607;font-weight:600}
.finder-headline{
font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-soft);margin:0 0 16px;
}
.finder-noresult{
padding:20px 24px;background:#ffffff;border:1px solid var(--line);
border-radius:16px;color:var(--ink);font-size:15px;line-height:1.55;
}
.finder-noresult a{color:var(--green-deep)}
/* Kompaktere Tiles für Ergebnisse */
.symptom-finder__result .symptom-tile{
padding:32px 32px 28px;
margin-bottom:12px;
}
.symptom-finder__result .symptom-tile__icon{width:44px;height:44px}
.symptom-finder__result .symptom-tile h3{font-size:20px;margin:8px 0 0}
@media(max-width:640px){
.symptom-finder{padding:44px 20px}
.symptom-finder__form{padding:4px 4px 4px 16px;flex-direction:column;border-radius:20px;gap:6px}
.symptom-finder__form button{width:100%}
}
/* Finder-Chips — kleine Pill-Anzeige für erkannte Fachbegriffe */
.finder-chip{
display:inline-block;padding:4px 10px;
background:rgba(156,125,46,.08);border:1px solid rgba(156,125,46,.24);
border-radius:var(--pill-r,999px);
font-size:12px;color:var(--ink);letter-spacing:.005em;
margin-right:4px;text-transform:none;font-weight:500;
}
/* Finder-Loading — Spinner + "Analyse läuft"-Effekt */
.finder-loading{
display:flex;align-items:center;justify-content:center;gap:16px;
padding:32px 24px;
background:#ffffff;border:1px solid var(--line);border-radius:16px;
color:var(--ink);font-size:15px;
}
.finder-spinner{
width:24px;height:24px;flex:none;
border:2.5px solid rgba(156,125,46,.15);
border-top-color:var(--green-deep);
border-radius:50%;
animation:finder-spin .8s linear infinite;
}
@keyframes finder-spin{to{transform:rotate(360deg)}}
.finder-loading__text{
font-family:var(--sans);font-size:15px;letter-spacing:.005em;
}
.finder-loading__text::after{
content:"";
display:inline-block;width:1.2em;text-align:left;
animation:finder-dots 1.4s steps(4,end) infinite;
}
@keyframes finder-dots{
0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} 100%{content:""}
}
/* ————————————————————————————————————————————————————
DHS-Logo — komplette Logo-Datei (Symbol + Wortmarke) als CSS-Maske.
Per currentColor eingefärbt: grün im Header, weiß im Footer.
Kein separater Text-Link nötig — der Name steht im Logo selbst.
———————————————————————————————————————————————————— */
.brand-logo{
display:inline-block;
text-decoration:none;border-bottom:none;padding:0;
color:var(--ink);
transition:color .25s ease, opacity .25s ease;
}
.brand-logo:hover{color:var(--green-deep-2)}
.brand-logo__mark{
width:180px;aspect-ratio:1100/558;
background-color:currentColor;
-webkit-mask:url('bilder/logo-thin-mit-text.svg') no-repeat center/contain;
mask:url('bilder/logo-thin-mit-text.svg') no-repeat center/contain;
display:block;
}
/* Header-Größe */
.site-header .brand-logo__mark{width:170px}
/* Footer: weiß auf grün, groß und präsent */
.site-footer .brand-logo{color:#ffffff}
.site-footer .brand-logo:hover{color:#ffffff;opacity:.85}
.site-footer .brand-logo__mark{width:260px}
/* Legal-Pages Header — kompakt */
.legal-head .brand-logo__mark{width:140px}
@media(max-width:600px){
.site-header .brand-logo__mark{width:130px}
.site-footer .brand-logo__mark{width:200px}
.legal-head .brand-logo__mark{width:110px}
}
/* ══════════════════════════════════════════════════════════════
MUSTER — Header, Content, Footer auf gleicher linker Linie
══════════════════════════════════════════════════════════════
Alle Seiten benutzen dasselbe .wrap-Raster:
Logo im Header sitzt an Kante X.
Content-Text sitzt an derselben Kante X.
Logo im Footer sitzt an derselben Kante X.
══════════════════════════════════════════════════════════════ */
/* Footer wird zu einem vollbreit-grünen Block ohne Panel-Padding.
Das innere .wrap sorgt für dieselbe linke Kante wie im Header. */
.site-footer{
padding:0 !important;
background:var(--green-deep) !important;
color:#ffffff !important;
margin:0 !important;
}
.footer-panel{
background:transparent !important;
border-radius:0 !important;
padding:0 !important;
max-width:var(--max) !important;
margin:0 auto !important;
padding:80px var(--gutter, 32px) 40px !important;
}
@media(max-width:820px){
.footer-panel{padding:56px var(--gutter, 32px) 28px !important}
}
/* Footer-Brand: Logo bündig links, keine Space-Between-Ablenkung */
.footer-brand{
justify-content:flex-start !important;
padding-left:0 !important;
margin-left:0 !important;
}
.footer-brand .brand-logo,
.footer-brand .brand-logo__mark{
margin-left:0 !important;
}
/* Footer-Menu und Bottom auch bündig links */
.footer-menu,
.footer-bottom,
.footer-cta,
.footer-info,
.footer-notice{
padding-left:0 !important;
padding-right:0 !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* ══════════════════════════════════════════════════════════════
MUSTER v2 — Wrap-Verhalten in flex-Kontexten konsistent halten
══════════════════════════════════════════════════════════════ */
/* .wrap verhält sich in flex-Kontexten (z.B. .top-block > .hero)
sonst inkonsistent. Diese Regel garantiert überall:
- volle Breite bis max 1200px
- auto-zentriert
- identisches 32px Innenpadding */
.wrap{
max-width:var(--max) !important;
width:100% !important;
margin-inline:auto !important;
padding-inline:var(--gutter, 32px) !important;
box-sizing:border-box !important;
}
.wrap--wide{
max-width:1440px !important;
width:100% !important;
margin-inline:auto !important;
padding-inline:var(--gutter, 32px) !important;
box-sizing:border-box !important;
}
/* .top-block > .hero soll NICHT horizontal zentrieren.
Bei flex-column ist align-items horizontal — auf stretch zwingen. */
.top-block{
align-items:stretch !important;
}
.top-block > .hero{
align-items:stretch !important;
align-self:stretch !important;
}
/* Header, Hero, Footer nutzen ALLE das gleiche .wrap-Verhalten.
Damit sitzen Logo (Header), Hero-Text, und Logo (Footer)
garantiert auf derselben vertikalen Linie. */
.site-header > .wrap,
.hero > .wrap,
.site-footer > .footer-panel,
.site-footer .footer-panel > *{
align-self:stretch;
}
/* ══════════════════════════════════════════════════════════════
FOOTER v3 — kompakter, ruhiger, keine Umbrüche
══════════════════════════════════════════════════════════════ */
/* Logo im Footer wieder auf ruhige Größe */
.site-footer .brand-logo__mark{width:200px !important}
@media(max-width:600px){
.site-footer .brand-logo__mark{width:160px !important}
}
/* Weniger Vertikalraum um das Logo herum */
.footer-brand{
padding-bottom:36px !important;
margin-bottom:36px !important;
gap:16px !important;
}
/* Footer-Panel-Padding straffer */
.footer-panel{
padding:56px var(--gutter, 32px) 32px !important;
}
@media(max-width:820px){
.footer-panel{padding:44px var(--gutter, 32px) 24px !important}
}
/* Menü-Spalten enger — Header war kompakt, Footer sollte matchen */
.footer-menu{
padding:24px 0 !important;
gap:48px !important;
}
/* Sprechzeiten-Bubble darf nicht umbrechen */
.hours-status{
white-space:nowrap !important;
flex-wrap:nowrap !important;
}
.hours-status .hours-label{
white-space:nowrap !important;
}
/* Bottom-Zeile — Sprach-Popover flush links, gleiche Kante wie Logo */
.footer-bottom{
padding-top:20px !important;
padding-bottom:0 !important;
align-items:center !important;
}
.footer-lang{
margin-left:0 !important;
padding-left:0 !important;
}
.footer-lang > summary{
padding-left:0 !important;
margin-left:0 !important;
}
.footer-lang__globe{
margin-left:0 !important;
}
/* ══════════════════════════════════════════════════════════════
HEADER v3 — clean & statisch, kein Sprung beim Scrollen
══════════════════════════════════════════════════════════════ */
/* Header padding bleibt IMMER gleich — auch wenn is-scrolled klebt.
Kein Height-Shrink, kein Content-Sprung. */
.site-nav,
.site-header.is-scrolled .site-nav{
padding:20px 0 !important;
transition:none !important;
}
.site-header,
.site-header.is-scrolled{
padding:0 !important;
min-height:auto !important;
transition:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
background:var(--navy) !important;
}
/* Logo im Header — feste Größe, kein Skalier-Effekt */
.site-header .brand-logo__mark{
width:170px !important;
transition:none !important;
}
/* Menü rechts — feste Gaps, feste Alignment */
.navlinks{
display:flex !important;
align-items:center !important;
gap:32px !important;
flex-wrap:nowrap !important;
white-space:nowrap !important;
}
.navlinks a{
transition:color .2s ease !important;
}
/* CTA-Pille feste Maße — keine Position-Verschiebung */
.navlinks .nav-cta{
margin-left:8px !important;
padding:8px 16px !important;font-size:13px !important;line-height:1.4 !important;
flex:none !important;
}
/* Nav vertikal exakt zentriert relativ zum Logo */
.site-nav{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:32px !important;
}
/* ══════════════════════════════════════════════════════════════
FOOTER v4 — Pill zurück, Rounded Corner, gepolsterte Insel
══════════════════════════════════════════════════════════════ */
/* Äußerer Rand um die Pill */
.site-footer{
padding:24px !important;
background:transparent !important;
color:var(--ink) !important;
margin:0 !important;
}
@media(max-width:820px){
.site-footer{padding:16px !important}
}
/* Die grüne Pill — Rounded, dezentes Padding innen */
.footer-panel{
background:var(--green-deep) !important;
color:#ffffff !important;
border-radius:32px !important;
padding:64px 72px 32px !important;
max-width:none !important;
margin:0 !important;
position:relative !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
@media(max-width:820px){
.footer-panel{
border-radius:24px !important;
padding:44px 32px 24px !important;
}
}
/* Logo bündig links im Panel — kein Extra-Padding */
.footer-brand{
justify-content:flex-start !important;
padding:0 0 32px 0 !important;
margin:0 0 32px 0 !important;
border-bottom:1px solid rgba(255,255,255,.14) !important;
gap:16px !important;
}
.site-footer .brand-logo__mark{
width:180px !important;
}
@media(max-width:600px){
.site-footer .brand-logo__mark{width:140px !important}
}
/* Menü-Spalten innerhalb Pill */
.footer-menu{
padding:24px 0 !important;
gap:48px !important;
}
/* Bottom-Zeile innerhalb Pill */
.footer-bottom{
padding-top:24px !important;
border-top:1px solid rgba(255,255,255,.14) !important;
margin-top:0 !important;
}
/* ══════════════════════════════════════════════════════════════
FOOTER — Deutsch-Pill flush left an Panel-Kante
══════════════════════════════════════════════════════════════ */
.footer-lang{
margin:0 !important;
padding:0 !important;
justify-self:start !important;
}
.footer-lang > summary{
margin:0 !important;
padding:8px 16px 8px 12px !important;
align-self:flex-start !important;
}
.footer-lang__menu{
left:0 !important;
right:auto !important;
}
/* .footer-bottom Grid: erste Spalte startet ohne Extra-Padding */
.footer-bottom > *:first-child{
margin-left:0 !important;
padding-left:0 !important;
justify-self:start !important;
}
/* ══════════════════════════════════════════════════════════════
Scrollbar IMMER da — sonst verrutscht das Layout zwischen
langen und kurzen Seiten (Startseite hat Scrollbar, kürzere
Seite hat keine → 15px weniger Viewport → Menü rutscht rechts)
══════════════════════════════════════════════════════════════ */
html{
overflow-y:scroll !important;
scrollbar-gutter:stable !important;
}
body{
overflow-x:clip;
}
/* ══════════════════════════════════════════════════════════════
FOOTER v5 — größer, mit CTA-Block + Notice-Streifen
══════════════════════════════════════════════════════════════ */
/* Panel wird höher — mehr Vertikalraum für alle Sektionen */
.footer-panel{
padding:72px 72px 32px !important;
}
@media(max-width:820px){
.footer-panel{padding:48px 32px 24px !important}
}
/* Großer CTA-Block ganz oben */
.footer-cta{
display:grid !important;
grid-template-columns:1fr auto auto !important;
align-items:baseline !important;
column-gap:32px !important;
row-gap:16px !important;
padding:0 0 56px 0 !important;
margin:0 0 48px 0 !important;
border-bottom:1px solid rgba(255,255,255,.14) !important;
color:#ffffff !important;
text-decoration:none !important;
border-top:none !important;
}
.footer-cta__label{
font-family:var(--sans) !important;
font-weight:400 !important;
font-size:clamp(32px,4.2vw,60px) !important;
letter-spacing:-.028em !important;
line-height:1.02 !important;
color:#ffffff !important;
}
.footer-cta__meta{
font-size:14px !important;
color:rgba(255,255,255,.55) !important;
max-width:32ch !important;
text-align:right !important;
line-height:1.5 !important;
}
.footer-cta__arrow{
font-size:34px !important;
color:#ffffff !important;
line-height:1 !important;
transition:transform .4s cubic-bezier(.22,.7,.15,1) !important;
display:inline-block !important;
align-self:center !important;
}
.footer-cta:hover .footer-cta__arrow{transform:translateX(8px) !important}
@media(max-width:820px){
.footer-cta{
grid-template-columns:1fr auto !important;
padding:0 0 36px 0 !important;
margin:0 0 32px 0 !important;
}
.footer-cta__meta{grid-column:1 / -1 !important;text-align:left !important;max-width:none !important}
}
/* Notice-Streifen zwischen Menü und Bottom */
.footer-notice{
padding:20px 0 !important;
margin:24px 0 0 0 !important;
border-top:1px solid rgba(255,255,255,.14) !important;
font-size:13px !important;
color:rgba(255,255,255,.55) !important;
letter-spacing:.005em !important;
line-height:1.55 !important;
}
/* Brand-Sub-Zeile neben Logo */
.footer-brand{
align-items:center !important;
gap:20px !important;
padding:0 0 32px 0 !important;
margin:0 0 40px 0 !important;
}
.footer-brand__sub{
font-size:13px !important;
font-weight:400 !important;
letter-spacing:.02em !important;
color:rgba(255,255,255,.55) !important;
text-transform:uppercase !important;
}
/* ══════════════════════════════════════════════════════════════
Scrollbar-Layout-Shift v2 — Cross-Browser bulletproof
══════════════════════════════════════════════════════════════
scrollbar-gutter:stable wird nicht überall unterstützt (Safari < 18).
Der margin-Trick verschiebt die Scrollbar in den margin-Bereich,
so dass der Content-Bereich konstante Breite hat, egal ob die
Seite scrollt oder nicht.
══════════════════════════════════════════════════════════════ */
html{
overflow-y:scroll !important;
scrollbar-gutter:stable !important;
}
body{
overflow-x:clip;
margin:0;
}
/* footer-notice endgültig raus */
.footer-notice{display:none !important}
/* ══════════════════════════════════════════════════════════════
NAV-CTA — einheitlich auf allen Seiten (überschreibt inline)
══════════════════════════════════════════════════════════════ */
.navlinks .nav-cta{
position:relative !important;
margin-left:8px !important;
padding:10px 20px !important;
color:#ffffff !important;
background:var(--green-deep, #8a6e28) !important;
border:1px solid var(--green-deep, #8a6e28) !important;
border-radius:var(--pill-r,999px) !important;
font-size:14px !important;
font-weight:500 !important;
letter-spacing:.005em !important;
line-height:1.2 !important;
transition:background .2s ease, color .2s ease, border-color .2s ease !important;
overflow:visible !important;
isolation:auto !important;
}
.navlinks .nav-cta:hover{
background:var(--green-deep-2, #63501d) !important;
border-color:var(--green-deep-2, #63501d) !important;
color:#ffffff !important;
}
/* Shimmer-Overlay & andere Pseudo-Deko raus */
.navlinks .nav-cta::before,
.navlinks .nav-cta::after{
display:none !important;
content:none !important;
animation:none !important;
}
/* ══════════════════════════════════════════════════════════════
NAV — komplett einheitlich (überschreibt ALLE inline styles)
══════════════════════════════════════════════════════════════ */
/* Container */
.navlinks{
display:flex !important;
align-items:center !important;
gap:28px !important;
color:var(--ink) !important;
font-size:14px !important;
font-weight:500 !important;
flex-wrap:nowrap !important;
white-space:nowrap !important;
}
/* Alle Nav-Links (außer .nav-cta) — kein Unterstrich, konstante Metriken */
.navlinks a,
.navlinks a:visited{
border-bottom:none !important;
padding:0 !important;
margin:0 !important;
color:var(--ink) !important;
font-size:14px !important;
font-weight:500 !important;
letter-spacing:.005em !important;
line-height:1.2 !important;
text-decoration:none !important;
transition:color .2s ease !important;
position:relative !important;
}
.navlinks a:hover{
color:var(--green-deep-2, #63501d) !important;
}
.navlinks a[aria-current="page"]{
color:var(--green-deep-2, #63501d) !important;
}
/* Pseudo-elements auf Links deaktiviert (auch die Underline-Animation) */
.navlinks a:not(.nav-cta)::after,
.navlinks a:not(.nav-cta)::before{
display:none !important;
content:none !important;
animation:none !important;
}
/* NAV-CTA final — Weißer Text auf grünem Ground, garantiert
(nach ALLEN generischen .navlinks a Regeln) */
.navlinks a.nav-cta,
.navlinks a.nav-cta:visited,
.navlinks a.nav-cta:hover,
.navlinks a.nav-cta:focus{
color:#ffffff !important;
background:var(--green-deep, #8a6e28) !important;
border:1px solid var(--green-deep, #8a6e28) !important;
padding:10px 20px !important;
font-size:14px !important;
font-weight:500 !important;
border-radius:var(--pill-r,999px) !important;
line-height:1.2 !important;
margin-left:8px !important;
text-decoration:none !important;
letter-spacing:.005em !important;
}
.navlinks a.nav-cta:hover{
background:var(--green-deep-2, #63501d) !important;
border-color:var(--green-deep-2, #63501d) !important;
color:#ffffff !important;
}
/* ══════════════════════════════════════════════════════════════
Sprechzeiten-Pill im Footer — komplett weiß statt transluzent
══════════════════════════════════════════════════════════════ */
.site-footer .hours-status,
.site-footer .hours-status.is-open,
.site-footer .hours-status.is-closed{
background:#ffffff !important;
border:1px solid #ffffff !important;
color:var(--green-deep, #8a6e28) !important;
}
.site-footer .hours-status .hours-label,
.site-footer .hours-status.is-open .hours-label,
.site-footer .hours-status.is-closed .hours-label{
color:var(--green-deep, #8a6e28) !important;
font-weight:500 !important;
}
.site-footer .hours-status .hours-dot{
background:var(--green-deep, #8a6e28) !important;
}
.site-footer .hours-status.is-open .hours-dot{
background:#3fa06a !important;
}
.site-footer .hours-status.is-closed .hours-dot{
background:#d99a5a !important;
}
/* ══════════════════════════════════════════════════════════════
Header-Unterlinie: EINE einzige, dünne, vollbreite Line
══════════════════════════════════════════════════════════════ */
.site-header{
border-bottom:1px solid var(--line, rgba(156,125,46,.14)) !important;
}
.site-header > .wrap{
border-bottom:none !important;
}
.site-header::after,
.site-header::before{
display:none !important;
}
/* Auch top-block darf keinen extra Gradient/Line ziehen */
.top-block::after,
.top-block::before{
display:none !important;
}
/* ══════════════════════════════════════════════════════════════
Nav-Dropdown "Über uns"
══════════════════════════════════════════════════════════════ */
.nav-drop{
position:relative !important;
display:inline-flex !important;
align-items:center !important;
}
.nav-drop-btn{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
background:none !important;
border:none !important;
padding:0 !important;
margin:0 !important;
cursor:pointer !important;
color:var(--ink) !important;
font:inherit !important;
font-size:14px !important;
font-weight:500 !important;
letter-spacing:.005em !important;
line-height:1.2 !important;
transition:color .2s ease !important;
}
.nav-drop-btn svg{
transition:transform .25s cubic-bezier(.22,1.02,.32,1) !important;
}
.nav-drop-btn:hover,
.nav-drop.open .nav-drop-btn{
color:var(--green-deep-2, #63501d) !important;
}
.nav-drop.open .nav-drop-btn svg{
transform:rotate(180deg) !important;
}
.nav-drop-menu{
position:absolute !important;
top:100% !important;
margin-top:14px !important;
left:50% !important;
transform:translateX(-50%) translateY(-6px) !important;
min-width:180px !important;
padding:8px !important;
background:#ffffff !important;
border:1px solid var(--line, rgba(156,125,46,.18)) !important;
border-radius:14px !important;
box-shadow:0 12px 40px rgba(30,82,56,.08), 0 3px 10px rgba(30,82,56,.05) !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transition:opacity .22s ease, transform .22s cubic-bezier(.22,1.02,.32,1), visibility 0s linear .22s !important;
z-index:70 !important;
}
.nav-drop.open .nav-drop-menu{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:translateX(-50%) translateY(0) !important;
transition:opacity .22s ease, transform .22s cubic-bezier(.22,1.02,.32,1) !important;
}
/* Unsichtbare Bridge unter dem Button — hält Hover-Zustand
auch wenn der Cursor durch den 14px-Gap zum Menü wandert.
Wichtig: MUSS auf .nav-drop selbst sein, nicht auf .nav-drop-menu
(weil letzteres unsichtbar ist, wenn nicht gehovered). */
.nav-drop::after{
content:"";
position:absolute;
top:100%;
left:-20px;right:-20px;
height:20px;
background:transparent;
pointer-events:auto;
}
/* Hover-Öffnung als Backup (auf Desktop) */
@media(hover:hover) and (pointer:fine){
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:translateX(-50%) translateY(0) !important;
transition:opacity .22s ease, transform .22s cubic-bezier(.22,1.02,.32,1) !important;
}
.nav-drop:hover .nav-drop-btn svg,
.nav-drop:focus-within .nav-drop-btn svg{
transform:rotate(180deg) !important;
}
}
.nav-drop-menu a,
.nav-drop-menu a:visited{
display:block !important;
padding:9px 14px !important;
color:var(--ink) !important;
font-size:14px !important;
font-weight:400 !important;
border-radius:8px !important;
border:none !important;
text-decoration:none !important;
transition:background .15s ease, color .15s ease !important;
white-space:nowrap !important;
}
.nav-drop-menu a:hover{
background:rgba(156,125,46,.06) !important;
color:var(--green-deep-2, #63501d) !important;
}
/* Footer: 5 Spalten (Praxis · Themen · Service · Kontakt · Sprechzeiten) */
.footer-menu{
display:grid !important;
grid-template-columns:repeat(5, 1fr) !important;
gap:40px !important;
}
@media(max-width:1100px){
.footer-menu{grid-template-columns:repeat(3, 1fr) !important; row-gap:48px !important}
}
@media(max-width:720px){
.footer-menu{grid-template-columns:repeat(2, 1fr) !important; row-gap:40px !important}
}
@media(max-width:480px){
.footer-menu{grid-template-columns:1fr !important; row-gap:36px !important}
}
/* ══════════════════════════════════════════════════════════════
Hero-Einblende-Effekt — identisch zur Startseite
══════════════════════════════════════════════════════════════ */
.hero-mask{
display:block;overflow:hidden;
padding-bottom:.14em;margin-bottom:-.14em;
}
.hero-slot{
display:block;transform:translateY(110%);
animation:hero-rise .95s cubic-bezier(.22,.7,.15,1) 200ms forwards;
will-change:transform;
}
@keyframes hero-rise{
to{transform:translateY(0)}
}
/* Hero-Lead fadeup nach Titel-Slide */
.hero-lead{
opacity:0;transform:translateY(8px);
animation:hero-fadeup .9s cubic-bezier(.2,.6,.2,1) 1100ms forwards;
}
@keyframes hero-fadeup{
to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
.hero-slot,.hero-lead{
animation:none !important;opacity:1 !important;transform:none !important;
}
}
/* Footer-Logo mittig — Logo ist zentral, gehört in die Mitte */
.footer-brand{
justify-content:center !important;
align-items:center !important;
text-align:center !important;
}
/* ══════════════════════════════════════════════════════════════
Header v2 — Logo mittig, Adresse links, CTA rechts, Nav darunter
══════════════════════════════════════════════════════════════ */
.site-nav-top{
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
padding:20px 0 !important;
gap:24px !important;
}
.site-address{
font-style:normal !important;
font-size:13px !important;
letter-spacing:.005em !important;
color:var(--ink-soft, rgba(156,125,46,.72)) !important;
justify-self:start !important;
margin:0 !important;
}
.site-address a{
color:inherit !important;
border-bottom:none !important;
padding:0 !important;
transition:color .2s ease !important;
}
.site-address a:hover{color:var(--green-deep) !important}
.site-nav-top .brand-logo{justify-self:center !important}
.site-nav-cta{
justify-self:end !important;
margin:0 !important;
}
/* Nav-Links darunter — zentriert, mit dezenter Trennlinie oben */
.site-nav{
display:flex !important;
justify-content:center !important;
padding:12px 0 !important;
border-top:1px solid var(--line, rgba(156,125,46,.12)) !important;
}
.site-nav .navlinks{
gap:32px !important;
justify-content:center !important;
}
/* Mobile: Adresse ausblenden, CTA klein bleiben, Nav-Links kompakt */
@media(max-width:820px){
.site-nav-top{grid-template-columns:auto 1fr auto !important;gap:12px !important}
.site-address{display:none !important}
.site-nav-top .brand-logo{justify-self:start !important}
.site-nav-cta{padding:8px 14px !important;font-size:13px !important}
.site-nav .navlinks{gap:18px !important;flex-wrap:wrap !important}
}
/* Header v2 — mehr Luft oben, Adresse 2-zeilig */
.site-nav-top{padding:36px 0 24px !important}
@media(max-width:820px){.site-nav-top{padding:20px 0 12px !important}}
.site-address{
line-height:1.45 !important;
font-size:12px !important;
}
.site-address__name{
display:block;
font-weight:500;
color:var(--ink);
letter-spacing:.005em;
margin-bottom:2px;
}
/* Header v3 — Adresse ganz links, Text zentriert innerhalb der Box */
.site-address{
text-align:center !important;
line-height:1.5 !important;
font-size:13px !important;
color:var(--ink) !important;
justify-self:start !important;
align-self:center !important;
margin:0 !important;
padding:0 !important;
width:auto !important;
display:inline-block !important;
}
.site-nav-top{grid-template-columns:1fr auto 1fr !important}
.site-address a{
display:inline-block;
line-height:1.5 !important;
}
/* ══════════════════════════════════════════════════════════════
Header v4 — Nav-Line vollbreit, CTA-Button outlined (DIREKTKONTAKT)
══════════════════════════════════════════════════════════════ */
.site-nav{
border-top:1px solid var(--line, rgba(156,125,46,.12)) !important;
border-bottom:1px solid var(--line, rgba(156,125,46,.12)) !important;
padding:0 !important;
}
.site-nav > .wrap{
padding-top:12px !important;
padding-bottom:12px !important;
}
/* Site-nav-cta: outlined, normal case, dezent — nicht mehr gefüllt */
.navlinks a.site-nav-cta,
.navlinks a.site-nav-cta:visited,
a.site-nav-cta,
a.site-nav-cta:visited{
background:transparent !important;
color:var(--green-deep, #8a6e28) !important;
border:1px solid rgba(156,125,46,.35) !important;
padding:10px 22px !important;
font-size:14px !important;
font-weight:500 !important;
letter-spacing:.005em !important;
text-transform:none !important;
border-radius:var(--pill-r,999px) !important;
line-height:1.2 !important;
text-decoration:none !important;
transition:background .2s ease, border-color .2s ease !important;
padding-bottom:10px !important;
border-bottom:1px solid rgba(156,125,46,.35) !important;
}
a.site-nav-cta:hover{
background:rgba(156,125,46,.06) !important;
border-color:var(--green-deep, #8a6e28) !important;
color:var(--green-deep, #8a6e28) !important;
}
/* Nav-Links & Dropdown — etwas größere Schrift */
.navlinks a,
.navlinks a:visited,
.nav-drop-btn{
font-size:15px !important;
}
.nav-drop-menu a,
.nav-drop-menu a:visited{
font-size:15px !important;
padding:11px 16px !important;
}
/* Header — nur EINE Line: die über dem Nav. Keine Doppellinie */
.site-header{border-bottom:none !important}
/* ══════════════════════════════════════════════════════════════
Logo mit inline SVG — Herz pulsiert 2× ("hep hep") im Loop
══════════════════════════════════════════════════════════════ */
.brand-logo__mark{
/* CSS-Mask deaktivieren, weil wir inline SVG haben */
background:none !important;
-webkit-mask:none !important;
mask:none !important;
display:inline-block;
/* Rendering isolieren — inner Transforms bleiben innen */
contain:layout paint;
}
.brand-logo__svg{
display:block;
width:100%;
height:auto;
color:currentColor;
overflow:visible;
}
.brand-logo__heart{
/* Herz-Wrapper: transform-origin ist der Mittelpunkt der Herz-Bounding-Box */
transform-origin:50% 50%;
transform-box:fill-box;
animation:heart-hep 8s ease-in-out infinite;
cursor:pointer;
}
/* Footer (grüner Ground): Fill = Ground-Farbe → wirkt transparent */
@keyframes heart-hep{
0%, 88%, 100% { transform:scale(1) }
90% { transform:scale(1.16) }
92% { transform:scale(.98) }
94% { transform:scale(1.12) }
96% { transform:scale(1) }
}
/* Hover ODER Random-Trigger via JS: spontaner Herzschlag — subtil, kein Wackeln */
.brand-logo:hover .brand-logo__heart,
.brand-logo__heart.is-beating{
animation:heart-hep-quick 1s ease-in-out !important;
}
@keyframes heart-hep-quick{
0%, 100% { transform:scale(1) }
20% { transform:scale(1.14) }
40% { transform:scale(1) }
60% { transform:scale(1.10) }
80% { transform:scale(1) }
}
@media (prefers-reduced-motion: reduce){
.brand-logo__heart{animation:none !important}
}
/* Kein Farbwechsel beim Hover — das Sub-Pixel-Repaint verschob den Text */
.brand-logo:hover{color:inherit !important}
.site-footer .brand-logo:hover{color:#ffffff !important;opacity:1 !important}
/* Footer-Herzschlag — jetzt stärker wie im Header */
.site-footer .brand-logo__heart{fill:var(--green-deep, #8a6e28) !important}
.site-footer .brand-logo__heart path{fill:var(--green-deep, #8a6e28) !important}
/* Mitgliedschaften-Cards — Logos grün via CSS-Mask, Hover dunkelgrün */
.credential-card .logo{
display:flex;align-items:center;justify-content:center;
height:88px;margin-bottom:20px;
}
.logo-mask{
display:inline-block;
width:150px;height:80px;
background-color:var(--green-deep, #9c7d2e);
-webkit-mask:var(--src) center/contain no-repeat;
mask:var(--src) center/contain no-repeat;
opacity:.65;
transition:background-color .3s ease, opacity .3s ease;
}
.credential-card:hover .logo-mask{
opacity:1;
}
/* ————————————————————————————————————————————————————
Job-Karten — Accordion für Stellenanzeigen
Verwendung: …
…