/* ==========================================================================
freiewortkunst — design system
Palette lifted from the original site (Wix), rebuilt as a static system.
========================================================================== */
:root {
--cream: #fdf9ee;
--cream-alt: #efe9db;
--beige: #e3dac9;
--olive: #837e6d;
--olive-dark: #5f5b4d;
--teal: #435b67;
--teal-dark: #31444d;
--blue-soft: #c9d8de;
--white: #ffffff;
--ink: #2b2b26;
--ink-soft: #565248;
--font-display: "Cormorant Garamond", "Georgia", serif;
--font-body: "Montserrat", "Segoe UI", sans-serif;
/* Startseiten-Kopf (Variante L): Red Hat Display 600 für den Titel,
Red Hat Text für den Fliesstext — dieselbe Familie, eine Stimme. */
--font-hero: "Red Hat Display", "Segoe UI", sans-serif;
--font-hero-text: "Red Hat Text", "Segoe UI", sans-serif;
/* Goldgrund: −26 % Gold gegenüber dem ersten Entwurf (Chroma 17.4 statt 23.5).
--brown ist die Überschriftfarbe aus der Dev-Site ("was bewegt"). */
--hero-ground: #ede4cc; /* 22.09.2026: 40 % Richtung Stein #ebe9df (vorher #eee0c0) */
--brown: #3b3325;
--brown-mid: #5a4e38;
--gold-line: #a8874a;
/* Höhe der Kopfleiste: 2 × 1.8rem Polsterung + Zeilenhöhe der Wortmarke */
--header-h: 85px;
/* Grund des gezeichneten Blattmusters. Der Canvas deckt das Foto ab, muss
dessen Ton also selbst mitbringen: #e5d2ab ist exakt das, was
--hero-ground mit dem multiplizierten Foto ergibt (6 % dunkler als der
nackte Grund). Ohne das wirkte der Hero flach und zu hell — und der
Glas-Button verlor den Untergrund, von dem er lebt.
Blattlinien wie bisher: in Ruhe 0.905 × Grund, unter dem Zeiger 0.83. */
/* Grund leicht entsättigt (Chroma 21.8 → 17.8, −18 %), die Blattlinien
ausdrücklich nicht: dadurch liegt das Blatt (Chroma 20) jetzt minimal
farbiger als der Grund und tritt eine Spur deutlicher hervor. */
--leaf-ground: #e6dbc4; /* vorher #e2d2b2, gleiche Mischung */
--leaf-ink: #d3c6ab;
--leaf-ink-near: #c1b69d;
/* Schriftfarbe im Hero. Auf der Strecke #3b3325 (Original) → #837e6d
(Referenz) liegt sie bei 30 % — wieder näher am Original, aber deutlich
heller als dieses. Kontrast auf dem Grund 5.72:1, auf dem Glas 5.95:1. */
--hero-ink: #514a3b;
/* Glas. Steht hier und nicht in .hero__glass, weil es zwei Dinge aus
demselben Material gibt: den Button im Hero und das Bücher-Menü in der
Kopfleiste. Zwei Kopien derselben Zahlen driften auseinander — einmal
ist einmal.
Wenig Sättigung, wenig Unschärfe — hier liegt der Unterschied zwischen
Glas und Anstrich. saturate(215%) verdoppelte die Buntheit des Grundes
(Chroma 44.6 statt 21.5) und machte aus blassem Gold ein sattes Gelb;
blur(22px) löschte zusätzlich jede Blattlinie. Beides zusammen ergab
eine gleichmässige Fläche, also: deckend. Jetzt liegt die Buntheit mit
22.4 auf der des Grundes, und 80 % der Blattstruktur bleiben sichtbar —
man schaut hindurch. */
--glass-fill: linear-gradient(163deg, rgba(255,255,255,0.26) 0%, rgba(252,250,246,0.11) 45%, rgba(168,140,86,0.07) 100%);
--glass-fill-hover: linear-gradient(163deg, rgba(255,255,255,0.34) 0%, rgba(253,251,247,0.16) 45%, rgba(168,140,86,0.09) 100%);
--glass-blur: blur(8px) saturate(106%) brightness(1.02);
/* Haarfeiner Rand: oben Licht, unten warm */
--glass-edge: linear-gradient(163deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.3) 40%, rgba(150,124,74,0.36) 100%);
--glass-shadow:
inset 0 1px 0 rgba(255,255,255,0.62),
inset 0 -7px 15px -9px rgba(116,93,52,0.34),
0 18px 34px -14px rgba(59,51,37,0.26),
0 2px 5px -2px rgba(59,51,37,0.15);
--glass-shadow-hover:
inset 0 1px 0 rgba(255,255,255,0.75),
inset 0 -7px 15px -9px rgba(116,93,52,0.36),
0 26px 48px -16px rgba(59,51,37,0.3),
0 3px 7px -2px rgba(59,51,37,0.17);
/* --mx/--my setzt main.js je Element, deshalb löst sich das var() erst
dort auf, wo die Variable benutzt wird — nicht hier. */
--glass-glow: radial-gradient(150px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.5), rgba(255,255,255,0) 64%);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--container: 1180px;
--radius: 4px;
--shadow-soft: 0 10px 30px rgba(43, 43, 38, 0.08);
--shadow-lift: 0 18px 45px rgba(43, 43, 38, 0.14);
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.75rem;
--space-4: 2.75rem;
--space-5: 4.5rem;
--space-6: 7rem;
/* Tonal section textures — subtle tiled patterns. Drop the actual files into
assets/images/ (see README) and these switch on automatically; until then
the sections simply show their solid fallback colour. */
/* Nahtlose Kachel nach der Vorlage Blau1.2.jpg (23.09.2026, v2).
Die Vorlage ist kein exakter Rapport: gedreht gescannt (~1.25°) und
je nach Stelle 928–939 px breit und 524–533 px hoch — jeder gerade
Ausschnitt passt irgendwo nicht. Darum neu aufgebaut: die
regelmässigste Zelle (bei x 2600 / y 150) entlang ihrer eigenen
Rapport-Vektoren auf ein Rechteck 934 × 530 entzerrt, die Ränder in
ihre Nachbarn übergeblendet, dann sauber zweitonig neu gezeichnet
(Form 61/74/90, Grund 65/78/94, 1 px Kantenglättung). Nahtfehler
kleiner als der Unterschied zweier benachbarter Pixel.
pattern-dark-deep.jpg: dieselbe Kachel, Formton −7 (press-pattern.js). */
--pattern-dark: url("../images/pattern-dark.jpg");
--pattern-light: url("../images/pattern-light.png");
/* Die beiden Töne der Vorlage, am Bild gemessen: die Formen rgb(61,74,90)
decken 60 %, der Grund rgb(65,78,94) den Rest — vier Stufen Unterschied.
--pattern-ground ist der hellere der beiden und steht unter der Kachel,
solange sie lädt. */
--pattern-ground: #414e5e;
/* Schrift- und Pfeilfarbe im Presse-Band, von der Wix-Seite übernommen. */
--press-ink: #dae7f2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background: var(--cream);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
margin: 0 0 var(--space-2);
line-height: 1.15;
color: var(--teal-dark);
}
p { margin: 0 0 var(--space-2); }
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--space-3);
}
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--olive);
margin-bottom: var(--space-2);
}
.section {
padding: var(--space-6) 0;
}
.section--tight { padding: var(--space-5) 0; }
.section--cream-alt {
background-color: var(--cream-alt);
background-image: var(--pattern-light);
background-size: 420px auto;
}
.section--beige { background: var(--beige); }
.section--teal {
background-color: var(--pattern-ground);
background-image: var(--pattern-dark);
/* Feste Kachelbreite, kein Prozentwert: derselbe Wert steht als TILE_W in
press-pattern.js. Beide müssen gleich sein, sonst springt das Muster in
der Grösse, sobald das Skript übernimmt. */
background-size: 300px auto;
color: var(--press-ink);
/* Das Original hat hier 308 px bei 1425 px Breite; eine Spur mehr Luft
tut dem Band gut. Ersetzt die 7rem Polsterung von .section, und der
Inhalt steht mittig darin — so bleibt die Höhe über alle neun Beiträge
gleich. */
min-height: 360px;
padding: var(--space-3) 0;
display: flex;
flex-direction: column;
justify-content: center;
/* isolation, damit der Canvas mit z-index -1 hinter dem Inhalt bleibt,
ohne durch den Grund der Seite zu fallen — wie im Hero. */
position: relative;
isolation: isolate;
}
/* Dieselbe Kachel wie darunter, nur unter dem Zeiger verformt
(press-pattern.js). Der Canvas bleibt durchsichtig, bis das Bild geladen
ist — ohne Skript oder ohne Bild sieht man also weiterhin genau die
Kachel, die hier schon als background-image liegt. */
.press-pattern {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
.section--teal h1,
.section--teal h2,
.section--teal h3 { color: var(--white); }
.btn {
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 0.9em 2em;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: var(--radius);
border: 1.5px solid var(--teal-dark);
background: transparent;
color: var(--teal-dark);
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn:hover { background: var(--teal-dark); color: var(--white); transform: translateY(-1px); }
.btn--solid {
background: var(--teal-dark);
color: var(--white);
}
.btn--solid:hover { background: var(--olive-dark); border-color: var(--olive-dark); }
.btn--light {
border-color: var(--white);
color: var(--white);
}
.btn--light:hover { background: var(--white); color: var(--teal-dark); }
/* ---------------------------------- Header ---------------------------------- */
/* Oben auf der Seite durchsichtig, damit der Goldgrund durchläuft wie im
Entwurf. Sobald gescrollt wird (is-scrolled, siehe main.js), legt sich
Creme darunter — sonst stünde die Leiste unlesbar über dem dunklen
Presse-Abschnitt. Kein Höhensprung: die Polsterung bleibt konstant,
nur Farbe und Rand wechseln. */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: transparent;
border-bottom: 1px solid transparent;
transition: background 0.3s ease, border-color 0.3s ease,
box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-scrolled {
background: rgba(253, 249, 238, 0.68);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border-bottom-color: rgba(131, 126, 109, 0.18);
box-shadow: 0 8px 24px rgba(43, 43, 38, 0.06);
}
/* Randbündig wie im Entwurf: Wortmarke ganz links, Navigation ganz rechts.
Der alte 1180-px-Container zog beides um über 400 px nach innen. */
/* Feste Hoehe = --header-h: der Hero rechnet genau diese Hoehe wieder
heraus (margin-top). Mit reiner Polsterung war die Leiste am Telefon
durch den Menue-Knopf 91 statt 85 px hoch, und ueber dem Hero blieb
ein 6 px heller Streifen stehen. */
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: calc(var(--header-h) - 1px); /* 1px = Unterlinie der Leiste */
padding: 0 clamp(1.25rem, 5vw, 3.5rem);
}
.logo {
font-family: var(--font-hero);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.01em;
text-transform: lowercase;
color: var(--brown);
}
.nav {
display: flex;
align-items: center;
gap: var(--space-4);
}
.nav__list {
list-style: none;
display: flex;
gap: var(--space-4);
margin: 0;
padding: 0;
}
.nav__list a {
font-family: var(--font-hero-text);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--brown-mid);
position: relative;
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.nav__list a:hover,
.nav__list a[aria-current="page"] {
color: var(--brown);
border-bottom-color: var(--gold-line);
}
.nav__submenu {
position: relative;
}
/* Brücke über die 14 px Lücke zwischen Link und Panel. Sie sitzt am ,
nicht am Panel: dessen ::after ist das Glanzlicht. Ohne die Brücke
verlässt der Zeiger auf dem Weg nach unten kurz das , und das Menü
fällt zu. */
.nav__submenu::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 14px;
}
/* Dasselbe Glas wie der Button „zum Buch & Musik": Füllung, Unschärfe,
Rand, Schatten und Glanzlicht kommen alle aus denselben --glass-*
Variablen, die auch .hero__glass benutzt. Kein eigener Farbwert hier,
sonst driftet das Menü wieder vom Button weg. Hier steht nur, wo das
Panel liegt, wie gross es ist und wie es auf- und zuklappt. */
.nav__submenu-list {
list-style: none;
margin: 0;
padding: 0.5rem;
position: absolute;
isolation: isolate;
top: calc(100% + 14px);
left: -1rem;
min-width: 232px;
/* Einziger Formunterschied zur Pille: 999px würden aus einem 97 px hohen
Panel eine Linse machen, deren Rundung in die Einträge schneidet. */
border-radius: 14px;
background: var(--glass-fill);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
/* visibility mit Dauer bleibt beim Ausblenden bis zum Schluss sichtbar —
das ist die Schonfrist, in der der Zeiger das Panel erreichen kann. */
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out),
background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
visibility 0.4s;
}
.nav__submenu:hover .nav__submenu-list,
.nav__submenu:focus-within .nav__submenu-list {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Das Glanzlicht geht an, sobald das Menü offen ist — beim Button ist das
der Moment des Hoverns, hier ist es derselbe Moment. */
.nav__submenu:hover .nav__submenu-list::after,
.nav__submenu:focus-within .nav__submenu-list::after { opacity: 1; }
/* Die Einträge greifen die Pillenform des Buttons auf, in klein, und
benutzen dessen Hover-Füllung — wieder aus derselben Variablen. */
.nav__submenu-list a {
display: block;
padding: 0.55rem 1rem;
border-radius: 999px;
color: var(--hero-ink);
text-transform: none;
letter-spacing: normal;
font-weight: 500;
white-space: nowrap;
border-bottom: 0;
transition: background 0.4s var(--ease-out);
}
.nav__submenu-list a:hover {
background: var(--glass-fill-hover);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.62);
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.nav-toggle span {
width: 24px;
height: 2px;
background: var(--brown);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------------------------------- Hero ---------------------------------- */
/* Der Grund: das gelieferte Goldblatt-Muster über einem echten Goldton
multipliziert, darüber ein gerichteter Schimmer. Der Schimmer läuft in
EINE Richtung — kein weisser Hof hinter der Schrift. */
/* Die Leiste läuft im Fluss mit (sie muss auf den anderen Abschnitten
klebend bleiben). Damit der Hero trotzdem oben am Fensterrand beginnt
wie im Entwurf, wird ihre Höhe hier wieder herausgerechnet — sonst säße
die ganze Komposition rund 85 px zu tief. */
.hero {
position: relative;
isolation: isolate;
min-height: 100vh;
margin-top: calc(-1 * var(--header-h));
display: grid;
grid-template-columns: minmax(0, 1fr);
place-items: center;
text-align: center;
/* Unten 7rem: Platz für den Scroll-Hinweis, damit er nicht an den
Claim stösst. */
padding: calc(var(--header-h) + 6rem) clamp(1.25rem, 5vw, 3.5rem) 7rem;
background-color: var(--hero-ground);
color: var(--brown);
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
background: url("../images/hero-goldblatt-v2.jpg") center / cover no-repeat;
mix-blend-mode: multiply;
opacity: 0.9;
}
/* Dieselben Blätter noch einmal, gezeichnet statt fotografiert: sie weichen
unter dem Zeiger aus (hero-leaves.js). Der Canvas deckt das Bild darunter
vollständig ab — ohne Skript bleibt also das Bild stehen. */
.hero__leaves {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(70% 55% at 58% 10%, rgba(255,253,247,0.4) 0%, rgba(255,253,247,0) 62%),
linear-gradient(152deg, rgba(255,252,244,0.28) 0%, rgba(255,255,255,0) 40%, rgba(176,146,88,0.08) 100%);
}
/* Das Paket aus Titel, Fliesstext und Claim sitzt eine Spur unter der Mitte.
4vh verschiebt die Überschrift um 2 Prozentpunkte der Fensterhöhe nach
unten (37.5 % → 39.5 %) — gemessen, linear: 2vh entsprechen 1 Punkt. */
.hero__content { width: 100%; margin-top: 7vh; }
/* Titel + Fliesstext: 20px Abstand innerhalb der Gruppe */
.hero__title {
font-family: var(--font-hero);
/* 610 statt 600: Red Hat Display hat bei ≤600 einen Absatz links am „i“-Stamm
(gemessen ~0,7 px bei 126 px Titel, 1,5× Bildschirm). Ab 610 ist er weg. */
font-weight: 610;
/* 126 px am Regler eingestellt; die vw-Stufe skaliert weiter nach unten. */
font-size: clamp(2.75rem, 8.6vw, 7.875rem);
line-height: 1.03;
/* Etwas offener als bisher (−0.028em): bei 112 px sind das rund 1.8 px
mehr Luft je Buchstabe. */
letter-spacing: -0.012em;
color: var(--hero-ink);
/* Am Regler eingestellt: 66 px Luft zwischen Titel und Fliesstext. */
margin: 0 0 4.125rem;
}
.hero__title span { display: inline-block; }
.hero__lede {
font-family: var(--font-hero-text);
font-size: 1rem;
line-height: 1.62;
color: var(--ink-soft);
max-width: 34rem;
margin: 0 auto;
text-wrap: pretty;
}
/* Zwischen den Gruppen 48–68px — rund das Dreifache des Innenabstands,
damit man zwei Blöcke liest statt vier Zeilen. */
.hero__claim {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1.25rem, 2.5vw, 1.75rem);
/* Am Regler eingestellt: 30 px. Der Claim rückt damit deutlich näher an
den Fliesstext — die Luft liegt jetzt oberhalb, zwischen Titel und Text. */
margin-top: 1.875rem;
flex-wrap: wrap;
}
.hero__claim-lines {
font-family: var(--font-hero);
font-weight: 800;
font-size: 1.0625rem;
line-height: 1.32;
letter-spacing: 0.055em;
text-transform: uppercase;
color: var(--hero-ink);
margin: 0;
text-align: left;
white-space: nowrap;
}
/* Glas: die Farbe kommt aus dem Grund, nicht aus einer aufgemalten Fläche —
saturate(215%) verstärkt das Gold, das durchscheint. Füllung fast klar. */
.hero__glass {
position: relative;
isolation: isolate;
display: inline-block;
/* Am Regler eingestellt: 183 × 44 px. 44 px ist genau die übliche
Mindesthöhe für eine Fingerkuppe — auf dem Telefon wird sie unten
wieder auf 56 px gesetzt, dort zählt das Tippen mehr als die Form. */
padding: 0.6rem 1.7rem;
border-radius: 999px;
font-family: var(--font-hero-text);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.005em;
/* Dieselbe Schriftfarbe wie Titel und Claim, damit der Button zum Text
gehört und nicht als Fremdkörper danebensteht. */
color: var(--hero-ink);
white-space: nowrap;
background: var(--glass-fill);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
/* Haarfeiner Rand: oben Licht, unten warm */
.hero__glass::before,
.nav__submenu-list::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--glass-edge);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* Glanzlicht folgt dem Zeiger (siehe main.js) */
.hero__glass::after,
.nav__submenu-list::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--glass-glow);
opacity: 0;
transition: opacity 0.45s var(--ease-out);
pointer-events: none;
}
.hero__glass:hover {
transform: translateY(-2px);
background: var(--glass-fill-hover);
box-shadow: var(--glass-shadow-hover);
}
.hero__glass:hover::after { opacity: 1; }
.hero__glass:active {
transform: translateY(0);
box-shadow: inset 0 2px 6px rgba(59,51,37,0.16), 0 6px 14px -6px rgba(59,51,37,0.24);
}
/* Das Wort atmet einmal auf: freie · wort · kunst treten kurz auseinander
und schliessen sich wieder. „wort" bleibt stehen, damit sich die Zeile
symmetrisch um die Mitte öffnet. 0.26em ≈ ein normaler Wortabstand. */
@media (prefers-reduced-motion: no-preference) {
.hero__title span:nth-child(1) { animation: hero-breathe-l 3.6s 1.2s both; }
.hero__title span:nth-child(3) { animation: hero-breathe-r 3.6s 1.2s both; }
}
@keyframes hero-breathe-l {
0% { transform: translateX(0); animation-timing-function: cubic-bezier(.22,.9,.28,1); }
32% { transform: translateX(-0.26em); }
50% { transform: translateX(-0.26em); animation-timing-function: cubic-bezier(.45,.02,.28,1); }
100% { transform: translateX(0); }
}
@keyframes hero-breathe-r {
0% { transform: translateX(0); animation-timing-function: cubic-bezier(.22,.9,.28,1); }
32% { transform: translateX(0.26em); }
50% { transform: translateX(0.26em); animation-timing-function: cubic-bezier(.45,.02,.28,1); }
100% { transform: translateX(0); }
}
/* Scroll-Hinweis: dünner Pfeil, der ruhig auf und ab geht. Führt als Anker
zum ersten Abschnitt, ist also nicht nur Zierde, sondern anklickbar. */
.hero__scroll {
position: absolute;
left: 50%;
bottom: clamp(1.5rem, 4vh, 2.75rem);
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
font-family: var(--font-hero-text);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--brown-mid);
transition: color 0.3s var(--ease-out);
}
.hero__scroll:hover { color: var(--brown); }
.hero__scroll svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: no-preference) {
.hero__scroll svg { animation: hero-scroll-hint 2.6s var(--ease-out) infinite; }
}
@keyframes hero-scroll-hint {
0%, 100% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(5px); opacity: 1; }
}
@media (max-width: 720px) {
.hero__claim { gap: 1rem; }
.hero__claim-lines { text-align: center; }
/* Nicht über die volle Breite: der Button behält seine eigene Breite,
sonst wird aus der Pille ein Balken von Rand zu Rand. */
.hero__glass { width: auto; }
}
/* Ab hier stehen Claim und Button untereinander (gemessen: bis 480 px
gestapelt, ab 500 px nebeneinander). Nur gestapelt sollen sie gleich
breit sein — und dafür wächst der Claim, nicht der Button: der Button
ist das Bedienelement und behält Polsterung und Trefferfläche (201×58).
17 → 22.4 px bringt die längere Zeile von 153 auf 201 px, exakt die
Buttonbreite. Nebenbei gewinnt die Zeile auf dem Telefon an Gewicht,
wo 17 px gesperrte Versalien unter einer 44-px-Überschrift untergehen. */
@media (max-width: 480px) {
/* Untereinander, fest — nicht dem Umbruch überlassen. Als Claim und
Button kleiner wurden, passten sie plötzlich ab 414 px nebeneinander
und standen auf gängigen Telefonen in einer Reihe statt gestapelt. */
.hero__claim { flex-direction: column; }
/* Etwas kleiner als zuvor (20.4 → 18.6 px). Der Button zieht in der
Breite mit, damit beide gestapelt weiterhin bündig stehen: 169 px. */
.hero__claim-lines { font-size: 1.1625rem; }
/* Breite folgt dem Claim, Höhe bleibt: 44 px sind am Telefon die nackte
Untergrenze fürs Tippen, 55 px sind bequem. */
.hero__glass { padding: 0.95rem 1.25rem; }
}
/* ---------------------------------- Grids / layout helpers ---------------------------------- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media img {
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
/* ---------------------------------- Project / featured ---------------------------------- */
.project-card {
display: grid;
grid-template-columns: 340px 1fr;
gap: var(--space-5);
align-items: center;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
padding: var(--space-4);
}
.project-card__cover img {
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.event-note {
display: inline-flex;
align-items: center;
gap: 0.6em;
margin-top: var(--space-3);
padding: 0.7em 1.2em;
background: var(--cream-alt);
border-left: 3px solid var(--olive);
border-radius: var(--radius);
font-size: 0.85rem;
color: var(--ink-soft);
}
/* ---------------------------------- Press / quote carousel ---------------------------------- */
/* Feine Zeile über dem Band, gesetzt wie „Aktuelles Projekt" im Abschnitt
davor: Red Hat Text, 14 px, Normalgewicht, gemischt und ungesperrt — also
ausdrücklich nicht die gesperrte Versalien-Eyebrow der übrigen Seite.
Der grosse Abstand darunter, den .projekt .eyebrow trägt, gehört zu jener
Spalte und wird hier nicht übernommen. */
.press-eyebrow {
display: block;
text-align: center;
font-family: var(--font-hero-text);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: normal;
text-transform: none;
color: var(--press-ink);
margin: 0 0 var(--space-3);
}
/* 1050 = Textspalte 926 (wie im Original) + zweimal 62 px Gasse, in der die
Pfeile stehen. So bleiben sie innerhalb des Containers und ragen bei
keiner Fensterbreite heraus. */
/* Volle Abschnittsbreite — die Breite des Textes macht der Schlitten weiter
unten. Nur so kann die Bühne der Bezugsrahmen der Pfeile sein und diese
trotzdem auf 10vw sitzen, also auf derselben Senkrechten wie die
Textsäule im Abschnitt darüber. */
.press-carousel {
width: 100%;
}
/* Bezugsrahmen der Pfeile. Die Bühne enthält nur den Schlitten, nicht die
Punktreihe — top: 50 % trifft damit die Mitte des Textes und nicht die
Mitte von Text samt Punkten. */
.press-carousel__stage {
position: relative;
}
/* Textbreite: 926 px wie im Original — aber nie so breit, dass sie unter die
Pfeile läuft. Die Pfeile stehen fest auf 10vw; wird das Fenster schmaler,
rückt die zentrierte Spalte irgendwann weiter nach links als sie, und der
Text läge unter dem Pfeil. Deshalb der zweite Wert: er hält beidseits die
Pfeilgasse frei (10vw + 5rem) und gewinnt, sobald es eng wird. Nachgeben
muss die Spalte, nicht die Ausrichtung. */
.press-carousel__viewport {
overflow: hidden;
max-width: min(926px, calc(100% - 2 * (clamp(1.5rem, 10vw, 12.0625rem) + 5rem)));
margin: 0 auto;
}
.press-carousel__track {
display: flex;
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.press-slide {
flex: 0 0 100%;
min-width: 0;
text-align: center;
/* Keine Polsterung mehr: die Pfeile stehen jetzt ausserhalb des
Schlittens, die Gasse hält .press-carousel__viewport frei. */
padding: 0;
}
.press-slide__eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--press-ink);
margin-bottom: var(--space-2);
}
/* Feste Höhe für den längsten Beitrag: sonst wächst und schrumpft das Band
beim Durchblättern, und genau das soll es nicht — der Grund steht still,
nur der Text wechselt. */
.press-slide__quote {
/* Fliesstext-Schrift der Seite (wie .hero__lede und .projekt__lede),
nicht die Cormorant-Antiqua. Kursiv fällt damit weg: geneigte
Grotesk über zwei Zeilen liest sich als Schräglage, nicht als Zitat —
das Zitat markieren hier die Anführungszeichen. */
font-family: var(--font-hero-text);
font-size: clamp(1rem, 1.35vw, 1.15rem); /* eine Stufe kleiner (vorher bis 1.3rem) */
font-weight: 400;
line-height: 1.6;
color: var(--press-ink);
margin-bottom: var(--space-3);
min-height: 4.6em;
display: flex;
align-items: center;
justify-content: center;
}
/* Pille mit Haarrand, Masse vom Original: dort 135 × 40 px, Rand
0.67 px in der Schriftfarbe, Radius 20 px (also volle Halbrundung),
Füllung durchsichtig, Schrift 14 px im Normalgewicht, gemischt und
ungesperrt. Der Rand steht hier auf 1 px — 0.67 px ist der Wert, der
entsteht, weil Wix die ganze Seite skaliert; ungerechnet ist es eine
Haarlinie, und die ist auf unserer 1:1-Seite genau 1 px. */
.press-slide__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 135px;
min-height: 40px;
padding: 8px 15px;
border: 1px solid var(--press-ink);
border-radius: 999px;
background: transparent;
font-family: var(--font-hero-text);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--press-ink);
transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out),
border-color 0.25s var(--ease-out);
}
.press-slide__link:hover {
background: rgba(218, 231, 242, 0.12);
color: var(--white);
border-color: var(--white);
}
/* Pfeile: Gestaltung wie gehabt (Kreis, Haarrand), aber auf halber Höhe des
Textes statt darunter. Sie stehen in der Gasse, die .press-slide mit
seiner Polsterung freihält, also innerhalb der Bühne. */
.press-carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid rgba(218, 231, 242, 0.4);
background: transparent;
color: var(--press-ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
font-size: 1rem;
z-index: 1;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Derselbe Wert wie .projekt--original .projekt__text: dort sitzt die
Textsäule bei 10vw (144 px bei 1440). Der linke Pfeil steht damit auf
genau derselben Senkrechten wie „So geht Liebe. So geht Kunst." darüber,
und zwar bei jeder Fensterbreite, weil beide dieselbe clamp() benutzen.
Ändert sich die eine, muss die andere mit. */
.press-carousel__arrow[data-carousel-prev] { left: clamp(1.5rem, 10vw, 12.0625rem); }
.press-carousel__arrow[data-carousel-next] { right: clamp(1.5rem, 10vw, 12.0625rem); }
.press-carousel__arrow:hover {
background: rgba(218, 231, 242, 0.12);
border-color: var(--press-ink);
color: var(--white);
}
/* Kein gap: den Abstand macht das Polster der Punkte, das zugleich die
Trefferfläche ist. Mit beidem stünden die Marken 24 px auseinander und
die Reihe fiele auseinander. */
.press-carousel__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-top: var(--space-2);
}
/* Feiner als zuvor (5 statt 8 px). Der Punkt selbst ist nur die Marke; die
Trefferfläche bleibt über das Polster bei 22 px, sonst wäre er auf dem
Telefon kaum zu treffen. Deshalb sitzt das Polster hier und nicht im
Abstand der Reihe. */
.press-carousel__dot {
width: 5px;
height: 5px;
box-sizing: content-box;
padding: 8px;
background-clip: content-box;
border-radius: 50%;
border: none;
background-color: rgba(218, 231, 242, 0.35);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.press-carousel__dot.is-active {
background-color: var(--press-ink);
transform: scale(1.25);
}
/* ---------------------------------- Books listing ---------------------------------- */
.book-list {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.book-entry {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--space-5);
align-items: center;
}
.book-entry:nth-child(even) .book-entry__media { order: 2; }
.book-entry__media img {
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
}
.book-entry__quote {
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
color: var(--teal-dark);
border-left: 3px solid var(--beige);
padding-left: 1.2rem;
margin: var(--space-2) 0;
}
.book-entry__meta {
font-size: 0.85rem;
color: var(--olive);
letter-spacing: 0.02em;
}
.tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal-dark);
background: var(--blue-soft);
padding: 0.3em 0.8em;
border-radius: 999px;
margin-bottom: var(--space-2);
}
/* ---------------------------------- Werk cards (So geht Liebe) ---------------------------------- */
.werk-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.werk-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
overflow: hidden;
display: flex;
flex-direction: column;
}
.werk-card__art {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--beige);
}
.werk-card__art img {
width: 100%;
height: 100%;
object-fit: cover;
}
.werk-card__body {
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: 0.9rem;
flex: 1;
}
.werk-card__artist {
display: flex;
align-items: center;
gap: 0.8rem;
}
.werk-card__artist img {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.werk-card__artist-name { font-weight: 700; font-size: 0.92rem; color: var(--teal-dark); }
.werk-card__artist-role { font-size: 0.78rem; color: var(--olive); }
.werk-card__title {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--teal-dark);
}
.werk-card__poem {
white-space: pre-line;
font-size: 0.92rem;
color: var(--ink-soft);
flex: 1;
}
.audio-player {
display: flex;
align-items: center;
gap: 0.7rem;
background: var(--cream-alt);
border-radius: 999px;
padding: 0.5rem 0.5rem 0.5rem 0.9rem;
}
.audio-player__btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--teal-dark);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
font-size: 0.85rem;
}
.audio-player audio { display: none; }
.audio-player__label {
font-size: 0.75rem;
color: var(--ink-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-player__missing {
font-size: 0.72rem;
color: var(--olive);
font-style: italic;
}
.werk-card__link {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--teal-dark);
border-bottom: 1.5px solid var(--olive);
align-self: flex-start;
padding-bottom: 2px;
}
.werk-card__link:hover { color: var(--olive-dark); }
/* ---------------------------------- Footer ---------------------------------- */
/* Grund wie der Buch-Abschnitt (.projekt --band, #3d4a5a), Schrift
wie die Navigation oben: Red Hat Text statt der alten Montserrat. */
.site-footer {
background: #3d4a5a;
color: var(--blue-soft);
font-family: var(--font-hero-text);
padding: var(--space-5) 0 var(--space-3);
}
.site-footer__inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
padding-bottom: var(--space-4);
border-bottom: 1px solid rgba(201, 216, 222, 0.2);
}
.site-footer a:hover { color: var(--white); }
.site-footer__links {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
font-size: 0.875rem; /* wie .nav__list a */
font-weight: 500;
}
.site-footer__bottom {
padding-top: var(--space-3);
font-size: 0.8125rem;
color: rgba(201, 216, 222, 0.8); /* 4.63:1 auf #3d4a5a */
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
/* ---------------------------------- Utility ---------------------------------- */
/* .reveal only starts hidden once we know JS is actually running (the inline
snippet in adds .js to synchronously) — otherwise, if a
script fails to load, this content would stay invisible forever. */
.js .reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-prose { max-width: 68ch; }
.mt-4 { margin-top: var(--space-4); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
/* ---------------------------------- Legal pages ---------------------------------- */
.legal {
max-width: 800px;
margin: 0 auto;
}
.legal h2 { margin-top: var(--space-4); font-size: 1.3rem; }
.legal h3 { margin-top: var(--space-3); font-size: 1.05rem; color: var(--olive-dark); }
.legal p, .legal li { color: var(--ink-soft); font-size: 0.95rem; }
/* ---------------------------------- Responsive ---------------------------------- */
@media (max-width: 980px) {
.split,
.book-entry,
.project-card { grid-template-columns: 1fr; }
.split--reverse .split__media { order: 0; }
.book-entry:nth-child(even) .book-entry__media { order: 0; }
.project-card__cover { max-width: 280px; margin: 0 auto; }
.card-grid { grid-template-columns: repeat(2, 1fr); }
.werk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav__list { display: none; }
.nav-toggle { display: flex; }
/* Das Klappfeld ist die LISTE, nicht die ganze Navigation.
Der Menue-Knopf steht im Markup INNERHALB von .nav. Wurde .nav
absolut unter die Leiste gesetzt, wanderte das X mit hinunter
und stand — als zweites Flex-Kind neben der Liste, mittig
ausgerichtet — frei im Feld (gemessen: 92 px unter der Leiste,
126 px vom rechten Rand). Bleibt .nav in der Kopfzeile, sitzt
das X genau dort, wo zuvor die drei Striche waren.
Bezugsrahmen fuer top/left/right ist .site-header (sticky und
damit positioniert), also liegt das Feld randbuendig unter der
ganzen Leiste. */
.site-header__inner.is-open .nav__list {
display: flex;
flex-direction: column;
gap: 0;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--cream);
box-shadow: var(--shadow-soft);
padding: var(--space-2) var(--space-3) var(--space-4);
}
.site-header__inner.is-open .nav__list a {
display: block;
padding: 0.9rem 0;
border-bottom: 1px solid rgba(131,126,109,0.15);
}
/* Kein Glas im Klappmenü: das Panel liegt hier auf der cremefarbenen
Leiste, es gibt keinen Grund zum Durchscheinen. */
.nav__submenu-list {
position: static;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
border-radius: 0;
opacity: 1;
visibility: visible;
transform: none;
display: none;
padding: 0 0 0 1rem;
}
.nav__submenu::after,
.nav__submenu-list::before,
.nav__submenu-list::after { display: none; }
.nav__submenu-list a { border-radius: 0; }
.nav__submenu.is-open .nav__submenu-list { display: block; }
.card-grid { grid-template-columns: 1fr; }
.werk-grid { grid-template-columns: 1fr; }
.section { padding: var(--space-5) 0; }
.site-footer__inner { flex-direction: column; }
.press-slide__quote { min-height: 0; }
/* Schmale Fenster: 10vw wäre hier eine sinnlose Gasse, deshalb rücken die
Pfeile an den Rand. Die Ausrichtung auf die Textsäule darüber gibt es
auf dem Telefon ohnehin nicht zu sehen. Die feste Bandhöhe fällt weg —
hier bestimmt der Text die Höhe. */
.press-carousel__arrow { width: 34px; height: 34px; }
.press-carousel__arrow[data-carousel-prev] { left: 0.5rem; }
.press-carousel__arrow[data-carousel-next] { right: 0.5rem; }
.press-carousel__viewport { max-width: calc(100% - 2 * 3rem); }
.section--teal { min-height: 0; padding: var(--space-5) 0; }
}
@media (max-width: 480px) {
.hero { min-height: 100vh; }
.btn { width: 100%; justify-content: center; }
}
/* ============================================================
GEMEINSAME MECHANIK (in allen drei Entwürfen gleich)
.stage hält Hero und Autorinnen-Abschnitt zusammen.
.hero wird klebend (sticky) und bleibt 100vh am oberen Rand
stehen — damit bleibt der Blattgrund samt Canvas stehen.
.autor liegt darüber und schiebt sich beim Scrollen von unten
ins Bild. Kein Skript noetig: das ist normaler Fluss.
--exit 0 -> 1 ueber die ersten 62vh Scrollweg (eine Zeile JS
unten). Nur der Hero-TEXT haengt daran, nicht der Grund.
============================================================ */
.stage { position: relative; }
@media (min-width: 901px) {
.stage .hero {
position: sticky;
top: 0;
height: 100vh;
min-height: 0;
}
.stage .hero__content,
.stage .hero__scroll {
opacity: calc(1 - var(--exit, 0));
transform: translateY(calc(var(--exit, 0) * -2.75rem));
will-change: opacity, transform;
}
/* Der Scroll-Hinweis sitzt absolut und braucht seine Zentrierung zurueck */
.stage .hero__scroll { transform: translate(-50%, calc(var(--exit, 0) * -2.75rem)); }
.stage .hero__content { margin-top: 4vh; }
}
@media (prefers-reduced-motion: reduce) {
.stage .hero__content, .stage .hero__scroll { opacity: 1; transform: none; }
.stage .hero__scroll { transform: translateX(-50%); }
}
.autor { position: relative; z-index: 2; }
.autor__inner { max-width: var(--container); margin: 0 auto; }
.autor h2 { font-family: var(--font-hero); font-weight: 600; letter-spacing: -0.01em; }
.autor p { font-family: var(--font-hero-text); text-wrap: pretty; }
/* ---------- E: ORIGINAL --------------------------------------
Nachgebaut nach der bestehenden Wix-Seite, an der gerendert
gemessen (freiewortkunst.com, 1440 px):
Grund rgb(201,216,222) = #c9d8de (= --blue-soft)
Schrift rgb(88,99,106) = #58636a (Titel und Text)
Aufteilung Text x=112 b=431 | Bild x=717 962x669, randlos
Zwei bewusste Abweichungen:
1. Bild links statt rechts — so gewuenscht.
2. Schrift eine Spur dunkler: #58636a auf #c9d8de sind 4.21:1
und verfehlen AA fuer Fliesstext (4.5:1). #525d64 liegt bei
4.62:1 und besteht AA. Der Farbton bleibt derselbe. */
.autor--original {
--ground: #c9d8de; /* = --blue-soft aus style.css */
--ground-ink: #525d64; /* Wix #58636a, eine Spur dunkler */
/* Kein volles Fenster: das Original ist ein breites, flaches Band
(669 px bei 1440 px Breite = 46 vw). Die Hoehe laeuft mit der
Breite mit, weil die Komposition zweispaltig ist. */
min-height: clamp(26rem, 46vw, 42rem);
display: flex;
align-items: center;
background: var(--ground);
}
/* Randlos: kein Container, das Bild geht bis an den linken Rand. */
.autor--original .autor__inner {
max-width: none; width: 100%;
align-self: stretch;
display: grid;
grid-template-columns: 50% 1fr; /* Original: Bild ab 50.3 % */
align-items: center;
}
/* Wie im Original: das Bild fuellt seine Spalte ueber die volle
Abschnittshoehe und wird dabei beschnitten — kein Rahmen,
kein Schatten, keine Rundung. */
.autor--original .autor__portrait { align-self: stretch; }
.autor--original .autor__portrait img {
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 18%;
}
/* Der Text sitzt nicht am Bild, sondern mit viel leerem Grund davor.
Anders als im Original (174 px zum Foto, 112 px zum Rand — sichtbar
nach rechts gerueckt) steht der Block hier mittig in der blauen
Flaeche: die Polsterung ist nur die Mindestluft, zentriert wird
ueber margin-inline:auto. Das haelt auch auf breiten Fenstern,
wo die Polsterung allein aus der Mitte laufen wuerde. */
.autor--original .autor__text {
padding-inline: clamp(1.5rem, 6vw, 5rem);
}
.autor--original .autor__text > * {
max-width: 27rem; /* Wix: 431 px */
margin-inline: auto;
}
.autor--original h2 {
font-size: clamp(1.75rem, 2.6vw, 2.0625rem); /* Wix: 33px */
color: var(--ground-ink);
/* Deutlich mehr Luft unter dem Namen als im uebrigen Satz —
im Original rund 50 px. */
margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.autor--original p {
font-size: 1.0625rem; /* Wix: 18px */
line-height: 1.62;
color: var(--ground-ink);
margin-block: 0;
}
@media (max-width: 900px) {
.autor--original { min-height: 0; }
.autor--original .autor__inner { grid-template-columns: 1fr; }
.autor--original .autor__portrait img { height: auto; aspect-ratio: 3 / 2; }
.autor--original .autor__text {
padding: 2.5rem clamp(1.25rem, 5vw, 3.5rem) 3rem;
}
.autor--original .autor__text > * { max-width: none; }
}
/* ============================================================
ABSCHNITT "AKTUELLES PROJEKT" — Fassung Nachtblau
Loest die helle Fassung nach der Wix-Vorlage ab. Der Grund
dafuer ist die Abfolge der Seite: Gold (Kopf) -> Blassblau
(Autorin) -> HIER -> gemustertes Schiefer (Presse). Als
cremefarbenes Band war dieser Abschnitt das einzige warme
Feld zwischen zwei kalten und brauchte geliehenes Blau, um
dazuzugehoeren. Als dunkle Stufe steht er fuer sich.
Gemessen (1440 px Fensterbreite):
Grund #3d4a5a — Formton des Presse-Musters
Titel #f2ecd9 — 7.64:1; exakt das Creme des Buch-
covers, an der Bilddatei gemessen
(36.9 % der Pixel, die Blattformen)
Fliesstext #b6c0ca — 4.89:1
Band 662 px hoch (46 vw, laeuft mit der Breite)
Cover 352 x 477, Seitenverhaeltnis 0.739 wie die
Datei (2455 x 3324), 93 px ueber der Unterkante
Der Abschnitt hat KEINE Eyebrow mehr. "Aktuelles Projekt"
steht als Bildunterschrift am Buch (.projekt__plate), wo es
etwas benennt, statt den Titel nur anzukuendigen. Satzlogik
dort wie .press-eyebrow: Red Hat Text, 14 px, Gewicht 400,
keine Sperrung, keine Versalien.
============================================================ */
.projekt {
--band: #3d4a5a; /* Formton des Presse-Musters (rgb 61,74,90) */
--pk-titel: #f2ecd9; /* Creme des Buchcovers, 7.64:1 */
--pk-text: #b6c0ca; /* Fliesstext, 4.89:1 */
--pk-knopf: #2c3540; /* Schrift auf dem hellen Knopf, 6.38:1 */
}
/* Die Eyebrow des Abschnitts entfaellt; das Markup traegt
stattdessen .projekt__plate. Die Regel bleibt als Sicherung
stehen, falls die Zeile irgendwo noch im Markup steht. */
.projekt .eyebrow { display: none; }
.projekt h2 {
font-family: var(--font-hero);
font-weight: 800;
/* Eine Stufe kleiner als zuvor (4.7vw / 5.3rem): rund 20 % */
font-size: clamp(1.75rem, 3.8vw, 4.25rem);
line-height: 1.04;
letter-spacing: -0.015em;
text-transform: uppercase;
color: var(--pk-titel);
margin: 0 0 1.4rem;
/* Immer genau zwei Zeilen: "SO GEHT LIEBE." / "SO GEHT KUNST."
Umbrochen wird nur am
, nie innerhalb einer Zeile. */
white-space: nowrap;
}
.projekt__lede {
font-family: var(--font-hero-text);
font-size: 1rem;
line-height: 1.6;
color: var(--pk-text);
margin: 0 0 clamp(2rem, 3.4vw, 3.2rem);
/* Am Desktop in einer Zeile; am Telefon (s. 900-px-Regel) darf sie
wieder umbrechen. */
white-space: nowrap;
}
.projekt__actions {
display: flex; flex-wrap: wrap; align-items: center;
gap: 1.6rem;
}
/* --- Bildunterschrift am Buch -------------------------------
Die Linie darunter ist currentColor, nicht mehr die Goldlinie
des ersten Entwurfs: so kann sie nicht von der Schriftfarbe
darueber abweichen. */
.projekt__plate {
position: absolute; z-index: 3;
right: clamp(1.5rem, 9vw, 11rem);
top: clamp(2.2rem, 4vw, 3.5rem);
margin: 0;
font-family: var(--font-hero-text);
font-size: 0.875rem; /* wie .press-eyebrow */
font-weight: 400;
line-height: 1.2;
letter-spacing: normal;
text-transform: none;
color: var(--pk-text);
padding-bottom: 0.55rem;
border-bottom: 1px solid currentColor;
}
/* --- Knopf: das Glas des Hero-Knopfes, hell auf dunkel ------
Machart wie .hero__glass ("zum Buch & Musik"): gleiche Pille,
Lichtkante oben, haarfeiner Rand, Glanzlicht unter dem
Zeiger, gleicher Hub. Getragen wird es vom Hellblau des
Fliesstextes; die Schrift steht dunkel darauf (6.38:1),
nicht hell darin. */
.projekt .btn {
position: relative;
isolation: isolate;
padding: 0.65rem 3rem;
line-height: 1.2;
border: 0;
border-radius: 999px;
font-family: var(--font-hero-text);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--pk-knopf);
background: linear-gradient(163deg,
rgba(204,214,224,0.96) 0%,
rgba(182,192,202,0.96) 45%,
rgba(163,175,188,0.96) 100%);
-webkit-backdrop-filter: blur(8px) saturate(106%) brightness(1.02);
backdrop-filter: blur(8px) saturate(106%) brightness(1.02);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.62),
inset 0 -7px 15px -9px rgba(38,50,64,0.30),
0 18px 34px -14px rgba(9,14,21,0.55),
0 2px 5px -2px rgba(9,14,21,0.34);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.projekt .btn::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(163deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.30) 40%, rgba(58,72,88,0.34) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* Glanzlicht folgt dem Zeiger (main.js setzt --mx/--my) */
.projekt .btn::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.45), rgba(255,255,255,0) 64%);
opacity: 0;
transition: opacity 0.45s var(--ease-out);
pointer-events: none;
}
.projekt .btn:hover {
transform: translateY(-2px);
background: linear-gradient(163deg,
rgba(214,223,232,0.97) 0%,
rgba(192,202,212,0.97) 45%,
rgba(172,184,196,0.97) 100%);
color: var(--pk-knopf);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.72),
inset 0 -7px 15px -9px rgba(38,50,64,0.32),
0 26px 48px -16px rgba(9,14,21,0.6),
0 3px 7px -2px rgba(9,14,21,0.38);
}
.projekt .btn:hover::after { opacity: 1; }
.projekt .btn:active { transform: translateY(0); }
/* Unter 480 px macht style.css alle .btn vollbreit. Fuer die
Glas-Pille gilt das nicht — der Hero-Knopf klinkt sich dort
genauso aus. Eine Pille von Rand zu Rand ist ein Balken. */
@media (max-width: 480px) {
.projekt .btn { width: auto; }
}
/* Der Hinweis ist keine Pille mehr, sondern eine Zeile neben
dem Knopf: auf dem dunklen Grund wirkte der angetoente Kasten
wie ein zweiter, halb ausgeschalteter Knopf. */
.projekt .event-note {
margin-top: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
font-family: var(--font-hero-text);
font-size: 0.8125rem;
line-height: 1.2;
letter-spacing: 0.02em;
color: var(--pk-text);
}
/* --- Cover: nur Schatten, kein Kasten ---------------------
drop-shadow statt box-shadow: der Schatten folgt dem Alpha-
kanal, liegt also an der Silhouette des Buches und nicht am
Rechteck des Bildes. Auf dem dunklen Grund tragen die
Schatten mehr Deckung als auf dem hellen Band zuvor. */
.projekt__cover img {
box-shadow: none;
transform-origin: center;
filter: drop-shadow(0 6px 12px rgba(12,17,24,.42))
drop-shadow(0 42px 70px rgba(12,17,24,.55));
transition: transform .5s var(--ease-out), filter .5s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.projekt__cover img:hover {
transform: scale(1.03);
filter: drop-shadow(0 8px 16px rgba(12,17,24,.46))
drop-shadow(0 52px 84px rgba(12,17,24,.6));
}
}
/* ---------- Fassung ORIGINAL (Nachtblau) --------------------
Ein Raum mit einem beleuchteten Gegenstand darin, nicht eine
Spalte neben einem Bild. Der Satz steht unten angeschlagen,
das Buch frei im rechten Drittel.
Die Hoehe laeuft ungebremst mit der Breite (46 vw), wie die
Vorlage es tut: eine feste Kappe liess das Band ab 1440 px
stehenbleiben und wirkte gedrueckt. */
.projekt--original {
/* Masse fuer Buch, Text und Bildunterschrift, alle aus der
Bandhoehe abgeleitet, damit sie beim Skalieren zusammenbleiben:
--pk-h Bandhoehe
--pk-t Abstand Buch -> Oberkante (14 %, aber mind. 4.5rem,
damit ueber dem Buch Platz fuer die Bildunterschrift bleibt)
--pk-b Abstand Buch -> Unterkante (14 %)
--pk-img Hoehe der Bilddatei des Buches
Die PNG hat einen leeren Rand: oben 1.53 %, unten 1.62 % der
Bildhoehe, rechts 1.32 % der Bildhoehe (44 px bei 2455 x 3324). */
--pk-h: clamp(26rem, 46vw, 54rem);
--pk-t: max(0.14 * var(--pk-h), 4.5rem);
--pk-b: calc(0.14 * var(--pk-h));
--pk-img: calc(var(--pk-h) - var(--pk-t) - var(--pk-b));
--pk-r: clamp(1.5rem, 9vw, 11rem);
position: relative;
overflow: hidden;
background: var(--band);
min-height: var(--pk-h);
display: flex;
align-items: flex-end;
}
/* Die Kappe war 44rem: ab rund 1480 px Fensterbreite wuchs die Schrift
weiter (4.7vw), die Spalte aber nicht mehr, und der Titel brach auf
vier Zeilen um. 56rem = 44rem + die groesste linke Polsterung (12rem),
so bleibt fuer den Titel immer genug Breite. Der Fliesstext bleibt
ueber .projekt__lede (34ch) schmal. */
.projekt--original .projekt__text {
position: relative; z-index: 2;
/* Unterkante des Knopfes = sichtbare Unterkante des Buches */
padding: 0 0 calc(var(--pk-b) + 0.0162 * var(--pk-img)) clamp(1.5rem, 10vw, 12rem);
max-width: min(54vw, 56rem);
}
/* Das Cover haengt NUR an rechts/oben/unten, nie zusaetzlich an
links: links und rechts zusammen erzwingen eine feste
Kastenbreite, und mit dem globalen img{max-width:100%} (Zeile
130) wird das Bild dann waagerecht gestaucht. Genau daran ist
das Seitenverhaeltnis im ersten Entwurf zerbrochen (0.628
statt 0.739). max-width:none haelt es auch dann korrekt,
wenn der Kasten schmaler rechnet als das Bild. */
.projekt--original .projekt__cover {
position: absolute; z-index: 1;
right: var(--pk-r);
top: var(--pk-t);
bottom: var(--pk-b);
}
.projekt--original .projekt__cover img {
height: 100%;
width: auto;
max-width: none;
}
/* Bildunterschrift "Aktuelles Projekt": haengt am Buch, nicht an der
Oberkante des Bandes. Ihre Unterkante (die Linie) steht immer
1.5rem ueber der sichtbaren Oberkante des Buches, ihre rechte
Kante buendig mit der sichtbaren rechten Buchkante — bei jeder
Fensterbreite. Nur Desktop; am Telefon gilt die 900-px-Regel. */
@media (min-width: 901px) {
/* Knopf und Hinweis bleiben in einer Zeile, sonst rutscht der
Hinweis unter den Knopf und die Unterkante stimmt nicht mehr. */
.projekt--original .projekt__actions { flex-wrap: nowrap; }
.projekt--original .event-note { white-space: nowrap; }
.projekt--original .btn { white-space: nowrap; flex-shrink: 0; }
.projekt--original .projekt__plate {
top: auto;
bottom: calc(100% - var(--pk-t) - 0.0153 * var(--pk-img) + 1.5rem);
right: calc(var(--pk-r) + 0.0132 * var(--pk-img));
}
}
/* Mobil: alles mittig in einer Spalte — Bildunterschrift, Buch,
dann Titel, Text, Knopf und Hinweis. Das Buch steht zuerst,
weil es der Gegenstand des Abschnitts ist. */
@media (max-width: 900px) {
.projekt--original {
display: flex;
flex-direction: column;
align-items: center;
min-height: 0;
overflow: visible;
text-align: center;
padding: 3.5rem 1.5rem 4rem;
}
.projekt__plate {
order: 1;
position: static;
display: inline-block;
margin: 0 0 1.75rem;
}
.projekt--original .projekt__cover {
order: 2;
position: static;
padding: 0;
margin: 0 0 2.75rem;
}
.projekt--original .projekt__cover img {
height: auto;
width: 62vw;
max-width: 15rem;
margin: 0 auto;
}
.projekt--original .projekt__text {
order: 3;
max-width: none;
padding: 0;
}
/* Titel genau so breit wie das sichtbare Buch. Die laengere Zeile
"SO GEHT KUNST." misst in Red Hat Display 800 das 8.0-fache der
Schriftgroesse; das Buch selbst fuellt 96 % seiner Bildbreite
(der Rest ist Rand der freigestellten PNG). Also dieselbe
Breite wie das Cover, min(62vw, 15rem), geteilt durch
8.0 / 0.96 = 8.33. Aendert sich die Coverbreite, hier mitziehen. */
.projekt h2 { font-size: calc(min(62vw, 15rem) / 8.33); }
.projekt__lede { margin: 0 auto 2rem; white-space: normal; max-width: 34ch; }
.projekt__actions {
flex-direction: column;
justify-content: center;
gap: 1.1rem;
}
}
/* ============================================================
ABSCHNITT "JEDEM WORT SEIN EIGENER RAUM" (letzter der Startseite)
Schrift exakt wie der Autorinnen-Abschnitt (.autor--original):
Titel Red Hat Display 600, clamp(1.75rem, 2.6vw, 2.0625rem)
Text Red Hat Text 400, 1.0625rem, Zeilenhoehe 1.62
Farbe: das Blau des Presse-Bandes darueber (#3d4a5a),
auf dem hellen Beige 9.0:1.
Aufteilung wie beim Autorinnen-Abschnitt: zwei Haelften,
Textblock (max. 27rem) linksbuendig; Text links, Bild rechts.
============================================================ */
.wort {
--wort-ground: #ebe9df; /* Stein wie die Bücher-Sektion (23.09.2026, vorher Creme #fdf9ee) */
--wort-ink: #3d4a5a; /* = --band, Formton der Presse */
background: var(--wort-ground);
/* Beide Spalten oben angeschlagen (nicht mittig), damit das Bild
auf eine feste Hoehe im Text gesetzt werden kann, s. .wort__bild. */
--wort-pad-y: clamp(4.5rem, 7vw, 7rem);
--wort-pad-x: clamp(1.5rem, 6vw, 5rem);
--wort-h2: clamp(1.75rem, 2.6vw, 2.0625rem);
--wort-h2-gap: clamp(1.75rem, 3vw, 2.75rem);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
}
.wort__text { padding: var(--wort-pad-y) var(--wort-pad-x); }
.wort__text > * { max-width: 27rem; margin-inline: auto; }
.wort h2 {
font-family: var(--font-hero);
font-weight: 600;
letter-spacing: -0.01em;
font-size: var(--wort-h2);
line-height: 1.15;
color: var(--wort-ink);
margin-bottom: var(--wort-h2-gap);
}
.wort p {
font-family: var(--font-hero-text);
font-size: 1.0625rem;
line-height: 1.62;
color: var(--wort-ink);
text-wrap: pretty;
margin-top: 0;
margin-bottom: 1.1rem;
}
.wort p:last-child { margin-bottom: 0; }
/* Randlos: kein Rahmen, kein Schatten — das PNG steht frei auf dem Beige */
/* Die Oberkante der Handschrift steht auf Hoehe der ersten Textzeile
links (Oberkante der Grossbuchstaben). Rechnung:
Polsterung oben wie links
+ Titel (2 Zeilen x 1.15) + Abstand unter dem Titel
+ 0.5rem (Luft ueber den Grossbuchstaben in der Textzeile)
- leerer Rand oben im PNG: 78 px bei 2537 px Breite = 3.07 %
der Bildbreite; die Bildbreite ist min(34rem, halbe Breite
minus Polsterung).
Aendert sich Titel, Textgroesse oder das PNG, hier nachziehen. */
/* 01.10.2026: Bild links, Text rechts, Bild kleiner (34rem -> 28rem).
Am Telefon bleibt der Text zuerst (order nur am Rechner). */
.wort { --wort-img: 28rem; }
.wort__bild {
order: -1;
margin: 0;
padding: calc(var(--wort-pad-y) + 2.3 * var(--wort-h2) + var(--wort-h2-gap) + 0.5rem
- 0.0307 * min(var(--wort-img), 50vw - 2 * var(--wort-pad-x)))
var(--wort-pad-x) var(--wort-pad-y);
}
.wort__bild img { width: 100%; max-width: var(--wort-img); height: auto; margin-inline: auto; }
@media (max-width: 900px) {
.wort { grid-template-columns: 1fr; }
.wort__text { padding: 3.5rem clamp(1.25rem, 5vw, 3.5rem) 2.5rem; }
.wort__text > * { max-width: none; }
.wort__bild { order: 0; padding: 0 clamp(1.25rem, 5vw, 3.5rem) 4rem; }
.wort__bild img { max-width: 24rem; }
}
/* Startseite: die Fusszeile steht auf derselben linken Kante wie der
Text von "Jedem Wort sein eigener Raum" darueber — bei jeder
Fensterbreite. Dort sitzt der Textblock (max. 27rem) mittig in der
linken Haelfte, mindestens mit der Polsterung --wort-pad-x; seine
linke Kante ist also max(Polsterung, (50 % - 27rem) / 2). Dieselbe
Rechnung hier, rechts gespiegelt. Aendert sich .wort, hier mitziehen. */
.site-footer--wort .container {
max-width: none;
/* 01.10.2026: Bild jetzt links — Kante der Handschrift (max. 28rem) */
padding-inline: max(clamp(1.5rem, 6vw, 5rem), (50% - 28rem) / 2);
}
@media (max-width: 900px) {
.site-footer--wort .container { padding-inline: clamp(1.25rem, 5vw, 3.5rem); }
}
/* Fusszeile am Telefon: flacher, und die Links untereinander
(Impressum, darunter Datenschutzerklaerung, darunter E-Mail)
statt nebeneinander mit grossen Luecken. */
@media (max-width: 760px) {
.site-footer { padding: 2.5rem 0 1.5rem; }
.site-footer__inner { gap: 1.25rem; padding-bottom: 1.5rem; }
.site-footer__links { flex-direction: column; gap: 0.6rem; }
.site-footer__bottom { padding-top: 1rem; }
}
/* ==========================================================================
SEKTION "BÜCHER" — Kartenstapel (Stein)
--------------------------------------------------------------------------
Eigenständig: alle Klassen beginnen mit .bd-, alle Werte stehen hier als
Variablen am Abschnitt. Startseite: ersetzt seit 22.09.2026 den
Abschnitt "Aktuelles Projekt" (.projekt, weiter unten noch vorhanden,
aber unbenutzt). Markup in index.html, Script assets/js/buecher-stapel.js,
Vorschau allein: mockups/buecher-karten-sektion.html.
Stapel: das aktive Buch vorne und scharf. Die anderen liegen gerade (nicht
gekippt) dahinter: nur das NÄCHSTE Buch ist angedeutet, nach rechts versetzt,
kleiner, unscharf und blass. Das übernächste bleibt unsichtbar. Wer weiterklickt, holt das nächste nach
vorne; dort wird es scharf. Das bisherige gleitet nach links heraus und
taucht hinten wieder auf.
Blättern: Pfeile · Reiter · Klick auf ein Buch im Hintergrund ·
Pfeiltasten · Wischen. Ohne JavaScript: alle drei Texte untereinander.
========================================================================== */
.bd {
--bd-bg: #ebe9df; /* Stein, von der Wix-Dev-Seite */
--bd-ink: #3d4a5a; /* 7.4:1 auf dem Grund */
--bd-ink-soft: #525d64; /* 5.6:1 */
--bd-rule: rgba(61, 74, 90, 0.18);
--bd-edge: clamp(1.5rem, 10vw, 12rem);
--bd-cover-w: clamp(15rem, 23vw, 21rem);
--bd-ease: cubic-bezier(0.16, 1, 0.3, 1);
--bd-dur: 0.9s;
--bd-display: var(--font-hero);
--bd-text: var(--font-hero-text);
background: var(--bd-bg);
color: var(--bd-ink);
font-family: var(--bd-text);
padding: clamp(3.5rem, 6vw, 5.5rem) var(--bd-edge) clamp(4rem, 7.5vw, 6.5rem);
}
/* Sprungziel für „Bücher" / „Weitere Bücher" im Menü (#buecher): die
Überschrift soll unter der klebenden Kopfleiste landen, nicht dahinter. */
#buecher { scroll-margin-top: calc(var(--header-h) - 2.5rem); }
@media (max-width: 900px) { #buecher { scroll-margin-top: calc(var(--header-h) - 1rem); } }
.bd__sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
/* ---------- Kopfzeile: "Bücher" + Reiter ---------- */
.bd__head {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem clamp(1.5rem, 3.5vw, 3rem);
margin: 0 0 clamp(2.75rem, 5vw, 4.25rem); padding: 0 0 1rem;
border-bottom: 1px solid var(--bd-rule);
}
/* Satz wie die Reiter, eine Stufe fetter und in voller Farbe */
.bd__heading {
font-family: var(--bd-text); font-size: 0.75rem; font-weight: 700; line-height: 1.2;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--bd-ink);
margin: 0; padding: 0 0 0.55rem;
}
.bd__tabs {
display: flex; flex-wrap: wrap; gap: 0.5rem clamp(1.5rem, 3.5vw, 3rem);
}
.bd__tab {
font: inherit; font-size: 0.75rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--bd-ink-soft);
background: none; border: 0; padding: 0 0 0.55rem; cursor: pointer;
display: flex; align-items: baseline; gap: 0.6rem; position: relative;
transition: color .3s var(--bd-ease);
}
.bd__tab::after {
content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1rem - 1px); height: 2px;
background: var(--bd-ink); transform: scaleX(0); transform-origin: left;
transition: transform .6s var(--bd-ease);
}
.bd__tab:hover, .bd__tab[aria-selected="true"] { color: var(--bd-ink); }
.bd__tab[aria-selected="true"]::after { transform: scaleX(1); }
.bd__tab:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 4px; border-radius: 2px; }
/* ---------- Bühne ---------- */
.bd__stage {
display: grid;
/* Der Text beginnt genau an der Bildkante des Autorinnen-Abschnitts
darüber — die liegt bei 50 % der Fensterbreite. Die Bühne ist
Fensterbreite minus 2 × Randabstand breit, also ist ihre Mitte
dieselbe Linie: erste Spalte 50 %, kein Spaltenabstand. Gilt bei
jeder Breite über 900 px. */
grid-template-columns: 50% minmax(0, 46rem);
column-gap: 0;
align-items: center;
outline: none;
}
.bd__stage:focus-visible { outline: 2px dashed var(--bd-rule); outline-offset: 12px; }
/* Stapel. Höhe = höchstes Cover (Seitenverhältnis 1.36). Alle Bücher
stehen links bündig und auf halber Höhe — Schichten, kein Fächer. */
.bd__stack {
position: relative;
height: calc(var(--bd-cover-w) * 1.36);
touch-action: pan-y;
user-select: none;
}
.bd__card {
position: absolute; left: 0; top: 50%;
width: var(--bd-cover-w);
margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
transform-origin: 0 50%;
translate: 0 -50%;
transition:
transform var(--bd-dur) var(--bd-ease),
opacity var(--bd-dur) var(--bd-ease),
filter var(--bd-dur) var(--bd-ease);
-webkit-tap-highlight-color: transparent;
}
.bd__card img {
display: block; width: 100%; height: auto; pointer-events: none;
/* Schatten nur am vorderen Buch voll — hinten würde er die Unschärfe
wieder "anfassen" */
filter: drop-shadow(0 4px 8px rgba(43,43,38,.14)) drop-shadow(0 30px 50px rgba(43,43,38,.22));
transition: filter var(--bd-dur) var(--bd-ease);
}
/* Platz 0 vorne · 1 dahinter · 2 ganz hinten */
.bd__card[data-pos="0"] { z-index: 3; transform: none; opacity: 1; filter: none; }
/* --bd-s / --bd-tx setzt das Script je nach Seitenverhältnis: das angedeutete
Buch ist nie höher als 86 % des vorderen, seine rechte Kante steht immer
30 % der Buchbreite rechts neben dem vorderen. */
.bd__card[data-pos="1"] { z-index: 2; transform: translateX(var(--bd-tx, 26%)) scale(var(--bd-s, .86)); opacity: .4; filter: blur(2.5px) saturate(.6); }
/* Platz 2 bleibt unsichtbar: angedeutet wird immer nur das nächste Buch */
.bd__card[data-pos="2"] { z-index: 1; transform: translateX(60%) scale(.74); opacity: 0; filter: blur(4.5px) saturate(.4); pointer-events: none; }
.bd__card[data-pos="1"] img, .bd__card[data-pos="2"] img { filter: drop-shadow(0 20px 30px rgba(43,43,38,.12)); }
/* Hover: vorne ein kleiner Hub, hinten ein Hauch mehr Präsenz */
@media (hover: hover) {
.bd__card[data-pos="0"]:hover { transform: translateY(-6px); }
.bd__card[data-pos="1"]:hover { opacity: .58; filter: blur(1.5px) saturate(.75); }
}
/* Wechsel, symmetrisch in beide Richtungen:
vor — das vordere Buch gleitet nach links hinaus und blendet aus;
das angedeutete kommt von rechts nach vorne und wird scharf.
zurück — genau gespiegelt: das neue Buch kommt von links herein und
blendet sofort auf, das bisherige wandert nach rechts zurück
in die Andeutung. Keine Lücke, in der vorne nichts steht.
Platz 2 ist unsichtbar, deshalb braucht es keinen Sprung durch den Stapel. */
.bd__card.is-to-back { animation: bd-out-left var(--bd-dur) var(--bd-ease) both; }
/* Zurück: Bewegung in EINEM Zug (eine Kurve von Anfang bis Ende, kein
Zwischenhalt, der am Ende nachschiebt); das Aufblenden läuft getrennt
und schneller, damit vorne sofort ein Buch steht. */
.bd__card.is-to-front {
animation:
bd-in-move var(--bd-dur) var(--bd-ease) both,
bd-in-fade calc(var(--bd-dur) * .45) ease-out both;
}
@keyframes bd-out-left {
0% { z-index: 4; transform: none; opacity: 1; filter: none; }
70% { z-index: 4; transform: translateX(-18%) scale(.95); opacity: 0; filter: blur(3px); }
100% { z-index: 4; transform: translateX(-18%) scale(.95); opacity: 0; filter: blur(3px); }
}
@keyframes bd-in-move {
from { z-index: 4; transform: translateX(-18%) scale(.95); }
to { z-index: 4; transform: none; }
}
@keyframes bd-in-fade {
from { opacity: 0; filter: blur(3px); }
to { opacity: 1; filter: none; }
}
.bd__card { will-change: transform, opacity, filter; }
.bd__card:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 6px; }
/* ---------- Text ---------- */
.bd__panels { display: grid; }
.bd__panel {
grid-area: 1 / 1;
align-self: center; /* Mitte des Textes = Mitte des Buches */
opacity: 0; transform: translateY(12px); visibility: hidden;
transition: opacity .45s var(--bd-ease), transform .5s var(--bd-ease), visibility 0s linear .5s;
}
.bd__panel.is-active {
opacity: 1; transform: none; visibility: visible;
transition: opacity .7s var(--bd-ease) .25s, transform .8s var(--bd-ease) .25s, visibility 0s;
}
.bd__label {
display: flex; align-items: center; gap: .85rem;
font-size: .8125rem; line-height: 1.2; letter-spacing: .04em;
color: var(--bd-ink-soft); margin: 0 0 clamp(1.4rem, 2.2vw, 1.85rem);
}
.bd__label b { font-family: var(--bd-text); font-weight: 600; color: var(--bd-ink); letter-spacing: .06em; }
.bd__label i { width: 2.25rem; height: 1px; background: currentColor; opacity: .7; }
.bd__meta { font-size: .875rem; line-height: 1.5; color: var(--bd-ink-soft); margin: 0 0 .6rem; }
.bd__title {
font-family: var(--bd-display); font-weight: 600;
font-size: clamp(2rem, 3.2vw, 2.875rem); line-height: 1.08; letter-spacing: -0.015em;
color: var(--bd-ink); margin: 0 0 clamp(1.4rem, 2.4vw, 2rem);
}
/* Buch 1 in Versalien wie auf der Startseite — eine Stufe kleiner und
fetter, damit es optisch nicht grösser wirkt als die anderen Titel */
.bd__title--caps {
text-transform: uppercase;
font-weight: 700;
font-size: clamp(1.55rem, 2.45vw, 2.2rem);
line-height: 1.12;
letter-spacing: 0;
}
.bd__quote { font-size: 1.0625rem; line-height: 1.62; margin: 0 0 1.1rem; text-wrap: pretty; }
.bd__by { font-size: .875rem; line-height: 1.5; color: var(--bd-ink-soft); margin: 0; }
.bd__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }
.bd__actions.bd__actions--top { display: none; } /* nur am Telefon, siehe unten */
.bd__note { font-size: .8125rem; line-height: 1.3; letter-spacing: .02em; color: var(--bd-ink-soft); }
.bd__btn {
display: inline-block;
padding: .65rem 3rem; border-radius: 999px;
background: var(--bd-ink); color: #f2ecd9; text-decoration: none;
font-size: .875rem; font-weight: 600; line-height: 1.2;
box-shadow: 0 16px 30px -14px rgba(12,17,24,.55), 0 2px 5px -2px rgba(12,17,24,.3);
transition: transform .4s var(--bd-ease), background .4s var(--bd-ease);
}
.bd__btn:hover { transform: translateY(-2px); background: #31444d; }
.bd__btn:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 4px; }
/* Stapel + Pfeile als eine Gruppe mittig neben dem Text (01.10.2026):
seit der Veranstaltungs-Karte ist der Text deutlich höher als das Buch,
und die Pfeile standen sonst weit unter dem Buch. Beide liegen in
derselben Zelle und sind gleich hoch gerechnet (Buch + Abstand + Pfeil),
also oben das Buch, unten die Pfeile, die Gruppe mittig. */
@media (min-width: 901px) {
.bd { --bd-nav-gap: clamp(2.25rem, 3.5vw, 3rem); }
.bd__stage .bd__stack { grid-row: 1; grid-column: 1; align-self: center; margin-bottom: calc(40px + var(--bd-nav-gap)); }
.bd__stage .bd__panels { grid-row: 1; grid-column: 2; }
.bd__stage .bd__nav { grid-row: 1; grid-column: 1; align-self: center; margin-top: calc(var(--bd-cover-w) * 1.36 + var(--bd-nav-gap)); }
}
/* ---------- Live-Veranstaltung (01.10.2026, v5) ----------
Eine flache Pille unter dem Zitat von „So geht Liebe“, rund wie der
Knopf „zum Buch“ darunter: links das Datum, Haarlinie, dann Ort und
Zeiten in zwei Zeilen, rechts „Programm ⊕“. Das Programm klappt UNTER
der Pille auf (nicht darin — eine aufgeklappte Pille würde zur Kapsel
mit riesigen Rundungen) und steht bündig mit dem Ort. Ohne JavaScript
ist es offen. */
.bd__event { margin-top: clamp(1.5rem, 2.2vw, 1.85rem); container: bd-event / inline-size; }
.bd__event-bar {
display: flex; align-items: center; gap: .95rem;
padding: .7rem .9rem .7rem 1.4rem;
background: rgba(255, 255, 255, .5);
border: 1px solid var(--bd-rule); border-radius: 999px;
}
.bd__event-date {
flex: none; display: flex; align-items: center; gap: .5rem;
padding-right: .95rem; border-right: 1px solid var(--bd-rule);
}
.bd__event-day {
font-family: var(--bd-display); font-weight: 600; font-size: 2.125rem; line-height: 1;
letter-spacing: -.02em; color: var(--bd-ink);
}
.bd__event-month {
font-size: .625rem; font-weight: 600; line-height: 1.35;
letter-spacing: .14em; text-transform: uppercase; color: var(--bd-ink-soft);
}
.bd__event-info { flex: 1; min-width: 0; }
.bd__event-place {
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem;
margin: 0 0 .15rem; font-family: var(--bd-display); font-weight: 600;
font-size: 1rem; line-height: 1.3; color: var(--bd-ink);
}
.bd__event-place span { font-family: var(--bd-text); font-weight: 400; font-size: .875rem; color: var(--bd-ink-soft); white-space: nowrap; }
/* Ohne Trennpunkte: bricht die Zeile um, steht keiner verwaist am Anfang */
.bd__event-facts { display: flex; flex-wrap: wrap; gap: .1rem .85rem; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--bd-ink-soft); }
.bd__event-facts span, .bd__event-facts b { white-space: nowrap; }
.bd__event-facts b { font-weight: 600; color: var(--bd-ink); }
.bd__event-toggle {
flex: none; display: inline-flex; align-items: center; gap: .5rem;
margin: 0; padding: .3rem .1rem .3rem .2rem; border: 0; background: none; cursor: pointer;
font-family: var(--bd-text); font-size: .8125rem; font-weight: 600; line-height: 1.2; letter-spacing: .02em;
color: var(--bd-ink); white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.bd__event-toggle i {
position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
border: 1.5px solid rgba(61, 74, 90, .4);
transition: border-color .2s ease, background .2s ease;
}
.bd__event-toggle i::before, .bd__event-toggle i::after {
content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
width: 10px; height: 1.5px; translate: -50% -50%;
transition: transform .45s var(--bd-ease);
}
.bd__event-toggle i::after { transform: rotate(90deg); }
.bd__event.is-open .bd__event-toggle i::after { transform: rotate(0deg); } /* + wird − */
.bd__event-toggle:hover i { border-color: var(--bd-ink); background: rgba(61, 74, 90, .06); }
.bd__event-toggle:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 2px; border-radius: 999px; }
.bd__event-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--bd-ease); }
.bd__event.is-open .bd__event-more { grid-template-rows: 1fr; }
.bd__event-more-in { min-height: 0; overflow: hidden; }
html:not(.js) .bd__event-more { grid-template-rows: 1fr; }
html:not(.js) .bd__event-toggle { display: none; }
/* bündig mit dem Ort in der Pille: Polster links + Datum + Abstand */
.bd__event-prog {
list-style: none; margin: .9rem 0 0; padding: 0 0 0 1.4rem;
font-size: .875rem; line-height: 1.5; color: var(--bd-ink);
}
.bd__event-prog li { position: relative; padding-left: 1.05rem; text-wrap: pretty; }
.bd__event-prog li + li { margin-top: .15rem; }
.bd__event-prog li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; background: var(--bd-ink-soft); }
.bd__event-mod { margin: .5rem 0 0; padding-left: 1.4rem; font-size: .8125rem; line-height: 1.4; color: var(--bd-ink-soft); }
.bd__event + .bd__actions { margin-top: clamp(1.4rem, 2vw, 1.75rem); }
/* Am Rechner steht der Knopf 4 px weiter rechts (07.10.2026, Kundin): rechnerisch
bündig mit der Pille wirkt er weiter aussen, weil er dunkel und voll ist und
die Pille hell mit grosser Rundung. Am Telefon steht der Knopf mittig. */
@media (min-width: 901px) { .bd__event + .bd__actions { margin-left: .25rem; } }
@media (prefers-reduced-motion: reduce) {
.bd__event-more, .bd__event-toggle i::after { transition: none; }
}
/* Nach der Breite der Karte selbst (Container-Abfrage), nicht des Fensters:
ist sie schmaler als 660 px, bleibt von „Programm ⊕“ nur der runde Knopf
(der Name bleibt für Screenreader und als Tooltip) — so passen Ort und
Zeiten in zwei Zeilen und die Pille bleibt flach. */
@container bd-event (max-width: 660px) {
.bd__event-bar { gap: .9rem; padding-left: 1.3rem; }
.bd__event-date { padding-right: .9rem; }
.bd__event-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bd__event-toggle { padding: .3rem; }
.bd__event-prog, .bd__event-mod { padding-left: 1.3rem; }
}
/* Schmale Karte (Laptop unter ~1300 px, Telefon): das Datum steht
senkrecht (Tag über Monat), damit der Text daneben Platz hat. Die
Leiste wird dabei höher, darum eine feste Rundung statt der Pille. */
@container bd-event (max-width: 480px) {
.bd__event-bar { gap: .8rem; padding: .7rem .7rem .7rem 1.05rem; border-radius: 2.25rem; }
.bd__event-date { flex-direction: column; gap: .3rem; padding-right: .8rem; text-align: center; }
.bd__event-day { font-size: 1.875rem; }
.bd__event-month { font-size: .5625rem; letter-spacing: .12em; }
.bd__event-facts { column-gap: .75rem; }
.bd__event-prog, .bd__event-mod { padding-left: 1.05rem; }
}
/* ---------- Steuerung ---------- */
/* Nur die Pfeile, unter dem Stapel an der Buchkante */
.bd__nav {
grid-column: 1;
display: flex; align-items: center; gap: 1.25rem;
margin-top: clamp(2.75rem, 5vw, 4rem);
}
.bd__arrows { display: flex; gap: .6rem; }
/* Wie die Pfeile im Presse-Band (.press-carousel__arrow): 40 px,
1.5 px Rand, Zeichen ‹ ›, nur in den Farben des hellen Grundes */
.bd__arrow {
width: 40px; height: 40px; border-radius: 50%;
border: 1.5px solid rgba(61, 74, 90, 0.4); background: transparent; color: var(--bd-ink);
display: flex; align-items: center; justify-content: center; cursor: pointer;
font-family: var(--bd-text); font-size: 1rem; line-height: 1;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.bd__arrow:hover { background: rgba(61, 74, 90, 0.08); border-color: var(--bd-ink); }
.bd__arrow:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 3px; }
/* ---------- Ohne JavaScript ---------- */
html:not(.js) .bd__tabs, html:not(.js) .bd__nav, html:not(.js) .bd__stack { display: none; }
html:not(.js) .bd__stage { grid-template-columns: minmax(0, 40rem); }
html:not(.js) .bd__panel { grid-area: auto; opacity: 1; visibility: visible; transform: none; margin-bottom: 3.5rem; }
@media (prefers-reduced-motion: reduce) {
.bd__card, .bd__card img, .bd__panel, .bd__tab::after { transition-duration: .01s !important; transition-delay: 0s !important; }
.bd__card.is-to-back, .bd__card.is-to-front { animation: none !important; }
}
/* ============================================================
BÜCHER AM TELEFON (≤ 900 px): Titelseiten
Kein Stapel, keine Reiter: jedes Buch beginnt mit seinem Cover
über die volle Breite und im EIGENEN Format (--bd-ar aus der
Bilddatei) — nichts wird beschnitten. Beschriftung liegt unten
im Bild auf einem weichen Verlauf, das Zitat folgt darunter
auf Stein. Gescrollt wird wie sonst auch.
============================================================ */
.bd__fig, .bd__cap { display: contents; } /* Desktop: unverändert */
.bd__fold, .bd__fold-in { display: contents; }
.bd__mhead, .bd__mclose { display: none; }
.bd__mcover { display: none; }
@media (max-width: 900px) {
.js .bd__tabs, .js .bd__stack, .js .bd__nav { display: none; }
.bd__head { margin-bottom: 1.75rem; }
.js .bd__stage { display: block; }
.js .bd__panels { display: block; }
.js .bd__panel {
grid-area: auto; opacity: 1; visibility: visible; transform: none; align-self: auto;
margin-bottom: 3rem;
}
.js .bd__panel:last-child { margin-bottom: 0; }
.bd__fig {
display: grid; align-items: end;
position: relative; margin: 0 calc(-1 * var(--bd-edge)) 1.5rem;
aspect-ratio: var(--bd-ar); overflow: hidden;
}
.bd__mcover { display: block; grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; }
.bd__fig::after {
content: ""; grid-area: 1/1; align-self: stretch; pointer-events: none;
background: linear-gradient(180deg, rgba(24,30,38,0) 38%, rgba(24,30,38,.28) 62%, rgba(24,30,38,.86) 100%);
}
.bd__cap {
grid-area: 1/1; align-self: end; z-index: 1;
display: flex; flex-direction: column;
padding: 0 var(--bd-edge) 1.4rem; color: #f4f1e6;
}
.bd__cap .bd__label { color: rgba(244,241,230,.8); margin-bottom: .5rem; }
.bd__cap .bd__meta { order: 3; color: rgba(244,241,230,.8); margin: .45rem 0 0; }
.bd__cap .bd__title { color: #f4f1e6; margin: 0; }
/* Buch 1 steht offen. Buch 2 und 3 liegen als ruhige Zeile da und
klappen zur GLEICHEN Titelseite auf. */
.bd__mhead { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--bd-ease), opacity .35s var(--bd-ease); }
.bd__panel.is-open .bd__mhead { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.bd__mhead-in { overflow: hidden; }
.bd__panel + .bd__panel { border-top: 1px solid var(--bd-rule); margin-bottom: 0; }
.bd__panel:has(.bd__mhead):last-child { border-bottom: 1px solid var(--bd-rule); }
.bd__mrow {
width: 100%; display: grid; grid-template-columns: 4.25rem 1fr auto; gap: 1.1rem; align-items: center;
padding: 1.15rem 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.bd__mthumb { height: 5.5rem; display: flex; align-items: flex-end; }
.bd__mthumb img { max-height: 100%; width: 100%; object-fit: contain; object-position: left bottom; }
.bd__mrow-txt { min-width: 0; }
.bd__mtitle { display: block; font-family: var(--bd-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; }
.bd__mlabel { display: block; font-size: .75rem; letter-spacing: .06em; color: var(--bd-ink-soft); margin-top: .2rem; }
.bd__msign, .bd__mclose span {
display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
border: 1.5px solid rgba(61,74,90,.4); font-size: 1.1rem; line-height: 1;
}
.bd__fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--bd-ease); }
.bd__panel.is-open .bd__fold { grid-template-rows: 1fr; }
/* echte Box, sonst kann 0fr nicht schliessen; seitlich um den Rand
erweitert, damit das Cover wie bei Buch 1 randlos bleibt */
.bd__fold-in { display: block; overflow: hidden; min-height: 0; margin: 0 calc(-1 * var(--bd-edge)); padding: 0 var(--bd-edge); }
.bd__mclose {
display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 2rem;
padding: .55rem 0; background: none; border: 0; cursor: pointer;
font: inherit; font-size: .8125rem; font-weight: 600; color: inherit;
}
.bd__panel:has(.bd__mhead) .bd__fig { margin-top: 0; }
/* Knopf ÜBER der Veranstaltung, mittig (06.10.2026, Kundin) — nur am
Telefon; am Rechner bleibt er darunter. Dafür steht der Knopf zweimal
im Markup (.bd__actions--top vor der Pille, der gewohnte danach) und es
ist immer nur einer sichtbar. NICHT per Flex + order umsortieren: als
Flex-Kind verlor das Titelbild (.bd__fig, aspect-ratio) auf Lukes
Telefon seine Höhe und die Unterzeile im Bild wurde abgeschnitten.
2.25rem = 36 px Luft über und unter dem Knopf. */
.bd__actions.bd__actions--top { display: flex; justify-content: center; margin: 2.25rem 0; }
.bd__event + .bd__actions { display: none; }
/* ---------- Telefon (Stapel-Reste) ---------- */
.bd { --bd-edge: clamp(1.25rem, 5vw, 3.5rem); --bd-cover-w: min(58vw, 15rem); }
.bd__stage { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
.bd__stack { order: 1; width: calc(var(--bd-cover-w) * 1.42); }
.bd__nav { order: 2; margin-top: 0; }
.bd__panels { order: 3; margin-top: .75rem; }
.bd__title { font-size: 2rem; }
.bd__title--caps { font-size: 1.55rem; }
.bd__tabs, .bd__head { gap: .5rem 1.25rem; }
}
@media (max-width: 480px) {
.bd__tab { font-size: .6875rem; letter-spacing: .08em; }
.bd__tab-more { display: none; } /* Platz: Reiter 1 nur „So geht Liebe.“ */
}
/* ============================================================
WEICHES SCROLLEN (Startseite) — assets/js/smooth-scroll.js
Mausrad mit Nachlauf wie forpeople.com; Tastatur, Scrollbalken
und Touch bleiben nativ. Solange das Script aktiv ist, übernimmt
es auch die Anker-Sprünge, daher hier kein CSS-smooth.
[data-drift] verschiebt Textblöcke leicht mit dem Scrollen
(über die Eigenschaft `translate`, damit .reveal-Transforms
unberührt bleiben).
============================================================ */
html.has-smooth-scroll { scroll-behavior: auto; }
[data-drift] { will-change: translate; }
@media (prefers-reduced-motion: reduce) {
[data-drift] { translate: none !important; }
}
/* ==========================================================================
IMPRESSUM + DATENSCHUTZ — Fenster über der Startseite
--------------------------------------------------------------------------
Die Links in der Fusszeile öffnen ein