/* ============================================================
Physiotherapie im Hofgarten — Prototyp (nah am Original-Layout)
held: werbung · 2026
Farben aus dem Bestand: Charcoal #2D2E34 / #4F525B,
Taupe #B0A4A0, Braun #937F6E, Hofgarten-Gruen #9BAB2C,
Überschriften #60544F, Schrift: Signika
============================================================ */
:root {
--charcoal-1: #2D2E34;
--charcoal-2: #4F525B;
--overlay: 31, 31, 38; /* rgb-Teile für Hero-Verlauf */
--taupe: #B0A4A0;
--taupe-dark: #9A8C87;
--brown: #937F6E;
--heading: #60544F;
--body-c: #5f5c5a;
--accent: #9BAB2C;
--accent-dark: #6F7D19;
--paper: #ffffff;
--soft: #F4F1EF;
--line: #E2DCD8;
--font: "Signika", "Segoe UI", sans-serif;
--size-body: clamp(.95rem, 1vw, 1.05rem);
--pad-x: clamp(1.25rem, 5vw, 5.5rem);
--pad-y: clamp(3.5rem, 7vw, 6.5rem);
--maxw: 1200px;
--ease: cubic-bezier(.25, .7, .3, 1);
}
/* ---------- Reset & Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
font-weight: 300;
font-size: var(--size-body);
line-height: 1.7;
color: var(--body-c);
background: var(--paper);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
::selection { background: var(--accent); color: #fff; }
h1, h2, h3, h4 {
font-weight: 600;
color: var(--heading);
line-height: 1.25;
text-wrap: balance;
}
/* Barrierefreiheit über -Klassen */
html.a11y-font-lg, html.fs-2 { font-size: 112.5%; }
html.a11y-font-xl, html.fs-3 { font-size: 125%; }
/* Lesehilfen */
html.a11y-spacing body { line-height: 1.95; letter-spacing: .02em; word-spacing: .08em; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: .6em; }
html.a11y-links a:not(.btn):not(.brand):not(.tile):not(.car-slide):not(.car-thumb):not(.a11y__opt) {
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-color: var(--accent);
}
html.a11y-contrast, html.contrast {
--charcoal-1: #17181b;
--charcoal-2: #26272c;
--taupe: #6d5f58;
--taupe-dark: #57493f;
--brown: #5f4c3b;
--heading: #201b18;
--body-c: #222222;
--accent: #556110;
--accent-dark: #40490c;
--soft: #f2f2f2;
--line: #767676;
}
html.a11y-no-motion *, html.no-motion *,
html.a11y-no-motion *::before, html.no-motion *::before,
html.a11y-no-motion *::after, html.no-motion *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ---------- Skip-Link ---------- */
.skip-link {
position: absolute;
left: -999px; top: 0;
z-index: 300;
background: var(--charcoal-1);
color: #fff;
padding: .8rem 1.4rem;
text-decoration: none;
font-weight: 600;
}
.skip-link:focus { left: 0; }
/* ---------- Typo-Helfer ---------- */
.eyebrow {
font-size: .82rem;
font-weight: 600;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--brown);
margin-bottom: .9rem;
}
.lead { font-size: 1.05em; max-width: 60ch; }
.accent { color: var(--accent); }
/* ---------- Buttons (Divi-nah: eckig, uppercase) ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: .6rem;
font: 600 .88rem/1.2 var(--font);
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
padding: .95rem 1.7rem;
transition: background .25s, color .25s, border-color .25s;
}
.btn-primary {
background: var(--taupe);
color: #fff;
}
.btn-primary:hover { background: var(--accent); }
.btn-accent {
background: var(--accent);
color: #fff;
}
.btn-accent:hover { background: var(--accent-dark); }
.btn-ghost {
background: transparent;
color: var(--heading);
border-color: var(--taupe);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-light {
background: #fff;
color: var(--heading);
}
.btn-light:hover { background: var(--charcoal-1); color: #fff; }
/* ============================================================
HEADER — zweigeteilte dunkle Leiste wie im Original
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 200;
background: var(--charcoal-2);
color: #fff;
}
@media (max-width: 1240px) {
.site-header { background: var(--charcoal-1); }
}
.header-inner {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 1.5rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--pad-x);
}
.brand {
display: flex;
align-items: center;
padding: .9rem 1.6rem .9rem var(--pad-x);
/* Fläche bis zum echten linken Bildschirmrand (auch bei zentriertem Header) */
margin-left: calc(-1 * var(--pad-x) - max(0px, (100vw - 1400px) / 2));
padding-left: calc(var(--pad-x) + max(0px, (100vw - 1400px) / 2));
flex: none;
background: var(--charcoal-1); /* dunkle Fläche nur unter dem Logo */
}
.brand img { height: 93px; width: auto; }
.header-right {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-wrap { text-align: right; }
/* kleine Utility-Zeile */
.util-nav {
display: flex;
justify-content: flex-end;
align-items: center;
gap: .1rem;
list-style: none;
font-size: .78rem;
letter-spacing: .04em;
padding-top: .65rem;
}
.util-nav a {
color: #9BA0AA;
text-decoration: none;
padding: .15rem .5rem;
transition: color .2s;
}
.util-nav a:hover { color: #fff; }
.util-nav li + li::before { content: "|"; color: #6b6f79; margin-right: .45rem; }
/* ---------- Sprachauswahl (Google Translate, Zwei-Klick) ---------- */
.lang-item { position: relative; }
.lang-btn {
display: inline-flex;
align-items: center;
gap: .35rem;
font: 600 .78rem var(--font);
letter-spacing: .06em;
color: #9BA0AA;
background: none;
border: none;
cursor: pointer;
padding: .15rem .5rem;
transition: color .2s;
}
.lang-btn:hover { color: #fff; }
.lang-drop {
position: absolute;
top: calc(100% + .4rem);
right: 0;
z-index: 60;
min-width: 220px;
background: #fff;
color: var(--body-c);
border-top: 3px solid var(--accent);
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45);
padding: .4rem 0 0;
text-align: left;
}
.lang-drop[hidden] { display: none; }
.lang-drop .lang-choice {
display: block;
width: 100%;
text-align: left;
font: 400 .92rem var(--font);
color: var(--body-c);
background: none;
border: none;
cursor: pointer;
padding: .6rem 1.1rem;
}
.lang-drop .lang-choice:hover { background: var(--soft); color: var(--accent-dark); }
.lang-drop .lang-choice[aria-current="true"] { font-weight: 600; color: var(--accent-dark); }
.lang-note {
font-size: .72rem;
line-height: 1.45;
color: var(--taupe-dark);
padding: .55rem 1.1rem .7rem;
border-top: 1px solid var(--line);
margin-top: .3rem;
}
.lang-note a { color: var(--accent-dark); }
.lang-mobile { display: none; }
@media (max-width: 1240px) {
.lang-item { display: none; } /* Desktop-Dropdown im Burger-Modus aus */
.lang-mobile {
display: flex;
gap: .6rem;
margin-top: 1.2rem;
}
.lang-mobile .lang-choice {
font: 600 .9rem var(--font);
letter-spacing: .08em;
color: var(--taupe);
background: none;
border: 1.5px solid rgba(255, 255, 255, .25);
padding: .5rem .9rem;
cursor: pointer;
}
.lang-mobile .lang-choice[aria-current="true"] { color: #fff; border-color: var(--accent); background: var(--accent); }
}
/* Google-Translate-Leiste und -Tooltips unterdrücken */
#google_translate_element { position: absolute; left: -9999px; top: 0; }
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
font[style*="background-color"] { background-color: transparent !important; box-shadow: none !important; }
/* Hauptnavigation */
.main-nav > ul {
display: flex;
flex-wrap: nowrap; /* Navigation bleibt in einer Zeile */
justify-content: flex-end;
align-items: center;
list-style: none;
padding: .35rem 0 1rem;
white-space: nowrap;
}
.main-nav > ul > li { display: flex; align-items: center; }
.main-nav > ul > li + li::before { /* feine Trennstriche wie im Original */
content: "";
width: 1px;
height: .95em;
background: rgba(255, 255, 255, .22);
margin: 0 .25rem;
}
.main-nav a.nav-link,
.main-nav button.nav-link {
position: relative;
display: inline-block;
font: 400 clamp(.8rem, .55rem + .32vw, .93rem)/1.2 var(--font);
letter-spacing: .07em;
text-transform: uppercase;
color: #C9C2BE;
text-decoration: none;
padding: .55rem .6rem;
border: none;
background: none;
cursor: pointer;
transition: color .2s;
}
.main-nav a.nav-link::after,
.main-nav button.nav-link::after { /* animierte orange Unterstreichung */
content: "";
position: absolute;
left: .6rem;
right: .6rem;
bottom: .25rem;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease);
}
.main-nav a.nav-link:hover,
.main-nav button.nav-link:hover,
.main-nav a.nav-link[aria-current="page"] { color: #fff; }
.main-nav a.nav-link:hover::after,
.main-nav button.nav-link:hover::after,
.main-nav a.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a.nav-link[aria-current="page"] { color: var(--accent); }
/* Dropdown */
.nav-item-drop { position: relative; }
.nav-drop {
position: absolute;
top: 100%;
right: 0;
min-width: 240px;
background: #fff;
color: var(--body-c);
border-top: 3px solid var(--accent);
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45);
padding: .4rem 0;
list-style: none;
display: none;
text-align: left;
z-index: 50;
}
.nav-item-drop:hover .nav-drop,
.nav-item-drop:focus-within .nav-drop { display: block; }
.nav-drop a {
display: block;
padding: .65rem 1.1rem;
font-size: .92rem;
text-decoration: none;
}
.nav-drop a:hover { background: var(--soft); color: var(--accent); }
/* Kontakt-Block + Social wie die Farbkacheln im Original */
.header-cta {
display: flex;
align-items: stretch;
align-self: stretch;
}
.header-cta .kontakt-tile {
display: flex;
align-items: center;
background: var(--taupe);
color: #fff;
font: 600 .85rem/1 var(--font);
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.5rem;
transition: background .25s;
}
.header-cta .kontakt-tile:hover { background: var(--accent); }
.header-cta .social-tile {
display: flex;
flex-direction: column;
justify-content: center;
gap: .6rem;
background: var(--brown);
padding: .8rem .9rem;
}
.header-cta .social-tile a {
color: #fff;
display: grid;
place-items: center;
width: 30px; height: 30px;
border: 1.5px solid rgba(255,255,255,.6);
border-radius: 50%;
transition: background .2s, border-color .2s;
}
.header-cta .social-tile a:hover { background: var(--accent); border-color: var(--accent); }
/* Burger */
.burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 48px;
height: 48px;
padding: 12px;
background: none;
border: none;
cursor: pointer;
z-index: 260;
align-self: center;
}
.burger span {
display: block;
height: 2px;
background: #fff;
transition: transform .35s var(--ease), opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 1240px) {
.burger { display: flex; }
.header-cta, .util-nav { display: none; }
.brand { background: none; padding: .9rem 0; margin-left: 0; }
.brand img { height: 62px; }
.nav-wrap {
position: fixed;
inset: 0;
z-index: 250;
background: var(--charcoal-1);
text-align: left;
padding: 6rem var(--pad-x) 3rem;
visibility: hidden;
opacity: 0;
transition: opacity .35s var(--ease), visibility 0s .35s;
overflow-y: auto;
}
.nav-wrap.open {
visibility: visible;
opacity: 1;
transition: opacity .35s var(--ease);
}
.main-nav > ul { flex-direction: column; align-items: flex-start; gap: .3rem; }
.main-nav > ul > li { display: block; }
.main-nav > ul > li + li::before { display: none; }
.main-nav a.nav-link,
.main-nav button.nav-link { font-size: 1.35rem; padding: .5rem 0; }
.main-nav a.nav-link::after,
.main-nav button.nav-link::after { display: none; }
.nav-drop {
position: static;
display: block;
background: none;
border: none;
box-shadow: none;
padding: 0 0 0 1.1rem;
}
.nav-drop a { color: #cfd2d8; padding: .35rem 0; }
.nav-drop a:hover { background: none; color: var(--accent); }
.mobile-util { display: flex; gap: 1.2rem; margin-top: 2rem; font-size: .9rem; }
.mobile-util a { color: var(--taupe); text-decoration: none; }
}
@media (min-width: 1241px) { .mobile-util { display: none; } }
/* ============================================================
BARRIEREFREIHEIT — Panel (wie Optiker Riedl / HOVEBA, im medicus-Look)
============================================================ */
.a11y { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 230; }
.a11y__toggle {
display: inline-flex;
align-items: center;
gap: .55rem;
height: 56px;
padding: 0 1.1rem 0 .9rem;
border-radius: 100px;
background: var(--charcoal-1);
color: #fff;
border: 0;
cursor: pointer;
font: 600 .82rem var(--font);
letter-spacing: .1em;
text-transform: uppercase;
box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
transition: transform .3s var(--ease), background .3s;
}
.a11y__toggle:hover { transform: translateY(-2px); background: var(--accent); }
.a11y__toggle svg { flex: none; }
@media (max-width: 640px) {
.a11y__toggle { width: 56px; padding: 0; justify-content: center; }
.a11y__toggle-label { display: none; }
}
.a11y__panel {
position: absolute;
right: 0;
bottom: 70px;
width: min(360px, calc(100vw - 2.2rem));
max-height: calc(100vh - 7rem);
overflow-y: auto;
background: #fff;
color: var(--body-c);
border: 1px solid var(--line);
border-top: 4px solid var(--accent);
padding: 1.1rem 1.2rem 1.3rem;
box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .4);
display: grid;
gap: 1rem;
}
.a11y__panel[hidden] { display: none; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; }
.a11y__heading { font-size: 1.05rem; font-weight: 600; color: var(--heading); }
.a11y__close {
width: 34px; height: 34px;
border: none;
background: var(--soft);
color: var(--heading);
cursor: pointer;
font-size: .95rem;
transition: background .2s, color .2s;
}
.a11y__close:hover { background: var(--accent); color: #fff; }
.a11y__label {
font-size: .72rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brown);
margin-bottom: .45rem;
}
.a11y__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.a11y__opt {
flex: 1;
min-width: 90px;
border: 1.5px solid var(--line);
background: var(--soft);
color: var(--heading);
font: inherit;
padding: .55rem .4rem .5rem;
cursor: pointer;
display: grid;
justify-items: center;
gap: .15rem;
transition: border-color .25s, background .25s, color .25s;
}
.a11y__opt .a11y__ico { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.a11y__opt small { font-weight: 400; font-size: .68rem; color: var(--body-c); line-height: 1.2; text-align: center; }
.a11y__opt:hover { border-color: var(--taupe-dark); background: #fff; }
.a11y__opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.a11y__opt[aria-pressed="true"] small { color: #fff; }
.a11y__opt:disabled { opacity: .4; cursor: not-allowed; }
.a11y__hint { font-size: .74rem; color: var(--taupe-dark); margin-top: .5rem; line-height: 1.4; }
.tts-highlight { background: rgba(155, 171, 44, .3) !important; box-shadow: 0 0 0 6px rgba(155, 171, 44, .3); border-radius: 3px; }
/* Lupe */
.lens {
position: fixed;
z-index: 225;
width: 300px; height: 300px;
border-radius: 50%;
overflow: hidden;
pointer-events: none;
border: 3px solid var(--accent);
box-shadow: 0 18px 60px -12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .4);
background: #fff;
}
.lens[hidden] { display: none; }
.lens__content { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
body.lens-active { cursor: crosshair; }
.lens-frame .a11y, .lens-frame .lens, .lens-frame .hero-mode-toggle, .lens-frame .hero-scrollhint { display: none !important; }
@media (max-width: 760px) { .lens { width: 210px; height: 210px; } }
/* ============================================================
HERO Startseite — Foto, dunkler Verlauf, Logo mittig
============================================================ */
.hero {
position: relative;
min-height: 92svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(4rem, 8vh, 6rem) var(--pad-x);
background:
linear-gradient(rgba(var(--overlay), .88) 0%, rgba(var(--overlay), .35) 100%),
var(--hero-img, url("../images/DSC_7453.jpg")) center / cover no-repeat;
color: #fff;
}
/* Oranger Balken wie im Original */
.hero::before {
content: "";
position: absolute;
top: clamp(2.5rem, 8vh, 5rem);
left: 0;
width: min(390px, 55vw);
height: clamp(3rem, 7vh, 4.2rem);
background: var(--accent);
}
.hero-logo {
display: block;
width: 100%;
max-width: var(--maxw); /* gleiche Kante wie .hero-bottom */
margin: 0 auto;
height: auto;
}
.hero-logo { width: 100%; }
.hero-logo-img { display: block; width: min(520px, 78vw); height: auto; }
.hero-bottom {
max-width: var(--maxw);
margin: clamp(2.5rem, 7vh, 5rem) auto 0;
width: 100%;
}
.hero-bottom h1 {
color: #fff;
font-size: clamp(1.5rem, 3.2vw, 2.2rem);
font-weight: 600;
margin-bottom: 1rem;
}
.hero-bottom ul {
list-style: none;
margin-bottom: 1.8rem;
}
.hero-bottom li {
position: relative;
padding-left: 1.4rem;
margin-bottom: .35rem;
font-weight: 300;
font-size: 1.05rem;
}
.hero-bottom li::before {
content: "";
position: absolute;
left: 0; top: .55em;
width: 8px; height: 8px;
background: var(--accent);
}
/* ============================================================
AWARD-HERO (Umschalter „Klassisch / Award")
Klasse html.hero-award aktiviert die WebGL/GSAP-Variante.
============================================================ */
.hero-mode-toggle {
position: fixed;
right: 0;
top: 38%;
translate: 0 -50%;
z-index: 215;
display: flex;
flex-direction: column;
gap: 2px;
background: var(--charcoal-1);
padding: 4px;
border-radius: 10px 0 0 10px;
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.hero-mode-toggle button {
writing-mode: vertical-rl;
transform: rotate(180deg);
font: 600 .7rem/1 var(--font);
letter-spacing: .16em;
text-transform: uppercase;
color: #C9C2BE;
background: none;
border: none;
padding: .9rem .55rem;
cursor: pointer;
border-radius: 6px;
transition: background .25s, color .25s;
}
.hero-mode-toggle button:hover { color: #fff; }
.hero-mode-toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }
@media (max-width: 760px) {
.hero-mode-toggle { top: auto; bottom: 5.4rem; translate: none; }
}
/* Award-Version des Heros */
html.hero-award, html.hero-award body,
html.hero-m2, html.hero-m2 body { scroll-behavior: auto; } /* Lenis übernimmt das Scrollen */
html.hero-award body, html.hero-m2 body { overflow-x: visible; } /* kein overflow am Body: sonst blockiert Tastatur-Scrolling */
html.hero-award, html.hero-m2 { overflow-x: hidden; } /* horizontale Überläufe stattdessen am html-Element kappen */
html.hero-award .hero {
/* Foto bleibt als Fallback sichtbar – der WebGL-Canvas liegt darüber.
Fällt WebGL aus (kein Kontext, Blockliste, Context-Loss), sieht man trotzdem das Bild. */
min-height: 100svh;
}
html.hero-award .hero-gl.gl-failed { display: none; }
html.hero-award .hero::before { transform-origin: left; transform: scaleX(var(--bar-scale, 1)); }
.hero-gl {
position: absolute;
inset: 0;
z-index: 0;
display: none;
}
html.hero-award .hero-gl { display: block; }
.hero-gl canvas { width: 100% !important; height: 100% !important; display: block; }
.hero-gl::after { /* dunkler Verlauf wie in der klassischen Version */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(31, 31, 38, .82) 0%, rgba(31, 31, 38, .28) 100%);
pointer-events: none;
}
html.hero-award .hero-logo,
html.hero-award .hero-bottom { position: relative; z-index: 2; }
/* Award-Headline (nur sichtbar im Award-Modus) */
.hero-claim { display: none; }
html.hero-award .hero-claim {
display: block;
position: relative;
z-index: 2;
max-width: var(--maxw);
margin: clamp(1.5rem, 4vh, 3rem) auto 0;
width: 100%;
color: #fff;
font-size: clamp(2.2rem, 6.4vw, 5.2rem);
font-weight: 600;
line-height: 1.02;
letter-spacing: -.01em;
}
.hero-claim .char { display: inline-block; will-change: transform, opacity; }
.hero-claim .word { display: inline-block; white-space: nowrap; }
.hero-claim em { font-style: normal; color: var(--accent); }
html.hero-award .hero-bottom h1 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 400; color: #E8DFD8; }
/* Scroll-Hinweis */
.hero-scrollhint { display: none; }
html.hero-award .hero-scrollhint {
display: flex;
position: absolute;
left: 50%;
bottom: 1.6rem;
translate: -50% 0;
z-index: 2;
flex-direction: column;
align-items: center;
gap: .4rem;
color: #C9C2BE;
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
}
.hero-scrollhint span { width: 1px; height: 46px; background: linear-gradient(#fff, transparent); animation: scrollhint 1.8s infinite; }
@keyframes scrollhint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* Custom Cursor (nur im Award-Modus, nur mit Maus) */
.cursor-dot, .cursor-ring {
position: fixed;
top: 0; left: 0;
z-index: 400;
pointer-events: none;
border-radius: 50%;
translate: -50% -50%;
display: none;
}
.cursor-dot { width: 8px; height: 8px; background: var(--accent); }
.cursor-ring { width: 40px; height: 40px; border: 1.5px solid rgba(255, 255, 255, .8); mix-blend-mode: difference; transition: width .25s, height .25s; }
.cursor-ring.is-hover { width: 64px; height: 64px; }
/* Custom Cursor bewusst deaktiviert (Zielgruppe) */
html.hero-award .btn-magnet { will-change: transform; }
/* Kachel-Distortion (WebGL, nur Award-Modus) */
.tile .tile-gl {
position: absolute;
inset: 0;
z-index: 0;
display: none;
}
.tile .tile-gl canvas { width: 100% !important; height: 100% !important; display: block; }
html.hero-award .tile.gl-ready .tile-gl { display: block; }
html.hero-award .tile.gl-ready > img { visibility: hidden; }
html.hero-award .tile.gl-ready:hover img { transform: none; }
html.hero-award .tile span { transition: transform .5s var(--ease), letter-spacing .5s var(--ease); }
html.hero-award .tile:hover span { transform: translateY(-6px); letter-spacing: .02em; }
html.hero-award .tile::after { transition: inset .45s var(--ease), opacity .45s; }
html.hero-award .tile:hover::after { inset: 22px; }
/* ============================================================
MODERN 2 — Split-Layout mit Ken-Burns-Bild, Bildkarte, Zahlen
Klasse html.hero-m2 aktiviert die Variante (kein WebGL).
============================================================ */
.m2 { display: none; }
html.hero-m2 .hero {
background: var(--charcoal-1);
min-height: 100svh;
padding: 0;
display: block;
}
html.hero-m2 .hero::before,
html.hero-m2 .hero-logo,
html.hero-m2 .hero-bottom,
html.hero-m2 .hero-scrollhint { display: none; }
html.hero-m2 .m2 {
display: block;
position: relative;
min-height: 100svh;
overflow: hidden;
color: #fff;
}
.m2-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.m2-bg img {
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: 60% 40%;
will-change: transform;
}
.m2-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(31, 31, 38, .92) 0%, rgba(31, 31, 38, .72) 45%, rgba(31, 31, 38, .25) 100%),
linear-gradient(rgba(31, 31, 38, .35), rgba(31, 31, 38, .55));
}
.m2-grid {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
min-height: 100svh;
padding: clamp(6rem, 12vh, 9rem) var(--pad-x) clamp(3rem, 8vh, 6rem);
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.m2-logo { display: block; width: min(400px, 70vw); height: auto; margin-bottom: 1.6rem; }
.m2-eyebrow {
display: inline-flex;
align-items: center;
gap: .7rem;
font-size: .78rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: #C9C2BE;
margin-bottom: 1.4rem;
}
.m2-eyebrow span { width: 2.2rem; height: 2px; background: var(--accent); }
.m2-claim {
font-size: clamp(2.4rem, 5.6vw, 4.6rem);
font-weight: 600;
line-height: 1.04;
letter-spacing: -.01em;
color: #fff;
margin-bottom: 1.2rem;
}
.m2-claim em { font-style: normal; color: var(--accent); }
.m2-claim .word { display: inline-block; }
.m2-sub {
max-width: 48ch;
font-size: 1.05rem;
color: #E8DFD8;
margin-bottom: 1.6rem;
}
.m2-chips {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin-bottom: 1.8rem;
}
.m2-chips li {
font-size: .85rem;
font-weight: 400;
padding: .5rem .95rem;
border: 1px solid rgba(255, 255, 255, .28);
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(6px);
color: #fff;
}
.m2-chips li::before { content: "•"; color: var(--accent); margin-right: .5rem; }
.m2-cta { box-shadow: 0 18px 40px -18px rgba(155, 171, 44, .8); }
.m2-visual { position: relative; display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-end; }
.m2-card {
position: relative;
width: min(100%, 460px);
margin: 0;
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65);
will-change: transform;
}
.m2-card img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 40% 45%; display: block; }
.m2-card::after { /* weißer Innenrahmen wie bei den Kacheln */
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(255, 255, 255, .8);
pointer-events: none;
}
.m2-card figcaption {
position: absolute;
left: 1.6rem;
bottom: 1.4rem;
right: 1.6rem;
font-size: .95rem;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.m2-card figcaption strong {
display: block;
font-size: .72rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .2rem;
}
.m2-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
width: min(100%, 460px);
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .18);
}
.m2-stats > div {
background: rgba(31, 31, 38, .72);
backdrop-filter: blur(8px);
padding: 1rem .8rem;
text-align: center;
}
.m2-stats strong {
display: block;
font-size: clamp(1.6rem, 3vw, 2.3rem);
font-weight: 600;
line-height: 1;
color: var(--accent);
margin-bottom: .25rem;
}
.m2-stats span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #C9C2BE; }
@media (max-width: 900px) {
.m2-grid { grid-template-columns: 1fr; padding-top: 5rem; }
.m2-visual { align-items: stretch; }
.m2-card, .m2-stats { width: 100%; }
}
@media (max-width: 760px) {
.hero-mode-toggle button { padding: .7rem .5rem; font-size: .62rem; }
}
/* ============================================================
SEKTIONEN
============================================================ */
.section {
padding: var(--pad-y) var(--pad-x);
}
.section > .inner { max-width: var(--maxw); margin: 0 auto; }
.section-soft { background: var(--soft); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: .8rem; }
/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
html.a11y-no-motion .reveal, html.no-motion .reveal { opacity: 1; transform: none; }
/* ---------- Bild-Kacheln (2×2) wie Original ---------- */
.tiles {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem;
max-width: var(--maxw);
margin: 0 auto;
}
@media (max-width: 700px) {
.tiles { grid-template-columns: 1fr; }
}
.tile {
position: relative;
display: block;
aspect-ratio: 16 / 10.5;
overflow: hidden;
text-decoration: none;
}
.tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s var(--ease);
}
.tile::before {
content: "";
position: absolute;
inset: 0;
background: rgba(31, 31, 38, .45);
transition: background .35s;
z-index: 1;
}
.tile::after { /* weißer Innenrahmen */
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(255, 255, 255, .75);
z-index: 2;
pointer-events: none;
}
.tile:hover img { transform: scale(1.05); }
.tile:hover::before { background: rgba(31, 31, 38, .2); }
.tile span {
position: absolute;
left: 2rem;
bottom: 1.6rem;
z-index: 3;
color: #fff;
font-size: clamp(1.15rem, 2vw, 1.45rem);
font-weight: 400;
}
/* ---------- Split (Bild + weiße Karte) — „Unser Prinzip" ---------- */
.prinzip {
position: relative;
display: grid;
grid-template-columns: 1.2fr .9fr;
align-items: center;
max-width: 1400px;
margin: 0 auto;
gap: 0;
}
.prinzip figure { margin: 0; }
.prinzip figure img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.prinzip .card-white {
background: #fff;
padding: clamp(2rem, 4vw, 3.5rem);
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .25);
margin-left: -12%;
z-index: 2;
}
.prinzip .card-white h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: .8rem; }
.prinzip .prinzip-portrait { position: relative; }
.prinzip .prinzip-portrait img { object-position: 50% 20%; }
.prinzip .prinzip-portrait figcaption {
position: absolute;
left: 1.6rem;
bottom: 1.4rem;
color: #fff;
font-size: .9rem;
text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
padding-right: 20%;
}
.prinzip .prinzip-portrait figcaption strong {
display: block;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.prinzip .prinzip-portrait::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(31, 31, 38, .7) 0%, rgba(31, 31, 38, 0) 40%);
pointer-events: none;
}
.prinzip .prinzip-portrait figcaption { z-index: 1; }
.prinzip-sign { margin-top: .9rem; font-size: .9rem; color: var(--taupe-dark); font-style: italic; }
@media (max-width: 860px) {
.prinzip { grid-template-columns: 1fr; }
.prinzip .card-white { margin: -3rem 1rem 0; }
}
/* ---------- Bild mit orangefarbenem Eck-Rahmen (Original-Detail) ---------- */
.frame-img {
position: relative;
display: inline-block;
}
.frame-img img { position: relative; z-index: 1; width: 100%; }
.frame-img::after {
content: "";
position: absolute;
inset: -14px 14px 14px -14px;
border: 2px solid var(--accent);
z-index: 0;
}
/* ============================================================
UNTERSEITEN-HERO — Betonband + Taupe-Titelbox
============================================================ */
.page-hero {
position: relative;
min-height: clamp(260px, 40vh, 380px);
background:
linear-gradient(rgba(var(--overlay), .88) 0%, rgba(var(--overlay), .24) 100%),
url("../images/beton1.jpg") center / cover no-repeat;
display: flex;
align-items: flex-end;
gap: clamp(1.5rem, 4vw, 4rem);
}
.page-hero .hero-photo {
width: min(48%, 620px);
height: auto;
margin: clamp(2.5rem, 6vh, 4rem) 0 -3.5rem var(--pad-x);
box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .5);
z-index: 4;
}
.page-hero .title-box {
position: relative;
background: var(--taupe-dark);
color: #fff;
padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 4vw, 3rem);
margin: 0 var(--pad-x) -2.5rem auto;
max-width: min(560px, 90%);
z-index: 5;
}
@media (max-width: 760px) {
.page-hero { flex-direction: column; align-items: stretch; gap: 0; }
.page-hero .title-box { order: 1; margin: 2.5rem 1.25rem 0 auto; }
.page-hero .hero-photo {
order: 2;
width: min(86%, 440px);
margin: 1.5rem auto -2.5rem;
}
}
html.a11y-contrast .page-hero .title-box, html.contrast .page-hero .title-box { background: var(--charcoal-1); }
.page-hero h1 {
color: #fff;
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
}
.page-intro { padding-top: 5rem; }
/* ---------- Akkordeon — Taupe-Balken wie Original ---------- */
.acc-tools {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.6rem;
}
.acc-tools input[type="search"] {
flex: 1 1 320px;
max-width: 460px;
font: 300 1rem var(--font);
color: var(--charcoal-1);
background: var(--soft);
border: 1px solid var(--line);
padding: .85rem 1.1rem;
transition: border-color .25s, background .25s;
}
.acc-tools input[type="search"]:focus {
outline: none;
border-color: var(--accent);
background: #fff;
}
.acc-tools .acc-count {
font-size: .85rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--taupe-dark);
}
.acc-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1.4rem;
align-items: start;
}
@media (max-width: 860px) {
.acc-cols { grid-template-columns: 1fr; }
}
.acc-empty {
display: none;
background: var(--soft);
border-left: 4px solid var(--accent);
padding: 1.1rem 1.4rem;
}
.acc { min-width: 0; }
.acc-item { margin-bottom: .8rem; }
.acc-item > h3 { margin: 0; }
.acc-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: var(--taupe);
border: none;
cursor: pointer;
text-align: left;
font: 400 1.02rem/1.3 var(--font);
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
padding: 1.05rem 1.4rem;
transition: background .25s;
}
.acc-trigger:hover { background: var(--brown); }
.acc-trigger[aria-expanded="true"] { background: var(--accent); }
.acc-trigger .acc-plus {
flex: none;
width: 30px; height: 30px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .8);
display: grid;
place-items: center;
transition: transform .35s var(--ease);
}
.acc-trigger[aria-expanded="true"] .acc-plus { transform: rotate(45deg); }
.acc-panel {
overflow: hidden;
max-height: 0;
transition: max-height .5s var(--ease);
background: var(--soft);
}
.acc-panel-inner {
padding: 1.4rem 1.5rem;
max-width: 78ch;
}
.acc-panel-inner ul { margin: .8rem 0 0 1.2rem; }
.acc-panel-inner li { margin-bottom: .25rem; }
/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.tab-btn {
font: 400 .95rem var(--font);
letter-spacing: .1em;
text-transform: uppercase;
padding: .85rem 1.5rem;
border: none;
background: var(--soft);
color: var(--heading);
cursor: pointer;
transition: background .25s, color .25s;
}
.tab-btn:hover { background: var(--taupe); color: #fff; }
.tab-btn[aria-selected="true"] { background: var(--taupe); color: #fff; }
.tab-panel[hidden] { display: none; }
/* ---------- Team ---------- */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
gap: 1.3rem;
max-width: var(--maxw);
margin: 0 auto;
}
.person { margin: 0; }
.person img {
width: 100%;
aspect-ratio: 3 / 3.3;
object-fit: cover;
}
.person figcaption { padding: .8rem .2rem 0; }
.person figcaption strong {
display: block;
font-weight: 600;
color: var(--heading);
font-size: 1.02rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.person figcaption span { font-size: .88rem; }
/* ---------- Galerie ---------- */
.gallery {
columns: 3 300px;
gap: 1.1rem;
max-width: var(--maxw);
margin: 0 auto;
}
.gallery a {
position: relative;
display: block;
margin-bottom: 1.1rem;
overflow: hidden;
}
.gallery img { width: 100%; transition: transform .6s var(--ease); }
.gallery a::before { /* dunkler Schleier + Lupe */
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-color: rgba(31, 31, 38, .38);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: 36px;
opacity: 0;
transition: opacity .35s;
}
.gallery a::after { /* weißer Innenrahmen wie bei den Kacheln */
content: "";
position: absolute;
inset: 12px;
z-index: 2;
border: 1px solid rgba(255, 255, 255, .85);
opacity: 0;
transition: opacity .35s;
pointer-events: none;
}
.gallery a:hover img,
.gallery a:focus-visible img { transform: scale(1.05); }
.gallery a:hover::before, .gallery a:hover::after,
.gallery a:focus-visible::before, .gallery a:focus-visible::after { opacity: 1; }
.lightbox {
border: none;
padding: 0;
background: rgba(20, 18, 17, .93);
max-width: 100vw;
max-height: 100vh;
width: 100vw;
height: 100vh;
display: none;
place-items: center;
}
.lightbox[open] { display: grid; }
.lightbox img { max-width: min(90vw, 1200px); max-height: 84vh; object-fit: contain; }
.lightbox .lb-close {
position: absolute;
top: 1.2rem; right: 1.2rem;
width: 48px; height: 48px;
border: none;
background: #fff;
font-size: 1.3rem;
cursor: pointer;
}
.lightbox .lb-prev,
.lightbox .lb-next {
position: absolute;
top: 50%;
translate: 0 -50%;
width: 52px; height: 52px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--charcoal-1);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
transition: background .25s, color .25s;
}
.lightbox .lb-prev:hover, .lightbox .lb-next:hover { background: var(--accent); color: #fff; }
.lightbox .lb-prev { left: 1.2rem; }
.lightbox .lb-next { right: 1.2rem; }
.lightbox .lb-count {
position: absolute;
bottom: 1.2rem;
left: 50%;
translate: -50% 0;
color: #fff;
font-size: .9rem;
letter-spacing: .14em;
}
@media (max-width: 640px) {
.lightbox .lb-prev { left: .4rem; }
.lightbox .lb-next { right: .4rem; }
}
/* ---------- Bilder-Karussell (Praxis) ---------- */
.carousel { max-width: var(--maxw); margin: 0 auto; }
.car-stage { position: relative; }
.car-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide {
flex: 0 0 100%;
scroll-snap-align: start;
display: block;
cursor: zoom-in;
}
.car-slide img {
width: 100%;
height: clamp(300px, 58vh, 560px);
object-fit: cover;
}
.car-prev, .car-next {
position: absolute;
top: 50%;
translate: 0 -50%;
width: 52px; height: 52px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--charcoal-1);
font-size: 1.7rem;
line-height: 1;
cursor: pointer;
transition: background .25s, color .25s;
z-index: 2;
}
.car-prev:hover, .car-next:hover { background: var(--accent); color: #fff; }
.car-prev { left: 1rem; }
.car-next { right: 1rem; }
.car-count {
position: absolute;
right: 1rem;
bottom: .9rem;
z-index: 2;
background: rgba(31, 31, 38, .72);
color: #fff;
font-size: .82rem;
letter-spacing: .14em;
padding: .35rem .8rem;
}
.car-thumbs {
display: flex;
gap: .5rem;
margin-top: .6rem;
overflow-x: auto;
padding-bottom: .4rem;
scrollbar-width: thin;
scrollbar-color: var(--taupe) transparent;
}
.car-thumb {
flex: 0 0 auto;
width: 86px;
height: 58px;
padding: 0;
border: 2px solid transparent;
background: none;
cursor: pointer;
opacity: .65;
transition: opacity .25s, border-color .25s;
}
.car-thumb img { width: 100%; height: 100%; object-fit: cover; }
.car-thumb:hover { opacity: 1; }
.car-thumb.active { opacity: 1; border-color: var(--accent); }
@media (max-width: 640px) {
.car-prev { left: .4rem; }
.car-next { right: .4rem; }
.car-slide img { height: 46vh; }
}
/* ---------- Leistungen: Kachel-Raster + Detail-Dialog ---------- */
.leist-group { margin-bottom: 2.4rem; }
.leist-cat {
font-size: .88rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--brown);
margin-bottom: 1rem;
padding-bottom: .5rem;
border-bottom: 1px solid var(--line);
}
.leist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
gap: .8rem;
}
.leist-card {
display: flex;
flex-direction: column;
gap: .35rem;
text-align: left;
background: #fff;
border: 1px solid var(--line);
border-left: 4px solid var(--taupe);
padding: 1rem 1.1rem;
cursor: pointer;
font-family: var(--font);
transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.leist-card:hover {
border-left-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .3);
}
.leist-card strong {
font-weight: 600;
color: var(--heading);
font-size: 1rem;
line-height: 1.3;
}
.leist-card .lc-more {
font-size: .78rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--taupe-dark);
transition: color .25s;
}
.leist-card:hover .lc-more { color: var(--accent); }
.leist-dialog {
border: none;
padding: 0;
width: min(760px, 92vw);
max-height: 84vh;
margin: auto;
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5);
}
.leist-dialog::backdrop { background: rgba(20, 18, 17, .62); }
.leist-dialog .ld-inner {
overflow-y: auto;
max-height: 84vh;
padding: clamp(1.6rem, 4vw, 2.8rem);
}
.leist-dialog .ld-title {
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
padding-right: 2.5rem;
margin-bottom: 1rem;
padding-bottom: .8rem;
border-bottom: 3px solid var(--accent);
}
.leist-dialog .ld-body p + p { margin-top: .9rem; }
.leist-dialog .ld-body ul { margin: .8rem 0 .8rem 1.3rem; }
.leist-dialog .ld-close {
position: absolute;
top: .9rem; right: .9rem;
width: 42px; height: 42px;
border: none;
background: var(--soft);
font-size: 1.15rem;
cursor: pointer;
transition: background .25s, color .25s;
}
.leist-dialog .ld-close:hover { background: var(--accent); color: #fff; }
/* ---------- Karten (schlicht) ---------- */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 1.2rem;
max-width: var(--maxw);
margin: 0 auto;
}
.card {
background: #fff;
border-top: 3px solid var(--taupe);
box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .25);
padding: 1.8rem 1.6rem;
}
.card h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.section-soft .card { background: #fff; }
.card:hover { border-top-color: var(--accent); }
/* ---------- Prosa ---------- */
.prose { max-width: 78ch; }
.prose h2 { font-size: 1.4rem; margin: 2.2rem 0 .6rem; }
.prose h3 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
.prose p + p { margin-top: .9rem; }
.prose ul, .prose ol { margin: .8rem 0 .8rem 1.3rem; }
.prose li { margin-bottom: .3rem; }
.prose a { color: var(--accent-dark); }
.prose .note {
background: var(--soft);
border-left: 4px solid var(--accent);
padding: 1.1rem 1.4rem;
margin: 1.4rem 0;
}
.checklist { list-style: none; margin: 1.2rem 0 !important; }
.checklist li {
position: relative;
padding-left: 2.2rem;
margin-bottom: .6rem !important;
font-weight: 400;
}
.checklist li::before {
content: "";
position: absolute;
left: 0; top: .15em;
width: 1.35rem; height: 1.35rem;
background: var(--accent);
-webkit-mask: url('data:image/svg+xml;utf8,') center / 75% no-repeat;
mask: url('data:image/svg+xml;utf8,') center / 75% no-repeat;
}
/* ---------- Kontakt ---------- */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
max-width: var(--maxw);
margin: 0 auto;
}
.contact-list { list-style: none; }
.contact-list li {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: .9rem 0;
border-bottom: 1px solid var(--line);
}
.contact-list .ci {
flex: none;
width: 42px; height: 42px;
background: var(--soft);
color: var(--accent);
display: grid;
place-items: center;
}
.contact-list a { color: var(--heading); text-decoration: none; font-weight: 600; }
.contact-list a:hover { color: var(--accent); }
.contact-list small {
display: block;
color: var(--taupe-dark);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: .1rem;
}
.form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field label {
display: block;
font-size: .85rem;
font-weight: 600;
color: var(--heading);
margin-bottom: .3rem;
}
.field input, .field textarea {
width: 100%;
font: 300 1rem var(--font);
color: var(--charcoal-1);
background: var(--soft);
border: 1px solid var(--line);
padding: .85rem 1rem;
transition: border-color .25s, background .25s;
}
.field input:focus, .field textarea:focus {
outline: none;
border-color: var(--accent);
background: #fff;
}
.field textarea { min-height: 140px; resize: vertical; }
.form .consent {
display: flex;
gap: .7rem;
align-items: flex-start;
font-size: .88rem;
}
.form .consent input { margin-top: .3rem; width: 17px; height: 17px; accent-color: var(--accent); }
.form .consent a { color: var(--accent-dark); }
.hp-field { /* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px;
overflow: hidden;
}
.form-status { font-weight: 600; }
.form-status.ok { color: #2e7d32; }
.form-status.err { color: #c62828; }
/* ---------- CTA-Band (taupe wie Footer-Verlauf im Original) ---------- */
.cta-band {
background: var(--taupe);
color: #fff;
padding: clamp(2.2rem, 5vw, 3.5rem) var(--pad-x);
}
.cta-band .inner {
max-width: var(--maxw);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 400; }
/* ============================================================
FOOTER — Taupe-Band + dunkle Schlusszeile wie Original
============================================================ */
.site-footer { margin-top: 0; }
.footer-main {
background: linear-gradient(rgb(255,255,255) 0%, var(--soft) 100%);
border-top: 6px solid var(--taupe);
padding: var(--pad-y) var(--pad-x) 3rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: 2.5rem;
max-width: var(--maxw);
margin: 0 auto;
}
.footer-grid h3 {
font-size: .85rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--brown);
margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: .5rem; }
.footer-grid a { color: var(--body-c); text-decoration: none; transition: color .2s; }
.footer-grid a:hover { color: var(--accent); }
.footer-grid .brand {
padding: 0;
margin: 0 0 1.2rem 0; /* negativen Header-Rand zurücksetzen */
background: none;
display: inline-flex;
}
.footer-grid .brand img { height: 64px; width: auto; }
.footer-bottom {
background: var(--charcoal-1);
color: #b9bcc3;
padding: 1.1rem var(--pad-x);
font-size: .85rem;
}
.footer-bottom .inner {
max-width: var(--maxw);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
}
.footer-bottom nav { display: flex; gap: 1.4rem; }
.footer-bottom a { color: #b9bcc3; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
/* ---------- Kleinkram ---------- */
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
/* Kompakt-Stufe: schmale Desktops (Standort-Punkt braucht Platz) */
@media (min-width: 1241px) and (max-width: 1460px) {
.brand img { height: 68px; }
.brand { padding-right: 1.1rem; }
.header-inner { gap: .8rem; }
.main-nav a.nav-link,
.main-nav button.nav-link { padding: .55rem .45rem; letter-spacing: .05em; }
.main-nav a.nav-link::after,
.main-nav button.nav-link::after { left: .45rem; right: .45rem; }
.main-nav > ul > li + li::before { margin: 0 .15rem; }
.header-cta .kontakt-tile { padding: 0 1rem; }
}
@media print {
.site-header, .a11y-toggle, .a11y-panel, .burger { display: none !important; }
}
/* ---------- held: werbung Credit im Impressum ---------- */
.held-credit a {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
text-decoration: none;
}
.held-credit img {
width: 190px;
height: auto;
transition: transform .25s ease, opacity .25s ease;
}
.held-credit a:hover img,
.held-credit a:focus-visible img {
transform: scale(1.04);
opacity: .85;
}
.held-credit span {
font-size: .9rem;
text-decoration: underline;
}
/* ---------- hpO-Verbandslogo in Osteopathie-Dialogen ---------- */
.leist-verband { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.12); }
.leist-verband img { width: 220px; max-width: 75%; height: auto; display: block; }
.leist-verband a { display: inline-block; }