/* ============================================================
Bastian Schenk — Agentur für politische Kommunikation
Design: "Clean Apple trifft retro" · Kampagnen-Akte (Variante 2c)
============================================================ */
/* ──────────────────────── Schriften ────────────────────────
Selbst gehostet statt von Googles Servern. Grund ist nicht die Ladezeit,
sondern der Datenschutz: Beim Einbinden über fonts.googleapis.com geht bei
jedem Seitenaufruf die IP-Adresse der Besucher an Google in die USA — ohne
Einwilligung. Genau dafür gab es 2022 vor dem Landgericht München eine
Verurteilung zu Schadenersatz.
Die Regeln stammen unverändert aus Googles eigener Ausgabe, nur die Adressen
zeigen jetzt in den Ordner fonts/. Dadurch bleiben Zeichenumfang
(unicode-range) und Nachlade-Verhalten identisch. Nur latin und latin-ext
sind übernommen — Vietnamesisch braucht die Seite nicht.
============================================================ */
@font-face {
font-family: 'Anton';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/anton-400-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: 'Anton';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/anton-400-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: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-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;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-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: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-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: 500;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-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: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-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: 600;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-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: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-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: 700;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-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: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/courier-prime-400-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: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/courier-prime-400-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: 'Courier Prime';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/courier-prime-700-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: 'Courier Prime';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/courier-prime-700-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;
}
:root {
/* Fläche der Seite — „das Blatt". Der Ton ist aus dem Hero-Foto gemessen:
Das Papier dort ist ein warmes Neutralgrau (#cec6c2), kein Sandton. Hier
steht derselbe Farbton, nur auf Hintergrundhelligkeit gebracht — also die
Farbe, die das Blatt ohne Studiolicht hätte.
Nicht mit --bg zusammenlegen: --bg dient zugleich als helle Schriftfarbe
auf den dunklen Flächen (Footer, Akt-Trenner, Buttons). */
--sheet: #f4f1ec;
--bg: #faf8f4;
--ink: #16130f;
--orange: #e8622c;
--sand: #f1e7d7;
--paper: #ffffff;
--ink-70: rgba(22, 19, 15, .72);
--ink-60: rgba(22, 19, 15, .60);
--ink-55: rgba(22, 19, 15, .55);
--ink-45: rgba(22, 19, 15, .45);
--line: rgba(22, 19, 15, .14);
--mono: 'Courier Prime', ui-monospace, 'SFMono-Regular', Menlo, monospace;
--display: 'Anton', 'Archivo', Impact, sans-serif;
--sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Nur für scroll-margin gedacht — die Leiste rendert je nach Breite 75–77px. */
--nav-h: 76px;
--pad-x: 40px;
/* Papierstruktur der Seite.
Nach der Kamerafahrt ist man im Blatt — ab da soll der Untergrund auch
Papier sein und keine glatte Fläche. Das Korn ist als SVG-Rauschen direkt
hier eingebettet: keine zusätzliche Bilddatei, kein Ladevorgang, und es
bleibt da, auch wenn die Fotos in /images fehlen oder getauscht werden.
stitchTiles='stitch' macht die Kachel nahtlos, deshalb ist die Wiederholung
nicht zu sehen.
Die Adressen sind vollständig prozentkodiert (%20 statt Leerzeichen, %22
statt Anführungszeichen). Das ist kein Schönheitsfehler, sondern Absicht:
Safari ignoriert eingebettete SVG-Grafiken mit unkodierten Sonderzeichen
stillschweigend — die Struktur bliebe dort einfach aus.
Zwei Lagen, weil echtes Papier zweierlei hat: eine feine Faserung und eine
großflächige, wolkige Unregelmäßigkeit. Nur die feine Lage allein liest
sich als Bildrauschen, nicht als Papier.
Stärke ändern: die Zahlen hinter opacity%3D%22 am jeweiligen Zeilenende
(0.45 für die Faser, 0.20 für die Wolken). Höher = deutlicher, trübt aber
den Cremeton ein. */
--grain-fibre:
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22f%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23f%29%22%20opacity%3D%220.45%22%2F%3E%3C%2Fsvg%3E");
--grain-cloud:
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22700%22%20height%3D%22700%22%3E%3Cfilter%20id%3D%22m%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.015%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22700%22%20height%3D%22700%22%20filter%3D%22url%28%23m%29%22%20opacity%3D%220.20%22%2F%3E%3C%2Fsvg%3E");
--grain: var(--grain-fibre), var(--grain-cloud);
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* clip statt hidden: hidden würde hier einen Scroll-Container aufmachen —
und damit die sticky-Bühne im Hero außer Kraft setzen. */
overflow-x: clip;
}
body {
margin: 0;
/* Das Blatt, auf dem die ganze Seite steht. */
background-color: var(--sheet);
background-image: var(--grain);
color: var(--ink);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
a { color: var(--ink); text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: #ffd9c7; }
.dot { color: var(--orange); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--ink);
color: var(--bg);
padding: 12px 20px;
border-radius: 0 0 10px 0;
font-size: 14px;
font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 3px;
border-radius: 4px;
}
/* ─────────────────────────── Buttons ─────────────────────────── */
.btn {
display: inline-block;
border-radius: 99px;
font-weight: 600;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--solid {
background: var(--ink);
color: var(--bg);
padding: 10px 22px;
font-size: 14.5px;
}
.btn--solid:hover { background: var(--orange); color: #fff; }
/* Dunkle statt weißer Schrift: Weiß auf Orange kommt nur auf Kontrast 3,4 und
fällt damit unter den Mindestwert 4,5 für Fließtext. Dunkel bringt über 5 —
und passt zu den Akt-Titeln, die auf Orange ebenfalls dunkel stehen. */
.btn--orange {
background: var(--orange);
color: var(--ink);
padding: 14px 28px;
font-size: 15.5px;
}
.btn--orange:hover { background: var(--ink); color: var(--bg); }
.btn--outline {
border: 2px solid var(--ink);
color: var(--ink);
padding: 12px 26px;
font-size: 15.5px;
}
.btn--outline:hover { background: var(--ink); color: var(--bg); }
/* ────────────────────────── Navigation ────────────────────────── */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px var(--pad-x);
/* Muss der Papierfarbe folgen, sonst setzt sich die Leiste beim Scrollen
als hellerer Streifen vom Blatt ab. */
background: rgba(244, 241, 236, .82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(22, 19, 15, .07);
}
.nav__logo {
font-weight: 700;
font-size: 17px;
letter-spacing: -.01em;
}
.nav__links {
display: flex;
align-items: center;
gap: 32px;
font-size: 14.5px;
font-weight: 500;
}
/* Burger-Menü und Klapp-Panel sind entfallen: In der Leiste steht nur noch
Name und ein Knopf, und beides passt auch auf das schmalste Display. */
/* ──────────────────────────── Hero ──────────────────────────── */
/* Die Höhe ist der Scrollweg der Kamerafahrt: 260vh scrollen = einmal ins
Papier hinein. Die Bühne selbst bleibt dabei mit position:sticky stehen.
Ohne JavaScript bleibt es bei einer ruhigen Bildschirmhöhe. */
.hero {
height: 100vh;
height: 100svh;
position: relative;
background: var(--sheet);
}
.js .hero { height: 240vh; }
.hero__pin {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
}
/* ---- Die Szene: Tisch mit leerem Blatt ---- */
/* Zielpunkt der Kamerafahrt: die Mitte des Blattes im Hero-Foto. Das Blatt
liegt dort nicht exakt mittig — rechts daneben liegt der Stift. Ohne diese
Korrektur würde die Fahrt am Blatt vorbei nach rechts driften. */
.hero {
--paper-x: 47%;
--paper-y: 49%;
}
.hero__zoom {
position: absolute;
inset: 0;
transform-origin: var(--paper-x) var(--paper-y);
will-change: transform;
}
.desk { position: absolute; inset: 0; }
/* Gezeichneter Tisch — trägt die Sektion, solange kein Foto in /images liegt.
Bewusst als weiche, fast weiße Studiofläche gehalten, damit der Ersatz
und das gewählte Studio-Foto dieselbe Anmutung haben: Das Blatt setzt
sich nur über seinen Schatten ab, nicht über einen Farbkontrast. */
.desk__surface {
position: absolute;
inset: 0;
background:
radial-gradient(112% 86% at 48% 40%,
#f4eee3 0%, #f0e9dd 40%, #e9e2d4 74%, #ded6c6 100%);
}
/* Maße, Lage und Ton sind dem Hero-Foto nachempfunden: Blatt im Querformat,
leicht links der Mitte, Stift senkrecht rechts daneben. So springt das
Bild nicht, wenn das Foto dazukommt oder fehlt. */
.desk__paper {
position: absolute;
left: var(--paper-x);
top: var(--paper-y);
width: min(59%, 940px);
aspect-ratio: 1.364 / 1;
transform: translate(-50%, -50%);
background: #f8f6f2;
box-shadow:
0 1px 2px rgba(22, 19, 15, .10),
0 18px 40px -16px rgba(22, 19, 15, .28);
}
.desk__pen {
position: absolute;
left: 76%;
top: var(--paper-y);
width: min(23%, 360px);
transform: translate(-50%, -50%) rotate(90deg);
}
.desk__pen-body {
width: 100%;
height: 11px;
background: linear-gradient(90deg,
#d9541f 0%, #d9541f 22%,
#1c1a17 22%, #1c1a17 100%);
border-radius: 5px;
box-shadow: 0 8px 16px rgba(22, 19, 15, .20);
}
.desk__pen-tip {
position: absolute;
right: -5px;
top: 2px;
width: 7px;
height: 7px;
border-radius: 0 4px 4px 0;
background: #1c1a17;
}
/* Das Foto deckt die gezeichnete Szene ab, sobald es geladen ist. */
.desk__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.desk.is-empty .desk__photo { display: none; }
/* ---- Text: liegt über dem Tisch, nicht auf dem Blatt ---- */
.hero__overlay {
position: absolute;
/* Rechts eingerückt, damit der Satz auf der Blattmitte sitzt und nicht
auf der Bildmitte — rechts vom Blatt liegt der Stift. */
inset: 0 6% 0 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 96px 24px;
text-align: center;
/* Gleicher Zielpunkt wie die Szene — Text und Tisch fahren als eine Kamera. */
transform-origin: var(--paper-x) var(--paper-y);
will-change: transform, opacity;
}
/* Weicher Lichthof, damit die Frage auch über einem Foto sicher lesbar bleibt. */
.hero__overlay::before {
content: '';
position: absolute;
inset: 0;
/* Nur so viel Aufhellung, dass die grauen Zeilen sicher tragen — die
Papierstruktur im Foto soll sichtbar bleiben. */
background: radial-gradient(54% 40% at var(--paper-x) var(--paper-y),
rgba(250, 248, 244, .45) 0%, rgba(250, 248, 244, 0) 78%);
pointer-events: none;
}
.hero__overlay > * { position: relative; }
.hero__kicker {
font-family: var(--mono);
font-size: 13px;
letter-spacing: .22em;
/* --ink-55 kam nur auf Kontrast 4,0 und lag damit unter dem Mindestwert. */
color: var(--ink-70);
}
/* Bewusst im normalen Schnitt statt fett: Eine Schreibmaschine schlägt Farbe
aufs Papier, sie druckt keine Überschrift. Die Größe ist so gewählt, dass
die Zeile innerhalb der Blattkante bleibt. */
.hero__question {
margin: 0;
font-family: var(--mono);
font-weight: 400;
font-size: clamp(24px, 3.4vw, 62px);
line-height: 1.2;
letter-spacing: -.005em;
text-wrap: balance;
}
.caret {
display: inline-block;
width: .06em;
min-width: 3px;
height: .95em;
background: var(--ink);
vertical-align: -.12em;
margin-left: .06em;
animation: blink 1.05s step-end infinite;
}
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
/* Sitzt nicht mehr direkt unter dem Text, sondern an der Unterkante des
Blattes. Bleibt Kind des Overlays, damit er die Kamerafahrt mitmacht und
mit der Frage zusammen ausblendet.
Der Wert von bottom ist die Stellschraube: größer = weiter nach oben. */
.hero__scroll {
position: absolute;
left: 0;
right: 0;
bottom: 19%;
font-family: var(--mono);
font-size: 12px;
letter-spacing: .18em;
/* --ink-45 kam nur auf Kontrast 2,9. */
color: var(--ink-70);
text-align: center;
}
/* ---- Überblender am Ende der Fahrt ---- */
/* Trägt dieselbe Papierstruktur wie der Seitenhintergrund. Dadurch blendet die
Fahrt nicht auf eine glatte Fläche über, sondern auf das Blatt, in dem man
gerade gelandet ist — und der Übergang in die erste Sektion ist nahtlos. */
.hero__wash {
position: absolute;
inset: 0;
z-index: 3;
background-color: var(--sheet);
background-image: var(--grain);
opacity: 0;
pointer-events: none;
}
/* ---- Was auf dem leeren Blatt steht, wenn man drin angekommen ist ---- */
.hero__inpaper {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 24px;
opacity: 0;
pointer-events: none;
will-change: opacity, transform;
}
.hero__inpaper p {
margin: 0;
font-family: var(--mono);
text-align: center;
}
/* Soll auf einer Zeile stehen — deshalb kein Umbruch und keine Breitengrenze.
Der Satz ist kurz genug, dass er auch bei 19px auf ein schmales Handy passt. */
.hero__inpaper-line {
font-size: clamp(19px, 2.5vw, 36px);
line-height: 1.4;
white-space: nowrap;
}
/* Genau zwei Zeilen: Der Umbruch steht als
im HTML, und der Kasten ist
per width:max-content exakt so breit wie die längere der beiden Zeilen.
Dadurch kann keine davon ein zweites Mal umbrechen — eine feste
Zeichenbreite (vorher 38ch) hat genau das verursacht.
max-width:100% ist die Notbremse für sehr schmale Displays: Dort darf der
Satz lieber umbrechen als über den Rand hinauslaufen.
text-wrap: balance ist bewusst raus, es arbeitet dem festen Umbruch entgegen. */
.hero__inpaper-sub {
font-size: clamp(14px, 1.35vw, 19px);
line-height: 1.55;
color: var(--ink-60);
}
/* Jede Zeile ein eigener Block ohne Umbruchmöglichkeit. */
.hero__inpaper-sub span {
display: block;
white-space: nowrap;
}
/* Am Handy passen 52 Zeichen nicht in einer lesbaren Größe nebeneinander.
Dort darf der Satz wieder normal umbrechen, statt über den Rand zu laufen. */
@media (max-width: 700px) {
.hero__inpaper-sub span { display: inline; white-space: normal; }
}
.hero--static .hero__inpaper { display: none; }
/* Reduzierte Bewegung: keine Kamerafahrt, nur die stehende Szene. */
.js .hero--static { height: 100vh; height: 100svh; }
.hero--static .hero__wash { display: none; }
/* ─────────────────────── Akt-Trenner (Poster) ─────────────────────── */
.act {
padding: 11vh var(--pad-x);
overflow: hidden;
}
.act--orange { background: var(--orange); }
.act--dark { background: var(--ink); }
/* Dieselbe Breite wie .wrap, .split und .footer__inner (1140px).
Vorher standen hier 1240px — dadurch begann der Akt-Text 50px weiter links
als jeder andere Abschnitt. Alle linksbündigen Inhalte der Seite teilen sich
diese eine Kante; wer hier etwas ändert, verschiebt sie für die Akte allein. */
.act__inner { max-width: 1140px; margin: 0 auto; }
.act__no {
font-family: var(--mono);
font-size: 13px;
letter-spacing: .24em;
margin-bottom: 10px;
}
/* Dunkel statt weiß: Weiß auf Orange kam nur auf Kontrast 2,8. */
.act--orange .act__no { color: rgba(22, 19, 15, .92); }
.act--dark .act__no { color: rgba(250, 248, 244, .6); }
.act__title {
font-family: var(--display);
/* Obergrenze 138px statt 150px: Der Container ist bei 1140px gedeckelt, die
Schrift wüchse aber mit dem Fenster weiter. „WARUM UND WOFÜR?" ist der
längste der vier Titel und brach ab etwa 1450px Fensterbreite auf zwei
Zeilen um, während die kurzen Titel einzeilig blieben. Wer hier erhöht,
muss den längsten Titel auf einem breiten Monitor gegenprüfen. */
font-size: clamp(64px, 10vw, 138px);
line-height: .98;
text-transform: uppercase;
}
.act--orange .act__title { color: var(--ink); }
.act--dark .act__title { color: var(--bg); }
/* Einleitungstext unter einem Akt-Titel. Bewusst schmal gehalten: Der Titel
trägt die Fläche, der Satz erklärt sie nur — er darf ihn nicht überwuchern. */
.act__lead {
margin: 22px 0 0;
/* Bewusst breit: Bei 52ch brach der Satz in kurze, abgehackte Zeilen um,
während rechts die halbe Fläche leer blieb. 68ch liegt noch im gut
lesbaren Bereich (bis etwa 75ch) und läuft sichtbar weiter aus. */
max-width: 68ch;
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.6;
}
/* Nicht weiter aufhellen: Bei .78 fällt der Kontrast auf Orange unter den
Mindestwert für Fließtext (4.5:1). .92 liegt sicher darüber. */
.act--orange .act__lead { color: rgba(22, 19, 15, .92); }
.act--dark .act__lead { color: rgba(250, 248, 244, .72); }
.act__dot--light { color: var(--bg); }
.act__dot--orange { color: var(--orange); }
/* ───────────────────── Sektionen & Typografie ───────────────────── */
.section {
padding: 130px var(--pad-x);
/* Bewusst ohne eigene Fläche: So bleibt das Papier aus durchgehend
sichtbar, statt von jeder Sektion neu übermalt zu werden. */
background: transparent;
scroll-margin-top: var(--nav-h);
}
/* Die Sandflächen sind ein anderer Ton, aber dasselbe Papier — sonst würde die
Struktur beim Übergang plötzlich abreißen. */
.section--sand {
background-color: var(--sand);
background-image: var(--grain);
}
.wrap { max-width: 1140px; margin: 0 auto; }
/* Schmaler, aber nicht eingerückt: Der äußere Rahmen bleibt so breit wie jeder
andere Abschnitt und behält damit die gemeinsame linke Kante — begrenzt wird
nur der Inhalt darin. Würde man stattdessen den Rahmen selbst schmaler und
mittig setzen, wanderte sein linksbündiger Text nach rechts weg. */
.wrap--narrow > * { max-width: 760px; }
/* Zweizeilige Überschrift: Die zweite Zeile bleibt Titel — gleiche Schrift,
gleiche Größe — und wirkt nur durch den Umbruch wie eine Unterzeile.
Wer sie später absetzen will, ändert hier die Farbe von .h2__unterzeile. */
.h2--zweizeilig { text-wrap: balance; }
.h2__unterzeile { color: inherit; }
.section h2 {
margin: 0;
font-size: clamp(32px, 3.6vw, 46px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.12;
text-wrap: pretty;
}
.section p {
margin: 0;
font-size: 17.5px;
line-height: 1.65;
color: var(--ink-70);
max-width: 52ch;
}
.section p.p--sm { font-size: 17px; max-width: 54ch; }
/* Reine Fließtext-Abschnitte ohne Bildspalte.
.section p steht bewusst auf margin:0 — in den Zweispaltern kommt der
Abstand aus dem Spalten-Layout. Wo kein Layout ihn liefert, würden die
Absätze sonst aneinanderkleben, deshalb hier ein eigener Rhythmus. */
/* ───────────────────── Zweispalter (Warum / Über) ───────────────────── */
.split {
display: grid;
gap: 80px;
align-items: center;
max-width: 1140px;
margin-inline: auto;
}
/* Die Pinnwand liegt im Querformat und lebt von ihren Details — deshalb bekommt
die Bildspalte hier mehr Breite als der Text. */
.split--text-first { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.split--media-first { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split__text {
display: flex;
flex-direction: column;
gap: 26px;
min-width: 0;
}
.split--media-first .split__text { gap: 24px; }
.split__media {
margin: 0;
position: relative;
min-width: 0;
border-radius: 18px;
overflow: hidden;
background: var(--sand);
box-shadow: 0 30px 70px -30px rgba(22, 19, 15, .4);
}
/* Seitenverhältnis statt fester Höhe: Bei 480px hätte object-fit das Hochformat
oben und unten beschnitten — Kopf und Beine wären angeschnitten worden.
Der Wert entspricht dem Porträt (830 × 1100). Neues Foto = Wert anpassen. */
.split__media--portrait { aspect-ratio: 83 / 110; }
.section--sand .split__media { background: #e5d7c1; }
.split__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ──────────────────── Pinnwand („Das Warum") ────────────────────
Bewusst ohne Rahmen, Schatten und Eckenrundung — anders als .split__media.
Die Wandfarbe im Foto liegt dicht am Papierton der Seite, dadurch wirkt das
Brett, als hinge es an der Seite selbst. Ein gerundeter Kasten mit
Schlagschatten würde daraus wieder ein „Bild in einem Rahmen" machen und den
Effekt zerstören. */
/* Das Foto zeigt das Brett an einer Wand, und diese Wand ist rund 40 Tonstufen
dunkler als der Papierton der Seite — unbeschnitten zeichnet sich das Bild
deshalb als graues Rechteck ab. Also wird per CSS exakt auf die Außenkante
des Rahmens beschnitten (im Original bei 126/85 bis 1167/774 von 1264×848).
Dann ist die Seite selbst die Wand, und das Brett hängt darauf.
Wird das Foto getauscht, müssen diese fünf Werte neu vermessen werden. */
.pinboard {
margin: 0;
min-width: 0;
position: relative;
aspect-ratio: 1041 / 689;
overflow: hidden;
filter: drop-shadow(0 26px 34px rgba(22, 19, 15, .26));
}
.pinboard img {
position: absolute;
max-width: none;
width: 121.42%;
height: 123.08%;
left: -12.10%;
top: -12.34%;
}
/* ──────────────────── Umlaufbahnen („Menschen") ────────────────────
Du in der Mitte, das Team eng darum, die Gesellschaftsgruppen weiter außen.
Die Ringe sind der orange Faden der Pinnwand, zum Kreis gelegt.
Alle Maße hängen an cqw (= 1 % der Breite dieses Blocks), damit das ganze
System proportional skaliert, egal wie breit die Spalte gerade ist. */
.orbits {
position: relative;
aspect-ratio: 1;
container-type: inline-size;
min-width: 0;
}
/* Der Ring selbst dreht; gezeichnet wird er vom ::before als Kreislinie. */
.orbits__ring {
position: absolute;
inset: 0;
animation: orbit-dreh var(--dauer) linear infinite;
}
.orbits__ring--gegen { animation-name: orbit-dreh-gegen; }
.orbits__ring::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: calc(var(--r) * 2);
aspect-ratio: 1;
transform: translate(-50%, -50%);
border: 1px solid var(--orange);
border-radius: 50%;
opacity: .38;
}
/* Setzt die Beschriftung auf ihren Platz auf dem Ring: erst um --w drehen,
dann um den Radius nach außen schieben. */
.orbits__platz {
position: absolute;
left: 50%;
top: 50%;
transform: rotate(var(--w)) translateY(calc(-1 * var(--r)));
}
/* Dreht die Drehung des Rings wieder heraus — sonst stünde die Schrift nach
einer halben Umdrehung auf dem Kopf. Gleiche Dauer, gleiche Richtung
rückwärts, plus der feste Winkel --w des Platzes. */
/* left/top:0 ist der Punkt auf dem Ring; translate zentriert die Beschriftung
darauf. Bewusst die eigenständigen Eigenschaften translate/rotate statt
transform: So bleibt das Zentrieren vom Gegendrehen unabhängig — in einem
gemeinsamen transform würden sich beide gegenseitig verschieben. */
.orbits__label {
position: absolute;
left: 0;
top: 0;
translate: -50% -50%;
animation: orbit-label var(--dauer) linear infinite;
padding: 1.6cqw 3cqw;
background: #fff;
font-family: var(--mono);
font-size: clamp(10px, 2.5cqw, 14px);
white-space: nowrap;
box-shadow:
0 1px 2px rgba(22, 19, 15, .12),
0 8px 18px -8px rgba(22, 19, 15, .28);
}
.orbits__ring--gegen .orbits__label { animation-name: orbit-label-gegen; }
/* Rund, weil es die Kreisform der Bahnen aufnimmt. Der Durchmesser bleibt
deutlich unter dem inneren Radius (23cqw), damit ein Ring frei bleibt. */
.orbits__mitte {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 23cqw;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, #ece5d9 0%, #dbd2c2 100%);
box-shadow:
0 2px 4px rgba(22, 19, 15, .16),
0 16px 32px -12px rgba(22, 19, 15, .42);
}
/* Kopf und Schulterpartie als zwei weiche Formen — zusammen als Mensch lesbar,
einzeln als nichts. Kein Gesicht, keine erkennbare Person. */
.orbits__figur {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 12% 10.5% at 50% 37%, rgba(22, 19, 15, .62) 0 100%, transparent 0),
radial-gradient(ellipse 25% 20% at 50% 76%, rgba(22, 19, 15, .62) 0 100%, transparent 0);
/* Gerade so weich, dass keine Kante entsteht — mehr, und Kopf und Schulter
verschmelzen zu einem Klecks. Die Form muss innerhalb des Kreises enden,
sonst liest sie sich als gefüllte Fläche statt als Figur. */
filter: blur(1.3cqw);
}
@keyframes orbit-dreh { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes orbit-dreh-gegen { from { transform: rotate(0deg) } to { transform: rotate(-360deg) } }
@keyframes orbit-label {
from { rotate: calc(-1 * var(--w)) }
to { rotate: calc(-1 * var(--w) - 360deg) }
}
@keyframes orbit-label-gegen {
from { rotate: calc(-1 * var(--w)) }
to { rotate: calc(-1 * var(--w) + 360deg) }
}
/* ──────────────── Story-Foto („Authentizität") ────────────────
Freisteller ohne Rahmen: Sie liegt direkt auf der Seitenfläche und steht
bündig auf der Unterkante der Sektion — wie die Formate in „Was sichtbar
ist". Deshalb hat die Sektion unten keinen Abstand und der Zweispalter
richtet sich hier unten aus statt mittig. */
#bleibt { padding-bottom: 0; }
/* Getrennt ausgerichtet: Das Bild steht unten auf der Sektionskante, der Text
sitzt auf halber Höhe des Bildes. align-items:end allein zog den Text mit
nach unten, align-self:start schob ihn zu weit nach oben. */
#bleibt .split { align-items: end; }
#bleibt .split__text { align-self: center; }
.storyshot {
margin: 0 0 0 auto;
min-width: 0;
width: 100%;
max-width: 520px;
}
.storyshot img { width: 100%; height: auto; }
.cta-row {
display: flex;
align-items: center;
gap: 18px;
margin-top: 6px;
flex-wrap: wrap;
}
.cta-row__note {
font-family: var(--mono);
font-size: 12.5px;
/* --ink-55 kam nur auf Kontrast 4,0. */
color: var(--ink-70);
}
/* ──────────────── Plakat-Entstehung (Blitz + Plakat) ──────────────── */
/* ──────────── „Was sichtbar ist": die Formate ────────────
Das Bild ist ein Freisteller ohne eigenen Hintergrund und exakt auf die
Stücke beschnitten — es liegt damit direkt auf der Sektionsfläche, ohne
sichtbaren Bildrand.
Die Sektion ist auf eine Bildschirmhöhe angelegt: Der Text steht oben, das
Bild füllt den Rest und steht bündig auf der Unterkante. Bei flachen Fenstern
schrumpft das Bild mit, statt den Text aus dem Bild zu schieben. */
.shoot {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Zwei Klassen, damit die Vorgabe die padding-Kurzschreibweise in den
Media Queries überstimmt. */
/* Oben wie jede andere Sektion; unten null, damit die Formate aufsetzen. */
.section.shoot { padding-bottom: 0; }
/* Der Wrapper muss die Flex-Kette weiterreichen, sonst kann sich das Bild
nicht an die Unterkante schieben. */
.shoot > .wrap {
/* width:100% ist nötig: Als Flex-Kind mit margin-inline:auto richtet sich der
Bereich sonst nach seinem breitesten Inhalt statt nach der Seitenbreite —
er schrumpfte auf Bildbreite und fiel damit aus der gemeinsamen linken
Kante der Seite heraus. */
width: 100%;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.shoot__text { margin-bottom: 20px; gap: 20px; }
/* Nimmt den Rest der Bildschirmhöhe und skaliert das Bild darauf herunter.
flex-basis:0 ist der Kniff — mit auto würde die Eigenhöhe des Bildes die
Sektion aufblähen, statt dass sich das Bild dem Platz anpasst. */
.formate {
/* margin:0, weil vom Browser 1em oben/unten bekommt — sonst schwebt
die Reihe 16px über der Sektionskante. */
margin: 0;
flex: 1 1 0;
min-height: 0;
display: flex;
align-items: flex-end;
justify-content: center;
}
.formate img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
object-position: bottom center;
}
.shoot__text {
display: flex;
flex-direction: column;
gap: 26px;
min-width: 0;
margin-bottom: 96px;
}
.shoot__text p { max-width: 50ch; }
/* ───────────────────────── Leistungen ───────────────────────── */
/* ─────────────────────────── FAQ ─────────────────────────── */
/* Der Abschnitt läuft über die volle Breite wie jede andere Sektion, die
Überschrift steht mittig darüber. Die Fragen bleiben linksbündig — mittig
gesetzte Zeilen mit einem Plus am rechten Rand lesen sich unruhig. */
.faq__wrap { text-align: center; }
.section h2.faq__head {
margin-bottom: 48px;
font-size: clamp(30px, 3.2vw, 42px);
}
.faq { display: flex; flex-direction: column; text-align: left; }
/* Die Antwort darf hier mittig stehen, weil sie keine eigene Kante zur
Überschrift halten muss — sie hängt unter ihrer Frage. */
.faq details p { margin-left: 0; }
.faq details {
border-top: 1px solid var(--line);
padding: 6px 0;
}
.faq details.faq__last { border-bottom: 1px solid var(--line); }
.faq summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 18px;
font-weight: 600;
padding: 18px 0;
transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange); }
.faq__icon {
position: relative;
flex: none;
width: 16px;
height: 16px;
}
.faq__icon::before,
.faq__icon::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 16px;
height: 2px;
background: var(--orange);
transform: translateY(-50%);
transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] .faq__icon::after { transform: translateY(-50%) rotate(0); }
.faq details p {
margin: 0 0 20px;
font-size: 16px;
line-height: 1.65;
color: rgba(22, 19, 15, .7);
max-width: 62ch;
}
/* ─────────────────────────── Termin ─────────────────────────── */
.booking {
padding: 120px var(--pad-x) 130px;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
}
.booking__head {
max-width: 1000px;
text-align: center;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.section h2.booking__title {
margin: 0;
font-family: var(--display);
font-size: clamp(48px, 6vw, 84px);
font-weight: 400;
text-transform: uppercase;
line-height: 1;
letter-spacing: 0;
}
.section p.booking__lead { max-width: 46ch; line-height: 1.6; }
.booking__card {
width: 100%;
max-width: 1000px;
background: #fff;
border-radius: 18px;
box-shadow: 0 30px 70px -24px rgba(22, 19, 15, .25);
overflow: hidden;
}
.booking__card iframe {
width: 100%;
height: 680px;
border: 0;
display: block;
}
.booking__placeholder {
height: 520px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 24px;
text-align: center;
background: repeating-linear-gradient(45deg,
var(--bg), var(--bg) 14px, #fff 14px, #fff 28px);
}
.booking__placeholder-title {
font-family: var(--mono);
font-size: 14px;
letter-spacing: .14em;
color: var(--ink-55);
}
.booking__placeholder-text {
font-family: var(--mono);
font-size: 12.5px;
color: var(--ink-45);
max-width: 40ch;
line-height: 1.6;
}
.booking__placeholder-text code { font-family: inherit; color: var(--orange); }
/* Einwilligungs-Tor vor dem Calendly-Rahmen (siehe app.js). Bewusst im Stil
des Platzhalters gehalten, damit die Sektion nicht wie ein Fehler aussieht. */
.consent {
min-height: 420px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 48px 24px;
text-align: center;
}
.consent__title {
font-family: var(--mono);
font-size: 14px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-55);
}
.consent__text {
margin: 0;
max-width: 46ch;
font-size: 16px;
line-height: 1.6;
color: var(--ink-70);
}
.consent__hint {
margin: 0;
font-family: var(--mono);
font-size: 12.5px;
color: var(--ink-70);
}
.consent__hint a { text-decoration: underline; }
/* ──────────────────── Rechtstexte (Impressum, Datenschutz) ────────────────────
Eigene Seiten im Stil der Hauptseite, aber ohne deren Dramaturgie: keine
Akte, keine Animationen, viel Ruhe. Die Navigationsleiste ist hier nicht
fixiert, deshalb braucht der Inhalt oben Luft. */
.rechtstext .nav { position: static; }
.rechtstext main { padding-top: 64px; }
.recht h1 {
margin: 0 0 40px;
font-size: clamp(34px, 4.4vw, 54px);
line-height: 1.1;
letter-spacing: -.02em;
hyphens: auto;
}
.recht h2 {
margin: 48px 0 12px;
font-size: clamp(18px, 1.9vw, 22px);
line-height: 1.3;
}
.recht p {
margin: 0 0 14px;
font-size: 16.5px;
line-height: 1.7;
color: var(--ink-70);
max-width: 62ch;
}
.recht a { text-decoration: underline; text-underline-offset: 2px; }
.recht a:hover { color: var(--orange); }
.recht__lead {
font-size: 18px !important;
color: var(--ink) !important;
border-left: 3px solid var(--orange);
padding-left: 20px;
}
.recht__stand { font-family: var(--mono); font-size: 14px; }
.recht__zurueck {
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 14px;
}
/* Auf diesen Seiten trägt die Fußzeile nur noch den Gegenlink. */
.rechtstext .footer { padding-top: 40px; }
.rechtstext .footer__bar { border-top: 0; padding-top: 0; }
.rechtstext .footer__bar a { text-decoration: underline; }
/* ─────────────────────────── Footer ─────────────────────────── */
.footer {
background: var(--ink);
color: var(--bg);
padding: 70px var(--pad-x) 36px;
}
.footer__inner {
max-width: 1140px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 48px;
}
.footer__cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 60px;
align-items: start;
}
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__logo { font-weight: 700; font-size: 18px; }
.footer__brand p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: rgba(250, 248, 244, .6);
max-width: 36ch;
}
/* gap bewusst klein: Die Links bringen ihre Höhe jetzt selbst mit (44 px,
siehe unten), der Abstand entsteht dadurch von allein. Bei den früheren
10 px zusätzlich stünden die Zeilen zu weit auseinander. */
.footer__col {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 14.5px;
}
.footer__label {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: .18em;
color: rgba(250, 248, 244, .62);
}
/* Mindestens 44 px hoch — die von den Barrierefreiheits-Richtlinien empfohlene
Größe für Touch-Ziele. Vorher waren es 16 bis 19 px: ausgerechnet Impressum,
Datenschutz und die Mailadresse waren am Handy kaum zu treffen.
inline-flex statt padding, damit die Höhe unabhängig von der Schriftgröße
garantiert ist. */
.footer__col a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: rgba(250, 248, 244, .8);
transition: color .2s ease;
}
.footer__col a:hover { color: var(--orange); }
/* Gleiches für die Links in der Fußzeile und das Logo in der Navigationsleiste. */
.footer__bar a,
.nav__logo {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer__bar {
border-top: 1px solid rgba(250, 248, 244, .14);
padding-top: 22px;
display: flex;
justify-content: space-between;
gap: 20px;
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: .14em;
color: rgba(250, 248, 244, .6);
}
/* ─────────────────── Scroll-Reveal (von app.js gesteuert) ─────────────────── */
.js .reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
transition-delay: var(--d, 0ms);
}
.js .reveal.is-in {
opacity: 1;
transform: none;
}
/* ───────── Bildplätze: Platzhalter, solange kein Foto in /images liegt ───────── */
.slot.is-empty {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--sand);
border: 1px dashed rgba(22, 19, 15, .28);
box-shadow: none;
}
.slot.is-empty img { display: none; }
.slot.is-empty::after {
content: attr(data-caption);
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: .1em;
color: var(--ink-45);
text-align: center;
line-height: 1.6;
max-width: 24ch;
}
/* ════════════════════════ Responsive ════════════════════════ */
@media (max-width: 1080px) {
:root { --pad-x: 32px; }
.split { gap: 56px; }
}
@media (max-width: 900px) {
:root { --pad-x: 28px; }
/* Die Leiste bleibt am Handy wie sie ist — nur der Knopf rückt enger. */
.nav__cta { padding: 10px 18px; font-size: 14px; }
.section { padding: 90px var(--pad-x); }
.booking { padding: 90px var(--pad-x); }
.act { padding: 9vh var(--pad-x); }
/* Zweispalter werden zu Stapeln — Bild immer unter dem Text,
außer in "Über mich", wo das Porträt die Sektion eröffnet. */
.split {
grid-template-columns: minmax(0, 1fr);
gap: 44px;
}
.footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
:root { --pad-x: 20px; }
/* Kürzere Kamerafahrt — am Handy scrollt man sonst zu lange ins Leere. */
.js .hero { height: 200vh; }
.hero__overlay { gap: 16px; padding: 92px 20px 36px; }
.hero__kicker { font-size: 10.5px; letter-spacing: .16em; }
/* Am Handy schneidet das Foto seitlich an, das Blatt füllt dann die Breite. */
.desk__paper { width: 106%; }
.desk__pen { display: none; }
.section { padding: 76px var(--pad-x); }
.booking { padding: 76px var(--pad-x); }
.section h2.faq__head { margin-bottom: 32px; }
.faq summary { font-size: 16.5px; gap: 14px; }
.section p { font-size: 16.5px; }
.booking__card iframe { height: 620px; }
.booking__placeholder { height: 420px; }
.footer__cols { grid-template-columns: 1fr; gap: 32px; }
.footer__bar { flex-direction: column; gap: 10px; }
}
/* ─────────────────── Bewegung reduzieren ─────────────────── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .reveal { opacity: 1; transform: none; transition: none; }
.caret { animation: none; }
/* Die Umlaufbahnen stehen still — das Bild bleibt vollständig lesbar. */
.orbits__ring, .orbits__label { animation: none; }
* { transition-duration: .01ms !important; }
}