';
inherits: true;
initial-value: 0;
}
@keyframes footer-ghost-enter {
from { --ghost-progress: 0; }
to { --ghost-progress: 1; }
}
.footer {
animation: footer-ghost-enter linear both;
animation-timeline: view(block);
animation-range: entry 0% contain 50%;
}
.footer-ghost {
opacity: calc(0.07 * var(--ghost-progress));
transform: scale(calc(0.85 + 0.15 * var(--ghost-progress)));
}
}
@media (prefers-reduced-motion: reduce) {
.footer-ghost {
opacity: 0.035 !important;
transform: none !important;
}
}
.footer-top {
border-top: 1px solid transparent;
border-image: linear-gradient(to right, transparent, var(--accent-30), transparent) 1;
padding-top: 4rem;
position: relative;
z-index: 1;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
margin-bottom: 3rem;
}
@media (min-width: 520px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-col h4 {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.25rem;
}
.footer-col p,
.footer-col a {
font-size: 14px;
color: rgba(240, 230, 216, 0.5);
line-height: 1.8;
transition: color 0.3s;
}
.footer-col a:hover { color: var(--accent-light); }
.footer-brand {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 3rem;
}
.footer-brand::before {
content: '';
display: block;
width: 30px;
height: 30px;
background: url(logo.svg) center/contain no-repeat;
flex-shrink: 0;
opacity: 0.75;
}
.footer-brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
gap: 2px;
}
.footer-name {
font-family: var(--font-serif);
font-size: 1rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(240, 230, 216, 0.7);
}
.footer-tagline {
font-family: var(--font-sans);
font-size: 8px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, var(--accent) 70%, transparent);
white-space: nowrap;
}
.footer-bottom {
border-top: 1px solid transparent;
border-image: linear-gradient(to right, transparent, var(--accent-20), transparent) 1;
padding-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.footer-bottom { flex-direction: row; justify-content: space-between; }
}
.footer-bottom p {
font-size: 12px;
color: rgba(240, 230, 216, 0.25);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a {
font-size: 12px;
color: rgba(240, 230, 216, 0.25);
transition: color 0.3s;
}
.footer-legal a:hover { color: rgba(240, 230, 216, 0.6); }
.hours-table { width: 100%; }
.hours-row {
display: flex;
justify-content: space-between;
padding: 0.25rem 0;
font-size: 14px;
color: rgba(240, 230, 216, 0.5);
}
.hours-row span:last-child { color: rgba(240, 230, 216, 0.35); }
/* ============================================
Lightbox
============================================ */
/* ============================================
Lightbox — Carousel mit Slide-Übergängen, Swipe-Drag, Thumbnail-Strip
============================================ */
.lb-backdrop {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(14, 12, 10, 0.97);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--ease), visibility 0.4s;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.lb-backdrop.active {
opacity: 1;
visibility: visible;
}
/* Viewport: 3-Slide-Carousel-Container mit scale-in beim Öffnen */
.lb-viewport {
position: relative;
width: 90vw;
height: 85vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
touch-action: pan-y;
cursor: default;
transform: scale(0.94);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.lb-backdrop.active .lb-viewport {
transform: scale(1);
}
/* Track: hält 3 Slides (prev, current, next), wird per translateX navigiert */
.lb-track {
display: flex;
width: 100%;
height: 100%;
transform: translateX(-100%);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.lb-track.lb-no-transition {
transition: none;
}
.lb-slide {
flex: 0 0 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
overflow: hidden;
}
.lb-slide img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 4px;
opacity: 0;
transform-origin: center center;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
-webkit-user-drag: none;
}
.lb-slide img.lb-loaded {
opacity: 1;
}
.lb-slide img.lb-zoomed {
transform: scale(2);
cursor: zoom-out;
}
/* Buttons — SVG-based, passend zum Design-System */
.lb-close,
.lb-prev,
.lb-next {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
color: rgba(240, 230, 216, 0.45);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.3s var(--ease), background 0.3s var(--ease);
z-index: 10001;
-webkit-tap-highlight-color: transparent;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
color: rgba(240, 230, 216, 1);
}
.lb-close {
top: 1.5rem;
right: 1.5rem;
width: 44px;
height: 44px;
}
.lb-prev,
.lb-next {
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
}
.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }
/* Counter — editorial Stil mit feinen Trennlinien */
.lb-counter {
position: fixed;
bottom: 3.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-serif);
font-size: 14px;
letter-spacing: 0.08em;
color: rgba(240, 230, 216, 0.6);
z-index: 10001;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.lb-counter-num {
line-height: 1;
}
.lb-counter-sep {
display: inline-block;
width: 22px;
height: 1px;
background: rgba(240, 230, 216, 0.35);
}
/* Thumbnail-Strip — nur bei 8+ Bildern */
.lb-thumbs {
position: fixed;
bottom: 1.25rem;
left: 0;
right: 0;
display: none;
gap: 6px;
padding: 0 1rem;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
z-index: 10001;
justify-content: flex-start;
scroll-behavior: smooth;
}
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumbs.active {
display: flex;
justify-content: center;
}
/* Wenn mehr Thumbs als Platz: linksbündig damit scroll funktioniert */
.lb-thumbs.active::before,
.lb-thumbs.active::after {
content: '';
flex: 0 0 auto;
}
.lb-thumb {
flex: 0 0 54px;
height: 54px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
opacity: 0.38;
background: transparent;
padding: 0;
transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.lb-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.lb-thumb:hover {
opacity: 0.75;
}
.lb-thumb.active {
opacity: 1;
border-color: rgba(240, 230, 216, 0.7);
}
/* Counter weiter nach oben wenn Thumbs sichtbar sind */
.lb-backdrop.has-thumbs .lb-counter {
bottom: 5.25rem;
}
/* Mobile */
@media (max-width: 767px) {
.lb-prev, .lb-next { display: none; }
.lb-close {
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
}
.lb-viewport {
width: 100vw;
height: 78vh;
}
.lb-counter {
bottom: 1.75rem;
font-size: 12px;
}
.lb-backdrop.has-thumbs .lb-counter {
bottom: 4.5rem;
}
.lb-thumbs {
bottom: 0.75rem;
}
.lb-thumb {
flex: 0 0 46px;
height: 46px;
}
}
/* ============================================
Subpage Components
============================================ */
/* Subpage Hero (größer, mit langem Fade) */
.subpage-hero {
position: relative;
z-index: 1;
min-height: 65vh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--bg);
isolation: isolate;
}
/* hidden-Attribut muss display:flex überschreiben — sonst zeigt auch der
nicht-aktive Hero auf referenzen.html (gleicher Bug wie bei .ob-service-grid) */
.subpage-hero[hidden] { display: none; }
/* === referenzen.html: Section-Sichtbarkeit via Hash-Class + :target ===
Vorher: hidden-Attribut + JS-Toggle im Inline-Script (am body-end). Race
mit dem View-Transition-Snapshot: Snapshot wurde genommen bevor das
Toggle griff → User sah während Slide eine fast leere Page (nur CTA +
Footer).
Jetzt zwei parallele Selektoren als Doppel-Schicht:
1) html.h-privat / html.h-gewerblich — wird in page-transition.js sync
im gesetzt (vor body-parse + vor Snapshot). Garantiert da.
2) :has(#privat:target) — CSS-only Fallback, greift wenn :target sicher
evaluiert ist. Manche Browser werten :target erst beim ersten Paint —
dann hilft (1).
Beide setzen das gleiche display, der Browser nimmt einfach den ersten
matchenden. body.refs-page als Scope damit es nur dort aktiv ist. */
body.refs-page .subpage-hero,
body.refs-page .area-stage {
display: none;
}
html.h-privat body.refs-page #hero-privat,
html.h-gewerblich body.refs-page #hero-gewerblich,
body.refs-page:has(#privat:target) #hero-privat,
body.refs-page:has(#gewerblich:target) #hero-gewerblich {
display: flex;
}
html.h-privat body.refs-page #privat,
html.h-gewerblich body.refs-page #gewerblich,
body.refs-page:has(#privat:target) #privat,
body.refs-page:has(#gewerblich:target) #gewerblich {
display: block;
}
.subpage-hero .hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.subpage-hero .hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.subpage-hero .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(28, 24, 20, 0.15) 0%,
rgba(28, 24, 20, 0.25) 45%,
rgba(28, 24, 20, 0.55) 70%,
rgba(28, 24, 20, 0.85) 88%,
rgba(28, 24, 20, 1) 100%
);
z-index: 1;
}
/* hero-dim — stärkeres Overlay für helle/kontrastarme Hero-Bilder
(wohnmoebel, badmoebel, zimmertueren, hotels, kuechen, oeffentlich,
ladenbau, kuehlmoebelbau). Diese Bilder sind im oberen/mittleren Bereich
so hell dass der cream-/weiße Text über dem Default-Overlay schlecht
lesbar ist. Klasse wird auf die .subpage-hero Section gesetzt. Dunkle
Heroes (gastro, unikate, ueber-uns, referenzen) behalten das Default. */
.subpage-hero.hero-dim .hero-overlay {
background: linear-gradient(
to bottom,
rgba(28, 24, 20, 0.45) 0%,
rgba(28, 24, 20, 0.5) 40%,
rgba(28, 24, 20, 0.68) 68%,
rgba(28, 24, 20, 0.9) 88%,
rgba(28, 24, 20, 1) 100%
);
}
.subpage-hero-content {
position: relative;
z-index: 2;
padding-bottom: clamp(6rem, 15vh, 12rem);
padding-top: 8rem;
}
.subpage-hero-content .label {
color: var(--accent);
position: relative;
z-index: 1;
}
/* Auf Mobile: Eyebrow auf Label-Größe (11px) zurück + nowrap. Grund: die
generische `.subpage-hero-content > p`-Regel (für die Subtitle, 16px)
trifft auch das (höhere Spezifität als .label) → der
Eyebrow rendert mit 16px statt 11px und bricht bei langen Texten
("Gewerblich · Spezialität seit 1964") auf 2 Zeilen. 11px + nowrap
garantiert eine Zeile, auch bei 320px Viewports. Desktop bleibt 16px. */
@media (max-width: 767px) {
.subpage-hero-content .label {
font-size: 11px;
white-space: nowrap;
}
}
/* Lokaler Radial-Blur hinter dem Label — analog zum Main-Hero.
Das Subpage-Hero ist kleiner, dadurch sitzt das Label im Bereich wo
der vertical linear-gradient noch schwach ist (~0.25-0.4). Der Blur
sichert die Lesbarkeit lokal ab, ohne das ganze Hero zu verdunkeln. */
.subpage-hero-content .label::before {
content: '';
position: absolute;
top: -3rem;
left: -6rem;
width: 160%;
height: 6rem;
background: radial-gradient(ellipse closest-side at 50% 50%,
rgba(28, 24, 20, 0.9) 0%,
rgba(28, 24, 20, 0.5) 35%,
rgba(28, 24, 20, 0.1) 60%,
transparent 100%);
z-index: -1;
pointer-events: none;
filter: blur(45px);
}
.subpage-hero-content h1 {
font-size: clamp(2.2rem, 5vw, 4rem);
color: var(--text);
margin-bottom: 0.75rem;
}
.subpage-hero-content > p {
color: rgba(240, 230, 216, 0.65);
font-size: 16px;
max-width: 550px;
}
/* ============================================
Subpage Quick-Nav — Sticky Horizontal Bar
Sitzt als sticky Leiste unter dem Haupt-Header, fadet ein sobald das
Editorial-Intro aus dem Viewport scrollt. Ein Layout für Desktop und Mobile.
Active-State wird von JS per IntersectionObserver gesetzt, Klick = Fast-Scroll
zur passenden Section. Auto-generiert aus section[id] inside service-bg-wrap.
============================================ */
.subpage-quicknav {
position: sticky;
/* Top-Wert wird per JS auf die exakte Nav-Höhe gesetzt damit Bar flush
am Header klebt. Die 66px hier sind nur Fallback */
top: 66px;
z-index: 40;
/* GPU-Layer-Promotion — kombinierte Hints damit Backdrop-Filter bei
Fast-Scroll (Filter-Chip-Klicks) stabil rendert und Kacheln nicht
durchflackern. Siehe ausführliche Begründung bei .nav */
will-change: transform;
transform: translateZ(0);
contain: paint;
isolation: isolate;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.65rem var(--container-pad);
margin: 0;
max-width: none;
width: 100%;
/* Glass-Leiste — passt zum Haupt-Nav wenn scrolled state */
background: rgba(14, 12, 10, 0.72);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
border-bottom: 1px solid rgba(240, 230, 216, 0.06);
/* Horizontal scroll wenn zu viele Chips für Viewport — essentiell für
wohnmoebel mit 8 Chips auf Mobile */
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
/* Fade-In beim Scrollen past Editorial-Intro — kleine Slide-Bewegung von oben */
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.subpage-quicknav::-webkit-scrollbar { display: none; }
.subpage-quicknav.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.subpage-quicknav-chip {
flex: 0 0 auto;
padding: 0.5rem 1rem;
border: 1px solid rgba(240, 230, 216, 0.14);
border-radius: var(--r-btn);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(240, 230, 216, 0.72);
/* Milchglas-Default: halbtransparente dunkle Schicht mit subtilem Blur */
background: rgba(28, 24, 20, 0.42);
backdrop-filter: blur(10px) saturate(1.15);
-webkit-backdrop-filter: blur(10px) saturate(1.15);
box-shadow:
inset 0 1px 0 rgba(240, 230, 216, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
0 2px 8px rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: color 0.4s var(--ease),
border-color 0.4s var(--ease),
background 0.4s var(--ease),
box-shadow 0.4s var(--ease);
}
.subpage-quicknav-chip:hover {
color: rgba(240, 230, 216, 1);
background: rgba(28, 24, 20, 0.55);
border-color: rgba(240, 230, 216, 0.28);
box-shadow:
inset 0 1px 0 rgba(240, 230, 216, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
0 4px 12px rgba(0, 0, 0, 0.32);
}
/* Active: Bronze-Glass-Look identisch zum Back-Button-Hover für konsistente UI-Sprache */
.subpage-quicknav-chip.active {
color: #f0e6d8;
background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
box-shadow:
inset 0 1px 0 rgba(240, 230, 216, 0.15),
0 4px 14px rgba(0, 0, 0, 0.28);
}
@media (max-width: 767px) {
.subpage-quicknav {
top: 54px; /* Fallback für Mobile — JS überschreibt exakt */
padding: 0.55rem var(--container-pad);
justify-content: flex-start;
}
.subpage-quicknav-chip {
font-size: 11px;
padding: 0.45rem 0.9rem;
letter-spacing: 0.08em;
}
}
/* ============================================
Area-Back: statischer "Zurück zu X" Button am Anfang der Subpages/Areas.
Glass-Pill mit subtilem Bronze-Hover (matcht service-back-floating hover-look).
Wird auf referenzen.html und allen Service-Subpages (wohnmoebel, kuechen etc.)
verwendet — statischer Back-Button oben im Content, plus jeweils ein
passender Floating-Back der beim Scrollen erscheint.
============================================ */
.area-back-wrap {
margin-bottom: 2rem;
}
/* Sentinel für IntersectionObserver — unsichtbarer 1px-Marker im Flow */
.area-back-sentinel {
width: 100%;
height: 1px;
visibility: hidden;
pointer-events: none;
}
.area-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.1rem;
border-radius: var(--r-btn);
background: linear-gradient(to bottom, rgba(240,230,216,0.06), rgba(240,230,216,0.02));
border: 1px solid rgba(240,230,216,0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
inset 0 1px 0 rgba(240,230,216,0.08),
0 3px 10px rgba(0,0,0,0.15);
color: #d4c8b4;
font-size: 12px;
letter-spacing: 0.05em;
text-decoration: none;
transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-back svg { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.area-back:hover {
background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 18%, transparent), var(--accent-06));
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
color: #f0e6d8;
}
.area-back:hover svg { transform: translateX(-4px); }
/* Home-Variante (referenzen.html "Zur Startseite") — Icon liftet statt left */
.area-back-home:hover svg { transform: translateY(-2px); }
/* Editorial (2-column: text + image) */
.editorial {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 768px) {
.editorial { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
.editorial-text .label { margin-bottom: 0.5rem; }
.editorial-text h2 {
margin-bottom: 0.75rem;
}
.editorial-text p:not(.label) {
color: var(--text-body);
margin-bottom: 1rem;
}
.editorial-text p:last-of-type { margin-bottom: 1.5rem; }
.editorial-img {
border-radius: var(--r-card);
overflow: hidden;
aspect-ratio: 4/3;
}
.editorial-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.editorial.reverse .editorial-img {
order: -1;
}
/* Klickbares Editorial-Bild (bei Feature-Sections mit Lightbox) */
.editorial-img[data-lb-images] {
position: relative;
cursor: pointer;
}
.editorial-img[data-lb-images] img {
transition: transform 0.6s var(--ease);
}
.editorial-img[data-lb-images]:hover img {
transform: scale(1.05);
}
.editorial-img[data-lb-images][data-count]::after {
content: attr(data-count);
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.85);
font-size: 11px;
padding: 0.3rem 0.6rem;
border-radius: var(--r-btn);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events: none;
z-index: 1;
}
/* Feature-Intro: Editorial-Variante als Sub-Kategorie-Eröffnung */
.feature-intro {
margin-bottom: 2.5rem;
}
.feature-intro h3 {
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
line-height: 1.15;
letter-spacing: -0.01em;
margin-bottom: 1rem;
}
.feature-intro .editorial-text p {
margin-bottom: 1rem;
color: var(--text-body);
}
.feature-intro .editorial-text p:last-of-type {
margin-bottom: 0;
}
/* ============================================
Workshop-Banner — Foto des Firmengebäudes
============================================
Native-Auflösungs-Banner (max 880px breit) als narrative
Brücke zwischen Sections. Wird nie hochskaliert → bleibt scharf. */
.workshop-banner {
max-width: 880px;
margin: 0 auto;
}
.workshop-banner-img {
border-radius: var(--r-card);
overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.workshop-banner-img img {
width: 100%;
height: auto;
display: block;
}
.workshop-banner-caption {
margin-top: 1.25rem;
}
.workshop-banner-caption .label {
margin-bottom: 0.4rem;
}
.workshop-banner-caption p:not(.label) {
font-family: var(--font-serif);
font-size: clamp(1rem, 1.8vw, 1.25rem);
color: var(--text);
line-height: 1.4;
}
/* ============================================
Team-Grid — 5 Karten mit Photo + Name + Rolle
============================================
Direkt unter Workshop-Banner-Section auf ueber-uns.html. Photos sind
aktuell Pexels-Platzhalter — sollen durch echte Team-Bilder ersetzt
werden. Photo-Aspect 1:1, glass-highlight via ::after, dezenter Hover-Lift. */
.team-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
max-width: 1100px;
margin: 3rem auto 0;
}
@media (min-width: 700px) {
.team-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
}
}
.team-card {
display: flex;
flex-direction: column;
text-align: center;
}
.team-photo {
position: relative;
aspect-ratio: 1;
border-radius: var(--r-card);
overflow: hidden;
isolation: isolate;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* Glass-Highlight — same Pattern wie split-tile / ed-card / bento-tile */
.team-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 0.04) 100%);
pointer-events: none;
z-index: 2;
border-radius: inherit;
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
/* Tinted Filter damit unterschiedliche Pexels-Stockfotos optisch
zusammenpassen — leicht entsättigt + warm. Wenn echte Team-Fotos
da sind, kann der Filter raus oder dezenter werden. */
filter: saturate(0.85) brightness(0.92) contrast(1.05);
transition: transform 1.2s var(--ease), filter 0.5s var(--ease);
}
@media (hover: hover) and (min-width: 1025px) {
.team-card:hover .team-photo {
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42),
0 0 30px color-mix(in srgb, var(--accent) 8%, transparent);
}
.team-card:hover .team-photo img {
transform: scale(1.05);
filter: saturate(0.95) brightness(1) contrast(1.05);
}
}
.team-info {
padding-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.team-name {
font-family: var(--font-serif);
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
font-weight: 400;
color: var(--text);
letter-spacing: -0.005em;
line-height: 1.2;
}
.team-role {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.4;
}
/* ============================================
Cert-Logos — Trust-Cards für Verbands-/Maschinen-Logos
============================================
PNG-Logos (Innungsschreiner, Form-Raumgestalter, später auch HOMAG/KÜNDIG/
OTT) sitzen typischerweise auf weißem BG. Auf dem dunklen Spangler-BG
würden sie als grell-weiße Blöcke wirken oder mit opacity/brightness-
Filter ausgewaschen. Lösung: weiße Card-Container, dezenter Shadow —
wirkt wie Print-Trust-Badges. */
.cert-logos {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 2.5rem;
}
.cert-logo {
background: #fff;
padding: 1rem 1.5rem;
border-radius: var(--r-card);
display: inline-flex;
align-items: center;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 4px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cert-logo:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 8px 22px rgba(0, 0, 0, 0.32);
}
.cert-logo img {
height: 64px;
width: auto;
display: block;
}
@media (max-width: 600px) {
.cert-logos { gap: 0.85rem; margin-top: 2rem; }
.cert-logo { padding: 0.75rem 1.1rem; }
.cert-logo img { height: 52px; }
}
/* ============================================
Service-Page Background-Wrap
============================================
Atmosphärisches Container-Pattern über alle Content-Sections einer Service-Seite.
Statt eines fixed-bg-Bildes (das auf iOS Safari ruckeln kann und visuell mit
den Tiles konkurriert) trägt der Wrap atmo-beams als direkte Children — gold-
bronze Lichtstreifen die scroll-driven driften und dem Content Tiefe geben
ohne Performance-Hit.
HTML:
*/
.service-bg-wrap {
position: relative;
overflow: clip; /* clip statt hidden — erzeugt KEINEN Scroll-Container,
damit animation-timeline: view() korrekt den html-
Scroll tracked statt Wrap-internen */
isolation: isolate;
background-color: var(--bg);
}
.service-bg-wrap > section,
.service-bg-wrap > .divider {
position: relative;
z-index: 1;
}
/* Beams im service-bg-wrap sitzen unter dem Content. Position-Definitionen
stehen weiter unten bei den globalen .atmo-beam-*-Klassen. */
.service-bg-wrap > .atmo-beam {
z-index: 0;
}
/* Kompaktes Padding zwischen Sub-Kategorien.
Erste und letzte Section behalten volles padding für Luft zu Hero/CTA. */
.service-bg-wrap .section {
padding: 2rem 0;
}
.service-bg-wrap .section:first-of-type {
padding-top: var(--section-pad);
}
.service-bg-wrap .section:last-of-type {
padding-bottom: var(--section-pad);
}
/* Sub-Kategorie-Header prominenter — echte Kapitel-Eröffnungen */
.service-bg-wrap .section-header .label {
font-size: 12px;
}
.service-bg-wrap .section-header h3 {
font-size: clamp(1.9rem, 3.5vw, 2.8rem);
line-height: 1.1;
letter-spacing: -0.01em;
}
.service-bg-wrap .section-header p:not(.label) {
font-size: 17px;
color: var(--text-body);
margin-top: 0.75rem;
}
/* ============================================
Bento-Grid für Sub-Kategorien
============================================
Asymmetrisches Grid mit gemischten Tile-Größen.
Bricht das uniforme Grid-Pattern auf. */
.bento-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 768px) {
.bento-grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 16px;
}
}
.bento-tile {
position: relative;
border-radius: var(--r-card);
overflow: hidden;
cursor: pointer;
aspect-ratio: 4/3;
box-shadow: var(--depth-rest);
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* Glass-Highlight — diagonaler Light-Reflex über dem Bild.
Stacking: img (z auto/0) → glass-::before (z 1) → caption (z 1, DOM-Order
gewinnt) → data-count-Badge (z 2, ::after). border-radius: inherit gegen
Corner-Bleed an den abgerundeten Tile-Rändern. */
.bento-tile::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-highlight);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.bento-tile:hover {
transform: translateY(-2px);
box-shadow: var(--depth-hover), var(--depth-glow);
}
.bento-tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s var(--ease);
}
.bento-tile:hover img {
transform: scale(1.03);
}
/* Tile-Varianten (Desktop only) */
@media (min-width: 768px) {
.bento-tile {
aspect-ratio: 1/1;
}
.bento-tile-large {
grid-column: span 2;
grid-row: span 2;
}
.bento-tile-wide {
grid-column: span 2;
aspect-ratio: 2/1;
}
.bento-tile-tall {
grid-row: span 2;
aspect-ratio: 1/2;
}
}
/* Bento-Tile Caption (matcht gallery-caption) */
.bento-tile .gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2.5rem 1rem 0.9rem;
background: linear-gradient(to top,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.55) 50%,
transparent 100%);
color: rgba(255,255,255,0.95);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.01em;
pointer-events: none;
z-index: 1;
}
/* Hover-only Caption auf Geräten mit echtem Hover (Desktop/Maus).
Touch-Devices behalten die Caption dauerhaft sichtbar.
Caption läuft länger (0.9s) und mit Delay (0.15s) — erscheint ruhig "nach"
der Tile-Reaktion, nicht synchron "mit" ihr. */
@media (hover: hover) {
.bento-tile .gallery-caption {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s;
}
.bento-tile:hover .gallery-caption {
opacity: 1;
transform: translateY(0);
}
}
/* Bilderzahl-Badge */
.bento-tile[data-lb-images][data-count]::after {
content: attr(data-count);
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.85);
font-size: 11px;
padding: 0.3rem 0.6rem;
border-radius: var(--r-btn);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events: none;
z-index: 2;
}
@media (max-width: 767px) {
.editorial.reverse .editorial-img { order: -1; }
}
/* Gallery Grid — adaptive columns based on item count */
.gallery-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* 4+ items → 3 columns on desktop */
@media (min-width: 768px) {
.gallery-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.gallery-grid:has(:nth-child(4)) {
grid-template-columns: 1fr 1fr 1fr;
}
}
.gallery-item {
border-radius: var(--r-card);
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
}
/* Larger aspect ratio for 2-col grids */
@media (min-width: 768px) {
.gallery-grid:not(:has(:nth-child(4))) .gallery-item {
aspect-ratio: 16/10;
}
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }
/* Tight spacing between consecutive gallery sub-sections */
.section + .section:has(.gallery-grid) {
padding-top: 0;
}
.section:has(.gallery-grid) + .section:has(.gallery-grid) {
padding-top: 1.5rem;
}
.section:has(.gallery-grid) .section-header {
margin-bottom: 1.5rem;
}
/* Gallery sub-section divider — short gold fade */
.section:has(.gallery-grid) + .section:has(.gallery-grid)::before {
content: '';
display: block;
width: min(66%, 800px);
height: 1px;
margin: 0 auto 2rem;
background: linear-gradient(to right, transparent, var(--accent), transparent);
opacity: 0.3;
}
/* Project cover badge showing image count */
.gallery-item[data-lb-images]::after {
content: attr(data-count);
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.8);
font-size: 11px;
padding: 0.3rem 0.6rem;
border-radius: var(--r-btn);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events: none;
}
.gallery-item[data-lb-images] { position: relative; }
.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem 0.75rem 0.75rem;
background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
color: rgba(255,255,255,0.9);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01em;
pointer-events: none;
}
/* CTA Banner — schlank, ohne shared-Background-Image und ohne Wrapper.
Closing-Statement übernimmt jetzt der Footer-Ghost im Footer (siehe oben).
cta-banner-bg / cta-footer-wrap / cta-ghost CSS-Rules wurden entfernt —
alle drei Patterns sind durch das einfache footer-ghost Pattern ersetzt
(Kratzer/Lämmermann-Style). */
.cta-banner {
position: relative;
text-align: center;
padding: clamp(5rem, 8vw, 9rem) 0 clamp(2rem, 3vw, 3rem);
/* overflow: visible damit das cta-banner-bg unten in den Footer-Bereich
hineinfaden kann (bis zur gold-gradient Trennlinie auf .footer-top).
isolation: isolate behält den eigenen Stacking-Context für Layering:
gold line ::before z-index 2, container z-index 1, bg-Layer z-index 0. */
overflow: visible;
isolation: isolate;
}
/* Gold top border integrated into CTA banner */
.cta-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--accent), transparent);
opacity: 0.3;
z-index: 2;
}
/* Hintergrund-Bild + Dim-Gradient — gleiches Pattern wie .contact-bg auf
der Mainpage. ![]()
Element statt CSS background-image für Lazy-Loading
und decoding="async" Attribute. Das gleiche Pexels-Image wie auf der
Mainpage → Browser cached cross-page. */
.cta-banner-bg {
position: absolute;
/* Reicht 96px unter die Section-Grenze hinein = footer padding-top 6rem.
Genau dort sitzt die gold-gradient Trennlinie auf .footer-top
(border-top mit linear-gradient 1). Mobile: 64px (footer padding 4rem). */
top: 0;
left: 0;
right: 0;
bottom: -96px;
z-index: 0;
pointer-events: none;
}
.cta-banner-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-banner-bg::after {
content: '';
position: absolute;
inset: 0;
/* 5-Stop-Gradient: oben dezent (CTA-Lesbarkeit), Mitte halb-dunkel,
unten ausfaden auf solid --bg color (rgba 1.0 = #1c1814) genau an
der footer-top Trennlinie → fließender Übergang ohne Kante. */
background: linear-gradient(
to bottom,
rgba(28, 24, 20, 0.85) 0%,
rgba(28, 24, 20, 0.78) 30%,
rgba(28, 24, 20, 0.85) 65%,
rgba(28, 24, 20, 0.95) 85%,
rgba(28, 24, 20, 1) 100%
);
}
@media (max-width: 767px) {
/* Footer padding-top ist auf Mobile geringer (4rem statt 6rem) → 64px Extend */
.cta-banner-bg { bottom: -64px; }
}
.cta-banner .container {
position: relative;
z-index: 1;
}
.cta-banner .label {
margin-bottom: 1.5rem;
color: var(--accent);
}
.cta-banner h2 {
margin-bottom: 1.25rem;
color: var(--text);
}
.cta-banner p {
color: var(--text);
opacity: 0.7;
margin-bottom: 1.75rem;
margin-left: auto;
margin-right: auto;
}
.cta-banner-phone {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-serif);
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
color: var(--text);
margin-bottom: 2rem;
transition: color 0.3s;
}
.cta-banner-phone:hover { color: var(--accent); }
.cta-banner .btn { margin-top: 0.5rem; }
/* ============================================
Atmospheric Wrapper — Cinematic Light-Beams
============================================
Utility für dezente, scroll-gekoppelte Gold-Lichtstrahlen
als Hintergrund-Atmosphäre. Gestresste blur + low opacity
lassen sie hinter den Content zurücktreten.
HTML:
============================================ */
.atmo-wrap {
position: relative;
/* overflow: clip statt hidden — clip clipt Inhalt visuell genauso, erzeugt
aber KEINEN Scrollport. Scrollport-Ancestor würde animation-timeline:
view() darauf statt auf das Document referenzieren — das bricht reveal-
Animations weil der wrap selbst nicht scrollt (nur das Document tut). */
overflow: clip;
isolation: isolate;
}
/* Licht-Ausklang am Wrap-Ende — Beams + Partikel sterben weich in die Seitenfarbe,
bevor der Schanigarten-Sektor beginnt. Ohne das wird das Atmosphären-Licht
(quaternary-Beam bei bottom:3% + Partikel-Canvas) vom overflow:clip an der
Wrap-Kante HART abgeschnitten → sichtbare Linie, obwohl die Grundfarbe passt.
Als ::after-Schleier statt Mask auf einem Beam-Container, weil eine Mask dort
einen Stacking-Context erzeugen und das mix-blend:screen der Beams kappen würde
(Isolation-Falle). z-index 0 + letzter Paint = über Beams/Canvas, unter Content (z1). */
.atmo-wrap::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 520px;
/* Eased-Stops (~ease-in-Kurve) — der Schleier selbst darf keine wahrnehmbare
Bande erzeugen, gerade wo er Partikel/Beam-Licht zudeckt. */
background: linear-gradient(to bottom,
transparent 0%,
color-mix(in oklch, var(--bg) 8%, transparent) 20%,
color-mix(in oklch, var(--bg) 26%, transparent) 40%,
color-mix(in oklch, var(--bg) 55%, transparent) 60%,
color-mix(in oklch, var(--bg) 85%, transparent) 80%,
var(--bg) 100%);
pointer-events: none;
z-index: 0;
}
/* Generisch: alle direkten non-beam-Kinder bekommen Stacking-Kontext über den Beams.
Funktioniert für einzelne Sections (Beams + Container als Siblings) als auch für
wrapping divs die mehrere Sections enthalten.
Atmo-particles-Canvas wird ebenfalls ausgenommen — er behält seine eigene
position:absolute aus der atmo-particles-Klasse. */
.atmo-wrap > :not(.atmo-beam):not(.atmo-particles) {
position: relative;
z-index: 1;
}
.atmo-beam {
position: absolute;
width: 120vw;
height: 280px;
pointer-events: none;
z-index: 0;
filter: blur(70px);
/* mix-blend-mode: screen aktiv — gold-bronze Lichtstreifen werden gegen
dunklen Backdrop "geblendet" und wirken wie echtes Licht statt
überlagertem Layer. Funktioniert auf dem Spangler --bg #1c1814 trotz
leicht hellerem Tone als Kratzer #141211 ausreichend. KEIN opacity-
reduce — die rgba-Werte im Gradient handhaben Sichtbarkeit. */
mix-blend-mode: screen;
will-change: transform;
}
/* ============================================
Particles-Canvas — Holzspäne-System (particles.js)
============================================
Container für gold-bronze Partikel die "Staub im Werkstatt-Licht" simulieren.
Liegt auf z-index 0 zwischen Beams (z 0) und Content (z 1+) — Beams und
Particles sind beide hinter dem Content, Particles werden vom z-context
etwas darüber gerendert da sie später im DOM kommen.
width/height 100% explizit weil Browser sonst die Default-Canvas-Attribute
(300×150) als intrinsic size nimmt trotz inset:0 — besonders wenn Script
zu früh läuft. */
.atmo-particles {
/* STICKY-VIEWPORT statt absolute/inset:0 (Scroll-Freeze-Fix):
Als wrap-hohe Canvas war der Puffer seitenhoch × dpr — auf der
Schanigarten-Sub 3456×19819 px = 261 MB und ÜBER dem GPU-Texture-
Limit (16384 px) → Chrome fiel auf Software-Compositing zurück,
jeder Scroll-Frame rasterte die volle Canvas auf der CPU („alles
hängt"). Sticky pinnt die Canvas viewport-groß über die gesamte
Wrap-Strecke (atmo-wrap nutzt overflow: clip — Sticky funktioniert);
der negative Bottom-Margin gibt den Flow-Platz zurück. Puffer jetzt
~20 MB, Compositing bleibt auf der GPU. */
position: sticky;
top: 0;
display: block; /* inline-Canvas erzeugt sonst Line-Box-Resthöhe im Flow */
width: 100%;
height: 100vh;
margin-bottom: -100vh;
z-index: 0;
pointer-events: none;
/* Kratzer-Pattern: opacity 0.85 + mix-blend-mode: screen.
Particles werden gegen den dunklen Backdrop "geblendet" und wirken
wie echtes Werkstatt-Staublicht statt überlagertem Layer. */
opacity: 0.85;
mix-blend-mode: screen;
}
@supports (height: 100lvh) {
.atmo-particles { height: 100lvh; margin-bottom: -100lvh; }
}
/* ============================================
.section-surface — warme braun-Insel mit Mask-Fade-Edges
============================================
Für tonal-Alternation zwischen Sections. Pseudo-Element ::before mit
bg-surface-2 (heller warm-braun) und mask-image-Fade an top/bottom 120px
blendet die Surface sanft in den Wrap-BG. Damit fadet der Page-Tone in
Section-Rhythmus heller-dunkler-heller statt monoton flach.
Atmo-Beams + Particles im Wrap (z 0) sind unter der Surface verdeckt
(Surface ist opak), schimmern aber durch die 240px Fade-Edges. Plus
in dunklen Sections (zwischen zwei surface-Inseln) voll sichtbar.
HTML:
*/
.section-surface {
position: relative;
}
.section-surface::before {
content: '';
position: absolute;
inset: 0;
/* Semi-transparent statt voll-opak: Beams + Particles im Wrap (z 0)
schimmern durch die Surface durch. Bei alpha 0.75 ist der Tonal-
Shift noch klar erkennbar (effektiv ~14 RGB-Δ statt 18) und der
gold-bronze Atmo-Layer kommt deutlich durch — das ist Kratzers
Pattern für Surfaces mit Particles-Layer dahinter (siehe
onboarding-section override mit 0.9). */
background: color-mix(in srgb, var(--bg-surface-2) 75%, transparent);
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 120px,
black calc(100% - 120px),
transparent 100%);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black 120px,
black calc(100% - 120px),
transparent 100%);
z-index: 0;
pointer-events: none;
}
/* Direct children über das Surface-::before heben */
.section-surface > * {
position: relative;
z-index: 1;
}
/* ============================================
Atmo-Lean — alternierender Diagonal-Glow pro Section
============================================
Licht pool in EINER oberen Ecke; die Ecke alterniert (rechts/links) beim
Runterscrollen → cinematischer Rhythmus statt flaches, gleichförmiges Feld.
Feather bis weit in die Section rein + Kanten-Mask (top/bottom) → nahtfrei,
kein sichtbarer Übergang zur Nachbar-Section. Whisper-Opacity, mix-blend
screen (addiert Licht wie die Beams, statt einen Layer draufzulegen).
Modifier --right / --left setzen die Ecke; Content wird per z-index gehoben. */
.atmo-lean { position: relative; }
.atmo-lean > * { position: relative; z-index: 1; }
.atmo-lean::after {
content: '';
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
mix-blend-mode: screen;
/* Glow-Kern tiefer in der Section (28 % statt 17 %) — das Licht wird IN der
Section geboren, nicht an ihrer Kante. */
background: radial-gradient(78% 66% at 84% 28%,
color-mix(in srgb, var(--atmo-light) 28%, transparent) 0%,
color-mix(in srgb, var(--atmo-light) 10%, transparent) 34%,
transparent 62%);
/* Eased Onset/Offset statt schneller 0→9%-Rampe: das Licht materialisiert
langsam ab ~10 % und stirbt VOR der Unterkante (96 %) — keine wahrnehmbare
Kante an den Section-Nähten (gleiche Logik wie der Wrap-Licht-Schleier). */
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0, 0, 0, 0.05) 10%,
rgba(0, 0, 0, 0.18) 18%,
rgba(0, 0, 0, 0.45) 26%,
rgba(0, 0, 0, 0.8) 33%,
#000 40%,
#000 62%,
rgba(0, 0, 0, 0.5) 76%,
rgba(0, 0, 0, 0.15) 88%,
transparent 96%);
mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0, 0, 0, 0.05) 10%,
rgba(0, 0, 0, 0.18) 18%,
rgba(0, 0, 0, 0.45) 26%,
rgba(0, 0, 0, 0.8) 33%,
#000 40%,
#000 62%,
rgba(0, 0, 0, 0.5) 76%,
rgba(0, 0, 0, 0.15) 88%,
transparent 96%);
}
.atmo-lean--left::after {
background: radial-gradient(78% 66% at 16% 28%,
color-mix(in srgb, var(--atmo-light) 28%, transparent) 0%,
color-mix(in srgb, var(--atmo-light) 10%, transparent) 34%,
transparent 62%);
}
.atmo-beam-primary {
top: 5%;
left: -10%;
transform: rotate(-12deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 30%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 42%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 30%, transparent) 60%,
transparent 100%
);
}
.atmo-beam-secondary {
top: 30%;
right: -10%;
transform: rotate(10deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 22%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 32%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 22%, transparent) 60%,
transparent 100%
);
}
/* Zusätzliche Beams für lange/kombinierte Wrapper (z.B. Mainpage Leistungen+Referenzen) */
.atmo-beam-tertiary {
top: 58%;
left: -10%;
transform: rotate(-8deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 24%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 36%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 24%, transparent) 60%,
transparent 100%
);
}
.atmo-beam-quaternary {
bottom: 3%;
right: -10%;
transform: rotate(14deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 20%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 30%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 20%, transparent) 60%,
transparent 100%
);
}
/* Quinary + Senary — zusätzliche Beams für lange Wraps (z.B. service-bg-wrap auf
Subpages mit 6-8 Sub-Kategorie-Sections). Position-Overrides via service-bg-wrap-
Selektor weiter unten — die Defaults hier sind so gewählt dass sie auch in
einem isolierten atmo-wrap visuell sinnvoll sitzen. */
.atmo-beam-quinary {
top: 75%;
left: -10%;
transform: rotate(-10deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 22%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 32%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 22%, transparent) 60%,
transparent 100%
);
}
.atmo-beam-senary {
top: 90%;
right: -10%;
transform: rotate(8deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 20%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 30%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 20%, transparent) 60%,
transparent 100%
);
}
/* Position-Overrides für service-bg-wrap: Beams werden über die volle wrap-Höhe
verteilt (statt der Defaults die für kürzere atmo-wraps optimiert sind).
Bei einem 5000px-Wrap mit 8 Sub-Kategorie-Sections ergeben diese Werte einen
gleichmäßigen Beam-Rhythmus von ~830px Abstand pro Beam. */
.service-bg-wrap > .atmo-beam-primary { top: 5%; bottom: auto; }
.service-bg-wrap > .atmo-beam-secondary { top: 22%; bottom: auto; }
.service-bg-wrap > .atmo-beam-tertiary { top: 41%; bottom: auto; }
.service-bg-wrap > .atmo-beam-quaternary { top: 60%; bottom: auto; }
.service-bg-wrap > .atmo-beam-quinary { top: 78%; bottom: auto; }
.service-bg-wrap > .atmo-beam-senary { top: 92%; bottom: auto; }
/* Scroll-gekoppelter Drift: benachbarte Beams bewegen sich entgegengesetzt für Organik */
@supports (animation-timeline: view()) {
@keyframes atmo-beam-drift-primary {
from { transform: rotate(-12deg) translateY(-60px); }
to { transform: rotate(-12deg) translateY(60px); }
}
@keyframes atmo-beam-drift-secondary {
from { transform: rotate(10deg) translateY(60px); }
to { transform: rotate(10deg) translateY(-60px); }
}
@keyframes atmo-beam-drift-tertiary {
from { transform: rotate(-8deg) translateY(-40px); }
to { transform: rotate(-8deg) translateY(40px); }
}
@keyframes atmo-beam-drift-quaternary {
from { transform: rotate(14deg) translateY(40px); }
to { transform: rotate(14deg) translateY(-40px); }
}
@keyframes atmo-beam-drift-quinary {
from { transform: rotate(-10deg) translateY(-50px); }
to { transform: rotate(-10deg) translateY(50px); }
}
@keyframes atmo-beam-drift-senary {
from { transform: rotate(8deg) translateY(50px); }
to { transform: rotate(8deg) translateY(-50px); }
}
.atmo-beam-primary {
animation: atmo-beam-drift-primary linear both;
animation-timeline: view();
}
.atmo-beam-secondary {
animation: atmo-beam-drift-secondary linear both;
animation-timeline: view();
}
.atmo-beam-tertiary {
animation: atmo-beam-drift-tertiary linear both;
animation-timeline: view();
}
.atmo-beam-quaternary {
animation: atmo-beam-drift-quaternary linear both;
animation-timeline: view();
}
.atmo-beam-quinary {
animation: atmo-beam-drift-quinary linear both;
animation-timeline: view();
}
.atmo-beam-senary {
animation: atmo-beam-drift-senary linear both;
animation-timeline: view();
}
}
/* ============================================
Responsive — Mobile Overrides
============================================ */
@media (max-width: 767px) {
/* Hero mobile */
.hero { min-height: 100svh; }
/* padding-bottom muss die Trust-Bar-Höhe clearen (4 Items untereinander
= ~117px inkl. Border+Padding) plus etwas Atemluft, sonst schneidet
die absolute positionierte Bar den letzten Hero-Button ab. */
.hero-content { padding-bottom: 8rem; }
.hero-buttons { flex-direction: column; }
.hero-buttons .btn { width: 100%; justify-content: center; }
/* Trust bar mobile */
.hero-trust-inner {
flex-direction: column;
gap: 0.3rem;
}
/* Section spacing mobile */
.section { padding: clamp(3.5rem, 6vw, 5rem) 0; }
.section-header { margin-bottom: 2rem; }
/* Editorial-Bilder auf Mobile ausblenden — sie sind nicht klickbar und
das eigene Material taucht weiter unten in den klickbaren Galerien
sowieso auf. Ohne Bild wird der Editorial-Text zur sauberen Brücke
zwischen Hero und den Referenz-Kacheln (Claim + CTA dicht am Hero). */
.editorial-img { display: none; }
/* USP mobile */
.usp-content { text-align: left; }
.usp-lead { text-align: left; }
/* Contact mobile */
.contact-header { margin-bottom: 1.5rem; }
/* Form chips mobile - keep 2 col */
.ob-service-grid { grid-template-columns: 1fr 1fr; }
/* Type-Buttons (Privat/Gewerblich) auf Mobile stapeln statt 2 Spalten.
Grund: bei schmaler Viewport wrapt "Gewerblich" auf 2 Zeilen während
"Privat" in 1 Zeile passt → ungleiche Button-Höhen. Gestapelt sind beide
voll-breit und identisch. Padding kleiner weil voll-breit-Buttons keine
5rem Höhe brauchen um präsent zu wirken. */
.ob-type-grid { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 1.5rem; }
.ob-type-btn { padding: 1.8rem 1rem; font-size: 1.4rem; }
/* Footer mobile */
.footer { padding: 4rem 0 2rem; }
.footer-brand { margin-bottom: 2rem; }
.footer-bottom { text-align: center; }
.footer-legal { justify-content: center; }
}
/* Tablet tweaks */
@media (min-width: 768px) and (max-width: 1023px) {
.ed-card { min-height: 420px; }
}
/* ============================================
Cross-Document View Transitions (Swipe zwischen Seiten)
Chrome 126+, Safari 18+. Firefox: Fallback auf normale Navigation, kein Schaden.
============================================ */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: page-slide-out 0.35s var(--ease) both;
}
::view-transition-new(root) {
animation: page-slide-in 0.35s var(--ease) both;
}
/* Slide-Hub 4% (war 8%) + Duration 0.35s (war 0.45s): subtilerer, schnellerer
Slide. 8%/0.45s visualisierte die vertikale Diskrepanz zwischen Old-Snapshot
(mid-page scroll-Position) und New-Snapshot (top-of-page) zu stark → wirkte
bei mid-page-Klicks ruckelig. 4%/0.35s hält den Direction-Hint ohne die
Diskrepanz zu betonen. */
@keyframes page-slide-out {
to {
transform: translateX(-4%);
opacity: 0;
}
}
@keyframes page-slide-in {
from {
transform: translateX(4%);
opacity: 0;
}
}
/* Fallback wenn Chrome die Cross-Document-VT skipped (siehe page-transition.js) */
html.page-enter body {
animation: page-slide-in 0.35s var(--ease) both;
}
/* ============================================
PAGE-TRANSITION OPTIMIZATION (is-transitioning class)
============================================
Set von page-transition.js auf during:
- pageswap (outgoing, vor Outgoing-Snapshot)
- pagereveal (incoming, vor Incoming-Snapshot + erstem Paint)
ZIEL: Browser kann Snapshots billig rendern + flicker-freie Animation.
Drei Kategorien von Fixes:
============================================ */
/* --- 1) HEAVY GPU COMPOSITE LAYER ABSCHALTEN ---
mix-blend-mode + großer filter-blur + backdrop-filter sind die teuersten
compositor operations. Während VT slidet die Page → jeder Frame würde
diese Operationen recalculieren. Stattdessen: still legen, Snapshot wird
mit "kalten" Layern genommen, slide ist smooth.
--- */
/* Atmo-beam + particles: KEIN Override mehr während is-transitioning.
Vorgeschichte: erst filter:none + blend-mode:normal als Perf-Hack →
harte 280px gradient-Streifen sichtbar im Snapshot. Dann opacity:0 →
beams unsichtbar im Snapshot, aber 0.4s sequentielles Fade-in nach
Slide → fühlt sich wie "Hintergrund braucht ewig" an.
Jetzt: kein Override. Beams rendern normal (soft glow) auch im
Snapshot. Compositor-Last ist auf modernen Geräten kein Problem für
die 0.45s VT-Dauer. Nach Slide sind die Beams direkt da, kein Fade. */
/* Universal: ALLE backdrop-filter-Elemente neutralisieren während VT.
Es gibt 11 Stellen in style.css mit backdrop-filter (nav, btn-primary,
hero-trust, ob-form-wrapper, contact-cards, etc.) — ein wildcard
garantiert dass keiner vergessen wird wenn neue dazukommen. CSS-engine
matched nur Elemente die Property tatsächlich gesetzt haben → minimaler
Overhead. */
html.is-transitioning *,
html.is-transitioning *::before,
html.is-transitioning *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
/* transition-duration:0 — sonst sind Elemente mit transition (z.B. .btn
mit backdrop-filter 0.6s transition) mid-flight zwischen alt/neu Wert
beim Snapshot. animation bleibt aktiv für VT page-slide selbst. */
transition-duration: 0s !important;
transition-delay: 0s !important;
}
/* Nav zusätzlich: solid background statt rgba 0.92 — sonst sieht man
durch die transluzente Schicht den slidenden Content. */
html.is-transitioning .nav,
html.is-transitioning .nav.scrolled {
background: var(--bg) !important;
}
/* --- 2) CONTINUOUS ANIMATIONS PAUSE ---
footer-ghost (scroll-driven) etc. — keine compositor
updates während VT. animation-play-state: paused friert sie ein.
--- */
html.is-transitioning .footer-ghost {
animation-play-state: paused !important;
}
/* --- 3) REVEAL PRE-STATES NEUTRALISIEREN ---
Reveals haben default opacity: 0 als Pre-State (animation-timeline view()
füllt sie scroll-driven). Beim VT-Snapshot ist animation-timeline noch
nicht für alle Elemente evaluiert → Snapshot zeigt opacity:0 = leere
Seite. Force-visible während transition, danach greift normales view()
wieder.
transition: none !important kritisch — ohne das würden Elemente mit
eigenen transitions (.ed-card hat 1.4-1.6s transition auf opacity/
transform/filter) statt instant zum Endwert zu springen erst zur
transition starten und im Snapshot mid-state stehen. */
html.is-transitioning .reveal,
html.is-transitioning .reveal-fog,
html.is-transitioning .ab-reveal-el,
html.is-transitioning .ab-fog,
html.is-transitioning .ed-card,
html.is-transitioning .ref-quad .ref-solo {
opacity: 1 !important;
transform: none !important;
translate: 0 !important;
filter: none !important;
animation: none !important;
transition: none !important;
}
/* --- 4) HOVER-/OPEN-STATES KILLEN ---
Snapshot wird genommen während der :hover-State des angeklickten Elements
noch matched (Browser hält :hover bis pointer move). Ohne Override "wandert"
der Hover-Look in den Snapshot:
- ed-card öffnet sich sichtbar mid-slide (Front-Panel slidet raus)
- ref-solo Cross-Dim macht andere Tiles dunkel
- bento-tile verschoben + scaled
Diese Reset-Regeln zwingen während VT alle Hover-/Open-Effekte auf
base-state zurück. ed-open Klasse wird zusätzlich JS-seitig in pageswap
entfernt (page-transition.js). --- */
/* ed-card open-state */
html.is-transitioning .ed-card.ed-open {
transform: none !important;
border-color: var(--border) !important;
box-shadow: var(--depth-rest) !important;
}
html.is-transitioning .ed-card.ed-open .ed-slide {
transform: translateX(0) !important;
}
html.is-transitioning .ed-card.ed-open .ed-img-overlay::before {
opacity: 0 !important;
}
html.is-transitioning .ed-card.ed-open .ed-label { opacity: 0.8 !important; }
html.is-transitioning .ed-card.ed-open .ed-more { opacity: 0.85 !important; }
html.is-transitioning .ed-card.ed-open .ed-more::after {
opacity: 0 !important;
width: 130% !important;
}
/* ref-solo Hover + Cross-Dim — saturate/brightness/transform zurück auf base */
html.is-transitioning .ref-solo:hover {
box-shadow: var(--depth-rest) !important;
}
html.is-transitioning .ref-solo:hover .ref-solo-bg img,
html.is-transitioning .ref-duo .ref-solo:not(:hover) .ref-solo-bg img,
html.is-transitioning .ref-trio .ref-solo:not(:hover) .ref-solo-bg img,
html.is-transitioning .ref-quad .ref-solo:not(:hover) .ref-solo-bg img {
filter: saturate(1) brightness(1) !important;
transform: scale(1) !important;
}
html.is-transitioning .ref-solo[data-img-align="top"]:hover .ref-solo-bg img,
html.is-transitioning .ref-duo .ref-solo[data-img-align="top"]:not(:hover) .ref-solo-bg img,
html.is-transitioning .ref-trio .ref-solo[data-img-align="top"]:not(:hover) .ref-solo-bg img,
html.is-transitioning .ref-quad .ref-solo[data-img-align="top"]:not(:hover) .ref-solo-bg img {
transform: scale(1.12) translateY(5%) !important;
}
html.is-transitioning .ref-solo:hover .ref-solo-overlay {
background:
linear-gradient(to right, rgba(28,24,20,0.78) 0%, rgba(28,24,20,0.45) 45%, rgba(28,24,20,0.15) 100%),
linear-gradient(to top, rgba(28,24,20,0.4) 0%, transparent 40%) !important;
}
html.is-transitioning .ref-quad .ref-solo:hover .ref-solo-overlay {
background: radial-gradient(ellipse farthest-corner at 50% 50%,
rgba(28,24,20,0.78) 0%,
rgba(28,24,20,0.55) 30%,
rgba(28,24,20,0.3) 60%,
rgba(28,24,20,0.1) 100%) !important;
}
html.is-transitioning .ref-solo .ref-solo-overlay::before {
opacity: 0 !important;
}
/* bento-tile Hover */
html.is-transitioning .bento-tile:hover {
transform: none !important;
box-shadow: var(--depth-rest) !important;
}
html.is-transitioning .bento-tile:hover img {
transform: none !important;
}
html.is-transitioning .bento-tile:hover .gallery-caption {
opacity: 0 !important;
transform: translateY(8px) !important;
}
/* Buttons + Pills + Cards — Hover-Lift killen */
html.is-transitioning .btn:hover,
html.is-transitioning .area-back:hover,
html.is-transitioning .service-back-floating:hover,
html.is-transitioning .nav-cta:hover,
html.is-transitioning .cert-logo:hover,
html.is-transitioning .gallery-item:hover img,
html.is-transitioning .editorial-img[data-lb-images]:hover img,
html.is-transitioning .team-card:hover .team-photo img {
transform: none !important;
}
/* Rückwärts-Navigation (Browser-Back, .area-back, .area-back-floating,
#serviceBackFloating): Slide-Richtung umkehren — alte Seite rechts raus,
neue Seite von links rein. Klasse wird von page-transition.js gesetzt. */
html.nav-backwards::view-transition-old(root) {
animation: page-slide-out-reverse 0.35s var(--ease) both;
}
html.nav-backwards::view-transition-new(root) {
animation: page-slide-in-reverse 0.35s var(--ease) both;
}
@keyframes page-slide-out-reverse {
to {
transform: translateX(4%);
opacity: 0;
}
}
@keyframes page-slide-in-reverse {
from {
transform: translateX(-4%);
opacity: 0;
}
}
/* Fallback-Variante für Non-VT-Browser */
html.nav-backwards.page-enter body {
animation: page-slide-in-reverse 0.35s var(--ease) both;
}
/* ============================================
Service-Page: Floating "Alle Leistungen" Button
Fadet links-mittig ein sobald Hero außer Sicht — Rückweg zur Hauptseite
============================================ */
.service-back-floating {
position: fixed;
left: clamp(1rem, 2vw, 2.5rem);
top: 50%;
z-index: 50;
opacity: 0;
transform: translate(-15px, -50%);
pointer-events: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.1rem;
border-radius: var(--r-btn);
background: linear-gradient(to bottom, rgba(240,230,216,0.08), rgba(240,230,216,0.03));
border: 1px solid rgba(240,230,216,0.2);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
inset 0 1px 0 rgba(240,230,216,0.12),
0 4px 14px rgba(0,0,0,0.22);
color: #d4c8b4;
font-size: 12px;
letter-spacing: 0.05em;
text-decoration: none;
white-space: nowrap;
transition:
opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-back-floating svg {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-back-floating.visible {
opacity: 1;
transform: translate(0, -50%);
pointer-events: auto;
}
.service-back-floating:hover {
background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
color: #f0e6d8;
}
.service-back-floating:hover svg {
transform: translateX(-4px);
}
@media (max-width: 767px) {
.service-back-floating { display: none !important; }
}
/* ═════════════════════════════════════════════════════════════════════════
ABLAUF-RAIL — Cinematic Timeline (Lämmermann-Pattern, 5 Stations)
Maschinen-Reise: Aufmaß → Planung → CNC-Fertigung (KEY) → Oberfläche → Montage
Two-Observer State-Machine:
.ab-active → Headlines + Rail-Container faden
.ab-rail-active → Rail-Fill (5s linear) + Station-Flashes + Step-Glows
Sync: Mikro-Pausen (4%) bei 8/12, 28/32, 48/52, 68/72, 88/92 → Stations
zünden bei matching --ab-sd 1s/2s/3s/4s/5s synchron zur Fill-Ankunft.
═════════════════════════════════════════════════════════════════════════ */
#ablauf { position: relative; }
#ablauf .section-header { margin-bottom: clamp(3rem, 6vw, 5rem); }
/* Pre-Entry States — translate (nicht transform) für reveal damit
transform-Eigenschaft frei für Hover-Scale bleibt. translate und
transform sind seit CSS Box Modeling Level 4 separate Properties. */
.ab-reveal-el {
opacity: 0;
translate: 0 10px;
filter: blur(4px);
}
.ab-fog {
opacity: 0;
translate: 0 12px;
scale: 0.99;
filter: blur(10px);
}
/* Headline Reveals on section enter */
#ablauf.ab-active .ab-reveal-el:not(.ab-step) {
opacity: 1;
translate: 0 0;
filter: blur(0);
transition: opacity 0.9s var(--ease) var(--ab-d, 0ms),
translate 0.9s var(--ease) var(--ab-d, 0ms),
filter 1.1s var(--ease) var(--ab-d, 0ms);
}
/* Rail-Container faded auf Section-Enter */
#ablauf.ab-active .ab-fog {
opacity: 1;
translate: 0 0;
scale: 1;
filter: blur(0);
transition: opacity 1.1s var(--ease) 300ms,
translate 1.1s var(--ease) 300ms,
scale 1.1s var(--ease) 300ms,
filter 1.4s var(--ease) 300ms;
}
/* Step Cards syncen mit Rail-Fill (Delays via --ab-d) — translate, nicht transform */
#ablauf.ab-rail-active .ab-step.ab-reveal-el {
opacity: 1;
translate: 0 0;
filter: blur(0);
transition: opacity 0.9s var(--ease) var(--ab-d, 0ms),
translate 0.9s var(--ease) var(--ab-d, 0ms),
filter 1.1s var(--ease) var(--ab-d, 0ms);
}
/* ─── Rail Track (2px horizontal) ─── */
.ab-rail {
position: relative;
height: 2px;
background: color-mix(in srgb, var(--text) 8%, transparent);
margin-bottom: clamp(3rem, 6vw, 5rem);
display: none;
}
@media (min-width: 1024px) {
.ab-rail { display: block; }
}
/* Rail Fill — Akzent-Gradient mit Micro-Glow */
.ab-rail::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 40%, transparent) 0%,
color-mix(in srgb, var(--accent) 70%, transparent) 70%,
var(--accent) 100%);
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Fill-Animation: 5s linear, 0.6s delay, Mikro-Pausen 4% bei jeder Station */
#ablauf.ab-rail-active .ab-rail::after {
animation: abRailFill 5s linear 0.6s 1 forwards;
}
@keyframes abRailFill {
0% { width: 0%; }
8% { width: 10%; }
12% { width: 10%; }
28% { width: 30%; }
32% { width: 30%; }
48% { width: 50%; }
52% { width: 50%; }
68% { width: 70%; }
72% { width: 70%; }
88% { width: 90%; }
92% { width: 90%; }
100% { width: 100%; }
}
/* ─── Stations (32px Kreise auf Rail) ─── */
.ab-station {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg);
border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.03em;
color: color-mix(in srgb, var(--text) 35%, transparent);
}
/* Station-Ignition: 750ms ease-out flash, settle auf accent-light */
#ablauf.ab-rail-active .ab-station {
animation: abStationFlash 750ms ease-out var(--ab-sd, 0s) 1 forwards;
}
@keyframes abStationFlash {
0% { border-color: color-mix(in srgb, var(--accent) 15%, transparent); color: color-mix(in srgb, var(--text) 35%, transparent); box-shadow: none; }
10% { border-color: var(--accent); color: var(--text); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); }
35% { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent-light); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent); }
100% { border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-light); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); }
}
/* Key-Station (CNC-Fertigung, Nr. 3): 2px Border, stärkerer Flash */
.ab-station--key {
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
border-width: 2px;
}
#ablauf.ab-rail-active .ab-station--key {
animation: abStationFlashKey 750ms ease-out var(--ab-sd, 0s) 1 forwards;
}
@keyframes abStationFlashKey {
0% { border-color: color-mix(in srgb, var(--accent) 15%, transparent); color: color-mix(in srgb, var(--text) 35%, transparent); box-shadow: none; }
10% { border-color: var(--accent); color: var(--text); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 24%, transparent); }
35% { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-light); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 14%, transparent); }
100% { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-light); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent); }
}
/* ─── Step Cards Grid (5 Cards) ─── */
.ab-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem;
max-width: 1400px;
margin: 0 auto;
}
@media (min-width: 768px) {
.ab-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (min-width: 1024px) {
.ab-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
}
@media (min-width: 1280px) {
.ab-grid { gap: 1.5rem; }
}
.ab-step {
position: relative;
isolation: isolate;
border: 1px solid rgba(240, 230, 216, 0.06);
border-radius: var(--r-card);
padding: 24px 20px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--depth-rest);
transition: transform 0.5s var(--ease),
border-color 0.4s var(--ease),
box-shadow 0.4s var(--ease),
opacity 0.4s ease;
}
/* Glass-Highlight Layer — über Bild und Overlay */
.ab-step::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-highlight);
pointer-events: none;
z-index: 2;
border-radius: inherit;
}
/* Content über Glass + Bild + Overlay. Tag (position: absolute mit
inset: 0 für flex-center) explizit ausschließen — sonst überschreibt
diese Regel sein absolute-positioning auf relative. */
.ab-step > *:not(.ab-step-bg):not(.ab-step-overlay):not(.ab-step-tag) {
position: relative;
z-index: 3;
}
/* ─── Bild-Layer (z 0) — Slide-In von rechts.
inset: -1px als Anti-Aliasing-Buffer gegen Sub-Pixel-Strips an den
runden Ecken. KEIN border-radius hier — Card mit overflow:hidden
übernimmt das clipping (single clip = keine doppelte Sub-Pixel-Berechnung).
Default: translate(100%) rechts neben Card. Hover: translate(0). */
.ab-step-bg {
position: absolute;
inset: -1px;
z-index: 0;
overflow: hidden;
translate: 100% 0;
transition: translate 0.6s var(--ease);
}
.ab-step-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7) contrast(1.05) saturate(0.95);
}
/* ─── Overlay (z 1) — slidet zusammen mit Bild von rechts. Subtle dark
gradient für Lesbarkeit des Tags oben links. KEIN border-radius. */
.ab-step-overlay {
position: absolute;
inset: -1px;
z-index: 1;
pointer-events: none;
background: linear-gradient(to right,
color-mix(in srgb, var(--bg) 65%, transparent) 0%,
color-mix(in srgb, var(--bg) 25%, transparent) 50%,
transparent 100%);
translate: 100% 0;
transition: translate 0.6s var(--ease);
}
/* ─── Tag (z 3) — Headline mittig in accent-orange auf Hover.
Slidet zusammen mit dem Bild von rechts rein (gleiche translate-Animation,
gleiches Easing, gleiche Duration). flex-center sorgt für Mitte
horizontal UND vertikal. */
.ab-step-tag {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.01em;
/* atmo-light gold-bronze statt accent-orange — wärmer, atmosphärischer,
matcht Tonalität von .ab-micro labels in derselben Section. Stations
behalten orange-Akzent → klarer farblicher Kontrast: Rail = orange,
Bild-Hover-Tag = gold. */
color: var(--atmo-light);
text-align: center;
text-wrap: balance;
pointer-events: none;
translate: 100% 0;
transition: translate 0.6s var(--ease);
}
/* ─── Content-Container (z 3) — Title, Desc, Micro.
Default: translate(0). Hover: translate(-100%) → slidet links raus
während Bild von rechts rein-slidet (Swipe-Effekt). */
.ab-step-content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
flex: 1;
translate: 0 0;
transition: translate 0.6s var(--ease);
}
.ab-step--key {
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
background: color-mix(in srgb, var(--accent) 4%, transparent);
}
/* Step-Border-Glow beim Rail-Hit. Letzte Card behält Glow als Final-Anker. */
#ablauf.ab-rail-active .ab-step:nth-child(1) { animation: abStepGlow 1.4s ease-out 1.0s 1 both; }
#ablauf.ab-rail-active .ab-step:nth-child(2) { animation: abStepGlow 1.4s ease-out 2.0s 1 both; }
#ablauf.ab-rail-active .ab-step:nth-child(3) { animation: abStepGlow 1.4s ease-out 3.0s 1 both; }
#ablauf.ab-rail-active .ab-step:nth-child(4) { animation: abStepGlow 1.4s ease-out 4.0s 1 both; }
#ablauf.ab-rail-active .ab-step:nth-child(5) { animation: abStepGlowHold 2s ease-out 5.0s 1 both; }
@keyframes abStepGlow {
0% { border-color: color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent), var(--depth-rest); }
100% { border-color: rgba(240, 230, 216, 0.06); box-shadow: var(--depth-rest); }
}
@keyframes abStepGlowHold {
0% { border-color: color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent), var(--depth-rest); }
100% { border-color: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 8%, transparent), var(--depth-rest); }
}
/* Hover — Swipe-Pattern (ed-card-inspiriert). Bild + Overlay sliden von
rechts rein, Content slidet gleichzeitig links raus → Schreiber-Effekt.
Tag fadet ein nach 0.2s Delay als Orientierung über dem Bild.
Position NACH animation rules für Cascade-Override. */
@media (hover: hover) and (min-width: 1025px) {
#ablauf.ab-rail-active .ab-step:hover {
transform: scale(1.015);
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
box-shadow: var(--depth-hover), var(--depth-glow);
}
#ablauf.ab-rail-active .ab-step:hover .ab-step-bg,
#ablauf.ab-rail-active .ab-step:hover .ab-step-overlay,
#ablauf.ab-rail-active .ab-step:hover .ab-step-tag {
translate: 0 0;
}
#ablauf.ab-rail-active .ab-step:hover .ab-step-content {
translate: -110% 0;
}
}
.ab-step-title {
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 0.75rem;
}
.ab-step-desc {
font-size: 14px;
color: color-mix(in srgb, var(--text) 80%, transparent);
line-height: 1.6;
flex: 1;
margin-bottom: 1.25rem;
text-wrap: pretty;
}
.ab-micro {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 400;
color: var(--atmo-light);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ─── Mobile Scroll-Driven Rail Fill (< 768px) ─── */
.ab-mobile-rail-fill {
display: none;
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 0;
background: linear-gradient(to bottom,
color-mix(in srgb, var(--accent) 50%, transparent) 0%,
color-mix(in srgb, var(--accent) 70%, transparent) 60%,
var(--accent) 100%);
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 18%, transparent);
z-index: 1;
transition: height 0.15s ease-out;
pointer-events: none;
}
/* ─── Mobile Stepper Layout (< 768px) ─── */
@media (max-width: 767px) {
.ab-mobile-rail-fill { display: block; }
.ab-grid {
gap: 0;
position: relative;
padding-left: 48px;
counter-reset: step-counter;
}
.ab-grid::before {
content: '';
position: absolute;
left: 15px;
top: 32px;
height: var(--rail-height, calc(100% - 64px));
width: 1px;
background: color-mix(in srgb, var(--accent) 20%, transparent);
z-index: 0;
}
.ab-step {
counter-increment: step-counter;
position: relative;
border: none;
border-radius: 0;
padding: 20px 16px 32px 16px;
border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
box-shadow: none;
opacity: 0;
translate: 0 16px;
transition: opacity 0.5s ease, translate 0.5s ease;
}
.ab-step::after { display: none; }
.ab-step.step-visible {
opacity: 1;
translate: 0 0;
}
.ab-step:last-child { padding-bottom: 0; border-bottom: none; }
/* Numbered bubble — replaces Glass-::before in mobile mode.
inset: auto MUSS VOR den left/top Werten kommen — sonst overridet
die shorthand die einzelnen Properties zurück auf auto, und die
Bubble landet bei position:0,0 innerhalb der Card hinter dem Text
("Nummern unter dem Text"-Bug). */
.ab-step::before {
inset: auto; /* override desktop ::before inset:0 — MUSS ZUERST */
content: "0" counter(step-counter);
position: absolute;
left: -48px;
top: 24px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 500;
color: color-mix(in srgb, var(--accent) 60%, transparent);
letter-spacing: 0.03em;
z-index: 2;
}
/* Hover-Reveal-Layers (Bild-Slide auf Desktop) auf Mobile ausblenden —
sind eh translate(100%) off-screen, aber explizit display:none ist
sauberer (kein Layout-Cost, kein iOS Safari translate-Layer-Glitch). */
.ab-step-bg,
.ab-step-overlay,
.ab-step-tag {
display: none;
}
.ab-step.rail-reached::before {
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
color: var(--accent-light);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 14%, transparent);
transition: border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
.ab-step--key::before {
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
color: var(--accent-light);
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Desktop-Reveals auf Mobile force-off */
#ablauf .ab-reveal-el,
#ablauf .ab-fog {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
.ab-rail { display: none !important; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
html.page-enter body { animation: none !important; }
.atmo-beam { animation: none !important; }
.reveal, .reveal-fog {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
.hero-enter { opacity: 1 !important; transform: none !important; transition: none !important; }
.ed-card { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.service-back-floating { transition: none !important; }
.schani-inset img { transition: none !important; }
.ed-img img { transition: none !important; transform: none !important; }
.leistung h3, .leistung p { transition: none !important; }
.leistungen-buehne .einblick-img img { transition: none !important; } /* Bühne: Instant-Swap */
.leistungen-buehne .einblick-img { transition: none !important; } /* Fahrt: instant */
/* Ablauf-Rail: alle Animationen aus, End-State direkt */
.ab-reveal-el, .ab-fog {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
.ab-rail::after { width: 100% !important; animation: none !important; }
.ab-station { animation: none !important; border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; color: var(--accent-light) !important; }
.ab-station--key { border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; }
#ablauf .ab-step { animation: none !important; }
}
/* ============================================
Dillis — Leistungen Typo-Band (4 Gewerke)
============================================ */
.section-lead {
color: var(--text-body);
max-width: 52ch;
margin: 1rem 0 0;
font-size: 1.15rem;
line-height: 1.5;
text-align: left;
}
/* Leistungen — typografische Liste + Hover-Bild-Bühne (Muuto-Idiom, Formel A;
User-Entscheid ersetzt das 4-Spalten-Ledger). Die Liste trägt allein
(große Serif-Zeilen, Haarlinien-Trenner), die Bühne rechts crossfadet
beim Hover aufs Bild der Zeile — Modal-Verdrahtung unverändert
(.leistungen-grid + a.leistung bleiben die JS-Hooks von
initServiceDialogs). Mobile <980: Liste pur, Bühne aus. */
.leistungen-split {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 980px) { .leistungen-split { grid-template-columns: 1.05fr 0.95fr; } }
.leistungen-grid { border-top: 1px solid var(--border); }
.leistung-row {
position: relative;
border-bottom: 1px solid var(--border);
}
.leistung {
position: relative;
display: block;
padding: clamp(1.5rem, 2.6vw, 2.1rem) 2.8rem clamp(1.5rem, 2.6vw, 2.1rem) 0;
text-decoration: none;
color: inherit;
}
@media (min-width: 980px) { .leistung { padding-right: 14rem; } } /* Platz: Pill + Mehr-Pfeil */
.leistung h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.7rem, 2.9vw, 2.45rem);
color: var(--text);
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
text-wrap: balance;
transition: opacity 0.45s var(--ease), color 0.45s var(--ease);
}
.leistung p {
color: var(--text-body);
font-size: 0.95rem;
line-height: 1.65;
max-width: 46ch;
text-wrap: pretty;
transition: opacity 0.45s var(--ease);
}
/* Pfeil — rechts mittig, fährt beim Hover ein; unter 980 statisch sichtbar
(Touch hat kein Hover, die Zeile braucht trotzdem eine Affordance) */
.leistung-more {
position: absolute;
right: 0.25rem; top: 50%;
transform: translate(-8px, -50%);
font-size: 0.85rem;
letter-spacing: 0.03em;
color: var(--accent-light);
opacity: 0;
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.leistung-row:hover .leistung-more,
.leistung:focus-visible .leistung-more { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 979px) {
.leistung-more { opacity: 0.6; transform: translate(0, -50%); }
}
/* Cross-Dim auf KINDERN, nie auf .leistung (Transition-Shorthand-Falle);
nur echte Pointer */
@media (hover: hover) and (pointer: fine) {
.leistungen-grid:hover .leistung-row:not(:hover) :is(h3, p) { opacity: 0.4; }
.leistung-row:hover h3 { color: var(--accent-light); }
}
/* Anfragen-Pill — sekundäre Schnell-Aktion pro Zeile (ersetzt den sd-Drawer):
preselektiert den Briefbogen (ob:preselect) und fährt zum Formular. Eigener
Button NEBEN dem (klare Hitzonen-Trennung); Glass-Pill nach Haus-Regel,
Lift ohne translateY (Edge-Bleed-Regel: BG/Border/Shadow statt Transform). */
.leistung-anfragen {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
border-radius: 100px;
padding: 0.45em 1.05em; /* kleiner = sekundär */
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-body); /* leiser als das Akzent-„Mehr →" */
background: linear-gradient(to bottom, rgba(240, 230, 216, 0.05), rgba(240, 230, 216, 0.015));
border: 1px solid rgba(240, 230, 216, 0.11);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: inset 0 1px 0 rgba(240, 230, 216, 0.05); /* KEIN Drop-Shadow — flach, kein Button-Pop */
transition: opacity 0.4s var(--ease), background 0.3s var(--ease),
border-color 0.3s var(--ease), color 0.3s var(--ease);
margin: -0.5rem 0 1.5rem; /* Mobile: statisch unter der Copy, in die a-Padding-Zone gezogen */
}
.leistung-anfragen:hover,
.leistung-anfragen:focus-visible {
color: var(--text);
background: linear-gradient(to bottom, rgba(240, 230, 216, 0.11), rgba(240, 230, 216, 0.04));
border-color: rgba(240, 230, 216, 0.24);
}
@media (min-width: 980px) {
.leistung-anfragen {
position: absolute;
right: 6.5rem; /* links vom Mehr-Pfeil (right: 0.25rem) */
top: 50%;
transform: translateY(-50%); /* statisch — wird nie animiert */
margin: 0;
}
}
/* Desktop mit echtem Pointer: Pill ruht unsichtbar, Zeilen-Hover/Fokus weckt sie —
der Rest-Zustand bleibt reine Typografie. Touch: immer sichtbar. */
@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
.leistung-anfragen { opacity: 0; }
.leistung-row:hover .leistung-anfragen,
.leistung-row:focus-within .leistung-anfragen { opacity: 1; }
}
/* Bühne — einblick-Familie (Radius/Depth/Glass), gestapelte Bilder,
Crossfade rein über opacity: EIN Wert, EIN Easing, KEIN Delay
(Stage-Synchron-Regel). Aktive Ebene z-index 1 gegen Durchblitzen,
Glass-Reflex lokal auf 2 gehoben. JS: initLeistungenBuehne (script.js). */
.leistungen-buehne {
margin: 0;
position: relative;
width: min(100%, 560px);
justify-self: end;
display: none;
}
@media (min-width: 980px) { .leistungen-buehne { display: block; } }
.leistungen-buehne .einblick-img::before { z-index: 2; }
/* Mitfahren (User): die Kachel gleitet vertikal zur gehoverten Zeile —
Transform auf dem INNEREN Element (die Figure trägt das Reveal, zwei
Transforms auf einem Element clobbern sich). JS setzt translateY. */
.leistungen-buehne .einblick-img { transition: transform 0.7s var(--ease); }
/* Radius als Layer-eigene Geometrie — runde Clips versagen auf composited
Kindern während der Fahrt (5j-Lehre) */
.leistungen-buehne .einblick-img img { border-radius: inherit; }
.leistungen-buehne .einblick-img img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
transition: opacity 0.55s var(--ease);
}
.leistungen-buehne .einblick-img img.active { opacity: 1; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.leistungen-buehne .einblick-img img { transition: none; }
}
/* ============================================
Dillis — Schanigarten Highlight (Split + Reel + Werk-Galerie)
============================================ */
.schani-section { position: relative; background: var(--bg); }
.schani-section > .container { position: relative; z-index: 1; }
/* BG: Whisper-Makro-Textur aus dem EIGENEN DWy-Projekt (work-1-Latten-Balustrade,
vorab gecroppt + grayscale gebakt → schani-slats.jpg). Near-abstract Material-Grund
(„vom Schreiner gebaut" wird physisch spürbar) — konkurriert nicht als Foto mit
Reel + Lou-Lou-Inset. Textur-Regel: flüsterleise (0.12), nie die Mitte.
Schichtung: Textur (::before) → Beams → Ghost → Media. Masken: vertikal eased
(stirbt VOR beiden Section-Kanten — fließende Grenzen) ∩ horizontal (fadet zur
Text-Spalte aus; Copy sitzt auf nahezu cleanem Anthrazit). */
.schani-section::before {
content: '';
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
/* Warm statt Grau (User-Entscheid): Lattendach-Schatten im Abendlicht
(image19) — zieht den Teaser in die Atmosphäre der Sub. Whisper-Niveau,
Treppe bei Bedarf: 0.16 / 0.2 / 0.24. */
background: url('images/schani/bg-teaser.jpg') no-repeat center / cover;
filter: saturate(0.9);
opacity: 0.2;
mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 10%, #000 20%, #000 55%, rgba(0,0,0,0.35) 65%, transparent 72%),
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 22%, #000 40%);
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 10%, #000 20%, #000 55%, rgba(0,0,0,0.35) 65%, transparent 72%),
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 22%, #000 40%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
}
/* Beams in der unteren Hälfte — der Grund geht vom (oben ausfadenden) Bild in die
Beam-Atmosphäre der übrigen Seite über. Gleiche Beam-Sprache (--atmo-light, screen). */
.schani-beams {
position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
/* Beams unten in die Seitenfarbe ausfaden → kein harter Clip an der Section-Kante zur Kontakt-Section. */
mask-image: linear-gradient(to bottom, black 0%, black 86%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 86%, transparent 100%);
}
.schani-beam-1 {
top: 20%; left: -10%; transform: rotate(-9deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 28%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 40%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 28%, transparent) 60%,
transparent 100%);
}
.schani-beam-2 {
top: 82%; right: -10%; transform: rotate(11deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 22%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 32%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 22%, transparent) 60%,
transparent 100%);
}
/* Ghost-Wordmark — Masthead der Submarke (gleiche Sprache wie .footer-ghost, re-used
dessen @property --ghost-progress + @keyframes footer-ghost-enter). Die Reel-Oberkante
überlappt die Unterlängen des Worts = Magazin-Masthead-Tiefe. */
.schani-ghost {
position: relative;
z-index: 0;
pointer-events: none;
user-select: none;
white-space: nowrap;
line-height: 0.9;
margin: 0 0 -0.34em;
opacity: 0.045;
}
.schani-ghost span {
font-family: var(--font-serif);
font-size: clamp(3.25rem, 10vw, 8.5rem);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--text);
}
@supports (animation-timeline: view()) {
.schani-section {
animation: footer-ghost-enter linear both;
animation-timeline: view(block);
animation-range: entry 0% cover 42%;
}
.schani-ghost {
opacity: calc(0.06 * var(--ghost-progress));
transform: translateX(calc(-1.25rem * (1 - var(--ghost-progress))));
}
}
@media (prefers-reduced-motion: reduce) {
.schani-ghost { opacity: 0.045 !important; transform: none !important; }
}
/* Terracotta-Micro-Tick vor dem Label — der einzige Farb-Cameo der Seite (Brand-Farbe
der Submarke aus dem Pergola-Logo; Grün bleibt exklusiv den Bildern). */
.schani-text .label::before {
content: '';
display: inline-block;
width: 1.35rem; height: 2px;
background: var(--terra);
vertical-align: middle;
margin: -2px 0.65rem 0 0;
}
.schani-split {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
position: relative;
z-index: 1; /* Split (Reel-Oberkante) überlappt die Ghost-Unterlängen */
}
@media (min-width: 900px) { .schani-split { grid-template-columns: 1fr 1.1fr; } }
.schani-text { max-width: 40rem; }
.schani-text h2 { margin-bottom: 1rem; }
.schani-claim {
font-family: var(--font-serif);
font-style: italic;
color: var(--accent-warm-light);
font-size: clamp(1.15rem, 1.7vw, 1.4rem);
margin-top: 1.25rem;
text-wrap: balance;
}
.schani-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
.schani-links .btn svg { margin-right: 0.55rem; }
/* Reel — Hochformat-Video */
.schani-media-col { justify-self: center; width: 100%; max-width: 520px; }
@media (min-width: 900px) { .schani-media-col { justify-self: end; } }
.schani-media { position: relative; width: 100%; }
.schani-reel {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center 62%; /* schneidet Fremd-Banner „Bauen mit Werten" + Himmel oben */
display: block;
border-radius: var(--r-card);
background: var(--bg-surface);
box-shadow: var(--depth-rest), 0 0 55px var(--accent-10);
}
.schani-media::before {
content: '';
position: absolute; inset: 0;
border-radius: var(--r-card);
background: var(--glass-highlight);
pointer-events: none;
z-index: 1;
}
.schani-media-tag {
position: absolute;
top: 0.9rem; right: 0.9rem; left: auto; bottom: auto;
z-index: 2;
font-family: var(--font-sans);
font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text);
padding: 0.35rem 0.7rem;
background: color-mix(in oklch, var(--bg) 60%, transparent);
/* Lesbarkeits-Reserve auf hellen Foto-Zonen (Lou-Lou-Markise, Lärche) —
gleicher Frost wie die Editorial-Variante */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: var(--r-btn);
}
/* Fertig-Ergebnis-Inset — unten links, Anthrazit-Passepartout, obere Schicht = kräftigerer Schatten */
.schani-inset {
position: absolute;
left: -1.15rem; bottom: -1.35rem;
width: clamp(118px, 34%, 172px);
margin: 0;
aspect-ratio: 3 / 4;
border-radius: calc(var(--r-card) - 4px); /* eine Spur enger als das Video (18px) — verschachtelte Ecken wirken konzentrisch */
overflow: hidden;
border: 6px solid var(--bg); /* seitenfarbenes Passepartout = kein Sticker-Look, trennt Grün von Grün */
background: var(--bg);
background-clip: padding-box;
box-shadow: var(--depth-hover), inset 0 0 0 1px var(--border);
z-index: 3; /* über Video (0), Video-Glass ::before (1), Badge (2) */
}
.schani-inset::before { /* eigener Glass-Reflex, nicht der des Videos */
content: '';
position: absolute; inset: 0;
border-radius: calc(var(--r-card) - 4px);
background: var(--glass-highlight);
pointer-events: none;
z-index: 1;
}
.schani-inset img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 45%; /* nach Datei-Recrop (616×776) nachjustiert */
display: block;
position: relative; z-index: 0;
transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
/* Ein Beat NACH dem Video — .reveal wiederverwenden, nur Delay ergänzen (nie transition-Shorthand → würde Reveal killen) */
.schani-inset.reveal { transition-delay: 0.4s; }
/* Hover: kein translateY — nur Schatten vertiefen + zentriertes Inner-Scale/Filter */
.schani-media:hover .schani-reel { box-shadow: var(--depth-hover), var(--depth-glow); }
.schani-media:hover .schani-inset { box-shadow: var(--depth-hover), var(--depth-glow), inset 0 0 0 1px var(--border); }
.schani-inset:hover img { transform: scale(1.04); filter: brightness(1.05) saturate(1.04); }
/* Eine leise Haarlinien-Caption — ersetzt die komplette gelöschte Galerie */
.schani-media-cap {
margin: 0.9rem 0 0;
text-align: right;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--text-muted);
text-wrap: balance;
}
/* Mobile (<=767px, wie der ig-preview-Breakpoint): Inset aus der Kollisionszone —
statisch unter die rechte untere Video-Kante tucken, nie ein Corner-Crush */
@media (max-width: 767px) {
.schani-inset {
position: relative;
left: auto; bottom: auto;
width: 56%;
margin: -2.2rem 0 0 auto;
border-width: 5px;
border-radius: calc(var(--r-card) - 4px);
}
.schani-media-cap { text-align: left; }
}
/* Instagram-Hover-Preview */
.ig-preview-wrap { position: relative; display: inline-flex; }
.ig-preview {
position: absolute;
bottom: calc(100% + 0.85rem);
left: 0;
width: 320px;
padding: 1.05rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
background: var(--bg-surface-2);
border: 1px solid var(--border);
border-radius: var(--r-card);
box-shadow: var(--depth-hover), 0 0 40px rgba(0,0,0,0.35);
opacity: 0;
transform: translateY(8px) scale(0.98);
transform-origin: bottom left;
pointer-events: none;
z-index: 50;
transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.ig-preview-wrap:hover .ig-preview,
.ig-preview-wrap:focus-within .ig-preview { opacity: 1; transform: translateY(0) scale(1); }
.ig-preview::after {
content: '';
position: absolute; top: 100%; left: 2.2rem;
border: 7px solid transparent;
border-top-color: var(--bg-surface-2);
}
.ig-preview-head { display: flex; align-items: center; gap: 0.6rem; }
.ig-preview-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ig-preview-id strong { font-family: var(--font-sans); font-weight: 500; font-size: 0.92rem; color: var(--text); letter-spacing: 0; }
.ig-preview-name { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ig-preview-glyph { color: var(--text-muted); flex-shrink: 0; }
/* Echtes Feed-Grid 3×2: Reihe 1 = Logo-Triptychon (setzt sich mit 2px Gap nahtlos
zusammen wie auf Instagram), Reihe 2 = echte Reel-Cover. 3:4 = reales IG-Grid-Format;
Radius NUR auf dem Container (Single-Clip-Strategy). */
.ig-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-radius: calc(var(--r-card) - 4px); overflow: hidden; }
.ig-preview-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ig-preview-cta { font-size: 0.78rem; color: var(--accent-light); letter-spacing: 0.02em; border-top: 1px solid var(--border); padding-top: 0.75rem; }
@media (max-width: 767px) { .ig-preview { display: none; } }
/* ============================================
Rechtsseiten (Impressum / Datenschutz) — still, typografisch
============================================ */
.legal-main {
padding: calc(clamp(4.5rem, 8vw, 7rem) + 72px) 0 clamp(4rem, 8vw, 7rem);
background: var(--bg);
}
.legal-head { max-width: 46rem; margin: 0 auto clamp(2.2rem, 4vw, 3.2rem); }
.legal-head .label { display: block; margin-bottom: 0.9rem; }
.legal-head h1 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text);
}
.legal-body { max-width: 46rem; margin: 0 auto; }
.legal-body h2 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
letter-spacing: -0.01em;
color: var(--text);
margin: clamp(2rem, 3.4vw, 2.8rem) 0 0.7rem;
}
.legal-body p { color: var(--text-body); line-height: 1.7; margin-bottom: 0.9rem; text-wrap: pretty; }
.legal-body a { color: var(--accent-light); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.3s var(--ease); }
.legal-body a:hover { text-decoration-color: var(--accent-light); }
.legal-stand { margin-top: clamp(2rem, 3.4vw, 2.8rem); font-size: 0.85rem; color: var(--text-muted); }
/* ============================================
Stimmen — Google-Evidenz vor dem Kontakt
============================================ */
.stimmen-section { position: relative; background: var(--bg); }
.stimmen-section > .container { position: relative; z-index: 1; }
/* Beam ÜBER der Rezension (User-Wunsch) — quert die Zitat-Bühne diagonal,
whisper-Level, stirbt via eased Mask VOR beiden Section-Kanten (fließende
Grenzen: oben aus dem Schanigarten-Ausklang, unten vor dem stillen Kontakt). */
.stimmen-beams {
position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0, 0, 0, 0.15) 12%,
rgba(0, 0, 0, 0.55) 24%,
#000 34%,
#000 66%,
rgba(0, 0, 0, 0.45) 80%,
rgba(0, 0, 0, 0.12) 90%,
transparent 96%);
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0, 0, 0, 0.15) 12%,
rgba(0, 0, 0, 0.55) 24%,
#000 34%,
#000 66%,
rgba(0, 0, 0, 0.45) 80%,
rgba(0, 0, 0, 0.12) 90%,
transparent 96%);
}
.stimmen-beam {
top: 46%; left: -10%; transform: rotate(-7deg);
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--atmo-light) 24%, transparent) 40%,
color-mix(in srgb, var(--atmo-light) 34%, transparent) 50%,
color-mix(in srgb, var(--atmo-light) 24%, transparent) 60%,
transparent 100%);
}
.stimmen-head { text-align: center; }
.stimmen-head .label { display: block; }
.stimmen-head h2 { margin-bottom: 1rem; }
.stimmen-head h2 em { color: var(--accent-warm-light); }
/* Rating-Zeile — EIN Google-Link, horizontal zentriert (Zimmerhackl-Anatomie).
Amber-Sterne + 4-Farb-G = die einzigen bewussten Fremdfarben (Echtheits-Trigger). */
.stimmen-rating {
display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
gap: 0.55rem;
margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem);
font-size: 0.95rem; color: var(--text-muted); letter-spacing: 0.04em;
text-decoration: none;
}
.stimmen-g { flex: 0 0 auto; display: block; }
.stimmen-stars { color: #FBBC04; letter-spacing: 0.1em; }
.stimmen-rating-num { color: var(--text); }
/* „Alle Bewertungen auf Google" inline, per Haarlinie abgesetzt; Unterstrich beim Hover */
.stimmen-rating-link {
margin-left: 0.35rem; padding-left: 0.9rem;
border-left: 1px solid color-mix(in oklch, var(--text-muted) 30%, transparent);
font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-muted);
text-decoration-line: underline; text-decoration-color: transparent;
text-decoration-thickness: 1px; text-underline-offset: 4px;
transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.stimmen-rating:hover .stimmen-rating-link,
.stimmen-rating:focus-visible .stimmen-rating-link {
color: var(--accent-light); text-decoration-color: var(--accent-light);
}
/* Fade-Bühne — alle Zitate in derselben Grid-Zelle gestapelt, Auto-Crossfade.
Weicher, ruhiger Crossfade (1.5s ease-in-out) statt expo-out — dezentes
Auf-/Abblenden, passend zum edlen Charakter. Die Bühne trägt .reveal,
die Zitate NICHT → keine Transition-Shorthand-Kollision. */
.stimmen-stage {
display: grid;
margin-top: clamp(2.2rem, 4vw, 3.4rem);
}
.stimmen-quote {
grid-area: 1 / 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: clamp(1.3rem, 2.2vw, 1.9rem);
text-align: center; text-decoration: none;
opacity: 0; pointer-events: none;
cursor: pointer;
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.stimmen-quote.is-active { opacity: 1; pointer-events: auto; }
.stimmen-quote-text {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.35rem, 2.2vw, 2rem);
line-height: 1.5;
letter-spacing: 0.005em;
color: var(--text-body);
max-width: 52ch;
text-wrap: balance;
}
.stimmen-quote-foot { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.stimmen-quote-author {
font-size: 1rem; color: var(--text);
letter-spacing: 0.01em;
transition: color 0.3s var(--ease);
}
.stimmen-quote-author::before { content: "– "; }
.stimmen-quote-date { font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.02em; }
.stimmen-quote:hover .stimmen-quote-author { color: var(--accent-light); }
@media (prefers-reduced-motion: reduce) {
.stimmen-quote { transition: none; }
}
/* ============================================
Dillis — Kontakt-Sektor „Briefbogen" (dunkel adaptiert von Zimmerhackl)
Mehrstufig, Tiles→Chips→Underline-Felder, Branching, Direkt-Kontakt-Cards.
============================================ */
.container--narrow { max-width: 50rem; }
.kontakt-teaser { position: relative; }
/* Section-Kopf über dem Blatt */
.kontakt-form-head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.kontakt-form-head .label { display: block; margin-bottom: clamp(0.9rem, 1.6vw, 1.1rem); }
.kontakt-form-head h2 { margin-bottom: 1rem; }
.kontakt-form-intro { color: var(--text-body); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; max-width: 40rem; margin-inline: auto; }
/* Das Blatt — Surface-Card mit Depth + Glass auf Anthrazit */
.ob-form-wrapper {
position: relative; isolation: isolate;
max-width: 40rem; margin: 0 auto;
padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
background: var(--bg-surface-2);
backdrop-filter: none; -webkit-backdrop-filter: none;
border: 1px solid var(--border);
border-radius: var(--r-card);
box-shadow: var(--depth-rest);
overflow: hidden;
}
.ob-form-wrapper::before { content: ''; position: absolute; inset: 0; background: var(--glass-highlight); pointer-events: none; z-index: 1; border-radius: inherit; }
/* Briefbogen-Strich oben links (kein Logo) */
.ob-form-wrapper::after { content: ''; position: absolute; top: 0; left: clamp(1.5rem, 3vw, 3rem); width: 2.4rem; height: 2px; background: var(--accent); opacity: 0.7; z-index: 3; }
.ob-form-wrapper > * { position: relative; z-index: 2; }
/* Progress — editorial */
.ob-progress { display: flex; justify-content: center; align-items: center; gap: 0.55rem; margin-bottom: clamp(1.6rem, 2.6vw, 2.3rem); font-family: var(--font-sans); font-size: clamp(0.7rem, 1vw, 0.78rem); letter-spacing: 0.16em; text-transform: uppercase; }
.ob-progress-step { color: var(--text-muted); padding-bottom: 0.32rem; border-bottom: 1px solid transparent; transition: color 0.32s var(--ease), border-color 0.32s var(--ease); }
.ob-progress-step.is-active { color: var(--accent-light); border-bottom-color: var(--accent); }
.ob-progress-step.is-done { color: var(--accent); }
.ob-progress-sep { color: var(--text-muted); opacity: 0.5; }
.ob-progress-step[hidden], .ob-progress-sep[hidden] { display: none; }
/* Steps — Nebel-Cross-Dissolve (portiert von ZimmerhacklV2).
Der alte Step overlayt absolut und löst sich in Nebel auf (Blur + Fade), der neue
materialisiert daraus; die Container-Höhe gleitet oldH→newH darunter, komplett vom
Nebel überdeckt — so verschwimmt der Höhen-Wechsel UND das Einwachsen der Zurück-Leiste,
statt hart zu poppen. KEIN translateY (würde im overflow:hidden die Unterkante an der
Clip-Linie abschneiden) — die Bewegung kommt rein aus Blur + Fade. */
:root { --ob-step-dur: 0.46s; --ob-step-ease: cubic-bezier(0.4, 0, 0.2, 1); }
.ob-steps { position: relative; overflow: hidden; transition: height var(--ob-step-dur) var(--ob-step-ease); }
.ob-step {
display: none; opacity: 0; filter: blur(5px);
transition: opacity var(--ob-step-dur) var(--ob-step-ease),
filter var(--ob-step-dur) var(--ob-step-ease);
}
.ob-step.is-active { display: block; }
.ob-step.is-visible { opacity: 1; filter: blur(0); }
/* Ausgehender Step: absolut overlayen + in Nebel auflösen — der neue materialisiert im
selben Moment daraus (Cross-Dissolve, kein Blank-Frame). */
.ob-step.is-leaving {
position: absolute; top: 0; left: 0; right: 0;
opacity: 0; filter: blur(5px); pointer-events: none;
transition: opacity var(--ob-step-dur) var(--ob-step-ease),
filter var(--ob-step-dur) var(--ob-step-ease);
}
@media (prefers-reduced-motion: reduce) {
.ob-steps { transition: none; }
.ob-step, .ob-step.is-leaving { transition: none; filter: none; }
.ob-nav { transition: none; }
}
.ob-question { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 400; color: var(--text); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 clamp(1.2rem, 2vw, 1.6rem); text-align: center; }
/* Tiles — 2-Optionen-Steps mit Titel + Beschreibung */
.ob-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.ob-tile {
display: flex; flex-direction: column; gap: 0.3rem; text-align: left;
padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.4rem);
border-radius: var(--r-btn);
background: linear-gradient(to bottom, rgba(240,230,216,0.06), rgba(240,230,216,0.02));
border: 1px solid rgba(240,230,216,0.15);
backdrop-filter: blur(12px);
cursor: pointer;
transition: background 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.ob-tile:hover { border-color: var(--accent-30); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.ob-tile.is-selected {
background: linear-gradient(to bottom, var(--accent-20), var(--accent-06));
border-color: var(--accent);
box-shadow: inset 0 1px 0 rgba(240,230,216,0.10), 0 6px 20px rgba(0,0,0,0.30);
}
.ob-tile-title { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text); }
.ob-tile.is-selected .ob-tile-title { color: var(--accent-light); }
.ob-tile-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 460px) { .ob-tiles { grid-template-columns: 1fr; } }
/* Chips — 3+ Optionen */
.ob-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.ob-chip {
font-family: var(--font-sans); font-size: 0.92rem; color: var(--text);
padding: 0.7rem 1.3rem; border-radius: var(--r-btn);
background: linear-gradient(to bottom, rgba(240,230,216,0.06), rgba(240,230,216,0.02));
border: 1px solid rgba(240,230,216,0.15);
backdrop-filter: blur(12px); cursor: pointer;
transition: background 0.32s var(--ease), border-color 0.32s var(--ease), color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.ob-chip:hover { border-color: var(--accent-30); }
.ob-chip.is-selected {
background: linear-gradient(to bottom, var(--accent-20), var(--accent-06));
border-color: var(--accent); color: var(--accent-light);
box-shadow: inset 0 1px 0 rgba(240,230,216,0.10), 0 3px 12px rgba(0,0,0,0.30);
}
/* Branching-Hint */
.ob-einzel-hint {
margin: 0 0 clamp(1rem, 1.8vw, 1.4rem); padding: 0.8rem 1rem;
border-left: 2px solid var(--accent); background: var(--accent-06);
border-radius: 0 var(--r-btn) var(--r-btn) 0; font-size: 0.9rem; color: var(--text-body); line-height: 1.5; text-align: left;
}
.ob-einzel-hint[hidden] { display: none; }
/* Felder — Underline-Inputs + Floating Label + Line-Draw */
.ob-fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 2rem); }
.ob-field { position: relative; display: block; }
.ob-field--full { grid-column: 1 / -1; }
.ob-field input, .ob-field textarea {
width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--text);
background: transparent; border: none; border-bottom: 1px solid rgba(240,230,216,0.20);
border-radius: 0; padding: 0.5rem 0 0.55rem; transition: border-color 0.32s var(--ease);
}
.ob-field textarea { resize: none; line-height: 1.55; display: block; } /* block: killt den inline-block-Baseline-Spalt (~7px) — sonst sitzt die ::after-Fokuslinie tiefer als die graue Grundlinie */
.ob-field input:focus, .ob-field textarea:focus { outline: none; }
.ob-field::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.ob-field:focus-within::after { transform: scaleX(1); }
.ob-field-label {
position: absolute; left: 0; top: 0.5rem; font-family: var(--font-sans); font-size: 1rem;
color: var(--text-muted); pointer-events: none; transform-origin: left;
transition: transform 0.32s var(--ease), color 0.32s var(--ease);
}
.ob-field:focus-within .ob-field-label,
.ob-field:has(input:not(:placeholder-shown)) .ob-field-label,
.ob-field:has(textarea:not(:placeholder-shown)) .ob-field-label {
transform: translateY(-1.45em) scale(0.78); color: var(--accent-light);
}
.ob-opt { color: var(--text-muted); font-size: 0.85em; }
@media (max-width: 600px) { .ob-fields { grid-template-columns: 1fr; } }
.ob-trust { margin: clamp(1.3rem, 2.2vw, 1.7rem) 0 0; font-size: 0.82rem; color: var(--text-muted); text-align: center; letter-spacing: 0.02em; }
.ob-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Nav — wächst beim Step 1→2 sanft ein (max-height + opacity + margin-top synchron zum
Nebel), statt hart zu poppen. display:flex überschreibt das HTML-[hidden] bewusst. */
.ob-nav {
display: flex; align-items: center; gap: 1rem;
max-height: 0; margin-top: 0; opacity: 0; overflow: hidden;
transition: max-height var(--ob-step-dur) var(--ob-step-ease),
margin-top var(--ob-step-dur) var(--ob-step-ease),
opacity var(--ob-step-dur) var(--ob-step-ease);
}
.ob-nav.is-shown { max-height: 6rem; margin-top: clamp(1.6rem, 2.6vw, 2.2rem); opacity: 1; }
.ob-nav-spacer { flex: 1; }
.ob-back { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0.5rem 0; transition: color 0.32s var(--ease); }
.ob-back:hover { color: var(--accent-light); }
.ob-back[hidden] { display: none; }
.ob-submit[hidden] { display: none; }
/* Success */
.ob-success { display: block; text-align: center; padding: clamp(1rem, 2vw, 2rem) 0; }
.ob-success[hidden] { display: none; }
.ob-success-mark { display: block; width: 2.4rem; height: 2px; margin: 0 auto 1.4rem; background: var(--accent); opacity: 0.8; }
.ob-success-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 400; color: var(--text); margin: 0 0 0.6rem; }
.ob-success-text { color: var(--text-body); font-size: 1.05rem; line-height: 1.6; margin: 0; }
/* Direkt-Kontakt-Cards */
.ob-contact-cards { display: grid; grid-template-columns: 1fr; gap: 0.85rem; max-width: 40rem; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; }
@media (min-width: 640px) { .ob-contact-cards { grid-template-columns: repeat(3, 1fr); } }
.kontakt-card {
position: relative; display: flex; flex-direction: column; gap: 0.25rem;
padding: 1.1rem 1.2rem; background: var(--bg-surface); border: 1px solid var(--border);
border-radius: var(--r-card); box-shadow: var(--depth-rest); text-decoration: none; overflow: hidden;
transition: border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.kontakt-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-highlight); pointer-events: none; }
.kontakt-card:hover { border-color: var(--accent-30); box-shadow: var(--depth-hover); }
.kontakt-card > * { position: relative; z-index: 1; }
.kontakt-card-label { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.kontakt-card-value { font-family: var(--font-serif); font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: var(--text); overflow-wrap: anywhere; }
/* Im 3er-Grid unter dem Formular (max-width 40rem) sind die Cards ~200px schmal —
lange Werte (innenausbau@dillis.de, @schanigarten.allgaeu) brächen sonst mid-word. */
@media (min-width: 640px) { .ob-contact-cards .kontakt-card-value { font-size: 0.9rem; } }
.kontakt-card-meta { font-size: 0.78rem; color: var(--text-muted); }
/* Shake */
.ob-shake { animation: ob-shake 0.4s var(--ease); }
@keyframes ob-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(2px)} }
/* Autofill-Override — Form-BG matchen */
.ob-form input:-webkit-autofill,
.ob-form input:-webkit-autofill:hover,
.ob-form input:-webkit-autofill:focus,
.ob-form textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--bg-surface-2) inset !important;
-webkit-text-fill-color: var(--text) !important;
caret-color: var(--text);
transition: background-color 5000s ease-in-out 0s;
}
/* ============================================
SUBPAGE-FAMILIE „Kapitel-Seiten“ — Leistungs-Subpages
(innenausbau, planung, corianverarbeitung, holzfussboeden)
Anthrazit-Retokenisierung + neue Typo-Komponenten.
Ans ENDE von style.css anhängen — nutzt nur bestehende Tokens.
============================================ */
/* --- 1) Typografischer Subpage-Hero (kein Foto — der atmo-wrap liefert den Grund) --- */
.subpage-hero--typo {
min-height: clamp(420px, 58vh, 640px);
background: transparent; /* Beams + Partikel des Wraps scheinen durch */
isolation: auto; /* Basis hat isolate — Isolation-Falle: würde den atmo-lean-Glow (screen) kappen */
}
.subpage-hero--typo .container { width: 100%; } /* Flex-Shrink-Falle: Container im Flex-Parent */
.subpage-hero--typo .subpage-hero-content {
padding-top: 9rem;
padding-bottom: clamp(3rem, 7vh, 5.5rem);
}
/* Radial-Blur hinter dem Label ist nur für Foto-Heroes nötig */
.subpage-hero--typo .subpage-hero-content .label::before { content: none; }
.subpage-hero--typo .subpage-hero-content h1 {
font-size: clamp(2.6rem, 6vw, 5rem);
letter-spacing: -0.02em;
margin-bottom: 1.1rem;
max-width: 16ch;
}
.subpage-hero--typo .subpage-hero-content > p {
color: var(--text-body); /* statt Spangler-Cream */
font-size: clamp(1rem, 1.3vw, 1.15rem);
max-width: 55ch;
}
@media (max-width: 767px) {
/* Label darf wrappen — „Leistung 02 · Planung und Gestaltung“ passt sonst nicht */
.subpage-hero--typo .subpage-hero-content .label { white-space: normal; }
}
/* --- 2) Back-Pills: Cream-Reste → Anthrazit-Token (Override, gleiche Klassen) --- */
.area-back {
background: linear-gradient(to bottom, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
border: 1px solid var(--border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(0,0,0,0.18);
color: var(--text-body);
}
.service-back-floating {
background: linear-gradient(to bottom, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
border: 1px solid rgba(255,255,255,0.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px rgba(0,0,0,0.25);
color: var(--text-body);
}
.area-back:hover,
.service-back-floating:hover { color: var(--text); }
/* Hover-BG/-Border bleiben aus den Bestandsregeln (nutzen bereits var(--accent)) */
/* --- 3) Ledger — typografische Haarlinien-Liste (Register, Bauteile) --- */
.ledger { border-top: 1px solid var(--border); }
.ledger li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 1.05rem 0;
border-bottom: 1px solid var(--border-light);
}
.ledger-term {
font-family: var(--font-serif);
font-size: clamp(1.25rem, 1.9vw, 1.65rem);
color: var(--text);
letter-spacing: -0.01em;
/* Transition auf dem KIND, nie auf dem (ggf. reveal-tragenden) Container */
transition: color 0.4s var(--ease), opacity 0.4s var(--ease);
}
.ledger-num {
font-size: 11px;
letter-spacing: 0.14em;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
.ledger:hover li:not(:hover) .ledger-term { opacity: 0.45; }
.ledger li:hover .ledger-term { color: var(--accent-light); }
}
/* --- 4) Register — zweispaltiges Leistungsverzeichnis (innenausbau) --- */
.register {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.8rem, 5vw, 4.5rem);
}
@media (min-width: 860px) { .register { grid-template-columns: 1fr 1fr; } }
.register-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.1rem;
}
.register-title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 2.4vw, 2rem);
color: var(--text);
}
.register-scope {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
text-align: right;
}
.register-more {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 1.5rem;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
transition: color 0.3s var(--ease);
}
.register-more::after { content: '\2192'; transition: transform 0.3s var(--ease); }
.register-more:hover { color: var(--accent-hover); }
.register-more:hover::after { transform: translateX(4px); }
/* --- 5) Einblick-Figuren — kleine, gegradete Projekt-Fenster --- */
.section--tight { padding: clamp(3rem, 5vw, 5.5rem) 0; }
.einblick-strip {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
@media (min-width: 700px) { .einblick-strip { grid-template-columns: repeat(3, 1fr); } }
.einblick { margin: 0; }
.einblick-img {
position: relative;
border-radius: var(--r-card);
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: var(--depth-rest);
}
.einblick-img::before {
content: '';
position: absolute; inset: 0;
background: var(--glass-highlight);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.einblick-img--wide { aspect-ratio: 16 / 8; }
.einblick-img img {
width: 100%; height: 100%;
object-fit: cover;
/* 2017-/Phone-Shots Richtung Anthrazit graden — die Dunkelheit der Seite
kaschiert die Sensor-Schwächen. Base-Werte explizit (discrete-filter-Falle). */
filter: saturate(0.91) brightness(0.93);
/* Kein translateY-Hover (Sub-Pixel Edge-Bleed) — Lift über scale + filter */
transition: filter 0.6s var(--ease), transform 0.9s var(--ease);
}
.einblick:hover .einblick-img img {
filter: saturate(0.94) brightness(0.97);
transform: scale(1.035);
}
.einblick figcaption {
margin-top: 0.7rem;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Editorial-Bild-Varianten für die Subpage-Intros */
.editorial-img--portrait { aspect-ratio: 4 / 5; max-width: 480px; justify-self: center; }
@media (min-width: 768px) { .editorial-img--portrait { justify-self: end; } }
.editorial-img--grade img { filter: saturate(0.94) brightness(0.94); }
/* --- 6) Term-Band — offenes Typo-Band, 3 Spalten (Material, Eigenschaften) --- */
.term-band {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--border-light);
}
@media (min-width: 760px) { .term-band { grid-template-columns: repeat(3, 1fr); } }
.term-item { position: relative; padding: clamp(1.5rem, 2.6vw, 2.2rem) 0; }
.term-item + .term-item { border-top: 1px solid var(--border-light); }
@media (min-width: 760px) {
.term-item { padding-right: clamp(1.4rem, 2.4vw, 2.2rem); }
.term-item + .term-item { border-top: none; padding-left: clamp(1.4rem, 2.4vw, 2.2rem); }
.term-item + .term-item::before {
content: '';
position: absolute;
left: 0; top: 0.5rem; bottom: 0.5rem;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--border), transparent);
}
}
.term-word {
display: block;
font-family: var(--font-serif);
/* Sentence-Case, one-line-fit geprüft („Nachbearbeitbar“, „Holzwerkstoffe“) */
font-size: clamp(1.4rem, 1.9vw, 1.75rem);
color: var(--text);
letter-spacing: -0.01em;
}
.term-desc {
margin-top: 0.55rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-body);
max-width: 34ch;
}
.term-band-note {
margin-top: clamp(1.4rem, 2.4vw, 2rem);
color: var(--text-body);
max-width: 55ch;
}
/* --- 7) Prozess-Rail — vertikale Strecke 01–04 (planung) --- */
.prozess-split {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 5vw, 5rem);
align-items: start;
}
@media (min-width: 980px) {
.prozess-split { grid-template-columns: 1.1fr 0.85fr; }
/* sticky funktioniert: atmo-wrap nutzt overflow:clip (kein Scrollport) */
.prozess-figure { position: sticky; top: clamp(96px, 14vh, 150px); }
}
.prozess-rail {
position: relative;
display: grid;
gap: clamp(2.6rem, 4.5vw, 3.8rem);
padding-left: clamp(1.8rem, 3.5vw, 3rem);
}
.prozess-rail::before {
content: '';
position: absolute;
left: 0; top: 0.5rem; bottom: 0.5rem;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--accent-30) 10%, var(--accent-30) 90%, transparent);
transform-origin: top;
}
@supports (animation-timeline: view()) {
@keyframes prozess-rail-draw {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
.prozess-rail::before {
animation: prozess-rail-draw linear both;
animation-timeline: view();
animation-range: entry 15% cover 65%;
}
}
.prozess-station {
display: grid;
grid-template-columns: auto 1fr;
column-gap: clamp(1.3rem, 2.6vw, 2.2rem);
align-items: start;
}
.prozess-num {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 4.6vw, 3.6rem);
line-height: 1;
letter-spacing: -0.02em;
/* Lesbarer Ghost, dark-invertiert — Präsenz über Größe, Ton bleibt leise.
Wirkt's leer → 65%, wirkt's laut → 52%. */
color: color-mix(in oklch, var(--accent) 58%, var(--bg));
min-width: 2ch;
font-variant-numeric: tabular-nums;
}
.prozess-station h3 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); margin-bottom: 0.45rem; }
.prozess-station p { color: var(--text-body); max-width: 48ch; }
.prozess-figure { margin: 0; }
.prozess-figure figcaption {
margin-top: 0.7rem;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
/* --- 8) Statement — zentrierter Serif-Moment (EXKLUSIV planung) --- */
.statement { text-align: center; max-width: 52rem; margin: 0 auto; }
.statement-mark {
display: block;
width: 2.4rem; height: 2px;
margin: 0 auto 1.9rem;
background: var(--accent);
opacity: 0.7; /* Echo des Form-Accent-Ticks — Familien-Chrome */
}
.statement-quote {
font-family: var(--font-serif);
font-size: clamp(1.65rem, 3.3vw, 2.7rem);
line-height: 1.28;
letter-spacing: -0.012em;
color: var(--text);
text-wrap: balance;
}
/* --- 9) Werk-Kette — horizontale 4er-Kette (corian; bewusst andere Achse als die Rail) --- */
.werk-kette {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--border-light);
}
@media (min-width: 860px) { .werk-kette { grid-template-columns: repeat(4, 1fr); } }
.kette-step { position: relative; padding: clamp(1.6rem, 2.8vw, 2.4rem) 0; }
.kette-step + .kette-step { border-top: 1px solid var(--border-light); }
@media (min-width: 860px) {
.kette-step { padding-right: clamp(1.2rem, 2vw, 1.8rem); }
.kette-step + .kette-step { border-top: none; padding-left: clamp(1.2rem, 2vw, 1.8rem); }
.kette-step + .kette-step::before {
content: '';
position: absolute;
left: 0; top: 0.5rem; bottom: 0.5rem;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--border), transparent);
}
}
.kette-num {
display: block;
font-family: var(--font-serif);
font-size: clamp(1.9rem, 3vw, 2.6rem);
line-height: 1;
color: color-mix(in oklch, var(--accent) 58%, var(--bg));
font-variant-numeric: tabular-nums;
margin-bottom: 0.75rem;
}
.kette-step h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin-bottom: 0.45rem; }
.kette-step p {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-body);
max-width: 30ch;
}
/* --- 10) Boden-Spread — Typen-Triptychon + kompakte Kette (holzfussboeden) --- */
.boden-spread {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 6vw, 5rem);
align-items: start;
}
@media (min-width: 900px) { .boden-spread { grid-template-columns: 0.95fr 1.05fr; } }
.boden-typen { border-top: 1px solid var(--border); }
.boden-typen li {
padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
border-bottom: 1px solid var(--border-light);
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.1rem); /* „Landhausdielen“ one-line geprüft */
line-height: 1.05;
letter-spacing: -0.015em;
color: color-mix(in oklch, var(--accent) 62%, var(--bg));
white-space: nowrap;
}
.boden-kette { border-top: 1px solid var(--border); }
.boden-station {
display: grid;
grid-template-columns: auto 1fr;
column-gap: clamp(1.1rem, 2vw, 1.6rem);
align-items: baseline;
padding: clamp(1.1rem, 2vw, 1.5rem) 0;
border-bottom: 1px solid var(--border-light);
}
.boden-num {
font-family: var(--font-serif);
font-size: 1.35rem;
color: color-mix(in oklch, var(--accent) 58%, var(--bg));
font-variant-numeric: tabular-nums;
}
.boden-station h3 { display: inline; font-size: 1.1rem; margin-right: 0.5rem; }
.boden-station p { display: inline; color: var(--text-body); font-size: 0.98rem; }
.boden-figure { margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; }
/* --- 11) Werk-Band — Zahlen-Ledger, gemeinsamer Trust-Beat aller Subpages.
Offenes Typo-Band: kein Glass, kein Depth, kein Hover (Display-only). --- */
.werk-band h2 { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.werk-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border-light);
padding-top: clamp(2rem, 3.2vw, 3rem);
}
.werk-item { position: relative; padding-inline: clamp(1.25rem, 2.5vw, 2.5rem); }
.werk-item:first-child { padding-left: 0; }
.werk-item + .werk-item::before {
content: '';
position: absolute;
left: 0; top: 0.35rem; bottom: 0.35rem;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--border), transparent);
}
.werk-num {
display: block;
font-family: var(--font-serif);
font-size: clamp(1.9rem, 3.6vw, 3.2rem);
line-height: 1;
letter-spacing: -0.02em;
white-space: nowrap; /* One-line-Fit-Pflicht („1350 m²“) */
color: color-mix(in oklch, var(--accent) 62%, var(--bg));
margin-bottom: 0.6rem;
}
.werk-desc {
display: block;
font-size: 13px;
letter-spacing: 0.04em;
line-height: 1.5;
color: var(--text-muted);
max-width: 24ch;
}
@media (max-width: 860px) {
.werk-row { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }
.werk-item:nth-child(odd) { padding-left: 0; }
.werk-item:nth-child(3)::before { display: none; } /* Haarlinien nur innerhalb einer Zeile */
}
/* --- 12) CTA-Final — typografischer Abspann → index.html#kontakt --- */
.cta-final {
position: relative;
text-align: center;
padding: clamp(5rem, 8vw, 9rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}
.cta-final::after {
/* Accent-Haarlinie = Grenze Content → Abspann (gleiches Device wie .footer-top).
Auf ::after umgezogen — ::before gehört jetzt dem section-photo-Grund. */
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(to right, transparent, var(--accent), transparent);
opacity: 0.3;
}
.cta-final .label { margin-bottom: 1.1rem; }
.cta-final h2 { margin-bottom: 2.2rem; margin-inline: auto; max-width: 22ch; }
.cta-final-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.4rem;
}
.cta-final-phone {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2vw, 1.45rem);
color: var(--text-muted);
transition: color 0.3s var(--ease);
}
.cta-final-phone:hover { color: var(--accent-light); }
@media (max-width: 460px) {
.cta-final-actions .btn { width: 100%; justify-content: center; }
}
/* --- 13) Referenz-Galerien (referenzen.html) — einblick-Kacheln + Lightbox --- */
.ref-galerie {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
@media (min-width: 700px) { .ref-galerie { grid-template-columns: repeat(3, 1fr); } }
.einblick[data-lb-src] { cursor: pointer; }
.einblick[data-lb-src]:focus-visible { outline: 2px solid var(--accent-30); outline-offset: 3px; border-radius: var(--r-card); }
/* Video-Kachel (Ladenbau-Reel) — gleiche Bühne wie die Bild-Einblicke */
.einblick-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- 15) Leistungs-Detail-Modal (sd): AUSGEBAUT — die Zeilen der Leistungs-
Liste navigieren direkt zu den Kapitel-Seiten (Brücken-Umbau). --- */
/* ============================================
SCHANIGARTEN-SUB (schanigarten.html)
Kapitel-Familie-Chrome unberührt — alles page-scoped (body.schani-sub)
plus zwei generische Mini-Erweiterungen (Video im Editorial).
MONOCHROM (User-Entscheid): Terra ist von der Copy runter — die Sub
spricht typografisch dieselbe Platin-Sprache wie die Familie. Terra
lebt nur noch im Index-Teaser-Tick + in Fotos/Videos, Grün NUR in Fotos.
============================================ */
/* MONOCHROM (User-Entscheid): Terra ist von der Copy runter. Highlights
laufen in SILBER — Platin-Satin nach dem Lesbarer-Ghost-Rezept, die
em-Wörter stehen als gebürsteter Stahl neben dem Papierweiß.
Tuning: wirkt's zu leise -> Anteil auf 78-82%, zu grau -> 62-66%.
(accent Hue 250 ↔ bg 255 = nahe Hues, oklch hier safe.) */
/* Recherche-Urteil (3-Berichte-Jury): BONE — warmes Fast-Weiß oklch(0.90 0.012 85).
Kein Farb-Akzent, sondern ein Temperatur-Hauch: C 0.012 ist dieselbe homöo-
pathische Dosis wie das Platin selbst (C 0.014) — die Betonung trägt die
Kursive, die Farbe flüstert (2026-Idiom: Doppel-Betonung Kursive+satte Farbe
= Template-Look). Bone ist die Foto-Brücke (warme Bildwelt ↔ kühles Chrome)
und mit L 0.90 der einzige Kandidat, der auch ÜBER warmen Bildzonen sicher
schwebt (Hell schlägt Dunkel auf Mittelton-Texturen).
Tuning: zu warm -> C auf 0.008 · zu nah an der Headline -> L auf 0.87.
Rückweg Silber-Satin: color-mix(in oklch, var(--accent) 72%, var(--bg)). */
/* User-Wahl: PLATIN statt Bone — Jury-Platz 2, Satin hell (L≈0.71, rein
monochrom, robust über Bildzonen). Nächste Stufe heller: var(--accent) pur
(L 0.82) · leiser: accent 72% (das frühere Silber-Satin) · Bone-Rückweg:
oklch(0.90 0.012 85). */
:root { --em-highlight: oklch(0.90 0.012 85); } /* Bone — FAMILIEN-ROLLOUT (Index + alle Subs) */
.subpage-hero-content h1 em,
.section-header h2 em,
.statement-quote em,
.kontakt-form-head h2 em,
.case-copy h3 em {
color: var(--em-highlight);
}
/* Term-Band mit 4 Items (Corian-Eigenschaften): 2x2 ab Tablet, 4-spaltig ab Desktop.
Die vertikale Haarlinie sitzt nur zwischen Spalten — nie am Zeilenanfang. */
@media (min-width: 760px) and (max-width: 1099px) {
.term-band:has(.term-item:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.term-band:has(.term-item:nth-child(4)) .term-item:nth-child(odd) { padding-left: 0; }
.term-band:has(.term-item:nth-child(4)) .term-item:nth-child(odd)::before { content: none; }
}
@media (min-width: 1100px) {
.term-band:has(.term-item:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}
/* ============================================
SCHANIGARTEN GRID-ZEILEN — 12-Spalten-Rows (.g-row) + Ratio-Kacheln
für Projekt-Kapitel und Werk-Strip. Kacheln = bestehende
.einblick-Familie (Depth, Glass, Grade, scale-Hover).
============================================ */
.g-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.9rem, 1.5vw, 1.5rem) 0.75rem; align-items: start; }
.g-row .einblick { margin: 0; }
.g-m-full { grid-column: 1 / -1; }
@media (min-width: 768px) {
.g-row { grid-template-columns: repeat(12, 1fr); gap: clamp(0.9rem, 1.5vw, 1.5rem); }
.gc-9-13 { grid-column: 9 / 13; }
.gc-1-13 { grid-column: 1 / 13; }
.gc-10-13 { grid-column: 10 / 13; }
}
/* Ratio-Modifier auf der .einblick-Bühne (ersetzen inline aspect-ratio) */
.einblick-img--p45 { aspect-ratio: 4 / 5; }
.einblick-img--p43 { aspect-ratio: 4 / 3; }
.einblick-img--pano { aspect-ratio: 15 / 7; }
/* Caption-Akzent: Projektname heller als der Caption-Rest — monochrom
(Hierarchie über Ton, nicht über Farbe) */
body.schani-sub .einblick figcaption .cap-proj { color: var(--accent); }
/* Prozess-Zeile — Haarlinien-Band statt 5-Punkte-Rail */
.prozess-zeile {
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(1.2rem, 2.5vw, 2rem);
border-top: 1px solid var(--border-light);
display: grid; grid-template-columns: 1fr; gap: 1.2rem;
}
@media (min-width: 768px) {
.prozess-zeile { grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: baseline; }
}
.prozess-zeile-steps {
margin: 0; font-family: var(--font-serif); color: var(--text);
font-size: clamp(1.1rem, 1.8vw, 1.45rem); white-space: nowrap;
}
@media (max-width: 767px) { .prozess-zeile-steps { white-space: normal; } }
body.schani-sub .prozess-zeile-steps .pz-arrow { color: color-mix(in oklch, var(--accent) 52%, var(--bg)); }
.prozess-zeile-fakten { display: grid; gap: 0.4rem; }
.prozess-zeile-fakten p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
/* ============================================
SCHANIGARTEN CINEMATIC v2 — Foto-Hero (Abend-Terrasse),
Foto-Gründe für Werkstatt (Einfassungs-Makro) und Kontakt (Holz-Makro),
gerahmtes Werkstatt-Reel. Sections atmen auf Material statt auf Fläche.
============================================ */
/* --- Foto-Hero (Mockup-Spec: ~72vh, Text vertikal zentriert, EIN Ghost-CTA,
H1 dreizeilig via
, Terra-Tick vorm Label statt Radial-Blur) --- */
.schani-hero {
min-height: min(74svh, 54rem);
align-items: center;
}
/* Flex-Shrink-Falle: .subpage-hero ist flex → Container schrumpft auf
Content-Breite und zentriert sich. Der Typo-Hero hat den Fix schon
(.subpage-hero--typo .container), der Foto-Hero brauchte ihn auch —
sonst sitzt die Copy eingerückt statt auf der Logo-Flucht (Mockup). */
.schani-hero .container { width: 100%; }
.schani-hero .subpage-hero-content {
padding-top: 8rem; /* Fixed-Nav-Offset */
padding-bottom: 3rem;
}
.schani-hero .subpage-hero-content h1 {
max-width: 520px;
/* Mockup-Größe: ~77px bei 1536 — max-width 520 erzwingt den Mockup-
Umbruch „Mehr Gastraum / — direkt vor / dem Lokal."
(„— direkt vor dem" misst ~558px und bliebe bei 560 einzeilig). */
font-size: clamp(2.4rem, 5vw, 4.85rem);
}
.schani-hero .subpage-hero-content > p {
/* Mockup: Sub bricht zweizeilig nach „Dächer," */
max-width: 610px;
/* Familien-Regel liefert Template-Ära-Cream rgba(240,230,216,.65) — auf dem
kühlen Anthrazit-Scrim ein warmer Fremdkörper. Kühl aus --text mischen. */
color: color-mix(in oklab, var(--text) 68%, transparent);
}
/* Tick-Rezept der Typo-Heroes, hier auf dem Foto-Hero — überschreibt den
Radial-Blur-::before der Foto-Hero-Familie vollständig. */
body.schani-sub .schani-hero .subpage-hero-content .label::before {
content: '';
position: static;
display: inline-block;
width: 1.35rem; height: 2px;
background: var(--accent-30);
vertical-align: middle;
margin: -2px 0.65rem 0 0;
top: auto; left: auto;
filter: none;
z-index: auto;
pointer-events: none;
}
.schani-hero .hero-bg img {
filter: saturate(0.94) brightness(0.97);
/* Crop explizit pinnen — sonst erbt die Sub den Index-Wert aus der globalen
.hero-bg-img-Regel (dort für die Möbelkante getunt) und wandert stumm mit,
wenn der Index-Crop je nachjustiert wird. 68% hält Pflanzkübel + warmes
Fensterlicht auch im Mobile-Portrait-Crop im Bild. */
object-position: 68% 50%;
/* Ken-Burns auf die Tisch-Zone (leicht unter Horizont).
Getrenntes Element vom Parallax-Wrapper — Pflicht (Transform-Clobbering). */
transform-origin: 50% 62%;
animation: hero-kenburns 28s var(--ease-out) forwards;
}
/* Scrim aus var(--bg) gemischt (in oklab) — die Template-Ära-Werte
rgba(28,24,20) sind warm-braun und reißen am Anthrazit-Seam.
Mockup-Lichtführung „Materialisieren": links löst sich das Bild in die
Seitenfarbe auf (Copy sitzt auf ruhiger Fläche), nach rechts tritt es
voll heraus. Vertikal nur noch leichter Top-Hauch (Nav) + Boden-Fade
in die nächste Section — die Lesbarkeit trägt der horizontale Layer. */
.schani-hero .hero-overlay {
background:
linear-gradient(to right,
var(--bg) 0%,
color-mix(in oklab, var(--bg) 96%, transparent) 24%,
color-mix(in oklab, var(--bg) 78%, transparent) 40%,
color-mix(in oklab, var(--bg) 42%, transparent) 54%,
color-mix(in oklab, var(--bg) 14%, transparent) 66%,
transparent 78%),
linear-gradient(to bottom,
color-mix(in oklab, var(--bg) 16%, transparent) 0%,
transparent 32%,
transparent 60%,
color-mix(in oklab, var(--bg) 42%, transparent) 78%,
color-mix(in oklab, var(--bg) 84%, transparent) 92%,
var(--bg) 100%);
}
/* Mobile: der Links-Fade würde das Bild auf einen Randstreifen reduzieren —
dort bleibt die bewährte vertikale Scrim-Führung (Bild sichtbar, Text
über Dimmung), nur der Boden-Fade in die Folgesection bleibt identisch. */
@media (max-width: 767px) {
.schani-hero .hero-overlay {
background: linear-gradient(to bottom,
color-mix(in oklab, var(--bg) 28%, transparent) 0%,
color-mix(in oklab, var(--bg) 18%, transparent) 42%,
color-mix(in oklab, var(--bg) 55%, transparent) 70%,
color-mix(in oklab, var(--bg) 88%, transparent) 90%,
var(--bg) 100%);
}
}
.subpage-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
@media (max-width: 460px) {
.subpage-hero-cta { flex-direction: column; }
.subpage-hero-cta .btn { justify-content: center; }
}
/* --- Foto-Grund für Sections (Schwester von .section-image, OHNE Invert-Filter:
das Bild bleibt Material, kein Bauplan-Negativ). Bild via --section-photo,
Intensität via --section-photo-op. Fade-Kanten wie beim Kratzer-Pattern. --- */
.section-photo { position: relative; }
.section-photo::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--section-photo);
background-size: cover;
background-position: var(--section-photo-pos, center);
filter: saturate(0.85) brightness(0.82);
opacity: var(--section-photo-op, 0.4);
mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.35) 8%,
rgba(0, 0, 0, 0.75) 16%,
#000 26%,
#000 62%,
rgba(0, 0, 0, 0.6) 76%,
rgba(0, 0, 0, 0.25) 88%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.35) 8%,
rgba(0, 0, 0, 0.75) 16%,
#000 26%,
#000 62%,
rgba(0, 0, 0, 0.6) 76%,
rgba(0, 0, 0, 0.25) 88%,
transparent 100%
);
z-index: 0;
pointer-events: none;
}
.section-photo > * { position: relative; z-index: 1; }
/* Satt-Variante (Mockup-Spec Werkstatt): Foto als voller Section-Grund statt
Underlay — in der Mitte voll da, an beiden Kanten weich in die Seitenfarbe
auflösend (Section-Atmen: kein harter Schnitt an flache Nachbar-Sections).
Lesbarkeit über diagonalen Scrim (::after, dunkel links über der Text-Zone,
offen rechts). Section trägt deshalb KEIN atmo-lean (::after ist belegt). */
.section-photo--satt::before {
filter: saturate(0.9) brightness(0.95);
mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.4) 6%,
rgba(0, 0, 0, 0.8) 12%,
#000 18%,
#000 70%,
rgba(0, 0, 0, 0.55) 82%,
rgba(0, 0, 0, 0.22) 92%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.4) 6%,
rgba(0, 0, 0, 0.8) 12%,
#000 18%,
#000 70%,
rgba(0, 0, 0, 0.55) 82%,
rgba(0, 0, 0, 0.22) 92%,
transparent 100%
);
}
/* Materialize-Scrim (Mockup): links solide Seitenfarbe unter der Copy,
das Holz tritt nach rechts voll heraus — gleiche Lichtführung wie der
Hero, rechts ab ~78% komplett offen. */
.section-photo--satt::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right,
var(--bg) 0%,
color-mix(in oklab, var(--bg) 95%, transparent) 28%,
color-mix(in oklab, var(--bg) 72%, transparent) 46%,
color-mix(in oklab, var(--bg) 34%, transparent) 62%,
color-mix(in oklab, var(--bg) 10%, transparent) 72%,
transparent 82%);
z-index: 0;
pointer-events: none;
}
/* Mobile: Split stackt (Copy oben, Frame unten) — Scrim kippt vertikal:
oben ruhige Fläche für den Text, das Holz tritt nach unten heraus. */
@media (max-width: 979px) {
.section-photo--satt::after {
background: linear-gradient(to bottom,
var(--bg) 0%,
color-mix(in oklab, var(--bg) 92%, transparent) 30%,
color-mix(in oklab, var(--bg) 58%, transparent) 48%,
color-mix(in oklab, var(--bg) 22%, transparent) 62%,
transparent 76%);
}
}
/* --- Werkstatt-Bühne: Editorial-Split, gerahmtes Reel rechts --- */
.werk-cine-split {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start; /* Mockup: Rahmen-Oberkante auf Label-Flucht */
}
@media (min-width: 980px) { .werk-cine-split { grid-template-columns: 1.05fr 0.95fr; } }
.werk-cine-text .section-header { margin-bottom: clamp(1.6rem, 2.5vw, 2.2rem); }
.werk-cine-copy {
display: grid;
gap: 1.15rem;
max-width: 54ch;
}
.werk-cine-copy p {
margin: 0;
color: var(--text-body);
font-size: 1.02rem;
line-height: 1.7;
}
/* Video-Kachel — rahmenlos (User-Entscheid statt Haarlinien-Panel): normale
einblick-Kachel im 4/5-Crop der Strip-Reihe darunter, „Aus der Werkstatt"
liegt als schani-media-tag-Badge IM Video. Kompakt gegen die Sektions-Länge.
Kein translateY-Hover (Edge-Bleed-Regel). */
.werk-frame {
position: relative;
margin: 0;
width: min(100%, 400px);
justify-self: center;
}
@media (min-width: 980px) { .werk-frame { justify-self: end; } }
/* Kontaktabzug-Strip unter dem Split — 4 ruhige Kacheln in einer Reihe */
.werk-strip { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 768px) {
.gc-1-4 { grid-column: 1 / 4; }
.gc-4-7 { grid-column: 4 / 7; }
.gc-7-10 { grid-column: 7 / 10; }
.gc-1-5 { grid-column: 1 / 5; } /* 3er-Strip im Projekt-Kapitel */
.gc-5-9 { grid-column: 5 / 9; }
}
/* ============================================
Projekt-Kapitel (ersetzt das Galerie-Grid, User-Entscheid):
Case-Splits in der Werkstatt-Sprache — kompakte Medien-Kachel mit
Projekt-Badge (schani-media-tag) + beschreibende Copy, alternierend.
Kein translateY-Hover (Edge-Bleed-Regel).
============================================ */
.case-split {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 4.5vw, 4.5rem);
align-items: center;
}
.case-split + .case-split { margin-top: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 980px) {
.case-split { grid-template-columns: 1.05fr 0.95fr; }
.case-split--rev { grid-template-columns: 0.95fr 1.05fr; }
.case-split--rev .case-media { order: -1; justify-self: start; }
}
.case-media {
position: relative;
margin: 0;
width: min(100%, 400px);
justify-self: center;
}
@media (min-width: 980px) { .case-media { justify-self: end; } }
/* Video-Bühne — größer + höher als die Strip-Kacheln (400×500), damit sie
sich als Kapitel-Held abhebt: 500px breit, 3/4-Crop (~500×667). Das Inset
wächst proportional mit. */
.case-media--stage { width: min(100%, 500px); }
.case-media--stage .einblick-img { aspect-ratio: 3 / 4; }
.case-media--stage .schani-inset { width: clamp(150px, 40%, 210px); }
/* Copy neben der Bühne — HERO-Skala (User-Entscheid: „Größe wie im Hero"):
identische clamp-Werte wie die .schani-hero-H1, em in der Terra-
Zweitstimme, Body eine Spur größer und luftiger. */
.case-copy h3 {
font-size: clamp(2.4rem, 5vw, 4.85rem);
line-height: 1.12;
margin-bottom: 1.4rem;
max-width: 15ch;
}
.case-copy p {
margin: 0;
color: var(--text-body);
font-size: 1.06rem;
line-height: 1.75;
max-width: 46ch;
}
.case-copy p + p { margin-top: 1.05rem; }
/* Strip + Panorama im Projekt-Kapitel (nutzen die g-row/einblick-Familie) */
.case-strip { margin-top: clamp(3.5rem, 7vw, 6rem); }
.case-pano { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* Statement-Beat als eigene Section — halber Sektions-Atem, sonst trägt
ein einzelner Satz ~190px Padding pro Kante (wirkt als Loch, nicht als Luft) */
.section--statement { padding-block: clamp(3rem, 5vw, 5.5rem); }
/* ============================================
Kommunen-Kette — sequenzieller Auftritt (User-Entscheid: KEINE echte
Rail-Linie; Design = originale werk-kette mit Haarlinien-Trennern und
Ghost-Nummern). Nur der AUFTRITT läuft wie eine Rail: die vier Punkte
erscheinen nacheinander von links nach rechts, auto-getriggert —
initKommRail (subpage.js) setzt einmalig .play bei Sichtkontakt.
Jeder Step bringt seinen linken Haarlinien-Trenner (::before) mit —
die Kette baut sich sichtbar Spalte für Spalte auf.
============================================ */
/* Sequenz-Zündung auf Text-Kindern UND Beleg-Kachel jeder Spalte
(User-Entscheid: Bild animiert exakt wie die zugehörige Copy —
Spalte für Spalte, gleiche Werte, gleicher Delay). Die Kacheln
tragen deshalb KEIN .reveal mehr (Doppel-Gate). */
.werk-kette[data-komm-rail] .kette-num,
.werk-kette[data-komm-rail] .kette-step h3,
.werk-kette[data-komm-rail] .kette-step > p,
.werk-kette[data-komm-rail] .komm-bild {
opacity: 0;
transform: translateY(18px);
transition: opacity 1.1s var(--ease) var(--seq, 0s),
transform 1.1s var(--ease) var(--seq, 0s);
}
.werk-kette[data-komm-rail].play .kette-num,
.werk-kette[data-komm-rail].play .kette-step h3,
.werk-kette[data-komm-rail].play .kette-step > p,
.werk-kette[data-komm-rail].play .komm-bild {
opacity: 1;
transform: translateY(0);
}
.werk-kette[data-komm-rail] .kette-step:nth-child(1) { --seq: 0s; }
.werk-kette[data-komm-rail] .kette-step:nth-child(2) { --seq: 0.35s; }
.werk-kette[data-komm-rail] .kette-step:nth-child(3) { --seq: 0.7s; }
.werk-kette[data-komm-rail] .kette-step:nth-child(4) { --seq: 1.05s; }
@media (prefers-reduced-motion: reduce) {
.werk-kette[data-komm-rail] .kette-num,
.werk-kette[data-komm-rail] .kette-step h3,
.werk-kette[data-komm-rail] .kette-step > p,
.werk-kette[data-komm-rail] .komm-bild {
opacity: 1;
transform: none;
transition: none;
}
}
/* Beleg-Kacheln unter den Spalten (User-Mockup): einblick-Familie, Portrait-
Crop wie im Mockup (~3/5), mobil flacher (16/10) gegen Seitenlänge.
Kacheln bleiben opak über dem Foto-Grund — Textur lebt in den Gassen. */
.komm-bild {
margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
}
.komm-bild .einblick-img { aspect-ratio: 16 / 10; }
@media (min-width: 860px) {
.komm-bild .einblick-img { aspect-ratio: 3 / 5; }
/* Spalte 1 hat keine linke Gasse (kette-Asymmetrie) — ohne Ausgleich wäre
ihre Kachel ~28px breiter und die Unterkanten der Reihe brächen. */
.kette-step:first-child .komm-bild { margin-right: clamp(1.2rem, 2vw, 1.8rem); }
}
/* Ecken-Crops (User-Direktive: Kachel 1 = rechts unten; Kachel 2 kam als
Hochformat neu generiert und braucht keine Zoom-Mechanik mehr): die 3/5-Kachel zeigt vertikal sonst immer die volle Bildhöhe —
der Zoom mit Ecken-Origin holt die untere Bildecke heran, der
einblick-img-Clip schneidet den Rest. Hover-Zoom fährt vom selben
Origin weiter (überschreibt die zentrierte einblick-Hover-Regel). */
.einblick.komm-bild--rb .einblick-img img { object-position: 100% 100%; }
/* Kachel 2: DETAIL-SHOT der Einfassung (User) — kräftiger Zoom auf die
Latten-Front mit Handlauf und Eckpfosten, Origin = Zentrum der Front. */
.einblick.komm-bild--z .einblick-img img { transform: scale(1.9); transform-origin: 80% 64%; } /* Ecke ~10% unter Fenster-Mitte (Origin-Mathe: O=(C−sP)/(1−s)) */
.einblick.komm-bild--z:hover .einblick-img img { transform: scale(1.95); }
@media (min-width: 860px) {
.einblick.komm-bild--rb .einblick-img img { transform: scale(1.35); transform-origin: 100% 100%; }
.einblick.komm-bild--rb:hover .einblick-img img { transform: scale(1.4); }
}
/* ============================================
Section-Foto, Hero-Mechanismus (--hero): Bild SATT an die rechte Kante
gelehnt und aus der Seitenfarbe materialisierend — horizontal zur
Content-Seite auflösend ∩ vertikal eased (Doppel-Maske, Rezept wie
index/schani-slats), statt Ganzflächen-Whisper. Höhe via
--section-photo-h begrenzbar: der Grund muss nicht die ganze Section
zieren, und cover zoomt aufs Regionsmaß statt auf die volle
Sektionshöhe (User: „zu stark gestreckt — mach es edel").
============================================ */
.section-photo--hero::before {
inset: 0 0 auto 0;
height: var(--section-photo-h, 100%);
opacity: var(--section-photo-op, 0.55);
filter: saturate(0.9) brightness(0.82);
mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.85) 70%, #000 85%),
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.18) 10%, rgba(0,0,0,0.5) 21%, #000 32%, #000 72%, rgba(0,0,0,0.4) 87%, transparent 100%);
-webkit-mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.85) 70%, #000 85%),
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.18) 10%, rgba(0,0,0,0.5) 21%, #000 32%, #000 72%, rgba(0,0,0,0.4) 87%, transparent 100%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
}
/* ============================================
Hero-Bleed (User-Wunsch): das Hero-Bild läuft unter die Begriff-Section
weiter und löst sich DORT auf — kein Schnitt mehr an der Hero-Kante
(divider-gold auf dieser Seite entfernt). Mechanik: hero overflow
visible, .hero-bg um --hero-bleed verlängert, das Materialize wandert
vom Overlay in eine Doppel-Maske AUF dem Bild (horizontale Stops =
exakte Inverse des alten Overlays — Hero-Look bleibt identisch;
vertikal löst über die Bleed-Zone auf). Overlay behält nur den
Nav-Scrim. Die Folge-Section hebt sich per z-index über den Bleed:
ihr Grund ist transparent (Schweif scheint durch), ihr Text liegt oben.
PARALLAX: Die Maske klebt am Bild — beim Scrollen driftet die
Auflösekante die ~12vh des Parallax mit nach unten. Weil die Kante ein
langer weicher Verlauf ist, gibt es keinen sichtbaren Rand: das Foto
liest sich als tiefe, langsame Ebene, über die der Begriff-Text
hinwegzieht. Nur ≥768px — mobil bleibt der vertikale Scrim ohne Bleed.
============================================ */
@media (min-width: 768px) {
.schani-hero { overflow: visible; }
.schani-hero .hero-bg {
--hero-bleed: 40vh;
height: calc(100% + var(--hero-bleed));
overflow: hidden; /* clippt den Ken-Burns-Scale horizontal (vorher Job des Hero-overflow) */
mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.04) 24%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.58) 54%, rgba(0,0,0,0.86) 66%, #000 78%),
linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, #000 8%, #000 58%, rgba(0,0,0,0.55) 76%, rgba(0,0,0,0.18) 89%, transparent 97%);
-webkit-mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.04) 24%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.58) 54%, rgba(0,0,0,0.86) 66%, #000 78%),
linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, #000 8%, #000 58%, rgba(0,0,0,0.55) 76%, rgba(0,0,0,0.18) 89%, transparent 97%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
}
/* Overlay nur noch Nav-Scrim — Materialize + Boden-Auflösung macht die Maske */
.schani-hero .hero-overlay {
background: linear-gradient(to bottom,
color-mix(in oklab, var(--bg) 22%, transparent) 0%,
transparent 30%);
}
/* Begriff-Section über den Bleed heben (atmo-lean liefert position:relative) */
body.schani-sub .subpage-hero + .section { z-index: 2; }
}
/* ============================================
Foto-Hero der Kapitel-Familie (--foto): das Schani-Hero-Rezept
verallgemeinert — Bild satt rechts, materialisiert per Doppel-Maske aus
der Seitenfarbe und blutet >=768px ~40vh unter die Folge-Section.
Bild-Ausschnitt via --hero-pos. Ken-Burns auf dem img; der Parallax
kommt aus der globalen .hero-bg-Regel (Drift der Aufloesekante =
gewollte Tiefen-Ebene, siehe Schani-Hero). Mobil: vertikaler Scrim,
kein Bleed. divider-gold nach dem Hero entfaellt auf Foto-Seiten.
============================================ */
.subpage-hero--foto {
min-height: min(74svh, 54rem);
align-items: center;
}
.subpage-hero--foto .container { width: 100%; } /* Flex-Shrink-Falle */
.subpage-hero--foto .subpage-hero-content {
padding-top: 8rem;
padding-bottom: 3rem;
}
.subpage-hero--foto .subpage-hero-content h1 {
font-size: clamp(2.4rem, 4.8vw, 4.5rem);
max-width: 15ch;
}
.subpage-hero--foto .hero-bg img {
object-position: var(--hero-pos, 62% 50%);
filter: saturate(0.94) brightness(0.97);
transform-origin: 55% 55%;
animation: hero-kenburns 28s var(--ease-out) forwards;
}
/* Mobil-first: vertikaler Scrim (Bild sichtbar, Text ueber Dimmung) */
.subpage-hero--foto .hero-overlay {
background: linear-gradient(to bottom,
color-mix(in oklab, var(--bg) 28%, transparent) 0%,
color-mix(in oklab, var(--bg) 18%, transparent) 42%,
color-mix(in oklab, var(--bg) 55%, transparent) 70%,
color-mix(in oklab, var(--bg) 88%, transparent) 90%,
var(--bg) 100%);
}
@media (min-width: 768px) {
.subpage-hero--foto { overflow: visible; }
.subpage-hero--foto .hero-bg {
--hero-bleed: 40vh;
height: calc(100% + var(--hero-bleed));
overflow: hidden; /* Ken-Burns-Clip (vorher Job des Hero-overflow) */
mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.04) 24%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.58) 54%, rgba(0,0,0,0.86) 66%, #000 78%),
linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, #000 8%, #000 58%, rgba(0,0,0,0.55) 76%, rgba(0,0,0,0.18) 89%, transparent 97%);
-webkit-mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.04) 24%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.58) 54%, rgba(0,0,0,0.86) 66%, #000 78%),
linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, #000 8%, #000 58%, rgba(0,0,0,0.55) 76%, rgba(0,0,0,0.18) 89%, transparent 97%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
}
.subpage-hero--foto .hero-overlay {
background: linear-gradient(to bottom,
color-mix(in oklab, var(--bg) 22%, transparent) 0%,
transparent 30%);
}
/* Folge-Section ueber den Bleed heben (atmo-lean/section-photo liefern position).
.atmo-wrap-Prefix noetig: die Wrap-Regel :not():not() hat 0-3-0 und wuerde
eine 0-2-0-Regel schlagen — gleiche Spezifitaet + spaetere Ordnung gewinnt. */
.atmo-wrap > .subpage-hero--foto + .section { z-index: 2; }
}
/* ============================================
Nav-Panel "Leistungen" — kompaktes typografisches Dropdown (Brücken-Umbau).
Öffnet per Klick/Hover/Fokus; aria-expanded[true] treibt die Sichtbarkeit,
nav.mega-open macht die Bar solid (Haus-Regel: solides Panel unter
transparenter Bar wirkt kaputt). Nur Desktop — Mobile nutzt das Accordion
im Hamburger-Menü. JS: initNavPanel in page-transition.js.
============================================ */
.nav-item-panel { position: relative; }
.nav-panel-trigger {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 400;
line-height: 1;
color: rgba(240, 230, 216, 0.6);
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.3s var(--ease);
}
.nav-panel-trigger:hover,
.nav-panel-trigger.active,
.nav-panel-trigger[aria-expanded="true"] { color: var(--text); }
.nav-chevron {
opacity: 0.75;
transition: transform 0.3s var(--ease);
}
.nav-panel-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-panel {
position: absolute;
top: calc(100% + 1.15rem);
left: 50%;
min-width: 252px;
padding: 0.5rem 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 5px;
box-shadow: var(--depth-rest);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%) translateY(-8px);
transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0.32s var(--ease);
z-index: 20;
}
/* Hover-Brücke über den Gap Trigger↔Panel — kein Close beim Rüberfahren */
.nav-panel::before {
content: '';
position: absolute;
top: -1.15rem;
left: 0;
right: 0;
height: 1.15rem;
}
.nav-panel-trigger[aria-expanded="true"] + .nav-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-panel a {
display: block;
padding: 0.68rem 1.5rem;
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.01em;
color: rgba(240, 230, 216, 0.72);
white-space: nowrap;
transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-panel a:hover,
.nav-panel a:focus-visible,
.nav-panel a.active { color: var(--text); background: rgba(240, 230, 216, 0.04); }
.nav-panel a.nav-panel-all {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
padding-top: 0.35rem;
padding-bottom: 0.85rem;
margin-bottom: 0.4rem;
border-bottom: 1px solid var(--border);
}
.nav-panel a.nav-panel-all:hover,
.nav-panel a.nav-panel-all:focus-visible { color: var(--accent-light); background: none; }
/* ============================================
Mobile-Nav Accordion "Leistungen" (Brücken-Umbau). Tap expandiert die
4 Kapitel-Seiten + Überblick als Unterliste. Collapsible-Standard:
max-height auf dem OUTER (.nav-mobile-sub), padding auf dem INNER
(.nav-mobile-sub-inner) — kein Border-Box-Klampe-Freeze. JS setzt
max-height = scrollHeight (initMobileAccordion in page-transition.js).
============================================ */
.nav-mobile-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
width: 100%;
}
.nav-mobile-acc {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 400;
line-height: 1;
color: var(--text);
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.3s var(--ease);
}
.nav-mobile-acc:hover { color: var(--accent); }
.nav-mobile-chev {
opacity: 0.7;
transition: transform 0.35s var(--ease);
}
.nav-mobile-acc[aria-expanded="true"] .nav-mobile-chev { transform: rotate(180deg); }
.nav-mobile-sub {
max-height: 0;
overflow: hidden;
width: 100%;
transition: max-height 0.5s var(--ease);
}
.nav-mobile-sub-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.05rem;
padding: 1.35rem 0 0.35rem;
}
.nav-mobile-sub-inner a {
font-family: var(--font-serif);
font-size: 1.18rem;
font-weight: 400;
color: rgba(240, 230, 216, 0.6);
transition: color 0.3s var(--ease);
}
.nav-mobile-sub-inner a:hover { color: var(--accent); }
.nav-mobile-sub-inner a.nav-mobile-sub-all {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
/* ============================================
Weitere Leistungen — Cross-Nav-Liste auf den Kapitel-Subpages (Brücken-
Umbau, löst die Sackgassen). Typografische Liste der 3 Geschwister-
Leistungen (Muuto-DNA wie die Index-Liste, ohne Bild-Bühne). Kein
Stagger (User-Regel) — reveal-scale simultan. Hover NUR auf Kindern
(h3/arrow), NICHT auf .wl-item — sonst killt die Transition-Shorthand
die reveal-Choreographie (bekannte Falle).
============================================ */
.wl-list {
border-top: 1px solid var(--border);
margin-top: clamp(2rem, 4vw, 3.2rem);
}
.wl-item {
position: relative;
display: block;
padding: clamp(1.4rem, 2.5vw, 2rem) 3rem clamp(1.4rem, 2.5vw, 2rem) 0;
border-bottom: 1px solid var(--border);
text-decoration: none;
color: inherit;
}
.wl-item h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 0.45rem;
text-wrap: balance;
transition: color 0.4s var(--ease);
}
.wl-item p {
color: var(--text-body);
font-size: 0.95rem;
line-height: 1.6;
max-width: 52ch;
text-wrap: pretty;
transition: opacity 0.4s var(--ease);
}
.wl-arrow {
position: absolute;
right: 0.4rem;
top: 50%;
transform: translate(-6px, -50%);
font-size: 1.15rem;
color: var(--accent-light);
opacity: 0;
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.wl-item:hover h3 { color: var(--accent-light); }
.wl-item:hover .wl-arrow { opacity: 1; transform: translate(0, -50%); }
.wl-list:hover .wl-item:not(:hover) :is(h3, p) { opacity: 0.5; }
}
@media (max-width: 979px) {
.wl-arrow { opacity: 0.55; transform: translate(0, -50%); }
}
/* (Referenzen-Tönung entfernt — sie setzte die Section als Block ab und erzeugte
die vom User gemeldete „Kante als Abschluss". Glatt/nahtlos schlägt hier den
Übersichtlichkeits-Feinschliff.) */