/* DIGITAL CRAFT — webdesign.html · v11 · Ergänzungen zu styles.css (v37).
Nur Tokens, keine neuen Farben, keine Fonts, keine Keyframes. Präfix wd-. */
/* ── Flächen ──────────────────────────────────────────────── */
.wd-surface { background: var(--surface); }
.wd-zusammen { background: var(--surface-blue); }
.wd-intro { padding-top: var(--sp-xl); padding-bottom: var(--sp-l); }
.wd-atem { background: var(--surface); padding: var(--sp-l) 0; text-align: center; }
.wd-verzeichnis-stand { margin-top: 24px; color: var(--navy-40); font-size: 0.6875rem; max-width: 70ch; }
.wd-atem-text {
font-size: clamp(1.5rem, 2.4vw + 0.4rem, 2.4rem); font-weight: 500; line-height: 1.25;
letter-spacing: -0.015em; max-width: 22ch; margin: 0 auto; text-wrap: balance;
}
.wd-werk, .wd-werkzeug { overflow-x: clip; }
/* Ausbruch nach rechts (Hero-Bühne, Werkzeug-Bild): so weit, wie neben dem Container Platz ist —
(100vw − 1360px Container) / 2 + 16px Reserve für Scrollbar, gedeckelt auf 48px. */
:root { --wd-bleed: clamp(0px, calc((100vw - 1360px) / 2 + 16px), 48px); }
.wd-werkzeug { padding: var(--sp-xl) 0; }
/* ── Hero-Bühne: Browser + überlappendes Telefon ──────────── */
.wd-stage { display: block; position: relative; }
.wd-hero-stage { position: relative; z-index: 1; margin: 0; transform: translateX(var(--wd-bleed)); } /* ragt rechts über den Container (Hero: overflow-x clip) */
.wd-hero-browser { display: block; transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
/* Spezifität > .reveal-group.in > * aus styles.css */
.wd-hero-stage.in .wd-hero-browser:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.wd-hero-stage { padding-bottom: 17%; } /* reserviert die Fläche, in die das Telefon hineinragt */
.wd-hero-stage .wd-hero-phone { position: absolute; right: 4%; bottom: 0; width: clamp(130px, 10.5vw, 150px); z-index: 2; } /* über der inhaltsleeren rechten Bildhälfte — verdeckt keinen Text */
.wd-cap { display: block; margin-top: 16px; text-align: right; color: var(--navy-40); font-size: 0.6875rem; }
.wd-hero-stage .wd-cap { text-align: left; padding-right: 30%; }
/* ── Browser-Rahmen (a oder figure) ───────────────────────── */
.wd-browser {
display: block; position: relative; max-width: 100%;
background: var(--white); border: 1px solid var(--navy-15); border-radius: var(--r-m);
overflow: hidden; color: inherit;
box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.wd-browser-head {
display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px;
border-bottom: 1px solid var(--hairline); background: var(--white);
}
.wd-browser-head i { width: 6px; height: 6px; background: var(--navy-15); display: inline-block; }
.wd-browser-url {
margin-left: 12px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--navy-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-browser-body { display: block; background: var(--navy); }
.wd-browser-body img { display: block; width: 100%; height: auto; }
.wd-hint {
margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--navy-40); display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap; transition: opacity var(--dur-ui) var(--ease);
}
.wd-hint::before { content: ""; width: 5px; height: 5px; background: var(--blue); }
.wd-scroll:hover .wd-hint, .wd-scroll:focus-within .wd-hint { opacity: 0; }
/* Telefon-Mockup: gemeinsames Bauteil .iphone in styles.css (v31) — hier nur Layout. */
/* Hinweis zum Scroll-Telefon: über dem hinteren Gerät (in dessen Versatz), nie über dem Display-Inhalt */
.wd-hint-phone { position: absolute; right: 0; top: calc(var(--wd-back-offset) - 30px); z-index: 3; margin: 0; }
.wd-phones:has(.wd-scroll:hover) .wd-hint-phone, .wd-phones:has(.wd-scroll:focus-within) .wd-hint-phone { opacity: 0; }
/* ── Print-Rahmen (Ausschnitt ohne Browserkopf) ───────────── */
.wd-print {
display: block; margin: 0; color: inherit; border: 1px solid var(--hairline); border-radius: var(--r-s); overflow: hidden;
background: var(--white); box-shadow: var(--shadow-rest); max-width: 100%;
}
.wd-print img { display: block; width: 100%; height: auto; }
.wd-print-tall { --wd-h: 560px; }
.wd-werkzeug-fig { min-width: 0; }
/* Ausbruch nach rechts mit demselben Maß wie die Hero-Bühne (endet auf derselben Kante) */
.wd-werkzeug-img { transform: translateX(var(--wd-bleed)); }
.wd-werkzeug-fig .wd-cap { transform: translateX(var(--wd-bleed)); }
/* ── Scroll-Through (einzige Bewegung neben .reveal; nutzergetriggert, endlich) ── */
.wd-scroll .wd-browser-body,
.wd-scroll.wd-print { height: var(--wd-h); overflow: hidden; }
/* Nur das Seitenbild läuft — nie der Foto-Rahmen (.iphone-frame) des Scroll-Telefons. */
.wd-scroll img:not(.iphone-frame) {
transform: translateY(0);
transition: transform 1.2s var(--ease); /* Rückweg */
}
.wd-scroll:hover img:not(.iphone-frame),
.wd-scroll:focus-within img:not(.iphone-frame),
.wd-scroll:focus-visible img:not(.iphone-frame) {
transform: translateY(calc(-100% + var(--wd-h)));
transition: transform 8s linear; /* Hinweg bis zum Bildende */
will-change: transform;
}
/* Telefon: sichtbare Höhe ist das Foto-Display (Container-Query), nicht --wd-h */
.wd-scroll:hover .iphone-screen img,
.wd-scroll:focus-within .iphone-screen img,
.wd-scroll:focus-visible .iphone-screen img { transform: translateY(calc(-100% + 100cqh - 14.7cqw)); }
.wd-scroll-note { margin-top: 12px; color: var(--navy-40); font-size: 0.6875rem; }
@media (hover: none) {
.wd-scroll img { transform: none !important; transition: none; } /* Touch: statischer oberer Ausschnitt, Live-Link ist der Weg */
.wd-hint, .wd-scroll-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.wd-scroll img { transform: none !important; transition: none !important; } /* styles.css setzt Dauern auf 0.01ms — sonst springt das Bild */
.wd-hint { display: none; }
}
/* ── Werkakte ─────────────────────────────────────────────── */
.wd-werk-grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
.wd-werk-01 .wd-werk-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.wd-werk-02 .wd-werk-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* Werk 03: die Akte ist die höhere Spalte — deshalb läuft hier die Bühne mit, nicht die Akte. */
.wd-werk-02 .wd-stage-col { position: sticky; top: 120px; }
.wd-stage-col { min-width: 0; }
.wd-akte { min-width: 0; }
.wd-werk-01 .wd-akte { position: sticky; top: 120px; }
.wd-akte-label { margin-bottom: 16px; }
.wd-akte h2 { font-size: clamp(2.2rem, 3.4vw + 0.4rem, 3.6rem); }
.wd-akte-sub { margin-top: 10px; color: var(--navy-60); }
.wd-akte-text { margin-top: 18px; color: var(--navy-60); font-size: 1rem; }
.wd-akte-list { margin-top: 24px; padding: 8px 0 0; border-top: 1px solid var(--hairline); list-style: none; }
.wd-akte-list li {
display: flex; gap: 12px; align-items: baseline; padding: 12px 0;
border-bottom: 1px solid var(--hairline); font-size: 0.9375rem; color: var(--navy-60);
}
.wd-live { display: inline-block; padding: 12px 0; margin-top: 12px; color: var(--navy); }
.wd-live:hover { color: var(--blue); }
/* ── Streifen / Telefone / Flat ───────────────────────────── */
/* Streifen Werk 01: Board (statisch, ganz sichtbar) + Telefon in gleicher Höhe, Caption unter beiden.
Der Streifen ist exakt so breit wie die Bühnenspalte darüber (7/12) — Telefon-Rechtskante = Browser-Rechtskante. */
.wd-strip {
/* Telefonspur = Telefonbreite bei Boardhöhe: Board 1400×1757 → Höhe 1,255·b; Telefon 1000/2075 → Breite 0,6049·b;
b + Telefon = 1,6049·(100 % − gap) → Telefonspur 37,69 % der Restbreite. */
--wd-strip-gap: clamp(24px, 3vw, 40px);
display: grid; grid-template-columns: minmax(0, 1fr) calc((100% - var(--wd-strip-gap)) * 0.3769); gap: 0 var(--wd-strip-gap);
align-items: stretch; margin-top: var(--sp-l);
width: calc((100% - clamp(32px, 4vw, 64px)) * 7 / 12);
}
.wd-strip .wd-print { align-self: start; }
.wd-strip .iphone { width: auto; height: 100%; max-width: none; margin: 0; justify-self: end; } /* Höhe = Board, Breite aus aspect-ratio */
.wd-strip-cap { grid-column: 1 / -1; align-self: start; margin-top: 12px; color: var(--navy-40); font-size: 0.6875rem; }
/* Telefone Werk 02: ein Paar — hinteres Gerät tiefer gesetzt und 40 px unter das vordere geschoben */
.wd-phones { --wd-back-offset: 120px; --wd-overlap: 40px; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: end; gap: 0; align-items: start; }
.wd-phone-front { width: 100%; justify-self: start; left: var(--wd-overlap); z-index: 2; } /* ragt über das hintere Gerät (.iphone ist position:relative) */
.wd-phone-back { width: 100%; justify-self: start; margin-top: var(--wd-back-offset); z-index: 1; }
.wd-phones-cap { grid-column: 1 / -1; margin-top: 12px; color: var(--navy-40); font-size: 0.6875rem; text-align: right; }
.wd-cap-desk { display: inline; }
.wd-flat { margin-top: var(--sp-l); }
/* Galerie Werk 03: zwei echte Unterseiten + Telefon — der mehrseitige Auftritt als Reihe.
Telefonspur aus den Verhältnissen: Ausschnitt 1400×608 → Höhe 0,434·b, Telefon 1000/2075 → Breite 0,209·b
→ Telefon = 0,0906 der Restbreite; damit stehen alle drei Kacheln auf gleicher Höhe. */
.wd-galerie {
--wd-gal-gap: clamp(20px, 2.5vw, 36px);
position: relative;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) calc((100% - 2 * var(--wd-gal-gap)) * 0.0906);
gap: 0 var(--wd-gal-gap); align-items: stretch; margin-top: var(--sp-l);
}
.wd-galerie-print { align-self: start; }
.wd-galerie .iphone { width: auto; height: 100%; max-width: none; justify-self: end; }
.wd-galerie-cap { grid-column: 1 / -1; margin-top: 12px; color: var(--navy-40); font-size: 0.6875rem; }
.wd-hint-galerie { position: absolute; right: 0; top: -26px; z-index: 3; margin: 0; }
.wd-galerie:has(.wd-scroll:hover) .wd-hint-galerie,
.wd-galerie:has(.wd-scroll:focus-within) .wd-hint-galerie { opacity: 0; }
/* ── Werkzeug / Intro ─────────────────────────────────────── */
.wd-werkzeug-grid {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(32px, 5vw, 80px); align-items: center;
}
.wd-werkzeug-copy { max-width: var(--container-text); }
.wd-werkzeug-copy p:not(.mono-label) { margin-top: 18px; color: var(--navy-60); }
.wd-werkzeug-copy p.wd-answer { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 500; color: var(--navy); margin-top: 12px; }
.wd-werkzeug-copy .wd-proofline { color: var(--navy-60); margin-top: 24px; }
.wd-jump { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 28px; }
.wd-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; margin: -12px 0; color: var(--navy-60); transition: color var(--dur-ui) var(--ease); }
.wd-jump a:hover { color: var(--navy); }
.wd-jump .arr { transition: transform var(--dur-ui) var(--ease); }
.wd-jump a:hover .arr { transform: translateX(4px); }
.wd-jump .fpx { width: 5px; height: 5px; background: var(--navy-15); }
.wd-jump .fpx-on { background: var(--blue); }
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
.wd-hero-stage { transform: none; }
.wd-hero-stage .wd-hero-phone { left: auto; right: -2%; bottom: 0; width: 34%; }
.wd-hero-stage { padding-bottom: 26%; }
.wd-hero-stage .wd-cap { text-align: left; padding-right: 36%; } /* Caption links vom Telefon, nie darunter */
.wd-hero-stage .wd-cap-desk { display: none; } /* „· Webflow" entfällt — kein Waisenwort */
}
@media (max-width: 1024px) {
.wd-werk-grid, .wd-werk-01 .wd-werk-grid, .wd-werk-02 .wd-werk-grid { grid-template-columns: 1fr; }
.wd-werk-01 .wd-akte { position: static; order: -1; }
.wd-werk-02 .wd-stage-col { position: static; }
/* Tablet: beide Ausschnitte nebeneinander; darunter Bildunterschrift links, Telefon rechts */
.wd-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wd-galerie .iphone { width: min(100%, 240px); height: auto; grid-column: 2; grid-row: 2; justify-self: end; margin-top: 20px; }
.wd-galerie-cap { grid-column: 1; grid-row: 2; align-self: end; margin: 0 0 4px; }
.wd-strip { width: 100%; }
.wd-phones { --wd-back-offset: 64px; --wd-overlap: 32px; grid-template-columns: repeat(2, minmax(0, 240px)); }
.wd-werkzeug-grid { grid-template-columns: 1fr; }
.wd-werkzeug-img { transform: none; }
.wd-werkzeug-fig .wd-cap { transform: none; }
}
@media (max-width: 760px) {
.wd-hero-stage .wd-hero-phone { position: relative; right: auto; bottom: auto; width: 44%; margin: -18% 0 0 auto; }
.wd-hero-stage { padding-bottom: 0; }
.wd-cap, .wd-hero-stage .wd-cap { text-align: left; padding-right: 0; }
/* Mobil: alles untereinander in DOM-Reihenfolge — Zeilenzuweisungen des Tablet-Blocks zurücknehmen */
.wd-galerie { grid-template-columns: 1fr; row-gap: 20px; }
.wd-galerie .iphone { width: 60%; height: auto; grid-column: 1; grid-row: auto; justify-self: end; margin-top: 0; }
.wd-galerie-cap { grid-column: 1; grid-row: auto; align-self: auto; margin: 12px 0 0; }
.wd-hint-galerie { display: none; }
.wd-strip { grid-template-columns: 1fr; row-gap: 24px; }
.wd-strip .iphone { width: 60%; height: auto; max-width: 100%; margin: 0 0 0 auto; justify-self: end; }
.wd-strip-cap { grid-column: 1; }
.wd-browser-url { font-size: 0.625rem; letter-spacing: 0.04em; }
img { max-width: 100%; }
}
@media (max-width: 767px) {
/* Grenze identisch mit : Ganzseiten-Bilder sind hier nicht im DOM — Rahmen nehmen das natürliche Seitenverhältnis, keine Fahrt */
.wd-scroll .wd-browser-body, .wd-scroll.wd-print { height: auto; }
.wd-scroll:hover img, .wd-scroll:focus-within img, .wd-scroll:focus-visible img { transform: none; }
/* Ohne Ganzseiten-Bild zeigt das hintere Telefon dasselbe wie das vordere — darum nur ein Gerät */
.wd-phones { grid-template-columns: 1fr; justify-content: stretch; }
.wd-phone-front { width: 60%; justify-self: end; left: 0; }
.wd-phone-back, .wd-hint-phone, .wd-cap-desk { display: none; }
.wd-phones-cap { text-align: left; }
}