/* ============================================================
Moonjourn V3 - Richtung D "Objekte"
Karten, Papier und Bilder als physische Dinge auf dunklem
Tisch. Serif-Display (Cormorant, passend zur Wortmarke),
Inter als Werksschrift. Gold sparsam: Ziffern, Linien, Marke.
Keine Glas-Karten, kein Glow, keine Gradient-Pills.
Palette gespiegelt aus App src/theme/tokens/colors.ts.
============================================================ */
/* ---------- Fonts (self-hosted, DSGVO) ---------- */
@font-face {
font-family: 'CormorantVar';
src: url('/assets/fonts/CormorantGaramond-Variable-latin.woff2') format('woff2-variations'),
url('/assets/fonts/CormorantGaramond-Variable-latin.woff2') format('woff2');
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
font-family: 'CormorantVar';
src: url('/assets/fonts/CormorantGaramond-Italic-Variable-latin.woff2') format('woff2-variations'),
url('/assets/fonts/CormorantGaramond-Italic-Variable-latin.woff2') format('woff2');
font-weight: 300 700;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
font-family: 'InterVar';
src: url('/assets/fonts/Inter-Variable-latin.woff2') format('woff2-variations'),
url('/assets/fonts/Inter-Variable-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
font-family: 'InterVar';
src: url('/assets/fonts/Inter-Italic-Variable-latin.woff2') format('woff2-variations'),
url('/assets/fonts/Inter-Italic-Variable-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
:root {
/* Nacht (App night.*): der Tisch */
--night-abyss: #08070d;
--night-deep: #0d0b12;
--table: #14121a;
--table-soft: #1c1a26;
/* Gold (App gold.*), sparsam */
--gold: #e9c176;
--gold-muted: #cfa967;
--gold-deep: #c5a059;
--gold-12: rgba(233, 193, 118, 0.12);
--gold-25: rgba(233, 193, 118, 0.25);
/* Papier (App paper.*) */
--paper: #efeade;
--paper-soft: #ddd6c8;
--paper-muted: #d1c5b4;
--paper-faint: #b6ada0;
--paper-dim: #97907f;
--paper-ghost: #8d8577;
--ink: #241a09;
--ink-50: rgba(36, 26, 9, 0.5);
--ink-30: rgba(36, 26, 9, 0.32);
/* Text auf Nacht */
--text: #e5e2e5;
--hairline: rgba(239, 234, 222, 0.12);
/* Typo */
--serif: 'CormorantVar', 'Cormorant Garamond', Georgia, serif;
--sans: 'InterVar', 'Inter', -apple-system, system-ui, sans-serif;
--fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
--fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
--fs-h3: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
--fs-h2: clamp(2.6rem, 1.9rem + 3.1vw, 4.6rem);
--fs-h1: clamp(3.2rem, 2.2rem + 4.8vw, 6.2rem);
/* Layout */
--container: min(1480px, 94vw);
--narrow: min(860px, 94vw);
--edge: clamp(20px, 4vw, 48px);
--section-y: clamp(90px, 6vw + 48px, 170px);
--nav-h: 68px;
/* Objekte */
--r-obj: 10px;
--r-paper: 6px;
--shadow-obj: 0 30px 60px -22px rgba(0, 0, 0, 0.85), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
--shadow-paper: 0 24px 50px -22px rgba(0, 0, 0, 0.8);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; overflow-x: clip; }
body {
/* Die Himmelsreise: oben beim Mond, unten wieder tiefe Nacht */
background-color: var(--night-deep);
background-image: linear-gradient(to bottom,
#08070d 0%, #0e0c15 12%, #12101c 32%, #151226 50%,
#12101c 68%, #0e0c15 86%, #08070d 100%);
color: var(--text);
font-family: var(--sans);
font-size: var(--fs-body);
line-height: 1.7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
:lang(ko) body, :lang(ko) input, :lang(ko) button {
font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', var(--sans);
}
img, video { max-width: 100%; display: block; }
a { color: var(--gold-muted); }
::selection { background: var(--gold-25); color: var(--paper); }
:focus-visible { outline: 2px solid var(--gold-25); outline-offset: 3px; border-radius: 3px; }
/* ---------- Typo-Bausteine ---------- */
.kicker {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--paper-ghost);
margin-bottom: 20px;
}
.title {
font-family: var(--serif);
font-size: var(--fs-h2);
font-weight: 340;
line-height: 1.05;
letter-spacing: 0;
color: var(--paper);
text-wrap: balance;
margin-bottom: 22px;
}
.title em { font-style: italic; font-weight: 340; color: var(--gold); }
.sub {
color: var(--paper-muted);
font-size: var(--fs-lead);
line-height: 1.75;
max-width: 56ch;
}
/* Erzaehlende Absaetze statt Feature-Listen */
.prose .sub + .sub { margin-top: 20px; }
.aside {
display: flex; align-items: center; gap: 14px;
margin-top: 30px;
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
color: var(--paper-dim);
}
.aside::before {
content: '';
width: 34px; height: 1px;
background: var(--gold-deep);
flex: 0 0 auto;
}
:lang(ko) .aside { font-style: normal; }
:lang(ko) .title { font-family: var(--serif); font-weight: 420; }
:lang(ko) .title em { font-style: normal; }
/* ---------- Nav ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 40;
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
padding: 16px var(--edge);
border-bottom: 1px solid transparent;
transition: background 0.4s var(--ease), border-color 0.4s, padding 0.4s var(--ease);
}
.nav.is-scrolled {
padding: 10px var(--edge);
background: rgba(13, 11, 18, 0.78);
border-bottom-color: var(--hairline);
}
.nav__brand img { height: 18px; width: auto; }
.nav__actions { display: flex; align-items: center; gap: 22px; }
.nav__lang { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 550; letter-spacing: 0.12em; }
.nav__lang a { color: var(--paper-dim); text-decoration: none; transition: color 0.25s; }
.nav__lang a:hover { color: var(--paper-muted); }
.nav__lang a.is-active { color: var(--gold); }
.nav__lang .sep { color: var(--hairline); }
.nav__help { font-size: 0.8rem; color: var(--paper-ghost); text-decoration: none; transition: color 0.25s; }
.nav__help:hover { color: var(--text); }
.nav__cta {
font-size: 0.72rem; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--paper); text-decoration: none;
border-bottom: 1px solid var(--gold-deep);
padding-bottom: 3px;
transition: color 0.25s;
}
.nav__cta:hover { color: var(--gold); }
@media (max-width: 720px) {
.nav__help, .nav__cta { display: none; }
}
/* ---------- Objekte und Papier ---------- */
.obj {
border-radius: var(--r-obj);
box-shadow: var(--shadow-obj);
transform: rotate(var(--tilt, 2deg));
}
.obj img { border-radius: var(--r-obj); width: 100%; height: auto; }
.obj--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.paper {
background: var(--paper);
color: var(--ink);
border-radius: var(--r-paper);
box-shadow: var(--shadow-paper);
transform: rotate(var(--tilt, -1.2deg));
}
/* Haupt-CTA: die Papierkarte zum Eintragen */
.cta-main {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--sans);
font-size: 0.78rem; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink);
background: var(--paper);
border: none; cursor: pointer;
padding: 15px 28px;
border-radius: var(--r-paper);
text-decoration: none;
box-shadow: var(--shadow-paper);
transform: rotate(-0.6deg);
transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.cta-main:hover { transform: rotate(0deg) translateY(-2px); }
.cta-main:active { transform: translateY(0); }
.cta-main svg { width: 15px; height: 15px; fill: var(--ink); }
/* Store-Badges: ruhige dunkle Plaketten */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.store-badge {
position: relative;
display: inline-flex; align-items: center; gap: 11px;
padding: 10px 16px;
border: 1px solid var(--hairline);
border-radius: 8px;
color: var(--paper-muted);
text-decoration: none;
background: transparent;
transition: border-color 0.3s, color 0.3s;
}
.store-badge svg { width: 20px; height: 20px; fill: currentColor; opacity: 0.85; }
.store-badge__text { display: flex; flex-direction: column; line-height: 1.25; }
.store-badge__sub { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-ghost); }
.store-badge__main { font-size: 0.9rem; font-weight: 600; color: var(--text); }
a.store-badge:hover { border-color: var(--gold-25); color: var(--text); }
span.store-badge[data-soon]::after {
content: attr(data-soon);
position: absolute; top: -9px; right: 10px;
font-size: 0.56rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink);
background: var(--paper);
padding: 2px 8px; border-radius: 3px;
transform: rotate(2deg);
box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.6);
}
/* ---------- Sections ---------- */
.section { position: relative; padding: var(--section-y) 0; overflow-x: clip; }
.container { width: var(--container); margin-inline: auto; padding-inline: var(--edge); position: relative; z-index: 1; }
.apparition { position: relative; z-index: 1; }
.container--narrow { width: var(--narrow); }
/* Eine durchgehende Buehne: keine Trennlinien zwischen den Momenten */
.rule-bottom { border-bottom: 0; }
/* Telefon mit echtem App-Screen: die App ist das Bild */
.phone {
display: block;
width: clamp(260px, 26vw, 380px);
margin-inline: auto;
border-radius: 38px;
border: 7px solid #191622;
background: #191622;
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px var(--gold-12);
transform: rotate(var(--tilt, 0deg));
}
.phone img { width: 100%; height: auto; border-radius: 31px; display: block; }
.split__media .phone { --tilt: 2deg; }
.split--img-left .split__media .phone { --tilt: -2deg; }
/* ---------- Hero: ein Bild traegt alles, Text zentriert darueber ---------- */
.hero {
position: relative;
min-height: 100svh;
display: flex; align-items: flex-end; justify-content: center;
text-align: center;
overflow: hidden;
padding: calc(var(--nav-h) + 24px) 0 9svh;
}
.hero__bg {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center bottom;
-webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 99%);
mask-image: linear-gradient(to bottom, black 62%, transparent 99%);
}
.hero__scrim {
position: absolute; inset: 0; z-index: 1;
background: radial-gradient(90% 55% at 50% 32%, rgba(8, 7, 13, 0.42), transparent 70%);
pointer-events: none;
}
.hero__inner {
position: relative; z-index: 2;
max-width: 860px;
padding-inline: var(--edge);
display: flex; flex-direction: column; align-items: center;
}
.hero__inner .hero__sub { margin-inline: auto; }
.hero__inner .stores { justify-content: center; }
.hero__wordmark { width: clamp(200px, 22vw, 300px); height: auto; margin-bottom: 26px; }
.hero__headline {
font-family: var(--serif);
font-size: var(--fs-h1);
font-weight: 320;
line-height: 1.0;
color: var(--paper);
margin: 26px 0 24px;
}
.hero__headline em { font-style: italic; color: var(--gold); }
:lang(ko) .hero__headline { font-weight: 420; }
:lang(ko) .hero__headline em { font-style: normal; }
.hero__pill {
display: inline-block;
font-size: 0.64rem; font-weight: 650; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--paper-ghost);
border-bottom: 1px solid var(--gold-deep);
padding-bottom: 4px;
}
.hero__sub {
color: var(--paper-muted);
font-size: var(--fs-lead);
line-height: 1.75;
max-width: 46ch;
margin-bottom: 32px;
}
.apparition--wide { width: min(1380px, 98vw); margin-top: 0; }
/* ---------- Purpose ---------- */
.purpose .container {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(48px, 6vw, 110px);
align-items: start;
}
.purpose__head { position: sticky; top: calc(var(--nav-h) + 28px); }
.purpose__lead { color: var(--paper-muted); font-size: var(--fs-lead); line-height: 1.75; margin: 0 0 28px; max-width: 44ch; }
.pillars { list-style: none; counter-reset: pillar; }
.pillars li {
counter-increment: pillar;
position: relative;
padding: 20px 0 20px 60px;
border-bottom: 1px solid var(--hairline);
color: var(--paper-muted);
font-size: var(--fs-body);
line-height: 1.7;
}
.pillars li::before {
content: '0' counter(pillar);
position: absolute;
left: 0; top: 20px;
font-family: var(--serif);
font-size: 1.3rem;
color: var(--gold-muted);
line-height: 1.3;
}
.pillars li:first-child { border-top: 1px solid var(--hairline); }
.pillars strong { color: var(--paper); font-weight: 600; }
@media (max-width: 900px) {
.purpose .container { grid-template-columns: 1fr; }
.purpose__head { position: static; }
}
/* ---------- Editorial Split (Objekt + Text) ---------- */
.split .container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(48px, 6vw, 110px);
align-items: center;
}
.split--img-right .split__media { order: 2; }
.split__media { position: relative; }
.split__media .obj { width: 100%; }
.split--img-left .split__media .obj { --tilt: -2.4deg; }
.split--img-right .split__media .obj { --tilt: 2.4deg; }
@media (max-width: 900px) {
.split .container { grid-template-columns: 1fr !important; }
.split--img-right .split__media { order: 0; }
.split__media .obj { width: min(440px, 92%); margin-inline: auto; }
}
/* ---------- Feature-Listen ---------- */
/* Editorial-Index: Hairlines, Serif-Ziffer, kein Kasten */
.feat-lines { list-style: none; margin-top: 36px; }
.feat-lines li {
display: grid;
grid-template-columns: minmax(130px, 200px) 1fr;
gap: 20px;
padding: 14px 0;
border-bottom: 1px solid var(--hairline);
align-items: baseline;
}
.feat-lines li:first-child { border-top: 1px solid var(--hairline); }
.feat-lines strong { color: var(--paper); font-weight: 600; font-size: 0.92rem; }
.feat-lines p { color: var(--paper-ghost); font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 560px) { .feat-lines li { grid-template-columns: 1fr; gap: 4px; } }
/* Zwei-Spalten-Index fuer breite Sektionen */
.feat-cols {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: clamp(32px, 4vw, 72px);
margin-top: 40px;
}
.feat-cols li { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.feat-cols li:nth-child(-n+2) { border-top: 1px solid var(--hairline); }
.feat-cols strong { display: block; color: var(--paper); font-weight: 600; font-size: 0.92rem; margin-bottom: 4px; }
.feat-cols p { color: var(--paper-ghost); font-size: 0.88rem; line-height: 1.6; }
@media (max-width: 720px) {
.feat-cols { grid-template-columns: 1fr; }
.feat-cols li:nth-child(-n+2) { border-top: 0; }
.feat-cols li:first-child { border-top: 1px solid var(--hairline); }
}
/* Papier-Notizen: wenige, als Objekte */
.feat-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 40px; }
.feat-notes li {
background: var(--paper);
color: var(--ink);
border-radius: var(--r-paper);
box-shadow: var(--shadow-paper);
padding: 18px 20px;
max-width: 300px;
transform: rotate(var(--tilt, -1deg));
}
.feat-notes li:nth-child(2n) { --tilt: 1.1deg; }
.feat-notes li:nth-child(3n) { --tilt: -0.5deg; }
.feat-notes strong { display: block; font-weight: 650; font-size: 0.92rem; margin-bottom: 4px; }
.feat-notes p { color: rgba(36, 26, 9, 0.72); font-size: 0.85rem; line-height: 1.55; }
/* ---------- Orakel ---------- */
.oracle-sec { background: transparent; overflow: hidden; }
.oracle-sec .container--narrow { text-align: center; }
.oracle-sec .sub { margin-inline: auto; }
.oracle-sec .feat-cols { text-align: left; }
/* ---------- Mond ---------- */
.moon-sec .container {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(48px, 6vw, 110px);
align-items: center;
}
.moon-ring {
position: relative;
width: clamp(240px, 25vw, 330px);
aspect-ratio: 1;
margin-inline: auto;
border-radius: 50%;
border: 1px solid var(--gold-deep);
padding: 12px;
box-shadow: var(--shadow-obj);
background: var(--night-abyss);
}
.moon-ring video, .moon-ring img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
}
@media (max-width: 900px) {
.moon-sec .container { grid-template-columns: 1fr; }
}
/* ---------- Natal ---------- */
.natal-sec { overflow: hidden; text-align: center; }
.natal-sec .sub { margin-inline: auto; }
.natal__planet {
position: absolute;
width: clamp(80px, 9vw, 140px); height: auto;
filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.6));
pointer-events: none;
}
.natal__planet--sun { top: 10%; right: 7%; transform: rotate(8deg); }
.natal__planet--moon { bottom: 12%; right: 20%; width: clamp(60px, 7vw, 100px); transform: rotate(-6deg); }
@media (max-width: 720px) { .natal__planet { display: none; } }
/* ---------- Programme: Polaroids ---------- */
.pfad-sec .container--head { margin-bottom: 48px; }
.programs {
display: flex; gap: 26px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding: 16px var(--edge) 40px;
width: var(--container);
margin-inline: auto;
scrollbar-width: thin;
scrollbar-color: var(--gold-deep) transparent;
}
.programs::-webkit-scrollbar { height: 4px; }
.programs::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 2px; }
.program {
flex: 0 0 clamp(200px, 22vw, 244px);
background: var(--paper);
border-radius: var(--r-paper);
box-shadow: var(--shadow-paper);
padding: 10px 10px 16px;
scroll-snap-align: start;
transform: rotate(var(--tilt, -1.4deg));
transition: transform 0.35s var(--ease);
display: flex; flex-direction: column;
}
.program:nth-child(2n) { --tilt: 1.2deg; }
.program:nth-child(3n) { --tilt: -0.6deg; }
.program:hover { transform: rotate(0deg) translateY(-6px); }
.program__img {
aspect-ratio: 704 / 860;
border-radius: 3px;
background-image: var(--pbg);
background-size: cover; background-position: center top;
margin-bottom: 12px;
}
.program__days {
font-size: 0.6rem; font-weight: 650; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-50);
padding: 0 6px 2px;
}
.program strong {
font-family: var(--serif);
color: var(--ink); font-weight: 500; font-size: 1.25rem; line-height: 1.2;
padding: 0 6px 4px;
}
.program p { color: rgba(36, 26, 9, 0.65); font-size: 0.8rem; line-height: 1.5; padding: 0 6px; }
/* ---------- Safespace ---------- */
.safespace {
background: transparent;
text-align: center;
padding: calc(var(--section-y) * 1.2) 0;
}
.safespace .title { font-size: var(--fs-h2); }
.safespace .sub { margin-inline: auto; }
/* ---------- Finale: Das Tor ---------- */
/* Die Landung: die Nachtlandschaft waechst aus dem Himmel, ein Gemaelde */
.gate {
position: relative; overflow: hidden;
min-height: 108svh;
display: flex; flex-direction: column; justify-content: flex-start;
padding: calc(var(--section-y) * 0.9) 0 46svh;
background: transparent; text-align: center;
}
.gate__bg {
position: absolute; left: 0; right: 0; bottom: -2px; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center bottom;
}
.gate__fade {
position: absolute; top: -2px; left: 0; right: 0; z-index: 0;
height: 48%;
background: linear-gradient(to bottom, #0e0c15 0%, rgba(14, 12, 21, 0.9) 30%, rgba(14, 12, 21, 0.45) 62%, transparent 100%);
pointer-events: none;
}
.gate .container--narrow { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.gate .stores { justify-content: center; }
.gate .container {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(48px, 6vw, 110px);
align-items: center;
}
.gate__title {
font-family: var(--serif);
font-size: var(--fs-h2);
font-weight: 320;
line-height: 1.05;
color: var(--paper);
margin-bottom: 14px;
}
.gate__sub { color: var(--paper-muted); margin-bottom: 30px; }
.gate__media .obj { --tilt: 2deg; width: min(460px, 100%); justify-self: end; }
@media (max-width: 900px) {
.gate .container { grid-template-columns: 1fr; }
.gate__media .obj { width: min(400px, 88%); margin-inline: auto; }
}
/* ---------- Hilfe-Banner ---------- */
.hilfe-banner {
background: var(--night-deep);
border-top: 1px solid var(--hairline);
text-align: center;
padding: 15px var(--edge);
}
.hilfe-banner a { color: var(--paper-ghost); text-decoration: none; font-size: 0.86rem; transition: color 0.25s; }
.hilfe-banner a:hover { color: var(--text); }
.hilfe-banner .arrow { color: var(--gold-muted); margin: 0 4px; }
/* ---------- Footer ---------- */
.footer {
background: var(--night-abyss);
border-top: 1px solid var(--hairline);
padding: 60px 0 48px;
}
.footer__inner {
width: var(--container); margin-inline: auto; padding-inline: var(--edge);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
}
.footer__left { color: var(--paper-ghost); font-size: 0.86rem; line-height: 1.8; }
.footer__left img { height: 15px; width: auto; margin-bottom: 12px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.footer__nav a { color: var(--paper-ghost); text-decoration: none; font-size: 0.86rem; transition: color 0.25s; }
.footer__nav a:hover { color: var(--gold); }
.footer__fine {
width: min(820px, 92vw); margin: 32px auto 0; padding-inline: var(--edge);
color: var(--paper-dim); font-size: 0.78rem; line-height: 1.7; text-align: center;
}
.footer__fine a { color: var(--gold-muted); }
/* ---------- Waitlist-Modal: Papierkarte ---------- */
.waitlist-modal {
position: fixed; inset: 0; z-index: 60;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(8, 7, 13, 0.82);
opacity: 0; pointer-events: none;
transition: opacity 0.3s var(--ease);
}
.waitlist-modal.is-open { opacity: 1; pointer-events: auto; }
.waitlist-modal__panel {
position: relative;
width: min(440px, 100%);
background: var(--paper);
color: var(--ink);
border-radius: var(--r-paper);
padding: 40px 36px 32px;
box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.95);
transform: rotate(-1deg) translateY(12px);
transition: transform 0.3s var(--ease);
}
.waitlist-modal.is-open .waitlist-modal__panel { transform: rotate(-1deg) translateY(0); }
.waitlist-modal__close {
position: absolute; top: 12px; right: 16px;
background: none; border: none; cursor: pointer;
color: var(--ink-50); font-size: 1.5rem; line-height: 1;
transition: color 0.25s;
}
.waitlist-modal__close:hover { color: var(--ink); }
.waitlist-modal__kicker {
font-size: 0.62rem; font-weight: 650; letter-spacing: 0.28em; text-transform: uppercase;
color: #9a6b2f; margin-bottom: 14px;
}
.waitlist-modal__title {
font-family: var(--serif);
font-size: 1.9rem; font-weight: 420; line-height: 1.15;
color: var(--ink); margin-bottom: 12px;
}
.waitlist-modal__title em { font-style: italic; }
:lang(ko) .waitlist-modal__title em { font-style: normal; }
.waitlist-modal__sub { color: rgba(36, 26, 9, 0.65); font-size: 0.88rem; line-height: 1.6; margin-bottom: 24px; }
.waitlist-form { display: flex; flex-direction: column; gap: 14px; }
.waitlist-form input[type="email"],
.waitlist-form input[type="text"] {
font-family: inherit; font-size: 0.95rem;
color: var(--ink);
background: transparent;
border: 0; border-bottom: 1px solid var(--ink-30);
border-radius: 0;
padding: 8px 2px;
transition: border-color 0.25s;
}
.waitlist-form input:focus { outline: none; border-bottom-color: var(--ink); }
.waitlist-form input::placeholder { color: var(--ink-50); }
.waitlist-form button[type="submit"] {
align-self: flex-start;
font-family: inherit;
font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ink);
background: none; border: none; cursor: pointer;
border-bottom: 2px solid var(--ink);
padding: 0 0 3px;
margin-top: 10px;
transition: color 0.2s, border-color 0.2s;
}
.waitlist-form button[type="submit"]:hover { color: #9a6b2f; border-color: #9a6b2f; }
.waitlist-form button[type="submit"]:disabled { opacity: 0.5; cursor: wait; }
.waitlist-form__legal { font-size: 0.7rem; color: var(--ink-50); }
.waitlist-form__legal a { color: #9a6b2f; }
.waitlist-form__msg { font-size: 0.85rem; min-height: 1.4em; }
.waitlist-form__msg.is-success { color: #4a6b3a; }
.waitlist-form__msg.is-error { color: #93000A; }
/* ============================================================
Erlebnis-Schicht: Nachtschwaden, Kerzenlicht, Sternschnuppe,
Kartenfaecher, atmendes Tor. Alles dezent, alles abschaltbar
(reduced motion), nichts davon traegt Inhalt.
============================================================ */
/* Sternenhimmel ueber der ganzen Reise */
body::before {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(1.5px 1.5px at 11% 21%, rgba(255, 222, 165, 0.7) 50%, transparent 50%),
radial-gradient(1px 1px at 76% 12%, rgba(255, 255, 255, 0.55) 50%, transparent 50%),
radial-gradient(2px 2px at 89% 55%, rgba(233, 193, 118, 0.6) 50%, transparent 50%),
radial-gradient(1px 1px at 33% 74%, rgba(255, 255, 255, 0.4) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 54% 36%, rgba(233, 193, 118, 0.5) 50%, transparent 50%),
radial-gradient(1px 1px at 20% 55%, rgba(255, 255, 255, 0.35) 50%, transparent 50%),
radial-gradient(2px 2px at 66% 82%, rgba(255, 255, 255, 0.38) 50%, transparent 50%),
radial-gradient(1px 1px at 44% 8%, rgba(233, 193, 118, 0.45) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 94% 30%, rgba(255, 255, 255, 0.32) 50%, transparent 50%),
radial-gradient(1px 1px at 6% 88%, rgba(233, 193, 118, 0.4) 50%, transparent 50%),
radial-gradient(1px 1px at 28% 40%, rgba(255, 255, 255, 0.3) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 60% 62%, rgba(255, 222, 165, 0.4) 50%, transparent 50%),
radial-gradient(1px 1px at 83% 76%, rgba(255, 255, 255, 0.28) 50%, transparent 50%),
radial-gradient(1px 1px at 15% 8%, rgba(255, 255, 255, 0.3) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 40% 92%, rgba(233, 193, 118, 0.35) 50%, transparent 50%),
radial-gradient(1px 1px at 70% 28%, rgba(255, 255, 255, 0.26) 50%, transparent 50%);
animation: twinkle 8s ease-in-out infinite alternate;
}
/* Himmel-Baender: gemalte Hintergrundflaechen ueber die ganze Reise */
.skyband {
position: absolute; left: 50%; z-index: 0;
margin-left: calc(-1 * max(50vw, 950px));
width: max(100vw, 1900px);
height: auto;
pointer-events: none;
opacity: 0.85;
will-change: transform;
}
.skyband--top { top: 0; }
.skyband--bottom { bottom: 0; }
.skyband--mid { top: 12%; }
/* Uebergangswolke: liegt vor der Sektion und zieht beim Scrollen weg */
.drift {
position: absolute; z-index: 3;
width: clamp(620px, 72vw, 1400px);
pointer-events: none;
will-change: transform;
height: auto;
opacity: 1;
}
.drift--l { left: -8%; }
.drift--r { right: -8%; }
.drift--top { top: -60px; }
@media (max-width: 720px) { .drift { opacity: 0.55; } }
main, .nav, .footer, .hilfe-banner { position: relative; z-index: 1; }
#dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* Kerzenlicht: folgt dem Cursor wie ein warmes Licht ueber dem Tisch */
#candle {
position: fixed; top: 0; left: 0; z-index: 2;
width: 560px; height: 560px;
margin: -280px 0 0 -280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233, 193, 118, 0.07), rgba(233, 193, 118, 0.02) 40%, transparent 65%);
mix-blend-mode: screen;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s ease;
}
@media (hover: none), (pointer: coarse) { #candle { display: none; } }
/* Erscheinungen: gemalte Bilder mit Nacht-Raendern, frei schwebend */
.apparition { display: block; width: min(1300px, 96vw); margin: 56px auto 0; }
.apparition img {
width: 100%; height: auto;
-webkit-mask-image: radial-gradient(52% 52% at 50% 50%, black 42%, transparent 97%);
mask-image: radial-gradient(52% 52% at 50% 50%, black 42%, transparent 97%);
}
.split__media .apparition { margin: 0; width: 100%; }
/* Wolkendecke am unteren Hero-Rand: wir starten ueber den Wolken */
.hero-bank {
position: absolute; z-index: 1;
left: -5%; right: -5%; bottom: -12%;
width: 110%; height: auto;
opacity: 0.9;
pointer-events: none;
will-change: transform;
}
/* Gemalte Nachtwolken (KIE, auf Schwarz) ziehen als Licht durchs Bild */
.cloud {
position: absolute; z-index: 0;
pointer-events: none;
will-change: transform;
height: auto;
}
.cloud--1 { top: 2%; left: -6%; width: clamp(380px, 44vw, 700px); opacity: 0.5; }
.cloud--2 { top: 34%; right: -12%; width: clamp(420px, 52vw, 820px); opacity: 0.38; }
@media (max-width: 720px) { .cloud--2 { display: none; } }
/* Die gemalte Mondsichel wacht ueber dem Hero */
.crescent {
position: absolute; z-index: 0;
top: 7%; right: 9%;
width: clamp(110px, 13vw, 200px); height: auto;
pointer-events: none;
will-change: transform;
}
@media (max-width: 900px) { .crescent { top: 4%; right: 6%; width: clamp(90px, 18vw, 130px); } }
/* Sternschnuppe im Hero: selten, fein, schnell */
.shooting-star {
position: absolute; z-index: 0;
top: 16%; left: -8%;
width: 110px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 222, 165, 0.9));
border-radius: 1px;
opacity: 0;
transform: rotate(9deg);
animation: shoot 17s linear infinite;
animation-delay: 5s;
pointer-events: none;
}
@keyframes shoot {
0% { opacity: 0; transform: translate(0, 0) rotate(9deg); }
3% { opacity: 0.9; }
9% { opacity: 0; transform: translate(58vw, 9vw) rotate(9deg); }
100% { opacity: 0; transform: translate(58vw, 9vw) rotate(9deg); }
}
/* Kartenfaecher: der echte App-Kartenruecken, faechert sich beim Scrollen auf */
.fan {
position: relative;
height: clamp(320px, 28vw, 430px);
pointer-events: none;
}
.fan img {
position: absolute;
left: 50%; bottom: 0;
width: clamp(145px, 13vw, 190px);
height: auto;
margin-left: clamp(-95px, -6.5vw, -72px);
border-radius: 12px;
box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.9);
transform-origin: 50% 115%;
transform: rotate(var(--fr, 0deg));
}
/* Endzustand ohne JS: bereits aufgefaechert */
.fan img:nth-child(1) { --fr: -16deg; }
.fan img:nth-child(2) { --fr: -8deg; }
.fan img:nth-child(3) { --fr: 0deg; }
.fan img:nth-child(4) { --fr: 8deg; }
.fan img:nth-child(5) { --fr: 16deg; }
/* Mond-Sektion: still funkelnde Sterne */
.moon-sec { position: relative; overflow: hidden; }
.moon-sec::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(1px 1px at 12% 24%, rgba(255, 222, 165, 0.5) 50%, transparent 50%),
radial-gradient(1px 1px at 78% 14%, rgba(255, 255, 255, 0.35) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 88% 62%, rgba(233, 193, 118, 0.4) 50%, transparent 50%),
radial-gradient(1px 1px at 34% 78%, rgba(255, 255, 255, 0.25) 50%, transparent 50%),
radial-gradient(1px 1px at 55% 38%, rgba(233, 193, 118, 0.3) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 8% 66%, rgba(255, 255, 255, 0.22) 50%, transparent 50%);
animation: twinkle 7s ease-in-out infinite alternate;
}
.moon-sec .container { position: relative; }
@keyframes twinkle { from { opacity: 0.45; } to { opacity: 1; } }
/* Das Tor atmet: warmes Licht hinter dem Objekt */
.gate__media { position: relative; }
.gate__glow {
position: absolute; inset: -12%;
background: radial-gradient(circle at 50% 60%, rgba(233, 193, 118, 0.16), transparent 60%);
filter: blur(30px);
animation: breathe 7s ease-in-out infinite;
pointer-events: none;
}
@keyframes breathe {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
/* Objekte reagieren auf die Hand */
@media (hover: hover) and (pointer: fine) {
.split__media .obj { transition: transform 0.5s var(--ease); }
.split__media .obj:hover { transform: rotate(var(--tilt)) translateY(-5px); }
}
.hero__object { will-change: transform; }
/* ---------- Reveals ---------- */
[data-reveal] { will-change: transform, opacity; }
/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
EIN GEMAELDE (22.08.2026): Der Himmel ist eine einzige fixe
Buehne fuer die ganze Seite. Keine Sektions-Hintergruende,
keine Karten. Inhalte gleiten frei ueber Sterne und Wolken,
die unabhaengig von jedem Block vorbeischweben.
============================================================ */
#sky {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
}
.sky__cloud {
position: absolute; left: 0;
top: var(--t, 40%);
width: var(--w, 40vw);
height: auto;
opacity: var(--o, 0.85);
will-change: transform;
}
@media (max-width: 720px) { .sky__cloud { width: calc(var(--w, 40vw) * 1.6); } }
/* Hero und Landung liegen als Gemaelde ueber dem Himmel */
.hero, .gate { z-index: 2; }
.hero { isolation: isolate; }
/* Rhythmus statt Gleichtakt: grosszuegiger, und nicht jede Sektion gleich */
:root { --section-y: clamp(140px, 9vw + 70px, 260px); }
.purpose { padding-top: clamp(110px, 8vw + 40px, 190px); }
.section.oracle-sec { padding-bottom: clamp(160px, 12vw + 60px, 320px); }
.moon-sec { padding-top: clamp(80px, 5vw + 30px, 150px); }
.natal-sec { padding-bottom: clamp(180px, 12vw + 80px, 340px); }
.pfad-sec { padding-top: clamp(100px, 7vw + 40px, 200px); }
.safespace { padding: clamp(200px, 14vw + 80px, 380px) 0; }
/* Erscheinungen atmen: Abstand zum Text, leichte Versetzung aus der Mitte */
.apparition { margin-top: clamp(56px, 5vw, 96px); }
.oracle-sec .apparition { margin-top: clamp(64px, 6vw, 120px); }
.natal-sec .apparition { width: min(1100px, 92vw); }
.moon-sec .apparition { width: min(1200px, 100%); }
.split__media .apparition { margin-top: 0; }
/* Telefone: leichter, kein Karten-Look */
.phone { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85); border-color: #15121d; background: #15121d; }
/* Nav: transparent bleiben, so lange es geht */
.nav.is-scrolled { background: rgba(10, 8, 16, 0.62); }
/* Landung: Titel darf atmen, Text bleibt ueber dem Gemaelde lesbar */
.gate .container--narrow { max-width: 820px; }
.gate__title { text-wrap: balance; text-shadow: 0 2px 28px rgba(8, 7, 13, 0.85); }
.gate__sub { color: var(--paper); opacity: 0.9; text-shadow: 0 1px 18px rgba(8, 7, 13, 0.9); }
/* Keine Kaesten auf dem Himmel: Notizen werden zu Zeilen mit Haarlinie */
.feat-notes { flex-direction: column; gap: 0; margin-top: 34px; max-width: 520px; }
.feat-notes li { background: none; box-shadow: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 14px 0; transform: none; --tilt: 0deg; width: auto; }
.feat-notes li:first-child { border-top: 1px solid var(--hairline); }
.feat-notes strong { color: var(--paper); }
.feat-notes p { color: var(--paper-ghost); }
/* Die Stores tragen das "Bald" schon, die Pill ueber dem Mond stoert */
.hero__pill { display: none; }
.gate .container.container--narrow { display: flex; grid-template-columns: none; width: min(820px, 92vw); margin-inline: auto; }
/* ===== 23.08. Runde 2: Ein Gemaelde, kein Schlauch ===== */
/* Hero oeffnet sich lang in den Himmel: der Mond steht oben, der Text
auf Augenhoehe, darunter loest sich das Bild ueber eine halbe
Bildschirmhoehe in den Nachtverlauf auf, in dem die Wolken schweben. */
.hero { min-height: 150svh; padding-bottom: 50svh; }
.hero__bg {
-webkit-mask-image: linear-gradient(to bottom, black 34%, rgba(0, 0, 0, 0.55) 60%, transparent 96%);
mask-image: linear-gradient(to bottom, black 34%, rgba(0, 0, 0, 0.55) 60%, transparent 96%);
}
.hero::before {
content: ""; position: absolute; z-index: 1; pointer-events: none;
left: 50%; top: 27%; width: min(56vw, 760px); aspect-ratio: 1;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(233, 193, 118, 0.20) 0%, rgba(233, 193, 118, 0.07) 38%, transparent 68%);
animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow { from { opacity: 0.7; transform: translate(-50%, -50%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
/* Landung waechst von unten aus dem Himmel: oben durchsichtig, unten
dicht, der Text steht auf der Schwelle dazwischen. */
.gate { min-height: 125svh; padding: 42svh 0 34svh; justify-content: center; }
.gate__bg {
height: auto; min-height: 74svh; max-height: 100%;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 32%, black 62%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 32%, black 62%);
}
.gate__fade { display: none; }
/* Meteore im Himmel */
.meteor {
position: absolute; width: 140px; height: 1.5px; left: var(--x); top: var(--y);
background: linear-gradient(to left, rgba(239, 234, 222, 0.95), rgba(239, 234, 222, 0));
border-radius: 2px; transform-origin: right center; opacity: 0;
transform: rotate(var(--r, -24deg)) translateX(0);
animation: meteor var(--d, 1.3s) ease-out forwards;
}
@keyframes meteor {
0% { opacity: 0; transform: rotate(var(--r, -24deg)) translateX(0); }
12% { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--r, -24deg)) translateX(-52vw); }
}
/* Erscheinungen atmen */
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.apparition img { animation: floaty 8s ease-in-out infinite alternate; }
.split--img-left .apparition img, .moon-sec .apparition img { animation-duration: 10s; animation-delay: -4s; }
/* Desktop nutzt die Flaeche: Bilder greifen ueber ihre Spalte hinaus,
Text wird groesser, Splits kippen asymmetrisch. */
@media (min-width: 1100px) {
:root { --fs-h2: clamp(3rem, 2rem + 3.4vw, 5.6rem); --fs-lead: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); }
.split .container { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(40px, 4vw, 80px); }
.split--img-left .container { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.phone { width: clamp(320px, 30vw, 470px); }
.split__media .apparition { width: 132%; margin-left: -16%; }
.split--img-left .split__media .apparition { margin-left: -16%; }
.split__media .phone { --tilt: 3deg; margin-right: 6%; }
.split--img-left .split__media .phone { --tilt: -3deg; margin-left: 6%; }
.sub { max-width: 60ch; }
.apparition { width: min(1560px, 98vw); }
.oracle-sec .container--narrow, .natal-sec .container--narrow, .safespace .container--narrow { width: min(1000px, 94vw); }
.moon-sec .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.gate .container.container--narrow { width: min(900px, 92vw); }
}
@media (prefers-reduced-motion: reduce) { .hero::before, .apparition img, .meteor { animation: none; } }
@media (max-width: 900px) {
.hero { min-height: 118svh; padding-bottom: 20svh; }
.hero::before { width: 110vw; top: 24%; }
.gate { min-height: 110svh; padding: 28svh 0 30svh; }
.gate__bg { min-height: 62svh; }
}
/* ===== 23.08. Runde 3: AAA ===== */
/* Filmkorn ueber allem, damit Flaechen nicht digital-glatt wirken */
body::after {
content: ""; position: fixed; inset: -10%; z-index: 60; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px; opacity: 0.05;
}
.nav.is-scrolled { backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }
/* Wort-Reveals: Woerter sind eigene Elemente, damit sie nacheinander aufsteigen */
.w { display: inline-block; will-change: transform, opacity; }
.title, .hero__headline { perspective: 800px; }
/* Hero: Text schwebt beim Scrollen nach oben davon */
.hero__inner { will-change: transform, opacity; }
/* Tarot: die gezogene Karte steigt aus dem Faecher */
.fan { height: clamp(380px, 32vw, 520px); }
.fan__draw {
z-index: 2; border-radius: 12px;
box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.95), 0 0 0 rgba(233, 193, 118, 0);
}
/* Orakel: die Szene liegt auf der Erscheinung, der Scroll bringt die Antwort */
.oracle-stage { position: relative; }
.oracle-scene {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0 var(--edge); text-align: center;
}
.oracle-scene__q {
font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
color: var(--paper); text-shadow: 0 2px 24px rgba(8, 7, 13, 0.9); max-width: 26ch; margin-bottom: 26px;
}
.oracle-scene__label {
display: block; font-family: var(--sans); font-style: normal; font-size: 0.68rem; letter-spacing: 0.32em;
text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.oracle-scene__a { max-width: 48ch; }
.oracle-scene__line {
font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); line-height: 1.7; color: var(--paper);
text-shadow: 0 1px 18px rgba(8, 7, 13, 0.95); margin-bottom: 14px;
}
.oracle-scene__line--step { color: var(--gold-muted, var(--gold)); font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }
.oracle-scene__line, .oracle-scene__q { opacity: 0; }
.oracle-sec .apparition { margin-top: clamp(40px, 4vw, 80px); }
.oracle-stage .apparition img {
-webkit-mask-image: radial-gradient(52% 52% at 50% 50%, black 30%, transparent 95%);
mask-image: radial-gradient(52% 52% at 50% 50%, black 30%, transparent 95%);
}
/* Astrologie: das Phone bleibt stehen, die Geschichte zieht daran vorbei */
.astro-story .container { align-items: start; }
.astro-story .split__media { position: sticky; top: calc(var(--nav-h) + 36px); align-self: start; }
.story-step { margin-top: clamp(140px, 16vw, 280px); }
.natal-sec { padding-top: 0; }
.natal-sec .apparition { margin-top: clamp(20px, 3vw, 60px); }
/* Typografischer Bruch: ein Wort so gross wie der Himmel */
.break-word {
overflow: hidden; padding: clamp(20px, 4vw, 60px) 0 0; line-height: 0.9; user-select: none; white-space: nowrap;
}
.break-word span {
display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: clamp(6rem, 16vw, 19rem); color: transparent;
-webkit-text-stroke: 1px rgba(233, 193, 118, 0.42); padding-left: 4vw;
}
:lang(ko) .break-word span { font-style: normal; font-weight: 400; }
/* Programme: auf dem Desktop als horizontale Fahrt, das Sticky macht GSAP */
@media (min-width: 1100px) {
.pfad-sec { overflow: hidden; }
.programs { overflow: visible; padding-right: 12vw; width: max-content; }
.pfad-sec .container--head { margin-bottom: clamp(40px, 5vw, 80px); }
}
/* Phones neigen sich zur Hand */
.phone { transform-style: preserve-3d; }
/* Magnetische Knoepfe: GSAP schreibt den Transform, Hover nur noch Schatten */
.cta-main:hover { transform: none; box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(233, 193, 118, 0.25) inset; }
.cta-main::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
transform: translateX(-120%); transition: transform 0.8s var(--ease);
}
.cta-main { position: relative; overflow: hidden; }
.cta-main:hover::after { transform: translateX(120%); }
/* Safespace: der Satz leuchtet beim Lesen auf */
.safespace .sub .w { opacity: 0.22; }
@media (max-width: 900px) {
.oracle-scene__q { font-size: 1.25rem; margin-bottom: 14px; }
.oracle-scene__line { font-size: 0.92rem; margin-bottom: 8px; }
.astro-story .split__media { position: static; }
.story-step { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
.oracle-scene__line, .oracle-scene__q { opacity: 1; }
.safespace .sub .w { opacity: 1; }
}
/* Orakel-Szene: Text sitzt auf der Brust, nicht im Gesicht, mit weichem Schatten dahinter */
.oracle-scene { justify-content: flex-end; padding-bottom: 6%; }
.oracle-scene::before {
content: ""; position: absolute; left: 50%; bottom: 0; width: min(900px, 90%); height: 62%;
transform: translateX(-50%); z-index: -1;
background: radial-gradient(60% 60% at 50% 60%, rgba(8, 7, 13, 0.78), rgba(8, 7, 13, 0.45) 55%, transparent 100%);
}
.oracle-scene__line { font-size: clamp(1.02rem, 0.92rem + 0.45vw, 1.25rem); }
.fan { height: clamp(420px, 36vw, 600px); }
.fan__draw { bottom: 40px; }
@media (min-width: 1100px) {
.pfad-sec { padding-top: clamp(48px, 4vw, 80px); padding-bottom: clamp(48px, 4vw, 80px); }
.pfad-sec .container--head { margin-bottom: clamp(28px, 3vw, 48px); }
.pfad-sec .container--head .sub { max-width: 52ch; }
}
/* ===== 23.08. Runde 4: nach der Zielgruppen-Recherche ===== */
/* Vertrauenszeile unter den Stores */
.hero__trust { margin-top: 18px; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--paper-ghost); }
/* Fuer wen: Litanei in Serif, kein Raster */
.fit { padding-top: clamp(40px, 5vw, 90px); }
.fit .container--narrow { text-align: center; }
.fit__list { list-style: none; margin: clamp(28px, 3vw, 44px) auto 0; max-width: 34ch; padding: 0; }
.fit__list li {
font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem); font-weight: 340; line-height: 1.35;
color: var(--paper); padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--hairline);
}
.fit__list li::before { content: "\2026 "; color: var(--gold); }
.fit__list li:first-child { border-top: 1px solid var(--hairline); }
.fit__aside { justify-content: center; margin-top: 28px; color: var(--paper-muted); }
:lang(ko) .fit__list li { font-weight: 400; }
/* Mikro-CTAs: leise Textlinks mit Goldstrich, kein zweiter Knopf */
.micro-cta { position: relative; z-index: 2; text-align: center; margin-top: clamp(36px, 4vw, 64px); }
.micro-cta--left { text-align: left; width: var(--container); margin-inline: auto; padding-inline: var(--edge); }
.link-cta {
background: none; border: 0; cursor: pointer; font-family: var(--serif); font-style: italic;
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--paper);
padding: 6px 0; border-bottom: 1px solid var(--gold); transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-cta:hover { color: var(--gold); border-color: transparent; }
:lang(ko) .link-cta { font-style: normal; }
/* Sticky-CTA nur auf Mobile */
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; justify-content: center;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: linear-gradient(to top, rgba(8, 7, 13, 0.92), rgba(8, 7, 13, 0));
transform: translateY(110%); transition: transform 0.45s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta button {
width: 100%; max-width: 420px; font-family: var(--sans); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink); background: var(--paper); border: 0; border-radius: var(--r-paper); padding: 15px 20px; box-shadow: var(--shadow-paper);
}
@media (max-width: 900px) { .sticky-cta { display: flex; } }
/* Bestaetigung im Modal */
.waitlist-form__msg.is-done { text-align: left; margin-top: 6px; }
.done__title { font-family: var(--serif); font-size: 1.8rem; font-weight: 340; color: var(--ink); margin-bottom: 10px; }
.done__text { color: rgba(36, 26, 9, 0.78); line-height: 1.6; margin-bottom: 18px; }
.done__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.done__btn {
display: inline-block; font-family: var(--sans); font-size: 0.74rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: 6px; padding: 11px 16px; text-decoration: none; cursor: pointer;
}
.done__btn--ghost { background: transparent; color: var(--ink); }
/* Safespace-Szene */
.safespace .apparition { width: min(1100px, 94vw); margin-top: clamp(40px, 5vw, 90px); }
[data-section="gemeinsam"] .split__media .apparition { width: 120%; margin-left: -10%; }
.fit__list { max-width: 46ch; }
.fit__list li { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.85rem); }
.hero__trust { text-align: center; }
/* ===== 23.08. Runde 5: raus aus dem Schlauch ===== */
/* Ehrliche Store-Zeile statt Fake-Buttons */
.stores-note {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 26px; padding-top: 16px;
border-top: 1px solid var(--hairline);
font-size: 0.8rem; letter-spacing: 0.06em; color: var(--paper-ghost);
}
.stores-note svg { width: 14px; height: 14px; fill: var(--paper-ghost); flex: none; }
.hero__trust { border-top: 0; padding-top: 0; margin-top: 10px; }
/* Fuer wen: Titel links haengen lassen, Litanei rechts */
.fit__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
.fit .container { text-align: left; }
.fit__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.fit__head .aside { margin-top: 26px; }
.fit__list { margin: 0; max-width: none; }
.fit__list li { text-align: left; font-size: clamp(1.3rem, 1rem + 1vw, 2rem); padding: clamp(18px, 2vw, 30px) 0; }
.fit__body { padding-top: clamp(10px, 4vw, 70px); }
/* Orakel-Intro: Frageseite links, Klartext rechts, versetzt */
.oracle__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 120px); align-items: start; text-align: left; }
.oracle-sec .oracle__grid { text-align: left; }
.oracle-sec .oracle__grid .sub { margin-inline: 0; }
.oracle__prose { padding-top: clamp(30px, 6vw, 110px); }
/* Safespace: Versprechen als Gegenueber, nicht als Spalte */
.safespace__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(48px, 6vw, 120px); align-items: start; text-align: left; }
.safespace .safespace__grid .sub { margin-inline: 0; }
.safespace__body { padding-top: clamp(24px, 5vw, 90px); }
.safespace .apparition { width: min(1240px, 100vw); }
/* Splits verlassen den Container: Bilder schneiden an der Kante an */
@media (min-width: 1100px) {
.split--img-right .split__media { margin-right: calc((100vw - var(--container)) / -2 - 10px); }
.split--img-left .split__media { margin-left: calc((100vw - var(--container)) / -2 - 10px); }
.split__media .apparition { width: 118%; margin-left: 0; }
.split--img-right .split__media .apparition { margin-left: auto; margin-right: -6%; }
.split--img-left .split__media .apparition { margin-left: -6%; }
.phone { width: clamp(360px, 33vw, 540px); }
.split--img-right .split__media .phone { margin-right: -7%; --tilt: 4deg; }
.split--img-left .split__media .phone { margin-left: -7%; --tilt: -4deg; }
.astro-story .split__media { margin-left: calc((100vw - var(--container)) / -2 - 10px); padding-left: calc((100vw - var(--container)) / 2); }
.gate .container.container--narrow { width: min(900px, 92vw); }
}
@media (max-width: 900px) {
.fit__grid, .oracle__grid, .safespace__grid { grid-template-columns: 1fr; gap: 28px; }
.fit__head { position: static; }
.fit__body, .oracle__prose, .safespace__body { padding-top: 0; }
}
.gate .stores-note { color: var(--paper); opacity: 0.92; text-shadow: 0 1px 14px rgba(8, 7, 13, 0.9); border-top-color: rgba(239, 234, 222, 0.25); }
.gate .stores-note svg { fill: var(--paper); }
/* ===== 23.08. Runde 6: die Reise durch einen Tag ===== */
/* Kapitel-Momente: ein Satz, viel Himmel, ein goldener Faden */
.chapter { position: relative; z-index: 1; min-height: 74svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(80px, 8vw, 160px) var(--edge); }
.chapter__inner { max-width: 680px; display: flex; flex-direction: column; align-items: center; }
.chapter__num { font-family: var(--serif); font-style: italic; line-height: 1; font-size: clamp(3.6rem, 6vw, 6.4rem); color: transparent; -webkit-text-stroke: 1px rgba(233, 193, 118, 0.5); }
.chapter__thread { display: block; width: 1px; height: clamp(48px, 7vh, 92px); margin: 20px 0 24px; background: linear-gradient(to bottom, var(--gold), transparent); transform-origin: top; transform: scaleY(0); }
.chapter__name { font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.chapter__text { font-family: var(--serif); font-weight: 340; line-height: 1.42; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); color: var(--paper); max-width: 26ch; text-wrap: balance; }
:lang(ko) .chapter__text { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .chapter__thread { transform: scaleY(1); } }
/* Rhythmus: die Szene nach dem Kapitel gehoert zum Kapitel */
.chapter + .section { padding-top: clamp(30px, 3vw, 60px); }
.section:has(+ .chapter) { padding-bottom: clamp(120px, 9vw, 220px); }
.chapter + .section.split { --section-y: clamp(60px, 5vw + 20px, 120px); }
/* ===== 23.08. Runde 7: Ruhe und Konsistenz ===== */
/* Ein Rhythmus fuer alle: gleicher Abstand, keine Sonder-Luecken */
:root { --section-y: clamp(110px, 7vw + 50px, 190px); }
.section.oracle-sec { padding-bottom: var(--section-y); }
.natal-sec { padding-bottom: var(--section-y); }
.moon-sec { padding-top: var(--section-y); }
.pfad-sec { padding-top: var(--section-y); }
.purpose { padding-top: var(--section-y); }
.safespace { padding: var(--section-y) 0; }
.section:has(+ .chapter) { padding-bottom: var(--section-y); }
.hero { min-height: 135svh; padding-bottom: 38svh; }
.gate { min-height: 115svh; padding: 32svh 0 30svh; }
/* Konsistente Kanten: Bilder bleiben im Griff, nur Phones schneiden an,
immer auf ihrer Seite, immer gleich weit */
@media (min-width: 1100px) {
.split--img-right .split__media { margin-right: 0; }
.split--img-left .split__media { margin-left: 0; }
.split__media .apparition { width: 112%; margin: 0; }
.split--img-right .split__media .apparition { margin-right: -6%; margin-left: auto; }
.split--img-left .split__media .apparition { margin-left: -6%; }
.phone { width: clamp(340px, 30vw, 470px); }
.split--img-right .split__media .phone { margin-right: 0; --tilt: 3deg; }
.split--img-left .split__media .phone { margin-left: 0; --tilt: -3deg; }
.astro-story .split__media { margin-left: 0; padding-left: 0; }
}
/* Intro: der menschliche Absatz */
.purpose__lead--2 { margin-top: -8px; }
/* Die Wortmarke steht gross im freien Himmel ueber dem Mond,
die kleine in der Nav kommt erst beim Scrollen dazu */
.hero__brand {
position: absolute; z-index: 2; left: 50%; top: 11svh;
transform: translateX(-50%);
width: min(660px, 66vw); height: auto;
filter: drop-shadow(0 2px 18px rgba(8, 7, 13, 0.55));
pointer-events: none;
}
@media (max-width: 900px) { .hero__brand { width: 80vw; top: 10svh; } }
.nav__brand { opacity: 0; transition: opacity 0.5s var(--ease); }
.nav.is-scrolled .nav__brand { opacity: 1; }
/* Die Marke bekommt garantiert freien Himmel: das Mondbild beginnt
erst unterhalb der Wortmarke und blendet oben weich in die Nacht */
.hero__bg {
top: calc(var(--nav-h) + clamp(170px, 22svh, 300px));
height: auto; bottom: 0;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 40%, rgba(0, 0, 0, 0.55) 62%, transparent 96%);
mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 40%, rgba(0, 0, 0, 0.55) 62%, transparent 96%);
}
.hero__brand { top: calc(var(--nav-h) + clamp(36px, 6svh, 90px)); width: min(600px, 46vw); }
.hero::before { top: 38%; }
@media (max-width: 900px) {
.hero__bg { top: calc(var(--nav-h) + clamp(120px, 15svh, 200px)); }
.hero__brand { width: 76vw; top: calc(var(--nav-h) + 4svh); }
}
.hero__bg {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 26%, black 42%, rgba(0, 0, 0, 0.55) 64%, transparent 96%);
mask-image: linear-gradient(to bottom, transparent 0%, black 26%, black 42%, rgba(0, 0, 0, 0.55) 64%, transparent 96%);
}
/* Flache Bildschirme: alles eine Nummer kleiner, damit nichts kollidiert */
@media (max-height: 820px) and (min-width: 901px) {
.hero__brand { width: min(420px, 32vw); }
.hero__headline { font-size: clamp(2.6rem, 4.4vw, 4.6rem); }
.hero__sub { font-size: 0.98rem; max-width: 54ch; }
.hero { padding-bottom: 30svh; }
}
.hero__sub, .hero__headline { text-shadow: 0 2px 22px rgba(8, 7, 13, 0.75); }
/* Die heilige Ordnung im Hero: Marke, dann Mond, dann die Worte */
.hero { min-height: 152svh; padding-bottom: 13svh; }
@media (max-height: 820px) and (min-width: 901px) { .hero { min-height: 158svh; padding-bottom: 11svh; } }
@media (max-width: 900px) { .hero { min-height: 132svh; padding-bottom: 12svh; } }
/* ===== 23.08. Runde 8: kompakter Hero, ruhige Maschine ===== */
/* Marke, Mond und Worte ruecken zu EINER Komposition zusammen */
.hero { min-height: 112svh; padding-bottom: 5svh; }
.hero__brand { top: calc(var(--nav-h) + clamp(18px, 3svh, 44px)); width: min(500px, 38vw); }
.hero__bg { top: calc(var(--nav-h) + clamp(110px, 13svh, 175px)); }
@media (max-height: 820px) and (min-width: 901px) {
.hero { min-height: 118svh; padding-bottom: 4svh; }
.hero__brand { width: min(380px, 28vw); }
}
@media (max-width: 900px) {
.hero { min-height: 108svh; padding-bottom: 6svh; }
.hero__brand { width: 64vw; top: calc(var(--nav-h) + 2svh); }
.hero__bg { top: calc(var(--nav-h) + clamp(90px, 11svh, 150px)); }
}
/* Keine Layer-Explosion durch hunderte Wort-Spans */
.w { will-change: auto; }
.nav.is-scrolled { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* ===== 24.08. Runde 9: komponiert statt zufaellig ===== */
/* Titel-Rhythmus: drei andere Formen */
.title--giant { font-size: clamp(5rem, 3rem + 9vw, 12rem); line-height: 0.95; letter-spacing: -0.01em; margin-bottom: 18px; }
.title__whisper { display: block; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.7rem); font-style: italic; font-weight: 340; color: var(--paper-muted); margin-top: 18px; letter-spacing: 0; line-height: 1.4; }
:lang(ko) .title__whisper { font-style: normal; }
.title--quiet { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.4rem); font-style: italic; color: var(--paper); max-width: 18ch; }
:lang(ko) .title--quiet { font-style: normal; }
.title-figure { font-family: var(--serif); font-weight: 300; font-size: clamp(4rem, 2.5rem + 6vw, 8.5rem); line-height: 1; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 6px; }
.title--small { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem); }
/* Die Tageskarte schwebt frei, ohne Geraet */
.float-card { width: min(360px, 78%); margin: 0 auto; transform: rotate(-4deg); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 40px rgba(233, 193, 118, 0.12)); }
.float-card img { width: 100%; height: auto; border-radius: 10px; display: block; animation: floaty 9s ease-in-out infinite alternate; }
.apparition--legung img { -webkit-mask-image: radial-gradient(52% 52% at 50% 50%, black 36%, transparent 96%); mask-image: radial-gradient(52% 52% at 50% 50%, black 36%, transparent 96%); }
/* Lichtfuehrung: Mondlicht oben, Morgengold unten, gesteuert per Scroll */
.light { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.light--moon { background: radial-gradient(60% 45% at 50% 0%, rgba(233, 193, 118, 0.16), rgba(233, 193, 118, 0.05) 45%, transparent 75%); }
.light--dawn { background: radial-gradient(70% 50% at 50% 100%, rgba(233, 193, 118, 0.22), rgba(197, 160, 89, 0.08) 45%, transparent 75%); }
@media (min-width: 1100px) { .split__media .float-card { margin-left: 6%; } }
@media (max-width: 900px) { .title--giant { font-size: clamp(4rem, 18vw, 6rem); } .float-card { width: 62%; } }
/* Landung als Spiegel des Heros: Worte im dunklen Himmel, darunter
der Mond am Horizont und der Weg dorthin */
.gate { min-height: auto; padding: 16svh 0 calc(100vw * 0.44); justify-content: flex-start; }
.gate__bg {
height: auto; min-height: 64svh; max-height: none; width: 100%;
object-fit: cover; object-position: center bottom;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 22%, black 46%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 22%, black 46%);
}
.gate__title { font-size: var(--fs-h1); }
@media (max-height: 820px) and (min-width: 901px) { .gate { padding: 12svh 0 calc(100vw * 0.40); } }
@media (max-width: 900px) { .gate { padding: 14svh 0 62svh; } .gate__bg { min-height: 78svh; } }
.title-figure { margin-bottom: 22px; }
/* Die Legung: drei echte Karten aus dem aktuellen Deck, aufgefaechert */
.spread { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; width: min(560px, 100%); margin: 0 auto; padding: 30px 0 20px; }
.spread img { width: 38%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.95), 0 0 50px -16px rgba(233, 193, 118, 0.25); transform-origin: 50% 110%; }
.spread img:nth-child(1) { transform: rotate(-11deg) translate(12%, 6%); z-index: 1; }
.spread img:nth-child(2) { transform: translateY(-4%); z-index: 3; animation: floaty 9s ease-in-out infinite alternate; }
.spread img:nth-child(3) { transform: rotate(11deg) translate(-12%, 6%); z-index: 2; }
.float-card { width: min(320px, 70%); }
.fan img { border-radius: 14px; }
@media (max-width: 900px) { .spread { width: 92%; } }
/* Faecher neu: eine Hand aus fuenf Karten, weit und ruhig */
.fan { height: clamp(380px, 34vw, 560px); width: 100%; }
.fan img { width: clamp(150px, 13.5vw, 210px); margin-left: clamp(-105px, -6.75vw, -75px); bottom: 10%; border-radius: 14px; transform-origin: 50% 130%; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.95); }
.fan img:nth-child(1) { --fr: -26deg; }
.fan img:nth-child(2) { --fr: -13deg; }
.fan img:nth-child(3) { --fr: 0deg; }
.fan img:nth-child(4) { --fr: 13deg; }
.fan img:nth-child(5) { --fr: 26deg; }
.fan__draw { display: none; }
.fan img { transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)); }
.fan img:nth-child(1) { --fx: -74%; --fy: 26px; z-index: 1; }
.fan img:nth-child(2) { --fx: -37%; --fy: 7px; z-index: 2; }
.fan img:nth-child(3) { --fx: 0; --fy: 0; z-index: 3; }
.fan img:nth-child(4) { --fx: 37%; --fy: 7px; z-index: 2; }
.fan img:nth-child(5) { --fx: 74%; --fy: 26px; z-index: 1; }
.fan img { width: clamp(140px, 12vw, 190px); margin-left: clamp(-95px, -6vw, -70px); }
.fan img:nth-child(1) { --fx: -52%; --fy: 22px; --fr: -20deg; }
.fan img:nth-child(2) { --fx: -26%; --fy: 6px; --fr: -10deg; }
.fan img:nth-child(4) { --fx: 26%; --fy: 6px; --fr: 10deg; }
.fan img:nth-child(5) { --fx: 52%; --fy: 22px; --fr: 20deg; }
.split .fan { margin-left: 6%; }
@media (max-width: 900px) {
.fan { height: 300px; margin-left: 0; }
.fan img { width: 25vw; margin-left: -12.5vw; bottom: 6%; }
.fan img:nth-child(1) { --fx: -38%; --fy: 16px; --fr: -16deg; }
.fan img:nth-child(2) { --fx: -19%; --fy: 4px; --fr: -8deg; }
.fan img:nth-child(4) { --fx: 19%; --fy: 4px; --fr: 8deg; }
.fan img:nth-child(5) { --fx: 38%; --fy: 16px; --fr: 16deg; }
}
/* Faecher wie eine Hand haelt: alle Karten drehen um EINEN Punkt knapp
unter dem Stapel, keine Verschiebung, starke Ueberlappung, rechte Karte
liegt jeweils auf der linken */
.fan { height: clamp(360px, 30vw, 500px); }
.fan img { width: clamp(160px, 14vw, 220px); margin-left: clamp(-110px, -7vw, -80px); bottom: 12%; transform-origin: 50% 118%; transform: rotate(var(--fr, 0deg)); }
.fan img:nth-child(1) { --fr: -26deg; z-index: 1; --fx: 0; --fy: 0; }
.fan img:nth-child(2) { --fr: -13deg; z-index: 2; --fx: 0; --fy: 0; }
.fan img:nth-child(3) { --fr: 0deg; z-index: 3; --fx: 0; --fy: 0; }
.fan img:nth-child(4) { --fr: 13deg; z-index: 4; --fx: 0; --fy: 0; }
.fan img:nth-child(5) { --fr: 26deg; z-index: 5; --fx: 0; --fy: 0; }
@media (max-width: 900px) {
.fan { height: 300px; }
.fan img { width: 30vw; margin-left: -15vw; bottom: 8%; transform-origin: 50% 118%; }
.fan img:nth-child(1) { --fr: -24deg; } .fan img:nth-child(2) { --fr: -12deg; } .fan img:nth-child(4) { --fr: 12deg; } .fan img:nth-child(5) { --fr: 24deg; }
}
/* ===== Die Hand: Faecher, dann kommt die mittlere Karte nach vorn und dreht sich ===== */
.hand { position: relative; height: clamp(400px, 34vw, 560px); width: 100%; pointer-events: none; }
.hand__card {
position: absolute; left: 50%; bottom: 12%;
width: clamp(160px, 14vw, 220px); aspect-ratio: 2 / 3; height: auto;
margin-left: clamp(-110px, -7vw, -80px);
border-radius: 14px; transform-origin: 50% 118%;
transform: rotate(var(--fr, 0deg));
/* drop-shadow statt box-shadow: die Karten sind freigestellt, ein
box-shadow legt sich um das volle Bild-Rechteck und scheint durch
die durchsichtigen Raender als schwarzer Saum durch. */
filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.85));
}
img.hand__card { display: block; }
.hand__card:nth-child(1) { --fr: -26deg; z-index: 1; }
.hand__card:nth-child(2) { --fr: -13deg; z-index: 2; }
.hand__card:nth-child(3) { --fr: 0deg; z-index: 5; }
.hand__card:nth-child(4) { --fr: 13deg; z-index: 2; }
.hand__card:nth-child(5) { --fr: 26deg; z-index: 1; }
.hand__flip { transform-style: preserve-3d; box-shadow: none; }
/* Der Schatten sitzt an den beiden Kartenseiten, nicht am Flip-Container:
ein filter auf dem Container setzt backface-visibility ausser Kraft,
dann bleibt beim Umdrehen die Rueckseite sichtbar. */
.hand__flip { filter: none; }
.hand__face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.85)); }
.hand__face--front { transform: rotateY(180deg); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 26px rgba(233, 193, 118, 0.4)); }
@media (max-width: 900px) {
.hand { height: 320px; }
.hand__card { width: 30vw; margin-left: -15vw; bottom: 8%; }
.hand__card:nth-child(1) { --fr: -24deg; } .hand__card:nth-child(2) { --fr: -12deg; }
.hand__card:nth-child(4) { --fr: 12deg; } .hand__card:nth-child(5) { --fr: 24deg; }
}
@media (min-width: 1100px) { .split .hand { margin-left: 4%; } }
/* Rhythmus enger: keine Loecher zwischen den Szenen */
:root { --section-y: clamp(80px, 5vw + 30px, 140px); }
[data-section="journal"] { padding-bottom: clamp(50px, 4vw, 90px); }
.safespace { padding: clamp(60px, 5vw, 110px) 0 clamp(40px, 4vw, 80px); }
.safespace .apparition { margin-top: clamp(16px, 2.5vw, 44px); }
.moon-sec { padding-top: clamp(30px, 3vw, 60px); }
.section.oracle-sec { padding-top: clamp(60px, 5vw, 110px); }
.natal-sec { padding-bottom: clamp(50px, 4vw, 90px); }
[data-section="gemeinsam"] { padding-bottom: clamp(60px, 5vw, 110px); }
/* Nacht durchgehend tief: die gemalten Szenen laufen in Schwarz aus,
also darf der Seitenverlauf in der Mitte nicht heller sein als sie */
body {
background-image: linear-gradient(to bottom,
#08070d 0%, #0b0a11 12%, #0e0c16 32%, #100e19 50%,
#0e0c16 68%, #0b0a11 86%, #08070d 100%);
}
/* Landung laeuft unten weich aus statt hart in den Hilfe-Streifen */
.gate__bg {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 22%, black 46%, black 84%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 22%, black 46%, black 84%, transparent 100%);
}
.gate { padding-bottom: calc(100vw * 0.40); }
/* Orakel: der leise Link haengt direkt unter der Szene */
.section.oracle-sec { padding-bottom: clamp(30px, 3vw, 60px); }
.oracle-sec .micro-cta { margin-top: clamp(16px, 2vw, 32px); }
.hilfe-banner { background: transparent; border-top: 0; padding: 26px var(--edge) 18px; }
/* Der leuchtende Satz startet lesbar, nicht wie ausgegraut */
.safespace .sub .w { opacity: 0.55; }
/* Footer ohne harte Oberkante: die Nacht laeuft einfach weiter */
.footer { background: transparent; border-top: 0; }
.footer::before { content: ""; display: block; width: min(320px, 60%); height: 1px; margin: 0 auto 40px; background: linear-gradient(to right, transparent, var(--hairline), transparent); }
/* Titelbild endet immer MIT dem Hero: Hoehe an die Sektion gebunden, damit
die weiche Blende auf jedem Schirm im sichtbaren Bereich liegt */
.hero__bg {
height: calc(100% - var(--nav-h) - clamp(110px, 13svh, 175px));
bottom: auto; object-fit: cover; object-position: center top;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 40%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.18) 84%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 40%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.18) 84%, transparent 100%);
}
@media (max-width: 900px) { .hero__bg { height: calc(100% - var(--nav-h) - clamp(90px, 11svh, 150px)); } }
/* Safespace als normaler Split: Bild links, Text rechts, Riesenwort im Text */
.safespace { padding: var(--section-y) 0; }
.safespace .title--giant { font-size: clamp(3.6rem, 2.4rem + 5vw, 7.5rem); }
.safespace .apparition img {
-webkit-mask-image: radial-gradient(60% 60% at 50% 50%, black 40%, transparent 100%);
mask-image: radial-gradient(60% 60% at 50% 50%, black 40%, transparent 100%);
}
.safespace .sub .w { opacity: 1; }
/* Erscheinungen: Raender werden frueher unsichtbar, kein Bildrand mehr */
.apparition img, .oracle-stage .apparition img, .apparition--legung img {
-webkit-mask-image: radial-gradient(50% 50% at 50% 50%, black 28%, rgba(0, 0, 0, 0.55) 58%, transparent 86%);
mask-image: radial-gradient(50% 50% at 50% 50%, black 28%, rgba(0, 0, 0, 0.55) 58%, transparent 86%);
}
.oracle-stage .apparition img {
-webkit-mask-image: radial-gradient(50% 50% at 50% 50%, black 34%, rgba(0, 0, 0, 0.6) 62%, transparent 88%);
mask-image: radial-gradient(50% 50% at 50% 50%, black 34%, rgba(0, 0, 0, 0.6) 62%, transparent 88%);
}
.safespace .container, .safespace .split__media + div { text-align: left; }
.safespace .sub { margin-inline: 0; }
/* Inventar: Kopf links bleibt stehen, rechts die Liste mit Haarlinien */
.inventar__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
.inventar__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.inventar__list { list-style: none; margin: 0; padding: 0; }
.inventar__list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: clamp(16px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--hairline); }
.inventar__list li:first-child { border-top: 1px solid var(--hairline); }
.inventar__list strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--gold); letter-spacing: 0.01em; }
.inventar__list p { color: var(--paper-muted); line-height: 1.65; font-size: 0.98rem; }
@media (max-width: 900px) {
.inventar__grid { grid-template-columns: 1fr; gap: 28px; }
.inventar__head { position: static; }
.inventar__list li { grid-template-columns: 1fr; gap: 6px; }
}
/* Bildseiten wechseln strikt: Mond nach rechts */
.moon-sec .container { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.moon-sec .apparition { order: 2; }
/* ===== 24.08. Runde 19: schwimmender Hero-Uebergang, eine Sprache ===== */
/* Echte Verlaufsflaechen statt nur Maske: manche GPUs zeichnen Video in
einer eigenen Ebene und ignorieren die Maske, dann steht eine Kante */
.hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 52%; z-index: 1; pointer-events: none;
background: linear-gradient(to bottom, rgba(11, 10, 17, 0) 0%, rgba(11, 10, 17, 0.35) 35%, rgba(11, 10, 17, 0.8) 70%, #0b0a11 100%);
}
.hero__scrim {
background:
linear-gradient(to bottom, #08070d 0%, rgba(8, 7, 13, 0.7) 10%, rgba(8, 7, 13, 0) 24%),
radial-gradient(90% 55% at 50% 32%, rgba(8, 7, 13, 0.42), transparent 70%);
}
.purpose { padding-top: clamp(40px, 4vw, 70px); }
/* Eine Typo-Sprache: alle Titel gleich gross, alle Fliesstexte gleich gross */
.title--quiet { font-size: var(--fs-h2); font-style: normal; max-width: none; }
.title--quiet em { font-style: italic; }
.title--giant { font-size: calc(var(--fs-h2) * 1.35); }
.feat-notes strong { font-size: 1rem; }
.feat-notes p { font-size: 0.98rem; color: var(--paper-muted); }
.inventar__list p { font-size: 1rem; }
.inventar__list strong { font-size: 1.35rem; }
/* Eine Bewegungs-Sprache: nichts klebt, nichts laeuft mit */
.astro-story .split__media { position: static; }
.astro-story .container { align-items: center; }
/* Intro: statt Nummernliste drei Zeilen, die treffen */
.purpose__lines { list-style: none; margin: 0; padding: 0; }
.purpose__lines li {
font-family: var(--serif); font-style: italic; font-weight: 340;
font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.4; color: var(--paper);
padding: clamp(16px, 2vw, 26px) 0; border-bottom: 1px solid var(--hairline);
}
.purpose__lines li:first-child { border-top: 1px solid var(--hairline); }
:lang(ko) .purpose__lines li { font-style: normal; }
.story-step { margin-top: clamp(56px, 6vw, 96px); }
/* ===== 24.08. Runde 20: fluessig auf echter Hardware ===== */
#candle { display: none; }
.hero__bg { -webkit-mask-image: none; mask-image: none; }
.hero::before { animation: none; }
.apparition img, .float-card img, .spread img:nth-child(2) { animation: none; }
body::after { inset: 0; opacity: 0.04; }
.nav.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 8, 16, 0.86); }
.sky__cloud { will-change: transform; transform: translateZ(0); }
/* Der Mond traegt die Sektion: gross, laeuft ueber den rechten Rand hinaus */
.moon-sec { overflow: clip; }
.moon-sec .container { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.moon-sec .apparition { width: 150%; max-width: none; margin: 0 -40% 0 0; }
.moon-sec .apparition img {
-webkit-mask-image: radial-gradient(50% 50% at 50% 50%, black 22%, rgba(0, 0, 0, 0.6) 52%, transparent 84%);
mask-image: radial-gradient(50% 50% at 50% 50%, black 22%, rgba(0, 0, 0, 0.6) 52%, transparent 84%);
}
@media (max-width: 900px) { .moon-sec .apparition { width: 120%; margin: 0 -10%; } }
.pfad-sec .container--head .sub + .sub { margin-top: 14px; }
.pfad-sec .container--head .sub { max-width: 62ch; }
/* Wer das gemacht hat: Titel links, zwei Absaetze rechts */
.wer__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
.wer .sub + .sub { margin-top: 18px; }
@media (max-width: 900px) { .wer__grid { grid-template-columns: 1fr; gap: 24px; } }
.sub + .sub { margin-top: 18px; }
/* Vergleich: zwei Zeichen waehlen, drei echte Saetze aus der App lesen */
.vergleich { margin-top: clamp(40px, 5vw, 80px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
.vergleich__lead { grid-column: 1 / -1; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); color: var(--paper); max-width: 40ch; }
:lang(ko) .vergleich__lead { font-style: normal; }
.vergleich__pick { display: grid; gap: 18px; }
.vergleich__pick label { display: grid; gap: 8px; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.vergleich__sel {
appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer;
font-family: var(--serif); font-size: 1.5rem; color: var(--paper);
background: transparent; border: 0; border-bottom: 1px solid var(--gold-muted, var(--gold)); padding: 8px 32px 10px 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 4px center;
}
.vergleich__sel option { background: #14121a; color: var(--paper); font-family: var(--sans); font-size: 1rem; }
.vergleich__out { display: grid; gap: 0; }
.vergleich__row { padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--hairline); }
.vergleich__row:first-child { border-top: 1px solid var(--hairline); }
.vergleich__row strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--gold); margin-bottom: 6px; }
.vergleich__row p { color: var(--paper-muted); line-height: 1.65; }
.vergleich__quote { margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--paper); }
:lang(ko) .vergleich__quote { font-style: normal; }
.vergleich__out.is-fresh { animation: vergleichIn 0.5s ease-out; }
@keyframes vergleichIn { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vergleich__hint { grid-column: 1 / -1; margin-top: 10px; font-size: 0.86rem; color: var(--paper-ghost); }
@media (max-width: 900px) { .vergleich { grid-template-columns: 1fr; gap: 24px; } .vergleich__pick { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .vergleich__out.is-fresh { animation: none; } }
.split .container.vergleich { align-items: start; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.vergleich__pick { position: sticky; top: calc(var(--nav-h) + 40px); }
@media (max-width: 900px) { .vergleich__pick { position: static; } }
/* Sternzeichen-Wert wie in der App: Zahl, Beschreibung, Rat */
.vergleich__score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: clamp(18px, 2vw, 28px); }
.vergleich__num { font-family: var(--serif); font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: 1; color: var(--paper); }
.vergleich__num small { font-size: 0.35em; color: var(--paper-ghost); margin-left: 4px; }
.vergleich__scorelabel { display: block; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.vergleich__score p { color: var(--paper); line-height: 1.6; }
.vergleich__advice { margin-top: 8px; color: var(--paper-muted); font-style: italic; font-family: var(--serif); font-size: 1.05rem; }
:lang(ko) .vergleich__advice { font-style: normal; }
/* 24.08. Handy-Korrekturen: unter 900px stapelt der Mond-Block (die
Textspalte war 125px schmal), und die Raster-Spalten duerfen nicht
breiter als der Viewport werden (1fr = min-content; das Safespace-
Bild mit 100vw drueckte den Text rechts aus dem Bild). */
@media (max-width: 900px) {
.moon-sec .container { grid-template-columns: minmax(0, 1fr) !important; }
.split .container { grid-template-columns: minmax(0, 1fr) !important; }
.safespace .apparition { width: 100%; }
}
/* 24.08. Rhythmus: weniger Leere zwischen den Sektionen (vorher bis 170px
oben und unten, zusammen 340px, das las sich an zwei Stellen wie ein
Ladefehler). */
:root { --section-y: clamp(72px, 5vw + 36px, 124px); }
/* 24.08. Orakel auf dem Handy: Antwort liegt ueber dem Gesicht der Figur,
ein weicher dunkler Schleier hinter dem Text haelt beides lesbar. */
@media (max-width: 900px) {
.oracle-scene { background: radial-gradient(ellipse 80% 62% at 50% 55%, rgba(8, 7, 13, 0.82) 0%, rgba(8, 7, 13, 0.55) 55%, rgba(8, 7, 13, 0) 100%); }
}
/* 24.08. Programme auf dem Handy: die zweite Karte schaut deutlich herein,
damit man ohne Hinweis sieht, dass die Reihe weitergeht. */
@media (max-width: 900px) {
.program { flex-basis: min(236px, 66vw); }
.programs { gap: 18px; scroll-padding-inline: var(--edge); }
}
/* 24.08. Der Satz unter dem Vergleich ist der staerkste Hook der Seite
(Geburtsminuten, Seelentypen, Reading fuer zwei) und stand in 12px Grau,
auf dem Desktop zudem direkt unter dem sticky Auswahlfeld. Jetzt mit
Abstand, in Lesegroesse, mit eigenem Aufruf. */
.vergleich__hint {
margin-top: clamp(40px, 4vw, 64px); padding-top: clamp(22px, 2vw, 32px); border-top: 1px solid var(--hairline);
font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5;
color: var(--paper); max-width: 44ch;
}
:lang(ko) .vergleich__hint { font-style: normal; }
.vergleich__cta { grid-column: 1 / -1; margin-top: 14px; }
/* ===== 25.08. Echte App-Bildschirme ===== */
/* Himmel: zwei Telefone flankieren den Text. Links der Tag, rechts das
Geburtshoroskop, dazwischen die Erklaerung. Leicht gegenlaeufig
versetzt, damit die Seite nicht spiegelt. */
.astro-duo__grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.2fr) minmax(0, 0.92fr);
gap: clamp(20px, 3vw, 60px);
align-items: center;
}
.astro-duo__media .phone { width: 100%; }
.astro-duo__media--a { --tilt: -3.2deg; transform: translateY(5%); }
.astro-duo__media--b { --tilt: 3.2deg; transform: translateY(-6%); }
.astro-duo__body { display: grid; gap: clamp(34px, 4vw, 60px); text-align: center; }
.astro-duo__body .sub { margin-inline: auto; }
.astro-duo__body .title { text-wrap: balance; }
@media (max-width: 1099px) {
.astro-duo__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "body body" "a b";
gap: clamp(28px, 5vw, 56px) clamp(10px, 3vw, 30px);
}
.astro-duo__body { grid-area: body; }
.astro-duo__media--a { grid-area: a; transform: none; --tilt: -4deg; }
.astro-duo__media--b { grid-area: b; transform: none; --tilt: 4deg; }
.astro-duo__media .phone { border-width: 5px; border-radius: 26px; }
.astro-duo__media .phone img { border-radius: 21px; }
}
/* Ein Bildschirm als Objekt vor dem Gemaelde: das Bild traegt die
Stimmung, das Telefon den Beweis. Es steht bewusst ueber die Kante
hinaus, damit es wie hingelegt wirkt und nicht wie eingeklebt. */
.apparition.has-inset { position: relative; }
.phone--inset {
position: absolute; z-index: 3; width: 33%; margin: 0;
right: 2%; bottom: -14%;
box-shadow: 0 44px 74px -26px rgba(0, 0, 0, 0.95), 0 0 50px -16px var(--gold-12);
}
.split--img-left .split__media .phone--inset { --tilt: -3deg; right: auto; left: 1%; }
.moon-sec .phone--inset { right: 4%; bottom: -10%; width: 30%; }
@media (max-width: 900px) {
.phone--inset { width: 42%; right: 0; bottom: -12%; }
.split--img-left .split__media .phone--inset { left: 0; }
.moon-sec .phone--inset { width: 40%; right: 0; }
.apparition.has-inset { margin-bottom: 14%; }
}
/* Korrektur am selben Tag: Die Bildschirme vor den Gemaelden waren
dunkel auf dunkel und lasen sich wie ein Fehler. Seelentyp und Mond
tragen jetzt wieder allein ihr Bild; die Synastrie steht dort, wo der
Satz sie ankuendigt: neben der Kostprobe. */
.vergleich__more {
grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(28px, 4vw, 60px); align-items: center;
max-width: 900px; margin-inline: auto; width: 100%;
}
.vergleich__more .phone { width: clamp(210px, 20vw, 290px); --tilt: 2.5deg; }
.vergleich__more .vergleich__hint { margin-top: 0; }
@media (max-width: 900px) {
.vergleich__more { grid-template-columns: minmax(0, 1fr); }
.vergleich__more .phone { width: min(260px, 68%); }
}
/* Himmel: im schmalen Mittelfeld sind die grossen Titel zu breit. */
.astro-duo__body .title { font-size: var(--fs-h3); }
/* Mondrad: die acht Phasen als freigestellte Objekte zum Durchklicken.
Reihe scrollt auf schmalen Geraeten, die Auswahl hebt sich, der Text
darunter wechselt. Inhalte kommen 1:1 aus der App. */
.mondrad { width: var(--container); margin: clamp(44px, 5vw, 86px) auto 0; padding-inline: var(--edge); }
.mondrad__lead {
text-align: center; font-family: var(--serif); font-style: italic;
font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); color: var(--paper-muted);
}
:lang(ko) .mondrad__lead { font-style: normal; }
.mondrad__reihe {
display: flex; justify-content: center; gap: clamp(4px, 1.2vw, 20px);
padding: clamp(18px, 2.5vw, 34px) 0; overflow-x: auto; scrollbar-width: none;
scroll-padding-inline: var(--edge);
}
.mondrad__reihe::-webkit-scrollbar { display: none; }
.mondrad__btn {
flex: 0 0 auto; width: clamp(66px, 8.4vw, 106px);
display: grid; gap: 9px; justify-items: center;
background: none; border: 0; padding: 6px 2px; cursor: pointer;
opacity: 0.5; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.mondrad__btn img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 16px rgba(233, 193, 118, 0.12)); transition: filter 0.35s var(--ease); }
.mondrad__btn span {
/* Breite binden: ohne das ragen lange Namen wie "Zunehmende Sichel"
ueber den Knopf hinaus und ueberlappen den Nachbarn. */
width: 100%; overflow-wrap: anywhere; hyphens: auto;
font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.13em; line-height: 1.35;
text-transform: uppercase; color: var(--paper-ghost); text-align: center;
}
.mondrad__btn:hover { opacity: 0.85; }
.mondrad__btn:focus-visible { outline: 1px solid var(--gold-25); outline-offset: 4px; border-radius: 12px; }
.mondrad__btn.is-on { opacity: 1; transform: translateY(-5px); }
.mondrad__btn.is-on span { color: var(--gold); }
.mondrad__btn.is-on img { filter: drop-shadow(0 0 30px rgba(233, 193, 118, 0.45)); }
.mondrad__out { text-align: center; min-height: 132px; }
.mondrad__name {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3rem); color: var(--paper); margin-bottom: 14px;
}
:lang(ko) .mondrad__name { font-style: normal; font-weight: 400; }
.mondrad__zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; margin-top: 8px; }
.mondrad__lab { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-ghost); }
.mondrad__gut { color: var(--gold); }
.mondrad__meide { color: var(--paper-muted); }
@media (max-width: 700px) {
.mondrad__reihe { justify-content: flex-start; gap: 10px; }
.mondrad__btn { width: 78px; }
.mondrad__btn span { font-size: 0.54rem; letter-spacing: 0.1em; }
.mondrad { padding-inline: 0; }
.mondrad__reihe { padding-inline: var(--edge); }
.mondrad__lead, .mondrad__out { padding-inline: var(--edge); }
}
/* Korrektur: In der Mond-Sektion stand der Mond zweimal, einmal gemalt
als Bild und einmal als Rad. Das Bild ist raus, der Text steht mittig,
darunter tragen die acht Phasen die Sektion - gross genug, um sie zu
erkennen, und ohne Kante, damit sie im Nachthimmel liegen. */
/* Hoehere Spezifitaet als .moon-sec .container, sonst bleibt der Kopf im
alten Zweispalter und der Titel steht schmal am linken Rand. */
.moon-sec .container.moon-sec__kopf { display: block; text-align: center; }
.moon-sec .container.moon-sec__kopf .sub { margin-inline: auto; }
/* Acht Monde muessen nebeneinander in den Container passen, sonst sind
die aeusseren beiden angeschnitten. */
.mondrad__btn { width: clamp(84px, 9.4vw, 132px); }
.mondrad__reihe { gap: clamp(4px, 1vw, 18px); }
.mondrad__btn img { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55)); }
.mondrad__btn.is-on img { filter: drop-shadow(0 0 34px rgba(233, 193, 118, 0.4)) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6)); }
.mondrad__btn span { font-size: 0.64rem; }
@media (max-width: 700px) {
.mondrad__btn { width: 104px; }
.mondrad__btn span { font-size: 0.56rem; }
}
/* Tagebuch-Einbaende: die echten Buecher aus der App, freigestellt.
Der Text daneben verspricht "einen Einband, den du dir aussuchst" -
hier stehen sie, als Objekte in einer Reihe, leicht gefaechert. */
.einbaende { width: var(--container); margin: clamp(40px, 4vw, 76px) auto 0; padding-inline: var(--edge); }
.einbaende__lead {
text-align: center; font-family: var(--serif); font-style: italic;
font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); color: var(--paper-muted); margin-bottom: clamp(18px, 2.4vw, 34px);
}
:lang(ko) .einbaende__lead { font-style: normal; }
.einbaende__reihe { display: flex; justify-content: center; gap: clamp(6px, 1.2vw, 22px); overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.einbaende__reihe::-webkit-scrollbar { display: none; }
.einbaende__reihe img {
flex: 0 0 auto; width: clamp(96px, 11vw, 158px); height: auto; display: block;
border-radius: 3px; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.75));
transform: rotate(var(--t, 0deg)); transition: transform 0.4s var(--ease);
}
.einbaende__reihe img:nth-child(odd) { --t: -1.6deg; }
.einbaende__reihe img:nth-child(3n) { --t: 1.8deg; }
@media (hover: hover) and (pointer: fine) {
.einbaende__reihe img:hover { transform: rotate(0deg) translateY(-8px); }
}
@media (max-width: 700px) {
.einbaende { padding-inline: 0; }
.einbaende__lead { padding-inline: var(--edge); }
.einbaende__reihe { justify-content: flex-start; padding-inline: var(--edge); }
.einbaende__reihe img { width: 116px; }
}
/* Die beiden Sternzeichen als Medaillons ueber dem Wert: dieselben
goldenen Bilder wie in der App, damit der Vergleich nicht nur Text ist. */
.vergleich__paar { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); margin-bottom: clamp(16px, 2.2vw, 28px); }
.vergleich__paar img { width: clamp(62px, 7vw, 96px); height: auto; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.65)); }
.vergleich__linie { width: clamp(28px, 5vw, 72px); height: 1px; background: var(--gold-25); }
/* ===== 25.08. Ruhe in die Anordnung ===== */
/* Ein Titelmass fuer alle Sektionen zwischen Hero und Landung. Vorher
liefen sie mit --fs-h2 (bis 5,6rem) in Spalten von 500px und brachen
auf drei, vier Zeilen um, waehrend die Himmel-Sektion schon auf --fs-h3
stand: die Ueberschriften sprangen von Block zu Block in der Groesse.
Jetzt eine Stufe dazwischen, ueberall gleich. */
:root { --fs-h2-sec: clamp(2.1rem, 1.5rem + 1.9vw, 3.3rem); }
.section:not(.hero):not(.gate) .title { font-size: var(--fs-h2-sec); }
.astro-duo__body .title { font-size: var(--fs-h2-sec); }
/* Eine Textbreite fuer alle Fliesstexte in den Sektionen, damit die
Zeilenlaenge nicht von Block zu Block wechselt. */
.section:not(.hero):not(.gate) .sub { max-width: 46ch; }
.astro-duo__body .sub, .moon-sec .sub, .oracle-sec .sub { margin-inline: auto; }
/* Vergleich neu geordnet: vorher ein Zweispalter, links die beiden
Auswahlfelder (sticky) und darunter eine tote Spalte ueber die ganze
Ergebnishoehe, rechts der Text. Jetzt eine Mittelachse: Satz, dann die
beiden Zeichen mit ihren Medaillons nebeneinander, darunter das
Ergebnis. */
.split .container.vergleich, .vergleich { display: block; }
.vergleich__lead { text-align: center; max-width: 44ch; margin-inline: auto; }
.vergleich__pick {
position: static; display: flex; justify-content: center; align-items: flex-end;
gap: clamp(14px, 3vw, 54px); margin: clamp(26px, 3.4vw, 52px) auto clamp(30px, 3.6vw, 56px);
grid-template-columns: none;
}
.vergleich__pick label { justify-items: center; text-align: center; width: clamp(150px, 22vw, 260px); }
.vergleich__medal { width: clamp(64px, 7.5vw, 104px); height: auto; margin-bottom: 4px; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.65)); }
.vergleich__sel { text-align: center; text-align-last: center; }
.vergleich__pick .vergleich__linie { width: clamp(20px, 4vw, 60px); height: 1px; background: var(--gold-25); margin-bottom: 26px; }
.vergleich__out { max-width: 780px; margin-inline: auto; }
.vergleich__more { margin-top: clamp(44px, 5vw, 80px); }
@media (max-width: 700px) {
.vergleich__pick { gap: 10px; }
.vergleich__pick label { width: auto; flex: 1 1 0; }
}
/* Der Abschluss des Vergleichs folgt derselben Mittelachse: Satz, Aufruf,
darunter der Bildschirm. Vorher stand der Text links und das Telefon
rechts, mit einer grossen Leere darueber. */
.vergleich__more { display: block; text-align: center; max-width: 660px; margin-inline: auto; }
.vergleich__more .vergleich__hint { max-width: 42ch; margin-inline: auto; }
.vergleich__more .phone { margin: clamp(22px, 2.6vw, 38px) auto 0; --tilt: 2deg; }
/* Beide Auswahlfelder bekommen dieselben drei Zeilen (Medaillon,
Beschriftung, Feld). Ohne das rutscht das Medaillon der Seite hoch,
deren Beschriftung nur eine Zeile braucht. */
.vergleich__pick label { grid-template-rows: auto minmax(2.4em, auto) auto; align-items: center; }
/* Seelentyp-Feld: die sechzehn Symbole aus der App als Gitter zum
Durchklicken. Das Gemaelde ist raus, es zeigte dieselben Symbole im
Bogen - dieselbe Doppelung wie zuvor beim Mond. Der Text steht mittig,
das Feld traegt die Sektion. */
/* Die Sektion traegt jetzt die Klasse seele-sec statt split: ohne Bild
gibt es keine zwei Spalten mehr. */
.seele-sec .container.seelenfeld__kopf { display: block; text-align: center; }
.seele-sec .container.seelenfeld__kopf .sub { margin-inline: auto; }
.seelenfeld { width: var(--container); margin: clamp(38px, 4vw, 70px) auto 0; padding-inline: var(--edge); }
.seelenfeld__lead {
text-align: center; font-family: var(--serif); font-style: italic;
font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); color: var(--paper-muted);
}
:lang(ko) .seelenfeld__lead { font-style: normal; }
.seelenfeld__gitter {
display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
gap: clamp(6px, 1vw, 18px); margin: clamp(20px, 2.6vw, 38px) auto clamp(24px, 3vw, 44px);
max-width: 1120px;
}
.seelenfeld__btn {
display: grid; gap: 4px; justify-items: center; background: none; border: 0;
padding: 6px 2px; cursor: pointer; opacity: 0.45;
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.seelenfeld__btn img { width: 100%; max-width: 92px; height: auto; display: block; }
.seelenfeld__kuerzel { font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--paper-ghost); }
.seelenfeld__btn:hover { opacity: 0.8; }
.seelenfeld__btn:focus-visible { outline: 1px solid var(--gold-25); outline-offset: 3px; border-radius: 10px; }
.seelenfeld__btn.is-on { opacity: 1; transform: translateY(-4px); }
.seelenfeld__btn.is-on .seelenfeld__kuerzel { color: var(--gold); }
.seelenfeld__btn.is-on img { filter: drop-shadow(0 0 26px rgba(233, 193, 118, 0.4)); }
.seelenfeld__out { text-align: center; max-width: 62ch; margin-inline: auto; min-height: 210px; }
.seelenfeld__name {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem); color: var(--paper);
}
:lang(ko) .seelenfeld__name { font-style: normal; font-weight: 400; }
.seelenfeld__code {
display: block; font-family: var(--sans); font-style: normal; font-size: 0.66rem;
letter-spacing: 0.28em; color: var(--gold); margin-bottom: 8px;
}
.seelenfeld__anteil { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-ghost); margin: 10px 0 16px; }
.seelenfeld__text { color: var(--paper-muted); line-height: 1.75; font-size: var(--fs-body); }
@media (max-width: 900px) {
.seelenfeld__gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 420px; gap: 8px; }
.seelenfeld { padding-inline: var(--edge); }
.seelenfeld__out { min-height: 300px; }
}
/* Die Einbaende sind eine Auswahl, kein zweites Buchbild. Vorher lehnten
sie gekippt aneinander und wirkten wie eine zweite Aufnahme des
Journals. Jetzt eine ruhige Reihe: gleiche Groesse, gleicher Abstand,
gemeinsame Standlinie, deutlich kleiner als das Bild darueber. */
.einbaende { width: min(920px, 94vw); position: relative; padding-inline: 0; }
.einbaende__reihe {
gap: clamp(8px, 1vw, 14px); align-items: flex-end; justify-content: center;
padding: 0 0 18px; position: relative;
/* Die Reihe passt hier komplett hinein, also kein Scrollrahmen: sonst
schneidet die Box das angehobene Buch beim Ueberfahren oben ab. */
overflow: visible;
}
.einbaende__reihe::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(to right, transparent, var(--gold-25) 18%, var(--gold-25) 82%, transparent);
}
.einbaende__reihe img {
width: clamp(80px, 8.4vw, 112px); margin: 0; --t: 0deg;
border-radius: 3px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.75));
position: relative;
}
@media (hover: hover) and (pointer: fine) {
.einbaende__reihe img:hover { transform: translateY(-10px); }
}
@media (max-width: 700px) {
.einbaende { width: 100%; }
/* Auf schmalen Geraeten scrollt die Reihe wieder; dort gibt es kein
Ueberfahren, also schneidet der Rahmen nichts ab. */
.einbaende__reihe { justify-content: flex-start; padding-inline: var(--edge); overflow-x: auto; }
.einbaende__reihe img { width: 96px; }
.einbaende__reihe::after { left: var(--edge); right: var(--edge); }
}
/* ===== 26.08. Kapitel statt durchlaufendem Band ===== */
/* Die Sektionen gingen ohne Markierung ineinander ueber. Jede Rubrik
bekommt jetzt einen sichtbaren Anfang (kleine goldene Zeile ueber dem
Titel) und ein Ende (feine, an den Raendern auslaufende Linie). Keine
Kaesten, keine harten Kanten - die Buehne bleibt durchgehend. */
.rubrik {
font-family: var(--sans); font-size: 0.64rem; font-weight: 650;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--gold-muted, var(--gold)); margin-bottom: clamp(14px, 1.6vw, 22px);
}
:lang(ko) .rubrik { letter-spacing: 0.18em; }
.section:not(.hero):not(.gate)::after {
content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: min(1080px, 86vw); height: 1px; pointer-events: none;
background: linear-gradient(to right, transparent, rgba(233, 193, 118, 0.17) 22%, rgba(233, 193, 118, 0.17) 78%, transparent);
}
/* Vor der Landung endet das letzte Kapitel ohne Strich. */
.section.wer::after { display: none; }
/* Etwas mehr Luft um die Trennlinien, damit die Kapitel atmen. */
:root { --section-y: clamp(84px, 5.5vw + 40px, 148px); }
/* Orakel: Titel links, Text rechts und das Gemaelde weit darunter - die
drei Teile standen lose nebeneinander und gehoerten optisch nicht
zusammen. Jetzt eine Mittelachse wie beim Mond: Rubrik, Titel, Text,
und direkt darunter die Buehne, auf der beim Scrollen Frage und
Antwort erscheinen. */
.oracle-sec .container.oracle__grid {
display: block; text-align: center; width: var(--narrow); grid-template-columns: none;
}
.oracle-sec .oracle__grid .sub { margin-inline: auto; }
.oracle-sec .oracle__prose { padding-top: clamp(4px, 1vw, 14px); }
.oracle-sec .apparition { margin-top: clamp(18px, 2.4vw, 44px); }
/* Das Gemaelde soll in die Nacht auslaufen, nicht als Rechteck stehen. */
.oracle-stage .apparition img {
-webkit-mask-image: radial-gradient(56% 60% at 50% 52%, black 24%, rgba(0, 0, 0, 0.55) 62%, transparent 92%);
mask-image: radial-gradient(56% 60% at 50% 52%, black 24%, rgba(0, 0, 0, 0.55) 62%, transparent 92%);
}
/* Aus der Orakel-Sektion wird der ruhige Ort: eine Mittelachse, darunter
das Gemaelde, das in die Nacht auslaeuft. Die gepinnte Frage-Antwort-
Szene ist raus, sie gehoerte zum Orakel-Feature. */
.ruhe-sec { overflow: hidden; }
.ruhe-sec .container.ruhe__kopf { text-align: center; }
.ruhe-sec .ruhe__kopf .sub { margin-inline: auto; }
.ruhe__bild { margin: clamp(20px, 3vw, 52px) auto 0; width: min(1200px, 100%); }
.ruhe__bild img {
-webkit-mask-image: radial-gradient(58% 62% at 50% 52%, black 22%, rgba(0, 0, 0, 0.5) 62%, transparent 92%);
mask-image: radial-gradient(58% 62% at 50% 52%, black 22%, rgba(0, 0, 0, 0.5) 62%, transparent 92%);
}
/* ===== Titelbild: Bild bis nach oben, Marke auf dem Mond =====
Vorher wurde das Video um Navhoehe plus rund 175 Pixel nach unten
geschoben, damit die Wortmarke darueber Platz hat. Dadurch stand ganz
oben ein schwarzer Block von etwa einem Viertel Bildschirmhoehe, und
weil die weiche Blende weiter unten wieder abgeschaltet war, mit einer
harten Kante. Jetzt beginnt das Bild direkt unter der Leiste, und die
Wortmarke liegt darin ueber dem Mond. */
.hero__bg {
top: 0;
height: 100%;
bottom: auto;
object-position: center 22%;
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 58%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 58%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
}
.hero__brand { top: 14svh; width: min(520px, 40vw); }
@media (max-width: 900px) {
.hero__bg { height: 100%; top: 0; }
.hero__brand { top: 12svh; width: 62vw; }
}
/* ===== Wegstrecke statt Haltestellen =====
Zwischen zwei Kapiteln standen rund 240 Pixel Luft, in denen nur die
duenne Linie schwebte. Auf einem Bildschirm von 900 Pixeln ist das ein
Viertel Leerraum am Stueck, und die Seite zerfaellt dadurch in
Einzelbilder statt zu einer Strecke zusammenzuwachsen.
Der Grundabstand geht deshalb auf etwa zwei Drittel herunter, und die
Strecke bekommt einen Rhythmus: Wo Bild und Text eine Szene bilden,
ruecken die Kapitel enger zusammen. Vor dem ruhigen Mittelteil und vor
der Einladung am Ende bleibt mehr Raum, damit beides Gewicht behaelt. */
:root { --section-y: clamp(56px, 3.4vw + 30px, 96px); }
/* Die Linie sitzt naeher am Inhalt, nicht mittig im Nichts. */
.section:not(.hero):not(.gate)::after { bottom: calc(var(--section-y) * 0.34); }
/* Die Kapitel, die als Szenenfolge gelesen werden, ruecken zusammen. */
[data-section="tag"], [data-section="tarot"], [data-section="astro"],
[data-section="journal"], [data-section="moon"] {
padding-top: calc(var(--section-y) * 0.82);
padding-bottom: calc(var(--section-y) * 0.82);
}
/* Der stille Teil und der Abschluss duerfen Luft behalten. */
[data-section="ruhe"] { padding-top: calc(var(--section-y) * 1.35); padding-bottom: calc(var(--section-y) * 1.2); }
[data-section="gemeinsam"] { padding-bottom: calc(var(--section-y) * 1.25); }
/* ===== Titelbild als eine Komposition =====
Drei Dinge zogen den Auftakt auseinander. Der Verdunkler oben lief
ueber ein Viertel der Bildhoehe und legte einen breiten schwarzen
Balken ueber den Sternenhimmel, obwohl er nur die Lesbarkeit der
Leiste sichern muss. Der Bereich war hoeher als der Bildschirm, also
fiel der Knopf unter die Kante. Und zwischen Mond und Ueberschrift
standen rund sechshundert Pixel Leere, wodurch Marke, Mond und Worte
wie drei Bilder untereinander wirkten statt wie eines. */
.hero__scrim {
background:
linear-gradient(to bottom, rgba(8, 7, 13, 0.62) 0%, rgba(8, 7, 13, 0.22) 4%, rgba(8, 7, 13, 0) 9%),
radial-gradient(78% 46% at 50% 30%, rgba(8, 7, 13, 0.3), transparent 68%);
}
.hero { min-height: 100svh; padding-bottom: clamp(24px, 4svh, 56px); }
.hero__brand { top: clamp(64px, 9svh, 120px); }
@media (max-height: 820px) and (min-width: 901px) {
.hero { min-height: 100svh; padding-bottom: clamp(20px, 3svh, 40px); }
.hero__brand { top: clamp(56px, 7svh, 92px); }
}
@media (max-width: 900px) {
.hero { min-height: 100svh; padding-bottom: clamp(20px, 4svh, 48px); }
.hero__brand { top: clamp(52px, 8svh, 96px); }
}
/* ===== Programme: Karten beginnen an der Textkante =====
Die Reihe faehrt beim Scrollen nach links und ist dafuer breiter als
das Fenster. Ihr linkes Polster mass aber nur den Fensterrand, waehrend
Rubrik, Titel und Text im mittigen Inhaltsbereich sitzen. Auf breiten
Schirmen lagen dazwischen ueber dreihundert Pixel, die Karten begannen
also sichtbar weiter links als die Ueberschrift darueber. Jetzt teilen
sich beide dieselbe Kante; nach rechts laeuft die Reihe weiter aus dem
Bild, damit sichtbar bleibt, dass es weitergeht. */
@media (min-width: 1100px) {
.programs { padding-left: calc((100vw - var(--container)) / 2 + var(--edge)); }
}
/* Der Kopf der Programme stand als einziger linksbuendig ueber der
vollen Breite, wodurch rechts daneben eine leere Haelfte blieb. Die
uebrigen Kapitel ohne Bild danebens (Mond, Orakel, Seelentyp) fuehren
ihren Kopf mittig. Die Kartenreihe darunter beginnt weiterhin links,
weil sie nach rechts aus dem Bild laeuft. */
.pfad-sec .container--head { text-align: center; }
.pfad-sec .container--head .sub { margin-inline: auto; }
.pfad-sec .micro-cta--left { text-align: center; }
/* Die Kartenreihe steht mittig statt an der linken Kante. "safe center"
zentriert, solange alle Karten hineinpassen, und rueckt bei zu
schmalem Fenster nach links, damit die erste Karte nicht ausserhalb
des scrollbaren Bereichs landet und unerreichbar wird. */
@media (min-width: 1100px) {
.pfad-sec { overflow: visible; }
.programs {
width: 100%;
max-width: 100vw;
padding-left: var(--edge);
padding-right: var(--edge);
overflow-x: auto;
justify-content: safe center;
}
}
/* Passen nicht alle Karten nebeneinander, brechen sie in eine zweite
Zeile um, statt seitlich aus dem Bild zu laufen. So steht die Gruppe
auf jeder Fensterbreite mittig und nichts muss geschoben werden. */
@media (min-width: 1100px) {
.programs {
flex-wrap: wrap;
overflow-x: visible;
row-gap: clamp(24px, 2.4vw, 40px);
justify-content: center;
}
}
/* Wortmarke ueber den Mond, nicht auf ihn: die Marke sass bisher genau
auf seiner Oberkante und schnitt ihn an. Der Bildausschnitt rueckt
etwas nach unten, damit zwischen Leiste und Mond Platz fuer die Marke
entsteht, und die Ueberschrift folgt dichter unter dem Mond, damit
Marke, Mond und Worte als ein Bild gelesen werden. */
.hero__bg { object-position: center 34%; }
.hero__brand { top: clamp(58px, 6.4svh, 96px); }
.hero { padding-bottom: clamp(40px, 9svh, 130px); }
@media (max-height: 820px) and (min-width: 901px) {
.hero__brand { top: clamp(50px, 5.6svh, 78px); }
.hero { padding-bottom: clamp(28px, 6svh, 80px); }
}
@media (max-width: 900px) {
.hero__brand { top: clamp(48px, 6svh, 84px); }
.hero { padding-bottom: clamp(28px, 7svh, 90px); }
}
/* Der Mond sitzt im Video und laesst sich nicht verschieben: das Bild
ragt nur seitlich ueber den Rahmen hinaus, in der Hoehe nicht. Wie
viel Platz zwischen Leiste und Mond bleibt, haengt deshalb allein an
der Fensterhoehe. Auf flachen Schirmen ist es wenig, dort wird die
Marke kleiner, damit sie ueber dem Mond steht und ihn nicht anschneidet. */
.hero__bg { object-position: center center; }
.hero__brand { top: clamp(20px, 2.6svh, 40px); width: min(470px, 36vw); }
@media (max-height: 1000px) and (min-width: 901px) {
.hero__brand { top: clamp(16px, 2.2svh, 28px); width: min(400px, 30vw); }
}
@media (max-height: 820px) and (min-width: 901px) {
.hero__brand { top: clamp(12px, 1.8svh, 22px); width: min(340px, 26vw); }
}
@media (max-width: 900px) {
.hero__brand { top: clamp(16px, 2.4svh, 32px); width: min(300px, 58vw); }
}
/* ===== Auftakt an den Mond gebunden =====
Marke, Mond und Worte wurden bisher unabhaengig voneinander gesetzt:
die Marke von oben in Pixeln, der Text von unten weg, der Mond fest im
Video. Auf jeder Fensterhoehe traf das anders aufeinander, auf flachen
Schirmen lag die Ueberschrift im Mond.
Der Mond liegt im Video verlaesslich zwischen 14 und 44 Prozent der
Bildhoehe. Beides richtet sich jetzt daran aus und rechnet in
Bildschirmhoehen statt in Pixeln: die Marke darueber, die Worte
darunter. Auch ihre Groesse haengt an der Hoehe, damit sie auf flachen
Schirmen nicht in den Mond waechst. */
.hero { align-items: flex-start; padding-top: 0; padding-bottom: 0; }
.hero__brand {
top: 3.2svh;
height: 9.6svh;
width: auto;
max-width: 46vw;
}
.hero__inner { margin-top: 49svh; padding-bottom: 4svh; }
@media (max-width: 900px) {
.hero__brand { height: 8.4svh; max-width: 62vw; }
.hero__inner { margin-top: 47svh; }
}
/* Auf mittelhohen Fenstern reichte der Platz unter dem Mond nicht ganz
fuer den Textblock, der Knopf rutschte um wenige Pixel unter die
Kante. Dort ruecken die Zeilen enger zusammen und der Block beginnt
etwas frueher; die Luft unter dem Mond bleibt dabei erhalten. */
@media (max-height: 1080px) and (min-width: 901px) {
.hero__inner { margin-top: 46.5svh; }
.hero__headline { margin: 16px 0 16px; }
.hero__sub { margin-bottom: 22px; }
.hero__inner .stores-note { margin-top: 14px; }
.hero__trust { margin-top: 10px; }
}
@media (max-height: 900px) and (min-width: 901px) {
.hero__inner { margin-top: 45svh; }
.hero__headline { margin: 12px 0 12px; }
.hero__sub { margin-bottom: 18px; }
}
/* Der Mond bringt einen weiten Lichthof mit, der rund fuenfzig Pixel
ueber seinem hellen Kern beginnt. Marke und Ueberschrift lagen darin,
auch wenn sie den Kern nicht beruehrten. Das Bild wird deshalb hoeher
als der Rahmen und rutscht damit nach unten: oben entsteht Platz fuer
die Marke, und die Worte ruecken naeher an den Mond, weil der bis
weiter nach unten reicht. */
.hero__bg { height: 116%; }
.hero__brand { top: 2.2svh; height: 8.2svh; }
.hero__inner { margin-top: 54svh; }
@media (max-height: 1080px) and (min-width: 901px) {
.hero__bg { height: 122%; }
.hero__brand { top: 1.8svh; height: 7.4svh; }
.hero__inner { margin-top: 52svh; }
}
@media (max-height: 900px) and (min-width: 901px) {
.hero__bg { height: 128%; }
.hero__inner { margin-top: 50svh; }
}
@media (max-width: 900px) {
.hero__bg { height: 118%; }
.hero__brand { top: 2svh; height: 7.6svh; }
.hero__inner { margin-top: 52svh; }
}
/* Auf flachen Fenstern war die Erweiterung zu stark: der Mond wuchs
soweit, dass die Ueberschrift wieder in seinem Kern lag und der Knopf
unter die Kante rutschte. Dort faellt sie kleiner aus. */
@media (max-height: 1080px) and (min-width: 901px) {
.hero__bg { height: 110%; }
.hero__inner { margin-top: 50svh; }
}
@media (max-height: 900px) and (min-width: 901px) {
.hero__bg { height: 104%; }
.hero__inner { margin-top: 47svh; }
.hero__brand { top: 1.6svh; height: 6.8svh; }
}
/* Marke zwanzig Pixel tiefer. */
.hero__brand { top: calc(2.2svh + 20px); }
@media (max-height: 1080px) and (min-width: 901px) { .hero__brand { top: calc(1.8svh + 20px); } }
@media (max-height: 900px) and (min-width: 901px) { .hero__brand { top: calc(1.6svh + 20px); } }
@media (max-width: 900px) { .hero__brand { top: calc(2svh + 20px); } }
/* Auf sehr flachen Fenstern reicht der Platz nicht fuer die vollen
zwanzig Pixel, dort waere die Marke wieder im Lichthof gelandet. */
@media (max-height: 820px) and (min-width: 901px) { .hero__brand { top: calc(1.6svh + 8px); } }
/* Der Wolkenhimmel liegt fest hinter der ganzen Seite. Der Boden wird
deshalb schon im Krisen-Hinweis blickdicht: darunter ist nur noch
Schwarz, keine Wolke schwebt mehr im Grund. */
.hilfe-banner {
background: linear-gradient(to bottom,
rgba(8, 7, 13, 0.94) 0%,
var(--night-abyss) 40%,
var(--night-abyss) 100%);
padding-top: 34px;
}
/* Die Blende setzt schon ueber dem Hinweis an, sonst treiben die letzten
Wolken noch knapp ueber dem Boden. */
.hilfe-banner::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
height: 260px; pointer-events: none;
background: linear-gradient(to bottom,
rgba(8, 7, 13, 0) 0%,
rgba(8, 7, 13, 0.5) 52%,
rgba(8, 7, 13, 0.94) 100%);
}
.footer { background: var(--night-abyss); }
/* Der Fuss ist Abbinder, kein eigenes Kapitel: eine Zeile, Wortmarke und
Rechtslinks auf gleicher Hoehe, danach das Copyright. */
.footer { padding: 30px 0 34px; }
.footer::before { margin-bottom: 26px; }
.footer__inner { align-items: center; row-gap: 18px; }
.footer__left { line-height: 1.7; }
.footer__left img { margin-bottom: 9px; }
@media (max-width: 640px) {
.footer { padding: 24px 0 30px; }
.footer__inner { align-items: flex-start; }
}