@layer reset, tokens, base, layout, components, sections, utilities;
/* ==========================================================================
Diviana Nails & Beauty – Stylesheet
Werte 1:1 aus dem Design „Startseite v2“. Einheit cqw = 1 % der Breite des
Containers .dv-site (Kopf, Menü und Button stehen außerhalb und nutzen
dieselbe Einheit mit der Fensterbreite als Rückfall).
========================================================================== */
/* ---------- Schriften (lokal, woff2, latin) ---------- */
@font-face {
font-family: "Libre Baskerville";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
}
/* ---------- Bewegungen ---------- */
@keyframes dvMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes dvWindA { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.8deg); } }
@keyframes dvWindB { 0%, 100% { transform: rotate(1.2deg); } 50% { transform: rotate(-1.9deg); } }
@keyframes dvFlutter { 0%, 100% { transform: skewX(-.5deg); } 50% { transform: skewX(.7deg); } }
@keyframes dvDrift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-.4deg); } 50% { transform: translate3d(.8%, -.5%, 0) rotate(.9deg); } }
/*
* Körnung: fünf Sprünge pro Sekunde. Prozent allein ergab auf kleinen Kacheln
* (Galerie, Instagram) nur 6–12 px – solchen Sprüngen folgt das Auge, und die
* Textur wirkt wie im Zickzack verschoben. Mindestweite in Pixeln = was der
* Hero auf dem iPhone springt (4 % von 2 × 390 ≈ 31 px); große Fotos springen
* weiter wie bisher in Prozent. Rand reicht: die Ebene ist 200 % groß.
*/
@keyframes dvGrain {
0% { transform: translate(0, 0); }
20% { transform: translate(calc(-1 * max(4%, 31px)), max(3%, 23px)); }
40% { transform: translate(max(3%, 23px), calc(-1 * max(2%, 16px))); }
60% { transform: translate(calc(-1 * max(2%, 16px)), calc(-1 * max(4%, 31px))); }
80% { transform: translate(max(4%, 31px), max(2%, 16px)); }
100% { transform: translate(0, 0); }
}
/*
* Handy: harte Sprünge statt Gleiten. Bei dvGrain gilt steps(5) je Keyframe-
* Abschnitt, die Ebene rückt also 200 ms lang in Fünfteln in EINE Richtung –
* auf dem Handy sah man das als Wandern (Nick 27-10-2026). Hier: zehn Stellen,
* jede 60 ms gehalten (0,6 s, steps(1)), Richtung wechselt jedes Mal, nichts
* dazwischen. 100 ms je Stelle wirkte stockend.
*/
@keyframes dvGrainHart {
0% { transform: translate(0, 0); }
10% { transform: translate(-37px, 21px); }
20% { transform: translate(24px, -41px); }
30% { transform: translate(-12px, -28px); }
40% { transform: translate(43px, 9px); }
50% { transform: translate(-29px, 38px); }
60% { transform: translate(16px, 27px); }
70% { transform: translate(-44px, -14px); }
80% { transform: translate(31px, -33px); }
90% { transform: translate(-8px, 44px); }
100% { transform: translate(0, 0); }
}
/* ---------- Reset ---------- */
@layer reset {
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
:where(img, svg, picture) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(button) { font: inherit; color: inherit; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
/* Nach der svg/img-Regel: sonst schlägt display:block das hidden-Attribut (WISSEN/05). */
:where([hidden]) { display: none !important; }
}
/* ---------- Tokens ---------- */
@layer tokens {
:root {
/* Palette (verbindlich, keine weiteren Farben) */
--c-bg: #E9E9E9;
--c-sand: #DCDAD3;
--c-green: #555D50;
--c-brown: #685D54;
--c-ink: #222222;
--c-logo: #3A3A38;
--c-white: #FFFFFF;
--c-text: var(--c-ink);
--c-surface: var(--c-bg);
--c-accent: var(--c-green);
--c-muted: var(--c-brown);
--c-on-dark: var(--c-bg);
--c-on-dark-muted: var(--c-sand);
--font-display: "Libre Baskerville", "Times New Roman", serif;
--font-text: "Poppins", system-ui, sans-serif;
/* Fluide Größen (Einheit cqw – siehe Kopfkommentar) */
--t-h1: calc(clamp(46px, 8.6cqw, 148px) * var(--fh));
--t-h2: calc(clamp(34px, 5.6cqw, 84px) * var(--fh));
--t-h3: calc(clamp(26px, 3.2cqw, 48px) * var(--fh));
--t-p: clamp(13px, 1cqw, 15px);
--edge: clamp(24px, 5cqw, 80px);
--sec: calc(clamp(96px, 10cqw, 180px) * var(--fa));
/* Mobil/Desktop-Umschalter: ab 800 px Containerbreite ist --dk riesig positiv, --mk riesig negativ. */
--dk: calc((100cqw - 800px) * 999);
--mk: calc((800px - 100cqw) * 999);
--vh: 100vh;
--ease-out: cubic-bezier(.2, .7, .2, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--menue-dunkel: .4s; /* Seite hinter dem offenen Menü abdunkeln, = MENUE_DUNKEL_MS in main.js */
--grain-op: .55;
--noise: url("data:image/svg+xml;utf8,");
}
/*
* Handy: feineres Korn (Nick 27-10-2026 „nur ein bisschen“), über die Frequenz
* statt über eine kleinere Kachel. Eine 160-px-Kachel wiederholte sich auf dem
* Foto zu oft, das Muster wurde erkennbar und die Sprünge wirkten wieder wie
* eine Bewegung in eine Richtung. Kachel und Sprünge bleiben wie am Desktop.
*/
@media (max-width: 799px) {
:root {
--noise: url("data:image/svg+xml;utf8,");
}
}
@supports (height: 100svh) {
:root { --vh: 100svh; }
}
/*
* Adminleiste (nur angemeldet). Alles, was fest oben klebt, rückt um ihre
* Höhe nach unten, und der sichtbare Bereich wird um sie kürzer — sonst
* liegt die Leiste über Logo und Burger, und die Bühne ragt 32 px aus dem
* Bild. 46 px ist die Höhe, die WordPress selbst ab 782 px abwärts nimmt.
*/
/*
* Große Bildschirme: Ab 1600 px wird die ganze Seite gleichmäßig
* hochskaliert (body { zoom }), aber nur mit 60 % des Breitenzuwachses:
* bei 1920 px × 1,12, bei 2560 px × 1,36. Das Design ist auf ~1440–1600 px
* ausgelegt; ohne Zoom blieben Fotos und Texte an ihren Obergrenzen stehen
* und rechts wurde es leer, mit vollem Zoom (× 1,6) wirkte alles riesig
* (Nick, 12-10-2026). Flächen in cqw füllen die Breite trotzdem.
* Schritte zu 64 px, weil zoom keine Länge/Länge-Division kennt.
* Wichtig: zoom skaliert auch svh mit – deshalb teilen --vh und --leiste
* durch --z (gemessen: 100svh unter zoom 2 = doppelte Höhe).
*/
/*
* --fh / --fa: Überschriften und Abschnittsabstände wachsen über 1600 px nicht
* mit dem vollen Zoom, sondern nur mit 20 % bzw. 30 % des Breitenzuwachses
* (Wert = Zielwachstum ÷ --z). Bei 2560 px: Überschriften × 1,12 statt × 1,36,
* Abstände × 1,18. Layout und Bilder nutzen weiter die volle Breite. Unter
* 1600 px sind beide 1 – Laptop und Handy bleiben unverändert (Nick, 14-10-2026).
*/
:root { --z: 1; --fh: 1; --fa: 1; --leiste-px: 0px; --leiste: 0px; }
@media (min-width: 1664px) { :root { --z: 1.0240; --fh: 0.9844; --fa: 0.9883; } }
@media (min-width: 1728px) { :root { --z: 1.0480; --fh: 0.9695; --fa: 0.9771; } }
@media (min-width: 1792px) { :root { --z: 1.0720; --fh: 0.9552; --fa: 0.9664; } }
@media (min-width: 1856px) { :root { --z: 1.0960; --fh: 0.9416; --fa: 0.9562; } }
@media (min-width: 1920px) { :root { --z: 1.1200; --fh: 0.9286; --fa: 0.9464; } }
@media (min-width: 1984px) { :root { --z: 1.1440; --fh: 0.9161; --fa: 0.9371; } }
@media (min-width: 2048px) { :root { --z: 1.1680; --fh: 0.9041; --fa: 0.9281; } }
@media (min-width: 2112px) { :root { --z: 1.1920; --fh: 0.8926; --fa: 0.9195; } }
@media (min-width: 2176px) { :root { --z: 1.2160; --fh: 0.8816; --fa: 0.9112; } }
@media (min-width: 2240px) { :root { --z: 1.2400; --fh: 0.8710; --fa: 0.9032; } }
@media (min-width: 2304px) { :root { --z: 1.2640; --fh: 0.8608; --fa: 0.8956; } }
@media (min-width: 2368px) { :root { --z: 1.2880; --fh: 0.8509; --fa: 0.8882; } }
@media (min-width: 2432px) { :root { --z: 1.3120; --fh: 0.8415; --fa: 0.8811; } }
@media (min-width: 2496px) { :root { --z: 1.3360; --fh: 0.8323; --fa: 0.8743; } }
@media (min-width: 2560px) { :root { --z: 1.3600; --fh: 0.8235; --fa: 0.8676; } }
@media (min-width: 2624px) { :root { --z: 1.3840; --fh: 0.8150; --fa: 0.8613; } }
@media (min-width: 2688px) { :root { --z: 1.4080; --fh: 0.8068; --fa: 0.8551; } }
@media (min-width: 2752px) { :root { --z: 1.4320; --fh: 0.7989; --fa: 0.8492; } }
@media (min-width: 2816px) { :root { --z: 1.4560; --fh: 0.7912; --fa: 0.8434; } }
@media (min-width: 2880px) { :root { --z: 1.4800; --fh: 0.7838; --fa: 0.8378; } }
@media (min-width: 2944px) { :root { --z: 1.5040; --fh: 0.7766; --fa: 0.8324; } }
@media (min-width: 3008px) { :root { --z: 1.5280; --fh: 0.7696; --fa: 0.8272; } }
@media (min-width: 3072px) { :root { --z: 1.5520; --fh: 0.7629; --fa: 0.8222; } }
@media (min-width: 3136px) { :root { --z: 1.5760; --fh: 0.7563; --fa: 0.8173; } }
@media (min-width: 3200px) { :root { --z: 1.6000; --fh: 0.7500; --fa: 0.8125; } }
@media (min-width: 3264px) { :root { --z: 1.6240; --fh: 0.7438; --fa: 0.8079; } }
@media (min-width: 3328px) { :root { --z: 1.6480; --fh: 0.7379; --fa: 0.8034; } }
@media (min-width: 3392px) { :root { --z: 1.6720; --fh: 0.7321; --fa: 0.7990; } }
@media (min-width: 3456px) { :root { --z: 1.6960; --fh: 0.7264; --fa: 0.7948; } }
@media (min-width: 3520px) { :root { --z: 1.7200; --fh: 0.7209; --fa: 0.7907; } }
@media (min-width: 3584px) { :root { --z: 1.7440; --fh: 0.7156; --fa: 0.7867; } }
@media (min-width: 3648px) { :root { --z: 1.7680; --fh: 0.7104; --fa: 0.7828; } }
@media (min-width: 3712px) { :root { --z: 1.7920; --fh: 0.7054; --fa: 0.7790; } }
@media (min-width: 3776px) { :root { --z: 1.8160; --fh: 0.7004; --fa: 0.7753; } }
@media (min-width: 3840px) { :root { --z: 1.8400; --fh: 0.6957; --fa: 0.7717; } }
body.admin-bar { --leiste-px: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar { --leiste-px: 46px; }
}
body {
--leiste: calc(var(--leiste-px) / var(--z));
--vh: calc((100vh - var(--leiste-px)) / var(--z));
}
@supports (height: 100svh) {
body { --vh: calc((100svh - var(--leiste-px)) / var(--z)); }
}
}
/* ---------- Basis ---------- */
@layer base {
body {
zoom: var(--z); /* große Bildschirme, siehe tokens */
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--c-ink); text-decoration: none; }
/* Alle Hover-Zustände nur bei echter Maus: Auf dem iPhone „kleben“ sie sonst nach dem
Antippen (Füllung bleibt stehen, Galerie hält an). Tastatur: :focus-visible, getrennt. */
@media (hover: hover) { a:hover { color: var(--c-green); } }
h1, h2, h3 {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: inherit;
}
h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
h3 { font-size: var(--t-h3); line-height: 1.15; }
p { font-size: var(--t-p); line-height: 1.75; font-weight: 300; }
small {
display: block;
font-size: 11px;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
}
:focus-visible { outline: 2px solid var(--c-green); outline-offset: 3px; }
/* iOS/Android: kein grauer Kasten beim Antippen – Rückmeldung geben die Hover-/Aktiv-Zustände selbst. */
/*
* Feste Grundfarbe: Findet Safari 26 (iPhone) keine passende feste Ebene am
* Rand, färbt es Status- und Adressleiste damit. Bei offenem Menü dunkel.
* Sichtbar ist sie sonst nirgends, body hat seinen eigenen Hintergrund.
*/
html { -webkit-tap-highlight-color: transparent; background-color: var(--c-bg); }
html.menue-offen { background-color: var(--c-ink); }
::selection { background: var(--c-green); color: var(--c-bg); }
}
/* ---------- Layout ---------- */
@layer layout {
.dv-site {
container: dv / inline-size;
position: relative;
z-index: 0;
transition: opacity var(--menue-dunkel) var(--ease-io), visibility 0s; /* hinter dem Menü, siehe .menue-ganz */
overflow-x: clip;
background: transparent;
color: var(--c-ink);
font-family: var(--font-text);
}
.dv-main { display: block; }
.dv-main:focus { outline: none; }
.dv-sec {
padding: var(--sec) var(--edge);
display: flex;
flex-direction: column;
gap: clamp(40px, 5cqw, 88px);
}
/* Versetzte Doppelspalte (Team, Leistungen): gleich groß, nur versetzt. */
.dv-versetzt {
display: flex;
flex-wrap: wrap;
gap: 72px clamp(40px, 6cqw, 120px);
align-items: flex-start;
}
/*
* Obergrenzen als max(px, cqw): bis 1600 px Containerbreite gilt der
* Designwert, darüber (2K, unter body { zoom }) wächst das Foto anteilig
* mit – sonst schrumpft sein Anteil an der Breite und rechts wird es leer.
* cqw-Wert = px / 16.
*/
.dv-versetzt__spalte {
flex: 1 1 300px;
max-width: max(560px, 35cqw);
display: flex;
flex-direction: column;
}
.dv-versetzt__spalte:nth-child(odd) { margin-right: clamp(48px, var(--dk), 0px); }
.dv-versetzt__spalte:nth-child(even) {
margin-left: clamp(48px, var(--dk), 0px);
margin-top: clamp(0px, var(--dk), 14cqw);
}
/*
* Foto und Text einer Person gehören zusammen auf einen Bildschirm: Auf
* breiten, flachen Bildschirmen wird das Hochformat oben/unten beschnitten
* statt höher als das Fenster (Nick, 12-10-2026). Mobil unverändert.
*/
@container dv (width >= 800px) {
.dv-versetzt .dv-foto { max-height: calc(var(--vh) * .6); }
}
}
/* ---------- Bausteine ---------- */
@layer components {
.dv-skip {
position: fixed;
z-index: 100;
left: 16px;
top: calc(16px + var(--leiste));
padding: 12px 16px;
background: var(--c-ink);
color: var(--c-bg);
font-size: 13px;
transform: translateY(-200%);
/* Oberhalb des Fensters ist auf dem iPhone (iOS 26) noch sichtbare Fläche. */
opacity: 0;
}
.dv-skip:focus { transform: none; opacity: 1; }
/*
* Seitenwechsel: Beim Klick auf einen unserer Links blendet die Seite ins Helle
* (Seitenfarbe, nicht reines Weiß, sonst blitzt es beim Aufblenden), die neue
* Seite blendet aus dem Hellen auf. Die Klassen setzen der Kopf-Schnipsel
* (dv-blende-ein) und main.js (dv-blende-aus). Über allem außer Sprunglink
* und Adminleiste.
*/
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 90;
background: var(--c-bg);
opacity: 0;
pointer-events: none;
transition: opacity .45s var(--ease-io);
}
/*
* Beim Ankommen hält main.js die Fläche, bis die sichtbaren Bilder fertig
* sind, und gibt sie mit dv-blende-los frei (eigener Name = frischer Start).
* Ohne Skript blendet dvBlendeEin nach 1,6 s von selbst auf.
*/
.dv-blende-ein body::after { animation: dvBlendeEin .7s var(--ease-out) 1.6s both; }
.dv-blende-ein.dv-blende-los body::after { animation: dvBlendeLos .7s var(--ease-out) both; }
.dv-blende-aus body::after { opacity: 1; pointer-events: auto; }
@keyframes dvBlendeEin { from { opacity: 1; } to { opacity: 0; } }
@keyframes dvBlendeLos { from { opacity: 1; } to { opacity: 0; } }
.dv-fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-foto { position: relative; overflow: hidden; }
.dv-foto--3x4 { aspect-ratio: 3 / 4; }
.dv-foto--4x5 { aspect-ratio: 4 / 5; box-sizing: border-box; }
.dv-tint { position: absolute; inset: 0; }
.dv-tint--hero { background: rgba(34, 34, 34, .34); }
.dv-tint--statement { background: rgba(34, 34, 34, .52); }
/* Körnung über Fotos */
.dv-grain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-image: var(--noise);
background-size: 200px;
opacity: var(--grain-op);
mix-blend-mode: overlay;
pointer-events: none;
animation: dvGrain 1s steps(5) infinite;
}
@media (max-width: 799px) {
.dv-grain { animation-name: dvGrainHart; animation-duration: .6s; animation-timing-function: steps(1, end); }
}
.dv-grain.is-ruhig { animation-play-state: paused; }
/* Sekundärlink: Großbuchstaben, Unterstreichung 1,5 px, Abstand 8 px, kein Symbol */
.dv-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-ink);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 8px;
padding: 8px 0;
}
@media (hover: hover) { .dv-link:hover { color: var(--c-green); } }
.dv-link--start { align-self: flex-start; }
.dv-link--insta { gap: 14px; text-transform: none; letter-spacing: .04em; align-self: flex-start; }
/* Einblenden beim Erscheinen (nur mit JavaScript, sonst sofort sichtbar) */
.js .dv-fade {
opacity: 0;
transform: translateY(var(--fy, 28px));
transition: opacity 1s ease, transform 1.2s var(--ease-out);
}
.js .dv-fade.is-in { opacity: 1; transform: none; }
.js .dv-fade--insta {
--fy: 20px;
transition: opacity .8s ease var(--d, 0s), transform 1s ease var(--d, 0s);
}
/* Überschriften: jedes Wort fährt einzeln hoch (Skript teilt die Wörter) */
.js [data-hw] {
display: inline-block;
opacity: 0;
transform: translateY(.45em);
transition: opacity 1s cubic-bezier(.25, .1, .25, 1) var(--hd, 0s), transform 1.1s var(--ease-out) var(--hd, 0s);
will-change: transform;
}
.js [data-shown] [data-hw] { opacity: 1; transform: none; }
/* Kopfzeile */
.dv-kopf {
position: fixed;
top: var(--leiste);
left: 0;
right: 0;
z-index: 40;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
padding: 18px var(--edge);
color: var(--c-bg);
mix-blend-mode: difference;
pointer-events: none;
}
.dv-kopf__burger {
justify-self: start;
pointer-events: auto;
position: relative;
width: 44px;
height: 44px;
margin-left: -9px;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.dv-kopf__bar {
position: absolute;
left: 9px;
width: 26px;
height: 1.5px;
background: var(--c-bg);
top: 21px;
transition: top .45s var(--ease-io);
}
.dv-kopf__bar[data-bar="1"] { top: 14px; }
.dv-kopf__bar[data-bar="3"] { top: 28px; }
.menue-offen .dv-kopf__bar[data-bar="1"],
.menue-offen .dv-kopf__bar[data-bar="3"] { top: 21px; }
/* Tippfläche ≥ 40 px hoch, ohne das Layout zu verschieben (Innenabstand + gleich großer negativer Außenabstand). */
.dv-kopf__logo { pointer-events: auto; display: flex; align-items: center; color: var(--c-bg); padding: 12px 10px; margin: -12px -10px; }
@media (hover: hover) { .dv-kopf__logo:hover { color: var(--c-bg); } }
.dv-kopf__logo .dv-logo { display: block; height: clamp(15px, 1.4cqw, 20px); width: auto; }
.dv-kopf__kontakt {
justify-self: end;
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
font-size: 13px;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-bg);
}
@media (hover: hover) { .dv-kopf__kontakt:hover { color: var(--c-bg); } }
/* Angedockter Button: Pille + Kreis ohne Abstand */
.dv-cta {
--base: var(--c-green);
--ink: var(--c-bg);
position: fixed;
z-index: 15;
left: 0;
right: 0;
bottom: 20px;
display: flex;
justify-content: center;
pointer-events: none;
transform: translateY(140px);
transition: transform .9s cubic-bezier(.34, 1.56, .64, 1), opacity var(--menue-dunkel) var(--ease-io), visibility 0s;
}
.dv-cta.is-sichtbar { transform: translateY(0); }
.dv-cta__mess { position: absolute; visibility: hidden; pointer-events: none; display: flex; }
.dv-cta__mess span { font-size: 12px; font-weight: 400; letter-spacing: .04em; white-space: nowrap; padding: 0 28px; }
.dv-cta__link {
pointer-events: auto;
display: flex;
align-items: center;
gap: 0;
color: var(--ink);
}
@media (hover: hover) { .dv-cta__link:hover { color: var(--ink); } }
.dv-cta__pill {
position: relative;
overflow: hidden;
height: 52px;
width: 0;
opacity: 0;
border-radius: 99px;
background: var(--base);
box-shadow: 0 10px 30px rgba(34, 34, 34, .16);
transition: width .7s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, background .4s ease;
}
.dv-cta.is-offen .dv-cta__pill { width: var(--w, 150px); opacity: 1; }
.dv-cta__fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
border-radius: 99px;
background: var(--c-ink);
transform: translateX(-101%);
transition: transform .6s var(--ease-io) .25s;
}
.dv-cta__label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 400;
letter-spacing: .04em;
white-space: nowrap;
opacity: 0;
transform: translateX(14px);
transition: opacity .45s ease 0s, transform .7s cubic-bezier(.22, 1, .36, 1) 0s, color .4s ease;
}
.dv-cta.is-offen .dv-cta__label { opacity: 1; transform: none; transition-delay: .18s, .18s, 0s; }
.dv-cta__kreis {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: 0 0 52px;
border-radius: 50%;
background: var(--base);
box-shadow: 0 10px 30px rgba(34, 34, 34, .16);
transition: background .4s ease;
}
.dv-cta__kreis .dv-cta__fill { inset: 0; width: auto; border-radius: 50%; transition: transform .45s var(--ease-io) 0s; }
.dv-cta__kreis svg {
position: relative;
transform: rotate(0deg);
transition: transform .5s var(--ease-io) 0s, color .4s ease 0s;
}
.dv-cta__link:focus-visible .dv-cta__fill { transform: translateX(0); }
@media (hover: hover) { .dv-cta__link:hover .dv-cta__fill { transform: translateX(0); } }
.dv-cta__link:focus-visible .dv-cta__pill .dv-cta__fill { transition-delay: 0s; }
@media (hover: hover) { .dv-cta__link:hover .dv-cta__pill .dv-cta__fill { transition-delay: 0s; } }
.dv-cta__link:focus-visible .dv-cta__kreis .dv-cta__fill { transition-delay: .4s; }
@media (hover: hover) { .dv-cta__link:hover .dv-cta__kreis .dv-cta__fill { transition-delay: .4s; } }
.dv-cta__link:focus-visible .dv-cta__kreis svg { transform: rotate(45deg); transition-delay: .4s; }
@media (hover: hover) { .dv-cta__link:hover .dv-cta__kreis svg { transform: rotate(45deg); transition-delay: .4s; } }
/* Vollbildmenü */
.dv-menue {
position: fixed;
inset: var(--leiste) 0 0;
z-index: 30;
background: var(--c-ink);
color: var(--c-bg);
display: flex;
flex-wrap: wrap;
overflow-y: auto;
overscroll-behavior: contain;
clip-path: inset(0 0 100% 0);
pointer-events: none;
transition: clip-path .8s var(--ease-io);
}
.dv-menue.is-offen { clip-path: inset(0 0 0 0); pointer-events: auto; }
/*
* Safari 26 (iPhone) zeigt unter Status- und Adressleiste die Seite, nicht das
* Menü (oben liegt die durchsichtige Kopfzeile, die Safari dort auswertet).
* Ist das Menü fertig aufgeklappt (main.js: menue-ganz), wird deshalb die
* Seite dahinter selbst dunkel: Inhalt unsichtbar, Hintergrund Menüfarbe.
* Zu sehen ist das nur dort, das Menü deckt alles andere. Vor dem Zuklappen
* nimmt main.js die Klasse zuerst weg. Ohne Beschnitt, weil Safari Ebenen
* mit clip-path als versteckt behandelt.
*/
.menue-ganz .dv-menue.is-offen { clip-path: none; }
/* Weich in --menue-dunkel (= MENUE_DUNKEL_MS in main.js), unsichtbar erst am Ende. */
body { transition: background-color var(--menue-dunkel) var(--ease-io); }
.menue-ganz body { background-color: var(--c-ink); }
.menue-ganz .dv-site { opacity: 0; visibility: hidden; transition-delay: 0s, var(--menue-dunkel); }
.menue-ganz .dv-cta { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, var(--menue-dunkel); }
.menue-ganz .dv-skip { visibility: hidden; }
.dv-menue__spalte {
flex: 1 1 360px;
display: flex;
flex-direction: column;
padding: 80px var(--edge) 40px;
min-height: 100%;
box-sizing: border-box;
}
.dv-menue__mitte {
margin: auto 0;
padding: 48px 0;
display: flex;
flex-direction: column;
gap: clamp(36px, 3cqw, 48px);
}
.dv-menue__nav { display: flex; flex-direction: column; gap: 14px; }
.dv-menue__link {
display: flex;
align-items: baseline;
gap: 18px;
color: var(--c-bg);
opacity: 0;
transform: translateY(24px);
transition: opacity .7s ease 0s, transform .9s var(--ease-out) 0s;
}
.dv-menue.is-offen .dv-menue__link {
opacity: 1;
transform: none;
transition-delay: calc(.3s + var(--i, 0) * .06s);
}
@media (hover: hover) { .dv-menue__link:hover { color: var(--c-sand); } }
.dv-menue__no { font-size: 11px; font-weight: 400; letter-spacing: .12em; color: var(--c-sand); min-width: 22px; }
.dv-menue__t {
font-family: var(--font-display);
font-style: italic;
font-size: calc(clamp(32px, 4cqw, 60px) * var(--fh));
line-height: 1.15;
}
.dv-menue__cta {
align-self: flex-start;
display: flex;
align-items: center;
gap: 0;
color: var(--c-ink);
opacity: 0;
transform: translateY(24px);
transition: opacity .7s ease 0s, transform .9s var(--ease-out) 0s;
}
.dv-menue.is-offen .dv-menue__cta { opacity: 1; transform: none; transition-delay: .7s; }
@media (hover: hover) { .dv-menue__cta:hover { color: var(--c-ink); } }
.dv-menue__pille {
display: flex;
align-items: center;
height: 52px;
padding: 0 28px;
border-radius: 99px;
background: var(--c-bg);
font-size: 12px;
font-weight: 400;
letter-spacing: .04em;
white-space: nowrap;
}
.dv-menue__kreis {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: 0 0 52px;
border-radius: 50%;
background: var(--c-bg);
}
.dv-menue__fuss { font-size: 13px; line-height: 1.75; font-weight: 300; color: var(--c-sand); }
.dv-menue__bild { flex: 1 1 420px; position: relative; overflow: hidden; min-height: 300px; display: block; }
.dv-menue__bild img { position: absolute; inset: 0; object-position: 50% 25%; }
.dv-menue a:focus-visible, .dv-menue button:focus-visible { outline-color: var(--c-bg); }
@media (width < 800px) {
.dv-menue__cta { align-self: center; }
.dv-menue__bild { display: none; }
}
/* Pfeil-Tasten des Sliders */
.dv-pfeil {
background: none;
border: 0;
width: 44px;
height: 44px;
cursor: pointer;
color: var(--c-ink);
display: grid;
place-items: center;
}
@media (hover: hover) { .dv-pfeil:hover { color: var(--c-green); } }
}
/* ---------- Abschnitte ---------- */
@layer sections {
/* 01 Hero */
.dv-hero { position: relative; height: calc(var(--vh) * 1.2); }
.dv-hero__stick { position: sticky; top: var(--leiste); height: var(--vh); overflow: hidden; }
/* will-change: Das Skript bewegt diese Elemente beim Scrollen – ohne eigene Ebene zeichnet das Handy sie in jedem Bild neu. */
.dv-hero__bild { position: absolute; inset: 0; transform: scale(1.12); transform-origin: 50% 60%; will-change: transform; }
.dv-hero__bild picture { display: contents; }
/* Bildausschnitt kommt aus dem Feld „Bildausschnitt (senkrecht)“ (Inline-Stil). */
.dv-hero__titel {
position: absolute;
left: var(--edge);
right: var(--edge);
bottom: clamp(110px, calc(var(--vh) * .14), 160px);
will-change: transform, opacity;
}
.dv-hero h1 { max-width: 11ch; color: var(--c-white); }
.dv-hero__scroll {
position: absolute;
right: clamp(20px, 3cqw, 48px);
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
color: var(--c-white);
}
.dv-hero__scroll span {
writing-mode: vertical-rl;
font-size: 10px;
font-weight: 400;
letter-spacing: .24em;
text-transform: uppercase;
}
/* 02 Willkommen */
.dv-willkommen {
position: relative;
min-height: clamp(calc(var(--vh) * 1.3), var(--dk), calc(var(--vh) * 2.1));
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--edge);
/*
* Bewusst OHNE Hintergrund (im Design #E9E9E9): Das Hero-Bild bleibt in
* seinem Rahmen, es gibt nichts abzudecken. Die Fläche in Seitenfarbe hat
* nur die Pflanzenschatten verdeckt und über „Das sind wir“ gerade
* abgeschnitten (Nick, 08-10-2026).
*/
}
.dv-willkommen__kachel { position: absolute; overflow: hidden; will-change: transform; }
.dv-willkommen__kachel--a { left: 0; top: 0; width: clamp(210px, 34cqw, 620px); aspect-ratio: 3 / 4; }
.dv-willkommen__kachel--b {
right: clamp(0px, var(--dk), 7cqw);
top: clamp(16%, var(--dk), 9%);
width: clamp(150px, 18cqw, 340px);
aspect-ratio: 4 / 5;
}
.dv-willkommen__kachel--c {
right: clamp(0px, var(--dk), 15cqw);
bottom: 0;
width: clamp(220px, 28cqw, 520px);
aspect-ratio: 3 / 4;
}
.dv-willkommen__kachel--d {
left: clamp(24px, var(--dk), 4cqw);
bottom: clamp(12%, var(--dk), 14%);
width: clamp(150px, 22cqw, 400px);
aspect-ratio: 1 / 1;
box-sizing: border-box;
}
.dv-willkommen__mitte {
position: relative;
z-index: 2;
max-width: 640px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.dv-willkommen h2 { text-wrap: balance; }
.dv-willkommen__text { max-width: 34ch; }
/* 03 Team / 05 Leistungen */
.dv-person { gap: 24px; }
.dv-person__text { display: flex; flex-direction: column; gap: 16px; }
.dv-person__kopf { display: flex; flex-direction: column; gap: 4px; }
.dv-person__kopf small { color: var(--c-brown); }
.dv-leistungen--ende { padding-bottom: clamp(24px, 3cqw, 56px); }
.dv-leistung { gap: 18px; color: var(--c-ink); }
@media (hover: hover) { .dv-leistung:hover { color: var(--c-ink); } }
.dv-leistung__text { --fy: 24px; display: flex; flex-direction: column; gap: 12px; }
.dv-leistung__text p { max-width: 36ch; }
/* 04 Statement */
.dv-statement { position: relative; height: calc(var(--vh) * .9); overflow: hidden; }
.dv-statement__innen { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
/*
* Handy: genau eine Bildschirmhöhe – das Bild ist vollflächig in dem Moment,
* in dem der Abschnitt den Bildschirm ausfüllt, und scrollt normal mit, kein
* Festkleben (Nick, 11-10-2026).
*/
@container dv (width < 800px) {
.dv-statement { height: var(--vh); }
}
/*
* Öffnen ohne clip-path (main.js): Der Rahmen wird auf die sichtbare Fläche
* skaliert und schneidet ab, der Inhalt (zoom) gegenläufig. Startwert =
* inset(14% 22%) bei scale(.92): Rahmen .92·.56 × .92·.72, Inhalt 1/.56 × 1/.72.
*/
.dv-statement__bild { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.dv-statement__zoom { position: absolute; inset: 0; will-change: transform; }
.js .dv-statement__bild { transform: scale(.5152, .6624); }
.js .dv-statement__zoom { transform: scale(1.7857, 1.3889); }
.dv-statement__bild picture { display: contents; }
.dv-statement__satz {
position: relative;
padding: 0 var(--edge);
max-width: 960px;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: calc(clamp(30px, 4.4cqw, 68px) * var(--fh));
line-height: 1.2;
color: var(--c-bg);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 .28em;
}
.dv-statement__satz span { transition: opacity .35s ease; }
.js .dv-statement__satz span { opacity: .2; }
/* 06 Galerie */
.dv-galerie { padding: clamp(56px, 5cqw, 96px) 0; display: flex; flex-direction: column; gap: clamp(32px, 3cqw, 56px); }
.dv-galerie__titel { margin: 0 var(--edge); }
.dv-galerie__baender { display: flex; flex-direction: column; gap: clamp(8px, 1cqw, 16px); }
.dv-galerie__band { overflow: hidden; height: clamp(170px, 20cqw, 340px); }
.dv-galerie__spur {
display: flex;
width: max-content;
height: 100%;
animation: dvMarquee var(--dauer, 55s) linear infinite;
animation-direction: var(--richtung, normal);
}
@media (hover: hover) { .dv-galerie__band:hover .dv-galerie__spur { animation-play-state: paused; } }
.dv-galerie__bild {
flex: 0 0 auto;
height: 100%;
margin-right: clamp(8px, 1cqw, 16px);
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.dv-galerie__bild--w1 { width: clamp(150px, 18cqw, 300px); }
.dv-galerie__bild--w2 { width: clamp(210px, 26cqw, 440px); }
.dv-galerie__bild--w3 { width: clamp(130px, 14cqw, 240px); }
.dv-galerie__bild--w4 { width: clamp(190px, 22cqw, 380px); }
.dv-galerie__bild--w5 { width: clamp(150px, 16cqw, 280px); }
.dv-galerie__bild--w7 { width: clamp(140px, 15cqw, 260px); }
.dv-galerie__bild--w8 { width: clamp(170px, 19cqw, 320px); }
.dv-galerie__bild--w9 { width: clamp(200px, 24cqw, 400px); }
/* 07 Kundenstimmen */
.dv-stimmen { padding: clamp(56px, 5cqw, 96px) 0 var(--sec); display: flex; flex-direction: column; gap: clamp(40px, 4cqw, 72px); }
.dv-stimmen__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0 var(--edge); }
.dv-stimmen__pfeile { display: flex; gap: 4px; }
.dv-stimmen__spur {
display: flex;
gap: clamp(24px, 5cqw, 96px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 var(--edge);
padding: 0 var(--edge);
scrollbar-width: none;
}
.dv-stimmen__spur::-webkit-scrollbar { display: none; }
/*
* Wischen und Ziehen (main.js): Während der Bewegung rastet nichts ein
* (is-frei), mit der Maus greift man zu (is-ziehen). Ein Wisch nach rechts
* am Anfang der Spur soll nicht „Zurück zur vorigen Seite“ auslösen.
*/
.dv-stimmen__spur { overscroll-behavior-x: contain; }
@media (hover: hover) and (pointer: fine) {
.dv-stimmen__spur { cursor: grab; }
}
.dv-stimmen__spur.is-frei { scroll-snap-type: none; }
.dv-stimmen__spur.is-ziehen { cursor: grabbing; user-select: none; }
.dv-stimmen__spur img { -webkit-user-drag: none; }
.dv-stimme {
position: relative;
flex: 0 0 clamp(calc(42% - 40px), var(--mk), 86%);
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 24px;
}
.dv-stimme__bild { align-self: flex-end; width: 48%; aspect-ratio: 4 / 5; box-sizing: border-box; position: relative; overflow: hidden; }
.dv-stimme__zitat {
position: relative;
margin: 0;
max-width: 88%;
font-family: var(--font-display);
font-style: italic;
font-size: calc(clamp(24px, 2.6cqw, 40px) * var(--fh));
line-height: 1.35;
}
/* Nur mit Bild greift das Zitat ins Bild; ohne Bild steht es oben in der Karte. */
.dv-stimme__bild + .dv-stimme__zitat { margin-top: -24%; }
.dv-stimme__zitat p { font-size: inherit; line-height: inherit; font-weight: inherit; }
.dv-stimme__name { position: relative; font-size: 13px; font-weight: 300; }
/*
* 08 Instagram – als Instagram erkennbar, nicht als zweite Galerie (Nick,
* 14-10-2026): Profilkopf mit rundem Bild und Ring (Grün statt Instagram-
* Verlauf – Palette), Beitragskarten mit Unterschrift, Likes, Kommentaren und
* Alter. Desktop: vier je Reihe (Standard zwei Reihen). Handy: zwei je Reihe
* bis an den Rand wie im Instagram-Profil, höchstens sechs (Nick, 14-10-2026).
*/
.dv-insta { padding: 0 0 var(--sec); }
.dv-insta__kopf {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 24px 40px;
padding: 0 var(--edge);
}
.dv-insta__konto { display: flex; align-items: center; flex-wrap: wrap; gap: 16px clamp(16px, 2cqw, 36px); }
.dv-insta__profil { display: flex; align-items: center; gap: 14px; color: var(--c-ink); }
.dv-insta__knoepfe { display: flex; gap: 10px; }
.dv-insta__avatar {
position: relative;
flex: none;
width: clamp(52px, 4.4cqw, 64px);
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
display: grid;
place-items: center;
background: var(--c-bg);
color: var(--c-green);
/* Ring wie bei Instagram: Bild – schmaler Spalt – Ring */
box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3.5px var(--c-green);
margin: 4px;
}
.dv-insta__avatar img { object-fit: cover; object-position: 50% 30%; }
.dv-insta__avatar .dv-insta__symbol { width: 50%; }
.dv-insta__wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-insta__name { font-weight: 400; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-insta__wer small { color: var(--c-brown); letter-spacing: .08em; text-transform: none; font-size: 12px; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-insta__folgen {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
color: var(--c-ink);
border: 1px solid var(--c-ink);
border-radius: 999px;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.dv-insta__folgen .dv-insta__symbol { flex: none; width: 16px; height: 16px; }
@media (hover: hover) {
.dv-insta__profil:hover { color: var(--c-ink); }
.dv-insta__folgen:hover { background: var(--c-ink); color: var(--c-bg); }
}
.dv-insta__raster {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(32px, 3cqw, 52px) clamp(16px, 1.6cqw, 28px);
margin-top: clamp(32px, 3cqw, 56px);
padding: 0 var(--edge);
}
.dv-insta__beitrag { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--c-ink); }
.dv-insta__bild { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.dv-insta__bild img { transition: transform .8s var(--ease-out); }
.dv-insta__typ { position: absolute; z-index: 3; top: 10px; right: 10px; color: var(--c-white); filter: drop-shadow(0 1px 2px rgba(34, 34, 34, .45)); }
.dv-insta__typ .dv-insta__symbol { display: block; width: 18px; height: 18px; }
.dv-insta__ebene {
position: absolute;
z-index: 2;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
background: rgba(34, 34, 34, .38);
color: var(--c-white);
font-size: 14px;
font-weight: 400;
opacity: 0;
transition: opacity .35s ease;
}
.dv-insta__ebene > span { display: inline-flex; align-items: center; gap: 6px; }
.dv-insta__ebene .dv-insta__symbol { width: 18px; height: 18px; }
.dv-insta__ebene .dv-insta__symbol--glyphe { width: 28px; height: 28px; }
@media (hover: hover) {
.dv-insta__beitrag:hover { color: var(--c-ink); }
.dv-insta__beitrag:hover .dv-insta__ebene { opacity: 1; }
.dv-insta__beitrag:hover .dv-insta__bild img { transform: scale(1.04); }
}
.dv-insta__beitrag:focus-visible .dv-insta__ebene { opacity: 1; }
.dv-insta__text {
font-size: 13px;
line-height: 1.55;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
}
/* Likes · Kommentare · Alter – immer sichtbar (auch auf dem Handy, dort gibt es kein Hover) */
.dv-insta__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--c-brown); font-size: 10px; margin-top: -4px; }
.dv-insta__zahl { display: inline-flex; align-items: center; gap: 5px; letter-spacing: .04em; }
.dv-insta__zahl .dv-insta__symbol { flex: none; width: 12px; height: 12px; }
.dv-insta__zahl + .dv-insta__alter::before { content: "·"; margin-right: 12px; }
.dv-insta__beitrag--nur-mobil { display: none; } /* am Desktop nur volle Reihen à 4 */
/* Handy/Tablet: zwei je Reihe bis an den Rand (schmale Fuge wie im Instagram-Profil), höchstens sechs. */
@container dv (width < 800px) {
/* wie in der Instagram-App: Bild + Name oben, „Folgen“ darunter über die ganze Breite */
.dv-insta__konto { width: 100%; }
.dv-insta__knoepfe { flex: 1 0 100%; }
.dv-insta__folgen { flex: 1 1 0; box-sizing: border-box; justify-content: center; }
.dv-insta__raster { gap: 22px 3px; padding: 0; }
.dv-insta__beitrag { gap: 8px; }
.dv-insta__beitrag--nur-mobil { display: flex; }
.dv-insta__beitrag--nur-desktop { display: none; }
.dv-insta__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-insta__text, .dv-insta__meta { padding-inline: 10px; }
}
/* 09 Bild + Text-Karte (Gutscheine) */
.dv-karte {
padding: 0 var(--edge) var(--sec) 0;
display: flex;
flex-wrap: wrap;
gap: 40px clamp(40px, 6cqw, 120px);
align-items: flex-end;
}
.dv-karte__bild { flex: 1.3 1 320px; height: calc(var(--vh) * .62); position: relative; overflow: hidden; }
.dv-karte__par { position: absolute; inset: -12% 0; will-change: transform; }
.dv-karte__box {
position: relative;
z-index: 2;
flex: 1 1 280px;
max-width: 520px;
display: flex;
flex-direction: column;
gap: 18px;
background: var(--c-bg);
padding: clamp(28px, 3cqw, 48px);
box-sizing: border-box;
margin-left: clamp(-12cqw, var(--mk), 24px);
margin-top: clamp(-96px, var(--dk), 0px);
}
/* Mit Skript nur über dem Foto deckend (main.js, flaechenDecken), sonst schneidet die Fläche die Pflanzenschatten an. */
.dv-karte__box[data-deck] {
background: linear-gradient(var(--c-bg), var(--c-bg)) var(--deck-x, 0) var(--deck-y, 0) / var(--deck-w, 0) var(--deck-h, 0) no-repeat;
}
.dv-karte__box p { max-width: 34ch; }
/* 10 FAQ */
.dv-faq { padding: 0 var(--edge) var(--sec); display: flex; flex-wrap: wrap; gap: 32px clamp(40px, 6cqw, 120px); }
.dv-faq__kopf { flex: 1 1 280px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.dv-faq__liste { flex: 1.6 1 320px; display: flex; flex-direction: column; gap: 4px; }
.dv-faq__eintrag { display: flex; flex-direction: column; }
.dv-faq__frage { font-family: var(--font-text); font-style: normal; font-size: inherit; line-height: inherit; letter-spacing: 0; }
.dv-faq__frage button {
background: none;
border: 0;
padding: 16px 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
text-align: left;
cursor: pointer;
font-family: var(--font-text);
font-size: clamp(13px, 1.1cqw, 16px);
font-weight: 300;
color: var(--c-ink);
}
.dv-faq__zeichen { font-size: 18px; font-weight: 300; color: var(--c-green); }
.dv-faq__zeichen::before { content: "+"; }
.dv-faq__frage button[aria-expanded="true"] .dv-faq__zeichen::before { content: "–"; }
.dv-faq__antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-io); }
.is-offen > .dv-faq__antwort { grid-template-rows: 1fr; }
/* Zugeklappt unsichtbar auch für Tastatur und Vorleser – erst nach dem Zuklappen (0,45 s). */
.dv-faq__antwort-innen { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .45s; }
.is-offen > .dv-faq__antwort > .dv-faq__antwort-innen { visibility: visible; transition-delay: 0s; }
.dv-faq__text { margin: 0 40px 16px 0; font-size: var(--t-p); line-height: 1.75; font-weight: 300; color: var(--c-brown); }
.dv-faq__text p { color: inherit; }
.dv-faq__text p + p { margin-top: 1em; }
.dv-faq__text a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* 11 Kontakt */
.dv-kontakt { padding: 0 var(--edge) var(--sec); display: flex; flex-wrap: wrap; gap: 40px clamp(48px, 8cqw, 160px); align-items: flex-end; }
.dv-kontakt__bild { flex: 1 1 220px; max-width: max(340px, 21.25cqw); aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.dv-kontakt__text { flex: 1.4 1 300px; display: flex; flex-direction: column; gap: 20px; margin-left: clamp(64px, var(--dk), 0px); }
.dv-kontakt h2 { max-width: 14ch; }
.dv-kontakt__text p { max-width: 38ch; }
/* Footer */
.dv-fuss {
position: relative;
overflow: hidden;
min-height: var(--vh);
box-sizing: border-box;
background: var(--c-ink);
color: var(--c-bg);
padding: clamp(120px, 10cqw, 180px) var(--edge) 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(64px, 6cqw, 112px);
}
.dv-fuss a { color: var(--c-bg); }
/* Größere Tippfläche für die kleinen Footer-Links (Handy ≥ 29 px statt 17–20 px), Layout unverändert. */
.dv-fuss a:not(.dv-fuss__cta) { padding-block: 6px; margin-block: -6px; }
/* Instagram und TikTok haben denselben Namen – das Zeichen davor zeigt, wohin der Link führt. */
.dv-fuss__sozial .dv-insta__symbol { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }
.dv-fuss :focus-visible { outline-color: var(--c-bg); }
.dv-fuss__oben { display: flex; flex-direction: column; gap: clamp(28px, 3cqw, 48px); align-items: flex-start; }
.dv-fuss h2 {
max-width: none; /* mobil 14ch, siehe Container-Regel unten (clamp(…, none) kennt nicht jeder Browser) */
font-size: calc(clamp(44px, 7.4cqw, 128px) * var(--fh));
line-height: 1.04;
letter-spacing: -.02em;
color: var(--c-bg);
}
@container dv (width < 800px) {
.dv-fuss h2 { max-width: 14ch; }
}
.dv-fuss__cta { display: flex; align-items: center; gap: 0; color: var(--c-bg); }
@media (hover: hover) { .dv-fuss__cta:hover { color: var(--c-bg); } }
.dv-fuss__pille {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
height: 52px;
padding: 0 28px;
border-radius: 99px;
background: var(--c-green);
font-size: 12px;
font-weight: 400;
letter-spacing: .04em;
white-space: nowrap;
}
.dv-fuss__fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
border-radius: 99px;
background: var(--c-bg);
transform: translateX(-101%);
transition: transform .6s var(--ease-io) .25s;
}
.dv-fuss__label { position: relative; color: var(--c-bg); transition: color .4s ease .25s; }
.dv-fuss__kreis {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: 0 0 52px;
border-radius: 50%;
background: var(--c-green);
}
.dv-fuss__kreis .dv-fuss__fill { inset: 0; width: auto; border-radius: 50%; transition: transform .45s var(--ease-io) 0s; }
.dv-fuss__kreis svg { position: relative; color: var(--c-bg); transform: rotate(0deg); transition: transform .5s var(--ease-io) 0s, color .4s ease 0s; }
.dv-fuss__cta:focus-visible .dv-fuss__fill { transform: translateX(0); }
@media (hover: hover) { .dv-fuss__cta:hover .dv-fuss__fill { transform: translateX(0); } }
.dv-fuss__cta:focus-visible .dv-fuss__pille .dv-fuss__fill { transition-delay: 0s; }
@media (hover: hover) { .dv-fuss__cta:hover .dv-fuss__pille .dv-fuss__fill { transition-delay: 0s; } }
.dv-fuss__cta:focus-visible .dv-fuss__label { color: var(--c-ink); transition-delay: 0s; }
@media (hover: hover) { .dv-fuss__cta:hover .dv-fuss__label { color: var(--c-ink); transition-delay: 0s; } }
.dv-fuss__cta:focus-visible .dv-fuss__kreis .dv-fuss__fill { transition-delay: .4s; }
@media (hover: hover) { .dv-fuss__cta:hover .dv-fuss__kreis .dv-fuss__fill { transition-delay: .4s; } }
.dv-fuss__cta:focus-visible .dv-fuss__kreis svg { color: var(--c-ink); transform: rotate(45deg); transition-delay: .4s; }
@media (hover: hover) { .dv-fuss__cta:hover .dv-fuss__kreis svg { color: var(--c-ink); transform: rotate(45deg); transition-delay: .4s; } }
.dv-fuss__unten { display: flex; flex-direction: column; gap: clamp(48px, 5cqw, 88px); }
.dv-fuss__spalten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(140px, var(--dk), 180px), 1fr));
gap: 40px 24px;
}
.dv-fuss__spalte { display: flex; flex-direction: column; gap: 12px; }
.dv-fuss__spalte small { letter-spacing: .14em; color: var(--c-sand); }
.dv-fuss__inhalt { font-size: var(--t-p); line-height: 1.75; font-weight: 300; color: var(--c-bg); }
.dv-fuss__unter { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dv-fuss__links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: var(--t-p); font-weight: 300; }
.dv-fuss__rand { display: flex; flex-direction: column; }
.dv-fuss__zeile {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 14px 24px;
padding-bottom: clamp(16px, 1.6cqw, 28px);
font-size: 11px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-sand);
}
.dv-fuss__zeile a { color: var(--c-sand); }
.dv-fuss__copy { justify-self: start; letter-spacing: inherit; }
.dv-fuss__recht { display: flex; gap: 24px; justify-self: start; }
.dv-fuss__credits {
justify-self: start;
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
text-transform: none;
letter-spacing: .04em;
font-size: 12px;
}
/* Nur der Link im Satz („Website by Simi Media“) ist unterstrichen – Farbe allein genügt nicht (WCAG 1.4.1). */
.dv-fuss__credits span a { text-decoration: underline; text-underline-offset: .2em; }
@container dv (width >= 800px) {
.dv-fuss__zeile { grid-template-columns: 1fr auto 1fr; }
.dv-fuss__recht { justify-self: center; }
.dv-fuss__credits { justify-self: end; justify-content: flex-end; }
}
.dv-fuss__logo {
margin: 0 calc(-1 * var(--edge));
height: clamp(56px, 13.6cqw, 200px);
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 4px;
color: var(--c-logo);
}
.dv-fuss__logo .dv-logo-fuss { display: block; width: calc(100% - 2 * clamp(12px, 2cqw, 32px)); height: auto; flex: 0 0 auto; }
/* Pflanzenschatten */
.dv-blaetter {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--leaf-h, 100%);
overflow: hidden;
pointer-events: none;
z-index: -1;
}
.dv-blaetter__gruppe {
position: absolute;
top: var(--top);
width: calc(clamp(260px, 36cqw, 620px) * var(--gr));
aspect-ratio: 1 / 1;
filter: blur(var(--blur));
}
.dv-blaetter__gruppe--l { left: 0; transform: translateX(-22%); }
.dv-blaetter__gruppe--r { right: 0; transform: translateX(22%) scaleX(-1); }
@container dv (width < 800px) {
.dv-blaetter__gruppe { filter: blur(var(--blur-m)); }
}
.dv-blaetter__drift {
position: absolute;
inset: 0;
transform-origin: 0% 50%;
animation: dvDrift var(--dur) ease-in-out var(--del) infinite;
}
.dv-blaetter__blatt { position: absolute; left: 0; top: 50%; width: var(--w); }
.dv-blaetter__dreh { transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(var(--ang)); }
.dv-blaetter__wind { transform-origin: 50% 100%; animation: var(--wind, dvWindA) var(--wdur) ease-in-out var(--wdel) infinite; }
.dv-blaetter__wind--A { --wind: dvWindA; }
.dv-blaetter__wind--B { --wind: dvWindB; }
.dv-blaetter img {
display: block;
width: 100%;
height: auto;
transform-origin: 50% 100%;
animation: dvFlutter var(--fdur) ease-in-out var(--fdel) infinite;
}
/* Hero – kleine Variante (FAQ, Gutscheine, Kontakt): 55 % Fensterhöhe, mindestens 380 px */
.dv-hero--klein { height: calc(var(--vh) * .55); min-height: 380px; }
.dv-hero--klein .dv-hero__stick { position: relative; top: auto; height: 100%; }
.dv-hero--klein .dv-hero__titel { bottom: clamp(40px, 5cqw, 80px); }
/* Varianten gemeinsamer Bausteine je Einsatzort (gleiche Bausteine, nur anderer Abstand) */
.dv-galerie--unten { padding: 0 0 var(--sec); }
.dv-stimmen--unten { padding-top: 0; }
.dv-faq--abstand { padding-top: var(--sec); }
.dv-statement--gross .dv-statement__satz { font-size: calc(clamp(40px, 6.4cqw, 112px) * var(--fh)); line-height: 1.1; }
/* Intro (Leistungen, Gutscheine; „weit“ auf Über uns) */
.dv-intro {
padding: var(--sec) var(--edge);
display: flex;
flex-wrap: wrap;
gap: 48px clamp(40px, 6cqw, 120px);
align-items: flex-end;
}
.dv-intro__spalte { flex: 1.4 1 320px; display: flex; flex-direction: column; gap: 32px; }
.dv-intro h2 { max-width: 15ch; }
.dv-intro__text { display: flex; flex-direction: column; gap: 16px; max-width: 48ch; margin-left: clamp(0px, var(--dk), 8cqw); }
.dv-intro__bild {
flex: 1 1 220px;
max-width: max(380px, 23.75cqw);
aspect-ratio: 4 / 5;
position: relative;
overflow: hidden;
margin-left: clamp(88px, var(--dk), 0px);
}
.dv-intro--weit { gap: 56px clamp(40px, 6cqw, 120px); }
.dv-intro--weit .dv-intro__spalte { flex-grow: 1.5; }
.dv-intro--weit h2 { max-width: 16ch; }
.dv-intro--weit .dv-intro__text { max-width: 50ch; }
.dv-intro--weit .dv-intro__bild { max-width: max(400px, 25cqw); aspect-ratio: 3 / 4; }
/* Behandlungen */
.dv-behandlungen { padding: 0 var(--edge) var(--sec); display: flex; flex-direction: column; gap: clamp(40px, 5cqw, 88px); }
.dv-behandlungen__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px clamp(24px, 2.4cqw, 40px); align-items: start; }
@container dv (width >= 800px) {
.dv-behandlungen__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dv-behandlung { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dv-behandlung__text { display: flex; flex-direction: column; gap: 12px; }
.dv-behandlung h3 { hyphens: auto; overflow-wrap: break-word; }
.dv-behandlung p { max-width: 36ch; }
/* Überschrift, Bilder und Text sollen zusammen ins Fenster passen (wie Team). */
@container dv (width >= 800px) {
.dv-behandlung .dv-foto { max-height: calc(var(--vh) * .5); }
}
/* Preise */
.dv-preise { padding: 0 var(--edge) var(--sec); display: flex; flex-direction: column; gap: clamp(40px, 5cqw, 88px); }
.dv-preise__spalten { display: flex; flex-wrap: wrap; gap: 64px clamp(48px, 8cqw, 160px); align-items: flex-start; }
.dv-preise__spalte { flex: 1.3 1 320px; display: flex; flex-direction: column; }
.dv-preise__spalte--rechts { flex: 1 1 280px; }
.dv-preise__gruppe { font-size: clamp(22px, 2cqw, 30px); line-height: 1.15; margin: 56px 0 12px; }
.dv-preise__gruppe:first-child { margin-top: 0; }
.dv-preise__zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: baseline;
padding: 14px 0;
}
.dv-preise__zeile dt { font-size: clamp(13px, 1.1cqw, 16px); font-weight: 300; }
.dv-preise__zeile dd {
margin: 0;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(17px, 1.4cqw, 20px);
white-space: nowrap;
}
.dv-preise__hinweis { color: var(--c-brown); margin-top: 28px; }
.dv-preise__link { margin-top: 16px; display: flex; }
/* Ablauf in Schritten */
.dv-schritte { padding: 0 var(--edge) var(--sec); display: flex; flex-wrap: wrap; gap: 48px clamp(48px, 8cqw, 160px); }
.dv-schritte__kopf { flex: 1 1 280px; }
.dv-schritte h2 { max-width: 10ch; }
.dv-schritte--breit h2 { max-width: 12ch; }
.dv-schritte__liste { flex: 1.6 1 320px; display: flex; flex-direction: column; gap: clamp(40px, 4cqw, 64px); }
.dv-schritt {
display: grid;
grid-template-columns: clamp(44px, 5cqw, 88px) minmax(0, 1fr);
gap: 16px;
align-items: baseline;
}
.dv-schritt__nr { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 1.8cqw, 28px); color: var(--c-green); }
.dv-schritt__text { display: flex; flex-direction: column; gap: 10px; }
.dv-schritt h3 { font-size: calc(clamp(24px, 2.4cqw, 36px) * var(--fh)); }
.dv-schritt p { max-width: 44ch; }
/* Profile (Über uns) – mobil: Name über dem Foto, Zitat schiebt sich darüber */
.dv-profil { padding: 0 0 var(--sec); }
.dv-profil__raster { display: flex; flex-direction: column; gap: 28px; }
.dv-profil__kopf { padding: 0 24px; display: flex; flex-direction: column; gap: 6px; }
.dv-profil__kopf small { color: var(--c-brown); }
.dv-profil__bild { position: relative; overflow: hidden; aspect-ratio: 4 / 5; width: 80%; align-self: flex-start; }
.dv-profil__par { position: absolute; inset: 0; will-change: transform; }
.dv-profil__verlauf { display: none; position: absolute; inset: 0; background: linear-gradient(to top, rgba(34, 34, 34, .55) 0%, rgba(34, 34, 34, 0) 45%); }
.dv-profil__inhalt { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.dv-profil__zitat {
position: relative;
z-index: 2;
margin: -72px 24px 0 56px;
padding: 24px 24px 0;
background: var(--c-bg);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 24px;
line-height: 1.3;
color: var(--c-green);
}
/* Wie bei der Karte: Fläche nur über dem Foto (main.js, flaechenDecken). */
.dv-profil__zitat[data-deck] {
background: linear-gradient(var(--c-bg), var(--c-bg)) var(--deck-x, 0) var(--deck-y, 0) / var(--deck-w, 0) var(--deck-h, 0) no-repeat;
}
.dv-profil__zitat p { font: inherit; color: inherit; }
.dv-profil__text { padding: 0 24px; display: flex; flex-direction: column; gap: 16px; }
.dv-profil--rechts .dv-profil__kopf { align-items: flex-end; text-align: right; }
.dv-profil--rechts .dv-profil__bild { align-self: flex-end; }
.dv-profil--rechts .dv-profil__zitat { margin: -72px 56px 0 24px; }
/* ab 800 px: Foto (36cqw) mit Name darauf, Zitat und Text daneben */
@container dv (width >= 800px) {
.dv-profil__raster {
display: grid;
grid-template-columns: 36cqw minmax(0, 1fr);
grid-template-areas: "bild inhalt";
column-gap: clamp(40px, 6cqw, 120px);
align-items: end;
padding: 0 var(--edge);
}
.dv-profil--rechts .dv-profil__raster { grid-template-columns: minmax(0, 1fr) 36cqw; grid-template-areas: "inhalt bild"; }
.dv-profil__bild, .dv-profil--rechts .dv-profil__bild { grid-area: bild; width: auto; align-self: auto; max-height: calc(var(--vh) * .82); }
.dv-profil__kopf, .dv-profil--rechts .dv-profil__kopf {
grid-area: bild;
position: relative;
z-index: 2;
align-self: end;
align-items: stretch;
text-align: left;
gap: 8px;
padding: 0 var(--edge) clamp(24px, 3cqw, 56px);
color: var(--c-white);
}
.dv-profil__kopf small { color: var(--c-white); }
.dv-profil__par { inset: -8% 0; }
.dv-profil__verlauf { display: block; }
.dv-profil__inhalt { grid-area: inhalt; gap: 32px; padding-bottom: clamp(0px, 1cqw, 16px); }
.dv-profil__zitat, .dv-profil--rechts .dv-profil__zitat {
z-index: auto;
margin: 0;
padding: 0;
background: none;
max-width: 18ch;
font-size: calc(clamp(26px, 3.2cqw, 48px) * var(--fh));
line-height: 1.2;
}
.dv-profil__text { padding: 0; max-width: 52ch; }
}
/* Textblock (Gemeinsam) */
.dv-textblock { padding: 0 var(--edge) var(--sec); display: flex; flex-wrap: wrap; gap: 32px clamp(48px, 8cqw, 160px); }
.dv-textblock__kopf { flex: 1 1 280px; }
.dv-textblock__text { flex: 1.6 1 320px; max-width: 56ch; display: flex; flex-direction: column; gap: 16px; }
/* Werte */
.dv-werte { padding: var(--sec) var(--edge) 0; display: flex; flex-direction: column; gap: clamp(48px, 5cqw, 96px); }
.dv-werte h2 { max-width: 14ch; }
.dv-werte__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 4cqw, 64px) clamp(32px, 3.2cqw, 56px); }
.dv-wert { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dv-wert__nr { color: var(--c-brown); text-transform: none; }
.dv-wert h3 { font-size: calc(clamp(26px, 2.3cqw, 36px) * var(--fh)); line-height: 1.2; hyphens: auto; overflow-wrap: break-word; }
@container dv (width >= 800px) {
.dv-werte__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dv-wert:nth-child(even) { margin-top: 6cqw; }
}
/* Studio (Über uns) */
.dv-studio { padding: var(--sec) 0; display: flex; flex-direction: column; gap: clamp(40px, 5cqw, 88px); }
.dv-studio__titel { margin: 0 var(--edge); }
.dv-studio__gross {
position: relative;
margin-left: clamp(56px, var(--dk), 22cqw);
height: clamp(calc(var(--vh) * .55), var(--dk), calc(var(--vh) * .8));
overflow: hidden;
}
.dv-studio__par { position: absolute; inset: -10% 0; will-change: transform; }
.dv-studio__unten { display: flex; flex-wrap: wrap; gap: 32px clamp(40px, 6cqw, 120px); padding: 0 var(--edge); align-items: flex-start; }
.dv-studio__klein {
position: relative;
z-index: 2;
width: max(150px, 18cqw);
aspect-ratio: 4 / 5;
overflow: hidden;
margin-top: clamp(-120px, var(--dk), -16cqw);
}
.dv-studio__text { flex: 1 1 280px; max-width: 46ch; display: flex; flex-direction: column; gap: 18px; }
/* Info-Raster (Gutscheine, Kontakt) – Anschrift und Zeiten aus „Firma & Kontakt“ */
.dv-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px clamp(24px, 3cqw, 56px); }
.dv-infos--eng { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px 24px; }
.dv-infos__punkt { display: flex; flex-direction: column; gap: 10px; }
.dv-infos__punkt small { color: var(--c-brown); }
/* Gut zu wissen (Gutscheine) */
.dv-gzw { padding: 0 var(--edge) var(--sec); display: flex; flex-direction: column; gap: clamp(40px, 4cqw, 72px); }
.dv-gzw__links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
/* Häufige Fragen (eigene Seite) – Gruppen in zwei Spalten */
.dv-faqseite { padding: var(--sec) var(--edge); display: flex; flex-direction: column; gap: clamp(72px, 7cqw, 128px); }
.dv-faqseite__gruppen { column-count: 1; column-gap: clamp(48px, 6cqw, 120px); margin-bottom: calc(-1 * clamp(64px, 6cqw, 112px)); }
@container dv (width >= 800px) {
.dv-faqseite__gruppen { column-count: 2; }
}
.dv-faqseite__gruppe {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.6cqw, 28px);
min-width: 0;
break-inside: avoid;
padding-bottom: clamp(64px, 6cqw, 112px);
}
.dv-faqseite__gruppe h2 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: normal; }
.dv-faqseite__liste { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dv-faqseite__fuss { display: flex; flex-direction: column; gap: 16px; max-width: 44ch; }
/* Kontaktwege */
.dv-kontaktwege { padding: var(--sec) var(--edge); display: flex; flex-direction: column; gap: clamp(48px, 5cqw, 88px); }
.dv-kontaktwege__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 3.6cqw, 56px) clamp(32px, 4cqw, 72px); }
@container dv (width >= 800px) {
.dv-kontaktwege__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dv-kontaktweg { display: flex; flex-direction: column; gap: 6px; color: var(--c-ink); }
@media (hover: hover) { .dv-kontaktweg:hover { color: var(--c-green); } }
@container dv (width >= 800px) {
.dv-kontaktweg--breit { grid-column: 1 / -1; } /* ungerade Anzahl: E-Mail über die volle Breite, Instagram + TikTok gemeinsam darunter */
}
.dv-kontaktweg small { color: var(--c-brown); }
.dv-kontaktweg__wert {
font-family: var(--font-display);
font-style: italic;
font-size: calc(clamp(22px, 2.8cqw, 42px) * var(--fh));
line-height: 1.2;
white-space: nowrap;
}
/* Besuch uns im Studio (Kontakt) */
.dv-kstudio { padding: 0 var(--edge) var(--sec); display: flex; flex-wrap: wrap; gap: 48px clamp(48px, 8cqw, 160px); align-items: flex-end; }
.dv-kstudio__bild {
flex: 1 1 300px;
max-width: max(520px, 32.5cqw);
aspect-ratio: 4 / 5;
position: relative;
overflow: hidden;
margin-right: clamp(48px, var(--dk), 0px);
}
.dv-kstudio__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: clamp(32px, 3cqw, 48px); }
.dv-kstudio h2 { max-width: 16ch; }
/* Nachricht – Formular */
.dv-nachricht { padding: 0 var(--edge) var(--sec); display: flex; flex-wrap: wrap; gap: 48px clamp(48px, 8cqw, 160px); }
.dv-nachricht__kopf { flex: 1 1 280px; display: flex; flex-direction: column; gap: 20px; }
.dv-nachricht h2 { max-width: 16ch; text-wrap: balance; }
.dv-nachricht__kopf p { max-width: 36ch; }
.dv-nachricht__inhalt { flex: 1.5 1 320px; transition: height .5s var(--ease-io); }
.dv-formular { display: flex; flex-direction: column; gap: 32px; max-width: 640px; transition: opacity .4s ease; }
.dv-formular__reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; }
@container dv (width >= 800px) {
.dv-formular__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dv-formular__feld { display: flex; flex-direction: column; gap: 8px; }
.dv-formular__feld > span { font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brown); }
.dv-formular__feld input,
.dv-formular__feld textarea {
font-family: var(--font-text);
font-size: 15px;
font-weight: 300;
color: var(--c-ink);
background: transparent;
border: 0;
border-bottom: 1px solid var(--c-ink);
padding: 10px 0;
outline: none;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
.dv-formular__feld textarea { resize: vertical; }
/*
* Aktives Feld: Unterstrich grün und kräftiger statt eines Rahmens. Textfelder
* zählen auch beim Anklicken als :focus-visible – ein grüner Kasten wirkte
* dort wie ein Fehler (Nick, 14-10-2026). Der Schatten ändert keine Maße.
*/
.dv-formular__feld input:focus,
.dv-formular__feld textarea:focus { outline: none; border-bottom-color: var(--c-green); box-shadow: 0 1px 0 var(--c-green); }
/* iOS vergrößert die Seite bei Eingabefeldern unter 16 px – auf Touchgeräten 16 px. */
@media (pointer: coarse) {
.dv-formular__feld input, .dv-formular__feld textarea { font-size: 16px; }
}
.dv-formular__hinweis { font-size: 12px; line-height: 1.75; font-weight: 300; color: var(--c-brown); }
.dv-formular__hinweis a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (hover: hover) { .dv-formular__hinweis a:hover { color: var(--c-green); } }
.dv-formular__fehler { color: var(--c-ink); }
.dv-formular__senden { align-self: flex-start; display: flex; align-items: center; gap: 0; background: none; border: 0; padding: 0; cursor: pointer; color: var(--c-bg); }
.dv-formular__senden:disabled { cursor: progress; opacity: .7; }
.dv-formular__pille {
display: flex;
align-items: center;
height: 52px;
padding: 0 28px;
border-radius: 99px;
background: var(--c-green);
font-family: var(--font-text);
font-size: 12px;
font-weight: 400;
letter-spacing: .04em;
white-space: nowrap;
}
.dv-formular__kreis { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-green); }
.dv-formular__danke { display: flex; flex-direction: column; gap: 12px; max-width: 40ch; transition: opacity .5s ease; }
.dv-formular__danke:focus { outline: none; }
.dv-formular__topf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Textseiten (Rechtliches, Fehlerseite) */
.dv-main--text { min-height: calc(var(--vh) * .8); }
.dv-text { box-sizing: border-box; padding: clamp(140px, 14cqw, 220px) var(--edge) var(--sec); max-width: 68ch; }
.dv-text h1 { margin-bottom: clamp(32px, 3cqw, 56px); }
.dv-text__inhalt > * + * { margin-top: 1.2em; }
/* Rechtstexte: Zwischenüberschriften ruhiger als im übrigen Design (18 Abschnitte im Datenschutz), Nick 14-10-2026 */
.dv-text__inhalt h2 { font-size: clamp(22px, 2cqw, 30px); line-height: 1.2; margin-top: 2em; }
.dv-text__inhalt h3 { font-size: clamp(20px, 2cqw, 28px); margin-top: 1.4em; }
.dv-text__inhalt a { text-decoration: underline; text-underline-offset: .2em; }
.dv-text__inhalt ul { list-style: disc; padding-left: 1.2em; }
.dv-text__inhalt li { font-size: var(--t-p); line-height: 1.75; font-weight: 300; }
/*
* Impressum mit Box „Projektumsetzung“: Text links (68ch), Box ganz rechts
* (bündig mit dem Seitenrand) und beim Lesen mitlaufend; unter 800 px Container
* darunter. Nur Haarlinie, keine Fläche; Kontaktwege nebeneinander, damit die
* Box flach bleibt (Nick, 27-10-2026).
*/
.dv-text--box { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(56px, 6cqw, 96px); }
.dv-text--box h1 { margin-bottom: 0; }
@container dv (width >= 800px) {
.dv-text--box {
grid-template-columns: minmax(0, 68ch) clamp(360px, 42cqw, 620px); /* mitwachsend, sonst bleibt bei 1024 px kaum Text übrig */
justify-content: space-between;
column-gap: clamp(48px, 5cqw, 120px);
row-gap: clamp(32px, 3cqw, 56px);
align-items: start;
}
.dv-text--box h1 { grid-column: 1 / -1; }
.dv-projekt { position: sticky; top: calc(var(--leiste) + clamp(96px, 9cqw, 140px)); }
}
.dv-projekt {
display: flex;
flex-direction: column;
gap: 18px;
padding: clamp(28px, 2.6cqw, 40px);
border: 1px solid rgba(34, 34, 34, .25);
}
.dv-projekt__titel { color: var(--c-brown); }
.dv-projekt__logo { display: block; align-self: flex-start; }
.dv-projekt__logo img { display: block; width: clamp(150px, 12cqw, 190px); height: auto; }
.dv-projekt p { font-size: clamp(12px, .88cqw, 13px); line-height: 1.7; color: var(--c-ink); } /* eine Stufe unter dem Impressumstext (Nick 27-10-2026) */
.dv-projekt__wege { display: flex; flex-wrap: wrap; gap: 14px 32px; padding-top: 18px; border-top: 1px solid rgba(34, 34, 34, .15); }
.dv-projekt__wege li { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-p); font-weight: 300; }
.dv-projekt__wege small { color: var(--c-brown); font-size: 10px; }
.dv-projekt__wege a { color: var(--c-ink); text-decoration: underline; text-underline-offset: .2em; }
@media (hover: hover) { .dv-projekt__wege a:hover { color: var(--c-green); } }
}
/* ---------- Hilfsklassen ---------- */
@layer utilities {
/*
* Während gescrollt wird, stehen die Pflanzenschatten still (main.js
* setzt .dv-scrollt, 250 ms nach dem letzten Scrollen weg). Bewegt sich etwas
* unter einer Unschärfe, rechnet der Browser sie in jedem Bild neu – das
* war die Hauptlast beim Scrollen auf dem Handy. Angehalten, nicht
* abgeschaltet: Danach geht es an derselben Stelle weiter, nichts springt.
* In @layer utilities, weil die Blätter-Animation in „sections“ steht und
* eine spätere Ebene sonst gewinnt.
*/
.dv-scrollt .dv-blaetter__drift,
.dv-scrollt .dv-blaetter__wind,
.dv-scrollt .dv-blaetter img { animation-play-state: paused; }
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
/*
* ---------- Scroll-Effekte als CSS-Scroll-Animationen ----------
* Hero-Zoom, Parallax und Zitat-Öffnung laufen hier direkt mit dem Scrollen
* des Browsers – auf iOS scrollt Safari auf einem eigenen Faden, und jede
* Bewegung per Skript hinkt dort ein Bild hinterher und zittert. Die Kurven
* entsprechen den Formeln in main.js (update); das Skript übernimmt nur noch,
* wo der Browser keine Scroll-Animationen kennt (CSS.supports).
* Ungelayert, damit nichts aus den Ebenen dazwischenfunkt.
*/
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Großer Hero (1,2 × Fensterhöhe): „contain“ = vom Seitenanfang bis der Abschnitt unten abschließt. */
[data-fx="hero"] { view-timeline-name: --dv-hero; }
[data-fx="hero"] [data-img] {
animation: dvSdaHeroBild linear both;
animation-timeline: --dv-hero;
animation-range: contain 0% contain 100%;
}
[data-fx="hero"] [data-title] {
animation: dvSdaHeroTitel linear both;
animation-timeline: --dv-hero;
animation-range: contain 0% contain 100%;
}
/* Kleiner Hero: von oben bündig bis ganz hinausgescrollt. */
[data-fx="heroS"] { view-timeline-name: --dv-heros; }
[data-fx="heroS"] [data-img] {
animation: dvSdaHeroBild linear both;
animation-timeline: --dv-heros;
animation-range: exit 0% exit 100%;
}
/* Parallaxe: vom Eintreten unten bis zum Verlassen oben; --speed steht am Element. */
[data-fx="par"] {
animation: dvSdaPar linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
/* overflow: hidden machte die Bildrahmen zu Scrollbereichen – die Zeitleiste hätte sich an ihnen statt an der Seite ausgerichtet. clip schneidet gleich ab, ohne das. */
.dv-karte__bild, .dv-studio__gross, .dv-profil__bild { overflow: clip; }
@container dv (width < 800px) {
[data-fx="par"][data-nur-desktop] { animation: none; }
}
/* Zitat: Rahmen und Inhalt gegenläufig (siehe .dv-statement__bild), 2,5-%-Schritte. */
[data-fx="statement"] { view-timeline-name: --dv-statement; }
[data-fx="statement"] [data-clip] {
animation: dvSdaZitatRahmen linear both;
animation-timeline: --dv-statement;
animation-range: cover 0% cover 100%;
}
[data-fx="statement"] [data-clip-innen] {
animation: dvSdaZitatInhalt linear both;
animation-timeline: --dv-statement;
animation-range: cover 0% cover 100%;
}
/* Handy: Abschnitt = Bildschirmhöhe, gleiche Formel, nur mit anderem Verhältnis vorausgerechnet. */
@container dv (width < 800px) {
[data-fx="statement"] [data-clip] { animation-name: dvSdaZitatRahmenMobil; }
[data-fx="statement"] [data-clip-innen] { animation-name: dvSdaZitatInhaltMobil; }
}
}
}
@keyframes dvSdaHeroBild { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes dvSdaHeroTitel {
0% { transform: translate3d(0, 0, 0); opacity: 1; }
71.43% { opacity: 0; }
100% { transform: translate3d(0, -90px, 0); opacity: 0; }
}
@keyframes dvSdaPar {
from { transform: translate3d(0, calc(var(--speed, 0) * -0.5 * (var(--vh) + 100%)), 0); }
to { transform: translate3d(0, calc(var(--speed, 0) * 0.5 * (var(--vh) + 100%)), 0); }
}
@keyframes dvSdaZitatRahmenMobil {
0% { transform: scale(0.5152, 0.6624); }
2.5% { transform: scale(0.5390, 0.6776); }
5% { transform: scale(0.5628, 0.6927); }
7.5% { transform: scale(0.5866, 0.7079); }
10% { transform: scale(0.6104, 0.7230); }
12.5% { transform: scale(0.6343, 0.7382); }
15% { transform: scale(0.6592, 0.7546); }
17.5% { transform: scale(0.6872, 0.7745); }
20% { transform: scale(0.7155, 0.7945); }
22.5% { transform: scale(0.7441, 0.8148); }
25% { transform: scale(0.7730, 0.8352); }
27.5% { transform: scale(0.8021, 0.8558); }
30% { transform: scale(0.8316, 0.8765); }
32.5% { transform: scale(0.8613, 0.8975); }
35% { transform: scale(0.8914, 0.9186); }
37.5% { transform: scale(0.9217, 0.9400); }
40% { transform: scale(0.9523, 0.9615); }
42.5% { transform: scale(0.9832, 0.9832); }
45% { transform: scale(0.9888, 0.9888); }
47.5% { transform: scale(0.9944, 0.9944); }
50% { transform: scale(1.0000, 1.0000); }
52.5% { transform: scale(0.9944, 0.9944); }
55% { transform: scale(0.9888, 0.9888); }
57.5% { transform: scale(0.9832, 0.9832); }
60% { transform: scale(0.9776, 0.9776); }
62.5% { transform: scale(0.9720, 0.9720); }
65% { transform: scale(0.9664, 0.9664); }
67.5% { transform: scale(0.9608, 0.9608); }
70% { transform: scale(0.9552, 0.9552); }
72.5% { transform: scale(0.9496, 0.9496); }
75% { transform: scale(0.9440, 0.9440); }
77.5% { transform: scale(0.9384, 0.9384); }
80% { transform: scale(0.9328, 0.9328); }
82.5% { transform: scale(0.9272, 0.9272); }
85% { transform: scale(0.9216, 0.9216); }
87.5% { transform: scale(0.9200, 0.9200); }
90% { transform: scale(0.9200, 0.9200); }
92.5% { transform: scale(0.9200, 0.9200); }
95% { transform: scale(0.9200, 0.9200); }
97.5% { transform: scale(0.9200, 0.9200); }
100% { transform: scale(0.9200, 0.9200); }
}
@keyframes dvSdaZitatInhaltMobil {
0% { transform: scale(1.7857, 1.3889); }
2.5% { transform: scale(1.7068, 1.3578); }
5% { transform: scale(1.6346, 1.3281); }
7.5% { transform: scale(1.5683, 1.2997); }
10% { transform: scale(1.5071, 1.2725); }
12.5% { transform: scale(1.4505, 1.2463); }
15% { transform: scale(1.3980, 1.2213); }
17.5% { transform: scale(1.3492, 1.1972); }
20% { transform: scale(1.3037, 1.1740); }
22.5% { transform: scale(1.2611, 1.1518); }
25% { transform: scale(1.2213, 1.1303); }
27.5% { transform: scale(1.1838, 1.1097); }
30% { transform: scale(1.1486, 1.0897); }
32.5% { transform: scale(1.1155, 1.0705); }
35% { transform: scale(1.0842, 1.0520); }
37.5% { transform: scale(1.0546, 1.0341); }
40% { transform: scale(1.0266, 1.0167); }
42.5% { transform: scale(1.0000, 1.0000); }
45% { transform: scale(1.0000, 1.0000); }
47.5% { transform: scale(1.0000, 1.0000); }
50% { transform: scale(1.0000, 1.0000); }
52.5% { transform: scale(1.0000, 1.0000); }
55% { transform: scale(1.0000, 1.0000); }
57.5% { transform: scale(1.0000, 1.0000); }
60% { transform: scale(1.0000, 1.0000); }
62.5% { transform: scale(1.0000, 1.0000); }
65% { transform: scale(1.0000, 1.0000); }
67.5% { transform: scale(1.0000, 1.0000); }
70% { transform: scale(1.0000, 1.0000); }
72.5% { transform: scale(1.0000, 1.0000); }
75% { transform: scale(1.0000, 1.0000); }
77.5% { transform: scale(1.0000, 1.0000); }
80% { transform: scale(1.0000, 1.0000); }
82.5% { transform: scale(1.0000, 1.0000); }
85% { transform: scale(1.0000, 1.0000); }
87.5% { transform: scale(1.0000, 1.0000); }
90% { transform: scale(1.0000, 1.0000); }
92.5% { transform: scale(1.0000, 1.0000); }
95% { transform: scale(1.0000, 1.0000); }
97.5% { transform: scale(1.0000, 1.0000); }
100% { transform: scale(1.0000, 1.0000); }
}
@keyframes dvSdaZitatRahmen {
0% { transform: scale(0.5152, 0.6624); }
2.5% { transform: scale(0.5378, 0.6768); }
5% { transform: scale(0.5604, 0.6912); }
7.5% { transform: scale(0.5831, 0.7056); }
10% { transform: scale(0.6057, 0.7200); }
12.5% { transform: scale(0.6284, 0.7345); }
15% { transform: scale(0.6548, 0.7533); }
17.5% { transform: scale(0.6815, 0.7722); }
20% { transform: scale(0.7084, 0.7912); }
22.5% { transform: scale(0.7356, 0.8104); }
25% { transform: scale(0.7630, 0.8298); }
27.5% { transform: scale(0.7907, 0.8494); }
30% { transform: scale(0.8187, 0.8691); }
32.5% { transform: scale(0.8469, 0.8890); }
35% { transform: scale(0.8754, 0.9091); }
37.5% { transform: scale(0.9041, 0.9293); }
40% { transform: scale(0.9331, 0.9497); }
42.5% { transform: scale(0.9624, 0.9703); }
45% { transform: scale(0.9894, 0.9894); }
47.5% { transform: scale(0.9947, 0.9947); }
50% { transform: scale(1.0000, 1.0000); }
52.5% { transform: scale(0.9947, 0.9947); }
55% { transform: scale(0.9894, 0.9894); }
57.5% { transform: scale(0.9840, 0.9840); }
60% { transform: scale(0.9787, 0.9787); }
62.5% { transform: scale(0.9734, 0.9734); }
65% { transform: scale(0.9681, 0.9681); }
67.5% { transform: scale(0.9628, 0.9628); }
70% { transform: scale(0.9574, 0.9574); }
72.5% { transform: scale(0.9521, 0.9521); }
75% { transform: scale(0.9468, 0.9468); }
77.5% { transform: scale(0.9415, 0.9415); }
80% { transform: scale(0.9362, 0.9362); }
82.5% { transform: scale(0.9308, 0.9308); }
85% { transform: scale(0.9255, 0.9255); }
87.5% { transform: scale(0.9202, 0.9202); }
90% { transform: scale(0.9200, 0.9200); }
92.5% { transform: scale(0.9200, 0.9200); }
95% { transform: scale(0.9200, 0.9200); }
97.5% { transform: scale(0.9200, 0.9200); }
100% { transform: scale(0.9200, 0.9200); }
}
@keyframes dvSdaZitatInhalt {
0% { transform: scale(1.7857, 1.3889); }
2.5% { transform: scale(1.7106, 1.3593); }
5% { transform: scale(1.6416, 1.3310); }
7.5% { transform: scale(1.5779, 1.3039); }
10% { transform: scale(1.5189, 1.2778); }
12.5% { transform: scale(1.4643, 1.2528); }
15% { transform: scale(1.4134, 1.2287); }
17.5% { transform: scale(1.3659, 1.2055); }
20% { transform: scale(1.3215, 1.1832); }
22.5% { transform: scale(1.2799, 1.1617); }
25% { transform: scale(1.2409, 1.1409); }
27.5% { transform: scale(1.2041, 1.1209); }
30% { transform: scale(1.1695, 1.1016); }
32.5% { transform: scale(1.1368, 1.0829); }
35% { transform: scale(1.1059, 1.0649); }
37.5% { transform: scale(1.0766, 1.0474); }
40% { transform: scale(1.0489, 1.0306); }
42.5% { transform: scale(1.0225, 1.0142); }
45% { transform: scale(1.0000, 1.0000); }
47.5% { transform: scale(1.0000, 1.0000); }
50% { transform: scale(1.0000, 1.0000); }
52.5% { transform: scale(1.0000, 1.0000); }
55% { transform: scale(1.0000, 1.0000); }
57.5% { transform: scale(1.0000, 1.0000); }
60% { transform: scale(1.0000, 1.0000); }
62.5% { transform: scale(1.0000, 1.0000); }
65% { transform: scale(1.0000, 1.0000); }
67.5% { transform: scale(1.0000, 1.0000); }
70% { transform: scale(1.0000, 1.0000); }
72.5% { transform: scale(1.0000, 1.0000); }
75% { transform: scale(1.0000, 1.0000); }
77.5% { transform: scale(1.0000, 1.0000); }
80% { transform: scale(1.0000, 1.0000); }
82.5% { transform: scale(1.0000, 1.0000); }
85% { transform: scale(1.0000, 1.0000); }
87.5% { transform: scale(1.0000, 1.0000); }
90% { transform: scale(1.0000, 1.0000); }
92.5% { transform: scale(1.0000, 1.0000); }
95% { transform: scale(1.0000, 1.0000); }
97.5% { transform: scale(1.0000, 1.0000); }
100% { transform: scale(1.0000, 1.0000); }
}
/* ---------- Reduzierte Bewegung: nichts bleibt unsichtbar, nichts läuft ---------- */
@media (prefers-reduced-motion: reduce) {
[data-leaf], .dv-grain, .dv-galerie__spur { animation: none !important; }
.js .dv-fade, .js [data-hw] { opacity: 1; transform: none; transition: none; }
.js .dv-statement__bild, .js .dv-statement__zoom { transform: none; }
.js .dv-statement__satz span { opacity: 1; }
.dv-hero__bild { transform: none; }
.dv-menue, .dv-menue__link, .dv-menue__cta, .dv-cta, .dv-cta__pill, .dv-cta__label, .dv-faq__antwort { transition-duration: .01ms !important; transition-delay: 0s !important; }
body::after { display: none; }
}
/*
* ---------- Adminleiste auf dem Handy (nur angemeldet) ----------
* WordPress lässt die Leiste unter 600 px mitscrollen (`position: absolute`).
* Unser Kopf klebt aber fest — er hinge dann 46 px unter einem leeren Streifen.
* Ohne @layer, weil die Regel von WordPress selbst ohne Layer steht und eine
* Regel im Layer gegen sie immer verliert.
*/
@media screen and (max-width: 600px) {
body.admin-bar #wpadminbar { position: fixed; }
}
/* Adminleiste nicht mitskalieren (body hat auf großen Bildschirmen zoom). */
#wpadminbar { zoom: calc(1 / var(--z, 1)); }
/* ---------- Druck (Rechtstexte) ---------- */
@media print {
.dv-kopf, .dv-cta, .dv-menue, .dv-blaetter, .dv-fuss, .dv-skip, body::after { display: none !important; }
body { background: #fff; color: #000; }
.dv-text { padding: 0; max-width: none; }
.dv-text__inhalt a[href^="http"]::after { content: " (" attr(href) ")"; }
body { zoom: 1; }
@page { margin: 2cm; }
}