/* ============================================================
ONELight Production — main.css
Handgeschrieben, kein Build-Step. Gliederung:
m01 Schriften · m02 Tokens · m03 Reset & Bausteine · m04 Kopf/Menue
m05 Hero · m06 Leistungen · m07 Projekte · m08 Filme · m09 Ueber mich
m10 CTA/Footer · m11 Projekt-Detailseite · m12 Reveal
============================================================ */
/* --- m01 Schriften ----------------------------------------- */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(../fonts/montserrat-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- m02 Tokens ------------------------------------------- */
/* ============================================================
ONELight Production — Design-Tokens
Farben: 1:1 aus dem Elementor-Kit der Live-Seite uebernommen
Referenz-Designsprache: zwetschke.de
============================================================ */
:root {
/* --- Farben ------------------------------------------------ */
--c-bg: #FFFFFF; /* Grundflaeche */
--c-surface: #F4F5F6; /* leicht abgesetzte Flaeche, Karten */
--c-surface-2: #EAECEE; /* zweite Abstufung */
--c-ink: #000000; /* Text, Headlines */
--c-ink-soft: #272727; /* dunkle Flaechen, CTA, Menue-Pille */
--c-grey: #9E9E9E; /* Sekundaertext, Linien */
--c-acc-100: #9AB7C7; /* Akzent hell */
--c-acc-500: #6B98AE; /* MARKENFARBE */
--c-acc-900: #33596B; /* Akzent dunkel */
--c-on-dark: #FFFFFF;
/* --- Farbverlaeufe ----------------------------------------- */
--g-hell: linear-gradient(180deg, #FFFFFF 0%, #F5F8FA 45%, #E6EEF3 100%);
--g-kuehl: linear-gradient(165deg, #F0F5F8 0%, #DFE9EF 55%, #CBDBE4 100%);
--g-warm: linear-gradient(180deg, #FFFFFF 0%, #EEF3F6 60%, #DCE7ED 100%);
--g-dunkel: linear-gradient(155deg, #2B2B2B 0%, #24313A 55%, #33596B 130%);
--g-glow: radial-gradient(60% 55% at 50% 0%, rgba(107,152,174,0.28) 0%, rgba(107,152,174,0) 70%);
/* --- Typografie -------------------------------------------- */
--f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--f-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
/* fluide Groessen: min bei 360px, max bei 1440px */
/* 9.4vw statt 10vw: bei 10vw ist "BEEINDRUCKEN." in Grossbuchstaben 339px breit,
der Textbereich auf einem 375px-Schirm aber nur 335px. Das laengste Wort brach
deshalb mit Bindestrich um. 9.4vw laesst auf jeder Breite ab 320px Luft. */
--t-mega: clamp(2.2rem, 9.4vw, 8rem); /* Hero-Claim (Deckel 128px) */
/* 8.7vw statt 9vw: "FOTOPRODUKTION" braucht in Grossbuchstaben 345px,
die Spalte auf 375px bietet 335px. Sonst bricht das Wort mit Bindestrich. */
--t-h1: clamp(1.9rem, 8.7vw, 4.75rem); /* Sektions-Ueberschrift (Deckel 76px, wie zwetschke.de) */
--t-h2: clamp(1.6rem, 4.6vw, 3rem); /* Deckel 48px */
--t-h3: clamp(1.1rem, 2.1vw, 1.45rem);
--t-lead: clamp(1.05rem, 1.6vw, 1.35rem);
--t-body: clamp(0.98rem, 1.05vw, 1.06rem);
--t-small: 0.82rem;
--lh-display: 1.06; /* nicht enger: sonst stossen Umlautpunkte (Ä Ö Ü) an die Zeile darueber */
--lh-body: 1.65;
--ls-display: -0.02em;
/* --- Raster & Abstaende ------------------------------------ */
--pill-bottom: clamp(1rem, 2.5vw, 2rem);
--wrap: 1320px;
--wrap-text: 760px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--s-1: 0.5rem;
--s-2: 1rem;
--s-3: 1.5rem;
--s-4: 2.5rem;
--s-5: 4rem;
--s-6: clamp(4rem, 9vw, 8rem); /* Sektionsabstand */
--s-7: clamp(6rem, 13vw, 12rem); /* grosser Sektionsabstand */
/* --- Form -------------------------------------------------- */
--r-card: 28px;
--r-media: 20px;
--r-pill: 999px;
--shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.45);
--shadow-pill: 0 10px 30px -8px rgba(0, 0, 0, 0.35);
/* --- Bewegung ---------------------------------------------- */
--e-out: cubic-bezier(0.22, 1, 0.36, 1);
--d-fast: 0.25s;
--d-base: 0.5s;
--d-slow: 0.9s;
/* Viewport-Hoehe: wird per Inline-Skript im eingefroren.
Verhindert Sprünge, wenn in iOS-In-App-Browsern die Leiste togglet. */
--vph: 100svh;
}
/* Ab Tablet darf die Display-Typo wieder gross werden. */
@media (min-width: 700px) {
:root {
/* 11.5vw war auf dem Tablet noch deutlich zu gross: dort brachen sogar zwei
Hero-Zeilen um. 9.6vw passt von 700px bis zum Deckel. */
--t-mega: clamp(3rem, 9.6vw, 8rem);
--t-h1: clamp(2.25rem, 7.5vw, 4.75rem);
}
}
@media (prefers-reduced-motion: reduce) {
:root { --d-fast: 0.001s; --d-base: 0.001s; --d-slow: 0.001s; }
}
/* ============================================================
ONELight Production — Prototyp
============================================================ */
/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
/* Fliesstext-Listen behalten ihre Punkte, alles andere ist Navigation. */
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
img, picture, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { overflow-x: clip; }
body {
background: var(--c-bg);
color: var(--c-ink);
font-family: var(--f-body);
font-size: var(--t-body);
line-height: var(--lh-body);
font-weight: 400;
overflow-x: clip;
/* Frueher stand hier padding-bottom fuer die Menue-Pille. Das erzeugte
unter dem Footer einen weissen Streifen. Die Pille blendet sich am
Footer jetzt aus, also braucht es den Platz nicht mehr. */
}
/* --- Bausteine --------------------------------------------- */
/* Der Innenabstand kommt ZUSAETZLICH zur Maximalbreite, damit der Inhalt
genau var(--wrap) breit wird. Ohne das Aufschlagen war der Inhaltsbereich
um zwei Gutter schmaler als die Medienrahmen (Showreel, Projektbuehne), die
var(--wrap) ohne eigenen Abstand tragen: gemessen 1224px gegen 1320px, also
48px Versatz je Seite. Dadurch stand jedes Bild unter dem Titelbild sichtbar
eingerueckt. Auf schmalen Schirmen greift die Maximalbreite nicht, der
seitliche Abstand bleibt dort also erhalten. */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: calc(var(--wrap-text) + var(--gutter) * 2); }
.section { padding-block: var(--s-6); }
.section--tight { padding-block: var(--s-5); }
.section--surface { background: var(--c-surface); }
.center { text-align: center; }
.display {
font-family: var(--f-display);
font-weight: 900;
text-transform: uppercase;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
.display--mega { font-size: var(--t-mega); }
.display--h1 { font-size: var(--t-h1); }
.display--h2 { font-size: var(--t-h2); }
.eyebrow {
font-family: var(--f-body);
font-weight: 600;
font-size: var(--t-small);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-acc-900);
}
.lead { font-size: var(--t-lead); line-height: 1.55; }
.muted { color: var(--c-grey); }
.stack > * + * { margin-top: var(--s-3); }
/* --- Buttons ----------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: 0.7em;
padding: 1.05em 2.1em;
border: 0; border-radius: var(--r-pill);
background: var(--c-ink-soft); color: var(--c-on-dark);
font-family: var(--f-display); font-weight: 800;
font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
cursor: pointer;
transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.btn:hover, .btn:focus-visible { background: var(--c-acc-900); transform: translateY(-2px); }
.btn__arrow { transition: transform var(--d-fast) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost {
background: transparent; color: var(--c-ink);
box-shadow: inset 0 0 0 2px var(--c-ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
background: var(--c-ink); color: var(--c-on-dark); box-shadow: inset 0 0 0 2px var(--c-ink);
}
.btn--on-dark { background: var(--c-on-dark); color: var(--c-ink); }
.btn--on-dark:hover, .btn--on-dark:focus-visible { background: var(--c-acc-100); color: var(--c-ink); }
/* --- Nur fuer Screenreader, plus sichtbarer Skip-Link bei Fokus --- */
.screen-reader-text {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus-visible {
position: fixed !important; top: 1rem; left: 1rem; z-index: 100;
width: auto; height: auto; clip: auto; clip-path: none; margin: 0;
padding: 0.8em 1.4em; border-radius: var(--r-pill);
background: var(--c-ink-soft); color: var(--c-on-dark);
font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 0.9rem;
}
/* --- Wortmarke, solange kein Logo in der Mediathek liegt ---- */
.wordmark {
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: var(--ls-display);
}
/* --- Fokus -------------------------------------------------- */
:focus-visible { outline: 3px solid var(--c-acc-900); outline-offset: 3px; border-radius: 4px; }
/* Auf hellem Grund braucht der Fokusring mindestens 3:1. Die Markenfarbe
--c-acc-500 kommt auf Weiss nur auf 2.4:1, deshalb das dunklere Acc-900
(7.7:1). Auf dunklen Flaechen kehrt sich das um. */
.section--blau :focus-visible,
.footer :focus-visible,
.cta :focus-visible,
.project__card:focus-visible { outline-color: var(--c-acc-100); }
/* ============================================================
Kopf: Logo oben, Menue als schwebende Pille unten
============================================================ */
.brandbar {
padding-block: clamp(1.5rem, 3vw, 2.5rem);
display: flex; justify-content: center;
}
.brandbar__logo { height: clamp(46px, 5.2vw, 68px); width: auto; }
/* ============================================================
Navigation: EIN Koerper, der sich nach oben aufklappt
Der Container traegt Farbe, Rundung und Schatten. Panel und
Ausloeser liegen darin, beide ohne eigenen Hintergrund. Dadurch
gibt es keine Naht und keine Ecken, die nicht zueinander passen.
Vorbild: die aufgeklappte Navigation von zwetschke.de.
============================================================ */
:root {
--nav-hoehe: 3.5rem; /* Hoehe im geschlossenen Zustand */
--nav-breite: min(320px, calc(100vw - 2.5rem));
--nav-schrift: clamp(0.95rem, 2.8vw, 1.05rem); /* Label UND Links gleich gross */
}
.nav {
position: fixed; left: 50%; bottom: var(--pill-bottom);
transform: translateX(-50%);
z-index: 60;
display: flex; flex-direction: column;
/* Ohne JavaScript greift der Rueckfallwert. Das Skript misst gleich den
genauen Wert nach, damit die Breite beim Oeffnen sauber animiert. */
width: var(--nav-zu, 11rem);
max-width: calc(100vw - 2.5rem);
padding: 0.45rem;
background: var(--c-acc-500);
border-radius: var(--r-pill);
box-shadow: var(--shadow-pill);
transition: width var(--d-base) var(--e-out),
border-radius var(--d-base) var(--e-out),
box-shadow var(--d-base) var(--e-out),
opacity var(--d-base) var(--e-out),
transform var(--d-base) var(--e-out),
visibility var(--d-base);
}
.nav[data-open="true"] {
width: var(--nav-breite);
border-radius: 30px;
box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.5);
}
/* In Hero und Footer verschwindet die Navigation. Offen bleibt sie stehen. */
body.nav-verstecken .nav {
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateX(-50%) translateY(8px);
}
/* Bei offener Tastatur aus dem Weg. Nicht mitwandern, das ruckelt auf iOS. */
body.tastatur-offen .nav { opacity: 0; visibility: hidden; pointer-events: none; }
/* Das Panel waechst ueber die Zeilenhoehe, nicht ueber max-height.
grid-template-rows 0fr -> 1fr animiert die echte Inhaltshoehe. */
.nav__panel {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--d-base) var(--e-out);
}
.nav[data-open="true"] .nav__panel { grid-template-rows: 1fr; }
.menu__inner { overflow: hidden; min-width: 0; }
.menu__list { display: grid; gap: 0.15rem; padding-bottom: 0.45rem; }
.menu__link {
display: block; padding: 0.75em 1em; border-radius: var(--r-pill);
text-align: center; /* mittig, wie im Vorbild */
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: var(--nav-schrift); /* identisch zum Label */
line-height: 1.15; letter-spacing: 0.05em;
opacity: 0; transform: translateY(8px);
transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out),
opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.nav[data-open="true"] .menu__link { opacity: 1; transform: none; }
.menu__link:hover,
.menu__link:focus-visible { background: rgba(0, 0, 0, 0.12); }
/* Der Ausloeser hat keinen eigenen Hintergrund, die Farbe kommt vom Container. */
.menu-pill {
/* kein width:100%: in der Flex-Spalte streckt sich der Knopf von selbst und
traegt trotzdem seine echte Inhaltsbreite zur Messung bei. */
width: auto; height: calc(var(--nav-hoehe) - 0.9rem);
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
/* Rechts etwas Luft: links fuellt der runde Knopf seine Seite optisch aus,
rechts stuende "MENUE" sonst direkt an der Kante. Die Breite wird aus dem
Inhalt gemessen, dieses Polster zaehlt also mit. */
padding: 0 0.65rem 0 0; border: 0; background: none; box-shadow: none;
color: var(--c-ink); cursor: pointer;
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: var(--nav-schrift); letter-spacing: 0.05em;
border-radius: var(--r-pill);
transition: background var(--d-fast) var(--e-out);
}
.menu-pill:hover { background: rgba(0, 0, 0, 0.1); }
.menu-pill__icon {
width: 38px; height: 38px; border-radius: 50%;
background: var(--c-ink-soft); color: var(--c-on-dark);
display: grid; place-items: center; flex: none;
}
.menu-pill__icon span {
display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px;
position: relative;
transition: transform var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out);
}
.menu-pill__icon span::before,
.menu-pill__icon span::after {
content: ''; position: absolute; left: 0; width: 16px; height: 2px;
background: currentColor; border-radius: 2px;
transition: transform var(--d-fast) var(--e-out);
}
.menu-pill__icon span::before { top: -5px; }
.menu-pill__icon span::after { top: 5px; }
.menu-pill[aria-expanded="true"] .menu-pill__icon span { transform: rotate(45deg); }
.menu-pill[aria-expanded="true"] .menu-pill__icon span::before { transform: translateY(5px) rotate(-90deg); }
.menu-pill[aria-expanded="true"] .menu-pill__icon span::after { opacity: 0; }
/* Bewusst KEINE Markierung des aktuellen Punktes. Die dunkle Pille auf dem
aktiven Eintrag wirkte im offenen Menue wie ein Fehler; WordPress markiert
ausserdem von sich aus dauerhaft die Startseite. Beides ist abgeschaltet,
das Menue traegt nur noch Hover und Fokus. */
.menu .current-menu-item > .menu__link,
.nav .current-menu-item > .menu__link { background: none; color: inherit; }
/* ============================================================
Hero
============================================================ */
.hero { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: var(--s-5); text-align: center; }
.hero__claim { max-width: min(15ch, 100%); margin-inline: auto; }
.hero__claim em { font-style: normal; color: var(--c-acc-500); }
.hero__lead { max-width: min(46ch, 100%); margin: var(--s-4) auto 0; color: var(--c-ink-soft); }
.hero__actions { margin-top: var(--s-4); display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
/* --- Bewegtbild-Band (video-ready) -------------------------- */
.showreel { padding-inline: var(--gutter); }
.showreel__frame {
position: relative; overflow: hidden;
border-radius: var(--r-card);
max-width: var(--wrap); margin-inline: auto;
aspect-ratio: 21 / 9;
background: var(--c-ink-soft);
}
@media (max-width: 700px) { .showreel__frame { aspect-ratio: 4 / 5; } }
.showreel__media { width: 100%; height: 100%; object-fit: cover; }
.showreel__frame::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
/* Spezifitaet bewusst erhoeht: .playbadge steht weiter unten und wuerde
position:relative sonst zurueckgewinnen. */
.showreel__frame > .showreel__badge { position: absolute; inset: 0; margin: auto; z-index: 2; }
/* --- Rundtext-Play-Button ----------------------------------- */
.playbadge {
width: clamp(96px, 13vw, 148px); aspect-ratio: 1; position: relative;
display: grid; place-items: center; color: var(--c-on-dark);
background: none; border: 0; cursor: pointer;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}
.playbadge__ring { position: absolute; inset: 0; animation: spin 18s linear infinite; }
@media (prefers-reduced-motion: reduce) { .playbadge__ring { animation: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.playbadge__ring text {
font-family: var(--f-body); font-size: 6.8px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase; fill: currentColor;
}
.playbadge__tri {
width: 0; height: 0; margin-left: 4px;
border-left: 20px solid currentColor;
border-top: 13px solid transparent; border-bottom: 13px solid transparent;
transition: transform var(--d-fast) var(--e-out);
}
.playbadge:hover .playbadge__tri { transform: scale(1.18); }
/* ============================================================
Leistungen
============================================================ */
.services { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }
.service {
background: var(--c-bg); border-radius: var(--r-card);
padding: clamp(1.6rem, 3vw, 2.6rem);
display: flex; flex-direction: column; gap: var(--s-2);
transition: background var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.service:hover { background: var(--c-bg); transform: translateY(-6px); box-shadow: 0 18px 44px -26px rgba(0,0,0,0.45); }
.service__no { font-family: var(--f-display); font-weight: 900; font-size: 0.95rem; color: var(--c-acc-500); }
.service__title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--t-h3); line-height: 1.05; }
.service__list { display: grid; gap: 0.45rem; margin-top: var(--s-1); font-size: 0.95rem; }
.service__list li { padding-left: 1.1rem; position: relative; color: var(--c-ink-soft); }
.service__list li::before {
content: ''; position: absolute; left: 0; top: 0.62em;
width: 6px; height: 6px; border-radius: 50%; background: var(--c-acc-500);
}
.service__more { margin-top: auto; padding-top: var(--s-2); font-weight: 600; color: var(--c-acc-900); }
.service__more:hover { color: var(--c-ink); }
/* ============================================================
Projekte — Kachel mit Verlauf (Zwetschke-Bauteil)
============================================================ */
.projects { display: grid; gap: var(--s-3); grid-template-columns: repeat(6, 1fr); }
.project { grid-column: span 2; }
.project--wide { grid-column: span 3; }
@media (max-width: 900px) { .projects { grid-template-columns: 1fr; } .project, .project--wide { grid-column: auto; } }
.project__card {
position: relative; display: block; overflow: hidden;
border-radius: var(--r-card); aspect-ratio: 4 / 3;
background: var(--c-ink-soft);
box-shadow: var(--shadow-card);
}
.project--wide .project__card { aspect-ratio: 16 / 10; }
.project__img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--d-slow) var(--e-out), filter var(--d-slow) var(--e-out);
}
.project__card:hover .project__img { transform: scale(1.05); }
.project__card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,20,22,0) 30%, rgba(20,20,22,0.55) 62%, rgba(20,20,22,0.92) 100%);
}
.project__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.2rem, 2.4vw, 2rem); color: var(--c-on-dark); }
.project__client { font-size: var(--t-small); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.project__title {
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: var(--t-h3); line-height: 1.02; letter-spacing: var(--ls-display);
margin-top: 0.35rem; text-wrap: balance;
}
.project__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.tag {
font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
padding: 0.32em 0.75em; border-radius: var(--r-pill);
background: rgba(255,255,255,0.14); color: #fff;
backdrop-filter: blur(4px);
}
@media (max-width: 900px) { .tag { backdrop-filter: none; background: rgba(255,255,255,0.2); } }
/* ============================================================
Filme
============================================================ */
.films { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) { .films { grid-template-columns: 1fr; } }
.film { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--c-ink-soft); }
.film__thumb { position: relative; aspect-ratio: 16 / 9; }
/* Hochformat-Film (YouTube Short) auf der Projektseite: hoher, schmaler Rahmen. */
.film--hoch { max-width: 380px; margin-inline: auto; }
.film--hoch .film__thumb { aspect-ratio: 9 / 16; }
.film--hoch + .film__note { text-align: center; }
/* Bewusst KEIN Zoom: sobald der YouTube-Rahmen geladen ist, wuerde das
skalierte Bild an dessen Kanten hervorstehen. Stattdessen hellt die
Karte auf und der Play-Knopf waechst. */
.film__img { width: 100%; height: 100%; object-fit: cover; }
.film__thumb::after {
content: ''; position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.32);
transition: background var(--d-base) var(--e-out);
}
.film:hover .film__thumb::after,
.film:focus-within .film__thumb::after { background: rgba(0, 0, 0, 0.14); }
.film:hover .playbadge .playbadge__tri { transform: scale(1.18); }
.film__thumb > .film__badge { position: absolute; inset: 0; margin: auto; z-index: 2; }
.film__meta { padding: 1rem 1.2rem 1.25rem; color: var(--c-on-dark); }
.film__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.02em; }
.film__client { font-size: var(--t-small); color: var(--c-grey); }
/* Der Hinweis lief ueber die volle Breite, wurde aber von display:flex
zerlegt: das Info-Zeichen, der Text und der Datenschutz-Link wurden je
ein eigenes Flex-Element, dadurch stand der Link als schmale Spalte
daneben und brach zu "Daten-schutz-erklae-rung" um.
Jetzt normaler Textfluss ueber die ganze Inhaltsbreite. */
.film__note {
margin-top: var(--s-3); font-size: var(--t-small); color: var(--c-grey);
max-width: none;
line-height: 1.6;
}
.film__note > span[aria-hidden] { margin-right: 0.45rem; }
/* ============================================================
Kundenlogos
============================================================ */
/* Flex statt Grid, damit eine angebrochene letzte Reihe mittig endet
statt links zu kleben. */
.logos {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
}
.logos img {
flex: 0 0 auto;
width: clamp(118px, 13vw, 175px); height: auto;
max-height: 88px; object-fit: contain;
filter: grayscale(1); opacity: 0.62;
transition: filter var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}
.logos img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 560px) {
.logos { gap: clamp(1.6rem, 6vw, 2.6rem) clamp(1.2rem, 4vw, 2rem); }
.logos img { width: clamp(132px, 41vw, 190px); max-height: 96px; }
}
/* ============================================================
Ueber mich
============================================================ */
.about { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__facts {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(0.7rem, 3vw, 2.5rem);
margin-top: var(--s-4);
}
.about__fact { min-width: 0; }
.about__fact span { display: block; overflow-wrap: break-word; }
@media (max-width: 560px) {
.about__fact span { font-size: 0.68rem; letter-spacing: 0.06em; line-height: 1.25; }
.about__fact strong { font-size: clamp(1.5rem, 8vw, 2.2rem); }
}
.about__fact strong { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; }
.about__fact span { font-size: var(--t-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-grey); }
/* ============================================================
CTA
============================================================ */
.cta { background: var(--c-ink-soft); color: var(--c-on-dark); border-radius: var(--r-card); padding: clamp(2.5rem, 7vw, 6rem) var(--gutter); text-align: center; }
.cta__lead { max-width: min(48ch, 100%); margin: var(--s-3) auto 0; color: rgba(255,255,255,0.72); }
.cta__actions { margin-top: var(--s-4); display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
.cta__direct { margin-top: var(--s-3); font-size: var(--t-small); color: var(--c-grey); }
.cta__direct a:hover { color: var(--c-acc-100); }
/* ============================================================
Scroll-Reveal
============================================================ */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }
/* ============================================================
Projekt-Detailseite
============================================================ */
.pj-hero { padding-block: var(--s-5) var(--s-4); text-align: center; }
.pj-hero__client { font-size: var(--t-small); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-acc-900); font-weight: 600; }
.pj-hero__title { margin-top: var(--s-2); max-width: min(18ch, 100%); margin-inline: auto; }
.pj-hero__lead { max-width: min(52ch, 100%); margin: var(--s-3) auto 0; color: var(--c-ink-soft); }
.pj-meta {
display: grid; gap: 0; margin-top: var(--s-4);
max-width: 720px; margin-inline: auto; text-align: left;
border-top: 1px solid var(--c-surface-2);
}
.pj-meta__item {
display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
padding: 0.8rem 0.1rem; border-bottom: 1px solid var(--c-surface-2);
}
.pj-meta__k {
flex: none; font-size: 0.72rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--c-grey);
}
.pj-meta__v {
text-align: right;
font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
font-size: 0.92rem; line-height: 1.25;
}
@media (min-width: 760px) {
.pj-meta {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border-top: 0; border-bottom: 1px solid var(--c-surface-2);
}
.pj-meta__item {
flex-direction: column; align-items: center; justify-content: flex-start;
text-align: center; gap: 0.3rem;
padding-block: 1.1rem; border-bottom: 0; border-top: 1px solid var(--c-surface-2);
}
.pj-meta__v { text-align: center; font-size: 0.98rem; }
}
.pj-stage { padding-inline: var(--gutter); }
.pj-stage__frame {
max-width: var(--wrap); margin-inline: auto; overflow: hidden;
border-radius: var(--r-card); aspect-ratio: 16 / 9; background: var(--c-ink-soft);
}
@media (max-width: 700px) { .pj-stage__frame { aspect-ratio: 4 / 3; } }
.pj-stage__frame img { width: 100%; height: 100%; object-fit: cover; }
.pj-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
@media (max-width: 860px) { .pj-text { grid-template-columns: 1fr; } }
.pj-text h2 { max-width: min(14ch, 100%); }
/* Galerie: Hoch- und Querformate mischen, ohne Luecken */
.pj-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.pj-gallery figure { grid-column: span 2; border-radius: var(--r-media); overflow: hidden; background: var(--c-surface); }
.pj-gallery figure.is-wide { grid-column: span 3; }
.pj-gallery figure.is-full { grid-column: span 6; }
@media (max-width: 860px) {
.pj-gallery { grid-template-columns: repeat(2, 1fr); }
/* Auf zwei Spalten zaehlt nur noch halb oder voll. Das letzte Bild einer
ungeraden Menge wird voll, damit unten keine Luecke bleibt. */
.pj-gallery figure,
.pj-gallery figure.is-wide { grid-column: span 1; }
.pj-gallery figure.is-full,
.pj-gallery figure.is-mobil-voll { grid-column: span 2; }
.pj-gallery figure img,
.pj-gallery figure.is-wide img { aspect-ratio: 3 / 4; }
.pj-gallery figure.is-full img,
.pj-gallery figure.is-mobil-voll img { aspect-ratio: 16 / 10; }
}
.pj-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.pj-gallery figure.is-wide img, .pj-gallery figure.is-full img { aspect-ratio: 16 / 9; }
/* Kompakte Vorschau weiterer Projekte */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 860px) { .mini-grid { grid-template-columns: 1fr; gap: var(--s-2); } }
.mini {
display: block; overflow: hidden; border-radius: var(--r-media);
background: var(--c-surface);
transition: background var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.mini:hover { background: var(--c-surface-2); transform: translateY(-4px); }
.mini__thumb { display: block; overflow: hidden; }
.mini__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.mini__body { display: block; padding: 0.9rem 1.1rem 1.1rem; }
.mini__client { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-grey); }
.mini__title {
display: block; margin-top: 0.25rem;
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: 0.98rem; line-height: 1.1; letter-spacing: var(--ls-display);
}
.mini__tag {
display: inline-block; margin-top: 0.6rem;
font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
padding: 0.3em 0.7em; border-radius: var(--r-pill);
background: var(--c-acc-100); color: var(--c-ink);
}
/* Auf dem Handy als flache Zeile: Bild links, Text rechts. */
@media (max-width: 860px) {
.mini { display: grid; grid-template-columns: 108px 1fr; align-items: center; }
.mini__img { aspect-ratio: 1; }
.mini__body { padding: 0.7rem 0.9rem; }
.mini__tag { margin-top: 0.4rem; }
}
/* ============================================================
Portrait in der Positionierungs-Sektion
============================================================ */
/* ============================================================
Schmale Schirme: erzwungene Umbrueche in Ueberschriften raus,
sonst entstehen Zeilen, die breiter sind als das Display.
============================================================ */
@media (max-width: 700px) {
/* Erzwungene Umbrueche fallen weg, damit keine Zeile breiter wird als das
Display. Vor jedem
steht im Markup ein Leerzeichen, sonst kleben die
Woerter zusammen. Ausnahme: .br-fix bleibt, dort ist die Zeilenteilung
gewollt und passt auch auf schmalen Schirmen. */
.display br:not(.br-fix) { display: none; }
.display { text-wrap: balance; }
}
/* ============================================================
Rechtstexte: Inhaltsverzeichnis links, Text rechts
============================================================ */
.legal-hero { padding-block: var(--s-5) var(--s-4); }
/* Gleiche Groesse wie jede andere H1. Der frueher hier stehende kleinere
Wert kam vom Ueberlauf-Problem mit "DATENSCHUTZERKLAERUNG"; das loest
inzwischen die Silbentrennung auf .display, nicht eine Sonderausnahme. */
.legal-h1 { font-size: var(--t-h1); }
.legal-hero p { margin-top: var(--s-2); color: var(--c-grey); font-size: var(--t-small); }
.legal-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
/* Die Verzeichnis-Spalte muss ueber die volle Zeilenhoehe gehen, sonst hat das
sticky darin keinen Weg: mit align-items:start war die Spalte genau 288px
hoch, also exakt so hoch wie das Verzeichnis selbst - Laufweg 0. Der
Rechtstext daneben ist rund 12900px lang. Die Spalte traegt keinen eigenen
Hintergrund, das Strecken ist also unsichtbar. */
.legal-toc { align-self: stretch; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } }
.legal-toc-inner {
position: sticky; top: var(--s-3);
background: var(--c-surface); border-radius: var(--r-card);
padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
@media (max-width: 900px) {
.legal-toc-inner { position: static; }
/* Gleiche Ueberlegung wie in der Fusszeile: die Verzeichnis-Links waren nur
20px hoch. Der bisherige Abstand der Liste wandert in die Polsterung. */
.legal-toc a { padding-block: 0.4rem; }
.legal-toc ol { gap: 0.1rem; }
}
.legal-toc-title {
font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
font-size: 0.78rem; letter-spacing: 0.14em; color: var(--c-acc-900);
margin-bottom: var(--s-2);
}
.legal-toc ol { counter-reset: legal; display: grid; gap: 0.55rem; }
.legal-toc li { counter-increment: legal; font-size: 0.92rem; line-height: 1.35; }
.legal-toc a { display: flex; gap: 0.55rem; color: var(--c-ink-soft); }
.legal-toc a::before {
content: counter(legal) "."; flex: none; min-width: 1.4em;
font-weight: 700; color: var(--c-acc-500);
}
.legal-toc a:hover { color: var(--c-acc-900); }
.legal-body { max-width: 72ch; }
.legal-body h2 {
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; letter-spacing: var(--ls-display);
margin-top: var(--s-5); margin-bottom: var(--s-2);
scroll-margin-top: var(--s-3);
}
.legal-body h2:first-child { margin-top: 0; }
/* Die Rechtsseiten fahren bewusst eine eigene, kleinere Stufenleiter: ein
dichtes Dokument mit vielen Abschnitten vertraegt keine 48px-Ueberschriften.
Kaputt war aber der Abstand ZWISCHEN den Stufen - h3 lag mit 16.8px kaum
ueber dem Fliesstext (15.7px) und h4 mit 15.7px sogar darunter. Damit war
die Gliederung praktisch unsichtbar. Jetzt steigt jede Stufe deutlich. */
/* h3 skaliert mit, sonst faellt der Abstand zu h2 auf dem Handy zusammen:
dort schrumpft h2 auf seinen Mindestwert, ein festes h3 bliebe daneben
stehen. Gemessen bei 390px waren es vorher nur 2.4px Unterschied. */
.legal-body h3 { font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.3rem); margin-top: var(--s-3); margin-bottom: 0.4rem; }
.legal-body h4 { font-weight: 600; font-size: 1.05rem; margin-top: var(--s-2); margin-bottom: 0.3rem; color: var(--c-ink-soft); }
.legal-body p, .legal-body ul, .legal-body ol { margin-bottom: var(--s-2); }
.legal-body ul { list-style: disc; padding-left: 1.25em; }
.legal-body ol { list-style: decimal; padding-left: 1.4em; }
.legal-body li { margin-bottom: 0.3rem; }
.legal-body a { color: var(--c-acc-900); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--c-ink); }
.legal-body hr { border: 0; border-top: 1px solid var(--c-surface-2); margin-block: var(--s-4); }
/* ============================================================
Unterseiten
============================================================ */
.leistung-text { max-width: min(72ch, 100%); margin-inline: auto; }
.leistung-text h2 {
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.12; letter-spacing: var(--ls-display);
margin-top: var(--s-4); margin-bottom: var(--s-2);
}
.leistung-text h2:first-child { margin-top: 0; }
.leistung-text h3 { font-weight: 700; margin-top: var(--s-3); margin-bottom: 0.35rem; }
.leistung-text p, .leistung-text ul { margin-bottom: var(--s-2); }
.leistung-text ul { list-style: none; display: grid; gap: 0.5rem; }
.leistung-text li { position: relative; padding-left: 1.15rem; }
.leistung-text li::before {
content: ''; position: absolute; left: 0; top: 0.62em;
width: 6px; height: 6px; border-radius: 50%; background: var(--c-acc-500);
}
.mini-grid--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .mini-grid--drei { grid-template-columns: 1fr; } }
/* --- Kontaktseite ------------------------------------------ */
.kontakt-karte { background: var(--c-surface); border-radius: var(--r-card); padding: clamp(1.5rem, 3vw, 2.2rem); text-align: center; }
.kontakt-portrait { width: 132px; aspect-ratio: 1; margin: 0 auto var(--s-2); border-radius: 50%; overflow: hidden; }
.kontakt-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.kontakt-name { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; letter-spacing: var(--ls-display); }
.kontakt-rolle { font-size: var(--t-small); color: var(--c-grey); }
.kontakt-liste { margin-top: var(--s-3); display: grid; gap: 0.75rem; text-align: left; }
.kontakt-liste li { display: grid; gap: 0.1rem; padding-top: 0.75rem; border-top: 1px solid var(--c-surface-2); }
.kontakt-liste span { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--c-grey); }
.kontakt-liste a:hover { color: var(--c-acc-900); }
/* ============================================================
Schutz gegen waagerechten Ueberlauf
In Grid und Flex steht min-width standardmaessig auf auto. Kinder
schrumpfen dadurch nicht unter ihren Inhalt und schieben die ganze
Seite breiter als den Schirm. Das hier setzt den Riegel vor.
============================================================ */
.wrap > *,
.about > *, .about__facts > *,
.services > *, .projects > *, .films > *, .mini-grid > *,
.footer__grid > *, .kontakt-grid > *, .legal-grid > *,
.pj-text > *, .pj-meta > *, .logos > * { min-width: 0; }
/* Fliesstext bricht notfalls im Wort, damit nie etwas hinausragt.
Ueberschriften sind davon ausgenommen, deren Zeilen sind gemessen. */
body { overflow-wrap: break-word; }
.display { overflow-wrap: normal; }
/* ============================================================
Farbverlaeufe als Flaechen
============================================================ */
.section--verlauf { background: var(--g-hell); }
.section--kuehl { background: var(--g-kuehl); }
.section--warm { background: var(--g-warm); }
/* Weicher Schein am Seitenanfang.
Bewusst als absolut gesetzte Flaeche ueber die volle Breite und nicht als
Kreis im Hero: ein Kreis wird am Rand abgeschnitten und erzeugt genau die
harte Kante, die auf iOS aufgefallen ist. */
.hero { position: relative; }
body::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: clamp(420px, 62vh, 700px);
background: linear-gradient(180deg, #E4EDF2 0%, #F2F6F9 42%, rgba(255,255,255,0) 100%);
pointer-events: none; z-index: -1;
}
/* Zarte Trennkante zwischen Verlaufsflaechen */
.section--verlauf + .section, .section--kuehl + .section { position: relative; }
/* ============================================================
Das hidden-Attribut schlaegt jede Komponentenregel
.btn setzt display:flex und gewinnt als Klasse gegen die Browser-Regel
[hidden] { display: none }. Dadurch blieb der Absenden-Knopf im Formular
sichtbar, obwohl das Skript ihn korrekt auf hidden gesetzt hatte.
============================================================ */
[hidden] { display: none !important; }
/* ============================================================
Silbentrennung: lieber ein Bindestrich als ein Wort ueber dem Rand
============================================================ */
html { -webkit-hyphens: auto; hyphens: auto; }
.menu__link, .btn { -webkit-hyphens: auto; hyphens: auto; }
/* Kurze Auszeichnungen sollen nicht getrennt werden */
.eyebrow, .tag, .pj-meta__k, .footer__bottom, .mini__client { -webkit-hyphens: none; hyphens: none; }
/* Der Hero-Claim wird NIE getrennt. Ein Bindestrich mitten in der Headline
("BEEIN-DRUCKEN.") faellt sofort auf und wirkt wie ein Fehler. Dort ist die
Groesse so gewaehlt, dass das laengste Wort auf jeder Breite ab 320px in
eine Zeile passt (siehe --t-mega in tokens).
ACHTUNG: nur hier abschalten, nicht auf .display allgemein. Sonst laeuft
z. B. die H1 "Datenschutzerklaerung" (455px Text in 335px Spalte) ungetrennt
aus ihrer Box und wird vom overflow-x: clip der Seite abgeschnitten.
Ueberall sonst ist ein Trennstrich das kleinere Uebel. */
.hero__claim, .hero__claim .zeile { -webkit-hyphens: none; hyphens: none; }
.display { -webkit-hyphens: auto; hyphens: auto; }
/* E-Mail und lange Rechtsbegriffe im Footer: umbrechen ja, aber ohne
Bindestrich. "info@onelightpro-duction.de" liest sich wie ein Tippfehler. */
.footer a[href^="mailto:"], .footer a[href^="tel:"], .footer__spalte a {
-webkit-hyphens: none; hyphens: none;
overflow-wrap: anywhere;
}
/* ============================================================
Hero: Zeilen steigen gestaffelt auf
============================================================ */
.hero__claim .zeile {
display: block;
opacity: 0; transform: translateY(0.4em);
transition: opacity 0.75s var(--e-out), transform 0.75s var(--e-out);
}
.is-geladen .hero__claim .zeile { opacity: 1; transform: none; }
.hero__claim .zeile:nth-child(1) { transition-delay: 0.05s; }
.hero__claim .zeile:nth-child(2) { transition-delay: 0.15s; }
.hero__claim .zeile:nth-child(3) { transition-delay: 0.25s; }
.hero__claim .zeile:nth-child(4) { transition-delay: 0.35s; }
.hero__lead, .hero__actions {
opacity: 0; transform: translateY(14px);
transition: opacity 0.7s var(--e-out) 0.45s, transform 0.7s var(--e-out) 0.45s;
}
.is-geladen .hero__lead, .is-geladen .hero__actions { opacity: 1; transform: none; }
/* ============================================================
Menue: oeffnet sich von unten nach oben
============================================================ */
.menu {
clip-path: inset(100% 0 0 0 round 30px);
transition: clip-path 0.55s var(--e-out), opacity 0.25s var(--e-out), visibility 0.55s;
transform: translateX(-50%);
}
.menu[data-open="true"] {
clip-path: inset(0 0 0 0 round 30px);
transform: translateX(-50%);
}
.menu__inner { transform: translateY(8px); transition: transform 0.55s var(--e-out); }
.menu[data-open="true"] .menu__inner { transform: none; }
/* ============================================================
Gestaffeltes Einblenden beim Scrollen
============================================================ */
[data-reveal] { transition-delay: var(--verzug, 0s); }
/* Bilder kommen mit einem Hauch Zoom herein */
.project__card .project__img,
.mini__img { transform-origin: center; }
[data-reveal] .project__img { transform: scale(1.06); transition: transform 1.1s var(--e-out); }
[data-reveal].is-in .project__img { transform: scale(1); }
/* Sanfte Parallaxe im Bewegtbild-Band */
.showreel__media { will-change: transform; }
/* ============================================================
Footer
============================================================ */
.footer {
position: relative; overflow: hidden; isolation: isolate;
background: var(--g-dunkel); color: var(--c-on-dark);
padding-block: var(--s-6) var(--s-3);
border-top: 0;
}
.footer__glow {
position: absolute; inset: -30% -10% auto; height: 70%; z-index: 0;
background: radial-gradient(50% 60% at 50% 0%, rgba(154,183,199,0.42) 0%, rgba(154,183,199,0) 70%);
pointer-events: none;
}
/* zweite Lichtquelle im Footer: unten links, in der tieferen Akzentfarbe */
.footer::after {
content: ''; position: absolute; z-index: 0; pointer-events: none;
width: 60%; height: 55%; left: -20%; bottom: -25%;
border-radius: 50%;
background: radial-gradient(circle, rgba(51,89,107,0.75) 0%, rgba(51,89,107,0) 68%);
filter: blur(90px); opacity: 0.8;
}
/* Inhalt ueber Licht und Koernung */
.footer__top, .footer__grid, .footer__bottom { z-index: 1; }
.footer__top {
position: relative; display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--s-3);
padding-bottom: var(--s-5); margin-bottom: var(--s-4);
border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer__claim { font-size: var(--t-h1); margin: 0; }
.footer__grid {
position: relative;
/* Die Spaltenzahl steht als EINZIGE Quelle im Block "Footer: fuenf Spalten"
weiter unten, zusammen mit ihren Umbruchpunkten. Hier stand frueher ein
zweiter Wert, der von dort still ueberschrieben wurde. */
display: grid; gap: var(--s-4) var(--s-3);
}
.footer__brand { max-width: 34ch; }
.footer__logo { height: 40px; width: auto; margin-bottom: var(--s-2); }
.footer__claimlein { color: rgba(255,255,255,0.62); font-size: 0.92rem; }
.footer__social { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.footer__social a { font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.footer__social a:hover { color: var(--c-acc-100); }
.footer h4 {
font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
font-size: 0.74rem; letter-spacing: 0.14em; color: var(--c-acc-100);
margin-bottom: var(--s-2);
}
.footer__col li + li { margin-top: 0.45rem; }
.footer__col a, .footer__col li { color: rgba(255,255,255,0.82); font-size: 0.95rem; }
.footer__col a:hover { color: #fff; }
.footer__bottom {
position: relative;
margin-top: var(--s-5); padding-top: var(--s-3);
border-top: 1px solid rgba(255,255,255,0.14);
display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap;
font-size: var(--t-small); color: rgba(255,255,255,0.55);
}
.footer__recht { display: flex; gap: var(--s-2); }
.footer__bottom a:hover { color: #fff; }
/* Im Footer wird NICHT getrennt. Bei zwei Spalten auf dem Handy standen dort
"Imagefilmprodukti-on" und "Datenschutzerklae-rung"; solche Trennungen lesen
sich wie ein Fehler. Gemessen bei 390px: Spalte 163px, aber
"Imagefilmproduktion" braucht 164px, "Datenschutzerklaerung" 171px und die
E-Mail 216px. Zwei Spalten sind hier schlicht zu eng. */
.footer { -webkit-hyphens: none; hyphens: none; }
@media (max-width: 780px) {
/* Spaltenzahl NICHT hier setzen: der Block "Footer: fuenf Spalten" weiter
unten definiert sie erneut und wuerde diese Regel ueberstimmen. Genau
dieser Doppelbestand hat die Einspaltigkeit auf dem Handy verhindert. */
.footer__brand { grid-column: 1 / -1; max-width: none; }
.footer__top { flex-direction: column; align-items: flex-start; }
}
/* Die Schlusszeile stand links ausgerichtet in zwei losen Zeilen. Mittig und
mit etwas Luft wirkt sie wie ein bewusster Abschluss statt wie ein Rest. */
@media (max-width: 700px) {
.footer__bottom {
flex-direction: column; align-items: center; justify-content: center;
gap: 0.65rem; text-align: center;
}
}
/* ============================================================
Blaue Vollflaeche mit invertierter Schrift
============================================================ */
.section--blau {
position: relative; overflow: hidden;
background: linear-gradient(160deg, #7FA3B8 0%, var(--c-acc-500) 45%, #5B8598 100%);
color: var(--c-on-dark);
padding-block: var(--s-6);
}
.section--blau .display { color: var(--c-on-dark); }
.eyebrow--invers { color: rgba(255, 255, 255, 0.78); }
/* --- Unschaerfeflaechen und Koernung auf den dunklen Flaechen ----
CTA und Footer wirkten mit einer einzelnen Unschaerfe und sonst nichts
wie glatte schwarze Kaesten. Drei Mittel dagegen, alle ohne Markup:
1. kraeftigere, groessere Unschaerfen (blur 90px statt 70, mehr Deckkraft)
2. je Flaeche eine ZWEITE Lichtquelle in anderer Farbe und Lage, damit
nichts symmetrisch oder wiederholt wirkt
3. feine Filmkoernung als Struktur - fuer einen Filmemacher das
naheliegendste Material. SVG-Rauschen, einmal gerastert, gekachelt;
kein Bild, kein zusaetzlicher Request. Der feComponentTransfer zieht
den Kontrast hoch: rohes fractalNoise ist hell und flau (gemessen
Mittel 187, Streuung 15) und hellt mit overlay nur gleichmaessig auf,
statt Koerner zu zeichnen. Mit Kontrast x3: Mittel 156, Streuung 62.
Schichtung: Lichtquellen (0) < Koernung (1) < Inhalt (1, spaeter im DOM).
isolation:isolate haelt das im Kasten, sonst rutscht z-index nach aussen. */
.blob {
position: absolute; border-radius: 50%; pointer-events: none;
filter: blur(90px); opacity: 0.55; z-index: 0;
}
.blob--eins {
width: 60vw; height: 60vw; max-width: 700px; max-height: 700px;
top: -25%; right: -12%;
background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
opacity: 0.5;
}
.blob--cta {
width: 78%; height: 140%; top: -40%; left: -16%;
background: radial-gradient(circle, var(--c-acc-900) 0%, rgba(51,89,107,0) 68%);
opacity: 0.85;
}
.cta { position: relative; overflow: hidden; isolation: isolate;
/* Safari schneidet weichgezeichnete Kinder (Lichtquelle, Koernung) trotz
overflow:hidden nicht an den runden Ecken ab, oben links blitzte ein
Rechteck heraus. clip-path mit demselben Radius haelt es zuverlaessig. */
clip-path: inset(0 round var(--r-card)); }
.cta > *:not(.blob) { position: relative; z-index: 1; }
/* zweite Lichtquelle im CTA: unten rechts, heller und kleiner, gestreckt und
gedreht, damit sie nicht wie ein Spiegelbild der ersten wirkt */
.cta::after {
content: ''; position: absolute; z-index: 0; pointer-events: none;
width: 55%; height: 90%; right: -18%; bottom: -45%;
border-radius: 50%; transform: rotate(-18deg);
background: radial-gradient(ellipse at center, rgba(154,183,199,0.55) 0%, rgba(154,183,199,0) 66%);
filter: blur(80px); opacity: 0.7;
}
/* Koernung: liegt UEBER den Lichtquellen, damit auch das Licht koernig wird,
aber UNTER dem Inhalt. overlay hebt helle Koerner auf dunklem Grund an. */
.cta::before, .footer::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23k%29'/%3E%3C/svg%3E");
background-size: 220px 220px;
opacity: 0.22; mix-blend-mode: overlay;
}
.hero > *:not(.blob) { position: relative; z-index: 1; }
.section--blau .wrap { position: relative; z-index: 1; }
/* ============================================================
Laufband mit Logo-Pillen
============================================================ */
.marquee { position: relative; z-index: 1; overflow: hidden; margin-top: var(--s-4); }
.marquee + .marquee { margin-top: var(--s-2); }
.marquee__spur {
display: flex; align-items: center; gap: clamp(0.7rem, 1.6vw, 1.2rem);
width: max-content;
/* Dauer haengt an der Strecke: die Spur faehrt einen ganzen Satz weit
(rund 3700px). 110s ergeben ~34px/s, ein ruhiges Tempo.
Achtung beim Aendern der Kopienzahl in kunden.php: dann waechst die
Strecke und dieselbe Dauer wird automatisch schneller. */
animation: lauf 110s linear infinite;
}
.marquee--rueck .marquee__spur { animation-direction: reverse; animation-duration: 135s; }
/* Bewusst kein Anhalten beim Hovern: das Band soll durchlaufen. */
/* Drei Kopien je Spur, deshalb rueckt der Lauf um genau ein Drittel weiter.
Muss zu $kopien in kunden.php passen. */
@keyframes lauf { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
.marquee__spur { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
.logo-pille {
flex: none;
width: clamp(190px, 24vw, 268px); height: clamp(104px, 11vw, 136px);
padding: clamp(0.5rem, 1.1vw, 0.8rem) clamp(0.85rem, 1.7vw, 1.3rem);
border-radius: var(--r-pill);
background: #fff;
}
/* Feste Box plus object-fit: das Logo fuellt den Innenraum aus, kann nicht
ueberstehen und sitzt immer mittig, egal welches Seitenverhaeltnis es hat. */
.logo-pille img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* ============================================================
Slider mit angeschnittenen Nachbarn
============================================================ */
@media (max-width: 860px) {
/* Doppelte Klasse, damit die Regel gegen .mini-grid--drei gewinnt.
Sonst faellt der Slider auf eine Spalte zurueck und stapelt senkrecht. */
.slider.slider {
display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
grid-template-columns: none; gap: var(--s-2);
align-items: start;
/* Nur waagerecht. overflow-x allein wuerde overflow-y auf auto setzen,
dadurch liesse sich der Kasten auch senkrecht schieben. */
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain; overscroll-behavior-y: none;
touch-action: pan-x pinch-zoom;
scroll-snap-type: x mandatory;
padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1);
scrollbar-width: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider > * { scroll-snap-align: center; }
/* im Slider wieder als Karte, nicht als flache Zeile */
.slider .mini { display: block; }
.slider .mini__img { aspect-ratio: 16 / 10; }
.slider .mini__body { padding: 0.8rem 1rem 1rem; }
}
/* ============================================================
Seitenwechsel: Preloader mit dem Logo
============================================================ */
/* Loest den frueheren Schiebe-Uebergang ab. Beides zusammen liefe gegen-
einander: die Seite verschoebe sich unsichtbar hinter einer Deckflaeche.
Die Flaeche traegt --c-ink-soft, dieselbe Dunkelheit wie CTA und Footer.
Reines Schwarz kommt auf der Seite als Flaeche nirgends vor. */
.preloader {
position: fixed; inset: 0; z-index: 9000;
display: grid; place-items: center;
background: var(--c-ink-soft);
opacity: 1;
transition: opacity 0.4s var(--e-out);
}
/* visibility erst nach dem Ausblenden umschalten, sonst verschwindet die
Flaeche hart statt weich. Beim Wiederanzeigen greift sie sofort. */
.preloader.ist-weg {
opacity: 0; pointer-events: none; visibility: hidden;
transition: opacity 0.4s var(--e-out), visibility 0s linear 0.4s;
}
.preloader__logo {
width: 220px; max-width: 60vw; height: auto;
opacity: 0; transform: scale(0.96);
animation: preloader-logo 0.9s var(--e-out) forwards;
}
@keyframes preloader-logo { to { opacity: 1; transform: none; } }
/* Notbremse: laedt das Theme-JS nicht, bliebe die Seite sonst dauerhaft
verdeckt. Die Klasse nimmt das JS sofort ab, sobald es die Steuerung hat,
damit die Flaeche beim naechsten Seitenwechsel wieder erscheinen darf. */
.preloader.ist-start { animation: preloader-notaus 0s linear 4s forwards; }
@keyframes preloader-notaus { to { opacity: 0; visibility: hidden; } }
@media (max-width: 768px) { .preloader__logo { width: 140px; } }
/* Wer wenig Bewegung moechte, bekommt gar keine Deckflaeche. Das JS entfernt
sie dann ganz; die Regel hier greift schon vorher. */
@media (prefers-reduced-motion: reduce) {
.preloader { display: none; }
}
/* ============================================================
Gleiche Motive, gleiche Masse
Auf schmalen Schirmen stehen alle Projektkacheln untereinander.
Dann muessen sie auch gleich hoch sein, sonst wirkt die Spalte unruhig.
Das gestufte Raster bleibt dem Desktop vorbehalten.
============================================================ */
@media (max-width: 900px) {
.project__card,
.project--wide .project__card { aspect-ratio: 4 / 3; }
}
/* ============================================================
Bildstreifen auf den Leistungsseiten
============================================================ */
.bildstreifen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.bildstreifen figure { border-radius: var(--r-media); overflow: hidden; background: var(--c-surface); }
.bildstreifen img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
.bildstreifen { grid-template-columns: repeat(2, 1fr); }
.bildstreifen figure:nth-child(3) { grid-column: 1 / -1; }
.bildstreifen figure:nth-child(3) img { aspect-ratio: 16 / 10; }
}
/* ============================================================
Footer: fuenf Spalten inklusive Rechtliches
============================================================ */
.footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr; }
@media (max-width: 1040px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
/* Unter 560px zwei Spalten mit vier Gruppen, also ein sauberes 2x2 ohne Luecke.
Damit das aufgeht, muss der Platz stimmen: bei 390px Geraetebreite und 0.85rem
Spaltenabstand bleiben 168px je Spalte. Bei der urspruenglichen Schriftgroesse
brauchte "Imagefilmproduktion" 164px, "Datenschutzerklaerung" 171px und die
E-Mail 216px - deshalb hier eine Stufe kleiner plus der in der Adresse.
Einspaltig war die Alternative, wirkte aber als lange Stapelei. */
@media (max-width: 560px) {
.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-3) 0.85rem; }
/* Auf a und li setzen, nicht auf ul: Zeile 975 gibt den Links direkt
0.95rem, das ist spezifischer und haette die Liste ueberstimmt. */
.footer__col a, .footer__col li { font-size: 0.875rem; }
/* Antippflaeche: die Links waren nur 17px hoch, also kaum sicher zu treffen
und dicht beieinander. Mit Polsterung sind es 33px. Der bisherige Abstand
zwischen den Zeilen wandert in die Polsterung, damit die Fusszeile nicht
unnoetig waechst - der sichtbare Rhythmus bleibt aehnlich. */
.footer__col ul a { display: inline-block; padding-block: 0.5rem; }
.footer__col li + li { margin-top: 0; }
.footer__col h4 { font-size: 0.72rem; }
}
/* Signatur mit laufendem Farbverlauf, wie auf koenigsklassenfussball.de */
.fwn-credit {
font-weight: 600; text-decoration: none; color: inherit;
white-space: nowrap; /* "FWN Media" nie ueber zwei Zeilen brechen */
background: linear-gradient(110deg, #9CCF92, #6AB775, #4FB373, #21874A, #6AB775, #9CCF92) 0 0 / 220% text;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position 0.5s var(--e-out);
}
.fwn-credit:hover, .fwn-credit:focus-visible { background-position: -110% 0; }
/* ============================================================
Mehrstufiges Formular
============================================================ */
.ms-form { margin-top: var(--s-3); }
/* Ohne diesen Hinweis probiert niemand einen zweiten Chip an: die alte
Fassung sprang nach dem ersten Klick selbsttaetig weiter. */
.ms-hinweis { font-size: var(--t-small); color: var(--c-grey); margin: calc(var(--s-2) * -1) 0 var(--s-2); }
.ms-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ms-fortschritt {
display: flex; gap: var(--s-2); margin-bottom: var(--s-3);
font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-soft);
}
.ms-fortschritt li { display: flex; align-items: center; gap: 0.45rem; }
.ms-fortschritt span {
width: 1.7em; height: 1.7em; border-radius: 50%;
display: grid; place-items: center;
background: var(--c-surface-2); color: var(--c-ink-soft);
font-weight: 700; letter-spacing: 0;
transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.ms-fortschritt .is-aktiv { color: var(--c-ink); }
.ms-fortschritt .is-aktiv span { background: var(--c-ink-soft); color: var(--c-on-dark); }
.ms-fortschritt .is-fertig span { background: var(--c-acc-500); color: var(--c-ink); }
@media (max-width: 520px) { .ms-fortschritt li:not(.is-aktiv) { font-size: 0; gap: 0; } }
.ms-frage {
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: clamp(1.1rem, 3.2vw, 1.5rem); line-height: 1.1; letter-spacing: var(--ls-display);
margin-bottom: var(--s-2);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
border: 0; cursor: pointer;
padding: 0.8em 1.3em; border-radius: var(--r-pill);
background: var(--c-surface); color: var(--c-ink);
font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
font-size: 0.82rem; letter-spacing: 0.04em;
transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.chip:hover { background: var(--c-surface-2); transform: translateY(-2px); }
.chip.is-gewaehlt { background: var(--c-ink-soft); color: var(--c-on-dark); }
.feld { margin-top: var(--s-2); }
/* ACHTUNG: font-size gilt hier nur fuer .feld label. Fuer .feld-check span
wird sie weiter unten auf 0.86rem gesetzt - eine Aenderung an dieser Zeile
bleibt fuer die Checkbox-Beschriftung also wirkungslos. */
.feld label, .feld-check span { display: block; font-size: 0.8rem; margin-bottom: 0.35rem; color: var(--c-ink-soft); }
.feld__zusatz { color: var(--c-grey); font-size: 0.74rem; }
.feld input, .feld textarea {
width: 100%; padding: 0.85em 1em;
border: 1px solid var(--c-surface-2); border-radius: 14px;
background: #fff; color: var(--c-ink);
font-family: var(--f-body); font-size: 1rem;
transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.feld input:focus, .feld textarea:focus {
outline: none; border-color: var(--c-acc-500);
box-shadow: 0 0 0 3px rgba(107, 152, 174, 0.22);
}
.feld.hat-fehler input, .feld.hat-fehler textarea { border-color: #B4483F; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
@media (max-width: 560px) { .feld-paar { grid-template-columns: 1fr; gap: 0; } }
.feld-check { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: var(--s-3); }
.feld-check input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--c-acc-900); }
.feld-check span { margin: 0; font-size: 0.86rem; }
.feld-check a { color: var(--c-acc-900); text-decoration: underline; text-underline-offset: 2px; }
.feld-check.hat-fehler span { color: #B4483F; }
.ms-nav { display: flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.ms-prev[disabled] { opacity: 0.35; pointer-events: none; }
.ms-submit.is-laedt { opacity: 0.6; pointer-events: none; }
.ms-ergebnis { padding: var(--s-3); border-radius: var(--r-card); background: var(--c-surface); }
.ms-meldung { margin-bottom: var(--s-2); }
/* Auf der Kontaktseite bekommt das Formular eine eigene Karte */
.kontakt-inhalt .ms-form {
background: #fff; border-radius: var(--r-card);
padding: clamp(1.3rem, 3vw, 2.2rem);
box-shadow: 0 20px 50px -32px rgba(0, 0, 0, 0.4);
}
/* ============================================================
Fotostrecke auf der Startseite
Nutzt dieselbe lueckenlose Verteilung wie die Projektgalerie.
============================================================ */
.fotostrecke { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.fotostrecke figure { grid-column: span 2; border-radius: var(--r-media); overflow: hidden; background: var(--c-surface); }
.fotostrecke figure.is-wide { grid-column: span 3; }
.fotostrecke figure.is-full { grid-column: span 6; }
.fotostrecke img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform var(--d-slow) var(--e-out); }
.fotostrecke figure.is-wide img, .fotostrecke figure.is-full img { aspect-ratio: 16 / 9; }
.fotostrecke figure:hover img { transform: scale(1.04); }
@media (max-width: 860px) {
.fotostrecke { grid-template-columns: repeat(2, 1fr); }
.fotostrecke figure, .fotostrecke figure.is-wide { grid-column: span 1; }
.fotostrecke figure.is-full, .fotostrecke figure.is-mobil-voll { grid-column: span 2; }
.fotostrecke figure img, .fotostrecke figure.is-wide img { aspect-ratio: 3 / 4; }
.fotostrecke figure.is-full img, .fotostrecke figure.is-mobil-voll img { aspect-ratio: 16 / 10; }
}
/* ============================================================
Kontaktseite: Formular oben, Angaben darunter
============================================================ */
/* Das Formular ist die Hauptsache dieser Seite. Es steht deshalb breiter,
liegt hoeher ueber der Flaeche und traegt oben eine Kante in der Markenfarbe,
damit das Auge zuerst dort landet und nicht bei der Kontaktkarte darunter. */
/* Volle Inhaltsbreite. Die Felder selbst bleiben innen begrenzt, sonst
werden Eingabezeilen unangenehm lang. */
.kontakt-formular { max-width: none; margin-inline: auto; }
.kontakt-intro { max-width: min(56ch, 100%); margin: 0 auto var(--s-3); text-align: center; }
.kontakt-formular .ms-form {
position: relative;
background: #fff; border-radius: var(--r-card);
padding: clamp(1.6rem, 4vw, 3.2rem);
box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.kontakt-formular .ms-form::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
background: linear-gradient(90deg, var(--c-acc-900), var(--c-acc-500) 55%, var(--c-acc-100));
}
/* Die Frage traegt die Sektion, sie darf so gross sein wie eine H2. */
.kontakt-formular .ms-frage { font-size: clamp(1.35rem, 4.2vw, 2rem); }
.kontakt-formular .ms-fortschritt { margin-bottom: var(--s-3); }
/* Weniger Luft zwischen Hero und Formular, mehr darunter: das Formular
ruckt damit optisch an die Ueberschrift heran. */
.kontakt-formular { margin-top: calc(var(--s-4) * -1); }
@media (max-width: 620px) { .kontakt-formular { margin-top: 0; } }
.kontakt-karte--breit {
display: grid; grid-template-columns: 132px 1fr; gap: var(--s-3);
align-items: center; text-align: left;
max-width: 760px; margin-inline: auto;
}
.kontakt-karte--breit .kontakt-portrait { margin: 0; }
@media (max-width: 620px) {
.kontakt-karte--breit { grid-template-columns: 1fr; text-align: center; }
.kontakt-karte--breit .kontakt-portrait { margin-inline: auto; }
.kontakt-karte--breit .kontakt-liste { text-align: left; }
}
/* ============================================================
Einwilligungsbanner (Complianz)
Complianz verlinkt in der Fusszeile des Banners sowohl die
Cookie-Richtlinie als auch die Datenschutzerklaerung. Beide zeigen
bei uns auf dieselbe Seite, weil es bewusst keine eigene
Cookie-Richtlinie gibt. Der zweite, identische Link wird deshalb
ausgeblendet; die Datenschutzerklaerung bleibt verlinkt.
============================================================ */
#cmplz-cookiebanner-container a.cmplz-link.cookie-statement:not(.cmplz-manage-options):not(.cmplz-manage-third-parties):not(.cmplz-manage-vendors) {
display: none;
}
/* "Dienste verwalten" fuehrt nur zur Datenschutzerklaerung, eine eigene
Dienste-Liste gibt es nicht. Auf Daniels Wunsch ausgeblendet. */
#cmplz-cookiebanner-container a.cmplz-link.cmplz-manage-third-parties,
#cmplz-cookiebanner-container a.cmplz-link.cmplz-manage-vendors {
display: none !important;
}
/* ============================================================
Einwilligungsbanner: Akzeptieren und Ablehnen gleich gestalten
============================================================ */
/* Rechtliche Vorgabe: keine der beiden Antworten darf hervorgehoben oder
zurueckgenommen werden. Complianz lieferte "Akzeptieren" dunkel gefuellt
(#272727 auf weiss) und "Ablehnen" fast unsichtbar hell (#F9F9F9) aus -
gleiche Groesse, aber deutlich ungleiches Gewicht. Beide tragen jetzt
dieselbe Flaeche, dieselbe Schriftfarbe und denselben Rahmen.
"Einstellungen ansehen" bleibt bewusst leiser: das ist keine der beiden
Antworten, sondern der Weg zu den Details. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
background-color: var(--c-ink-soft) !important;
color: #fff !important;
border: 1px solid var(--c-ink-soft) !important;
font-weight: 500 !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
background-color: #000 !important;
border-color: #000 !important;
}
/* ============================================================
Leistungen: vier Bildkarten, je mit Gewerk-Tag (Fotografie/Videografie)
ONELight teilt sich in zwei Gewerke; daraus werden vier buchbare
Leistungen. Bild fuehrt, Text bleibt knapp.
============================================================ */
.leistungen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.3rem, 2.6vw, 2rem);
}
/* Sechs Karten: drei Spalten auf breiten Schirmen, sonst zwei, mobil eine. */
@media (max-width: 1100px) { .leistungen-grid { grid-template-columns: repeat(2, 1fr); } }
.leistung {
display: flex; flex-direction: column;
background: #fff;
border-radius: var(--r-card);
overflow: hidden;
box-shadow: var(--shadow-card);
scroll-margin-top: var(--s-5); /* Ankersprung nicht unter den Rand */
}
.leistung__bild { aspect-ratio: 3 / 2; overflow: hidden; }
.leistung__img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform var(--d-slow) var(--e-out); }
.leistung:hover .leistung__img { transform: scale(1.04); }
.leistung__text { padding: clamp(1.3rem, 3vw, 2rem); display: flex; flex-direction: column; }
.leistung__titel { font-size: var(--t-h3); margin-bottom: 0.6rem; }
.leistungen-cta { margin-top: var(--s-5); }
.leistung__text .muted { margin-bottom: var(--s-2); }
.leistung__punkte { list-style: none; margin: auto 0 0; padding: var(--s-2) 0 0; display: grid; gap: 0.5rem;
border-top: 1px solid var(--c-surface-2); }
.leistung__punkte li {
position: relative; padding-left: 1.4rem;
font-size: var(--t-body); color: var(--c-ink-soft);
}
.leistung__punkte li::before {
content: ""; position: absolute; left: 0; top: 0.55em;
width: 0.5rem; height: 0.5rem; border-radius: 50%;
background: var(--c-acc-500);
}
@media (max-width: 720px) {
.leistungen-grid { grid-template-columns: 1fr; }
}
/* Ankersprung soll nicht direkt am oberen Rand kleben. */
#ueber-mich, #leistungen,
#imagefilmproduktion, #contentproduktion, #eventbegleitung, #hochzeitsfilme { scroll-margin-top: var(--s-4); }
/* Sprungziel der "Projekt anfragen"-Schaltflaechen. Ohne Abstand klebte das
Formular beim Ankersprung direkt an der Fensterkante. */
#formular { scroll-margin-top: var(--s-4); }
/* ============================================================
Warum ONELight: Haltung mit Gesicht
Helle Flaeche wie der Rest der Seite. Bild links, Aussage rechts,
darunter drei Saeulen als Beleg. Die dunkle Fassung davor stand
als einzige dunkle Flaeche fremd auf der Seite.
============================================================ */
.haltung {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(1.8rem, 5vw, 4rem);
align-items: center;
}
.haltung__medien { margin: 0; }
.haltung__bild {
width: 100%; height: auto; display: block;
aspect-ratio: 4 / 5; object-fit: cover;
object-position: center 20%; /* beschneidet notfalls unten, nie den Kopf */
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.haltung__name {
margin-top: var(--s-2);
font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase;
color: var(--c-ink-soft);
}
.haltung__satz { margin-top: 1rem; }
.haltung__lead { margin-top: var(--s-3); max-width: 46ch; color: var(--c-ink-soft); }
.saeulen {
list-style: none; margin: var(--s-4) 0 0; padding: var(--s-3) 0 0;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.4vw, 2rem);
border-top: 1px solid var(--c-surface-2);
}
.saeule__titel {
font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
font-size: clamp(0.85rem, 1.7vw, 0.98rem); letter-spacing: 0.04em;
margin-bottom: 0.4rem;
}
.saeule__text { color: var(--c-ink-soft); font-size: var(--t-small); line-height: 1.6; }
@media (max-width: 900px) {
.haltung { grid-template-columns: 1fr; gap: var(--s-3); }
/* KEIN Querformat hier: das Portrait ist 4:5, ein 3:2-Ausschnitt hat den
Kopf abgeschnitten. Hochformat beibehalten. */
.haltung__bild { aspect-ratio: 4 / 5; }
}
@media (max-width: 620px) {
.saeulen { grid-template-columns: 1fr; gap: var(--s-2); }
.saeule { padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-surface-2); }
.saeule:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* Ueber mich steht jetzt ohne Portrait da: eine Spalte statt zwei. */
.about > *:only-child { grid-column: 1 / -1; max-width: 62ch; }
/* ============================================================
Grossansicht der Bilder
Nutzt das native