/* ============================================================
Kochplan – Landingpage
Apple-Look, und zwar der, der aus Zurueckhaltung entsteht:
viel Weissraum, eine grosse Headline mit engem Letter-Spacing,
ruhige Graustufen — und das Produktbild traegt die Seite. Die
Markenfarbe (Paprika) ist nur Akzent: Kicker, Icons, ein Wort in
der Headline. Keine bunten Flaechen.
Die Seite ist auf SCREENSHOTS gebaut. Jeder der vier Bildschirme
bekommt einen eigenen Abschnitt, in dem er gross genug steht, dass
man den Plan darauf wirklich liest — daneben genau ein Satz.
Hausregeln: keine externen Fonts, keine CDNs, keine Emoji. Der
Font-Stack nimmt auf Apple-Geraeten SF Pro und faellt sonst sauber
auf die System-UI zurueck.
============================================================ */
:root {
--ink: #1d1d1f; /* Ueberschriften, fast schwarz */
--body: #494950; /* Fliesstext */
--muted: #86868b; /* Sekundaertext */
--bg: #ffffff;
--bg-alt: #f5f5f7; /* die ruhige Sektionsflaeche */
--bg-dark: #111113; /* das eine dunkle Band */
--card: #ffffff;
--hairline: rgba(0,0,0,0.10);
--hairline-2: rgba(0,0,0,0.16);
--accent: #b3402c; /* Kochplan-Paprika, sparsam eingesetzt */
--accent-ink: #8f3222;
--radius: 18px;
--radius-lg: 28px;
--container: 1080px;
--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--ink: #f5f5f7;
--body: #c7c7cc;
--muted: #8e8e93;
--bg: #000000;
--bg-alt: #0d0d0f;
--bg-dark: #16161a;
--card: #1c1c1e;
--hairline: rgba(255,255,255,0.12);
--hairline-2: rgba(255,255,255,0.20);
--accent: #e8785f;
--accent-ink: #f0937d;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--body);
line-height: 1.5;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.accent { color: var(--accent); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.container--narrow { max-width: 720px; }
/* Der kleine Grossbuchstaben-Vorspann ueber jeder Headline. */
.kicker {
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--accent);
margin-bottom: 14px;
}
/* ---------- Navigation: durchscheinend wie Apples Header ---------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,0.72);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--hairline);
}
@media (prefers-color-scheme: dark) { .nav { background: rgba(0,0,0,0.72); } }
.nav__inner {
display: flex; align-items: center; justify-content: space-between;
height: 48px; gap: 18px;
}
.brand {
display: inline-flex; align-items: center; gap: 8px;
font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
}
.brand__icon { width: 22px; height: 22px; border-radius: 6px; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a { font-size: 12px; color: var(--body); transition: color .2s ease; }
.nav__links a:hover { color: var(--ink); }
.lang { display: inline-flex; gap: 4px; margin-left: 6px; }
.lang__btn {
border: 0; background: transparent; padding: 3px; cursor: pointer;
border-radius: 5px; line-height: 0; opacity: .45; transition: opacity .2s ease;
}
.lang__btn:hover { opacity: .8; }
.lang__btn--active { opacity: 1; }
.lang__btn svg { display: block; border-radius: 2px; }
/* ---------- Hero: eine Aussage, ein Bild ---------- */
.hero { padding: 92px 0 0; text-align: center; overflow: hidden; }
.hero__inner { max-width: 940px; }
.hero h1 {
font-size: clamp(40px, 6.6vw, 78px);
line-height: 1.05;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--ink);
}
/* Die zwei Zeilen der Headline stehen als Bloecke untereinander — mit
waere der Umbruch auch dann erzwungen, wenn kein Platz fehlt. */
.hero h1 span { display: block; }
.lead {
margin: 22px auto 0;
font-size: clamp(17px, 1.7vw, 21px);
line-height: 1.5;
color: var(--body);
max-width: 30em;
}
.hero__note { margin-top: 20px; font-size: 13px; color: var(--muted); }
/* Die Buehne: das Geraet steht gross und mittig, dahinter ein sehr
leiser Farbschimmer — kein Verlauf, der die Aufmerksamkeit zieht. */
.hero__stage {
position: relative; margin-top: 56px;
display: flex; justify-content: center; align-items: flex-end;
}
/* Die beiden aeusseren Geraete stehen HINTER dem mittleren und tauchen ein
Stueck in es hinein; der negative Rand ist genau die Ueberlappung. */
.phone--side { width: 232px; z-index: 0; opacity: .92; }
.phone--side .phone__shot { border-radius: 31px; }
.phone--left { margin-right: -58px; transform: translateY(-18px) rotate(-4deg); }
.phone--right { margin-left: -58px; transform: translateY(-18px) rotate(4deg); }
.hero__stage .phone--xl { z-index: 1; }
.hero__halo {
position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
width: min(760px, 92vw); height: 66%;
background: radial-gradient(46% 56% at 50% 50%, rgba(179,64,44,0.18), transparent 70%);
pointer-events: none; z-index: 0;
}
/* Der Screenshot laeuft unten sanft aus, statt hart abzuschneiden. */
.hero__stage .phone { -webkit-mask-image: none; mask-image: none; }
/* ---------- Geraet ---------- */
.phone {
position: relative;
width: 268px;
padding: 9px;
background: linear-gradient(160deg, #d8d8dc, #9a9aa0);
border-radius: 44px;
box-shadow: 0 30px 70px -30px rgba(0,0,0,0.45);
}
@media (prefers-color-scheme: dark) {
.phone { background: linear-gradient(160deg, #3a3a3e, #1a1a1c); }
}
.phone--xl { width: 358px; border-radius: 56px; padding: 11px; }
.phone--xl .phone__shot { border-radius: 46px; }
/* height:auto ist Pflicht: die ![]()
tragen width/height-Attribute (gut gegen
Layout-Spruenge). Ohne height:auto bliebe das Hoehen-Attribut wirksam und
wuerde den Screenshot in die Laenge ziehen. */
.phone__shot {
width: 100%; height: auto; display: block;
border-radius: 36px; background: var(--bg-alt);
}
/* ---------- Store-Reihe ---------- */
.store-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.store-row--center { justify-content: center; }
.store-badge { display: inline-block; transition: opacity .2s ease; }
.store-badge:hover { opacity: .75; }
.store-badge[hidden] { display: none !important; }
.store-soon { margin-top: 28px; font-size: 15px; font-weight: 500; color: var(--ink); }
.store-soon[hidden] { display: none !important; }
/* ---------- Zahlen ---------- */
.stats { padding: 86px 0 24px; }
.stats__inner {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 34px; text-align: center;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stat__num {
font-size: clamp(38px, 5vw, 58px); font-weight: 600;
letter-spacing: -0.04em; color: var(--accent); line-height: 1;
}
.stat__label { font-size: 14px; color: var(--muted); max-width: 20em; }
/* ---------- Der Screenshot-Abschnitt ---------- */
.story { padding: 104px 0; overflow: hidden; }
.story--alt { background: var(--bg-alt); }
.story--dark { background: var(--bg-dark); }
.story__inner {
display: grid; grid-template-columns: 1fr minmax(0, 300px);
gap: 72px; align-items: center;
}
/* Umgedreht: das Geraet links, der Text rechts. Nur die Reihenfolge
aendert sich, nicht die Quelltext-Reihenfolge — der Screenreader
liest weiter Ueberschrift vor Bild. */
.story--flip .story__inner { grid-template-columns: minmax(0, 300px) 1fr; }
.story--flip .story__copy { order: 2; }
.story--flip .story__shot { order: 1; }
.story h2 {
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.13;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--ink);
max-width: 14em;
text-wrap: balance;
}
.story__copy > p {
margin-top: 18px; font-size: 17px; color: var(--body); max-width: 34em;
}
.story__shot { display: flex; justify-content: center; }
/* Die Haken-Liste. Bewusst ohne echtes