/* Valyda – Website.
*
* Haltung: eine Schriftfamilie, wenige Grössen, viel Weissraum, eine
* Akzentfarbe. Keine Schatten, keine Verläufe auf Flächen, kein Dekor. Was
* nicht trägt, kommt weg.
*/
/* Farben liegen in Variablen, damit hell und dunkel dieselbe Struktur teilen.
* Standard ist die Systemeinstellung; ein data-theme am überschreibt sie.
* Hell ist keine Umkehrung von Dunkel: Weiss braucht mehr Kontrast in den
* Linien und weniger Sättigung im Akzent, sonst flimmert es. */
:root,
:root[data-theme="light"] {
--bg: #fff;
--surface: #f6f6f8;
--line: rgba(0, 0, 0, 0.11);
--text: #12131a;
--muted: rgba(18, 19, 26, 0.62);
--accent: #1f5cf0;
--glow: rgba(43, 108, 255, 0.10);
--header-bg: rgba(255, 255, 255, 0.78);
--btn-ghost-hover: rgba(0, 0, 0, 0.05);
--code-bg: rgba(0, 0, 0, 0.06);
--measure: 46rem;
--gap: clamp(4.5rem, 11vw, 9rem);
}
:root[data-theme="dark"] {
--bg: #000;
--surface: #0a0a0b;
--line: rgba(255, 255, 255, 0.12);
--text: #f5f5f7;
--muted: rgba(245, 245, 247, 0.62);
--accent: #2b6cff;
--glow: rgba(43, 108, 255, 0.22);
--header-bg: rgba(0, 0, 0, 0.72);
--btn-ghost-hover: rgba(255, 255, 255, 0.06);
--code-bg: rgba(255, 255, 255, 0.07);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #000;
--surface: #0a0a0b;
--line: rgba(255, 255, 255, 0.12);
--text: #f5f5f7;
--muted: rgba(245, 245, 247, 0.62);
--accent: #2b6cff;
--glow: rgba(43, 108, 255, 0.22);
--header-bg: rgba(0, 0, 0, 0.72);
--btn-ghost-hover: rgba(255, 255, 255, 0.06);
--code-bg: rgba(255, 255, 255, 0.07);
}
}
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap {
width: min(100% - 2.5rem, 68rem);
margin-inline: auto;
}
/* --------------------------------------------------------------- Typografie */
h1, h2, h3 {
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.08;
margin: 0;
text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.3rem); letter-spacing: -0.02em; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
.lead {
font-size: clamp(1.1rem, 2.1vw, 1.4rem);
color: var(--muted);
line-height: 1.5;
letter-spacing: -0.01em;
}
.eyebrow {
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
.muted { color: var(--muted); }
/* -------------------------------------------------------------------- Kopf */
header {
position: sticky;
top: 0;
z-index: 10;
background: var(--header-bg);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex;
align-items: center;
gap: 2rem;
height: 3.25rem;
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.42rem;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.04em;
text-decoration: none;
}
/* Die Marke ist ein V, dessen rechter Schenkel höher ausläuft – sie liest sich
zugleich als Häkchen. Sie erbt die Akzentfarbe des jeweiligen Farbmodus. */
.logo svg {
/* Die Marke ist breiter als hoch; ein quadratischer Kasten würde sie
kleiner erscheinen lassen als nötig. */
height: 0.92em;
width: auto;
color: var(--accent);
flex: none;
}
.nav ul {
display: flex;
gap: 1.75rem;
margin: 0 0 0 auto;
padding: 0;
list-style: none;
font-size: 0.88rem;
}
.nav a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav a:hover { color: var(--text); }
@media (max-width: 640px) {
.nav ul li:not(:last-child) { display: none; }
}
/* -------------------------------------------------------------------- Hero */
.hero {
position: relative;
padding: clamp(4rem, 10vw, 7.5rem) 0 0;
text-align: center;
overflow: hidden;
}
/* Das Licht kommt aus CSS statt aus einer Bilddatei: exakt steuerbar,
auflösungsunabhängig und ohne Ladezeit. */
.hero::before {
content: "";
position: absolute;
inset: -30% -10% auto;
height: 70%;
background: radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%);
pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { margin-bottom: 1.4rem; }
.hero .lead { max-width: 34rem; margin-inline: auto; }
/* Das Hero-Motiv gibt es in zwei Fassungen: dunkles Objekt auf Schwarz und
dasselbe Objekt auf Weiss. Als Hintergrundbild statt als ![]()
, weil der
Browser so nur die Fassung lädt, die auch sichtbar ist – bei zwei ![]()
mit
display:none würden beide übertragen. */
.hero-figure {
margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
max-width: 42rem;
aspect-ratio: 1400 / 1027;
background-image: image-set(url("/img/hero-light.webp") 1x);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
/* Weicher Auslauf, damit die Bildkante nicht sichtbar wird. */
-webkit-mask-image: radial-gradient(75% 75% at 50% 45%, #000 55%, transparent 100%);
mask-image: radial-gradient(75% 75% at 50% 45%, #000 55%, transparent 100%);
}
:root[data-theme="dark"] .hero-figure {
background-image: image-set(url("/img/hero.webp") 1x);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .hero-figure {
background-image: image-set(url("/img/hero.webp") 1x);
}
}
@media (max-width: 700px) {
.hero-figure { background-image: image-set(url("/img/hero-light@800.webp") 1x); }
:root[data-theme="dark"] .hero-figure {
background-image: image-set(url("/img/hero@800.webp") 1x);
}
}
/* ------------------------------------------------------- Farbmodus-Schalter */
.theme-toggle {
margin-left: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text); }
.theme-toggle svg { width: 1rem; height: 1rem; display: block; }
/* Sonne bei dunklem Modus (Angebot: hell schalten), Mond bei hellem. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
:root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}
/* ------------------------------------------------------------------ Buttons */
.actions {
display: flex;
gap: 0.8rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.btn {
display: inline-block;
padding: 0.72rem 1.5rem;
border-radius: 980px;
background: var(--accent);
color: #fff;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
border: 1px solid transparent;
transition: filter 0.2s, background 0.2s;
}
.btn:hover { filter: brightness(1.12); }
.btn--ghost {
background: transparent;
border-color: var(--line);
color: var(--text);
}
.btn--ghost:hover { background: var(--btn-ghost-hover); filter: none; }
/* ----------------------------------------------------------------- Abschnitte */
section { padding: var(--gap) 0; }
.section-head {
max-width: var(--measure);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head .eyebrow { display: block; margin-bottom: 0.9rem; }
.section-head h2 + p { margin-top: 1.1rem; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
/* Raster für Karten und Schritte */
.grid {
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) {
.grid--3, .grid--2 { grid-template-columns: 1fr; }
}
.cell {
background: var(--surface);
padding: clamp(1.6rem, 3vw, 2.2rem);
}
.cell h3 { margin-bottom: 0.6rem; }
.cell p { color: var(--muted); font-size: 0.95rem; }
.step-no {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 1.2rem;
font-variant-numeric: tabular-nums;
}
/* Datensparsamkeit: die stärkste Aussage bekommt die grösste Fläche */
.claim {
text-align: center;
max-width: 40rem;
margin-inline: auto;
}
.claim .big {
font-size: clamp(2.4rem, 6.5vw, 4rem);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.05;
margin: 1.5rem 0;
}
.claim .big em { font-style: normal; color: var(--accent); }
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
margin-top: 3rem;
text-align: left;
}
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
.compare > div { background: var(--surface); padding: 1.6rem; }
.compare h3 { font-size: 0.95rem; margin-bottom: 1rem; }
.compare ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.92rem; }
.compare li { margin-bottom: 0.4rem; }
.compare li::marker { color: var(--accent); }
/* ------------------------------------------------------------------ Kontakt */
.cta {
text-align: center;
position: relative;
overflow: hidden;
border-top: 1px solid var(--line);
}
.cta::before {
content: "";
position: absolute;
inset: auto -20% -60%;
height: 90%;
background: radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%);
pointer-events: none;
}
.cta > * { position: relative; }
.cta p { max-width: 32rem; margin: 1.2rem auto 0; }
/* -------------------------------------------------------------------- Fuss */
footer {
border-top: 1px solid var(--line);
padding: 3rem 0;
font-size: 0.85rem;
color: var(--muted);
}
.footer-inner {
display: flex;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
footer ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--text); }
/* ------------------------------------------------------- Fliesstext-Seiten */
.doc { padding: clamp(3rem, 7vw, 5rem) 0 var(--gap); }
.doc .wrap { width: min(100% - 2.5rem, var(--measure)); }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 0.6rem; }
.doc h2 { font-size: 1.35rem; margin: 3rem 0 0.8rem; }
.doc h3 { margin: 2rem 0 0.5rem; }
.doc p, .doc li { color: var(--muted); }
.doc p + p { margin-top: 1rem; }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.4rem; }
.doc li::marker { color: var(--accent); }
.doc table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.92rem; }
.doc th, .doc td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line);
vertical-align: top; color: var(--muted); }
.doc th { color: var(--text); font-weight: 600; }
.doc code { font-size: 0.88em; background: var(--code-bg); padding: 0.1em 0.35em;
border-radius: 4px; }
.doc .updated { font-size: 0.85rem; color: var(--muted); }
/* Offene Stellen in den Rechtstexten sichtbar machen, damit nichts
Unausgefülltes unbemerkt online geht. */
.todo {
background: rgba(255, 176, 32, 0.16);
border-bottom: 1px dashed rgba(255, 176, 32, 0.8);
color: #ffd48a;
padding: 0 0.25em;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
}
/* ==================================================== Reiter (Integration) */
.tabs {
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
}
@media (max-width: 820px) {
.tabs { grid-template-columns: 1fr; }
}
.tabs__list {
background: var(--surface);
display: flex;
flex-direction: column;
padding: 0.5rem;
gap: 1px;
}
@media (max-width: 820px) {
.tabs__list { flex-direction: row; overflow-x: auto; padding: 0.4rem; }
}
.tabs__tab {
appearance: none;
background: transparent;
border: 0;
border-radius: 9px;
color: var(--muted);
cursor: pointer;
font: inherit;
font-size: 0.95rem;
padding: 0.7rem 0.85rem;
text-align: left;
display: flex;
flex-direction: column;
gap: 0.1rem;
white-space: nowrap;
transition: background 0.18s, color 0.18s;
}
.tabs__tab:hover { color: var(--text); background: var(--btn-ghost-hover); }
.tabs__tab.is-active {
background: var(--bg);
color: var(--text);
font-weight: 600;
}
.tabs__note {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--muted);
}
.tabs__tab.is-active .tabs__note { color: var(--accent); }
.tabs__panels { background: var(--bg); }
.tabs__panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
@media (max-width: 700px) {
.tabs__panel { grid-template-columns: 1fr; }
}
/* display:grid schlaegt das hidden-Attribut – ohne diese Regel stuenden alle
Bereiche gleichzeitig untereinander. */
.tabs__panel[hidden] { display: none; }
/* Der Wechsel bekommt eine kurze Einblendung, damit der Sprung nicht hart wirkt. */
.tabs__panel.is-active { animation: valyda-fade 0.35s ease both; }
@keyframes valyda-fade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.tabs__text h3 { margin-bottom: 0.6rem; }
.tabs__text p { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.25rem; }
/* ------------------------------------------------------------ Mockup-Kasten */
/* Nachbau statt Bildschirmfoto: bleibt in jeder Auflösung scharf, folgt dem
Farbmodus und kostet keine Ladezeit. */
.mock {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--surface);
min-height: 17rem;
display: flex;
flex-direction: column;
}
.mock__bar {
display: flex;
gap: 0.35rem;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--line);
}
.mock__bar i {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--line);
}
.mock__body { padding: 1rem; display: grid; gap: 0.75rem; }
.mock__card {
border: 1px solid var(--line);
border-radius: 9px;
padding: 0.85rem;
background: var(--bg);
text-align: center;
}
.mock__card strong { font-size: 0.9rem; display: block; }
.mock__card p { font-size: 0.76rem; color: var(--muted); margin: 0.25rem 0 0.7rem; }
.mock__qr {
width: 5.5rem;
height: 5.5rem;
margin: 0 auto 0.6rem;
border-radius: 4px;
/* Angedeutetes Muster statt eines echten Codes – ein scanbarer QR-Code auf
einer Website wäre eine Einladung, ihn zu scannen. */
background:
repeating-linear-gradient(90deg, var(--text) 0 4px, transparent 4px 8px),
repeating-linear-gradient(0deg, var(--text) 0 4px, transparent 4px 8px);
opacity: 0.22;
}
.mock__status { font-size: 0.72rem; color: var(--muted); }
.mock__button {
background: var(--accent);
color: #fff;
border-radius: 7px;
text-align: center;
padding: 0.6rem;
font-size: 0.8rem;
font-weight: 600;
opacity: 0.45;
}
.mock--soon,
.mock--code { align-items: center; justify-content: center; padding: 1.25rem; }
.mock--soon span { color: var(--muted); font-size: 0.9rem; text-align: center; }
.mock--code pre {
margin: 0;
width: 100%;
overflow-x: auto;
font-size: 0.78rem;
line-height: 1.65;
color: var(--text);
}
.mock--code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mock--code .c { color: var(--muted); }
/* ------------------------------------------------------------- Einblenden */
/* Ohne JavaScript bleibt alles sichtbar; die Klasse wird erst gesetzt, wenn das
Skript läuft. */
.js .reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1),
transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; transition: none; }
.tabs__panel.is-active { animation: none; }
}