/* Gemeinsames Styling für alle Rechtsseiten. Farben spiegeln das App-Theme (app/src/theme/themes.ts) plus den HYPE-Akzent aus models/templates.ts. */ :root { color-scheme: light dark; --bg: #f1efe9; --surface: #fbfaf6; --text: #16151b; --muted: rgba(22, 21, 27, 0.62); --border: rgba(22, 21, 27, 0.15); --accent: #0a7c7a; --warn-bg: rgba(240, 180, 0, 0.14); --warn-border: rgba(190, 135, 0, 0.55); } @media (prefers-color-scheme: dark) { :root { --bg: #0e0e12; --surface: #17171d; --text: #f5f3ed; --muted: rgba(245, 243, 237, 0.62); --border: rgba(245, 243, 237, 0.15); --accent: #22e7e4; --warn-bg: rgba(240, 180, 0, 0.12); --warn-border: rgba(240, 180, 0, 0.4); } } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.65; max-width: 46rem; margin: 0 auto; padding: 28px 20px 96px; color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; } a { color: var(--accent); } h1 { font-size: 1.75rem; letter-spacing: -0.02em; margin: 0 0 0.25em; } h2 { font-size: 1.15rem; margin-top: 1.4em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border); } h3 { font-size: 1rem; margin-top: 1em; } .meta { color: var(--muted); font-size: 0.9rem; margin-top: 0; } .nav { font-size: 0.95rem; margin: 0 0 1.8rem; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .nav a { text-decoration: none; } .nav a[aria-current="page"] { color: var(--text); font-weight: 600; } /* Sprachwahl rechts in der Leiste. Zwei-Buchstaben-Codes statt Endonymen: fünf ausgeschriebene Namen sprengen die Spalte auf dem Handy. */ .lang { margin-left: auto; display: flex; gap: 10px; font-size: 0.85rem; } /* Der Vorrang-Hinweis auf den übersetzten Seiten. Die Klasse ist gleichzeitig der Marker, an dem `check.mjs` prüft, dass er nirgends fehlt. */ .binding { border-left: 3px solid var(--linie, #ddd); padding-left: 0.9rem; } table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.93rem; display: block; overflow-x: auto; } th, td { text-align: left; padding: 9px 11px; border: 1px solid var(--border); vertical-align: top; } th { background: var(--surface); font-weight: 600; } ul, ol { padding-left: 1.25em; } li { margin: 0.3em 0; } .note, .todo { border-radius: 10px; padding: 14px 16px; margin: 0.7em 0; } .note { background: var(--surface); border: 1px solid var(--border); } .todo { background: var(--warn-bg); border: 1px dashed var(--warn-border); } .todo strong { display: block; margin-bottom: 0.25em; } code { background: var(--surface); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; font-size: 0.9em; } address { font-style: normal; } footer { margin-top: 3.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; } /* ========================================================================== Kadenz-Look für Landingpage und FAQ. BEWUSST GANZ UNTEN UND NUR UNTER `.site`: Die vier Rechtsseiten liegen im selben Ordner und laden dieselbe Datei. Sie sollen aussehen wie immer — nüchtern, schmal, lesbar. Alles hier greift deshalb erst, wenn `` die Klasse `site` trägt, und keine einzige Regel oben wird überschrieben. Die Farben sind KEINE neuen Werte: `--bg`, `--surface`, `--text` und `--accent` stehen schon in `:root` (Zeile 5 ff.) und spiegeln `app/src/theme/themes.ts`. Dazu kommen nur die drei Vibe-Paare aus `app/src/models/templates.ts`. ========================================================================== */ :root { /* Vibe-Akzente, zeichengleich mit models/templates.ts. Modus-unabhängig — im Video sehen sie in Hell und Dunkel identisch aus, hier auch. */ --hype-1: #22e7e4; --hype-2: #ff3d7f; --smooth-1: #8ab4ff; --smooth-2: #b7f5d8; --retro-1: #ffb454; --retro-2: #ff5e7e; /* Archivo kann `wdth` als Achse. Die App bündelt dafür statische Instanzen (RN kann keine variable Breite), im Browser reicht die Variable Font. */ --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --expanded: 'wdth' 125; } body.site { max-width: none; padding: 0; font-family: var(--display); line-height: 1.55; overflow-x: hidden; } .site .wrap { max-width: 62rem; margin: 0 auto; /* NUR die Seitenränder. Wer hier auf die Kurzform `padding` zurückgeht, nullt die vertikale Polsterung jedes Abschnitts — siehe unten. */ padding-left: 22px; padding-right: 22px; } /* --- Typografie ---------------------------------------------------------- */ .site h1, .site h2, .site h3 { font-family: var(--display); font-variation-settings: var(--expanded); font-weight: 800; letter-spacing: -0.015em; line-height: 1.08; border: 0; padding: 0; } .site h1 { font-size: clamp(2.1rem, 7vw, 3.9rem); margin: 0 0 0.5rem; text-transform: uppercase; } .site h2 { font-size: clamp(1.5rem, 4.4vw, 2.3rem); margin: 0 0 1.1rem; text-transform: uppercase; } .site h3 { font-size: 1.05rem; margin: 0 0 0.35rem; font-variation-settings: normal; text-transform: none; } /* Das Mono-Label über jedem Abschnitt. Dasselbe Muster wie die Badges in der App: klein, gesperrt, Großbuchstaben, gedämpft. */ .site .kicker { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem; } .site .lead { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--muted); max-width: 34rem; margin: 0 0 1.6rem; } /* --- Kopfzeile ----------------------------------------------------------- */ .site .top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .site .top .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; } .site .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-variation-settings: var(--expanded); font-weight: 800; letter-spacing: 0.06em; font-size: 1.02rem; text-transform: uppercase; } .site .brand img { width: 28px; height: 28px; border-radius: 8px; } .site .top nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 0.9rem; } .site .top nav a { text-decoration: none; color: var(--muted); } .site .top nav a:hover { color: var(--text); } .site .top .lang { margin-left: 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; } .site .top .lang a[aria-current='page'] { color: var(--text); font-weight: 700; } /* --- Abschnitte ---------------------------------------------------------- */ /* NUR oben und unten, in Langform. Die Kurzform würde mit `.site .wrap` kollidieren, und `.wrap` gewinnt: die meisten Abschnitte tragen beide Klassen. */ .site section { padding-top: clamp(34px, 5vw, 62px); padding-bottom: clamp(34px, 5vw, 62px); border-top: 1px solid var(--border); } .site section:first-of-type { border-top: 0; } /* --- Held ---------------------------------------------------------------- */ .site .hero { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.5vw, 32px); align-items: center; padding-top: clamp(15px, 2.75vw, 31px); } @media (min-width: 860px) { .site .hero { grid-template-columns: 1.15fr 0.85fr; } } /* Der Farbschleier hinter dem Held. Zwei radiale Verläufe in den HYPE-Farben, sehr schwach — er soll Tiefe geben, nicht auffallen. `pointer-events: none`, damit er nichts abfängt. */ .site .hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 70vh; pointer-events: none; z-index: -1; background: radial-gradient(60% 50% at 78% 8%, color-mix(in srgb, var(--hype-1) 16%, transparent), transparent 70%), radial-gradient(50% 40% at 12% 30%, color-mix(in srgb, var(--hype-2) 11%, transparent), transparent 70%); } .site .hero-copy { position: relative; } /* Der Akzentstrich unter der Schlagzeile — dieselbe Geste wie der Fortschrittsbalken im Flow. */ .site .rule { width: 64px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--hype-1), var(--hype-2)); margin: 0 0 1.6rem; } /* --- Store-Knöpfe -------------------------------------------------------- */ .site .stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.9rem 0 0; padding: 0; list-style: none; } .site .store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 14px; text-decoration: none; font-family: var(--mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; border: 1px solid transparent; transition: transform 0.18s ease, box-shadow 0.18s ease; } .site .store-btn.primary { background: linear-gradient(120deg, var(--hype-1), var(--hype-2)); color: #0d0d12; } .site .store-btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .site .store-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); } .site .store-btn svg { width: 19px; height: 19px; flex: none; } .site .fineprint { font-size: 0.85rem; color: var(--muted); margin: 1rem 0 0; } /* --- Telefon-Rahmen ------------------------------------------------------ */ .site .phone { position: relative; width: min(280px, 76vw); margin: 0 auto; aspect-ratio: 886 / 1920; border-radius: 34px; padding: 9px; background: linear-gradient(150deg, color-mix(in srgb, var(--hype-1) 42%, transparent), color-mix(in srgb, var(--hype-2) 38%, transparent)); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35); } .site .phone video, .site .phone img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 26px; background: #000; } /* --- Schritte ------------------------------------------------------------ */ .site .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: step; } .site .steps li { counter-increment: step; margin: 0; padding: 22px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; } .site .steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.7rem; } .site .steps p { margin: 0; color: var(--muted); font-size: 0.95rem; } /* --- Vibe-Karten --------------------------------------------------------- */ .site .vibes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* Die Karte ist anklickbar: ein Tipp waehlt ihren Vibe aus und spielt ihn. Auf dem Handy ist das der einzige Weg, gezielt einen anzusehen. */ .site .vibe { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color 0.18s ease, transform 0.18s ease; } .site .vibe:hover { border-color: var(--v1); } .site .vibe:active { transform: scale(0.99); } /* 9:16, weil die Vibe-Videos genau dieses Format haben. Mit dem frueheren 10:16 und `object-fit: cover` schnitt der Rahmen oben und unten je rund 5 % weg - und oben sitzt die Statistik-Karte, also genau das, was die Karte vorfuehren soll. */ .site .vibe .frame { position: relative; aspect-ratio: 9 / 16; background: #000; } .site .vibe video, .site .vibe img { width: 100%; height: 100%; display: block; object-fit: cover; } /* Der Farbverlauf am unteren Rand jeder Karte trägt die Vibe-Identität. `--v1`/`--v2` setzt die Karte selbst per style-Attribut. */ .site .vibe .frame::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--v1), var(--v2)); } /* Ton-Schalter auf JEDER Vibe-Karte, immer sichtbar - nicht erst beim Darueberfahren. Auf dem Handy gibt es kein Hovern, und genau dort ist der Schalter am wichtigsten. Unten rechts, nicht oben: oben im Bild sitzt die Statistik-Karte des Videos, und die soll die Karte ja gerade vorfuehren. */ .site .vibe .ton { position: absolute; right: 10px; bottom: 12px; z-index: 2; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #f5f3ed; background: rgba(14, 14, 18, 0.62); backdrop-filter: blur(6px); transition: background 0.15s ease, transform 0.12s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .site .vibe .ton:hover { background: rgba(14, 14, 18, 0.85); } .site .vibe .ton:active { transform: scale(0.9); } .site .vibe .ton svg { width: 19px; height: 19px; display: block; } /* Der Schalter zeigt den ZUSTAND, nicht die Handlung: gedrueckt = Ton laeuft. Deshalb haengen beide Symbole an `aria-pressed`, und die Beschriftung wechselt im Skript mit. */ .site .vibe .ton .laut { display: none; } .site .vibe .ton[aria-pressed='true'] { color: var(--hype-1); } .site .vibe .ton[aria-pressed='true'] .stumm { display: none; } .site .vibe .ton[aria-pressed='true'] .laut { display: block; } /* Auf dem Handy etwas groesser: 38 Punkte sind mit dem Daumen knapp. */ @media (max-width: 620px) { .site .vibe .ton { width: 44px; height: 44px; right: 12px; bottom: 14px; } .site .vibe .ton svg { width: 22px; height: 22px; } } .site .vibe .label { padding: 14px 16px 18px; } .site .vibe .name { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; color: var(--v1); margin: 0 0 0.3rem; } .site .vibe .label p { margin: 0; font-size: 0.88rem; color: var(--muted); } /* --- Merkmalsliste ------------------------------------------------------- */ .site .feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .site .feats li { margin: 0; padding: 18px 20px 18px 46px; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; font-size: 0.94rem; color: var(--muted); } .site .feats li strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.15rem; } /* Der Haken ist gezeichnet, kein Emoji: Emoji sehen auf jeder Plattform anders aus und lassen sich nicht einfärben. */ .site .feats li::before { content: ''; position: absolute; left: 20px; top: 23px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } /* --- Preis --------------------------------------------------------------- */ .site .price { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: clamp(26px, 4vw, 40px); max-width: 40rem; } .site .price ul { list-style: none; margin: 0 0 1.4rem; padding: 0; } .site .price li { padding: 11px 0; border-bottom: 1px solid var(--border); display: flex; gap: 14px; align-items: baseline; margin: 0; } .site .price li:last-child { border-bottom: 0; } .site .price .tag { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); flex: none; min-width: 5.6rem; } /* --- FAQ ----------------------------------------------------------------- */ .site .faq { max-width: 46rem; } .site .faq details { border-bottom: 1px solid var(--border); } .site .faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 600; font-size: 1rem; } .site .faq summary::-webkit-details-marker { display: none; } /* Das Plus dreht sich beim Aufklappen zum Mal. Zwei Striche statt eines Zeichens, damit die Drehung sauber um die Mitte läuft. */ .site .faq summary::before, .site .faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 2px; background: var(--accent); border-radius: 1px; transition: transform 0.24s ease; } .site .faq summary::after { transform: rotate(90deg); } .site .faq details[open] summary::after { transform: rotate(180deg); } .site .faq details[open] summary::before { transform: rotate(180deg); } .site .faq .answer { padding: 0 0 20px; color: var(--muted); font-size: 0.95rem; } .site .faq .answer > *:first-child { margin-top: 0; } .site .faq .answer > *:last-child { margin-bottom: 0; } .site .faq h2 { margin-top: 2.6rem; font-size: 1.15rem; } .site .faq h2:first-of-type { margin-top: 0; } /* --- Fußzeile ------------------------------------------------------------ */ .site footer.site-foot { border-top: 1px solid var(--border); margin: 0; padding: 22px 0 30px; color: var(--muted); font-size: 0.9rem; } .site footer.site-foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 1.2rem; padding: 0; list-style: none; } .site footer.site-foot a { text-decoration: none; } .site footer.site-foot a:hover { text-decoration: underline; } /* --- Bewegung ------------------------------------------------------------ */ /* Eintritt beim Scrollen. `animation-timeline: view()` gibt es noch nicht überall — wo es fehlt, steht der Inhalt einfach sofort da, was der richtige Rückfall ist. Kein JavaScript, kein Beobachter. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .site .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .site * { animation: none !important; transition: none !important; } }