/* Handy Performance — geteiltes Design-System.
Regelquelle: apple.design.md (Google-Labs-DESIGN.md-Format), strikt umgesetzt.
Eine Handlungsfarbe (Action Blue), abwechselnd helle und fast-schwarze
Vollbildkacheln, genau ein Schatten, keine dekorativen Verläufe, Gewicht 500
existiert nicht. Schriftgrößen in rem: Layout skaliert mit der Textgröße des
Nutzers (Dynamic Type). */
:root {
/* Farben exakt nach apple.design.md. Action Blue ist die EINZIGE
Handlungsfarbe — jeder Link, jede Pille, jeder Fokusring. */
/* Spring Green (Kundenentscheidung). Zwingend ein ZWEI-TON-System:
#00E676 ist als Textlink auf Weiss nur 1,67:1 — unlesbar. Deshalb traegt
der helle Ton ausschliesslich FLAECHEN, und Text auf hellem Grund bekommt
den dunklen Geschwisterton derselben Farbfamilie.
Fuellung #00e676 (Schrift darauf schwarz, 10,08:1)
Text auf Weiss #00753c (5,2:1)
Text auf Kachel #00e676 (8,93:1)
Wer hier etwas aendert, muss beide Rollen mitdenken. */
--accent: #00e676; /* nur Flaechen */
--on-accent: #1d1d1f; /* Schrift auf der Flaeche */
--accent-text: #00753c; /* Text/Rahmen auf hellem Grund */
--accent-focus: #00753c; /* Fokusring, muss auf Weiss sichtbar sein */
--accent-on-dark: #00e676; /* Text auf dunkler Kachel */
--ink: #1d1d1f; /* colors.ink / colors.body */
--ink-soft: #6e6e73;
--ink-muted-80: #333333;
--ink-muted-48: #7a7a7a;
--on-dark: #ffffff; /* colors.body-on-dark */
--body-muted: #cccccc; /* colors.body-muted, nur auf dunklen Kacheln */
--bg: #ffffff; /* colors.canvas */
--bg-soft: #f5f5f7; /* colors.canvas-parchment */
--pearl: #fafafc; /* colors.surface-pearl */
--tile-1: #272729; /* colors.surface-tile-1 */
--tile-2: #2a2a2c; /* colors.surface-tile-2 */
--tile-3: #252527; /* colors.surface-tile-3 */
--black: #000000; /* colors.surface-black */
--chip-translucent: rgba(210,210,215,0.64);
--hairline: #e0e0e0; /* colors.hairline */
--divider-soft: #f0f0f0; /* colors.divider-soft */
--hairline-on-dark: rgba(255,255,255,0.18);
/* rounded-Leiter, unveraendert aus der md */
--r-xs: 5px;
--r-sm: 8px;
--r-md: 11px;
--r-lg: 18px;
--radius: var(--r-lg);
--pill: 9999px;
/* Der einzige Schatten des Systems: nur unter Produktfotos.
Stillgelegt, solange die Produkt-WebPs keinen Alphakanal haben
(sie sind auf #f5f5f7 geflattet) — sonst schattiert er das Rechteck. */
--shadow-product: 3px 5px 30px rgba(0,0,0,0.22);
--spring: cubic-bezier(0.32, 0.72, 0, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* scroll-padding: Anker (#tarife …) nicht unter der Sticky-Nav verschwinden lassen */
html { scroll-behavior: smooth; scroll-padding-top: 112px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
font: 100%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
font-optical-sizing: auto;
/* -0,374px auf 17px = -0,022em. Das Tracking IST die Apple-Lesestimme. */
letter-spacing: -0.022em;
background: var(--bg); color: var(--ink);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
/* Tap-Delay töten: kein 300ms-Warten auf Doppeltipp.
Kein grauer iOS-Tap-Blitz — Press-Feedback liefert :active (scale), sofort und ohne Verzug. */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Fokus sichtbar, ohne Klick-Ring */
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(4,106,56,0.18); }
/* Aufzählungen mit „·" dürfen nur an den Trennern umbrechen, nie mitten
in einer Adresse oder Uhrzeit. */
.nb { white-space: nowrap; }
/* Satzbild: keine einzelnen Zeichen auf der letzten Zeile (ein Punkt hinter
einem Link rutscht sonst allein nach unten), Überschriften ausbalanciert. */
p, li { text-wrap: pretty; }
h1, h2, h3, .section-h, .display { text-wrap: balance; }
/* ── Nav: zwei Zeilen nach Apple-Grammatik.
Oben die schwarze Utility-Leiste (Sprachen, beide Läden, Instagram),
darunter die milchige Produktleiste. Beide in EINEM sticky Wrapper —
ein Sticky-Element ist robuster als zwei gestapelte. ── */
nav {
position: sticky; top: 0; z-index: 100;
/* Material liegt auf dem Wrapper, damit es randlos läuft — die schwarze
Leiste ist deckend und überdeckt es in ihrer Zeile ohnehin. */
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
background: rgba(245,245,247,0.80);
transition: box-shadow 300ms var(--spring);
}
nav.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.07), 0 8px 24px rgba(0,0,0,0.05); }
/* Schwarze Global-Leiste: echte Ladeninfo, kein geliehenes Konzern-Chrome.
Die Sprachen stehen als Aussage da, nicht als Link — Sprach-Unterseiten
gibt es bewusst nicht. */
.nav-global {
background: #000; color: #fff;
font-size: 0.75rem; letter-spacing: -0.01em;
}
.nav-global { display:none !important; }
.nav-global-inner {
max-width: 1024px; margin: 0 auto; padding: 0 22px;
height: 44px; display: flex; align-items: center; gap: 18px;
}
.nav-global .langs { color: rgba(255,255,255,0.72); white-space: nowrap; }
.nav-global .global-right {
margin-left: auto; display: flex; align-items: center; gap: 18px;
min-width: 0;
}
.nav-global a {
position: relative; color: rgba(255,255,255,0.86); white-space: nowrap;
transition: color 150ms ease-out;
}
.nav-global a:hover { color: #fff; }
/* 12px-Text, aber 44px Daumenfläche — unsichtbares Overlay statt sichtbarem
Padding, damit die Leiste ihre 44px Gesamthöhe behält. Global, nicht in
der Mobile-Query: auf dem Tablet ist das genauso ein Touch-Ziel. */
.nav-global a::after {
content: ""; position: absolute; left: -6px; right: -6px;
top: 50%; transform: translateY(-50%); height: 44px;
}
.nav-global .sep { color: rgba(255,255,255,0.3); }
/* Produktleiste: Parchment-Material statt Weiß (Spec: canvas-parchment @ 80 %) */
.nav-inner {
max-width: 1024px; margin: 0 auto; padding: 0 22px;
height: 52px; display: flex; align-items: center; gap: 34px;
}
.nav-logo { position: relative; display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.02em; font-size: 0.9375rem; }
/* Trefferfläche auf 44pt, ohne die Wortmarke optisch zu verändern.
Auf sehr schmalen Geräten ist die Wortmarke ausgeblendet und nur das
26px-Badge bleibt — deshalb wächst die Fläche auch zur Seite. */
.nav-logo::after {
content: ""; position: absolute; left: -9px; right: -9px;
top: 50%; transform: translateY(-50%); height: 44px;
}
.nav-logo .hp-badge {
width: 26px; height: 26px; border: 1.6px solid var(--ink); border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.6875rem; font-weight: 700;
}
.nav-links { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.nav-links a:not(.nav-cta) {
position: relative;
font-size: 0.84375rem; color: rgba(26,26,26,0.82);
transition: color 150ms ease-out;
}
/* Auf dem Tablet ist die Desktop-Nav ein Touch-Ziel. Trefferfläche unsichtbar
auf 44px ziehen, statt die Schrift oder die Abstände zu verändern. */
.nav-links a:not(.nav-cta)::after {
content: ""; position: absolute; left: 0; right: 0;
top: 50%; transform: translateY(-50%); height: 44px;
}
.nav-links a:not(.nav-cta):hover { color: var(--accent-text); }
.nav-links a.active { color: var(--accent-text); font-weight: 600; }
.nav-cta {
position: relative;
background: var(--accent); color: var(--on-accent); font-size: 0.8125rem; font-weight: 600;
padding: 7px 16px; border-radius: var(--pill);
transition: background 150ms ease-out, transform 100ms ease-out;
}
/* Trefferfläche auf 44pt (Apple-HIG-Minimum) ziehen, ohne die Pille optisch aufzublasen */
.nav-cta::after {
content: ""; position: absolute; left: 0; right: 0;
top: 50%; transform: translateY(-50%); height: 44px;
}
.nav-cta:hover { background: var(--accent-focus); }
.nav-cta:active { transform: scale(0.95); }
/* ── Mobile-Nav: Burger + Menü als transluzentes Material ── */
/* Größer und damit sicherer zu treffen: 52px Fläche, kräftigere Striche. */
.nav-burger {
display: none; width: 52px; height: 52px; margin-left: 2px; margin-right: -12px;
background: none; border: 0; cursor: pointer; touch-action: manipulation;
flex-direction: column; align-items: center; justify-content: center; gap: 6px;
border-radius: 50%;
transition: background 150ms ease-out, transform 100ms ease-out;
}
.nav-burger:active { background: rgba(0,0,0,0.06); transform: scale(0.94); }
.nav-burger span {
width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
transition: transform 350ms var(--spring);
}
.nav-burger.open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-menu {
position: absolute; top: 100%; left: 0; right: 0;
display: none; flex-direction: column; padding: 6px 22px 14px;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
background: rgba(255,255,255,0.88);
box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.10);
opacity: 0; transform: translateY(-16px); pointer-events: none; visibility: hidden;
clip-path: inset(0 0 100% 0);
transition: opacity 300ms var(--spring), transform 380ms var(--spring),
clip-path 380ms var(--spring), visibility 0s linear 380ms;
}
.nav-menu a {
padding: 13px 2px; font-size: 1.0625rem; font-weight: 600;
border-bottom: 1px solid rgba(0,0,0,0.06);
opacity: 0; transform: translateY(-10px);
transition: color 150ms ease-out, opacity 260ms var(--spring), transform 260ms var(--spring);
}
.nav-menu.open a { opacity: 1; transform: none; transition-duration: 150ms, 420ms, 420ms; }
.nav-menu.open a:nth-child(1) { transition-delay: 0s, 60ms, 60ms; }
.nav-menu.open a:nth-child(2) { transition-delay: 0s, 105ms, 105ms; }
.nav-menu.open a:nth-child(3) { transition-delay: 0s, 150ms, 150ms; }
.nav-menu.open a:nth-child(4) { transition-delay: 0s, 195ms, 195ms; }
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a:active { transform: scale(0.95); }
.nav-menu a.active { color: var(--accent-text); font-weight: 600; }
/* ── Buttons: Feedback auf Press, nicht Release.
Primär = ein Wort auf Fläche · Sekundär = zwei Wörter ohne Fläche ── */
.btn-primary, .wa-btn {
transition: background 150ms ease-out, transform 100ms ease-out, box-shadow 300ms var(--spring);
}
.btn-primary:active, .wa-btn:active { transform: scale(0.95); }
.btn-primary {
display: inline-flex; align-items: center; gap: 9px;
background: var(--accent); color: var(--on-accent); font-size: 1.0625rem; font-weight: 600;
padding: 13px 28px; border-radius: var(--pill);
}
.btn-primary:hover { background: var(--accent-focus); box-shadow: 0 8px 24px rgba(4,106,56,0.28); }
.btn-primary svg { width: 19px; height: 19px; fill: currentColor; }
.btn-ghost {
display: inline-flex; align-items: center; gap: 6px;
font-size: 1.0625rem; font-weight: 600; color: var(--accent-text); padding: 13px 10px;
transition: transform 100ms ease-out;
}
.btn-ghost:hover { text-decoration: underline; }
.btn-ghost:active { transform: scale(0.95); }
/* Outline-Pill (Apple-Homepage-Zweitbutton „Kaufen") */
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
font-size: 1.0625rem; font-weight: 600; color: var(--accent-text);
border: 1px solid var(--accent-text); border-radius: var(--pill); padding: 12px 27px;
transition: background 150ms ease-out, color 150ms ease-out, transform 100ms ease-out;
}
.btn-outline:hover { background: var(--accent); color: var(--on-accent); }
.btn-outline:active { transform: scale(0.95); }
/* Hero-Grund: flaches Parchment. Der Olive-Verlauf ist entfallen — das System
kennt keine dekorativen Gradients, Atmosphäre kommt aus Fotografie.
Der Farbwechsel zur nächsten Sektion IST der Trenner. */
.hero-tint {
background: var(--bg-soft);
}
.wa-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: var(--accent); color: var(--on-accent); font-size: 0.90625rem; font-weight: 600;
padding: 11px 22px; border-radius: var(--pill);
min-height: 44px; /* Apple-HIG-Minimum, vorher 43,75px */
}
.wa-btn:hover { background: var(--accent-focus); }
.wa-btn svg { width: 17px; height: 17px; fill: currentColor; }
/* ── Typografie (Referenzwerte 7.2, rem-basiert) ── */
/* Eyebrow: ein Wort, kein Satzzeichen, sitzt 0,2x über der Headline */
.eyebrow-label {
display: block; font-size: clamp(1.0625rem, 2vw, 1.5rem); font-weight: 600;
letter-spacing: 0.009em; color: var(--ink-soft);
margin-bottom: 0.2em;
}
.display {
font-size: clamp(2.75rem, 7.5vw, 5rem);
line-height: 1.05; letter-spacing: -0.015em; font-weight: 600;
}
.display .thin { color: var(--ink-soft); }
h2.section-h {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.07; letter-spacing: -0.009em; font-weight: 600;
}
.sub {
font-size: clamp(1.1875rem, 2.6vw, 1.5625rem); line-height: 1.4; letter-spacing: -0.005em;
color: var(--ink-soft); font-weight: 400;
}
.condition {
font-size: 0.9375rem; color: var(--ink-soft); letter-spacing: 0;
}
/* Fließtext in schmaler Spalte (330–560px, ~33 Zeichen) */
.body-col { max-width: 560px; font-size: 1.0625rem; line-height: 1.47; color: var(--ink); }
.body-col p + p { margin-top: 1em; }
/* ── Sektionen: Whitespace als Verhältnis (≈5x Headline zwischen Blöcken) ── */
.section { padding: clamp(110px, 16vh, 220px) 22px; }
.section.tight { padding: clamp(80px, 11vh, 140px) 22px; }
.section-inner { max-width: 1024px; margin: 0 auto; }
.section.soft { background: var(--bg-soft); }
.center { text-align: center; }
/* ── Dunkle Vollbildkacheln (product-tile-dark / -2 / -3).
Der Farbwechsel IST der Sektionstrenner — keine Border, keine Linie, kein
Schatten. Drei Mikrostufen, damit zwei benachbarte dunkle Kacheln sich
gerade eben voneinander abheben.
Umgesetzt, indem die Farbtokens INNERHALB der Kachel neu belegt werden:
jede Komponente, die --ink / --ink-soft / --hairline benutzt, kippt damit
automatisch mit. Einzeln nachziehen wäre eine Liste, die bei jeder neuen
Komponente wieder Lücken hat — genau so ist das FAQ auf 1,13:1 gelandet. ── */
.dark, .dark-2, .dark-3 {
--ink: #ffffff;
--ink-soft: var(--body-muted);
--hairline: var(--hairline-on-dark);
--divider-soft: var(--hairline-on-dark);
color: var(--on-dark);
}
.dark { background: var(--tile-1); }
.dark-2 { background: var(--tile-2); }
.dark-3 { background: var(--tile-3); }
/* Karten auf dunkler Kachel: kein weißer Kasten (der würde die Kachel
zerschneiden), sondern dieselbe Fläche mit heller Haarlinie. */
.dark .card, .dark .tile, .dark .vip-tile, .dark .feature-card,
.dark-2 .card, .dark-2 .tile, .dark-2 .vip-tile, .dark-2 .feature-card,
.dark-3 .card, .dark-3 .tile, .dark-3 .vip-tile, .dark-3 .feature-card {
background: transparent;
}
.dark a.tile:hover, .dark .card:hover, .dark .vip-tile:hover, .dark .feature-card:hover,
.dark-2 a.tile:hover, .dark-2 .card:hover, .dark-2 .vip-tile:hover, .dark-2 .feature-card:hover,
.dark-3 a.tile:hover, .dark-3 .card:hover, .dark-3 .vip-tile:hover, .dark-3 .feature-card:hover {
border-color: rgba(255,255,255,0.34);
}
.dark .fc-plus, .dark-2 .fc-plus, .dark-3 .fc-plus {
background: #fff; color: var(--tile-1);
}
/* Action Blue verschwindet auf #272729 — für TEXT übernimmt Sky Link Blue.
Die gefüllte Pille behält Action Blue: sie bringt ihre eigene Fläche mit,
so steht es auch in der md. */
.dark .textlink, .dark .btn-ghost, .dark .go, .dark .kicker,
.dark .hintline a, .dark .faq-q[aria-expanded="true"], .dark .legal a,
.dark-2 .textlink, .dark-2 .btn-ghost, .dark-2 .go, .dark-2 .kicker,
.dark-2 .hintline a, .dark-2 .faq-q[aria-expanded="true"], .dark-2 .legal a,
.dark-3 .textlink, .dark-3 .btn-ghost, .dark-3 .go, .dark-3 .kicker,
.dark-3 .hintline a, .dark-3 .faq-q[aria-expanded="true"], .dark-3 .legal a {
color: var(--accent-on-dark);
}
.dark .faq-q:hover, .dark-2 .faq-q:hover, .dark-3 .faq-q:hover { color: var(--accent-on-dark); }
.dark .faq-q[aria-expanded="true"] .faq-chevron,
.dark-2 .faq-q[aria-expanded="true"] .faq-chevron,
.dark-3 .faq-q[aria-expanded="true"] .faq-chevron { stroke: var(--accent-on-dark); }
.dark .faq-more, .dark-2 .faq-more, .dark-3 .faq-more {
background: rgba(255,255,255,0.08); color: var(--on-dark);
}
.dark .faq-more:hover, .dark-2 .faq-more:hover, .dark-3 .faq-more:hover {
background: rgba(255,255,255,0.14);
}
/* Helle Inseln INNERHALB einer dunklen Kachel: das Produktpanel und der
Handy-Bildschirm des Chat-Mockups. Beide sind bewusst hell — das Gerät steht
darauf bzw. der Screen leuchtet. Die Tokens müssen dort zurück auf die hellen
Werte, sonst steht #ccc auf #f5f5f7 und Weiß auf fast-Weiß.
Jede weitere helle Fläche in einer Kachel gehört ebenfalls hierher. */
.dark .pcard-media, .dark-2 .pcard-media, .dark-3 .pcard-media,
.dark .phone-screen, .dark-2 .phone-screen, .dark-3 .phone-screen {
--ink: #1d1d1f; --ink-soft: #6e6e73;
color: var(--ink);
}
.dark .pcard-media, .dark-2 .pcard-media, .dark-3 .pcard-media {
background: var(--bg-soft); border-color: transparent;
}
/* Der Outline-Button hat keine eigene Fläche — Rahmen und Text müssen auf der
dunklen Kachel deshalb auf Sky Link Blue, sonst 2,68:1. Die gefüllte Pille
daneben behält Action Blue: die bringt ihre Fläche mit. */
.dark .btn-outline, .dark-2 .btn-outline, .dark-3 .btn-outline {
color: var(--accent-on-dark); border-color: var(--accent-on-dark);
}
.dark .btn-outline:hover, .dark-2 .btn-outline:hover, .dark-3 .btn-outline:hover {
background: var(--accent-on-dark); color: var(--tile-1);
}
/* Fokusring muss auch auf Dunkel sichtbar bleiben */
.dark :focus-visible, .dark-2 :focus-visible, .dark-3 :focus-visible {
outline-color: var(--accent-on-dark);
}
/* Vier Kennzahlen brechen sonst als 3 + 1 um — Client-Regel: nie ein einzelnes
Element in der letzten Reihe. Deshalb bei genau vier Werten ein festes Raster,
das auf schmalen Schirmen sauber auf 2 x 2 geht. Drei- und Zweier-Reihen
bleiben unberuehrt (Startseite, VIP-Sektion). */
.stat-row:has(> div:nth-child(4):last-child) {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px;
}
@media (max-width: 760px) {
.stat-row:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
/* ── F4: Zahl groß, Einheit klein (Faktor x2,3–4,6) ── */
.stat-row {
display: flex; justify-content: center; gap: clamp(28px, 7vw, 88px);
flex-wrap: wrap; text-align: center;
}
.stat-row b {
display: block; font-size: clamp(2.5rem, 6vw, 4rem);
letter-spacing: -0.01em; line-height: 1.08; font-weight: 600; color: var(--ink);
}
.stat-row span {
font-size: 0.875rem; color: var(--ink-soft);
letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}
/* ── Karten: weißer Kasten, Radius 18px, 1px Hairline statt Schatten.
Inhalt linksbündig: Eyebrow → Titel → Copy → Preis → CTA.
Kein Hover-Lift, kein Schatten — Erhebung entsteht aus dem Flächenwechsel
der Sektion, nicht aus Chrome. Press-Feedback bleibt. ── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
/* Produkt-Grids: max. 2 nebeneinander, große Kacheln (Apple "Entdecke alle Modelle") */
.grid:has(> .pcard) { grid-template-columns: repeat(2, 1fr); gap: 64px 14px; }
/* Genau drei Karten: dreispaltig, damit keine einzelne Karte allein in Reihe 2 steht */
.grid:has(> .pcard:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); gap: 56px 14px; }
/* Genau vier Karten: 2 + 2 statt 3 + 1. Client-Regel — nie ein einzelnes Element
in der letzten Reihe. Vier Spalten wären auf 1024px unter der 280px-Mindestbreite. */
.grid:has(> .card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
/* Dieselbe Regel fuer ALLE Raster mit genau vier Kacheln — nicht nur die
Tarifkarten. auto-fit rechnet je nach Fensterbreite drei Spalten aus, dann
steht die vierte Kachel allein in Reihe zwei. Gemessen trat das bei 700 und
834 px auf: Kategorien und "Lern uns kennen" auf der Startseite, Zubehoer auf
angebote, Team auf ueber-uns.
Regel: vier nebeneinander wenn Platz ist, sonst 2 x 2. Nie drei.
Client-Vorgabe: nie ein einzelnes Element in der letzten Reihe. */
.tile-grid:has(> :nth-child(4):last-child),
.vip-grid:has(> :nth-child(4):last-child),
.feature-rail:has(> :nth-child(4):last-child),
.team-grid:has(> :nth-child(4):last-child) {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023px) {
.tile-grid:has(> :nth-child(4):last-child),
.vip-grid:has(> :nth-child(4):last-child),
.feature-rail:has(> :nth-child(4):last-child),
.team-grid:has(> :nth-child(4):last-child) {
grid-template-columns: repeat(2, 1fr);
}
}
/* Und dasselbe fuer genau DREI Kacheln. Gemessen brach das bei 641 px als 2 + 1
um (Internet-Sektion auf angebote, Werte-Kacheln auf ueber-uns). Drei passen
nebeneinander, solange die Spalte 210 px haelt — darunter lieber gestapelt
als eine Waise in Reihe zwei. */
.tile-grid:has(> :nth-child(3):last-child),
.vip-grid:has(> :nth-child(3):last-child),
.feature-rail:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 699px) {
.tile-grid:has(> :nth-child(3):last-child),
.vip-grid:has(> :nth-child(3):last-child),
.feature-rail:has(> :nth-child(3):last-child) {
grid-template-columns: 1fr;
}
}
/* Kennzahlen-Reihe mit drei Werten: als Raster statt Flex-Umbruch, sonst
rutscht der dritte Wert auf schmalen Schirmen allein nach unten (gemessen
bei 480 px). Unter 620 px gestapelt. */
.stat-row:has(> div:nth-child(3):last-child) {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px;
}
@media (max-width: 619px) {
.stat-row:has(> div:nth-child(3):last-child) { grid-template-columns: 1fr; }
}
.card {
background: #fff; border: 1px solid var(--hairline);
border-radius: var(--radius); overflow: hidden;
padding: 28px 30px; text-align: left;
display: flex; flex-direction: column; align-items: flex-start;
transition: transform 450ms var(--spring), border-color 450ms var(--spring);
}
.card:hover { border-color: #d0d0d0; }
.card:active { transform: scale(0.95); }
.card .badge {
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
color: var(--accent-text); margin-bottom: 10px;
}
.card .badge.dark { color: var(--ink); }
.card h3 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.011em; line-height: 1.15; }
.card .desc { font-size: 0.875rem; color: var(--ink); margin-top: 8px; line-height: 1.3; }
.card .price { margin-top: 16px; font-size: 0.875rem; color: var(--ink-soft); }
.card .price b { display: block; font-size: 1.5rem; color: var(--ink); font-weight: 600; letter-spacing: -0.011em; margin-bottom: 2px; }
.card .wa-btn, .card .btn-ghost { margin-top: auto; }
.card .wa-btn { margin-top: 22px; }
.card .btn-ghost { margin-top: 14px; padding-left: 0; }
/* Produktbild: offizieller Freisteller auf --bg-soft-Tile (= Apples eingebackenes
#f5f5f7), contain, feste Höhe (kein Layout-Shift). Kein Schatten — siehe
--shadow-product. */
.card-img {
width: 100%; height: 200px; object-fit: contain; margin: 16px 0 2px;
align-self: center; background: var(--bg-soft); border-radius: var(--r-md);
}
[data-sheet] { cursor: pointer; }
/* ── Produkt-Tile nach Apple-Homepage-Shelf (Referenz-Screenshot):
Bild-Panel oben → Farb-Dots → Name → Benefit → Preis fett → CTA, alles zentriert.
Text liegt auf dem Sektionsgrund, kein Textkasten. ── */
.pcard { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pcard-media {
/* Kein overflow:hidden — es würde den Produktschatten an der Panelkante
abschneiden; das Bild erreicht die Rundungen ohnehin nie (max 86 %).
Dafür ist min-height:0 Pflicht: ohne overflow-Clipping gewinnt sonst die
inhaltsbasierte Mindesthöhe und das Panel wächst auf die volle Bildhöhe. */
width: 100%; aspect-ratio: 4 / 5; min-height: 0; border-radius: var(--r-lg);
background: var(--bg-soft); border: 1px solid var(--hairline);
display: flex; align-items: center; justify-content: center;
transition: border-color 450ms var(--spring), transform 450ms var(--spring);
}
.pcard:hover .pcard-media { border-color: #d0d0d0; }
.pcard:active .pcard-media { transform: scale(0.99); }
.pcard-media img { max-width: 86%; max-height: 88%; object-fit: contain; }
.pcard-media .noimg { font-size: 1.3125rem; font-weight: 600; color: var(--ink-soft); }
.pcard-dots { display: flex; gap: 8px; margin-top: 18px; justify-content: center; min-height: 12px; }
.pcard-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.pcard .badge { margin: 16px 0 0; }
.pcard h3 { font-size: clamp(1.5rem, 2.6vw, 1.75rem); font-weight: 600; letter-spacing: -0.011em; margin-top: 12px; }
.pcard .desc { font-size: 1.0625rem; line-height: 1.4; color: var(--ink); margin-top: 10px; max-width: 320px; }
.pcard .price { font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin-top: 14px; max-width: 320px; }
/* CTA am Kartenboden verankern: unterschiedlich lange Texte sollen die
Buttons nicht auf verschiedene Höhen schieben (Grid streckt alle Karten gleich hoch). */
.pcard > p:last-of-type { margin-bottom: 20px; }
.pcard .wa-btn { margin-top: auto; }
.pcard .btn-ghost { margin-top: 4px; }
/* ── Produkt-Sheet: geführter Kauf-Flow mit Objektpermanenz.
Mobil Bottom-Sheet, Desktop zentriertes Modal — Apple-Material + Spring. ── */
.sheet-scrim {
position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,0.35);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
opacity: 0; pointer-events: none; transition: opacity 300ms ease;
}
.sheet-scrim.open { opacity: 1; pointer-events: auto; }
.sheet {
position: fixed; z-index: 201; left: 50%; bottom: 0;
transform: translate(-50%, 102%);
width: min(560px, 100vw);
background: #fff; border-radius: var(--radius) var(--radius) 0 0;
padding: 22px 26px calc(24px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -12px 48px rgba(0,0,0,0.18);
transition: transform 450ms var(--spring);
/* dvh: mobile Browserleiste ein-/ausblenden darf das Sheet nicht abschneiden */
max-height: 88vh; max-height: 88dvh; overflow-y: auto;
overscroll-behavior: contain; /* Scroll im Sheet zieht nicht die Seite darunter mit */
}
.sheet.open { transform: translate(-50%, 0); }
@media (min-width: 641px) {
.sheet {
bottom: auto; top: 50%; border-radius: var(--radius);
opacity: 0; pointer-events: none;
transform: translate(-50%, -46%) scale(0.97);
transition: transform 450ms var(--spring), opacity 250ms ease;
box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}
.sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
}
.sheet-close {
position: absolute; z-index: 3; top: 14px; right: 14px; width: 32px; height: 32px;
border-radius: 50%; background: var(--bg-soft); border: 0; cursor: pointer;
font-size: 1rem; line-height: 1; color: var(--ink);
display: flex; align-items: center; justify-content: center;
transition: transform 100ms ease-out; touch-action: manipulation;
}
/* 32px sind optisch richtig, 44px sind für den Daumen nötig — Trefferfläche
unsichtbar über den Kreis legen, statt ihn größer zu zeichnen. */
.sheet-close::after {
content: ""; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.sheet-close:active { transform: scale(0.9); }
.sheet-img { width: 100%; height: 190px; object-fit: contain; margin: 8px 0 10px; background: var(--bg-soft); border-radius: var(--r-md); }
.sheet h3 { font-size: 1.4375rem; font-weight: 600; letter-spacing: -0.011em; }
.sheet .sheet-price { font-size: 0.9375rem; color: var(--ink-soft); margin-top: 4px; }
.sheet .sheet-price b { color: var(--ink); }
.sheet-label {
font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 20px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
display: inline-flex; align-items: center; min-height: 44px;
border: 1.5px solid rgba(0,0,0,0.16); border-radius: var(--r-md);
padding: 9px 14px; font-size: 0.9375rem; font-weight: 600;
background: #fff; color: var(--ink); cursor: pointer;
transition: border-color 150ms ease-out, background 150ms ease-out, transform 100ms ease-out;
touch-action: manipulation;
}
.chip:active { transform: scale(0.95); }
.chip.sel { border-color: var(--accent); background: var(--pearl); color: var(--accent-focus); }
.sheet .btn-primary { width: 100%; justify-content: center; margin-top: 24px; }
.sheet .condition { text-align: center; margin-top: 12px; }
body.sheet-open { overflow: hidden; }
/* stille Tiles (Kategorien, Werte, Internet) — gleiches Kastenprinzip, kleiner */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tile {
background: #fff; border: 1px solid var(--hairline);
border-radius: var(--radius); padding: 26px 24px;
transition: transform 450ms var(--spring), border-color 450ms var(--spring);
}
a.tile:hover { border-color: #d0d0d0; }
a.tile:active { transform: scale(0.95); }
.tile h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.tile p { font-size: 0.875rem; color: var(--ink-soft); margin-top: 4px; }
.tile .go { display: inline-block; margin-top: 12px; font-size: 0.875rem; font-weight: 600; color: var(--accent-text); }
/* ── Feature-Cards (Apple „Lern das iPhone kennen."): dunkle Portrait-Kästen
auf hellem Grund — Eyebrow → Claim → Visual → Plus-Kreis unten rechts ── */
.feature-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.feature-card {
position: relative; background: #fff; color: var(--ink);
border: 1px solid var(--hairline);
border-radius: var(--radius); overflow: hidden;
min-height: 400px; padding: 26px 24px 66px;
display: flex; flex-direction: column;
transition: border-color 450ms var(--spring), transform 450ms var(--spring);
}
.feature-card:hover { border-color: #d0d0d0; }
.feature-card:active { transform: scale(0.95); }
.feature-card .fc-eyebrow { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.feature-card h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.19; letter-spacing: -0.011em; color: var(--ink); }
.feature-card .fc-visual {
margin-top: auto; padding-top: 28px;
font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 600; line-height: 1.25;
letter-spacing: -0.011em; color: var(--accent-text); overflow-wrap: break-word;
}
.feature-card .fc-visual.quiet { color: var(--ink-soft); }
.feature-card .fc-plus {
position: absolute; right: 18px; bottom: 18px;
width: 34px; height: 34px; border-radius: 50%;
background: var(--ink); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 1.3125rem; font-weight: 400; line-height: 1; padding-bottom: 2px;
transition: transform 100ms ease-out;
}
.feature-card:active .fc-plus { transform: scale(0.92); }
/* ── VIP-Nummern: durchgehend hell (Client-Vorgabe 29.07.2026).
Der Bruch nach Dunkel ist entfallen; Hierarchie kommt jetzt aus Kicker + Kastenprinzip. ── */
.kicker {
display: block; text-align: center; font-size: 0.8125rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text);
margin-bottom: 14px;
}
.vip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vip-tile {
background: #fff; border: 1px solid var(--hairline);
border-radius: var(--r-lg); padding: 22px 20px;
display: flex; flex-direction: column; gap: 4px;
transition: transform 450ms var(--spring), border-color 450ms var(--spring);
}
.vip-tile:hover { border-color: #d0d0d0; }
.vip-tile:active { transform: scale(0.95); }
.vip-tile h3 { font-size: 1.03125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.vip-tile .ex { font-size: 0.78125rem; color: var(--ink-soft); letter-spacing: 0.01em; }
.hintline { margin-top: 16px; font-size: 0.84375rem; color: var(--ink-soft); }
.hintline a { color: var(--accent-text); font-weight: 600; }
/* Textlink, der wie ein Button gemeint ist: sitzt im Fließtext, muss aber
mit dem Daumen zu treffen sein.
Trick: senkrechtes Padding vergrößert bei einem Inline-Element die
Trefferfläche, ohne die Zeilenhöhe zu verändern — das negative Margin hält
den Textfluss exakt an seinem Platz. Bewusst kein ::after: ein zusätzliches
Pseudo-Element erzeugt eine Umbruchstelle, und dann rutscht der Punkt hinter
dem Link allein in die nächste Zeile. */
.textlink { color: var(--accent-text); font-weight: 600; }
.textlink:hover { color: var(--accent-focus); }
.hintline a, .textlink, .consent p a {
padding: 12px 0; margin: -12px 0;
}
/* Rechtstexte: Links im Fließtext. Bewusst keine vollen 44px — die Fläche
läge in den Zeilen darüber und darunter und würde deren Taps abfangen.
Stattdessen größerer Zeilenabstand und eine Fläche in Zeilenhöhe. */
.legal a { color: var(--accent-text); }
.legal p, .legal li { line-height: 1.75; }
.legal p a, .legal li a { padding: 7px 0; margin: -7px 0; }
/* ── FAQ als Akkordeon: eine Frage offen, die vorherige schließt sich.
Höhe animiert über grid-template-rows 0fr→1fr — braucht keine feste Pixelhöhe. ── */
.faq { max-width: 680px; margin: 0 auto; text-align: left; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.09); }
.faq-item:first-child { border-top: 1px solid rgba(0,0,0,0.09); }
.faq-q {
width: 100%; min-height: 44px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 2px; background: none; border: 0; cursor: pointer;
font-family: inherit; font-size: 1.0625rem; font-weight: 600; color: var(--ink);
text-align: left; touch-action: manipulation;
transition: color 150ms ease-out;
}
.faq-q:hover { color: var(--accent-text); }
.faq-chevron {
width: 18px; height: 18px; flex: 0 0 auto;
fill: none; stroke: var(--ink-soft); stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
transition: transform 380ms var(--spring), stroke 150ms ease-out;
}
.faq-q[aria-expanded="true"] { color: var(--accent-text); }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); stroke: var(--accent-text); }
.faq-a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 380ms var(--spring);
}
.faq-a > .faq-a-inner { overflow: hidden; }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-a p {
font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft);
padding: 0 2px 20px;
}
/* Ausweg für alles, was nicht in der Liste steht */
.faq-more {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
min-height: 44px; margin-top: 26px; padding: 16px 20px;
background: var(--pearl); border-radius: var(--r-md);
font-size: 1rem; font-weight: 600; color: var(--accent-focus);
transition: background 150ms ease-out, transform 100ms ease-out;
}
.faq-more:hover { background: #e6eadb; }
.faq-more:active { transform: scale(0.95); }
.faq-more svg {
width: 20px; height: 20px; flex: 0 0 auto;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
.faq-a { transition: none; }
.faq-chevron { transition: none; }
}
/* ── Footer ── */
footer { background: var(--bg-soft); padding: 64px 22px 40px; }
.footer-inner { max-width: 1024px; margin: 0 auto; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between; }
.footer-grid .footer-h { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.footer-grid div { font-size: 0.875rem; line-height: 1.55; color: var(--ink); }
/* Footer-Links sind Navigation, keine Fließtext-Links — volle Trefferhöhe auf allen Breiten */
/* Seitliches Padding plus negatives Margin: „AGB" ist als Wort nur 25px breit,
die Trefferfläche muss trotzdem 44px erreichen — ohne die „·"-Trenner zu verschieben. */
.footer-grid a, .footer-legal a { display: inline-block; padding: 11px 10px; margin: 0 -10px; min-height: 44px; }
.footer-grid a:hover { color: var(--accent-text); }
/* Kontaktwege: je ein Line-Icon davor, alles direkt anklickbar (WhatsApp, Instagram, TikTok, Mail).
Nummer und Handle stehen umbruchfrei — die Spalte gibt die Breite dafür her. */
.contact-list { list-style: none; }
.contact-list a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 0; min-height: 44px; }
.contact-list a > span { white-space: nowrap; }
.contact-list svg {
width: 17px; height: 17px; flex: 0 0 auto;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
color: var(--ink-soft); transition: color 150ms ease-out;
}
.contact-list a:hover svg { color: var(--accent-text); }
.footer-legal {
margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.08);
display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
font-size: 0.78125rem; color: var(--ink-soft);
}
.footer-legal a:hover { color: var(--accent-text); }
/* ── Partner-Laufband: ruhige Endlosschleife, Logos einfarbig und zurückgenommen.
Zwei identische Gruppen laufen um genau 50 % — dadurch ist der Umbruch unsichtbar.
Weiche Kanten links/rechts statt harter Schnitt (mask), Apple-Manier. ── */
.partners { padding: clamp(56px, 8vh, 96px) 0; overflow: hidden; }
.partners-label {
text-align: center; font-size: 0.8125rem; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
margin-bottom: 34px; padding: 0 22px;
}
.partners-viewport {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.partners-track {
display: flex; width: max-content;
animation: partners-scroll 46s linear infinite;
will-change: transform;
}
.partners:hover .partners-track { animation-play-state: paused; }
.partners-group { display: flex; align-items: center; gap: clamp(44px, 7vw, 88px); padding-right: clamp(44px, 7vw, 88px); }
.partners-group img {
height: 26px; width: auto; flex: 0 0 auto;
opacity: 0.45;
transition: opacity 300ms var(--spring);
}
.partners:hover .partners-group img { opacity: 0.62; }
/* Die Logos sind ![]()
-SVGs mit fill="currentColor" — als Bild geladen ist das
Schwarz, nicht die Textfarbe. Auf der dunklen Kachel deshalb invertieren,
sonst stehen schwarze Logos auf #252527 und man sieht nichts. */
.dark-3 .partners-group img, .dark .partners-group img, .dark-2 .partners-group img {
filter: invert(1);
opacity: 0.55;
}
.dark-3.partners:hover .partners-group img { opacity: 0.78; }
.dark-3 .partners-label, .dark .partners-label, .dark-2 .partners-label { color: var(--body-muted); }
/* Weiche Kanten des Laufbands bleiben, die Maske ist farbunabhaengig. */
@keyframes partners-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 640px) {
.partners-group img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
/* Kein Dauerlauf: statische, umbrechende Reihe */
.partners-track { animation: none; width: 100%; }
.partners-group:nth-child(2) { display: none; }
.partners-group { flex-wrap: wrap; justify-content: center; padding: 0 22px; row-gap: 26px; }
.partners-viewport { -webkit-mask-image: none; mask-image: none; }
}
/* ── Consent: transluzente Karte unten, Apple-Material.
Ablehnen ist genauso prominent wie Zustimmen — sonst ist die Einwilligung
nach DSGVO nicht wirksam. Vor der Entscheidung wird nichts geladen. ── */
.consent {
position: fixed; z-index: 300;
left: max(14px, env(safe-area-inset-left));
right: max(14px, env(safe-area-inset-right));
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
max-width: 460px; margin: 0 auto;
background: rgba(255,255,255,0.82);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255,255,255,0.5);
border-radius: var(--r-lg);
box-shadow: 0 18px 60px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.06);
padding: 20px 22px 18px;
opacity: 0; transform: translateY(18px) scale(0.97);
pointer-events: none; visibility: hidden;
transition: opacity 320ms var(--spring), transform 420ms var(--spring),
visibility 0s linear 420ms;
}
.consent.open {
opacity: 1; transform: none; pointer-events: auto; visibility: visible;
transition: opacity 320ms var(--spring), transform 460ms var(--spring), visibility 0s;
}
body.consent-open { padding-bottom: 190px; }
.consent h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.011em; }
.consent p { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); margin-top: 6px; }
.consent p a { color: var(--accent-text); font-weight: 600; }
.consent-actions { display: flex; gap: 10px; margin-top: 16px; }
.consent-actions button {
flex: 1 1 0; min-height: 44px; padding: 11px 16px;
font-size: 0.9375rem; font-weight: 600; font-family: inherit;
border-radius: var(--pill); cursor: pointer; touch-action: manipulation;
transition: background 150ms ease-out, transform 100ms ease-out;
}
.consent-actions button:active { transform: scale(0.95); }
.consent-accept { background: var(--accent); color: var(--on-accent); border: 0; }
.consent-accept:hover { background: var(--accent-focus); }
.consent-reject { background: transparent; color: var(--ink); border: 1px solid rgba(0,0,0,0.18); }
.consent-reject:hover { background: rgba(0,0,0,0.04); }
@media (prefers-reduced-motion: reduce) {
.consent { transition: opacity 200ms ease; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
.consent { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
.consent { background: #fff; border: 1.5px solid var(--ink); }
}
/* ── Spline-3D-Einbettung (Zwei-Klick-Lösung, Logik in funnel.js) ──
Vor der Zustimmung ist nur das lokale Poster zu sehen; es geht kein Request
an einen Drittanbieter raus. Optik folgt dem System: Hairline statt Schatten,
Radius von der Leiter, Olive als einzige Handlungsfarbe. ── */
.spline-embed {
position: relative; overflow: hidden;
aspect-ratio: var(--spline-ratio, 16 / 9);
border-radius: var(--r-lg); border: 1px solid var(--hairline);
background: var(--bg-soft);
display: flex; align-items: center; justify-content: center;
}
.spline-embed .spline-poster {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
/* Der Viewer legt sich über das Poster, sobald die Szene steht. */
.spline-embed spline-viewer {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; transition: opacity 600ms var(--spring);
}
.spline-embed.is-on spline-viewer { opacity: 1; }
.spline-embed.is-on .spline-poster { opacity: 0; transition: opacity 600ms var(--spring); }
.spline-embed .spline-cta {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 10px;
text-align: center; padding: 20px;
transition: opacity 300ms ease;
}
.spline-embed.is-on .spline-cta,
.spline-embed.is-loading .spline-cta { opacity: 0; pointer-events: none; }
.spline-play {
display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
background: var(--accent); color: var(--on-accent); border: 0;
font-family: inherit; font-size: 1.0625rem; font-weight: 600;
padding: 13px 28px; border-radius: var(--pill); cursor: pointer;
touch-action: manipulation;
transition: background 150ms ease-out, transform 100ms ease-out;
}
.spline-play:hover { background: var(--accent-focus); }
.spline-play:active { transform: scale(0.95); }
.spline-note { font-size: 0.8125rem; color: var(--ink-soft); max-width: 34ch; }
.spline-note a { color: var(--accent-text); font-weight: 600; }
/* Ladezustand: ruhiger Puls auf dem Poster statt Spinner */
.spline-embed.is-loading .spline-poster { animation: spline-pulse 1400ms ease-in-out infinite; }
@keyframes spline-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
/* Wenn das CDN nicht antwortet, bleibt das Poster stehen — kein leerer Kasten. */
.spline-embed.is-failed .spline-cta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.spline-embed spline-viewer, .spline-embed .spline-poster { transition: none; }
.spline-embed.is-loading .spline-poster { animation: none; }
}
/* ── Medien-Slots für das Material aus dem Dreh (Briefing 06.08.).
Die Flächen stehen JETZT schon im Layout — mit reserviertem Seitenverhältnis,
damit beim Eintreffen der Datei nichts springt. Leer sehen sie absichtlich
wie eine ruhige Fläche aus und nicht wie ein Fehler: kein "Foto folgt",
kein Rahmen mit Kreuz, kein Grau-Kasten. Gefüllt wird nur die Quelle
eingesetzt, am Markup ändert sich nichts.
--ratio Seitenverhältnis (Querformat laut Briefing, Porträts 4/5)
Kanten: Radius von der Leiter + weiche Maske, damit das Bild nicht als
hartes Rechteck auf der Kachel klebt. ── */
.media-slot {
position: relative; overflow: hidden;
aspect-ratio: var(--ratio, 16 / 9);
min-height: 0; /* sonst sprengt der Inhalt das Verhältnis */
border-radius: var(--r-lg);
background: var(--bg-soft);
isolation: isolate;
}
.media-slot > img,
.media-slot > video {
width: 100%; height: 100%;
object-fit: cover; display: block;
/* Weiche Kante: das Material läuft an den Rändern aus, statt hart zu schneiden.
Sehr flacher Verlauf (4 %) — soll man spüren, nicht sehen. */
-webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 88%, transparent 100%);
mask-image: radial-gradient(120% 120% at 50% 50%, #000 88%, transparent 100%);
}
/* Leerzustand: minimal aufgehellte Fläche mit ruhigem Verlauf. Verschwindet,
sobald ein Kind (img/video) im Slot liegt. */
.media-slot:empty::after,
.media-slot:not(:has(img, video))::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 42%),
var(--bg-soft);
}
/* Auf dunkler Kachel kehrt sich die Fläche um, sonst leuchtet ein weißer Kasten. */
.dark .media-slot, .dark-2 .media-slot, .dark-3 .media-slot { background: rgba(255,255,255,0.06); }
.dark .media-slot:not(:has(img, video))::after,
.dark-2 .media-slot:not(:has(img, video))::after,
.dark-3 .media-slot:not(:has(img, video))::after {
background:
linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 46%),
rgba(255,255,255,0.05);
}
/* Story-Video im Hero. Kein Autoplay-Loop: das Video ist 60–90 s lang und
erzählt etwas — es wird gestartet, nicht nebenbei abgespielt. Bis dahin
liegt das Standbild da. */
.media-slot--video .media-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255,255,255,0.92); color: var(--ink);
display: flex; align-items: center; justify-content: center;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
transition: transform 220ms var(--spring), background 150ms ease-out;
touch-action: manipulation;
}
.media-slot--video .media-play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.04); }
.media-slot--video .media-play:active { transform: translate(-50%, -50%) scale(0.95); }
.media-slot--video .media-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.media-slot--video.is-playing .media-play { opacity: 0; pointer-events: none; }
/* Team-Porträts: gleiches Verhältnis für alle vier, sonst wird das Grid unruhig. */
.media-slot--portrait { --ratio: 4 / 5; }
@media (prefers-reduced-motion: reduce) {
.media-slot--video .media-play { transition: none; }
}
/* ── Reveal: Sektionen materialisieren beim Scroll.
Länger und weicher als vorher (700 → 900ms), größerer Weg (18 → 26px):
die Bewegung soll spürbar sein, ohne dass man auf sie wartet. ── */
.reveal {
opacity: 0; transform: translateY(26px);
will-change: transform, opacity;
transition: opacity 640ms var(--spring), transform 680ms var(--spring);
}
.reveal.shown { opacity: 1; transform: none; will-change: auto; }
/* Gestaffelt: Kinder einer Reihe kommen nacheinander, nicht als Block.
Die Verzögerung setzt funnel.js pro Kind als --stagger. */
.stagger-item {
opacity: 0; transform: translateY(22px);
transition: opacity 620ms var(--spring), transform 660ms var(--spring);
transition-delay: var(--stagger, 0ms);
}
.reveal.shown .stagger-item,
.shown > .stagger-item { opacity: 1; transform: none; }
/* Scroll-Layering: die Drift setzt funnel.js als translate3d. Hier nur die
Vorbereitung — eigene Ebene, damit der Browser nicht bei jedem Frame neu
zeichnet, und ein weicher Anschluss statt harter Sprünge. */
[data-drift] {
will-change: transform;
transition: transform 120ms linear;
}
/* Zahlen im Zählvorgang: feste Ziffernbreite, sonst zappelt die Reihe. */
.stat-row b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
.stagger-item { opacity: 1; transform: none; transition: none; }
[data-drift] { transform: none !important; transition: none; }
}
/* ── Touch: kein klebender Hover — Press-Feedback (:active) übernimmt ── */
@media (hover: none) {
.card:hover, a.tile:hover, .vip-tile:hover, .feature-card:hover,
.pcard:hover .pcard-media {
transform: none; border-color: var(--hairline);
}
.btn-primary:hover, .wa-btn:hover, .nav-cta:hover { background: var(--accent); box-shadow: none; }
}
/* ── Reduced Motion / Transparency / Contrast ── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal, .bubble { transition: opacity 200ms ease; transform: none !important; }
.card, .vip-tile, .tile, .btn-primary, .wa-btn, .nav-cta, .btn-ghost, .nav-burger span { transition: none; }
.card:hover, .vip-tile:hover, a.tile:hover { transform: none; }
.nav-menu { transition: opacity 200ms ease; transform: none; clip-path: none; }
.nav-menu a { opacity: 1; transform: none; transition: none; }
.sheet, .sheet-scrim, .chip, .sheet-close { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
nav, .nav-menu, .sheet { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Scrim bleibt abdunkelnd — er trennt die Ebenen — aber ohne Weichzeichner */
.sheet-scrim { background: rgba(0,0,0,0.55); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
.card, .vip-tile, .tile, .feature-card, .pcard-media { border: 1.5px solid currentColor; }
/* Schwebende Flächen werden deckend und bekommen eine harte Kante */
nav { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.nav-menu, .sheet { background: #fff; border: 1.5px solid var(--ink); }
.chip { border-color: var(--ink); }
}
/* ── Nav frueher auf Burger umstellen ──
Die Mobil-Query greift erst ab 640 px. Bei 641 px stand die volle
Desktop-Nav da und war 6 px breiter als der Viewport — gemessen ragte
.nav-links bis 647 px bei 641 px Fensterbreite, auf allen sechs Seiten.
Der Burger muss also vor der eigentlichen Mobilgrenze uebernehmen.
Passt ausserdem zur Vorlage, die die Nav schon bei ~834 px einklappt. ── */
@media (max-width: 767px) {
.nav-links a:not(.nav-cta) { display: none; }
.nav-inner { gap: 12px; }
.nav-burger { display: flex; }
.nav-menu { display: flex; }
.nav-menu.open {
opacity: 1; transform: none; clip-path: inset(0 0 0 0);
pointer-events: auto; visibility: visible;
transition: opacity 380ms var(--spring), transform 520ms var(--spring),
clip-path 520ms var(--spring), visibility 0s;
}
}
/* ── Mobile (Phones) ── */
@media (max-width: 640px) {
.nav-links a:not(.nav-cta) { display: none; }
.nav-inner { gap: 12px; }
/* 96px festes Chrome sind auf einem 667px-Viewport zu viel: schwarze Zeile
auf 34px, und von den Ladeninfos bleibt nur die Hauptnummer. Die
44px-Trefferfläche des Links liegt weiterhin als Overlay darüber. */
.nav-global-inner { height: 34px; gap: 12px; }
.nav-global .global-right .secondary { display: none; }
html { scroll-padding-top: 94px; }
.nav-burger { display: flex; }
.nav-menu { display: flex; }
.nav-menu.open {
opacity: 1; transform: none; clip-path: inset(0 0 0 0);
pointer-events: auto; visibility: visible;
transition: opacity 380ms var(--spring), transform 520ms var(--spring),
clip-path 520ms var(--spring), visibility 0s;
}
/* Whitespace bleibt radikal, aber mobil kalibriert.
max(): im Querformat schiebt die Notch-Insel den Text nicht unter die Kante. */
.section { padding: 88px max(20px, env(safe-area-inset-left)) 88px max(20px, env(safe-area-inset-right)); }
.section.tight { padding: 60px max(20px, env(safe-area-inset-left)) 60px max(20px, env(safe-area-inset-right)); }
.nav-inner { padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
footer {
padding: 64px max(20px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left));
}
.stat-row { gap: 26px 36px; }
/* Apple-Store-Rails: Karten laufen horizontal mit Snap + Edge-Peek,
Kastenbeschnitt am Seitenrand wie der Store-Scroller (Gap 10px, Bodenluft für Schatten) */
.grid, .tile-grid, .vip-grid, .feature-rail {
display: flex; gap: 10px;
overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Rail-Ende darf nicht die iOS-Zurück-Geste auslösen */
overscroll-behavior-x: contain;
margin-left: -20px; margin-right: -20px;
padding: 4px 20px 28px;
scroll-padding: 0 20px;
scrollbar-width: none;
}
.grid::-webkit-scrollbar, .tile-grid::-webkit-scrollbar, .vip-grid::-webkit-scrollbar, .feature-rail::-webkit-scrollbar { display: none; }
.grid > *, .tile-grid > *, .vip-grid > *, .feature-rail > * { flex: 0 0 auto; scroll-snap-align: start; }
.grid > * { width: min(78vw, 300px); }
.tile-grid > * { width: min(64vw, 240px); }
.vip-grid > * { width: min(64vw, 240px); }
.feature-rail > * { width: min(72vw, 270px); }
.card { padding: 26px 24px; }
/* Produkt-Grids: ein Produkt pro Blick, vertikal gestapelt — kein Seitwärts-Scroll */
.grid:has(> .pcard) {
display: flex; flex-direction: column; gap: 44px;
overflow-x: visible; scroll-snap-type: none;
margin-left: 0; margin-right: 0; padding: 0;
}
.grid:has(> .pcard) > * { width: 100%; }
/* Hochformat-Panel 4:5 kostet auf 390px ~437px Höhe pro Produkt.
Quadratisch: gleiches Kastenprinzip, ~90px weniger Scrollweg je Produkt. */
.pcard-media { aspect-ratio: 1 / 1; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; }
/* Footer-Links sind Navigation, keine Fließtext-Links: volle Trefferhöhe */
/* Kontaktspalte über die volle Breite: Nummer, Handles und Mail brechen sonst um */
.footer-contact { grid-column: 1 / -1; }
.footer-grid .contact-list a { display: inline-flex; padding: 7px 0; }
.footer-legal { margin-top: 36px; gap: 0 18px; }
.footer-legal a { margin: 0; padding-inline: 0; }
}
/* Sehr schmale Geräte: Logo + CTA + Burger müssen in eine Zeile passen */
@media (max-width: 400px) {
.nav-logo { font-size: 0.78125rem; letter-spacing: 0; }
.nav-logo .hp-badge { width: 23px; height: 23px; font-size: 0.625rem; }
.nav-cta { padding: 7px 12px; font-size: 0.78125rem; }
}
@media (max-width: 360px) {
.nav-wordmark { display: none; }
}
/* Mobile shell: prevent page-scale drift and let the navigation panel escape
the rounded header without increasing the document width. */
@media (max-width:767px) {
html, body { width:100%; max-width:100%; overflow-x:hidden; }
nav { contain:none; }
nav::after { display:none !important; }
.nav-menu {
position:absolute; z-index:240; top:calc(100% + 10px); left:0; right:0;
width:auto; max-height:calc(100dvh - 88px); overflow-y:auto;
padding:12px 18px 16px; border:1px solid rgba(255,255,255,.78);
border-radius:26px; color:#102019;
background:linear-gradient(145deg,rgba(246,255,251,.92),rgba(220,234,228,.82));
-webkit-backdrop-filter:blur(34px) saturate(175%); backdrop-filter:blur(34px) saturate(175%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 70px rgba(16,46,31,.28);
}
.nav-menu a { min-height:52px; display:flex; align-items:center; padding:8px 4px; font-size:1.05rem; }
.nav-menu a.active { color:#087343; }
body.menu-open { overflow:hidden; }
}
/* ── Seitenwechsel-Veil ───────────────────────────────────────────────────
Kurze Version des Start-Intros: sechs Panels schließen sich beim Klick auf
einen internen Link, die neue Seite kommt hinter denselben Panels hervor.
html.veil-arrive wird von einem Inline-Script im gesetzt, bevor die
Seite zum ersten Mal malt — so gibt es keinen weißen Blitz. */
html.veil-arrive::before {
content:""; position:fixed; inset:0; z-index:1001; pointer-events:none;
background:linear-gradient(150deg,#111d17 0%,#193328 52%,#0a100d 100%);
}
.page-veil {
position:fixed; inset:0; z-index:1002; display:grid; place-items:center;
overflow:hidden; pointer-events:none; color:#f7faf8;
}
.page-veil .veil-panels { position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); }
.page-veil .veil-panels i {
background:linear-gradient(150deg,#111d17 0%,#193328 52%,#0a100d 100%);
border-right:1px solid rgba(255,255,255,.06);
transition:transform .46s cubic-bezier(.76,0,.24,1);
will-change:transform;
}
.page-veil .veil-panels i:nth-child(2n) { background:linear-gradient(330deg,#0c1510,#214535); }
.page-veil .veil-panels i:nth-child(2),.page-veil .veil-panels i:nth-child(5) { transition-delay:.04s; }
.page-veil .veil-panels i:nth-child(3),.page-veil .veil-panels i:nth-child(4) { transition-delay:.08s; }
/* Ausgangslage: Panels stehen außerhalb; .is-in fährt sie zusammen. */
.page-veil .veil-panels i:nth-child(odd) { transform:translate3d(-105vw,0,0); }
.page-veil .veil-panels i:nth-child(even) { transform:translate3d(105vw,0,0); }
.page-veil.is-in .veil-panels i { transform:none; }
/* Weiterlaufende Bewegung, solange die neue Seite lädt: ein Lichtstreifen
wandert über die Panels, das HP-Zeichen atmet. */
.page-veil .veil-sheen {
position:absolute; inset:-20% -40%; z-index:1; pointer-events:none; opacity:0;
background:linear-gradient(105deg,transparent 40%,rgba(39,229,139,.14) 50%,rgba(255,255,255,.10) 54%,transparent 64%);
transform:translate3d(-30%,0,0);
}
.page-veil.is-in .veil-sheen { opacity:1; animation:veil-sheen 1.4s linear .2s infinite; }
@keyframes veil-sheen { from { transform:translate3d(-40%,0,0); } to { transform:translate3d(40%,0,0); } }
.page-veil .veil-mark {
position:relative; z-index:2; display:grid; place-items:center; width:72px; height:72px;
border-radius:50%; border:1.5px solid rgba(255,255,255,.7); font-weight:800; letter-spacing:.06em;
font-size:1.05rem; opacity:0; transform:scale(.8);
transition:opacity .28s ease .12s, transform .5s var(--spring) .12s;
}
.page-veil.is-in .veil-mark { opacity:1; transform:scale(1); animation:veil-breathe 1.6s ease-in-out .5s infinite; }
@keyframes veil-breathe { 0%,100% { box-shadow:0 0 0 0 rgba(39,229,139,0); } 50% { box-shadow:0 0 0 14px rgba(39,229,139,.14); } }
/* Ankunft: Panels stehen geschlossen, .is-exiting öffnet sie. */
.page-veil.is-exiting .veil-panels i:nth-child(odd) { transform:translate3d(-105vw,0,0); }
.page-veil.is-exiting .veil-panels i:nth-child(even) { transform:translate3d(105vw,0,0); }
.page-veil.is-exiting .veil-mark,.page-veil.is-exiting .veil-sheen { opacity:0; transition-delay:0s; animation:none; }
@media (prefers-reduced-motion: reduce) {
html.veil-arrive::before,.page-veil { display:none; }
}
/* ═══════════════════════════════════════════════════════════════════════
Mobile-Premium-Pass — geteilte Regeln (base.css lädt vor beiden
Premium-Layern; ID-Spezifität sorgt dafür, dass diese Blöcke gewinnen).
═══════════════════════════════════════════════════════════════════════ */
/* ── Nav: eine Geometrie auf allen sieben Seiten ─────────────────────── */
#nav {
position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:90; margin:0;
width:min(calc(100% - 32px),1360px); isolation:isolate; overflow:hidden; /* Sheen (nav::after) bleibt in der Pille; das Menü liegt außerhalb von nav */
border:1px solid rgba(255,255,255,.62); border-radius:999px;
background:rgba(239,250,245,.30);
-webkit-backdrop-filter:blur(15px) saturate(205%) contrast(108%); backdrop-filter:blur(15px) saturate(205%) contrast(108%);
box-shadow:inset 0 1.5px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(255,255,255,.22),0 22px 60px rgba(12,37,25,.2),0 4px 18px rgba(126,96,190,.12);
transition:background 260ms ease,border-color 260ms ease;
}
#nav .nav-inner {
position:relative; z-index:3; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px;
max-width:none; height:64px; padding:0 22px; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
}
#nav .nav-logo { justify-self:start; transition:color 240ms ease; }
#nav .nav-wordmark { font-size:.9375rem; letter-spacing:.02em; white-space:nowrap; }
#nav .nav-center-mark { display:grid; place-items:center; margin:0; font-size:0; color:var(--ink); transition:color 240ms ease; }
#nav .nav-center-mark .hp-badge {
width:34px; height:34px; display:grid; place-items:center; border:1.6px solid currentColor; border-radius:50%;
font-size:.68rem; font-weight:800; letter-spacing:.02em; line-height:1;
}
#nav .nav-links { justify-self:end; margin:0; }
#nav .nav-burger { display:none; }
@media (max-width:767px) {
#nav { top:8px; width:calc(100% - 16px); }
#nav .nav-inner { display:flex; gap:10px; height:58px; padding:0 max(10px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)); }
#nav .nav-wordmark { font-size:.8125rem; letter-spacing:.06em; }
#nav .nav-center-mark { display:none; }
#nav .nav-links { display:flex; margin-left:auto; }
#nav .nav-links a:not(.nav-cta) { display:none; }
#nav .nav-cta { display:inline-flex; }
#nav .nav-burger { display:flex; margin-left:0; margin-right:-6px; }
}
@media (max-width:360px) {
#nav .nav-wordmark { display:inline; font-size:.72rem; letter-spacing:.05em; }
#nav .nav-cta { display:none; } /* Pille lebt im Overlay-Menü und im Hero */
}
/* ── Mobile-Menü: Vollbild-Milchglas. #mobileMenu ist Geschwister HINTER