@import url('tokens.css');
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--text);
background: var(--bg-page);
line-height: 1.65;
/* Deutsche Komposita sind lang und brechen nicht von selbst. Ohne diese Regel
schob z.B. „Auftragsverarbeitungsverträge" auf der Datenschutzseite die
Seite bei 320px um 65px über den Rand — sichtbar nur als seitlich
wegschiebbare Seite, kein Element ragte messbar heraus (der Textknoten
selbst lief über). Greift nur im Notfall, normaler Umbruch bleibt. */
overflow-wrap: break-word;
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--navy); }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
/* ── Typografie ── */
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 420; text-wrap: balance; }
/* Obergrenze 88 → 76px (05.08.2026): bei 88px war „Dokumentation," 537px breit
und passte nicht in die 504px der Hero-Textspalte — der Titel brauchte drei
Zeilen mit Trennstrich. Mit 76px steht er auf allen gemessenen Breiten wieder
zweizeilig und ungetrennt. Die Spaltengeometrie bleibt unangetastet, weil das
Infopool-Schaltbild daneben abgenommenes Signatur-Element ist. */
h1 { font-size: clamp(40px, 3rem + 2.5vw, 76px); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 24px; }
h2 { font-size: clamp(30px, 1.8rem + 1.2vw, 52px); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 20px; }
h3 { font-size: 22px; line-height: 1.3; }
/* Überschriften brechen nicht mitten im Wort. `overflow-wrap: break-word` aus
der body-Regel (Zeile 15) vererbt sich bis hierher und zerschnitt den
Hero-Titel zwischen „Dokumentatio" und „n". Die Ursache ist Geometrie, nicht
Stil: die Hero-Textspalte ist fest 504px breit (Container 1080 − 48 Rand −
48 Spalt − 480 Schaltbild), „Dokumentation," bei 88px aber 537px. Statt
eines harten Schnitts bekommen Überschriften die normale Umbruchregel plus
deutsche Silbentrennung — alle sechs Seiten tragen ``.
Fließtext behält `break-word`: der 320px-Schutz aus Zeile 10-14 bleibt,
nachgemessen an „Auftragsverarbeitungsverträge" auf der Datenschutzseite. */
h1, h2, h3 {
overflow-wrap: normal;
-webkit-hyphens: auto;
hyphens: auto;
}
.mark { color: var(--brass); } /* das eine Gold-Objekt pro Seite */
.eyebrow {
font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
color: var(--text-2); margin-bottom: 20px;
}
.section-dark .eyebrow { color: var(--brass-light); }
.lede { font-size: 19px; color: var(--text-2); line-height: 1.6; max-width: 640px; text-wrap: pretty; }
/* Nachsatz unter einer Lede: gleiche Spaltenbreite, eine Stufe leiser. Trägt das,
was nur eine Minderheit der Leser betrifft (z.B. den Hybrid-Betrieb). */
.lede-sub { font-size: 17px; line-height: 1.6; max-width: 640px; margin-top: 16px; text-wrap: pretty; }
/* Sichtbarer Fokus überall (Quality-Floor) */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.section-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible {
outline-color: var(--brass-light);
}
/* Anker landen nicht unter dem Sticky-Header */
section[id] { scroll-margin-top: 76px; }
/* ── Sektionen ── */
.section { padding: 96px 0; }
.section-dark { background: var(--ink); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .lede, .section-dark .lede-sub { color: var(--on-dark-2); }
/* ── Buttons ── */
.btn {
display: inline-block; font-family: var(--font-body); font-weight: 600;
font-size: 16px; padding: 14px 28px; border-radius: var(--radius-btn);
border: 1px solid transparent; cursor: pointer; text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: #EDF2F8; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--border-strong); }
.section-dark .btn-ghost { color: var(--on-dark); border-color: rgba(230,237,243,0.35); }
/* ── Karten ── */
.card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: 0 1px 2px rgba(16,42,67,0.05), 0 6px 18px rgba(16,42,67,0.06);
}
/* ── Header / Nav ── */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(16,42,67,0.97); border-bottom: 1px solid rgba(230,237,243,0.12);
}
.site-header .container { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { font-family: var(--font-display); font-size: 22px; color: #fff; text-decoration: none; font-weight: 480; }
.logo .mark { color: var(--brass-light); }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav a { color: var(--on-dark-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav .btn { padding: 9px 18px; font-size: 14px; }
/* .nav a (0,1,1) schlaegt .btn-light (0,1,0) — ohne diese Regel kapert die
Menuefarbe (--on-dark-2) die Knopfschrift: hellgrau auf weiss, Kontrast
2,15:1, kaum lesbar (07.08.2026). */
.nav a.btn-light { color: var(--navy); }
/* ── Footer ── */
.site-footer {
background: var(--ink); color: var(--on-dark-2); padding: 48px 0; font-size: 14px;
border-top: 1px solid rgba(230,237,243,0.12);
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.site-footer a { color: var(--on-dark-2); }
.site-footer .tagline { color: var(--on-dark); font-family: var(--font-display); }
.site-footer .legal { margin-left: auto; display: flex; gap: 20px; }
/* ── Reveal (scroll-getriggert, dezent) ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ── Mobile ── */
@media (max-width: 720px) {
.section { padding: 64px 0; }
.nav { gap: 14px; }
.nav a:not(.btn) { display: none; } /* Mobile: nur Logo + CTA (v1, kein Burger) */
/* Ausnahme: der Einstieg für bestehende Zugänge. Wer schon ein Konto hat,
sucht ihn genau hier — ihn mobil auszublenden hiesse, Testnutzer am Telefon
vor eine Seite ohne Tür zu stellen. */
/* Die Schriftgröße bleibt klein, die Tippfläche nicht: mit dem Innenabstand
wächst das Ziel auf gut 44 px, ohne dass die Leiste höher wird — der Knopf
daneben ist bereits 43 px hoch und gibt die Zeilenhöhe vor. */
.nav a.nav-login { display: inline; font-size: 14px; padding: 11px 4px; }
}
/* Auf dem Telefon reicht die Leiste nicht für Logo + „Anmelden" + die volle
Knopf-Beschriftung: es fehlen rund 60 px, der Knopf würde dreizeilig
gequetscht oder rechts abgeschnitten. Darum trägt der Knopf zwei
Beschriftungen und zeigt hier die kurze. `display: none` nimmt die jeweils
andere auch aus der Vorlesereihenfolge — es wird nie beides angesagt. */
.btn-kurz { display: none; }
@media (max-width: 430px) {
.nav .btn-lang { display: none; }
.nav .btn-kurz { display: inline; }
}
/* No-JS: Reveal-Elemente sofort sichtbar */
.no-js .reveal { opacity: 1; transform: none; }
/* ── Hero ── */
.hero { padding: 120px 0 110px; }
.hero .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.hero h1 { max-width: 15ch; margin-bottom: 28px; }
.hero .lede { margin-bottom: 20px; }
/* Der Zweizeiler unter der Lede: dieselbe Groesse, aber hell und damit die
Zeile, an der das Auge haengenbleibt. Kein eigener Absatzabstand nach oben —
er gehoert zur Lede, er folgt ihr nicht. */
.hero-fluss {
font-size: 19px; line-height: 1.6; color: #fff; font-weight: 600;
max-width: 640px; margin: 0 0 40px;
}
/* ── Infopool-Schaltbild (Hero-Signatur — architektonisch, gerade Linien) ── */
.pool-schematic {
display: grid; grid-template-columns: max-content 18px max-content 18px max-content;
align-items: center; align-self: center;
--ps-line: rgba(230,237,243,0.28);
}
.pool-schematic ul { list-style: none; display: flex; flex-direction: column; }
.ps-modules { gap: 9px; }
.ps-docs { gap: 14px; }
.ps-modules li, .ps-docs li {
position: relative; font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
color: var(--on-dark-2); border: 1px solid var(--ps-line);
border-radius: var(--radius-btn); padding: 6px 11px; background: rgba(255,255,255,0.03);
white-space: nowrap;
}
.ps-docs li { color: var(--on-dark); border-color: rgba(230,237,243,0.4); }
/* Verbinder: Chip → Sammelschiene */
.ps-modules li::after {
content: ''; position: absolute; left: 100%; top: 50%; width: 18px; height: 1px;
background: var(--ps-line);
}
.ps-docs li::before {
content: ''; position: absolute; right: 100%; top: 50%; width: 18px; height: 1px;
background: var(--ps-line);
}
/* Sammelschienen (vertikale Hairlines) */
.ps-rail { align-self: stretch; justify-self: center; width: 1px; background: var(--ps-line); margin: 15px 0; }
/* Stamm: der Infopool */
.ps-pool {
position: relative; text-align: center; padding: 18px 18px;
border: 1px solid rgba(230,237,243,0.5); border-radius: var(--radius-card);
background: rgba(255,255,255,0.05);
}
.ps-pool::before, .ps-pool::after {
content: ''; position: absolute; top: 50%; width: 18px; height: 1px; background: var(--ps-line);
}
.ps-pool::before { right: 100%; }
.ps-pool::after { left: 100%; }
.ps-pool-title { display: block; font-family: var(--font-display); font-size: 20px; color: #fff; }
.ps-pool-sub { display: block; font-size: 11px; color: var(--on-dark-2); margin-top: 4px; }
/* Einblend-Choreografie: Äste → Stamm → Dokumente */
@media (prefers-reduced-motion: no-preference) {
.ps-modules li, .ps-pool, .ps-docs li, .ps-rail { opacity: 0; animation: ps-in 0.55s ease forwards; }
.ps-modules li:nth-child(1) { animation-delay: 0.15s; }
.ps-modules li:nth-child(2) { animation-delay: 0.27s; }
.ps-modules li:nth-child(3) { animation-delay: 0.39s; }
.ps-modules li:nth-child(4) { animation-delay: 0.51s; }
.ps-modules li:nth-child(5) { animation-delay: 0.63s; }
.ps-modules li:nth-child(6) { animation-delay: 0.75s; }
.ps-rail { animation-delay: 0.9s; }
.ps-pool { animation-delay: 1.05s; }
.ps-docs li:nth-child(1) { animation-delay: 1.3s; }
.ps-docs li:nth-child(2) { animation-delay: 1.42s; }
.ps-docs li:nth-child(3) { animation-delay: 1.54s; }
}
@keyframes ps-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.no-js .ps-modules li, .no-js .ps-pool, .no-js .ps-docs li, .no-js .ps-rail { opacity: 1; animation: none; }
@media (max-width: 1099px) {
.hero .container { grid-template-columns: minmax(0, 1fr); }
.pool-schematic { display: none; }
}
/* Auf Telefonbreiten eigene Kopfzeilen-Skala. Grund: „Dokumentation," ist ein
einzelnes, nicht umbrechbares Wort — bei der Seitenskala (3rem + 2.5vw) war
es auf 390px 403px breit und schob die gesamte Seite 37px über den Rand; die
Startseite liess sich auf dem Telefon seitlich wegschieben (gemessen
01.08.2026, 320-430px). Bewusst NICHT die globale h1-Skala geändert: die
Desktop-Kopfzeile ist abgenommenes Signatur-Element und bleibt unberührt.
Der Sprung an der Breakpoint-Kante ist gewollt — 720px ist bereits die
Kante, an der die Trust-Bar umbricht. */
@media (max-width: 720px) {
h1 { font-size: clamp(32px, 1.8rem + 2.6vw, 52px); }
}
.cta-form { display: flex; gap: 12px; max-width: 560px; flex-wrap: wrap; }
.cta-form input {
/* Basis bewusst niedrig: die Hero-Textspalte teilt sich die Breite mit dem
auto-breiten Schaltbild, dessen Beschriftung sich ändern kann. Bei 260px
lag das Formular exakt auf der Umbruchkante. */
/* min-width:0 gegen die Voreinstellung `auto` von Flex-Items: Ohne sie kann
ein Eingabefeld nicht unter seine intrinsische Mindestbreite schrumpfen
(Platzhaltertext + Innenabstand). Auf iPhone-Breite (390px) schob das die
Hero-Spalte auf 403px und die ganze Seite 37px über den Rand — die Seite
liess sich seitlich wegschieben. Gemessen 01.08.2026. */
flex: 1 1 200px; min-width: 0; padding: 13px 16px; font: inherit; font-size: 16px;
border: 1px solid rgba(230,237,243,0.3); border-radius: var(--radius-btn);
background: rgba(255,255,255,0.06); color: #fff;
}
.cta-form input::placeholder { color: var(--on-dark-2); }
.hero-note { margin-top: 16px; font-size: 14px; color: var(--on-dark-2); }
.hero-note a { color: var(--on-dark-2); }
/* Honeypot: für Bots im DOM, für Menschen und Screenreader nicht vorhanden.
Nicht display:none — genau das erkennen die besseren Formular-Bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Statuszeile der CTA-Formulare. Eigene Zeile unter dem Feld (flex-basis 100%),
sonst drängt sie sich neben den Knopf. Farbe aus dem Token-Satz: der Erfolgs-
fall bekommt die volle Textstufe auf Navy, der Fehlerfall Messing — die eine
Akzentfarbe des Systems. Ein Rot gibt es hier nicht und wird auch nicht
erfunden; die Bedeutung trägt der Satz, nicht die Farbe. */
.cta-form .form-feedback { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--on-dark-2); }
.cta-form .form-feedback.is-success { color: var(--on-dark); }
.cta-form .form-feedback.is-error { color: var(--brass-light); }
/* ── Trust-Bar ── */
.trust-bar { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 28px 0; }
.trust-items { display: flex; gap: 24px 0; flex-wrap: wrap; justify-content: center; }
.trust-item { display: flex; flex-direction: column; gap: 2px; padding: 0 40px; }
.trust-item + .trust-item { border-left: 1px solid var(--border); }
@media (max-width: 720px) {
.trust-items { flex-direction: column; gap: 14px; }
.trust-item { padding: 0; }
.trust-item + .trust-item { border-left: none; }
}
.trust-item strong { font-size: 15px; color: var(--ink); }
.trust-item span { font-size: 13px; color: var(--text-2); }
/* Normen-Zeile: bewusst eine Stufe leiser als die drei Trust-Aussagen darüber.
Normnummern adressieren Einkauf, Beratung und Audit — nicht den Arzt in der
Sprechstunde. Gleiches Gewicht würde die drei Aussagen verwässern, die er
sofort versteht; deshalb Trennlinie, kleinerer Grad, Sekundärfarbe. */
.trust-normen {
margin: 22px auto 0; padding-top: 18px; max-width: 640px;
border-top: 1px solid var(--border);
text-align: center; font-size: 13px; color: var(--text-2);
}
/* Unterstreichung als eigene Farbe statt color-mix: Die IFU nennt Safari 15 als
unterstützt, color-mix() kam erst mit Safari 16.2 — dort fiele der Rahmen auf
currentColor zurück und die Zeile bekäme einen zu harten Strich. */
.trust-normen a {
color: var(--navy); text-decoration: none;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 1px; white-space: nowrap;
}
.trust-normen a:hover { border-bottom-color: var(--navy); }
/* ── Infopool-Demo (spielt automatisch ab, keine Scroll-Steuerung) ── */
.demo-track { position: relative; }
.demo-sticky { padding: 40px 0 8px; }
/* Einspaltig: die frühere 220px-Spalte trug die inzwischen entfernte
Modulknopf-Liste (.demo-branches). Ohne sie quetschte .demo-stage in die
220px und 780px blieben leer (07.08.2026). */
.demo-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; width: 100%; }
/* ── Bildspalte im Scroll-Demo ──
Links das echte Produkt, rechts die wachsende Infopool-Liste. Die Anhaeufung
rechts traegt die Kernaussage der Seite („einmal erfasst, in jedem Dokument
verfuegbar") und wird deshalb NICHT durch Einzelbilder ersetzt, sondern
ergaenzt. */
/* Bild und Infopool liegen untereinander, nicht nebeneinander: nebeneinander
war das Bildschirmfoto entweder unlesbar schmal oder die Buehne musste aus
der Textspalte ausbrechen — und ein Block, der links weiter herausragt als
der Text darueber, sieht verrutscht aus (07.08.2026). Untereinander ist das
Bild so breit wie die Spalte und liegt auf demselben Raster. */
.demo-stage {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
align-items: start;
}
/* Alle sieben Bilder liegen uebereinander; sichtbar ist das der aktiven Stufe.
Das erste bleibt im Fluss und gibt dem Stapel seine Hoehe — alle sind 16:9,
deshalb springt beim Wechsel nichts. */
.demo-shots { position: relative; }
.demo-shots video {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: var(--radius-card);
opacity: 0;
transition: opacity 0.4s ease;
background: var(--bg-card);
}
.demo-shots video:not(:first-child) { position: absolute; inset: 0; }
/* Drei Filme im Wechsel — bewusst eine unvollstaendige Auswahl der Module:
sie zeigt, dass fehlende Bausteine den Rest nicht aufhalten (07.08.2026). */
.demo-sticky[data-stage="1"] [data-clip="1"],
.demo-sticky[data-stage="2"] [data-clip="2"],
.demo-sticky[data-stage="3"] [data-clip="3"] { opacity: 1; }
/* Stufe 0 zeigt das erste Bild gedaempft, damit die Spalte nicht leer beginnt. */
.demo-sticky[data-stage="0"] [data-clip="1"] { opacity: 0.35; }
@media (max-width: 900px) {
.demo-stage { grid-template-columns: minmax(0, 1fr); }
}
.demo-mock { overflow: hidden; }
.mock-chrome {
display: flex; align-items: center; gap: 6px; padding: 10px 14px;
border-bottom: 1px solid var(--border); background: #F4F7FB;
}
.mock-chrome span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mock-chrome em { font-style: normal; font-size: 12px; color: var(--text-2); margin-left: 8px; }
.mock-head { padding: 14px 18px 6px; font-weight: 700; color: var(--ink); font-size: 15px; }
.mock-rows { width: 100%; border-collapse: collapse; }
.mock-rows td { padding: 9px 18px; font-size: 14px; border-top: 1px solid var(--border); }
.mock-rows .chip {
width: 52px; font-size: 11px; font-weight: 700; color: var(--navy);
border-right: 1px solid var(--border); text-align: center;
}
.mock-outputs { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.mock-outputs .doc {
padding: 8px 14px; border: 1px solid var(--navy); border-radius: var(--radius-btn);
color: var(--navy); font-size: 13px; font-weight: 600; background: #fff;
}
.mock-sync { padding: 12px 18px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--ink); }
.demo-caption { grid-column: 1 / -1; font-size: 17px; color: var(--text-2); min-height: 3.2em; display: none; max-width: 720px; }
.demo-disclaimer { grid-column: 1 / -1; font-size: 12px; color: var(--text-2); }
/* ── Faire Nutzung (preise.html) ──
Eine Tabelle, keine Karten: es sind drei Zeilen Zahlwerk, kein Verkauf. */
.fair-tabelle {
width: 100%; max-width: 760px; margin: 32px 0 24px;
border-collapse: collapse; font-size: 16px; line-height: 1.5;
}
.fair-tabelle th {
text-align: left; font-weight: 600; color: var(--text-2); font-size: 14px;
padding: 0 16px 10px 0; border-bottom: 1px solid var(--border-strong);
}
.fair-tabelle td {
padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border);
color: var(--text-2); vertical-align: top;
}
.fair-tabelle td strong { color: var(--ink); }
.fair-tabelle td:nth-child(2), .fair-tabelle td:nth-child(3),
.fair-tabelle th:nth-child(2), .fair-tabelle th:nth-child(3) {
text-align: right; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums;
}
.fair-text { font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 760px; margin: 0 0 12px; text-wrap: pretty; }
/* ── Baustein-Liste (Takt 1) ──
Zehn gleichrangige Eintraege. Bewusst ohne Nummern, ohne Pfeile, ohne
Reihenfolge: die Form traegt die Aussage, dass jeder Baustein fuer sich
steht — deshalb steht sie nirgends als Satz (07.08.2026). */
.bausteine {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px 48px;
margin-top: 40px;
}
.baustein h3 {
font-size: 19px;
margin: 0 0 8px;
color: var(--ink);
}
.baustein p {
font-size: 16px;
line-height: 1.6;
color: var(--text-2);
margin: 0;
text-wrap: pretty;
}
/* Die "statt"-Zeile ist die Pointe des Eintrags und steht deshalb abgesetzt,
nicht als weiterer Satz im Absatz. */
.baustein .statt {
margin-top: 8px;
color: var(--ink);
font-weight: 600;
}
.baustein .fair {
display: block;
margin-top: 4px;
font-weight: 400;
font-size: 14px;
color: var(--text-2);
}
.baustein .fair a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--border-strong);
text-underline-offset: 2px;
}
.baustein .fair a:hover { text-decoration-color: var(--navy); }
/* Stage-Steuerung: Elemente mit data-on="N" erscheinen ab Stage N */
[data-stage] tr[data-on], [data-stage] .mock-outputs, [data-stage] .mock-sync { display: none; }
.demo-sticky[data-stage="1"] tr[data-on="1"],
.demo-sticky[data-stage="2"] tr[data-on="1"], .demo-sticky[data-stage="2"] tr[data-on="2"],
.demo-sticky[data-stage="3"] tr[data-on="1"], .demo-sticky[data-stage="3"] tr[data-on="2"] { display: table-row; }
.demo-sticky[data-stage="3"] .mock-outputs { display: flex; }
.demo-sticky[data-stage="3"] .mock-sync { display: block; }
/* Caption der aktiven Stage */
.demo-sticky[data-stage="0"] [data-caption="0"], .demo-sticky[data-stage="1"] [data-caption="1"],
.demo-sticky[data-stage="2"] [data-caption="2"], .demo-sticky[data-stage="3"] [data-caption="3"] { display: block; }
/* No-JS / Reduced-Motion: Endzustand statisch, Scroll-Strecke kollabiert */
.no-js .demo-sticky tr[data-on] { display: table-row; }
.no-js .demo-sticky .mock-outputs { display: flex; }
.no-js .demo-sticky .mock-sync { display: block; }
.no-js .demo-sticky .demo-shots [data-clip="3"] { opacity: 1; }
.no-js .demo-sticky .demo-shots video:not([data-clip="3"]) { opacity: 0; }
.no-js .demo-caption { display: none !important; }
.no-js .demo-sticky [data-caption="3"] { display: block !important; }
@media (prefers-reduced-motion: reduce) {
/* .demo-sticky davorgestellt: ohne das verliert die Regel gegen
`.demo-sticky[data-stage="N"] [data-clip="N"]` (0,3,0) und es waeren zwei
Filme gleichzeitig sichtbar. Die Filme werden hier nie gestartet
(landing.js) — sichtbar ist nur das Poster des dritten Clips. */
.demo-sticky .demo-shots video { transition: none; }
.demo-sticky .demo-shots [data-clip="3"] { opacity: 1; }
.demo-sticky .demo-shots video:not([data-clip="3"]) { opacity: 0; }
.demo-sticky tr[data-on] { display: table-row !important; }
.demo-sticky .mock-outputs { display: flex !important; }
.demo-sticky .mock-sync { display: block !important; }
.demo-caption { display: none !important; }
.demo-sticky [data-caption="3"] { display: block !important; }
}
/* Mobile: einspaltig */
@media (max-width: 720px) {
.demo-panel { grid-template-columns: 1fr; }
}
/* Takt 2 setzt sichtbar ab: Takt 1 zeigt die Bausteine einzeln, hier greifen
sie ineinander. Der Abstand ist die Trennung — es steht kein Satz dazu. */
.takt2 { margin-top: 88px; }
@media (max-width: 720px) { .takt2 { margin-top: 56px; } }
/* ── Workflow-Cluster ── */
.cluster { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 72px; }
.cluster:nth-of-type(even) .cluster-text { order: 2; }
.module-list { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.module-list strong { color: var(--ink); }
.module-list em { display: block; font-style: normal; font-size: 13px; color: var(--text-2); margin-top: 2px; }
/* ── Bildschirmfotos (#funktionen) ── */
.frame-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
#funktionen .btn-ghost { margin-top: 32px; }
@media (max-width: 860px) {
.frame-row { grid-template-columns: 1fr; }
}
.frame-placeholder {
border: 1px solid var(--border); border-radius: var(--radius-card);
background: var(--bg-card); overflow: hidden;
box-shadow: 0 1px 2px rgba(16,42,67,0.05), 0 6px 18px rgba(16,42,67,0.06);
}
/* Traegt seit 05.08. ein echtes Bildschirmfoto statt eines Skeletts. Vorher war
das eine Flex-ZEILE mit fester aspect-ratio, in der eine Beschriftungs-Pille
mittig ueber dem Wireframe schwebte. Mit ![]()
+ darin standen
beide NEBENEINANDER: das Bild wurde zur schmalen Saeule gequetscht, die
Beschriftung rechts abgeschnitten. Jetzt Block-Fluss — Bild oben, Beschriftung
als Leiste darunter; die Hoehe gibt das Bild vor (alle 16:9). */
.frame-body {
position: relative;
color: var(--text-2); font-size: 15px; background: #F4F7FB;
}
/* Das Bildschirmfoto fuellt die Rahmenbreite; width/height stehen im Markup,
damit beim Laden nichts springt. */
.frame-shot {
display: block;
width: 100%;
height: auto;
}
.frame-label {
display: block; background: var(--bg-card);
border-top: 1px solid var(--border);
padding: 10px 16px; font-weight: 600; color: var(--ink); font-size: 14px;
text-align: center;
}
/* ── Datensouveränität ── */
.ai-disclosure {
border-left: 3px solid var(--brass); padding: 10px 16px; margin: 28px 0 32px;
max-width: 640px; color: var(--on-dark); font-size: 15px;
}
/* ── FAQ ── */
.faq-container { max-width: 760px; }
.faq-item { margin-top: 14px; padding: 0; }
.faq-item summary {
cursor: pointer; padding: 18px 22px; font-weight: 600; color: var(--ink);
list-style: none; position: relative; border-radius: var(--radius-card);
transition: background 0.15s ease;
}
.faq-item summary:hover { background: #F4F7FB; }
.faq-item[open] summary { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.faq-item summary::after { content: '+'; position: absolute; right: 22px; color: var(--text-2); }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { padding: 0 22px 18px; color: var(--text-2); }
/* ── Pricing-Anker ── */
.all-inclusive { margin-top: 28px; font-size: 15px; color: var(--text-2); max-width: 720px; }
@media (max-width: 860px) {
.cluster { grid-template-columns: 1fr; gap: 24px; }
.cluster:nth-of-type(even) .cluster-text { order: 0; }
}
/* ── Sicherheitsseite ── */
.sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sec-card { padding: 28px; }
.sec-card p { color: var(--text-2); margin-top: 10px; font-size: 15px; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0; }
.badge {
border: 1px solid rgba(230,237,243,0.18); border-radius: var(--radius-card);
padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.badge strong { color: #fff; font-size: 15px; }
.badge span { font-size: 13px; color: var(--on-dark-2); }
.downloads { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 860px) {
.sec-grid, .badge-grid { grid-template-columns: 1fr; }
}
/* ── Preisseite: Modulwähler ── */
.picker { padding: 30px 32px 26px; max-width: 720px; }
.picker-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.picker-head h2 { font-size: 26px; margin: 0; }
.billing-toggle {
margin-left: auto; display: flex; gap: 2px; padding: 3px;
background: #EDF2F8; border-radius: var(--radius-btn);
}
.no-js .billing-toggle { display: none; }
.bt-opt {
font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2);
padding: 7px 16px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
}
.bt-opt[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(16,42,67,0.12); }
.module-picker { list-style: none; margin-top: 24px; border-top: 1px solid var(--border); }
.module-picker li { border-bottom: 1px solid var(--border); }
.module-picker label {
display: flex; align-items: center; gap: 14px; padding: 14px 4px;
cursor: pointer; transition: background 0.12s ease;
}
.module-picker label:hover { background: #F4F7FB; }
.module-picker input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; cursor: pointer; }
.mp-name { font-size: 16px; color: var(--ink); font-weight: 500; min-width: 0; }
.mp-price { margin-left: auto; text-align: right; display: flex; flex-direction: column; flex: none; }
.mp-price small { white-space: nowrap; }
.mp-price strong { font-family: var(--font-display); font-size: 20px; color: var(--ink); font-weight: 420; }
.mp-price small { font-size: 12px; color: var(--text-2); }
/* Nicht gewählte Module treten zurück, ohne unlesbar zu werden */
.module-picker input:not(:checked) ~ .mp-name,
.module-picker input:not(:checked) ~ .mp-price strong { color: var(--text-2); }
.picker-sum { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--ink); }
.sum-meta { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--brass); }
.sum-net { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.sum-net strong {
font-family: var(--font-display); font-weight: 420; font-size: 46px;
color: var(--ink); margin-right: 8px; line-height: 1.1;
}
.sum-sub { font-size: 14px; color: var(--text-2); margin-top: 6px; }
.picker-presets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.no-js .picker-presets, .no-js .picker-sum { display: none; }
.pp-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-2); margin-right: 4px; }
.picker-presets .btn { padding: 8px 16px; font-size: 14px; }
.infopool-satz { margin-top: 22px; font-size: 16px; color: var(--text-2); max-width: 720px; }
.ref-titel { margin-top: 52px; font-size: 20px; }
.ref-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.ref-karte {
font: inherit; text-align: left; cursor: pointer; padding: 22px 24px;
display: flex; flex-direction: column; gap: 6px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ref-karte:hover {
border-color: var(--navy);
box-shadow: 0 2px 4px rgba(16,42,67,0.06), 0 10px 24px rgba(16,42,67,0.1);
}
.rk-module { font-size: 15px; font-weight: 600; color: var(--ink); }
.rk-preis { font-family: var(--font-display); font-size: 30px; color: var(--ink); line-height: 1.15; }
.rk-preis small { display: block; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--text-2); margin-top: 2px; }
.rk-wer { font-size: 14px; color: var(--text-2); margin-top: auto; }
.preis-fuss, .klinik-line { margin-top: 20px; font-size: 15px; color: var(--text-2); max-width: 720px; }
@media (max-width: 860px) { .ref-karten { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
.picker { padding: 24px 20px; }
.billing-toggle { margin-left: 0; }
.sum-net strong { font-size: 38px; }
}
/* ── Kontaktseite ── */
.kontakt-container { max-width: 560px; }
.kontakt-form { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.kontakt-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.kontakt-form input, .kontakt-form select {
font: inherit; font-size: 16px; font-weight: 400; padding: 12px 14px;
border: 1px solid var(--border-strong); border-radius: var(--radius-btn); color: var(--text);
background: #fff;
}
.kontakt-form input:focus, .kontakt-form select:focus { outline: 2px solid var(--navy); outline-offset: 0; }
.form-feedback { font-size: 14px; color: var(--ink); min-height: 1.4em; }
/* Auf der hellen Karte trägt Messing den Fehlerzustand — dieselbe Akzentfarbe
wie auf Navy, nur die dunklere Stufe für den Kontrast auf Weiss. */
.kontakt-form .form-feedback.is-error { color: var(--brass); }
.form-alt { font-size: 13px; color: var(--text-2); }
/* ── Faire Nutzung (preise.html) ──
Eine Tabelle, keine Karten: es sind drei Zeilen Zahlwerk, kein Verkauf. */
.fair-tabelle {
width: 100%; max-width: 760px; margin: 32px 0 24px;
border-collapse: collapse; font-size: 16px; line-height: 1.5;
}
.fair-tabelle th {
text-align: left; font-weight: 600; color: var(--text-2); font-size: 14px;
padding: 0 16px 10px 0; border-bottom: 1px solid var(--border-strong);
}
.fair-tabelle td {
padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border);
color: var(--text-2); vertical-align: top;
}
.fair-tabelle td strong { color: var(--ink); }
.fair-tabelle td:nth-child(2), .fair-tabelle td:nth-child(3),
.fair-tabelle th:nth-child(2), .fair-tabelle th:nth-child(3) {
text-align: right; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums;
}
.fair-text { font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 760px; margin: 0 0 12px; text-wrap: pretty; }
/* ── Baustein-Liste (Takt 1) ──
Zehn gleichrangige Eintraege. Bewusst ohne Nummern, ohne Pfeile, ohne
Reihenfolge: die Form traegt die Aussage, dass jeder Baustein fuer sich
steht — deshalb steht sie nirgends als Satz (07.08.2026). */
.bausteine {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px 48px;
margin-top: 40px;
}
.baustein h3 {
font-size: 19px;
margin: 0 0 8px;
color: var(--ink);
}
.baustein p {
font-size: 16px;
line-height: 1.6;
color: var(--text-2);
margin: 0;
text-wrap: pretty;
}
/* Die "statt"-Zeile ist die Pointe des Eintrags und steht deshalb abgesetzt,
nicht als weiterer Satz im Absatz. */
.baustein .statt {
margin-top: 8px;
color: var(--ink);
font-weight: 600;
}
.baustein .fair {
display: block;
margin-top: 4px;
font-weight: 400;
font-size: 14px;
color: var(--text-2);
}
.baustein .fair a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--border-strong);
text-underline-offset: 2px;
}
.baustein .fair a:hover { text-decoration-color: var(--navy); }
/* Stage-Steuerung: Elemente mit data-on="N" erscheinen ab Stage N */
[data-stage] tr[data-on], [data-stage] .mock-outputs, [data-stage] .mock-sync { display: none; }
.demo-sticky[data-stage="1"] tr[data-on="1"],
.demo-sticky[data-stage="2"] tr[data-on="1"], .demo-sticky[data-stage="2"] tr[data-on="2"],
.demo-sticky[data-stage="3"] tr[data-on="1"], .demo-sticky[data-stage="3"] tr[data-on="2"] { display: table-row; }
.demo-sticky[data-stage="3"] .mock-outputs { display: flex; }
.demo-sticky[data-stage="3"] .mock-sync { display: block; }
/* Caption der aktiven Stage */
.demo-sticky[data-stage="0"] [data-caption="0"], .demo-sticky[data-stage="1"] [data-caption="1"],
.demo-sticky[data-stage="2"] [data-caption="2"], .demo-sticky[data-stage="3"] [data-caption="3"] { display: block; }
/* No-JS / Reduced-Motion: Endzustand statisch, Scroll-Strecke kollabiert */
.no-js .demo-sticky tr[data-on] { display: table-row; }
.no-js .demo-sticky .mock-outputs { display: flex; }
.no-js .demo-sticky .mock-sync { display: block; }
.no-js .demo-sticky .demo-shots [data-clip="3"] { opacity: 1; }
.no-js .demo-sticky .demo-shots video:not([data-clip="3"]) { opacity: 0; }
.no-js .demo-caption { display: none !important; }
.no-js .demo-sticky [data-caption="3"] { display: block !important; }
@media (prefers-reduced-motion: reduce) {
/* .demo-sticky davorgestellt: ohne das verliert die Regel gegen
`.demo-sticky[data-stage="N"] [data-clip="N"]` (0,3,0) und es waeren zwei
Filme gleichzeitig sichtbar. Die Filme werden hier nie gestartet
(landing.js) — sichtbar ist nur das Poster des dritten Clips. */
.demo-sticky .demo-shots video { transition: none; }
.demo-sticky .demo-shots [data-clip="3"] { opacity: 1; }
.demo-sticky .demo-shots video:not([data-clip="3"]) { opacity: 0; }
.demo-sticky tr[data-on] { display: table-row !important; }
.demo-sticky .mock-outputs { display: flex !important; }
.demo-sticky .mock-sync { display: block !important; }
.demo-caption { display: none !important; }
.demo-sticky [data-caption="3"] { display: block !important; }
}
/* Mobile: einspaltig */
@media (max-width: 720px) {
.demo-panel { grid-template-columns: 1fr; }
}
/* Takt 2 setzt sichtbar ab: Takt 1 zeigt die Bausteine einzeln, hier greifen
sie ineinander. Der Abstand ist die Trennung — es steht kein Satz dazu. */
.takt2 { margin-top: 88px; }
@media (max-width: 720px) { .takt2 { margin-top: 56px; } }
/* ── Workflow-Cluster ── */
.cluster { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 72px; }
.cluster:nth-of-type(even) .cluster-text { order: 2; }
.module-list { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.module-list strong { color: var(--ink); }
.module-list em { display: block; font-style: normal; font-size: 13px; color: var(--text-2); margin-top: 2px; }
/* ── Bildschirmfotos (#funktionen) ── */
.frame-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
#funktionen .btn-ghost { margin-top: 32px; }
@media (max-width: 860px) {
.frame-row { grid-template-columns: 1fr; }
}
.frame-placeholder {
border: 1px solid var(--border); border-radius: var(--radius-card);
background: var(--bg-card); overflow: hidden;
box-shadow: 0 1px 2px rgba(16,42,67,0.05), 0 6px 18px rgba(16,42,67,0.06);
}
/* Traegt seit 05.08. ein echtes Bildschirmfoto statt eines Skeletts. Vorher war
das eine Flex-ZEILE mit fester aspect-ratio, in der eine Beschriftungs-Pille
mittig ueber dem Wireframe schwebte. Mit ![]()
+ darin standen
beide NEBENEINANDER: das Bild wurde zur schmalen Saeule gequetscht, die
Beschriftung rechts abgeschnitten. Jetzt Block-Fluss — Bild oben, Beschriftung
als Leiste darunter; die Hoehe gibt das Bild vor (alle 16:9). */
.frame-body {
position: relative;
color: var(--text-2); font-size: 15px; background: #F4F7FB;
}
/* Das Bildschirmfoto fuellt die Rahmenbreite; width/height stehen im Markup,
damit beim Laden nichts springt. */
.frame-shot {
display: block;
width: 100%;
height: auto;
}
.frame-label {
display: block; background: var(--bg-card);
border-top: 1px solid var(--border);
padding: 10px 16px; font-weight: 600; color: var(--ink); font-size: 14px;
text-align: center;
}
/* ── Datensouveränität ── */
.ai-disclosure {
border-left: 3px solid var(--brass); padding: 10px 16px; margin: 28px 0 32px;
max-width: 640px; color: var(--on-dark); font-size: 15px;
}
/* ── FAQ ── */
.faq-container { max-width: 760px; }
.faq-item { margin-top: 14px; padding: 0; }
.faq-item summary {
cursor: pointer; padding: 18px 22px; font-weight: 600; color: var(--ink);
list-style: none; position: relative; border-radius: var(--radius-card);
transition: background 0.15s ease;
}
.faq-item summary:hover { background: #F4F7FB; }
.faq-item[open] summary { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.faq-item summary::after { content: '+'; position: absolute; right: 22px; color: var(--text-2); }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { padding: 0 22px 18px; color: var(--text-2); }
/* ── Pricing-Anker ── */
.all-inclusive { margin-top: 28px; font-size: 15px; color: var(--text-2); max-width: 720px; }
@media (max-width: 860px) {
.cluster { grid-template-columns: 1fr; gap: 24px; }
.cluster:nth-of-type(even) .cluster-text { order: 0; }
}
/* ── Sicherheitsseite ── */
.sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sec-card { padding: 28px; }
.sec-card p { color: var(--text-2); margin-top: 10px; font-size: 15px; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0; }
.badge {
border: 1px solid rgba(230,237,243,0.18); border-radius: var(--radius-card);
padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.badge strong { color: #fff; font-size: 15px; }
.badge span { font-size: 13px; color: var(--on-dark-2); }
.downloads { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 860px) {
.sec-grid, .badge-grid { grid-template-columns: 1fr; }
}
/* ── Preisseite: Modulwähler ── */
.picker { padding: 30px 32px 26px; max-width: 720px; }
.picker-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.picker-head h2 { font-size: 26px; margin: 0; }
.billing-toggle {
margin-left: auto; display: flex; gap: 2px; padding: 3px;
background: #EDF2F8; border-radius: var(--radius-btn);
}
.no-js .billing-toggle { display: none; }
.bt-opt {
font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2);
padding: 7px 16px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
}
.bt-opt[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(16,42,67,0.12); }
.module-picker { list-style: none; margin-top: 24px; border-top: 1px solid var(--border); }
.module-picker li { border-bottom: 1px solid var(--border); }
.module-picker label {
display: flex; align-items: center; gap: 14px; padding: 14px 4px;
cursor: pointer; transition: background 0.12s ease;
}
.module-picker label:hover { background: #F4F7FB; }
.module-picker input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; cursor: pointer; }
.mp-name { font-size: 16px; color: var(--ink); font-weight: 500; min-width: 0; }
.mp-price { margin-left: auto; text-align: right; display: flex; flex-direction: column; flex: none; }
.mp-price small { white-space: nowrap; }
.mp-price strong { font-family: var(--font-display); font-size: 20px; color: var(--ink); font-weight: 420; }
.mp-price small { font-size: 12px; color: var(--text-2); }
/* Nicht gewählte Module treten zurück, ohne unlesbar zu werden */
.module-picker input:not(:checked) ~ .mp-name,
.module-picker input:not(:checked) ~ .mp-price strong { color: var(--text-2); }
.picker-sum { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--ink); }
.sum-meta { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--brass); }
.sum-net { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.sum-net strong {
font-family: var(--font-display); font-weight: 420; font-size: 46px;
color: var(--ink); margin-right: 8px; line-height: 1.1;
}
.sum-sub { font-size: 14px; color: var(--text-2); margin-top: 6px; }
.picker-presets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.no-js .picker-presets, .no-js .picker-sum { display: none; }
.pp-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-2); margin-right: 4px; }
.picker-presets .btn { padding: 8px 16px; font-size: 14px; }
.infopool-satz { margin-top: 22px; font-size: 16px; color: var(--text-2); max-width: 720px; }
.ref-titel { margin-top: 52px; font-size: 20px; }
.ref-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.ref-karte {
font: inherit; text-align: left; cursor: pointer; padding: 22px 24px;
display: flex; flex-direction: column; gap: 6px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ref-karte:hover {
border-color: var(--navy);
box-shadow: 0 2px 4px rgba(16,42,67,0.06), 0 10px 24px rgba(16,42,67,0.1);
}
.rk-module { font-size: 15px; font-weight: 600; color: var(--ink); }
.rk-preis { font-family: var(--font-display); font-size: 30px; color: var(--ink); line-height: 1.15; }
.rk-preis small { display: block; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--text-2); margin-top: 2px; }
.rk-wer { font-size: 14px; color: var(--text-2); margin-top: auto; }
.preis-fuss, .klinik-line { margin-top: 20px; font-size: 15px; color: var(--text-2); max-width: 720px; }
@media (max-width: 860px) { .ref-karten { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
.picker { padding: 24px 20px; }
.billing-toggle { margin-left: 0; }
.sum-net strong { font-size: 38px; }
}
/* ── Kontaktseite ── */
.kontakt-container { max-width: 560px; }
.kontakt-form { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.kontakt-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.kontakt-form input, .kontakt-form select {
font: inherit; font-size: 16px; font-weight: 400; padding: 12px 14px;
border: 1px solid var(--border-strong); border-radius: var(--radius-btn); color: var(--text);
background: #fff;
}
.kontakt-form input:focus, .kontakt-form select:focus { outline: 2px solid var(--navy); outline-offset: 0; }
.form-feedback { font-size: 14px; color: var(--ink); min-height: 1.4em; }
/* Auf der hellen Karte trägt Messing den Fehlerzustand — dieselbe Akzentfarbe
wie auf Navy, nur die dunklere Stufe für den Kontrast auf Weiss. */
.kontakt-form .form-feedback.is-error { color: var(--brass); }
.form-alt { font-size: 13px; color: var(--text-2); }
/* ── Rechtsseiten (Impressum / Datenschutz) — wie ceremaris ── */
.page-narrow { max-width: 760px; }
.page-narrow h1 {
font-size: clamp(28px, 1.5rem + 1vw, 38px); /* Dokument-Titel, nicht Marketing-Hero */
margin-bottom: 8px;
}
.legal-card { padding: 40px 44px; margin-top: 24px; }
.legal-card h2 {
font-size: 18px;
font-weight: 550;
margin: 32px 0 10px;
padding-top: 26px;
border-top: 1px solid var(--border); /* Haarlinie trennt die Abschnitte */
}
.legal-card h2.first { margin-top: 0; padding-top: 0; border-top: none; }
.legal-card p, .legal-card li { color: var(--text-2); line-height: 1.65; }
.legal-card li { margin-bottom: 8px; }
.legal-card strong { color: var(--ink); }
.legal-toc { font-size: 15px; }
.legal-toc a { white-space: nowrap; }
.legal-stand { font-size: 14px; color: var(--text-2); margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
@media (max-width: 720px) {
.legal-card { padding: 24px 20px; }
}