/* 2HOT2PAY — Startseite. Bauplan §5, §8, §9, §10, §11. */
/* font-display: optional statt swap (Founder-Auftrag 22.09., "kein Aufblitzen"):
zusammen mit dem im ist Anton praktisch immer vor
dem ersten Paint da; "optional" verhindert den sichtbaren Schriftwechsel bei
langsamem Netz, statt nur kurz zu blockieren wie "swap". */
@font-face { font-family: 'Anton'; src: url('../fonts/anton-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: 'Geist'; src: url('../fonts/geist-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/geist-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/geist-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/geist-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Lenis (weiches Scrollen, §9/Bauplan-Nachtrag) übernimmt das Scrollen selbst —
die native CSS-Glättung würde sich sonst mit Lenis' eigenem Rhythmus beißen. */
html.lenis { scroll-behavior: auto; }
html { overflow-x: hidden; }
body {
margin: 0;
overflow-x: hidden;
background: var(--band-night);
color: var(--foreground);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p, ul, ol, dl, blockquote, figure { margin: 0; }
button { font-family: inherit; }
/* --- Sprunglink --- */
.skip {
position: absolute; left: 1rem; top: -100px;
background: var(--pink); color: var(--pink-ink);
padding: 12px 20px; border-radius: var(--r-pill);
z-index: 1000; font-family: var(--font-body); font-weight: 700;
}
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
/* --- Typografie-Rollen --- */
.eyebrow, .label { font: 700 var(--fs-label)/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
/* line-height 1.1 statt der ursprünglich engeren 0.9: bei per-Buchstabe/-Zeile
animiertem Text (motion.js, SplitText erzeugt inline-block-Wrapper je Zeichen/
Zeile) schneidet 0.9 die Punkte von "Ü/Ä/Ö" ab — reproduziert im Browser
22.09. auch mit reinem inline-block ohne SplitText, betrifft also jede
Überschrift mit Umlaut ("Gespräch", "läuft's", "für", "heiß"), nicht nur den
Hero-Titel. Zwischenwerte (0.92–1.05) reichten nicht zuverlässig; 1.1 ist der
kleinste Wert, der die Punkte in jedem Test sicher stehen lässt. */
h1 { font: 400 var(--fs-hero-title)/1.1 var(--font-display); letter-spacing: 0.005em; text-transform: uppercase; margin: 0; }
.display-xl { font: 400 var(--fs-display-xl)/1.1 var(--font-display); letter-spacing: 0.005em; text-transform: uppercase; margin: 0; }
.display, h2 { font: 400 var(--fs-display)/1.1 var(--font-display); letter-spacing: 0.005em; text-transform: uppercase; margin: 0; }
h2.section-title { font-size: var(--fs-h2); }
/* SplitText zerlegt Wörter in einzelne Zeichen-Spans (motion.js); ohne
white-space:nowrap auf dem Wort-Wrapper darf der Browser mitten im Wort
umbrechen ("Mach mehr aus deine|m Profil." wurde beobachtet, 22.09.). */
.hero__title .word,
[data-reveal="heading-slant"] .word,
.steps li span .word { white-space: nowrap; }
h3, .h3 { font: 600 var(--fs-h3)/1.15 var(--font-body); letter-spacing: -0.01em; margin: 0; }
.lead { font: 400 var(--fs-lead)/1.4 var(--font-body); letter-spacing: -0.01em; color: var(--muted); margin: 0; }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.stat { font: 400 var(--fs-stat)/0.9 var(--font-display); letter-spacing: 0; }
/* --- Layout --- */
.wrap { max-width: var(--content-max); margin: 0 auto; padding-left: var(--content-pad); padding-right: var(--content-pad); }
main { display: block; }
.panel {
position: relative;
border-radius: var(--r-panel) var(--r-panel) 0 0;
margin-top: -40px;
padding: var(--section-space) 0;
border-top: 1px solid var(--border-strong);
isolation: isolate;
}
.panel:first-of-type { margin-top: 0; }
.panel--night { background: var(--band-night); }
.panel--graphite { background: var(--band-graphite); }
.panel--smoke { background: var(--band-smoke); }
.panel--ember { background: var(--band-ember); }
.panel--pink { background: var(--band-pink); color: var(--pink-ink); padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.panel--glow::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 46, 126, .08), transparent 70%);
}
/* --- Navigation --- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-4) var(--content-pad);
transition: background-color .3s var(--ease-out), backdrop-filter .3s var(--ease-out), transform .5s var(--ease-bounce);
}
.nav.nav--solid { background: rgba(17, 17, 19, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav.nav--hidden { transform: translateY(-110%); }
.nav__brand { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo { display: block; height: 40px; width: auto; }
@media (max-width: 640px) { .nav__logo { height: 34px; } }
.nav__links { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.nav__links a {
display: inline-block; padding: 10px 18px; border-radius: var(--r-pill);
border: 1px solid var(--border-strong); font: 700 var(--fs-label)/1 var(--font-body);
letter-spacing: 0.06em; text-transform: uppercase;
}
.nav__links a:hover { border-color: var(--pink-line); color: var(--pink); }
.nav__right { display: flex; align-items: center; gap: var(--sp-3); }
.lang-switch { display: flex; gap: var(--sp-1); font: 700 var(--fs-label)/1 var(--font-body); }
.lang-switch a { padding: 8px 10px; border-radius: var(--r-pill); }
.lang-switch a[aria-current="true"] { background: var(--surface-3); color: var(--foreground); }
.lang-switch a:not([aria-current="true"]) { color: var(--muted); }
.nav__menu-btn { display: none; background: none; border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--foreground); width: 44px; height: 44px; align-items: center; justify-content: center; }
@media (max-width: 900px) {
.nav__links { display: none; }
.nav__menu-btn { display: inline-flex; }
}
.mobile-menu {
position: fixed; inset: 0; z-index: 99; background: var(--band-night);
display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { font: 400 2rem/1 var(--font-display); text-transform: uppercase; }
/* --- Botones --- */
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
height: 52px; padding: 0 var(--sp-8); border-radius: var(--r-pill);
font: 700 var(--fs-label)/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
border: 2px solid transparent; cursor: pointer; overflow: hidden;
transition: box-shadow .2s var(--ease-out), transform .15s var(--ease-out), background-color .2s var(--ease-out);
}
.btn:active { transform: scale(.955); }
.btn-primary { background: var(--pink); color: var(--pink-ink); }
.btn-primary:hover { background: var(--pink-hover); box-shadow: var(--glow-pink); }
.btn-ghost { background: transparent; color: var(--foreground); border-color: var(--foreground); }
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }
/* Knopf-Rolle (A9) — nur Hover-fähige Geräte, Bewegung erlaubt */
.btn[data-roll] span { display: inline-block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.btn[data-roll] span {
transition: transform .3s var(--ease-bounce);
transform-style: preserve-3d;
}
.btn[data-roll]::after {
content: attr(data-text);
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
transform: translateY(100%) rotateX(-90deg);
transition: transform .3s var(--ease-bounce);
}
.btn[data-roll]:hover span { transform: translateY(-100%) rotateX(90deg); }
.btn[data-roll]:hover::after { transform: translateY(0) rotateX(0); }
}
/* --- Link-Unterstrich (A10) --- */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .25s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); }
/* --- Hero --- */
.hero { padding-top: calc(var(--sp-24) + 48px); }
/* --- Video-Loop-Plätze (Higgsfield-Medienplan V1–V3, B1–B4 optional) ---------
Platzhalter mit festem Verhältnis, damit später ein