/* ============================================================
* COMPONENTS — Header, Footer, Mobile-CTA, Buttons, Brand-Marks
* Detail-Komponenten (Cards, Hero etc.) folgen in späterer Phase.
* ============================================================ */
/* ──────────────────────────────────────────────────────────
* BRAND MARKS (Logo + Signet, inline-SVG)
* Die Marks sind in zwei Pfade aufgeteilt: __base trägt den
* Schriftzug bzw. die schwarze Signet-Hälfte, __accent das
* Karmin-Element. Per CSS aus den Tokens gefärbt — gleicher
* SVG-Source funktioniert auf hellem und dunklem Untergrund.
* ────────────────────────────────────────────────────────── */
.brand-logo,
.brand-signet {
display: inline-block;
height: 100%;
width: auto;
}
.brand-logo .logo__base,
.brand-signet .signet__base {
fill: var(--c-text-high);
transition: fill var(--t-base) var(--ease-out);
}
.brand-logo .logo__accent,
.brand-signet .signet__accent {
fill: var(--c-accent);
transition: fill var(--t-base) var(--ease-out);
}
/* ──────────────────────────────────────────────────────────
* BUTTONS
* Drei Varianten: primary (Karmin), ghost (Outline auf Dark),
* link (textuell). Klare Tap-Größe auf Touch.
* ────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 48px;
padding: var(--space-3) var(--space-5);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-normal);
line-height: 1;
white-space: nowrap;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition:
background var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
.btn:hover { color: inherit; } /* lokale Hover-Regel überstimmt globale */
.btn--primary {
background: var(--c-accent);
color: var(--c-text-on-accent);
}
.btn--primary:hover {
background: var(--c-accent-hover);
}
.btn--ghost {
background: transparent;
color: var(--c-text-high);
border-color: var(--c-border-strong);
}
.btn--ghost:hover {
border-color: var(--c-accent);
color: var(--c-text-high);
}
.btn--link {
min-height: auto;
padding: 0;
background: none;
color: var(--c-text-high);
border: 0;
border-bottom: 1px solid var(--c-border-strong);
border-radius: 0;
}
.btn--link:hover {
color: var(--c-accent);
border-bottom-color: var(--c-accent);
}
/* ──────────────────────────────────────────────────────────
* SITE-HEADER
* Default oben transparent (sitzt auf Hero-Bild).
* Beim Scrollen: frosted-glass mit feiner unterer Linie.
* ────────────────────────────────────────────────────────── */
.site-header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: var(--z-sticky);
height: var(--header-h-mobile);
display: flex;
align-items: center;
/* Default-State: sehr dezenter Glas-Tint — auf hellem Theme braucht
der Header etwas Substanz, sonst läuft Text mit dem Page-BG.
Beim Scroll wird der Tint dichter und die Border-Linie sichtbar. */
background: rgba(255, 255, 255, 0.55);
border-bottom: 1px solid transparent;
-webkit-backdrop-filter: blur(10px) saturate(1.2);
backdrop-filter: blur(10px) saturate(1.2);
transition:
background var(--t-slow) var(--ease-out),
border-color var(--t-slow) var(--ease-out),
-webkit-backdrop-filter var(--t-slow) var(--ease-out),
backdrop-filter var(--t-slow) var(--ease-out),
height var(--t-base) var(--ease-out);
}
@media (min-width: 768px) {
.site-header { height: var(--header-h); }
}
/* Scroll-Zustand — vom JS gesetzt */
.site-header.is-scrolled {
background: var(--glass-tint-header);
border-bottom-color: var(--c-border-faint);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
/* Fallback für Browser ohne backdrop-filter — opaker statt frosted */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header { background: var(--c-bg-canvas); border-bottom-color: var(--c-border-faint); }
.site-header.is-scrolled { background: var(--c-bg-canvas); }
}
.site-header__inner {
position: relative;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
/* Mobile: Brand zentriert, Hamburger absolut rechts */
@media (max-width: 1023px) {
.site-header__inner { justify-content: center; }
.site-header__brand { margin-inline: auto; }
.site-header__menu-toggle {
position: absolute;
inset-inline-end: var(--container-px);
inset-block-start: 50%;
transform: translateY(-50%);
}
}
.site-header__brand {
/* Fixe Stage-Breite verhindert Layout-Shift beim Crossfade Logo→Signet.
Logo ist breiter als Signet → wir nehmen die Logo-Breite als Bühne. */
position: relative;
display: inline-flex;
align-items: center;
width: 260px;
height: 44px;
color: var(--c-text-high);
text-decoration: none;
flex-shrink: 0;
}
@media (max-width: 767px) {
.site-header__brand { width: 230px; height: 44px; }
}
/* SVGs im Brand dürfen Mobile NICHT vom globalen svg { max-width: 100% } gestaucht werden */
.site-header__brand svg { max-width: none; }
.site-header__brand:hover { color: var(--c-text-high); }
/* Beide Marks an gleicher Position übereinander — nur Opacity animiert */
.site-header__brand-logo,
.site-header__brand-signet {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
height: 36px;
opacity: 0;
pointer-events: none;
transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Mobile: Brand-Bühne füllt natürlich + Marks horizontal zentriert in der Bühne */
@media (max-width: 1023px) {
.site-header__brand-logo,
.site-header__brand-signet {
inset-inline-start: 50%;
transform: translate(-50%, -50%);
}
}
.site-header__brand-logo svg { height: 38px; width: auto; }
.site-header__brand-signet svg { height: 48px; width: auto; }
@media (max-width: 767px) {
.site-header__brand-logo svg { height: 36px; }
.site-header__brand-signet svg { height: 42px; }
}
/* Default-State (Header oben, transparent): Logo sichtbar */
.site-header__brand-logo {
opacity: 1;
pointer-events: auto;
}
/* is-scrolled: Logo aus, Signet an — sanftes Crossfade */
.site-header.is-scrolled .site-header__brand-logo {
opacity: 0;
pointer-events: none;
}
.site-header.is-scrolled .site-header__brand-signet {
opacity: 1;
pointer-events: auto;
}
/* Primary nav — Desktop horizontal, Mobile in Drawer (kommt in späterer Phase) */
.primary-nav {
display: none;
}
@media (min-width: 1024px) {
.primary-nav {
display: block;
flex: 1;
}
.primary-nav ul {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-6);
}
.primary-nav a {
position: relative;
display: inline-block;
padding-block: var(--space-2);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--c-text-mid);
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
color: var(--c-text-high);
}
/* feine Karmin-Linie aktiver Punkt */
.primary-nav .current-menu-item > a::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: -2px;
height: 1px;
background: var(--c-accent);
}
/* ── Mega-Menü ── */
.primary-nav .menu-item--mega { position: static; }
.primary-nav .menu-item--mega > a { display: inline-flex; align-items: center; gap: 6px; }
.primary-nav .menu-item__caret {
width: 0; height: 0;
border: 4px solid transparent;
border-top-color: currentColor;
margin-top: 2px;
transition: transform var(--t-base) var(--ease-out);
}
.primary-nav .menu-item--mega:hover .menu-item__caret,
.primary-nav .menu-item--mega.is-open .menu-item__caret {
transform: rotate(180deg);
}
.mega-panel {
position: absolute;
inset-inline: clamp(var(--space-5), 4vw, var(--space-7));
inset-block-start: calc(var(--header-h) + var(--space-3));
max-width: 1100px;
margin-inline: auto;
z-index: var(--z-overlay);
display: grid;
grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr);
gap: 0;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: var(--radius-2xl);
box-shadow:
0 30px 80px rgba(20, 20, 26, 0.18),
0 4px 10px rgba(20, 20, 26, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.80);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
pointer-events: none;
transition:
opacity var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
visibility 0s linear var(--t-base);
}
/* Hover-Brücke: unsichtbarer Streifen zwischen Menü-Item und Panel,
damit der Hover nicht verloren geht. */
.mega-panel::before {
content: '';
position: absolute;
inset-inline: 0;
inset-block-start: calc((var(--space-3) + 12px) * -1);
height: calc(var(--space-3) + 12px);
background: transparent;
pointer-events: auto;
}
/* Über dem Menü-Item zusätzlich: vergrößerter Hover-Bereich,
damit der Pfad zwischen Item und Panel nicht verloren geht. */
.primary-nav .menu-item--mega::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
height: calc(var(--space-3) + 8px);
pointer-events: none;
}
.primary-nav .menu-item--mega:hover::after,
.primary-nav .menu-item--mega:focus-within::after {
pointer-events: auto;
}
/* Open: bei Hover ODER per JS gesetztes .is-open */
.primary-nav .menu-item--mega:hover > .mega-panel,
.primary-nav .menu-item--mega:focus-within > .mega-panel,
.primary-nav .menu-item--mega.is-open > .mega-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition-delay: 0s;
}
/* Teaser links */
.mega-panel__teaser {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 320px;
padding: var(--space-6);
color: #ffffff !important;
background: #14141a;
text-decoration: none;
isolation: isolate;
overflow: hidden;
}
.mega-panel__teaser-bg {
position: absolute;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
transition: transform var(--t-slow) var(--ease-out);
}
.mega-panel__teaser:hover .mega-panel__teaser-bg { transform: scale(1.05); }
.mega-panel__teaser-overlay {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(20, 20, 26, 0.30) 0%, rgba(20, 20, 26, 0.78) 100%);
}
.mega-panel__teaser-inner {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
/* Kompensiert die entfernte Eyebrow-Zeile (≈ caps-Höhe + Gap) */
padding-top: 1.75rem;
}
.mega-panel__teaser-eyebrow {
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.80);
}
.mega-panel__teaser-title {
font-family: var(--font-display);
font-size: 1.625rem;
font-weight: var(--fw-semi);
letter-spacing: -0.02em;
line-height: 1.1;
}
.mega-panel__teaser-lead {
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.82);
line-height: var(--lh-relaxed);
margin-top: var(--space-2);
}
.mega-panel__teaser-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-3);
font-size: var(--fs-small);
font-weight: var(--fw-semi);
color: var(--c-accent);
}
.mega-panel__teaser-cta svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
.mega-panel__teaser:hover .mega-panel__teaser-cta svg { transform: translateX(3px); }
/* Liste rechts (Kinder-Cards) */
.mega-panel__list {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 0;
padding: var(--space-3);
list-style: none;
margin: 0;
}
.mega-panel__list li { list-style: none; }
.mega-panel__item {
display: flex !important;
flex-direction: column;
gap: 4px;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
color: var(--c-text-high) !important;
text-decoration: none;
transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.mega-panel__item:hover {
background: var(--c-accent-dim);
color: var(--c-text-high) !important;
transform: translateX(2px);
}
.mega-panel__item-title {
font-size: var(--fs-small);
font-weight: var(--fw-semi);
color: var(--c-text-high);
letter-spacing: -0.005em;
}
.mega-panel__item-lead {
font-size: var(--fs-caption);
color: var(--c-text-low);
line-height: var(--lh-snug);
}
}
/* Header-Telefon (Desktop) */
/* Header-Aktions-Icons (Telefon + E-Mail) — Desktop only */
.site-header__actions {
display: none;
align-items: center;
gap: var(--space-2);
}
@media (min-width: 1024px) {
.site-header__actions { display: inline-flex; }
}
.site-header__icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
color: var(--c-text-mid);
border: 0;
text-decoration: none;
transition: color var(--t-base) var(--ease-out);
}
.site-header__icon-btn:hover {
background: transparent;
color: var(--c-accent);
transform: none;
}
.site-header__icon-btn svg { width: 20px; height: 20px; }
/* ── Sprach-Switcher (Globus + Dropdown) ── */
.site-header__lang { position: relative; }
/* Trigger: KEINE Pille, nur Icon + Text, Hover wird Karmin */
.site-header__lang-toggle {
background: transparent !important;
border: 0 !important;
width: auto !important;
height: 40px;
padding: 0 6px !important;
gap: 6px;
color: var(--c-text-mid) !important;
cursor: pointer;
transition: color var(--t-base) var(--ease-out) !important;
transform: none !important;
box-shadow: none !important;
}
.site-header__lang-toggle:hover,
.site-header__lang.is-open .site-header__lang-toggle {
background: transparent !important;
color: var(--c-accent) !important;
transform: none !important;
}
.site-header__lang-current {
font-size: var(--fs-caption);
font-weight: var(--fw-semi);
letter-spacing: 0.04em;
}
.site-header__lang-menu {
position: absolute;
/* Direkt am Trigger ansetzen (kein Gap, sonst bricht der Hover beim Runterfahren ab).
Optischer Abstand kommt über padding-top im Pseudo-Bridge unten. */
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 0;
background: #ffffff;
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-md);
box-shadow: 0 14px 32px rgba(20, 20, 26, 0.18);
list-style: none;
padding: 6px;
margin: 0;
/* Hover-Bridge: 6px transparenter Bereich oberhalb des Menüs, damit
Mauszeiger zwischen Trigger und Items nicht aus dem Hover-Bereich fällt. */
margin-top: 6px;
z-index: var(--z-overlay);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
visibility 0s linear var(--t-base);
}
.site-header__lang-menu::before {
content: "";
position: absolute;
inset: -8px 0 auto 0;
height: 8px;
/* Unsichtbare Brücke, damit der Hover-Bereich vom Trigger bis ins Menü
reicht (sonst „verliert" der Cursor zwischendurch den Hover-State). */
}
.site-header__lang.is-open .site-header__lang-menu,
.site-header__lang:hover .site-header__lang-menu,
.site-header__lang:focus-within .site-header__lang-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
transition-delay: 0s;
}
.site-header__lang-menu li { margin: 0; }
.site-header__lang-menu a {
display: block;
padding: 8px 14px;
font-size: var(--fs-caption);
font-weight: var(--fw-semi);
letter-spacing: 0.04em;
color: var(--c-text-high);
text-decoration: none;
border-radius: var(--radius-sm);
text-align: center;
transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.site-header__lang-menu a:hover {
background: var(--c-accent-dim);
color: var(--c-accent);
}
/* Mobile-Menü-Trigger (Hamburger) — fertige Drawer-Logik in späterer Phase */
.site-header__menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--c-text-high);
border-radius: var(--radius-sm);
}
@media (min-width: 1024px) {
.site-header__menu-toggle { display: none; }
}
/* ──────────────────────────────────────────────────────────
* SITE-MAIN
* Hauptinhalt unter dem Fixed-Header.
* ────────────────────────────────────────────────────────── */
.site-main {
display: block;
width: 100%;
min-height: 60vh;
}
/* ──────────────────────────────────────────────────────────
* STANDORT-KARTE (Leaflet, CartoDB Positron — DSGVO-konform)
* Modern, hell, minimal. Sitzt zwischen Content und Footer.
* ────────────────────────────────────────────────────────── */
.site-map-section {
width: 100%;
background: #f5f6f8;
position: relative;
display: block;
}
.site-map {
width: 100%;
height: 475px;
background: #f5f6f8;
display: block;
}
/* Signet-Pin in voller Farbe + Drop-Shadow */
.site-map__pin {
filter: drop-shadow(0 8px 18px rgba(20, 20, 26, 0.30));
}
/* Leaflet-Container: cleane Typografie */
.leaflet-container {
font-family: var(--font-body);
font-size: 13px;
background: #f5f6f8 !important;
}
/* Attribution dezent platzieren */
.leaflet-control-attribution {
background: rgba(255, 255, 255, 0.85) !important;
padding: 2px 8px !important;
font-size: 10px !important;
color: var(--c-text-low) !important;
border-radius: var(--radius-sm) 0 0 0 !important;
}
.leaflet-control-attribution a { color: var(--c-text-mid) !important; }
/* Zoom-Controls runder + heller */
.leaflet-bar {
border: 0 !important;
box-shadow: 0 6px 18px rgba(20, 20, 26, 0.10) !important;
border-radius: var(--radius-md) !important;
overflow: hidden;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background: #ffffff !important;
color: var(--c-text-high) !important;
border-color: rgba(20, 20, 26, 0.06) !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
font-size: 18px !important;
font-weight: 500 !important;
}
.leaflet-bar a:hover { background: var(--c-bg-overlay) !important; color: var(--c-accent) !important; }
/* Popup-Style */
.leaflet-popup-content-wrapper {
border-radius: var(--radius-md) !important;
box-shadow: 0 10px 30px rgba(20, 20, 26, 0.18) !important;
}
.leaflet-popup-content {
font-size: var(--fs-small) !important;
line-height: var(--lh-snug) !important;
margin: 12px 14px !important;
color: var(--c-text-high) !important;
}
.leaflet-popup-tip { box-shadow: 0 4px 8px rgba(20, 20, 26, 0.10) !important; }
/* ──────────────────────────────────────────────────────────
* SITE-FOOTER — Dark, 4-Spalten, Glas-CTA, Glow-Akzent
* Brand · Rechtsgebiete · Kontakt · Termin/CTA
* ────────────────────────────────────────────────────────── */
.site-footer {
position: relative;
background: #262a32;
color: rgba(255, 255, 255, 0.78);
padding-block: var(--space-9) var(--space-4);
isolation: isolate;
overflow: hidden;
}
/* Mobile-Footer-Rebuild */
@media (max-width: 1023px) {
.site-footer {
padding-block: var(--space-5) var(--space-4);
}
.site-footer__grid {
/* Rechtsgebiete-Spalte schmaler als Kontakt → Trennlinie sitzt links
von der optischen Mitte. Kontakt-Text bleibt durch erhöhtes
padding-inline-start an gewohnter Position. */
grid-template-columns: 0.8fr 1.35fr !important;
gap: var(--space-5) 0;
padding-block: var(--space-5);
}
/* 1. Brand-Spalte: volle Breite, Logo zentriert, Öffnungszeiten als Block
mittig, Inhalt linksbündig */
.site-footer__brand-col {
grid-column: 1 / -1;
align-items: center;
text-align: center;
gap: var(--space-4);
}
/* Brand-Link auf Mobile: Flex-Container zentriert das SVG. SVG bleibt
bei intrinsischer Breite (height fixiert, width auto via Aspect-Ratio). */
.site-footer__brand-link {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
}
.site-footer .brand-logo--footer {
display: block;
height: 36px;
width: auto;
flex: 0 0 auto;
max-width: 100%;
}
.site-footer__hours {
max-width: 280px;
margin-inline: auto;
text-align: left;
}
.site-footer__hours-h { text-align: left; }
.site-footer__social { justify-content: center; }
/* 2. Rechtsgebiete (2. Grid-Kind) — linke Spalte */
.site-footer__grid > nav.site-footer__col,
.site-footer__grid > .site-footer__col:nth-child(2) {
text-align: left;
padding-inline-start: 0;
padding-inline-end: var(--space-3);
}
/* 3. Kontakt (3. Grid-Kind) — rechte Spalte mit Trennlinie links.
padding-inline-start kompensiert die schmalere Rechtsgebiete-Spalte
so dass die Kontakt-Inhalte an gewohnter Position bleiben. */
.site-footer__grid > .site-footer__col:nth-child(3) {
text-align: left;
padding-inline-start: var(--space-6);
border-inline-start: 1px solid rgba(255, 255, 255, 0.10);
}
.site-footer__address p {
white-space: nowrap;
font-size: var(--fs-caption);
}
.site-footer__contact-list a { font-size: var(--fs-caption); }
.site-footer__address { text-align: left; }
.site-footer__contact-list { align-items: flex-start; }
/* 4. CTA-Spalte (Termin): volle Breite, zentriert, Buttons nebeneinander */
.site-footer__cta-col {
grid-column: 1 / -1;
align-items: center;
text-align: center;
margin-top: var(--space-3);
}
.site-footer__cta-col .site-footer__h,
.site-footer__cta-col .site-footer__cta-text {
text-align: center;
max-width: 38ch;
margin-inline: auto;
}
.site-footer__cta-stack {
flex-direction: row !important;
flex-wrap: nowrap;
justify-content: center;
width: 100%;
max-width: 420px;
gap: var(--space-2);
}
.site-footer__cta-stack > * {
flex: 1 1 0;
min-width: 0;
}
.btn--footer-primary span,
.btn--footer-glass span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Mitgliedschaften — kompakt aber gut lesbar, alle 4 müssen nebeneinander */
.site-footer__memberships { padding-block: var(--space-4); }
.site-footer__memberships-list {
gap: 6px;
flex-wrap: nowrap;
}
.site-footer__memberships-list li {
padding: 6px 8px;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
}
.site-footer__memberships-list img {
height: 18px;
max-width: 100%;
object-fit: contain;
display: block;
}
.membership-logo--verkehrsanwaelte img { height: 16px; }
.membership-logo--strafverteidiger_vereinigung_nrw img { height: 17px; }
}
/* Karmin-Glow entfernt — Footer bleibt clean */
.site-footer__glow { display: none; }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer a {
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
transition: color var(--t-base) var(--ease-out);
}
.site-footer a:hover { color: #ffffff; }
/* Logo wird im Footer weiß */
.site-footer .brand-logo--footer { height: 36px; width: auto; display: block; }
.site-footer .brand-logo--footer .logo__base { fill: #ffffff; }
.site-footer .brand-logo--footer .logo__accent { fill: var(--c-accent); }
/* ── Live-Öffnungsstatus-Pill (in der Bottom-Bar) ── */
.site-footer__status {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-full);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-size: var(--fs-caption);
color: rgba(255, 255, 255, 0.85);
line-height: 1.3;
white-space: nowrap;
flex: 1;
justify-content: center;
}
.site-footer__status-dot {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.site-footer__status[data-state="open"] .site-footer__status-dot {
background: #4ade80;
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
animation: footerStatusPulse 2.4s ease-out infinite;
}
.site-footer__status[data-state="closed"] .site-footer__status-dot {
background: var(--c-accent);
}
.site-footer__status-text strong { color: #ffffff; font-weight: var(--fw-semi); }
@keyframes footerStatusPulse {
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
70% { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0); }
100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) {
.site-footer__status[data-state="open"] .site-footer__status-dot { animation: none; }
}
/* ── Grid (4 Spalten) ────────────────────────────── */
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
padding-block: var(--space-7) var(--space-8);
}
@media (min-width: 640px) {
.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.site-footer__grid {
grid-template-columns: 1.3fr 0.9fr 0.9fr 1.8fr;
gap: var(--space-8);
align-items: start;
}
}
.site-footer__col { font-style: normal; min-width: 0; }
/* Base-Regeln OHNE align-items, weil die je nach Viewport unterschiedlich
gesetzt wird (Mobile: center, Desktop: flex-start). Sonst überschreibt
die Base-Regel die Mobile-Regel wegen Source-Order. */
.site-footer__brand-col {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* Desktop-Brand-Layout (nur >= 1024px) */
@media (min-width: 1024px) {
.site-footer__brand-col {
align-items: flex-start;
gap: var(--space-6);
}
.site-footer__brand-link {
display: inline-block;
margin: 0;
margin-top: -6px;
}
}
/* Section-Headings im Footer — größer als die darunter liegenden Links */
.site-footer__h {
font-size: 0.95rem;
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.70);
margin-bottom: var(--space-5);
}
/* Adresse */
.site-footer__address { margin: 0 0 var(--space-4); font-style: normal; }
.site-footer__address p {
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-relaxed);
color: rgba(255, 255, 255, 0.78);
}
/* Kontakt — Telefon/E-Mail als roter Plain-Text-Link */
.site-footer__contact-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__contact-link {
display: inline-block;
font-size: var(--fs-body);
font-weight: var(--fw-semi);
color: var(--c-accent) !important;
letter-spacing: var(--tracking-snug);
text-decoration: none;
transition: color var(--t-base) var(--ease-out);
}
.site-footer__contact-link:hover {
color: #ffffff !important;
}
/* Navigation (Footer-Menü, Rechtsgebiete) — kleiner als die Überschrift */
.site-footer__nav-list {
display: flex !important;
flex-direction: column !important;
gap: var(--space-2);
list-style: none;
padding: 0;
margin: 0;
font-size: var(--fs-small);
}
.site-footer__nav-list a {
color: rgba(255, 255, 255, 0.82);
font-weight: var(--fw-regular);
transition: color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
display: inline-block;
}
.site-footer__nav-list a:hover {
color: var(--c-accent);
transform: translateX(2px);
}
/* CTA-Spalte (Termin) */
.site-footer__cta-col {
display: flex;
flex-direction: column;
}
.site-footer__cta-col .site-footer__h { margin-bottom: var(--space-3); }
.site-footer__cta-text {
margin: 0 0 var(--space-4);
font-size: var(--fs-small);
line-height: var(--lh-relaxed);
color: rgba(255, 255, 255, 0.78);
max-width: 58ch;
}
.site-footer__cta-stack {
display: flex;
flex-direction: column;
gap: var(--space-2);
align-items: stretch;
max-width: 320px;
}
/* Öffnungszeiten (jetzt in der Brand-Spalte unter dem Logo) */
.site-footer__hours { max-width: 320px; }
.site-footer__hours-h {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 var(--space-3);
}
.opening-hours {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-2) var(--space-4);
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-snug);
}
.site-footer .opening-hours dt { color: rgba(255, 255, 255, 0.55); white-space: nowrap; font-weight: var(--fw-medium); }
.site-footer .opening-hours dd { margin: 0; color: rgba(255, 255, 255, 0.88); white-space: nowrap; }
/* Brand-Col im Footer auf Desktop breiter, damit Öffnungszeiten in eine Zeile passen.
Termin-Spalte deutlich breiter, damit Text nicht in 4-5-Wort-Zeilen umbricht.
Rechtsgebiete-Spalte bekommt links etwas Atemluft zur Brand-Spalte. */
@media (min-width: 1024px) {
.site-footer__grid { grid-template-columns: 1.3fr 0.9fr 0.9fr 1.8fr; }
.site-footer__hours { max-width: none; }
.site-footer__grid > nav.site-footer__col {
padding-inline-start: var(--space-4);
}
}
.site-footer .opening-hours__note {
margin-top: var(--space-3);
font-size: var(--fs-caption);
color: rgba(255, 255, 255, 0.48);
font-style: italic;
line-height: var(--lh-snug);
}
.btn--footer-primary,
.btn--footer-glass {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 38px;
padding-inline: var(--space-4);
font-family: var(--font-body);
font-size: var(--fs-caption);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
line-height: 1;
border-radius: var(--radius-full);
text-decoration: none;
transition:
background var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out);
}
.btn--footer-primary {
background: linear-gradient(180deg, rgba(174, 22, 21, 0.95), rgba(142, 17, 16, 0.95));
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 14px 36px rgba(174, 22, 21, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--footer-primary:hover {
background: linear-gradient(180deg, rgba(192, 28, 27, 1), rgba(154, 19, 18, 1));
transform: translateY(-1px);
box-shadow:
0 18px 44px rgba(174, 22, 21, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.btn--footer-glass {
background: rgba(255, 255, 255, 0.06);
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.18);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.btn--footer-glass:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.32);
transform: translateY(-1px);
}
.btn--footer-primary svg,
.btn--footer-glass svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Social-Icons */
/* Social-Icons unter Öffnungszeiten — ohne Rahmen, kompakt, nur Icon */
.site-footer__social {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
padding: 0;
margin: var(--space-2) 0 0;
list-style: none;
}
.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: transparent;
border: 0;
border-radius: 0;
color: rgba(255, 255, 255, 0.55);
transition: color var(--t-base) var(--ease-out);
}
.site-footer__social a:hover {
background: transparent;
border: 0;
color: var(--c-accent);
transform: none;
}
.site-footer__social svg { width: 18px; height: 18px; display: block; }
/* ── Memberships-Streifen ────────────────────────── */
.site-footer__memberships {
padding-block: var(--space-7);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
.site-footer__memberships-label {
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.site-footer__memberships-list {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
/* Karten-Style ohne Padding/Height — Padding wird je Viewport gesetzt */
.site-footer__memberships-list li {
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: var(--radius-md);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.site-footer__memberships-list li:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
/* Desktop-Größen (nur >= 1024px). Mobile-Werte sind im
@media (max-width: 1023px)-Block oben definiert. */
@media (min-width: 1024px) {
.site-footer__memberships-list {
gap: clamp(var(--space-5), 5vw, var(--space-8));
}
.site-footer__memberships-list li {
padding: var(--space-3) var(--space-5);
}
.site-footer__memberships-list img {
height: 48px;
width: auto;
max-width: 180px;
display: block;
}
.membership-logo--verkehrsanwaelte img { height: 48px; }
.membership-logo--strafverteidiger_vereinigung_nrw img { height: 44px; }
}
/* Image-Basis (sprach-agnostisch) — Höhe/Width werden je Viewport gesetzt */
.site-footer__memberships-list img {
width: auto;
max-width: 100%;
display: block;
filter: none;
transition: filter var(--t-base) var(--ease-out);
}
/* Bunt by default, S/W on hover */
.site-footer__memberships-list a:hover img,
.site-footer__memberships-list li:hover img {
filter: grayscale(100%);
}
/* Footer-Note */
.site-footer__note {
padding-block: var(--space-5);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: var(--fs-caption);
color: rgba(255, 255, 255, 0.55);
max-width: 80ch;
}
/* Bottom-Bar: Legal-Links · Status-Pill · Copyright */
.site-footer__bottom {
padding-block: var(--space-5);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5);
font-size: var(--fs-caption);
color: rgba(255, 255, 255, 0.50);
}
/* Bottom-Bar: Copyright links, Status mittig, Legal-Menü rechts */
.site-footer__copy {
order: 1;
margin: 0;
color: rgba(255, 255, 255, 0.50);
}
.site-footer__bottom .site-footer__status { order: 2; }
.site-footer__bottom ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
list-style: none;
padding: 0;
margin: 0;
order: 3;
margin-left: auto;
}
.site-footer__bottom a { color: rgba(255, 255, 255, 0.65); }
.site-footer__bottom a:hover { color: #ffffff; }
/* Bottom-Social (Facebook/Instagram im Bottom-Bar) — Desktop: ausgeblendet.
Sichtbar erst ab Mobile-Breakpoint (siehe @media max-width: 720px unten). */
.site-footer__bottom > ul.site-footer__bottom-social { display: none; }
/* Mobile-Bottom-Bar:
Zeile 1: Status-Pill (full-width, zentriert)
Zeile 2: Impressum · Datenschutz (full-width, zentriert)
Zeile 3: Copyright links + Social-Icons rechts in einer Reihe */
@media (max-width: 720px) {
.site-footer__bottom {
justify-content: space-between;
text-align: left;
column-gap: var(--space-3);
}
.site-footer__bottom .site-footer__status {
order: 1;
flex: 0 0 100%;
justify-content: center;
}
.site-footer__bottom #legal-menu,
.site-footer__bottom ul.menu {
order: 2;
flex: 0 0 100%;
justify-content: center;
margin-left: 0;
}
.site-footer__copy {
order: 3;
flex: 1 1 auto;
text-align: left;
margin-left: 0;
}
/* Mobile-only: Bottom-Social wieder sichtbar, rechtsbündig neben Copyright */
.site-footer__bottom > ul.site-footer__bottom-social {
display: flex;
order: 4;
flex: 0 0 auto;
gap: var(--space-2);
margin: 0 0 0 auto;
padding: 0;
list-style: none;
}
.site-footer__bottom > ul.site-footer__bottom-social li { margin: 0; }
.site-footer__bottom > ul.site-footer__bottom-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: rgba(255, 255, 255, 0.55);
transition: color var(--t-base) var(--ease-out);
}
.site-footer__bottom > ul.site-footer__bottom-social a:hover { color: var(--c-accent); }
.site-footer__bottom > ul.site-footer__bottom-social svg {
width: 16px;
height: 16px;
display: block;
}
}
/* ──────────────────────────────────────────────────────────
* FLOATING-CALL-CTA (Desktop)
* Schwebende Karmin-Pille bottom-right, Klick zum Anrufen.
* ────────────────────────────────────────────────────────── */
.floating-call {
position: fixed;
z-index: var(--z-cta-mobile);
right: clamp(var(--space-5), 3vw, var(--space-7));
bottom: clamp(var(--space-5), 3vw, var(--space-7));
width: 60px;
height: 60px;
display: none;
align-items: center;
justify-content: center;
background: var(--c-accent);
color: #ffffff;
border-radius: 50%;
text-decoration: none;
box-shadow:
0 12px 30px rgba(174, 22, 21, 0.45),
0 2px 6px rgba(20, 20, 26, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.floating-call::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(174, 22, 21, 0.45);
animation: floatingPulse 2.4s ease-out infinite;
pointer-events: none;
}
.floating-call:hover {
background: var(--c-accent-hover);
color: #ffffff;
transform: translateY(-2px) scale(1.04);
}
.floating-call svg { width: 24px; height: 24px; }
@keyframes floatingPulse {
0% { transform: scale(0.95); opacity: 0.55; }
70% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(0.95); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.floating-call::before { animation: none; }
}
/* Nur auf Desktop sichtbar */
@media (min-width: 1024px) {
.floating-call { display: inline-flex; }
}
/* ──────────────────────────────────────────────────────────
* FLOATING-EMERGENCY (Notfall-Button — blau, mit Sirene)
* Sitzt direkt unter dem Telefon-Button auf Desktop.
* Nur auf Haftbefehl/Hausdurchsuchung-Seiten gerendert.
* ────────────────────────────────────────────────────────── */
.floating-emergency {
position: fixed;
z-index: var(--z-cta-mobile);
right: clamp(var(--space-5), 3vw, var(--space-7));
/* Sitzt OBEN: Call (bottom) + WhatsApp (middle) + Emergency (top) */
bottom: calc(clamp(var(--space-5), 3vw, var(--space-7)) + 2 * (60px + var(--space-3)));
width: 60px;
height: 60px;
display: none;
align-items: center;
justify-content: center;
background: #1e6fdb;
color: #ffffff;
border: 0;
border-radius: 50%;
cursor: pointer;
box-shadow:
0 12px 30px rgba(30, 111, 219, 0.55),
0 2px 6px rgba(20, 20, 26, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.floating-emergency::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(30, 111, 219, 0.55);
animation: emergencyPulse 1.6s ease-out infinite;
pointer-events: none;
}
.floating-emergency:hover {
background: #1956ad;
transform: translateY(-2px) scale(1.04);
}
.floating-emergency svg { width: 26px; height: 26px; }
@keyframes emergencyPulse {
0% { transform: scale(0.95); opacity: 0.65; }
70% { transform: scale(1.45); opacity: 0; }
100% { transform: scale(0.95); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.floating-emergency::before { animation: none; }
}
/* Mobile: kein Floating — Mobile-Bar trägt die Aktionen */
@media (max-width: 1023px) {
.floating-emergency { display: none !important; }
}
@media (min-width: 1024px) {
.floating-emergency { display: inline-flex; }
}
/* ──────────────────────────────────────────────────────────
* FLOATING-WHATSAPP — gruener Chat-Button (zwischen Call und Notfall)
* ────────────────────────────────────────────────────────── */
.floating-whatsapp {
position: fixed;
z-index: var(--z-cta-mobile);
right: clamp(var(--space-5), 3vw, var(--space-7));
bottom: calc(clamp(var(--space-5), 3vw, var(--space-7)) + 60px + var(--space-3));
width: 60px;
height: 60px;
display: none;
align-items: center;
justify-content: center;
background: #25D366;
color: #ffffff;
border-radius: 50%;
text-decoration: none;
box-shadow:
0 12px 30px rgba(37, 211, 102, 0.45),
0 2px 6px rgba(20, 20, 26, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.floating-whatsapp::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(37, 211, 102, 0.45);
animation: whatsappPulse 2.4s ease-out infinite;
pointer-events: none;
}
.floating-whatsapp:hover {
background: #1ebd5b;
color: #ffffff;
transform: translateY(-2px) scale(1.04);
}
.floating-whatsapp svg { width: 28px; height: 28px; }
@keyframes whatsappPulse {
0% { transform: scale(0.95); opacity: 0.55; }
70% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(0.95); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.floating-whatsapp::before { animation: none; }
}
@media (min-width: 1024px) {
.floating-whatsapp { display: inline-flex; }
}
@media (max-width: 1023px) {
.floating-whatsapp { display: none !important; }
}
/* ──────────────────────────────────────────────────────────
* DOWNLOAD-CARDS (Dokumente-Seite)
* 3 PDFs nebeneinander, mit Doc-Icon links + Download-Pfeil rechts
* ────────────────────────────────────────────────────────── */
.download-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
margin: var(--space-6) 0;
max-width: 100% !important;
}
@media (min-width: 640px) {
.download-cards { grid-template-columns: repeat(3, 1fr); }
}
/* Page-Content-Cardlinks (download-card) sollen NICHT die Karmin-Unterstreichung
der normalen Lese-Links bekommen */
.page-content__inner a.download-card,
.page-content__inner .download-cards a {
border-bottom: 0 !important;
}
.download-card {
display: flex !important;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: #ffffff;
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--c-text-high);
box-shadow: 0 2px 8px rgba(20, 20, 26, 0.04);
transition:
background var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.download-card:hover {
background: #ffffff;
border-color: var(--c-accent);
color: var(--c-text-high);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(20, 20, 26, 0.10);
}
.download-card__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--c-accent-dim);
color: var(--c-accent);
/* Inline-SVG via CSS-Background — überlebt WP-KSES-Filter im post_content */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 22px 22px;
}
/* Globales base.css setzt svg { height: auto } — wir erzwingen unsere Maße */
.download-card__icon svg { width: 22px !important; height: 22px !important; }
.download-card__name {
flex: 1;
min-width: 0;
font-size: var(--fs-small);
font-weight: var(--fw-semi);
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--c-text-high);
overflow: hidden;
text-overflow: ellipsis;
}
.download-card__arrow {
flex-shrink: 0;
display: inline-block;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform var(--t-base) var(--ease-out), background-image var(--t-base) var(--ease-out);
}
.download-card:hover .download-card__arrow {
transform: translateY(2px);
background-image: url("data:image/svg+xml;utf8,");
}
/* ── Emergency-Lightbox ──────────────────────────────────── */
.emergency-lightbox[hidden] { display: none !important; }
.emergency-lightbox {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(var(--space-4), 3vw, var(--space-6));
height: 100vh;
height: 100dvh;
}
.emergency-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.65);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
backdrop-filter: blur(18px) saturate(1.2);
animation: vitaBackdropIn var(--t-slow) var(--ease-out) both;
}
.emergency-lightbox__panel {
position: relative;
width: 100%;
max-width: 540px;
max-height: 92vh;
overflow: hidden;
background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
border-radius: var(--radius-2xl);
border: 1px solid rgba(30, 111, 219, 0.15);
box-shadow:
0 40px 100px rgba(15, 23, 42, 0.55),
0 6px 20px rgba(15, 23, 42, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.90);
display: flex;
flex-direction: column;
animation: vitaPanelIn var(--t-slow) var(--ease-spring) both;
}
.emergency-lightbox__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
z-index: 2;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #14141a;
cursor: pointer;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.emergency-lightbox__close:hover {
background: #1e6fdb;
color: #ffffff;
transform: rotate(90deg);
}
.emergency-lightbox__close svg { width: 18px; height: 18px; }
.emergency-lightbox__media {
position: relative;
height: 200px;
background-size: cover;
background-position: center;
background-color: #0f172a;
flex-shrink: 0;
}
/* Subtiler blauer Gradient als Overlay über dem Bild — Verbindung zur Brand */
.emergency-lightbox__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.10) 0%, rgba(30, 111, 219, 0.35) 100%);
pointer-events: none;
}
/* Wenn kein Bild gepflegt — eleganter blauer Verlauf mit Pattern */
.emergency-lightbox__panel:not(:has(.emergency-lightbox__media)) .emergency-lightbox__content { padding-top: clamp(var(--space-6), 4vw, var(--space-8)); }
.emergency-lightbox__content {
padding: clamp(var(--space-5), 3vw, var(--space-7));
overflow-y: auto;
}
.emergency-lightbox__eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 var(--space-3);
padding: 4px 12px 4px 8px;
background: rgba(30, 111, 219, 0.10);
border-radius: var(--radius-full);
font-size: 11px;
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: #1e6fdb;
}
.emergency-lightbox__eyebrow::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #1e6fdb;
box-shadow: 0 0 0 0 rgba(30, 111, 219, 0.55);
animation: emergencyDotPulse 1.6s ease-out infinite;
}
@keyframes emergencyDotPulse {
0% { box-shadow: 0 0 0 0 rgba(30, 111, 219, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(30, 111, 219, 0); }
100% { box-shadow: 0 0 0 0 rgba(30, 111, 219, 0); }
}
@media (prefers-reduced-motion: reduce) {
.emergency-lightbox__eyebrow::before { animation: none; }
}
.emergency-lightbox__title {
font-family: var(--font-display);
font-size: clamp(1.625rem, 3.2vw, 2.125rem);
font-weight: var(--fw-semi);
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--c-text-high);
margin: 0 0 var(--space-4);
text-wrap: balance;
}
.emergency-lightbox__text {
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--c-text-mid);
margin: 0 0 var(--space-6);
max-width: 52ch;
}
/* CTA-Button — etwas wuchtiger, mit subtilem Karmin-zu-Anthrazit-Gradient */
.emergency-lightbox__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
width: 100%;
min-height: 64px;
padding-inline: var(--space-5);
background: linear-gradient(180deg, var(--c-accent) 0%, #8e1110 100%);
color: #ffffff !important;
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: var(--fw-semi);
letter-spacing: -0.015em;
border-radius: var(--radius-full);
text-decoration: none;
box-shadow:
0 18px 40px rgba(174, 22, 21, 0.50),
0 2px 6px rgba(20, 20, 26, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.emergency-lightbox__cta:hover {
color: #ffffff !important;
transform: translateY(-2px);
box-shadow:
0 22px 50px rgba(174, 22, 21, 0.58),
0 2px 6px rgba(20, 20, 26, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.emergency-lightbox__cta svg { width: 22px; height: 22px; }
body.emergency-open { overflow: hidden; }
/* ──────────────────────────────────────────────────────────
* MOBILE BOTTOM-BAR
* Schmale, moderne Leiste am unteren Rand. Drei gleich
* gewichtete Aktionen: Anrufen · E-Mail · Route.
* ────────────────────────────────────────────────────────── */
.mobile-bar {
position: fixed;
z-index: var(--z-cta-mobile);
inset-inline: 0;
bottom: 0;
display: flex;
/* Helles Glas — passt zum Consent-Banner und zur hellen Markensprache */
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
border-top: 1px solid rgba(20, 20, 26, 0.08);
box-shadow: 0 -4px 24px rgba(20, 20, 26, 0.08);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bar__item {
flex: 1;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding-block: 10px;
color: var(--c-text);
font-size: 11px;
font-weight: var(--fw-medium);
letter-spacing: 0.02em;
text-decoration: none;
transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
border-right: 1px solid rgba(20, 20, 26, 0.06);
}
.mobile-bar__item:last-child { border-right: 0; }
.mobile-bar__item svg { width: 22px; height: 22px; }
.mobile-bar__item:active,
.mobile-bar__item:focus-visible {
background: rgba(20, 20, 26, 0.04);
color: var(--c-text-high);
}
.mobile-bar__item--emergency { color: #1e6fdb; }
.mobile-bar__item--emergency:active,
.mobile-bar__item--emergency:hover { color: #1e6fdb; background: rgba(30, 111, 219, 0.08); }
.mobile-bar__item--call {
color: var(--c-accent);
position: relative;
}
.mobile-bar__item--call::after {
content: '';
position: absolute;
inset-block-end: 0;
inset-inline: 20%;
height: 3px;
background: var(--c-accent);
border-radius: 2px 2px 0 0;
}
.mobile-bar__item--whatsapp { color: #25D366; }
.mobile-bar__item--whatsapp:active,
.mobile-bar__item--whatsapp:hover { color: #25D366; background: rgba(37, 211, 102, 0.08); }
/* Buttons im Mobile-Bar haben kein Default-Button-Styling */
.mobile-bar button.mobile-bar__item {
background: transparent;
border: 0;
font-family: inherit;
cursor: pointer;
}
/* Auf Desktop ausblenden — dort fliegt der floating-call */
@media (min-width: 1024px) {
.mobile-bar { display: none; }
}
/* (Legacy .mobile-cta entfernt — siehe .floating-call + .mobile-bar oben) */
/* ──────────────────────────────────────────────────────────
* MOBILE DRAWER
* Vollbild-Overlay von rechts (nur Mobil/Tablet). Auf Desktop
* komplett ausgeblendet — dort trägt die normale Primary-Nav
* im Header die Navigation.
*
* WICHTIG: Default-State muss SOFORT unsichtbar sein, sonst
* rendert der Drawer-Inhalt als nackter Text in der Seite.
* ────────────────────────────────────────────────────────── */
.drawer {
position: fixed;
inset: 0;
z-index: var(--z-modal);
visibility: hidden;
opacity: 0;
pointer-events: none;
transition:
opacity var(--t-slow) var(--ease-out),
visibility 0s linear var(--t-slow);
}
.drawer.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transition-delay: 0s;
}
.drawer__scrim {
position: absolute;
inset: 0;
background: rgba(20, 20, 26, 0.32);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(420px, 92vw);
padding: calc(env(safe-area-inset-top, 0px) + var(--space-5)) var(--space-6) var(--mobile-cta-clear);
display: flex;
flex-direction: column;
gap: var(--space-6);
background: var(--c-bg-elevated);
border-left: var(--glass-border);
box-shadow: var(--shadow-xl);
transform: translateX(100%);
transition: transform var(--t-slow) var(--ease-out);
overflow-y: auto;
overscroll-behavior: contain;
}
.drawer.is-open .drawer__panel {
transform: translateX(0);
}
.drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.drawer__signet {
display: inline-flex;
align-items: center;
height: 44px;
text-decoration: none;
}
.drawer__signet svg { height: 44px; width: auto; }
.drawer__close {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-text-high);
border-radius: var(--radius-sm);
}
/* ── Drawer-Nav mit ausklappbaren Submenüs ── */
.drawer-nav,
.drawer-nav__sub {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
}
.drawer-nav__item { display: block; }
.drawer-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) 0;
font-size: 1.375rem;
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
color: var(--c-text-high);
border-bottom: 1px solid var(--c-border-faint);
text-decoration: none;
cursor: pointer;
list-style: none;
}
.drawer-nav__link::-webkit-details-marker,
.drawer-nav__link::marker { display: none; content: ''; }
.drawer-nav__link:hover { color: var(--c-accent); }
.drawer-nav__caret {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--c-bg-overlay);
position: relative;
transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.drawer-nav__caret::before,
.drawer-nav__caret::after {
content: '';
position: absolute;
inset: 50% 8px auto 8px;
height: 2px;
background: var(--c-text-high);
transform: translateY(-50%);
transition: transform var(--t-base) var(--ease-out);
}
.drawer-nav__caret::after { transform: translateY(-50%) rotate(90deg); }
.drawer-nav__details[open] .drawer-nav__caret { background: var(--c-accent); }
.drawer-nav__details[open] .drawer-nav__caret::before,
.drawer-nav__details[open] .drawer-nav__caret::after { background: #ffffff; }
.drawer-nav__details[open] .drawer-nav__caret::after { transform: translateY(-50%) rotate(0deg); }
.drawer-nav__sub {
padding: var(--space-2) 0 var(--space-3);
border-bottom: 1px solid var(--c-border-faint);
gap: 2px;
}
.drawer-nav__sublink {
display: block;
padding: 10px 0;
padding-inline-start: var(--space-4);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
color: var(--c-text-mid);
text-decoration: none;
position: relative;
transition: color var(--t-base) var(--ease-out), padding var(--t-base) var(--ease-out);
}
.drawer-nav__sublink::before {
content: '';
position: absolute;
inset-inline-start: 0;
inset-block-start: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
transform: translateY(-50%);
opacity: 0.45;
}
.drawer-nav__sublink:hover {
color: var(--c-accent);
padding-inline-start: calc(var(--space-4) + 4px);
}
.drawer-nav__sublink:hover::before { opacity: 1; }
.drawer-nav__sublink--all {
font-weight: var(--fw-semi);
color: var(--c-text-high);
}
/* ── Sprach-Switcher im Drawer ── */
.drawer__lang {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--c-border-faint);
}
.drawer__lang-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-text-low);
margin-bottom: var(--space-3);
}
.drawer__lang-label svg { width: 14px; height: 14px; }
.drawer__lang-list {
display: flex !important;
flex-direction: row !important;
gap: var(--space-2);
list-style: none;
padding: 0;
margin: 0;
}
.drawer__lang-list a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
padding: 10px 14px;
background: var(--c-bg-overlay);
border-radius: var(--radius-md);
font-size: var(--fs-small);
font-weight: var(--fw-semi);
letter-spacing: 0.04em;
color: var(--c-text-mid);
text-decoration: none;
transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.drawer__lang-list a:hover {
background: var(--c-accent);
color: #ffffff;
}
.drawer__lang-list a.is-active {
background: var(--c-accent);
color: #ffffff;
cursor: default;
}
/* ── Kontakt-Buttons im Drawer (Telefon + Mail nebeneinander) ── */
.drawer__contact {
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px solid var(--c-border-faint);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.drawer__contact-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 48px;
padding: 0 var(--space-3);
border-radius: var(--radius-full);
font-size: var(--fs-small);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
text-decoration: none;
border: 1px solid transparent;
transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.drawer__contact-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.drawer__contact-btn--primary {
background: var(--c-accent);
color: #ffffff !important;
box-shadow: 0 6px 18px rgba(174, 22, 21, 0.30);
}
.drawer__contact-btn--primary:hover {
background: var(--c-accent-hover);
color: #ffffff !important;
transform: translateY(-1px);
}
.drawer__contact-btn--ghost {
background: var(--c-bg-elevated);
color: var(--c-text-high) !important;
border-color: var(--c-border-soft);
}
.drawer__contact-btn--ghost:hover {
border-color: var(--c-accent);
color: var(--c-accent) !important;
transform: translateY(-1px);
}
/* Body-Scroll-Lock wenn Drawer offen */
body.drawer-open { overflow: hidden; }
/* Auf Desktop komplett aus dem Layout */
@media (min-width: 1024px) {
.drawer { display: none !important; }
}
/* ============================================================
* SECTIONS (Phase 3a v2) — Editorial Modern
* Hero, Marquee, Practice-Slider, Buttons (reveal/text)
* ============================================================ */
/* ──────────────────────────────────────────────────
* HERO — asymmetrisch, Mega-Typo, Karmin-Akzente
* ────────────────────────────────────────────────── */
.hero {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
padding-block: calc(var(--header-h-mobile) + var(--space-5)) var(--space-6);
padding-inline: var(--container-px);
background: var(--c-bg-canvas);
isolation: isolate;
overflow: hidden;
}
@media (min-width: 768px) {
.hero {
padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7);
}
}
/* Hero ohne Bild: feines Linien-Pattern auf der Canvas-Farbe */
.hero--no-image {
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 96px,
rgba(20, 20, 26, 0.025) 96px,
rgba(20, 20, 26, 0.025) 97px
),
var(--c-bg-canvas);
}
/* Glass-Card mit Content drin */
.hero__inner {
position: relative;
width: 100%;
max-width: 1100px;
margin-inline: auto;
padding: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-5), 4vw, var(--space-7));
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--space-6);
/* Glassmorphism */
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--radius-2xl);
box-shadow:
0 24px 70px rgba(20, 20, 26, 0.18),
0 2px 6px rgba(20, 20, 26, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
backdrop-filter: blur(24px) saturate(1.4);
}
/* Auf großen Screens leichter Negative-Margin oben, damit Card unter den Header rutscht */
@media (min-width: 768px) {
.hero__inner {
padding: clamp(var(--space-7), 5vw, var(--space-9)) clamp(var(--space-6), 5vw, var(--space-8));
}
}
/* Wenn kein Hintergrundbild: Card weniger transparent, Border dunkler */
.hero--no-image .hero__inner {
background: rgba(255, 255, 255, 0.65);
border-color: var(--c-border-soft);
}
/* Fallback ohne backdrop-filter — Card opaker statt frosted */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.hero__inner {
background: rgba(255, 255, 255, 0.96);
}
}
/* Top-Meta-Bar */
.hero__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
}
.hero__meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-label);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-text-low);
}
.hero__meta-item--accent::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
}
/* Headline-Block: Logo oben + Headline darunter (zentriert) */
.hero__headline-block {
align-self: center;
padding-block: var(--space-5);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-5);
width: 100%;
}
.hero__eyebrow {
margin: 0;
color: var(--c-accent);
/* Etwas größer als der Standard-Eyebrow (12px), damit die Aussage trägt. */
font-size: clamp(0.875rem, 1.1vw, 1rem);
letter-spacing: 0.18em;
}
.hero__logo {
display: block;
width: clamp(280px, 48vw, 620px);
}
.hero__logo svg {
display: block;
width: 100%;
height: auto;
}
.hero__headline {
font-family: var(--font-display);
font-size: clamp(1.0625rem, 1.8vw, 1.5rem);
font-weight: var(--fw-medium);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--c-text-mid);
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: clamp(var(--space-2), 1.5vw, var(--space-4));
}
/* Drei Rechtsgebiete als Inline-Pills nebeneinander */
.hero__headline > span {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
.hero__headline-dot {
color: var(--c-accent);
display: inline;
margin-left: 0.02em;
}
/* Mobile: kompaktere Hero-Card */
@media (max-width: 767px) {
.hero {
padding-block: calc(var(--header-h-mobile) + var(--space-5)) var(--space-5);
}
.hero__inner {
padding: var(--space-5) var(--space-4);
gap: var(--space-4);
border-radius: var(--radius-xl);
}
.hero__meta { font-size: 0.6875rem; gap: var(--space-2); }
.hero__headline-block {
gap: var(--space-3);
padding-block: var(--space-2);
}
.hero__logo { width: clamp(200px, 65vw, 320px); }
.hero__headline {
font-size: 0.8125rem;
line-height: 1.25;
letter-spacing: -0.005em;
gap: var(--space-2);
flex-wrap: nowrap; /* alle 3 in EINER Zeile */
}
.hero__headline > span {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}
.hero__subline {
font-size: 0.875rem;
line-height: 1.45;
max-width: 32ch;
margin-inline: auto;
}
.hero__ctas {
flex-wrap: nowrap; /* nebeneinander erzwingen */
gap: var(--space-2);
width: 100%;
}
.hero__ctas .btn--glass-accent,
.hero__ctas .btn--glass-outline {
flex: 1;
min-width: 0;
min-height: 44px;
padding-inline: var(--space-3);
font-size: 0.8125rem;
gap: 6px;
white-space: nowrap;
}
.hero__ctas .btn--glass-accent svg,
.hero__ctas .btn--glass-outline svg { width: 14px; height: 14px; }
/* Buttons: bei sehr schmal Text abkürzen */
.hero__ctas .btn--glass-outline span {
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Bottom: Subline OBEN, CTAs DRUNTER (zentriert) */
.hero__bottom {
display: flex;
flex-direction: column;
gap: var(--space-5);
align-items: center;
text-align: center;
}
.hero__subline {
max-width: none;
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
line-height: var(--lh-relaxed);
color: var(--c-text-mid);
margin: 0;
}
.hero__ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3);
}
/* ── Glass-Buttons (für Hero) ───────────────────────── */
.btn--glass-accent {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 56px;
padding-inline: var(--space-6);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
line-height: 1;
background: rgba(174, 22, 21, 0.88);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-full);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
box-shadow:
0 10px 30px rgba(174, 22, 21, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
text-decoration: none;
transition:
background var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.btn--glass-accent:hover {
background: rgba(143, 17, 16, 0.95);
color: #ffffff;
transform: translateY(-1px);
box-shadow:
0 14px 40px rgba(174, 22, 21, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.btn--glass-accent svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.btn--glass-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 56px;
padding-inline: var(--space-6);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
line-height: 1;
background: rgba(255, 255, 255, 0.55);
color: var(--c-text-high);
border: 1px solid rgba(20, 20, 26, 0.16);
border-radius: var(--radius-full);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
box-shadow:
0 6px 24px rgba(20, 20, 26, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
text-decoration: none;
transition:
background var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
.btn--glass-outline:hover {
background: rgba(255, 255, 255, 0.72);
border-color: var(--c-accent);
color: var(--c-accent);
transform: translateY(-1px);
}
.btn--glass-outline svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ── Scroll-Indikator ──────────────────────────────── */
.hero__scroll {
position: absolute;
bottom: var(--space-5);
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
color: var(--c-text-mid);
text-decoration: none;
transition: color var(--t-base) var(--ease-out);
}
.hero__scroll:hover { color: var(--c-accent); }
.hero__scroll-mouse {
display: block;
width: 24px;
height: 38px;
border: 2px solid currentColor;
border-radius: 12px;
position: relative;
}
.hero__scroll-dot {
position: absolute;
top: 6px;
left: 50%;
width: 3px;
height: 7px;
background: currentColor;
border-radius: 2px;
transform: translate(-50%, 0);
animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
0% { transform: translate(-50%, 0); opacity: 1; }
60% { transform: translate(-50%, 14px); opacity: 0; }
100% { transform: translate(-50%, 14px); opacity: 0; }
}
.hero__scroll-arrow {
width: 14px;
height: 14px;
display: block;
animation: scroll-arrow 1.8s ease-in-out infinite;
}
@keyframes scroll-arrow {
0%, 100% { transform: translateY(0); opacity: 0.55; }
50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero__scroll-dot, .hero__scroll-arrow { animation: none; }
}
/* Auf sehr niedrigen viewports: Scroll-Indikator weglassen */
@media (max-height: 560px) {
.hero__scroll { display: none; }
}
/* Hintergrund-Bild — vollflächig sichtbar, kein Overlay */
.hero__bg {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ──────────────────────────────────────────────────
* MARQUEE — endloses Band mit Karmin-Bullets
* ────────────────────────────────────────────────── */
.marquee {
position: relative;
overflow: hidden;
padding-block: var(--space-7);
border-top: 1px solid var(--c-border-faint);
border-bottom: 1px solid var(--c-border-faint);
background: var(--c-bg-canvas);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
display: flex;
align-items: center;
gap: var(--space-7);
width: max-content;
animation: marquee-scroll 36s linear infinite;
}
.marquee:hover .marquee__track {
animation-play-state: paused;
}
.marquee__item {
display: inline-flex;
align-items: center;
gap: var(--space-7);
font-family: var(--font-display);
font-size: clamp(2.25rem, 5.5vw, 4.5rem);
font-weight: var(--fw-semi);
letter-spacing: -0.025em;
line-height: 1;
color: var(--c-text-high);
white-space: nowrap;
}
.marquee__bullet {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--c-accent);
flex-shrink: 0;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; transform: none; }
.marquee { -webkit-mask-image: none; mask-image: none; }
}
/* ──────────────────────────────────────────────────
* PRACTICE-SLIDER (horizontaler Scroll-Snap, Bento-Cards)
* ────────────────────────────────────────────────── */
.practice {
background: var(--c-bg-canvas);
padding-block: var(--section-y);
border-top: 1px solid var(--c-border-faint);
}
.practice__head {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
margin-bottom: var(--space-7);
display: grid;
gap: var(--space-5);
}
@media (min-width: 768px) {
.practice__head {
grid-template-columns: 1fr 1fr;
align-items: end;
gap: var(--space-7);
}
}
.practice__eyebrow {
margin-bottom: var(--space-3);
}
.practice__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.5rem);
font-weight: var(--fw-semi);
letter-spacing: -0.025em;
line-height: 1;
max-width: 18ch;
margin: 0;
}
.practice__intro {
max-width: 42ch;
color: var(--c-text-mid);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
}
/* Practice: konventionelles Grid statt Scroll-Slider (sicherer Fallback) */
.practice__viewport {
display: block;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.practice__track {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 720px) { .practice__track { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .practice__track { grid-template-columns: repeat(3, 1fr); } }
/* Block-Wrapper: Card + Sub-Links übereinander */
.practice-area-block {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Karte */
.practice-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: clamp(320px, 40vw, 420px);
padding: var(--space-6);
border-radius: var(--radius-2xl);
background: var(--c-bg-elevated);
color: var(--c-text-high);
text-decoration: none;
isolation: isolate;
overflow: hidden;
border: 1px solid var(--c-border-faint);
box-shadow:
0 4px 28px rgba(20, 20, 26, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition:
transform var(--t-slow) var(--ease-out),
border-color var(--t-slow) var(--ease-out),
box-shadow var(--t-slow) var(--ease-out);
}
.practice-card:hover {
box-shadow:
0 12px 40px rgba(20, 20, 26, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.practice-card__title a {
color: inherit;
text-decoration: none;
border: 0;
transition: color var(--t-base) var(--ease-out);
}
.practice-card__title a:hover { color: var(--c-accent); }
/* Sub-Links unter jeder Card */
.practice-sublinks {
list-style: none;
margin: 0;
padding: var(--space-4) var(--space-5);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-faint);
border-radius: var(--radius-xl);
box-shadow:
0 4px 18px rgba(20, 20, 26, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.practice-sublinks li {
margin: 0;
padding: 0;
}
.practice-sublinks a {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-1);
font-size: var(--fs-small);
color: var(--c-text-mid);
text-decoration: none;
border-bottom: 1px solid var(--c-border-faint);
transition: color var(--t-fast) var(--ease-out), gap var(--t-fast) var(--ease-out);
}
/* Karmin-Bullet vor jedem Sub-Link */
.practice-sublinks a::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
flex-shrink: 0;
transition: transform var(--t-fast) var(--ease-out);
}
.practice-sublinks li:last-child a { border-bottom: 0; }
.practice-sublinks a:hover {
color: var(--c-accent);
gap: var(--space-4);
}
.practice-sublinks a:hover::before {
transform: scale(1.4);
}
.practice-card__index {
position: absolute;
top: var(--space-5);
left: var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--tracking-caps);
z-index: 2;
}
.practice-card__bg {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
border-radius: inherit;
}
.practice-card__bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.8);
transition: transform var(--t-glide) var(--ease-out);
}
.practice-card__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,20,26,0.10) 0%, rgba(20,20,26,0.75) 100%);
}
.practice-card--no-image {
background: linear-gradient(165deg, var(--c-bg-elevated) 0%, var(--c-bg-overlay) 100%);
}
.practice-card--no-image .practice-card__title,
.practice-card--no-image .practice-card__cue,
.practice-card--no-image .practice-card__index { color: var(--c-text-high); }
.practice-card--no-image .practice-card__lead { color: var(--c-text-mid); }
.practice-card--no-image .practice-card__index { color: var(--c-text-low); }
.practice-card--has-image .practice-card__title,
.practice-card--has-image .practice-card__cue { color: #ffffff; }
.practice-card--has-image .practice-card__lead { color: rgba(255, 255, 255, 0.82); }
.practice-card--has-image .practice-card__index { color: rgba(255, 255, 255, 0.65); }
.practice-card__title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: var(--fw-semi);
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 var(--space-3);
}
.practice-card__lead {
font-size: var(--fs-small);
line-height: var(--lh-snug);
margin: 0 0 var(--space-5);
max-width: 38ch;
}
.practice-card__cue {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
transition: gap var(--t-base) var(--ease-out);
}
.practice-card__cue svg {
width: 18px;
height: 18px;
transition: transform var(--t-base) var(--ease-out);
}
.practice-card:hover .practice-card__bg img,
.practice-card:focus-visible .practice-card__bg img {
transform: scale(1.05);
}
.practice-card:hover .practice-card__cue,
.practice-card:focus-visible .practice-card__cue { gap: var(--space-3); }
.practice-card:hover .practice-card__cue svg,
.practice-card:focus-visible .practice-card__cue svg { transform: translateX(4px); }
.practice-card:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--c-focus-ring);
border-color: var(--c-accent);
}
/* Counter (war für Slider, im Grid-Layout ausgeblendet) */
.practice__counter { display: none; }
.team__counter { display: none; }
.practice__counter--legacy {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
margin-top: var(--space-6);
display: flex;
align-items: center;
gap: var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: var(--tracking-wide);
color: var(--c-text-low);
}
.practice__counter-line {
flex: 1;
height: 1px;
background: var(--c-border-soft);
position: relative;
overflow: hidden;
}
.practice__counter-progress {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: var(--progress-width, 33.333%);
background: var(--c-accent);
transform: translateX(var(--progress-offset, 0));
transition: transform var(--t-slow) var(--ease-out), width var(--t-slow) var(--ease-out);
}
/* ──────────────────────────────────────────────────
* BUTTON-VARIANTEN (modern)
* Erweitern .btn (siehe oben) — keine billigen Gradients.
* ────────────────────────────────────────────────── */
.btn--lg {
min-height: 56px;
padding-inline: var(--space-6);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
border-radius: var(--radius-full);
}
.btn--lg svg {
width: 16px;
height: 16px;
transition: transform var(--t-base) var(--ease-out);
}
.btn--lg:hover svg,
.btn--lg:focus-visible svg {
transform: translateX(4px);
}
/* Text-Button: subtile Underline-Animation */
.btn--text {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: auto;
padding: var(--space-2) 0;
background: none;
color: var(--c-text-high);
border: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
font-size: var(--fs-small);
font-weight: var(--fw-medium);
transition:
border-color var(--t-base) var(--ease-out),
gap var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out);
}
.btn--text::after {
content: '';
position: absolute;
/* underline-grow handled by border-bottom */
}
.btn--text:hover,
.btn--text:focus-visible {
border-bottom-color: var(--c-accent);
gap: var(--space-3);
color: var(--c-text-high);
}
.btn--text svg {
width: 14px;
height: 14px;
transition: transform var(--t-base) var(--ease-out);
}
.btn--text:hover svg,
.btn--text:focus-visible svg { transform: translateX(3px); }
/* ============================================================
* SECTIONS (Phase 3b) — About, Team, Contact-CTA, Flex,
* Page-Hero, Page-Content, FAQ-Akkordeon
* ============================================================ */
/* ──────────────────────────────────────────────────
* ABOUT — asymmetrischer Split mit großem Foto
* ────────────────────────────────────────────────── */
.about {
background: var(--c-bg-overlay);
padding-block: var(--section-y);
border-top: 1px solid var(--c-border-faint);
border-bottom: 1px solid var(--c-border-faint);
}
.about__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
display: grid;
gap: var(--space-7);
}
@media (min-width: 900px) {
.about__inner {
grid-template-columns: 1.2fr 1fr;
gap: var(--space-9);
align-items: stretch;
}
}
.about__text {
display: grid;
gap: var(--space-5);
/* Card-Surface: weiß auf section-bg, dezent gerundet + Schatten */
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-faint);
border-radius: var(--radius-2xl);
box-shadow:
0 4px 28px rgba(20, 20, 26, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
padding: clamp(var(--space-6), 4vw, var(--space-8));
}
.about__eyebrow { margin: 0; }
.about__headline {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.5rem);
font-weight: var(--fw-semi);
letter-spacing: -0.025em;
line-height: 1.04;
margin: 0;
max-width: 18ch;
}
.about__content {
color: var(--c-text-mid);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
}
.about__content p { max-width: 56ch; }
.about__content p + p { margin-top: 1em; }
.about__media {
position: relative;
display: flex;
min-height: 100%;
}
.about__image {
position: relative;
flex: 1;
/* Auf Mobile (vor 900px Grid) hat die Card noch keine Geschwister-Höhe → Aspect-Ratio behält Stable-Look */
aspect-ratio: 4 / 5;
border-radius: var(--radius-2xl);
overflow: hidden;
background: var(--c-bg-overlay);
box-shadow:
0 14px 48px rgba(20, 20, 26, 0.14),
0 2px 6px rgba(20, 20, 26, 0.06);
}
.about__image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Ab 900px (Grid 2-spaltig): Image strecht sich auf Text-Card-Höhe */
@media (min-width: 900px) {
.about__image { aspect-ratio: auto; }
}
.about__tag {
position: absolute;
bottom: var(--space-5);
left: var(--space-5);
padding: var(--space-2) var(--space-4);
background: var(--c-bg-canvas);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-full);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
color: var(--c-text-high);
}
/* ──────────────────────────────────────────────────
* TEAM — 2×2 Grid mit Lightbox-Vita
* ────────────────────────────────────────────────── */
.team {
background: var(--c-bg-canvas);
padding-block: var(--section-y);
}
.team__head {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
margin-bottom: var(--space-7);
}
.team__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.5rem);
font-weight: var(--fw-semi);
letter-spacing: -0.025em;
margin: 0;
}
.team__grid {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
}
@media (min-width: 640px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.team-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
height: 100%;
}
.team-card__photo {
position: relative;
display: block;
aspect-ratio: 3 / 4;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--c-bg-overlay);
box-shadow:
0 12px 36px rgba(20, 20, 26, 0.12),
0 1px 3px rgba(20, 20, 26, 0.05);
border: 0;
padding: 0;
width: 100%;
}
.team-card__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-glide) var(--ease-out), filter var(--t-glide) var(--ease-out);
}
.team-card__photo--button { cursor: pointer; appearance: none; }
.team-card__photo--button:hover img,
.team-card__photo--button:focus-visible img { transform: scale(1.04); filter: brightness(0.92); }
/* Hover-Overlay nur bei klickbarer Karte */
.team-card__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: linear-gradient(180deg, rgba(20, 20, 26, 0.10) 0%, rgba(20, 20, 26, 0.55) 100%);
color: #ffffff;
opacity: 0;
transition: opacity var(--t-base) var(--ease-out);
z-index: 1;
}
.team-card__photo--button:hover .team-card__overlay,
.team-card__photo--button:focus-visible .team-card__overlay { opacity: 1; }
.team-card__overlay-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.40);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.team-card__overlay-icon svg { width: 22px; height: 22px; }
.team-card__overlay-label {
font-size: var(--fs-small);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
}
.team-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.team-card__name {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: var(--fw-semi);
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
color: var(--c-text-high);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-card__role {
font-size: var(--fs-small);
color: var(--c-accent);
font-weight: var(--fw-medium);
margin: 0;
}
.team-card__bio {
font-size: var(--fs-small);
color: var(--c-text-mid);
line-height: var(--lh-relaxed);
margin: var(--space-2) 0 0;
max-width: 46ch;
}
.team-card__contact {
display: flex;
gap: var(--space-2);
margin-top: auto; /* drückt die Icons immer ganz nach unten, egal wie kurz die Rolle ist */
padding-top: var(--space-3);
}
.team-card__icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-full);
background: var(--c-bg-elevated);
color: var(--c-accent);
border: 1px solid var(--c-border-soft);
text-decoration: none;
transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.team-card__icon-btn:hover {
background: var(--c-accent);
color: #ffffff;
border-color: var(--c-accent);
transform: translateY(-2px);
}
.team-card__icon-btn svg { width: 18px; height: 18px; }
/* ── Vita-Lightbox ───────────────────────────────── */
.vita-lightbox[hidden] { display: none !important; }
.vita-lightbox {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(var(--space-4), 3vw, var(--space-6));
/* Dynamische Viewport-Höhe — berücksichtigt mobile Browser-UI */
height: 100vh;
height: 100dvh;
}
.vita-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 20, 26, 0.55);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
backdrop-filter: blur(18px) saturate(1.2);
animation: vitaBackdropIn var(--t-slow) var(--ease-out) both;
}
@keyframes vitaBackdropIn { from { opacity: 0; } to { opacity: 1; } }
.vita-lightbox__panel {
position: relative;
max-width: 880px;
width: 100%;
/* Panel füllt verfügbaren Raum (Lightbox-Padding ausgespart) */
height: 100%;
max-height: 100%;
overflow: hidden;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.50);
border-radius: var(--radius-2xl);
box-shadow:
0 30px 80px rgba(20, 20, 26, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.80);
display: grid;
grid-template-columns: 1fr;
/* Mobile: fixe Photo-Reihe oben, Content-Reihe füllt den Rest und scrollt */
grid-template-rows: auto 1fr;
animation: vitaPanelIn var(--t-slow) var(--ease-spring) both;
}
@media (min-width: 800px) {
.vita-lightbox__panel {
grid-template-columns: 0.85fr 1fr;
grid-template-rows: 1fr;
height: auto;
max-height: 92vh;
}
}
@keyframes vitaPanelIn {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.vita-lightbox__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
z-index: 2;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(20, 20, 26, 0.08);
color: var(--c-text-high);
cursor: pointer;
transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.vita-lightbox__close:hover {
background: var(--c-accent);
color: #ffffff;
transform: rotate(90deg);
}
.vita-lightbox__close svg { width: 18px; height: 18px; }
.vita-lightbox__photo {
background-size: cover;
/* Mobile: 60 % vom oberen Bildrand → der Kopf/Gesicht bleibt im sichtbaren Ausschnitt */
background-position: center 20%;
background-color: var(--c-bg-overlay);
/* Fixe, viewport-anteilige Höhe — Rest übernimmt der Scroll-Content */
height: 32vh;
max-height: 280px;
flex-shrink: 0;
}
@media (min-width: 800px) {
.vita-lightbox__photo {
height: auto;
min-height: 100%;
max-height: none;
background-position: center;
}
}
.vita-lightbox__content {
padding: clamp(var(--space-5), 3vw, var(--space-7));
overflow-y: auto;
min-height: 0; /* erlaubt der Grid-Reihe, ihr 1fr-Limit zu respektieren */
}
@media (min-width: 800px) {
.vita-lightbox__content { max-height: 92vh; }
}
.vita-lightbox__role {
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-accent);
margin: 0 0 var(--space-3);
}
.vita-lightbox__name {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: var(--fw-semi);
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--c-text-high);
margin: 0 0 var(--space-5);
}
.vita-lightbox__body {
font-size: var(--fs-small);
line-height: var(--lh-relaxed);
color: var(--c-text-mid);
}
.vita-lightbox__body p { margin: 0 0 var(--space-4); }
.vita-lightbox__body p:last-child { margin-bottom: 0; }
.vita-lightbox__body strong { color: var(--c-text-high); font-weight: var(--fw-semi); }
body.vita-open { overflow: hidden; }
/* ──────────────────────────────────────────────────
* TESTIMONIALS — Mandanten-Stimmen-Grid
* ────────────────────────────────────────────────── */
.testimonials {
background: var(--c-bg-overlay);
padding-block: var(--section-y);
border-top: 1px solid var(--c-border-faint);
border-bottom: 1px solid var(--c-border-faint);
}
.testimonials__head {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
margin-bottom: var(--space-7);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.testimonials__headline {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-tight);
margin: 0;
text-align: center;
}
.testimonials__source-hint {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-caption);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--c-text-low);
margin: 0;
}
.testimonials__viewport {
display: block;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--container-px);
scrollbar-width: none;
cursor: grab;
}
.testimonials__viewport::-webkit-scrollbar { display: none; }
.testimonials__viewport:active { cursor: grabbing; }
.testimonials__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 84vw;
width: max-content;
gap: var(--space-5);
padding-inline: var(--container-px);
padding-block: var(--space-3);
box-sizing: content-box;
}
@media (min-width: 720px) { .testimonials__track { grid-auto-columns: 48vw; } }
@media (min-width: 1024px) { .testimonials__track { grid-auto-columns: 32vw; } }
@media (min-width: 1320px) { .testimonials__track { grid-auto-columns: 380px; } }
.testimonials__counter {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
margin-top: var(--space-6);
display: flex;
align-items: center;
gap: var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: var(--tracking-wide);
color: var(--c-text-low);
}
.testimonials__counter-line {
flex: 1;
height: 1px;
background: var(--c-border-soft);
position: relative;
overflow: hidden;
}
.testimonials__counter-progress {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: var(--progress-width, 33%);
background: var(--c-accent);
transform: translateX(var(--progress-offset, 0));
transition: transform var(--t-slow) var(--ease-out), width var(--t-slow) var(--ease-out);
}
/* ── Plugin-Modus (Trustindex / andere Review-Plugins) ── */
.testimonials__plugin-wrap {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
/* Plugin-eigene Container etwas anpassen */
.testimonials__plugin-wrap .ti-widget,
.testimonials__plugin-wrap .ti-widget-container { max-width: 100% !important; }
.testimonial {
scroll-snap-align: start;
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-faint);
border-radius: var(--radius-2xl);
box-shadow:
0 4px 28px rgba(20, 20, 26, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
padding: clamp(var(--space-5), 3vw, var(--space-6));
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
min-height: 280px;
}
.testimonial__stars {
display: inline-flex;
gap: 2px;
color: var(--c-text-faint);
}
.testimonial__star {
width: 16px;
height: 16px;
fill: currentColor;
}
.testimonial__star.is-filled {
color: #f4b400; /* warm-gold für Sterne, einzige Ausnahme zur Karmin/Anthrazit-Palette */
}
.testimonial__text {
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--c-text-high);
margin: 0;
font-style: normal;
}
.testimonial__text::before { content: '„'; color: var(--c-accent); margin-right: 0.05em; }
.testimonial__text::after { content: '"'; color: var(--c-accent); margin-left: 0.05em; }
.testimonial__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
font-size: var(--fs-small);
align-items: baseline;
margin-top: auto;
}
.testimonial__author {
font-weight: var(--fw-semi);
color: var(--c-text-high);
}
.testimonial__source {
font-size: var(--fs-caption);
color: var(--c-text-low);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
/* ──────────────────────────────────────────────────
* MEMBERSHIPS — Verbands-Logos
* ────────────────────────────────────────────────── */
.memberships {
background: var(--c-bg-canvas);
padding-block: var(--section-y-sm);
border-bottom: 1px solid var(--c-border-faint);
}
.memberships__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
text-align: center;
}
.memberships__headline {
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-text-low);
margin: 0 0 var(--space-5);
}
.memberships__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: clamp(var(--space-5), 4vw, var(--space-8));
}
.membership {
flex: 0 1 auto;
}
.membership__inner {
display: inline-flex;
align-items: center;
justify-content: center;
height: 64px;
text-decoration: none;
filter: grayscale(1) opacity(0.6);
transition: filter var(--t-base) var(--ease-out);
}
.membership__inner:hover {
filter: grayscale(0) opacity(1);
}
.membership__inner img {
max-height: 100%;
width: auto;
display: block;
}
.membership__name-fallback {
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--c-text-mid);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-md);
}
/* ──────────────────────────────────────────────────
* CONTACT-CTA — Hero-style Section
* Hintergrundbild + dunkles Overlay + Glas-Card mit
* Buttons. Konsistente Linie zum Hero.
* ────────────────────────────────────────────────── */
.contact-cta {
position: relative;
color: #f4f4f5;
padding-block: clamp(4rem, 9vw, 7rem);
overflow: hidden;
isolation: isolate;
background: #14141a;
}
/* Hintergrundbild */
.contact-cta__bg {
position: absolute;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.04);
filter: saturate(0.85);
}
/* Dunkles Overlay über dem Bild */
.contact-cta::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
/* Overlay-Alpha kommt via Inline-CSS-Variable aus ACF (default 0.7) */
background:
radial-gradient(120% 100% at 50% 0%,
rgba(20, 20, 26, calc(var(--cta-overlay, 0.7) * 0.55)) 0%,
rgba(20, 20, 26, calc(var(--cta-overlay, 0.7) * 1.05)) 60%,
rgba(20, 20, 26, calc(var(--cta-overlay, 0.7) * 1.20)) 100%);
pointer-events: none;
}
.contact-cta__inner {
position: relative;
max-width: 1100px;
margin-inline: auto;
padding-inline: var(--container-px);
}
/* ── Glas-Card ── */
.contact-cta__card {
padding: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-5), 4vw, var(--space-7));
display: grid;
gap: var(--space-6);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-2xl);
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(22px) saturate(1.3);
backdrop-filter: blur(22px) saturate(1.3);
}
@media (min-width: 900px) {
.contact-cta__card {
grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
align-items: center;
gap: var(--space-8);
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.contact-cta__card { background: rgba(20, 20, 26, 0.75); }
}
.contact-cta__eyebrow {
display: inline-block;
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: var(--space-4);
}
.contact-cta__headline {
font-family: var(--font-display);
font-size: clamp(2rem, 4.6vw, 3.25rem);
font-weight: var(--fw-semi);
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 var(--space-5);
color: #ffffff;
/* Karmin-Punkt soll nie alleine umbrechen — letztes Wort + Punkt zusammenhalten */
word-break: break-word;
}
/* Punkt-After bleibt mit letzter Letter zusammen */
.contact-cta__headline::after { white-space: nowrap; }
/* Karmin-Punkt-Override für dunkle Sektion → bleibt Karmin */
.contact-cta__headline::after { color: var(--c-accent); }
.contact-cta__text {
color: rgba(244, 244, 245, 0.78);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
max-width: 48ch;
margin: 0;
}
.contact-cta__actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: stretch; /* gleich-breite Buttons */
}
/* Buttons sollen die gesamte CTA-Action-Spalte ausfüllen → gleiche Breite */
.contact-cta__actions > .btn--glass-accent,
.contact-cta__actions > .btn--glass-light,
.contact-cta__actions > .btn--glass-outline {
width: 100%;
}
/* Social-Icon-Row */
.contact-cta__social {
display: flex;
gap: var(--space-2);
margin-top: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.10);
list-style: none;
padding-left: 0;
}
.contact-cta__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #ffffff;
transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.contact-cta__social a:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: #ffffff;
transform: translateY(-2px);
}
.contact-cta__social svg { width: 18px; height: 18px; }
/* ── Dark-Variante der Glas-Buttons (für dunkle Sektionen) ── */
.btn--glass-light {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 56px;
padding-inline: var(--space-6);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
line-height: 1;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-full);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
text-decoration: none;
transition:
background var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
.btn--glass-light:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.40);
color: #ffffff;
transform: translateY(-1px);
}
.btn--glass-light svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ──────────────────────────────────────────────────
* FLEX SECTIONS — Quote, Text-Block, FAQ
* ────────────────────────────────────────────────── */
.flex-quote {
background: var(--c-bg-overlay);
padding-block: var(--section-y);
border-top: 1px solid var(--c-border-faint);
border-bottom: 1px solid var(--c-border-faint);
}
.flex-quote__inner {
max-width: var(--container-narrow);
margin-inline: auto;
padding-inline: var(--container-px);
text-align: center;
}
.flex-quote__text {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: var(--fw-medium);
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--c-text-high);
margin: 0;
}
.flex-quote__text::before { content: '„'; color: var(--c-accent); margin-right: 0.1em; }
.flex-quote__text::after { content: '"'; color: var(--c-accent); margin-left: 0.1em; }
.flex-quote__author {
display: block;
margin-top: var(--space-4);
font-size: var(--fs-caption);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--c-text-low);
}
.flex-text {
background: var(--c-bg-canvas);
padding-block: var(--section-y-sm);
}
.flex-text {
padding-inline: var(--container-px);
}
.flex-text__inner {
max-width: var(--container-narrow);
margin-inline: auto;
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-faint);
border-radius: var(--radius-2xl);
box-shadow:
0 4px 28px rgba(20, 20, 26, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
padding: clamp(var(--space-6), 4vw, var(--space-8));
}
.flex-text__headline {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--fw-semi);
letter-spacing: -0.02em;
margin-bottom: var(--space-5);
}
.flex-text__content {
color: var(--c-text-mid);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
}
.flex-text__content p + p { margin-top: 1em; }
/* ──────────────────────────────────────────────────
* FAQ — Native / Akkordeon
* ────────────────────────────────────────────────── */
.faq {
background: var(--c-bg-canvas);
padding-block: var(--section-y);
border-top: 1px solid var(--c-border-faint);
}
.faq__inner {
max-width: var(--container-narrow);
margin-inline: auto;
padding-inline: var(--container-px);
}
.faq__list {
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-faint);
border-radius: var(--radius-2xl);
box-shadow:
0 4px 28px rgba(20, 20, 26, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
padding: 0 clamp(var(--space-5), 3vw, var(--space-7));
}
.faq-item:last-child { border-bottom: 0; }
.faq__headline {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: var(--fw-semi);
letter-spacing: -0.02em;
margin-bottom: var(--space-6);
}
.faq__list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--c-border-soft);
}
.faq-item {
border-bottom: 1px solid var(--c-border-soft);
}
.faq-item__summary {
list-style: none;
cursor: pointer;
padding-block: var(--space-5);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-4);
align-items: center;
font-size: clamp(1rem, 1.5vw, 1.125rem);
font-weight: var(--fw-semi);
color: var(--c-text-high);
transition: color var(--t-base) var(--ease-out);
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::marker { content: ''; }
.faq-item__summary:hover { color: var(--c-accent); }
.faq-item__icon {
width: 20px;
height: 20px;
position: relative;
flex-shrink: 0;
}
.faq-item__icon::before,
.faq-item__icon::after {
content: '';
position: absolute;
background: currentColor;
transition: transform var(--t-base) var(--ease-out);
}
.faq-item__icon::before {
inset-inline: 0;
top: 50%;
height: 1.5px;
transform: translateY(-50%);
}
.faq-item__icon::after {
inset-block: 0;
left: 50%;
width: 1.5px;
transform: translateX(-50%);
}
.faq-item[open] .faq-item__icon::after {
transform: translateX(-50%) scaleY(0);
}
.faq-item__answer {
padding: 0 0 var(--space-5);
color: var(--c-text-mid);
line-height: var(--lh-relaxed);
max-width: 64ch;
}
.faq-item__answer p { margin: 0; }
.faq-item__answer p + p { margin-top: 1em; }
/* ──────────────────────────────────────────────────
* PAGE-TEMPLATE-HERO (kompakt) + PAGE-CONTENT (breit)
* (für page.php — Rechtsgebiete und Unterseiten)
* ────────────────────────────────────────────────── */
.page-hero {
position: relative;
padding-block: calc(var(--header-h-mobile) + var(--space-8)) var(--space-9);
background: var(--c-bg-overlay);
isolation: isolate;
overflow: hidden;
}
@media (min-width: 768px) {
.page-hero {
padding-block: calc(var(--header-h) + var(--space-9)) var(--space-10);
}
}
/* Hintergrundbild (optional) */
.page-hero__bg {
position: absolute;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: saturate(0.85);
}
/* Overlay deaktiviert — Hero-Bild rendert ohne Tönung. Lesbarkeit
trägt die Glas-Card mit ihrem eigenen Backdrop-Blur. */
.page-hero__overlay { display: none; }
.page-hero__inner {
max-width: 1100px;
margin-inline: auto;
padding-inline: var(--container-px);
position: relative;
}
/* Kompakte Glas-Card — kleinere Variante des Startseiten-Hero, zentriert */
.page-hero__card {
padding: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-5), 4vw, var(--space-7));
display: grid;
gap: var(--space-6);
text-align: center;
justify-items: center;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--radius-2xl);
box-shadow:
0 16px 48px rgba(20, 20, 26, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
backdrop-filter: blur(18px) saturate(1.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.page-hero__card { background: rgba(255, 255, 255, 0.94); }
}
.page-hero__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.page-hero__signet {
flex-shrink: 0;
width: clamp(60px, 7vw, 84px);
height: auto;
}
.page-hero__text {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.page-hero__eyebrow { margin-bottom: var(--space-2); }
.page-hero__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: var(--fw-semi);
letter-spacing: -0.025em;
line-height: 1;
color: var(--c-text-high);
margin: 0;
text-wrap: balance;
}
.page-hero__subline {
margin: var(--space-3) 0 0;
font-size: clamp(1rem, 1.3vw, 1.125rem);
line-height: var(--lh-relaxed);
color: var(--c-text-mid);
max-width: 56ch;
}
.page-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
@media (max-width: 480px) {
.page-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
}
/* ── Page-Content (breiter) ─────────────────────── */
.page-content {
background: var(--c-bg-canvas);
padding-block: var(--space-8) var(--section-y);
padding-inline: var(--container-px);
}
.page-content__inner {
max-width: 980px;
margin-inline: auto;
/* Card-Surface */
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-faint);
border-radius: var(--radius-2xl);
box-shadow:
0 4px 28px rgba(20, 20, 26, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
padding: clamp(var(--space-6), 4vw, var(--space-8));
color: var(--c-text-mid);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
}
/* Lesefluss-Texte dürfen ruhig 70ch behalten, Listen/Tabellen volle Breite */
.page-content__inner p,
.page-content__inner h2,
.page-content__inner h3 { max-width: 68ch; }
/* ──────────────────────────────────────────────────
* PAGE-CONTENT mit Seitenleiste (Kontakt-Seite)
* Links: Formular/Content (2/3), Rechts: Kontakt + Öffnungszeiten
* ────────────────────────────────────────────────── */
.page-content--with-aside {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
max-width: 1100px;
margin-inline: auto;
}
@media (min-width: 900px) {
.page-content--with-aside {
grid-template-columns: 2fr 1fr;
gap: var(--space-7);
align-items: start;
}
}
.page-content--with-aside .page-content__inner {
margin-inline: 0;
max-width: none;
}
.page-aside {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.page-aside__card {
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-xl);
padding: clamp(var(--space-5), 2.5vw, var(--space-6));
box-shadow: 0 6px 20px rgba(20, 20, 26, 0.06);
}
.page-aside__title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: var(--fw-semi);
letter-spacing: -0.01em;
color: var(--c-text-high);
margin: 0 0 var(--space-4);
}
.page-aside__address {
margin: 0 0 var(--space-4);
font-style: normal;
}
.page-aside__address p {
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-relaxed);
color: var(--c-text-mid);
}
.page-aside__address strong { color: var(--c-text-high); font-weight: var(--fw-semi); }
.page-aside__links {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: 0;
list-style: none;
margin: 0;
}
.page-aside__links a {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-small);
font-weight: var(--fw-semi);
color: var(--c-accent) !important;
text-decoration: none;
padding: 8px 0;
transition: color var(--t-base) var(--ease-out);
}
.page-aside__links a:hover { color: var(--c-accent-hover) !important; }
.page-aside__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--c-accent-dim);
color: var(--c-accent);
flex-shrink: 0;
}
.page-aside__icon svg { width: 16px !important; height: 16px !important; }
/* Öffnungszeiten-Card — gleicher Anthrazit-Ton wie Footer */
.page-aside__card--hours { background: #262a32; color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.10); }
.page-aside__card--hours .page-aside__title { color: #ffffff; }
.page-aside__hours-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.page-aside__hours-head .page-aside__title { margin: 0; }
.page-aside__status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.08);
border-radius: var(--radius-full);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: rgba(255, 255, 255, 0.85);
}
.page-aside__status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.page-aside__status[data-state="open"] .page-aside__status-dot {
background: #4ade80;
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
animation: footerStatusPulse 2.4s ease-out infinite;
}
.page-aside__status[data-state="closed"] .page-aside__status-dot { background: var(--c-accent); }
.page-aside__hours {
font-size: var(--fs-small);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-2) var(--space-4);
}
.page-aside__card--hours .opening-hours dt,
.page-aside__hours dt {
color: rgba(255, 255, 255, 0.55) !important;
white-space: nowrap;
font-weight: var(--fw-medium);
margin: 0;
}
.page-aside__card--hours .opening-hours dd,
.page-aside__hours dd {
margin: 0;
color: rgba(255, 255, 255, 0.92) !important;
white-space: nowrap;
}
.page-aside__hours-note {
margin: var(--space-4) 0 0;
padding-top: var(--space-3);
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: var(--fs-caption);
color: rgba(255, 255, 255, 0.55);
font-style: italic;
}
/* Horizontale Trennlinie: deutliche Luft nach oben und unten */
.page-content__inner hr {
margin-block: var(--space-8) var(--space-7);
border: 0;
border-top: 1px solid var(--c-border-soft);
max-width: 100%;
}
/* WPForms innerhalb der Lese-Card: zusätzliches Top-Margin als Atemraum */
.page-content__inner .wpforms-container {
margin-top: var(--space-6) !important;
}
/* ── Page-Accordion (JS-gebaut aus h2 + folgendem Content) ── */
.page-accordion {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.page-accordion__item {
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-lg);
background: #ffffff;
overflow: hidden;
transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.page-accordion__item[open] {
border-color: var(--c-border-strong);
box-shadow: 0 6px 22px rgba(20, 20, 26, 0.06);
}
.page-accordion__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: clamp(1.125rem, 2vw, 1.375rem);
font-weight: var(--fw-semi);
letter-spacing: -0.01em;
color: var(--c-text-high);
transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.page-accordion__summary::-webkit-details-marker { display: none; }
.page-accordion__summary::marker { content: ''; }
.page-accordion__summary:hover { color: var(--c-accent); }
.page-accordion__title {
flex: 1;
min-width: 0;
display: inline-block;
}
/* Roter Punkt am Ende der Akkordeon-Headline — wie sitewide */
.page-accordion__item .page-accordion__title::after {
content: '.';
color: var(--c-accent);
margin-left: 0.02em;
letter-spacing: 0;
}
/* Plus/Minus-Icon */
.page-accordion__icon {
position: relative;
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--c-bg-overlay);
transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.page-accordion__icon::before,
.page-accordion__icon::after {
content: '';
position: absolute;
inset: 50% 4px auto 4px;
height: 2px;
background: var(--c-text-high);
transform: translateY(-50%);
transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.page-accordion__icon::after { transform: translateY(-50%) rotate(90deg); }
.page-accordion__item[open] .page-accordion__icon { background: var(--c-accent); }
.page-accordion__item[open] .page-accordion__icon::before,
.page-accordion__item[open] .page-accordion__icon::after { background: #ffffff; }
.page-accordion__item[open] .page-accordion__icon::after { transform: translateY(-50%) rotate(0deg); }
.page-accordion__body {
padding: 0 var(--space-5) var(--space-5);
color: var(--c-text-mid);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
border-top: 1px solid var(--c-border-faint);
padding-top: var(--space-5);
}
.page-accordion__body > *:first-child { margin-top: 0; }
.page-accordion__body > *:last-child { margin-bottom: 0; }
/* Wenn Page-Accordion aktiv: Card-Surface des Containers entfernen (Items sind selbst Cards) */
.page-content__inner.page-accordion {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
/* ──────────────────────────────────────────────────
* WPFORMS — Themed (Kontakt · Bewerbung · Dokumente)
* Überschreibt das Default-Plugin-CSS, damit Formulare
* sich nahtlos ins Theme einfügen.
* ────────────────────────────────────────────────── */
/* Container füllt die volle Card-Breite */
.wpforms-container.wpforms-container-full,
.wpforms-container {
max-width: 100% !important;
width: 100% !important;
margin-inline: auto !important;
}
/* Innerhalb der Page-Content-Card haben Inputs/Textareas keine ch-Begrenzung */
.page-content__inner .wpforms-container input,
.page-content__inner .wpforms-container select,
.page-content__inner .wpforms-container textarea,
.page-content__inner .wpforms-container label,
.page-content__inner .wpforms-container .wpforms-field { max-width: 100% !important; }
/* Form-Wrapper (innerhalb .page-content__inner braucht's keinen Doppel-Card-Look) */
.page-content__inner .wpforms-container .wpforms-form {
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
}
/* Heading + Description in WPForms-Wrapper (Title + Description-Block) */
.wpforms-container .wpforms-title,
.wpforms-container h3,
.wpforms-container > h3 {
font-family: var(--font-display) !important;
font-size: clamp(1.375rem, 2.5vw, 1.75rem) !important;
font-weight: var(--fw-semi) !important;
letter-spacing: -0.02em !important;
color: var(--c-text-high) !important;
margin: 0 0 var(--space-3) !important;
line-height: 1.2 !important;
}
.wpforms-container .wpforms-description,
.wpforms-container .wpforms-field-html {
color: var(--c-text-mid) !important;
font-size: var(--fs-small) !important;
line-height: var(--lh-relaxed) !important;
margin-bottom: var(--space-5) !important;
}
/* Field-Wrapper: Spacing zwischen Feldern */
.wpforms-form .wpforms-field {
padding: 0 0 var(--space-5) !important;
margin: 0 !important;
}
/* Labels */
.wpforms-form label.wpforms-field-label,
.wpforms-form .wpforms-field-label {
display: block !important;
font-family: var(--font-body) !important;
font-size: var(--fs-small) !important;
font-weight: var(--fw-semi) !important;
letter-spacing: var(--tracking-snug) !important;
color: var(--c-text-high) !important;
margin-bottom: var(--space-2) !important;
padding: 0 !important;
}
.wpforms-form .wpforms-required-label {
color: var(--c-accent) !important;
margin-left: 4px;
}
.wpforms-form .wpforms-field-sublabel {
font-size: var(--fs-caption) !important;
color: var(--c-text-low) !important;
font-weight: var(--fw-regular) !important;
margin-top: 4px !important;
}
/* Inputs, Textareas, Selects — cooles, ruhiges Styling */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form input[type="password"],
.wpforms-form input[type="date"],
.wpforms-form select,
.wpforms-form textarea {
width: 100% !important;
padding: 14px 18px !important;
background: #f8f9fb !important;
border: 1px solid transparent !important;
border-radius: var(--radius-md) !important;
font-family: var(--font-body) !important;
font-size: var(--fs-body) !important;
color: var(--c-text-high) !important;
line-height: 1.4 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(20, 20, 26, 0.02) !important;
transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out) !important;
}
.wpforms-form textarea { min-height: 160px !important; resize: vertical !important; }
.wpforms-form input:hover,
.wpforms-form select:hover,
.wpforms-form textarea:hover {
background: #ffffff !important;
border-color: var(--c-border-soft) !important;
}
.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
outline: none !important;
background: #ffffff !important;
border-color: var(--c-accent) !important;
box-shadow:
0 0 0 4px var(--c-accent-dim),
0 6px 18px rgba(174, 22, 21, 0.10) !important;
}
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder { color: var(--c-text-faint) !important; }
/* Field-Layout-Row: Vorname · Nachname · E-Mail nebeneinander */
.wpforms-form .wpforms-field-row {
margin: 0 !important;
padding: 0 !important;
}
.wpforms-form .wpforms-field-name .wpforms-field-row-block,
.wpforms-form .wpforms-field-row .wpforms-field-row-block {
padding-right: var(--space-3) !important;
}
.wpforms-form .wpforms-field-row .wpforms-field-row-block:last-child {
padding-right: 0 !important;
}
/* Checkbox / Radio — Karmin-Akzent + größere Tap-Area */
.wpforms-form .wpforms-field-checkbox input[type="checkbox"],
.wpforms-form .wpforms-field-radio input[type="radio"],
.wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--c-accent) !important;
margin-right: var(--space-2) !important;
cursor: pointer;
}
.wpforms-form .wpforms-field-checkbox ul li,
.wpforms-form .wpforms-field-radio ul li,
.wpforms-form .wpforms-field-gdpr-checkbox ul li {
list-style: none !important;
margin: 0 0 var(--space-2) !important;
padding: 0 !important;
display: flex !important;
align-items: flex-start !important;
}
.wpforms-form .wpforms-field-checkbox label,
.wpforms-form .wpforms-field-radio label,
.wpforms-form .wpforms-field-gdpr-checkbox label {
font-size: var(--fs-small) !important;
font-weight: var(--fw-regular) !important;
color: var(--c-text-mid) !important;
cursor: pointer;
line-height: var(--lh-relaxed) !important;
flex: 1;
}
.wpforms-form .wpforms-field-checkbox label a,
.wpforms-form .wpforms-field-gdpr-checkbox label a {
color: var(--c-accent) !important;
border-bottom: 1px solid var(--c-accent-glow);
transition: border-color var(--t-base) var(--ease-out);
}
.wpforms-form .wpforms-field-checkbox label a:hover,
.wpforms-form .wpforms-field-gdpr-checkbox label a:hover { border-bottom-color: var(--c-accent); }
/* File-Upload — Drop-Zone als gestricheltes Karmin-Karten */
.wpforms-form .wpforms-uploader,
.wpforms-form .wpforms-field-file-upload .moxie-shim,
.wpforms-form .wpforms-field-file-upload {
background: var(--c-bg-overlay) !important;
}
.wpforms-form .wpforms-uploader {
border: 2px dashed rgba(174, 22, 21, 0.30) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-7) var(--space-5) !important;
background: linear-gradient(180deg, #f8f9fb 0%, #f3f4f7 100%) !important;
color: var(--c-text-mid) !important;
font-size: var(--fs-small) !important;
text-align: center !important;
cursor: pointer;
transition:
border-color var(--t-base) var(--ease-out),
background var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out) !important;
}
.wpforms-form .wpforms-uploader:hover,
.wpforms-form .wpforms-uploader.dragover {
border-color: var(--c-accent) !important;
background: var(--c-accent-dim) !important;
color: var(--c-accent) !important;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(174, 22, 21, 0.12) !important;
}
.wpforms-form .wpforms-field-file-upload .wpforms-uploader-message,
.wpforms-form .wpforms-uploader-message {
font-family: var(--font-body) !important;
font-size: var(--fs-small) !important;
color: inherit !important;
}
/* HTML5-Native File-Upload (Single-Mode) */
.wpforms-form input[type="file"] {
width: 100% !important;
padding: var(--space-5) var(--space-4) !important;
background: var(--c-bg-overlay) !important;
border: 2px dashed var(--c-border-strong) !important;
border-radius: var(--radius-lg) !important;
font-size: var(--fs-small) !important;
cursor: pointer;
transition: border-color var(--t-base) var(--ease-out) !important;
}
.wpforms-form input[type="file"]:hover {
border-color: var(--c-accent) !important;
}
/* Submit-Button — passt zum sitewide btn--glass-accent */
.wpforms-form .wpforms-submit-container { margin-top: var(--space-3) !important; }
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 50px !important;
padding: 0 var(--space-6) !important;
background: var(--c-accent) !important;
color: #ffffff !important;
font-family: var(--font-body) !important;
font-size: var(--fs-body) !important;
font-weight: var(--fw-semi) !important;
letter-spacing: var(--tracking-snug) !important;
line-height: 1 !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: var(--radius-full) !important;
cursor: pointer;
text-decoration: none !important;
box-shadow:
0 10px 30px rgba(174, 22, 21, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out) !important;
}
.wpforms-form button[type="submit"]:hover,
.wpforms-form .wpforms-submit:hover {
background: var(--c-accent-hover) !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow:
0 14px 40px rgba(174, 22, 21, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
/* Validierungs-Fehler */
.wpforms-form .wpforms-error,
.wpforms-form label.wpforms-error {
color: var(--c-accent) !important;
font-size: var(--fs-caption) !important;
font-weight: var(--fw-medium) !important;
margin-top: 6px !important;
}
.wpforms-form input.wpforms-error,
.wpforms-form select.wpforms-error,
.wpforms-form textarea.wpforms-error {
border-color: var(--c-accent) !important;
box-shadow: 0 0 0 4px var(--c-accent-dim) !important;
}
/* Erfolgs-Meldung nach Submit */
.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
background: var(--c-accent-dim) !important;
border: 1px solid var(--c-accent-glow) !important;
border-left: 3px solid var(--c-accent) !important;
color: var(--c-text-high) !important;
padding: var(--space-5) var(--space-6) !important;
border-radius: var(--radius-lg) !important;
font-size: var(--fs-body) !important;
line-height: var(--lh-relaxed) !important;
}
/* Section-Trenner zwischen Form-Abschnitten */
.wpforms-form .wpforms-field-divider {
border-top: 1px solid var(--c-border-faint) !important;
margin: var(--space-5) 0 !important;
padding: 0 !important;
}
/* Section-Header (z. B. „Ihre persönlichen Details") */
.wpforms-form .wpforms-field-divider h3,
.wpforms-form .wpforms-field-section h3 {
font-family: var(--font-display) !important;
font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
font-weight: var(--fw-semi) !important;
letter-spacing: -0.015em !important;
color: var(--c-text-high) !important;
margin: 0 0 var(--space-2) !important;
}
.wpforms-form .wpforms-field-section .wpforms-field-description,
.wpforms-form .wpforms-field-divider p {
color: var(--c-text-mid) !important;
font-size: var(--fs-small) !important;
margin: 0 0 var(--space-4) !important;
}
/* Loading-Spinner während Submit */
.wpforms-form .wpforms-submit-spinner {
filter: invert(1);
}
/* ──────────────────────────────────────────────────
* SUBPAGE-GRID — Unterthemen-Cards auf Rechtsgebiet-Seiten
* ────────────────────────────────────────────────── */
.subpage-grid-section {
background: var(--c-bg-overlay);
padding-block: var(--section-y-sm);
border-top: 1px solid var(--c-border-faint);
border-bottom: 1px solid var(--c-border-faint);
}
.subpage-grid-section__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.subpage-grid-section__headline {
font-family: var(--font-display);
font-size: clamp(1.625rem, 3vw, 2.25rem);
font-weight: var(--fw-semi);
letter-spacing: -0.02em;
text-align: center;
margin: 0 0 var(--space-7);
color: var(--c-text-high);
}
.subpage-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 640px) { .subpage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .subpage-grid { grid-template-columns: repeat(3, 1fr); } }
.subpage-card { display: flex; }
.subpage-card__link {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(var(--space-5), 2.5vw, var(--space-6));
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-xl);
text-decoration: none;
color: inherit;
transition:
background var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.subpage-card__link:hover {
background: #ffffff;
border-color: var(--c-accent);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(20, 20, 26, 0.10);
color: inherit;
}
.subpage-card__title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: var(--fw-semi);
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--c-text-high);
margin: 0;
}
.subpage-card__lead {
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-relaxed);
color: var(--c-text-mid);
flex: 1;
}
.subpage-card__cue {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: auto;
font-size: var(--fs-small);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-snug);
color: var(--c-accent);
}
.subpage-card__cue svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
.subpage-card__link:hover .subpage-card__cue svg { transform: translateX(3px); }
/* Editorial Typografie für eingegebenen WYSIWYG-Content */
.page-content__inner h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--fw-semi);
letter-spacing: -0.02em;
color: var(--c-text-high);
margin: var(--space-7) 0 var(--space-4);
line-height: var(--lh-snug);
}
.page-content__inner h3 {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: var(--fw-semi);
color: var(--c-text-high);
margin: var(--space-6) 0 var(--space-3);
line-height: var(--lh-snug);
}
.page-content__inner p { margin: 0; }
.page-content__inner p + p,
.page-content__inner p + ul,
.page-content__inner p + ol,
.page-content__inner ul + p,
.page-content__inner ol + p { margin-top: 1em; }
.page-content__inner a {
color: var(--c-text-high);
border-bottom: 1px solid var(--c-accent);
transition: color var(--t-base) var(--ease-out);
}
.page-content__inner a:hover { color: var(--c-accent); }
.page-content__inner ul,
.page-content__inner ol {
margin: 1em 0;
padding-left: 1.25em;
}
.page-content__inner ul li { list-style: none; position: relative; padding-left: 1.25em; margin-block: 0.4em; }
.page-content__inner ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.65em;
width: 6px;
height: 6px;
background: var(--c-accent);
border-radius: 50%;
}
.page-content__inner ol { list-style: decimal; }
.page-content__inner ol li { margin-block: 0.4em; padding-left: 0.25em; }
.page-content__inner blockquote {
margin: var(--space-6) 0;
padding: var(--space-5) var(--space-6);
border-left: 3px solid var(--c-accent);
background: var(--c-bg-overlay);
font-size: clamp(1.125rem, 1.8vw, 1.25rem);
font-style: italic;
color: var(--c-text-high);
}
.page-content__inner strong { color: var(--c-text-high); font-weight: var(--fw-semi); }
.page-content__inner img {
border-radius: var(--radius-xl);
margin-block: var(--space-5);
box-shadow:
0 6px 24px rgba(20, 20, 26, 0.08),
0 1px 3px rgba(20, 20, 26, 0.04);
}
.page-content__inner table {
width: 100%;
border-collapse: collapse;
margin-block: var(--space-5);
font-size: var(--fs-small);
}
.page-content__inner th,
.page-content__inner td {
text-align: left;
padding: var(--space-3);
border-bottom: 1px solid var(--c-border-faint);
}
.page-content__inner th {
font-weight: var(--fw-semi);
color: var(--c-text-high);
letter-spacing: var(--tracking-wide);
}
/* ──────────────────────────────────────────────────────────
* CONSENT-BANNER (DSGVO + GTM Consent Mode v2)
* Fixed bottom-right Glass-Card mit Signet. Auf Mobile bottom-zentriert,
* volle Breite minus Rand. Animation: slide-up von 16px.
* ────────────────────────────────────────────────────────── */
.consent-banner {
position: fixed;
inset-block-end: clamp(var(--space-4), 3vw, var(--space-6));
inset-inline-end: clamp(var(--space-4), 3vw, var(--space-6));
inset-inline-start: auto;
width: min(440px, calc(100vw - 2 * var(--space-4)));
z-index: var(--z-modal);
font-size: var(--fs-small);
line-height: var(--lh-relaxed);
}
.consent-banner[hidden] { display: none; }
.consent-banner__panel {
position: relative;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
color: var(--c-text);
border: 1px solid rgba(20, 20, 26, 0.08);
border-radius: var(--radius-xl);
box-shadow:
0 24px 60px rgba(20, 20, 26, 0.18),
0 2px 8px rgba(20, 20, 26, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
padding: var(--space-5) var(--space-5) var(--space-4);
animation: consent-banner-in 280ms var(--ease-out) both;
}
@keyframes consent-banner-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.consent-banner__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.consent-banner__signet {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(174, 22, 21, 0.08);
border: 1px solid rgba(174, 22, 21, 0.25);
border-radius: 999px;
padding: 6px;
}
.consent-banner__signet svg { width: 100%; height: 100%; display: block; }
.consent-banner__signet svg .logo__base { fill: var(--c-text-high); }
.consent-banner__signet svg .logo__accent { fill: var(--c-accent); }
.consent-banner__title {
margin: 0;
font-size: 1rem;
font-weight: var(--fw-semi);
letter-spacing: -0.005em;
color: var(--c-text-high);
line-height: 1.25;
}
.consent-banner__text {
margin: 0 0 var(--space-4);
color: var(--c-text);
font-size: var(--fs-small);
}
.consent-banner__link {
color: var(--c-accent);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: var(--fw-medium);
transition: color var(--t-base) var(--ease-out);
}
.consent-banner__link:hover { color: var(--c-text-high); }
/* Details (Kategorien) — initial collapsed */
.consent-banner__details {
margin: 0 0 var(--space-4);
padding: var(--space-3) 0 var(--space-1);
border-block-start: 1px solid rgba(20, 20, 26, 0.08);
animation: consent-banner-details-in 240ms var(--ease-out) both;
}
.consent-banner__details[hidden] { display: none; }
@keyframes consent-banner-details-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.consent-banner__cats {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.consent-cat { margin: 0; }
/* Toggle-Switch */
.consent-toggle {
display: grid;
grid-template-columns: 36px 1fr;
align-items: start;
gap: var(--space-3);
cursor: pointer;
}
.consent-toggle.is-locked { cursor: default; }
.consent-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.consent-toggle__slider {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
background: rgba(20, 20, 26, 0.16);
border-radius: 999px;
transition: background var(--t-base) var(--ease-out);
margin-top: 2px;
flex: 0 0 auto;
}
.consent-toggle__slider::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #ffffff;
border-radius: 50%;
transition: transform var(--t-base) var(--ease-out);
box-shadow: 0 1px 3px rgba(20, 20, 26, 0.20);
}
.consent-toggle input:checked + .consent-toggle__slider {
background: var(--c-accent);
}
.consent-toggle input:checked + .consent-toggle__slider::before {
transform: translateX(16px);
}
.consent-toggle.is-locked .consent-toggle__slider {
background: rgba(20, 20, 26, 0.25);
opacity: 0.6;
}
.consent-toggle input:focus-visible + .consent-toggle__slider {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.consent-toggle__label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.consent-toggle__label strong {
color: var(--c-text-high);
font-weight: var(--fw-semi);
font-size: var(--fs-small);
}
.consent-toggle__label small {
color: var(--c-text);
font-size: var(--fs-caption);
line-height: 1.4;
}
/* Buttons */
.consent-banner__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.btn--consent-primary,
.btn--consent-secondary,
.btn--consent-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-small);
font-weight: var(--fw-semi);
line-height: 1;
padding: 10px 16px;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition:
background var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
flex: 1 1 auto;
}
.btn--consent-primary {
background: var(--c-accent);
color: #ffffff;
}
.btn--consent-primary:hover { background: #c01a18; transform: translateY(-1px); }
.btn--consent-secondary {
background: rgba(20, 20, 26, 0.04);
color: var(--c-text-high);
border-color: rgba(20, 20, 26, 0.14);
}
.btn--consent-secondary:hover {
background: rgba(20, 20, 26, 0.08);
border-color: rgba(20, 20, 26, 0.22);
}
.btn--consent-ghost {
background: transparent;
color: var(--c-text);
padding: 10px 8px;
flex: 0 0 auto;
text-decoration: underline;
text-underline-offset: 3px;
}
.btn--consent-ghost:hover { color: var(--c-text-high); }
.btn--consent-ghost[hidden],
.btn--consent-primary[hidden] { display: none; }
/* Mobile: bottom-center, full-width minus margin */
@media (max-width: 640px) {
.consent-banner {
inset-inline: clamp(var(--space-3), 4vw, var(--space-4));
inset-block-end: clamp(var(--space-3), 4vw, var(--space-4));
width: auto;
}
.consent-banner__panel {
padding: var(--space-4);
}
.consent-banner__actions { flex-direction: column; align-items: stretch; }
.btn--consent-primary,
.btn--consent-secondary { flex: 1 1 100%; }
.btn--consent-ghost { flex: 1 1 100%; }
}
/* Wenn Banner offen ist, mobile-bar nach oben schieben, damit Notfall-Button
nicht hinter dem Banner verschwindet */
body.consent-open .mobile-bar {
/* nichts — Banner sitzt darüber via z-index, kein Layout-Shift nötig */
}