/* ============================================================ Thalassa — Premium-Schicht der Marketing-Website GESTALTUNGSIDEE: „Instrument". Das Produkt ist unsichtbar, privat und präzise — es sitzt neben einem Gespräch, in dem es um viel geht. Premium heißt hier deshalb NICHT laut, sondern gefasst: die Anmutung eines gut gebauten Messgeräts. Viel Raum, haarfeine Linien, eine einzige Akzentfarbe, die wie eine Signallampe eingesetzt wird — selten, dafür bedeutungsvoll. Drei Entscheidungen tragen das: 1. TYPOGRAFIE — hochkontrastige Serif (Instrument Serif) in sehr großen Graden gegen die neutrale Onest im Fließtext. Dieser Kontrast IST das Premium-Signal; er kostet nichts und wirkt sofort. 2. RHYTHMUS — Sektionen wechseln zwischen eng und weit, Inhalte sitzen asymmetrisch im 12-Spalten-Raster mit bewusst leeren Spalten. Ein gleichmäßiges Raster liest sich als Vorlage; ein Wechsel als Komposition. 3. DIE MESSLINIE — jede Sektion zieht beim Eintreten eine haarfeine türkise Linie über ihre Oberkante. Das ist das wiedererkennbare Detail und gleichzeitig das einzige, was sich von selbst bewegt. GELTUNGSBEREICH: alles hier ist auf `body[data-page]` gescoped — den Marker, den nur die Marketing-Seiten tragen. Die App-Shell (web/desktop/, web/app/) lädt DIESELBEN Stylesheets, darf davon aber nichts abbekommen: sie hat ihre eigene, hellgeführte Gestaltung. Beide Farbmodi sind vollwertig gestaltet. Alles läuft über die Tokens aus tokens.css — hier steht kein einziger fester Farbwert. ============================================================ */ /* ------------------------------------------------------------ 1 — Typografische Skala Serifen tragen große Grade; erst ab ~44px entsteht die Wirkung. Deshalb eine eigene, editoriale Skala statt der App-Größen. ------------------------------------------------------------ */ body[data-page] { /* 01.09.2026: Die Serifenschrift ist heraus. Sie war ohnehin nur noch ein Rueckfall — die Schriftdatei kam mit assets/fonts/fonts.css, und die ist mit der Umstellung auf das neue Designsystem weggefallen; die Ueberschriften standen deshalb im Times des Browsers, nicht in Instrument Serif. Das neue System kennt genau zwei Schriften. */ --serif: var(--font-core); /* Anzeigegrößen; clamp() koppelt sie an die Viewportbreite. */ --t-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem); /* 44 → 84 */ --t-h1: clamp(2.4rem, 1.5rem + 4vw, 4rem); /* 38 → 64 */ --t-h2: clamp(1.9rem, 1.35rem + 2.4vw, 2.9rem); /* 30 → 46 */ --t-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); /* 21 → 26 */ --t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* 17 → 20 */ --t-body: 1.0625rem; /* 17 */ /* Vertikaler Rhythmus: drei Stufen, die abwechselnd greifen. Der Takt entsteht durch den WECHSEL, nicht durch mehr Abstand überall. Bewusst kompakt gehalten — die erste Fassung war mit bis zu 176 px so luftig, dass man viel scrollen musste, um wenig zu sehen. */ --rhythm-tight: clamp(2.5rem, 1.6rem + 2.6vw, 3.25rem); --rhythm-base: clamp(3.25rem, 2rem + 3.6vw, 4.5rem); --rhythm-wide: clamp(4.25rem, 2.6rem + 5vw, 6rem); /* Materialien. Glas muss auf Hell dünner sein als auf Dunkel, sonst wirkt es schmutzig statt leicht. */ --glass-bg: color-mix(in srgb, var(--surface) 72%, transparent); --glass-blur: 14px; --lift-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent), 0 28px 60px -34px color-mix(in srgb, var(--text) 32%, transparent); --lift-shadow-h: 0 2px 4px color-mix(in srgb, var(--text) 6%, transparent), 0 40px 80px -36px color-mix(in srgb, var(--text) 40%, transparent); --hairline: color-mix(in srgb, var(--primary) 26%, transparent); } :root[data-theme="dark"] body[data-page] { --glass-bg: color-mix(in srgb, var(--surface) 58%, transparent); --glass-blur: 18px; --hairline: color-mix(in srgb, var(--primary) 34%, transparent); } /* Überschriften: Serif, eng gesetzt, ausbalancierter Umbruch. */ body[data-page] h1, body[data-page] h2, body[data-page] .h-serif { font-family: var(--serif); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-heading); line-height: var(--lh-heading); text-wrap: balance; margin: 0 0 var(--sp-5); } body[data-page] h1 { font-size: var(--t-h1); } body[data-page] h2 { font-size: var(--t-h2); } body[data-page] .hero h1 { font-size: var(--t-display); line-height: 1.02; } /* Kursive Serif ist der EINZIGE Betonungsmoment im Fließtext — sparsam eingesetzt wirkt sie kostbar, überall verteilt beliebig. */ body[data-page] h1 em, body[data-page] h2 em, body[data-page] h1 .accent, body[data-page] h2 .accent, body[data-page] .lede em { font-style: italic; color: var(--primary); } body[data-page] h3 { font-family: var(--font-ui); font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } /* Fließtext: großzügig, auf Lesebreite begrenzt. */ body[data-page] p { font-size: var(--t-body); line-height: 1.68; } body[data-page] .hero__lead, body[data-page] .lede { font-size: var(--t-lead); line-height: 1.6; max-width: 60ch; } body[data-page] .section p:not([class]) { max-width: 65ch; } /* Augenbraue: das kleinste Element, deshalb das präziseste. */ body[data-page] .eyebrow, body[data-page] .hero__eyebrow { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } /* ------------------------------------------------------------ 1b — Türkis, das auf Weiß auch trägt Die Akzentzeile im Hero war ein fest kodierter Farbverlauf aus der Zeit, als es die Seite nur dunkel gab: #00F5E1 → #45C8FF → #9B8CFF erreichen auf Weiß 1,4 / 1,9 / 2,8:1 — praktisch unsichtbar. Der Farbbogen bleibt (Türkis → Blau → Violett), nur tiefer gesetzt: 6,1 / 6,8 / 8,5:1. Auf Dunkel gilt weiterhin der leuchtende Bogen. ------------------------------------------------------------ */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { body[data-page] .hero h1 .accent { background: linear-gradient(100deg, var(--accent-1) 0%, var(--accent-2) 48%, var(--accent-3) 100%); -webkit-background-clip: text; background-clip: text; } } /* Der Schein hinter der Schrift ist auf Weiß nur ein Schleier. */ body[data-page] .hero h1 .accent { text-shadow: none; } :root[data-theme="dark"] body[data-page] .hero h1 .accent { text-shadow: 0 0 40px var(--primary-glow); } /* ------------------------------------------------------------ 2 — Rhythmus und Komposition Auf Wunsch SYMMETRISCH und kompakter: die Inhalte stehen mittig und nutzen die volle Breite, statt versetzt im Raster zu sitzen. Der Rhythmus bleibt — nur enger gestellt. ------------------------------------------------------------ */ /* Lesecontainer: 1280 px. 1560 px liefen auf großen Schirmen in zu lange Zeilen und rissen die Karten auseinander; 1280 hält Block und Raster zusammen (Redesign-Pass 15.08.2026). Randabstände gestuft: 32 Desktop / 24 Tablet / 20 Mobil — siehe styles.css. */ body[data-page] .container { max-width: 1280px; padding-inline: var(--sp-8); } @media (max-width: 1024px) { body[data-page] .container { padding-inline: var(--sp-6); } } @media (max-width: 720px) { body[data-page] .container { padding-inline: var(--sp-5); } } body[data-page] .container--narrow { max-width: 860px; } /* Symmetrisch: Sektionsköpfe mittig, Raster gleichmäßig. */ body[data-page] .section__head { max-width: 720px; margin-inline: auto; margin-bottom: var(--sp-10); text-align: center; } body[data-page] .section { padding-block: var(--rhythm-base); position: relative; } body[data-page] .section--tight { padding-block: var(--rhythm-tight); } body[data-page] .section--wide { padding-block: var(--rhythm-wide); } /* Die Messlinie: zieht sich beim Eintreten über die Oberkante der Sektion. Ein Detail, das sich niemand erklären muss, aber jeder bemerkt. */ body[data-page] .section--ruled::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--primary) 0%, var(--hairline) 62%, transparent 100%); transition: width 1400ms var(--ease) 120ms; } body[data-page] .section--ruled.is-in::before { width: min(100%, 68ch); } /* Karten-Raster: gleichmäßig und über die volle Breite. Die Spaltenzahl folgt der ANZAHL der Karten, nicht einer festen Zahl — vier Karten in einem Dreier-Raster ließen die vierte allein in eine zweite Zeile fallen, und genau das sah aus wie „untereinander" statt nebeneinander. */ body[data-page] .cap-grid, body[data-page] .features, body[data-page] .steps { display: grid; gap: var(--sp-4); align-items: stretch; } /* Spaltenzahl richtet sich nach der ANZAHL der Karten, nicht danach, wie viele zufällig in die Zeile passen. `auto-fit` allein reicht nicht: bei 1496 px Innenbreite passen fünf Spalten — sechs Karten ergeben dann 5 + 1, und die letzte steht allein unter den anderen. Genau das war zweimal auf der Startseite zu sehen. Die Regel lautet deshalb: teile die Karten so auf, dass keine Zeile mit einer einzelnen endet. 6 → 3 + 3, 5 → 3 + 2, 4 → 4, 3 → 3. `auto-fit` bleibt als Grundlage für Browser ohne `:has()` und für Kartenzahlen, die hier nicht aufgeführt sind. */ body[data-page] .cap-grid, body[data-page] .features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } body[data-page] .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } @supports selector(:has(*)) { /* 6 Karten: 3 + 3 statt 5 + 1 */ body[data-page] .cap-grid:has(> .cap-card:nth-child(6):last-child), body[data-page] .features:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 5 Karten: 3 + 2 statt 4 + 1 */ body[data-page] .cap-grid:has(> .cap-card:nth-child(5):last-child), body[data-page] .features:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 4 Karten: eine Zeile */ body[data-page] .cap-grid:has(> .cap-card:nth-child(4):last-child), body[data-page] .features:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 3 Karten: eine Zeile */ body[data-page] .cap-grid:has(> .cap-card:nth-child(3):last-child), body[data-page] .features:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 9 Karten: 3 × 3 — auto-fit ergab 4 + 4 + 1, mit einer verwaisten Karte in der letzten Zeile. */ body[data-page] .cap-grid:has(> .cap-card:nth-child(9):last-child), body[data-page] .features:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Schmalere Fenster: die feste Spaltenzahl muss wieder aufgelöst werden, sonst werden die Karten unlesbar schmal. [class][class][class]: Die Zaehlregeln oben tragen durch ihre :has(:nth-child(…):last-child)-Argumente Spezifitaet 5 auf Klassenebene — ein einzelnes [class] (4) verlor dagegen, und genau deshalb standen die vier Use-Case-Karten auf dem Telefon vierspaltig mit ~70 px je Spalte (Befund der Live-Pruefung vom 15.08.). Drei Attribut-Wiederholungen heben diese Regeln auf 6 und lassen den Umbruch gewinnen. */ @media (max-width: 1180px) { body[data-page] .cap-grid[class][class][class]:has(> .cap-card), body[data-page] .features[class][class][class]:has(> *) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { body[data-page] .cap-grid[class][class][class]:has(> .cap-card), body[data-page] .features[class][class][class]:has(> *) { grid-template-columns: 1fr; } } } /* Gleich hohe Karten: der Verweis unten sitzt auf einer Linie. */ body[data-page] .cap-card { height: 100%; } body[data-page] .cap-card > p:last-child { margin-top: auto; margin-bottom: 0; } /* ------------------------------------------------------------ 3 — Motion: EINE inszenierte Bewegung je Sektion Inhalte steigen 14px und blenden auf, gestaffelt. Nichts läuft in Schleife, nichts federt. reveal.js setzt .is-in. ------------------------------------------------------------ */ body[data-page] [data-anim] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 760ms var(--ease), transform 760ms var(--ease); transition-delay: calc(var(--i, 0) * 65ms); will-change: opacity, transform; } body[data-page] [data-anim].is-in { opacity: 1; transform: none; will-change: auto; } /* Parallaxe NUR auf dekorativen Ebenen — Inhalte bewegen sich nie. */ body[data-page] [data-parallax] { transform: translate3d(0, var(--py, 0), 0); will-change: transform; } /* ------------------------------------------------------------ 4 — Micro-Interactions Tiefe und Kante reagieren, nicht die Farbe. Ein Farbsprung wirkt billig; eine Bewegung um zwei Pixel wirkt gebaut. ------------------------------------------------------------ */ body[data-page] .btn { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } body[data-page] .btn:hover { transform: translateY(-1px); } body[data-page] .btn:active { transform: translateY(0); } body[data-page] .btn--primary { box-shadow: var(--shadow-btn); } body[data-page] .btn--primary:hover { box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--primary) 55%, transparent); } /* Der Pfeil im CTA rückt mit — die kleinste mögliche Belohnung. */ body[data-page] .btn .btn__icon { transition: transform var(--dur) var(--ease); } body[data-page] .btn:hover .btn__icon { transform: translateX(3px); } /* Textlinks: die Unterkante wächst von links. */ body[data-page] .link-underline, body[data-page] .section a:not([class]) { color: var(--primary); text-decoration: none; background-image: linear-gradient(var(--primary), var(--primary)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 260ms var(--ease); padding-bottom: 1px; } body[data-page] .link-underline:hover, body[data-page] .section a:not([class]):hover { background-size: 100% 1px; } /* Karten: heben sich an, Kante wird bestimmter. 160 statt 320 ms. Eine Rückmeldung auf den Zeiger muss dem Zeiger folgen — bei 320 ms bewegt sich die Karte noch, wenn er längst zwei Karten weiter ist, und mehrere angehobene Karten zugleich lesen sich wie ein Fehler. Der Weg (3 px) bleibt: Er ist die Aussage, die Dauer war nur ihr Tempo. */ body[data-page] .card, body[data-page] .tier, body[data-page] .feature { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease); } body[data-page] .card:hover, body[data-page] .tier:hover, body[data-page] .feature:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow-h); border-color: var(--border-strong); } /* Fokus ist sichtbar — überall, und nur bei Tastaturbedienung. */ body[data-page] :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); } body[data-page] :focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------------------ 5 — Formular-Zustände mit echter Rückmeldung ------------------------------------------------------------ */ body[data-page] .input { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } body[data-page] .input:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; } body[data-page] .field.is-invalid .input { border-color: color-mix(in srgb, #F2606A 70%, var(--border)); } body[data-page] .field.is-valid .input { border-color: color-mix(in srgb, var(--online) 60%, var(--border)); } body[data-page] .field__msg { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); } body[data-page] .field.is-invalid .field__msg { color: #F2606A; } /* ------------------------------------------------------------ 6 — Hell/Dunkel-Umschalter (aus js/main.js erzeugt) ------------------------------------------------------------ */ body[data-page] .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent; color: var(--text-secondary); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 420ms var(--ease); } body[data-page] .theme-toggle:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-tint-2); } /* Das Icon dreht sich beim Wechsel — der „flüssige Übergang". */ body[data-page] .theme-toggle svg { transition: transform 420ms var(--ease); } body[data-page] .theme-toggle:hover svg { transform: rotate(18deg); } body[data-page] .nav__item--theme { display: flex; align-items: center; } /* Der Modus-Wechsel selbst: Flächen und Schrift blenden weich um. Bewusst kurz — ein langer Übergang wirkt träge, nicht edel. */ body[data-page], body[data-page] .site-header, body[data-page] .card, body[data-page] .tier { transition: background-color 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease); } /* ------------------------------------------------------------ 6b — Kopfleiste: auf Hell eine echte Fläche Die Leiste war ursprünglich transparent über einem dunklen Hero — dort trug der Hintergrund das Logo. Auf Weiß trägt ihn nichts mehr, das Logo schwimmt. Deshalb bekommt sie auf Hell eine leicht abgesetzte, türkis getönte Fläche: dunkel genug, dass das Logo eine Kante bekommt, hell genug, dass die Leiste nicht wie ein Fremdkörper wirkt. Auf Dunkel bleibt das bisherige Verhalten (transparent, Glas beim Scrollen) — dort war es nie ein Problem. ------------------------------------------------------------ */ /* 18 % Türkis in Weiß = #D8E8E7. Nachgerechnet: 9 % lagen nur 2,7 Einheiten vom Seitenhintergrund #EDF4F3 entfernt und waren damit unsichtbar; 18 % sind 15 Einheiten — deutlich wahrnehmbar, ohne dass die Leiste zur grauen Platte wird. Der Navigationstext behält 13,2:1. */ body[data-page] .site-header { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); border-bottom: 1px solid var(--border-soft); backdrop-filter: blur(var(--glass-blur)) saturate(130%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%); } /* Beim Scrollen etwas bestimmter — die Leiste löst sich vom Inhalt ab. */ body[data-page] .site-header.is-scrolled { background: color-mix(in srgb, var(--primary) 24%, var(--surface)); border-bottom-color: var(--border); box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 10%, transparent), 0 18px 40px -32px color-mix(in srgb, var(--text) 40%, transparent); } /* Dunkel: unverändert transparent, Glas erst beim Scrollen. */ :root[data-theme="dark"] body[data-page] .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } :root[data-theme="dark"] body[data-page] .site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom-color: var(--border-soft); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* Kopfleiste, 20 % flacher als zuvor: 120 -> 96 px, auf schmalen Fenstern 86 -> 69 px. Das Logo geht im selben Verhältnis mit (96 -> 76, 64 -> 51): Die Leiste hat eine feste Höhe, ein unverändertes Logo ragte sonst oben und unten heraus. Der Abstand ringsum bleibt dadurch, was er war — rund 10 px, gerade so viel, dass die Marke nicht klebt. Die Logodatei ist 220 px hoch — bei 76 px Anzeige also fast das Dreifache an Auflösung, auch auf Retina-Schirmen reichlich. Die Fußzeile ist NICHT die Kopfleiste und bleibt, wie sie war. */ /* Die Leiste war auf ein 76px hohes Logo-Bild ausgelegt. Die Wortmarke steht bei 26px — bliebe die Hoehe, waere die Leiste zur Haelfte leer und die Marke schwaemme darin. 64px geben ihr Luft, ohne dass der Inhalt darunter erst nach einem Drittel Bildschirm beginnt. */ body[data-page] { --header-h: 64px; } /* Die Groesse der Marke im Fuss steht weiter unten bei den uebrigen Logo-Regeln (`.brand--footer .brand__logo`). Hier standen dafuer zwei `font-size`-Zeilen auf `.brand__mark` — dem Textnachbau, den es nicht mehr gibt. Sie trafen seit dem Umbau nichts mehr. */ @media (max-width: 860px) { body[data-page] { --header-h: 56px; } } /* Sprungziele dürfen nicht unter der klebenden Leiste landen — bei 120 px wäre sonst die halbe Überschrift verdeckt. */ body[data-page] :target, body[data-page] [id]:not(body) { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); } /* Die Marke. ================================================================ EINE Datei, und sie traegt keine Farbe: `thalassa-logo-mask.png` sagt nur, WO die Marke ist. Gefaerbt wird sie hier, aus den Tokens. Warum nicht zwei gefaerbte Dateien: weil zwei Fassungen auseinanderlaufen — eine wird nachgezogen, die andere vergessen. Genau das haelt `TestThereIsOnlyOneLogo` fest, und die Begruendung traegt weiter. Dass die Farbe wechseln MUSS, ist gemessen und kein Geschmacksurteil: Das originale Cyan steht auf hellem Mint bei 1,05:1 — dort ist die Marke schlicht nicht da. Ueber die Tokens loest sich das von allein, denn --accent-1/-2 kippen mit dem Modus: hell #0B6E68 -> #125C63 auf #EDF4F3 5,47:1 / 6,88:1 dunkel #00F5E1 -> #5AE6D0 auf #071012 13,87:1 / 12,51:1 Frueher lag eine dunkle Platte unter dem hellen Logo. Sie war die richtige Notloesung fuer ein Logo in der falschen Farbe — und entfaellt mit ihr. Der Verlauf ist kein Schmuck: die Originalzeichnung hat einen, und ohne ihn waere es eine andere Marke. Als leerer mit Maske, nicht als : Ein brachte seine Farbe mit; die haengt aber am `data-theme` auf , und das ist keine Medienabfrage — koennte es nicht entscheiden. Der Pfad ist relativ zu DIESER Datei und gilt damit unveraendert auch in Unterordnern. */ body[data-page] .brand__logo { display: block; height: 34px; /* Aus der Datei: 800x238. Fest gesetzt, damit beim Laden nichts springt. */ aspect-ratio: 800 / 238; -webkit-mask: url("../assets/thalassa-logo-mask.png") left center / contain no-repeat; mask: url("../assets/thalassa-logo-mask.png") left center / contain no-repeat; } /* Die Fuellung erst dann, wenn die Maske auch schneidet. Sonst staende an der Stelle des Logos ein tuerkiser Kasten — das faellt niemandem als Fehler auf, es sieht nur aus wie schlechtes Handwerk. Ohne Maske bleibt der Platz leer; der Name der Marke steht ohnehin im aria-label des Links. */ @supports (mask: url("#m")) or (-webkit-mask: url("#m")) { body[data-page] .brand__logo { background: linear-gradient(100deg, var(--accent-1), var(--accent-2)); } } /* Im Fuss etwas groesser: dort ist die Marke Abschluss, nicht Navigation. */ body[data-page] .brand--footer .brand__logo { height: 44px; } @media (max-width: 860px) { body[data-page] .brand__logo { height: 28px; } body[data-page] .brand--footer .brand__logo { height: 36px; } } body[data-page] .brand:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } /* EINE Logo-Fassung, in beiden Modi dieselbe. Es gab kurz eine zweite, abgedunkelte Zeichnung fuer den Hellmodus — sie war nie ganz dieselbe Marke, und genau das fiel auf. Stattdessen bekommt das Logo auf Hell seine eigene dunkle Traegerflaeche: der Grund, fuer den es gezeichnet ist. Dort steht es bei 15,5:1 statt 1,05:1. Im Dunkelmodus ist die Flaeche durchsichtig — die Leiste ist schon dunkel, eine Platte darauf waere ein Kasten um nichts. */ /* Die dunkle Trägerplatte ist entfallen — zusammen mit dem Cyan-Verlauf, für den sie gebaut war. Die Wortmarke steht jetzt als Text in --text-primary direkt auf der Fläche (15,1:1 auf Hell) und das Segel in --brand-teal (5,47:1). Kein Kasten, keine Sonderfarbe, keine zweite Zeichnung je Modus. */ body[data-page] .brand { display: inline-flex; /* `baseline` war richtig, solange hier zwei Textteile nebeneinander standen. Jetzt ist es ein einziges leeres Element: Dessen Grundlinie ist die Unterkante, es haenge also nach oben aus der Leiste. `center` ist das, was hier gemeint ist. Das `gap` von damals ist mit dem zweiten Kind entfallen. */ align-items: center; text-decoration: none; } /* ------------------------------------------------------------ 6c — Download-Knopf (aus js/main.js erzeugt) Zwei Zustände, beide gestaltet: • BEREIT — gefüllter Akzent-Knopf, das eindeutigste Ziel der Leiste. • BALD — zurückgenommen, gestrichelte Kante und ein kleines „Bald"-Schild. Er sieht dadurch nicht kaputt aus, sondern angekündigt. Ein deaktivierter Knopf, dem man nicht ansieht, WARUM er nicht geht, ist schlimmer als gar keiner. ------------------------------------------------------------ */ body[data-page] .dl-btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 38px; padding-inline: var(--sp-4); border-radius: var(--r-btn); border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); font: 600 var(--fs-sm) / 1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } body[data-page] .dl-btn:hover { transform: translateY(-1px); } body[data-page] .dl-btn svg { flex: none; } /* Noch nicht ausgeliefert. */ body[data-page] .dl-btn--soon { background: transparent; color: var(--text-secondary); border-style: dashed; border-color: var(--border-strong); cursor: default; } body[data-page] .dl-btn--soon:hover { transform: none; border-color: var(--primary); color: var(--primary); } body[data-page] .dl-btn__soon { padding: 2px 7px; border-radius: var(--r-pill); background: var(--primary-tint); color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* Der Hinweis nach dem Klick — er sagt, WANN es so weit ist. */ body[data-page] .nav__item--download { position: relative; } body[data-page] .dl-note { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; max-width: 260px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--lift-shadow); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 240ms var(--ease), transform 240ms var(--ease); } body[data-page] .dl-note.is-on { opacity: 1; transform: none; } /* Auf schmalen Fenstern nur das Symbol — die Leiste ist dort knapp. */ @media (max-width: 940px) { body[data-page] .dl-btn { padding-inline: var(--sp-3); } body[data-page] .dl-btn__label, body[data-page] .dl-btn__soon { display: none; } } /* ------------------------------------------------------------ 7 — Bildwelt aus Code Es gibt keine Fotografie im Projekt. Statt Platzhalterbildern entstehen die Flächen aus Farbverläufen, Korn und echtem Produkt-UI — für ein Software-Produkt ohnehin die ehrlichere Bildsprache. ------------------------------------------------------------ */ body[data-page] .mesh { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 55% at 18% 12%, color-mix(in srgb, var(--primary-bright) 22%, transparent) 0%, transparent 62%), radial-gradient(48% 42% at 88% 8%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 58%), radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--primary-bright) 12%, transparent) 0%, transparent 64%); filter: blur(8px); } body[data-page] .mesh--soft { opacity: 0.6; } /* Feines Korn nimmt Farbverläufen das Digitale. */ body[data-page] .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml;utf8,\ \ \ "); } /* Die Hero-Bühne: gestaffelte Fenster mit echter Tiefe statt eines flachen Kastens. Das hintere Fenster ist nur angedeutet — es suggeriert ein System, ohne etwas zu behaupten, das es nicht gibt. */ body[data-page] .stage { position: relative; z-index: 1; } body[data-page] .stage__back { position: absolute; inset: -6% -4% auto -4%; height: 76%; border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); transform: rotate(-1.2deg); z-index: 0; } body[data-page] .stage__front { position: relative; z-index: 1; border-radius: var(--r-card); box-shadow: var(--lift-shadow); } /* Die Antwort schreibt sich beim Eintreten einmal ein. Einmal — nicht in Schleife: eine Wiederholung macht aus einer Inszenierung eine Werbung. */ body[data-page] .type-in { display: inline-block; max-width: 100%; overflow: hidden; white-space: normal; clip-path: inset(0 100% 0 0); } body[data-page] .is-in .type-in { animation: type-reveal 1600ms var(--ease) 420ms forwards; } @keyframes type-reveal { to { clip-path: inset(0 0 0 0); } } /* ------------------------------------------------------------ 8 — Reduced Motion: alles sofort sichtbar, nichts bewegt sich. Kein „weniger Animation", sondern keine. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { body[data-page] [data-anim], body[data-page] [data-anim].is-in { opacity: 1 !important; transform: none !important; transition: none !important; } body[data-page] [data-parallax] { transform: none !important; } body[data-page] .section--ruled::before { width: min(100%, 68ch) !important; transition: none !important; } body[data-page] .type-in, body[data-page] .is-in .type-in { clip-path: none !important; animation: none !important; } body[data-page] .btn:hover, body[data-page] .card:hover, body[data-page] .tier:hover { transform: none !important; } /* Der Block hier deckte bisher nur die Auftritte ab, die dieses Stylesheet selbst erzeugt. Die vier Dauerschleifen aus landing.css/styles.css liefen weiter — auch die endlosen. Zwei davon sind ausserdem WCAG 2.2.2: Sie starten von selbst, laufen laenger als fuenf Sekunden und stehen neben anderem Inhalt, ohne dass man sie anhalten kann. .overlay-card float 5 s, endlos .marquee__track marquee 72 s, endlos .status-dot pulse 2,4 s, endlos .mock/.hero rise einmalig Alle vier enden ohnehin in ihrem Ruhezustand (Deckkraft 1, kein Versatz, kein Schein) — `none` laesst also genau das stehen, was am Ende sichtbar waere. Kein Inhalt geht verloren. */ body[data-page] .overlay-card, body[data-page] .marquee__track, body[data-page] .status-dot, body[data-page] .mock, body[data-page] .hero__animate > * { animation: none !important; } } /* Mobile Verdichtung (Redesign-Pass 15.08.2026): Der Takt bleibt, die Stufen ruecken zusammen — auf 390 px war die Seite sonst ein Scroll-Marathon aus Leerraum. */ @media (max-width: 720px) { body[data-page] { --rhythm-tight: 2rem; --rhythm-base: 2.75rem; --rhythm-wide: 3.5rem; } } /* Kartentext: 16 px reichen in einer Karte — 17 px Fliesstext gelten fuer Absaetze im Lesefluss. Spart auf 390 px rund 400 px Hoehe, ohne unter die 16-px-Grenze zu gehen. */ body[data-page] .cap-card p, body[data-page] .dl-card__meta, body[data-page] .also-chips li { font-size: 1rem; line-height: 1.55; } body[data-page] .team-card p { font-size: var(--fs-base); line-height: 1.5; } /* Fusszeilen-Spaltentitel: semantisch h2, visuell Beschriftung. Ohne diese Regel griff die Serif-H2-Skala (bis 46 px) — die Fusszeile schrie damit lauter als jede Sektion (Live-Befund 15.08.). */ body[data-page] .footer__heading { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; line-height: 1.4; margin: 0 0 var(--sp-4); } /* Kartentitel auf der Download-Seite: Beschriftung, keine Sektions-Serif. */ body[data-page][data-page="download"] h2.card__title { font-family: var(--font-ui); font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--sp-2); } body[data-page][data-page="download"] .card { display: flex; flex-direction: column; gap: var(--sp-3); } body[data-page][data-page="download"] .card .btn { align-self: stretch; } /* ============================================================ 3 — Volle Breite, EINE Schriftgroesse im Fliesstext (Arpad, 16.08.2026) DER BEFUND, gemessen auf de/download.html bei 1680 px Fenster: Absaetze standen auf 735 px, Listen und Ueberschriften daneben auf 1216 px. Nicht die Begrenzung an sich war das Problem, sondern dass nur EIN TEIL des Textes sie hatte — die Seite wirkte dadurch ungeordnet, und rechts blieb die Haelfte des Schirms leer. Dazu vier verschiedene Schriftgroessen im Fliesstext EINER Seite: 12 px (Augenbraue), 15 px (Listen), 17 px (Absaetze), 20 px (Vorspann). Deshalb hier: eine Groesse fuer allen Fliesstext, und die Lesebreite folgt dem Container statt eigenen Deckeln. WAS DAS KOSTET, ausdruecklich: Auf einem breiten Schirm werden die Zeilen lang (rund 160 Zeichen statt 90). Typografisch ist das kein Ideal — das Auge findet den Zeilenanfang schwerer. Es ist eine bewusste Entscheidung fuer ein ruhiges, gefuelltes Bild. Wer sie zurueckdrehen will, entfernt genau diesen Block; darunter steht der alte Zustand unveraendert. NUR AB 1025 px: Die Deckel unten stehen teils in Medienabfragen fuer Tablet/Mobil (z. B. .pricing-grid--three faellt dort auf 700 px). Ohne diese Klammer wuerde die hoehere Spezifitaet hier die Medienabfrage schlagen und das schmale Raster zerreissen. ============================================================ */ /* --- Schriftgroesse: eine fuer alles, was Fliesstext ist -------------- */ body[data-page] p, body[data-page] li, body[data-page] dd, body[data-page] .lede, body[data-page] .hero__lead, body[data-page] .card__text, body[data-page] .notice, body[data-page] .trust-note, body[data-page] .credits-note { font-size: var(--t-body); line-height: 1.68; } /* Ausdrueckliche Ausnahmen (Arpads Vorgabe: Ueberschriften und wirklich Wichtiges duerfen abweichen): Ueberschriften behalten ihre Groessen, die Augenbraue bleibt das kleine Grossbuchstaben-Etikett — sie ist ein Marker, kein Text. Fussnoten/Rechtszeilen ebenfalls unveraendert. */ @media (min-width: 1025px) { /* --- Container nutzt den Schirm ------------------------------------ */ body[data-page] .container { max-width: 1720px; } body[data-page] .container--narrow { max-width: 1720px; } /* --- Keine Textbremse mehr ----------------------------------------- */ body[data-page] .lede, body[data-page] .hero__lead, body[data-page] .section p:not([class]), body[data-page] p, body[data-page] li { max-width: none; } /* --- Fliesstext linksbuendig, Ueberschriften bleiben frei ---------- */ body[data-page] .section__head { max-width: none; margin-inline: 0; text-align: left; } /* --- Layoutbloecke folgen dem Container ---------------------------- */ /* .product-shot bleibt bewusst begrenzt: Das ist ein Bild fester Aufloesung — breiter gezogen wird es unscharf, nicht groesser. */ body[data-page] .hero__inner, body[data-page] .hero__inner--center, body[data-page] .trust-compare, body[data-page] .trust-compare--three, body[data-page] .trust-note, body[data-page] .local-banner, body[data-page] .reveal-stage, body[data-page] .pricing-grid--three, body[data-page] .pricing-grid--duo, body[data-page] .pricing-grid--once, body[data-page] .entband, body[data-page] .stgate, body[data-page] .credits-note, body[data-page] .legal-note--library, body[data-page] .bundle-grid, body[data-page] .dataflow, body[data-page] .vs-table, body[data-page] .faq-list, body[data-page] .dl-strip, body[data-page] .also-chips { max-width: none; } } /* ============================================================ 4 — Ablaufgrafik, jetzt mit dem NUTZEN darin (Arpad, 16.08.2026) Vorher zeigte die Grafik drei Stufen — Audio, live transkribiert, geloescht — und erzaehlte damit nur die Datenschutz-Haelfte der Geschichte: was NICHT passiert. Der Grund, warum jemand die Anwendung ueberhaupt startet, kam darin nicht vor. Jetzt steht zwischen Transkription und Loeschung die eigentliche Leistung: die belegte Antwort und die Uebersetzung, beides in Echtzeit. Diese Stufe traegt bewusst mehr Gewicht als die drei anderen — Flaeche, Farbe und ein kleines Etikett. Das ist die aelteste Regel der Bildwerbung: EIN Element gewinnt den ersten Blick, die uebrigen ordnen sich unter. Vier gleich starke Kaesten haetten keinen Einstieg. ============================================================ */ body[data-page] .dataflow--wide { max-width: none; gap: var(--sp-3); margin-block: var(--sp-8); align-items: stretch; } body[data-page] .dataflow--wide .dataflow__step { flex: 1 1 200px; padding: var(--sp-5) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-card); background: linear-gradient(180deg, var(--surface-2), var(--surface)); display: flex; flex-direction: column; justify-content: center; gap: 6px; } body[data-page] .dataflow--wide .dataflow__step strong { font-size: var(--fs-md); margin-bottom: 0; line-height: 1.3; } body[data-page] .dataflow--wide .dataflow__step small { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); } body[data-page] .dataflow--wide .dataflow__arrow { font-size: 24px; opacity: 0.55; } /* Die Nutzenstufe: mehr Flaeche, Markenfarbe, eigener Rahmen. */ body[data-page] .dataflow--wide .dataflow__step--hero { flex: 1.6 1 300px; border-color: var(--primary); border-width: 2px; background: var(--primary-tint); box-shadow: 0 10px 30px -18px var(--primary); } body[data-page] .dataflow--wide .dataflow__step--hero strong { font-size: var(--fs-lg); } body[data-page] .dataflow--wide .dataflow__step--hero small { color: var(--text); } body[data-page] .dataflow__tag { display: inline-block; align-self: flex-start; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-primary); background: var(--primary); border-radius: 999px; padding: 3px 10px; margin-bottom: 4px; } body[data-page] .dataflow--wide .dataflow__step--end { border-color: var(--border-strong); } @media (max-width: 900px) { body[data-page] .dataflow--wide { flex-direction: column; } body[data-page] .dataflow--wide .dataflow__step { flex: 0 0 auto; } body[data-page] .dataflow--wide .dataflow__arrow { transform: rotate(90deg); } } /* ============================================================ 5 — Weiterfuehrende Verweise auf EINER Linie (Arpad, 16.08.2026) Die Karten sind verschieden lang; der Verweis stand deshalb je Karte auf anderer Hoehe und die Reihe wirkte schief. `margin-top: auto` schiebt ihn in jeder Karte an den Fuss — unabhaengig von der Textlaenge. Auf Mobil ist das bereits mit `margin-top: 0 !important` aufgehoben (die Karten stehen dort untereinander, eine Fusslinie gibt es nicht). ============================================================ */ body[data-page] .cap-card > p:last-child { margin-top: auto; } /* ============================================================ 6 — Download-Seite: drei Hinweise als drei Karten (Arpad, 16.08.2026: „sieht noch sehr unordentlich aus") Der Grund war weder Zeilen- noch Absatzabstand: Es waren drei gleichrangige Hinweise, gesetzt als drei lose Fliesstextbloecke mit Ueberschriften. Ohne Rahmen fehlt dem Auge die Grenze — die Bloecke laufen ineinander, und man sieht nicht, dass es DREI Dinge sind. `auto-fit` statt fester Spaltenzahl, weil die erste Karte (Signaturhinweis) verschwindet, sobald signiert wird: Dann sollen die beiden uebrigen die Breite fuellen, statt eine Luecke stehen zu lassen. ============================================================ */ body[data-page] .cards--three { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } body[data-page] .dl-notes .card__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } body[data-page] .dl-notes .list { margin: 0; padding-left: 1.15em; } body[data-page] .dl-notes .list li { margin-bottom: 6px; } /* Der Signaturhinweis ist eine WARNUNG, keine Auskunft — er hebt sich deshalb ab. Wichtig: .notice--warn hatte NIE eigenes CSS (0 Treffer in allen Stylesheets) — die alte Warnung sah aus wie normaler Text. Hier bekommt sie zum ersten Mal eine sichtbare Kante, und zwar aus einem definierten Token, nicht aus einer erfundenen Variablen. */ body[data-page] .card--warn { border-color: var(--primary); background: linear-gradient(180deg, var(--primary-tint), var(--surface)); } body[data-page] .dl-soon { margin-top: var(--sp-5); } @media (max-width: 720px) { .cards--three { grid-template-columns: 1fr; } } /* Phasen-Kacheln der Effizienz-Sektion: dieselbe Bildsprache wie die Schritt-Kacheln darueber, nur traegt die Nummernblase statt „1/2/3" ein Wort („Vorher/Waehrenddessen/Danach"). Sie muss deshalb mitwachsen duerfen, statt kreisrund zu bleiben. */ body[data-page] .steps--phases .step__num { width: auto; min-width: 0; border-radius: 999px; padding: 3px 12px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } body[data-page] .steps--phases .list { margin: 0; padding-left: 1.15em; } body[data-page] .steps--phases .list li { margin-bottom: 6px; } /* ============================================================ 7 — FAQ: linksbuendig und gruppiert (Arpad, 16.08.2026) Die Liste ist von 6 auf 28 Fragen gewachsen — sie soll jetzt saemtliche Funktionen und Vorteile abdecken, wenn man sie durchklickt. Ab dieser Laenge braucht sie Zwischenueberschriften, sonst sucht man. Arpad hat die FAQ ausdruecklich als AUSNAHME benannt: hier ist alles linksbuendig, auch der Sektionskopf. Das ist kein Widerspruch zur uebrigen Seite — eine Nachschlageliste liest man von links, nicht von der Mitte. ============================================================ */ body[data-page] #faq .section__head, body[data-page] #faq .section__title, body[data-page] #faq .section__lead, body[data-page] #faq .eyebrow { text-align: left; } body[data-page] #faq .faq-list { max-width: none; } /* `body[data-page] h3` ist spezifischer als eine blosse Klasse und hat die Gruppenzeile sonst auf Ueberschriftengroesse aufgeblasen. Deshalb hier mit demselben Gewicht gegengehalten. */ body[data-page] .faq-group { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin: var(--sp-8) 0 var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); } body[data-page] .faq-group:first-child { margin-top: 0; } body[data-page] #faq .faq-item summary { text-align: left; } body[data-page] #faq .faq-item p { text-align: left; max-width: none; } /* =========================================================================== DOWNLOAD-SEITE (17.08.2026) Zwei Anforderungen von Arpad, die zusammengehoeren: 1. Das App-Symbol IST der Download-Knopf. Es ist dasselbe Bild, das die installierte Anwendung traegt — wer 678 MB laedt, sieht vorher, was danach im Dock steht. 2. Auf dem Desktop soll ohne Scrollen alles Wesentliche sichtbar sein. Punkt 2 ist ausdruecklich NUR fuer den Desktop. Auf dem Handy ist Scrollen die normale Bedienung, und Text zusammenzuquetschen, um eine Bildschirmhoehe zu treffen, die es dort gar nicht gibt, macht die Seite nur unlesbar. Deshalb steht die Verdichtung in einer Medienabfrage ab 1024 px. Alles auf `body[data-page]` beschraenkt: Webseite und App-Oberflaeche teilen sich diese Stilvorlage. =========================================================================== */ body[data-page="download"] .dl-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; text-decoration: none; color: inherit; padding: 18px 14px; border-radius: 18px; border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body[data-page="download"] .dl-tile:hover, body[data-page="download"] .dl-tile:focus-visible { transform: translateY(-2px); border-color: var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, .10); } body[data-page="download"] .dl-tile__icon { width: 128px; height: 128px; display: block; border-radius: 28px; /* dem Squircle nachempfunden */ box-shadow: 0 8px 26px rgba(0, 0, 0, .16); } body[data-page="download"] .dl-tile__label { font-weight: 700; font-size: 1.05rem; line-height: 1.3; } body[data-page="download"] .dl-tile__meta { font-size: .9rem; opacity: .72; font-variant-numeric: tabular-nums; } /* Nicht anklickbar, solange nichts veroeffentlicht ist — und das sichtbar. Kein Knopf, der aussieht wie ein Knopf und nichts tut. */ body[data-page="download"] .dl-tile.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } /* Die Intel-Fassung: klein, aber vollstaendig sichtbar. Sie in ein Aufklappmenue zu stecken hiesse, die Haelfte der Mac-Nutzer suchen zu lassen — welche Bauart ein Mac hat, weiss der Browser nicht. */ body[data-page="download"] .dl-alt { display: block; text-align: center; font-size: .92rem; margin-top: 6px; text-decoration: underline; text-underline-offset: 3px; } body[data-page="download"] .dl-alt__meta { opacity: .7; } body[data-page="download"] .dl-alt.is-disabled { opacity: .55; pointer-events: none; } body[data-page="download"] .dl-req { text-align: center; margin: 12px 0 0; font-size: .92rem; } body[data-page="download"] .dl-more { margin-top: 10px; font-size: .92rem; } body[data-page="download"] .dl-more summary { cursor: pointer; text-align: center; opacity: .8; } body[data-page="download"] .dl-more p { text-align: left; margin-top: 10px; } /* --- Nur Desktop: alles Wesentliche in eine Bildschirmhoehe ---------------- */ @media (min-width: 1024px) { body[data-page="download"] .section--ruled { padding-top: 26px; padding-bottom: 26px; } body[data-page="download"] .h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); margin: 4px 0 10px; } body[data-page="download"] .lede { margin: 0 0 16px; font-size: 1rem; } body[data-page="download"] .eyebrow { margin-bottom: 2px; } body[data-page="download"] #dlCards { margin-top: 0; } body[data-page="download"] .dl-card { padding: 20px 22px; } body[data-page="download"] .dl-card .card__title { margin: 0 0 10px; font-size: 1.25rem; } body[data-page="download"] .dl-notes { margin-top: 20px; } /* Die drei Hinweise bleiben drei Kaesten (Arpads Punkt 13 von gestern), werden aber knapper: kleinere Ueberschrift, weniger Innenabstand. Die beiden NEBENhinweise sind zugeklappt — der Signaturhinweis nicht. Der ist der einzige, der jemanden beim ersten Start aufhaelt; ihn wegzuklicken hiesse, genau die Warnung zu verstecken, wegen der die Karte existiert. */ body[data-page="download"] .dl-notes .card { padding: 16px 18px; } body[data-page="download"] .dl-notes .card__title { font-size: 1.02rem; margin: 0; } body[data-page="download"] .dl-notes .card__text, body[data-page="download"] .dl-notes .list { font-size: .92rem; } body[data-page="download"] .dl-notes .card__text { margin: 8px 0 0; } /* EIGENES RASTER STATT `cards--three` (17.08.2026): Das gemeinsame Raster vergab hier 1376 px an die erste Spalte und 0 px an die uebrigen — nachgemessen im Browser, nicht vermutet. Die beiden zugeklappten Karten waren dadurch faktisch weg. Der Signaturhinweis bekommt die volle Breite: Er ist der einzige, der jemanden beim ersten Start wirklich aufhaelt. Die beiden Nachschlage-Karten teilen sich die Zeile darunter. */ body[data-page="download"] .dl-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } body[data-page="download"] .dl-notes > #dlUnsigned { grid-column: 1 / -1; } /* Ohne diese Zeile blieben die beiden Karten so schmal wie ihr Text (260 und 213 px, im Browser nachgemessen) und rutschten an den rechten Rand — das gemeinsame `.cards`-Raster richtet seine Kinder anders aus. */ body[data-page="download"] .dl-notes > .dl-note { justify-self: stretch; align-self: stretch; width: 100%; } body[data-page="download"] .dl-notes { row-gap: 14px; } /* Feinschliff, damit Karten UND Signaturhinweis in eine Bildschirmhoehe passen. Die Zahlen sind erarbeitet, nicht gegriffen: Bei 1440x900 bleiben Kopfzeile (64) + Vorspann (~180) + Karten (~430) + Hinweis (~210) knapp unter 900. */ body[data-page="download"] .dl-tile { padding: 12px 14px; gap: 8px; } body[data-page="download"] .dl-tile__icon { width: 112px; height: 112px; border-radius: 25px; } body[data-page="download"] .dl-card { padding: 18px 20px; } body[data-page="download"] .lede { margin: 0 0 12px; } body[data-page="download"] .dl-req { margin-top: 10px; } } /* Aufklappbare Nebenhinweise — in jeder Breite, nicht nur am Desktop: Es sind Nachschlage-Angaben, keine Handlungsanweisungen. */ body[data-page="download"] .dl-note summary { cursor: pointer; list-style-position: outside; } body[data-page="download"] .dl-note summary::-webkit-details-marker { color: currentColor; opacity: .6; } body[data-page="download"] .dl-note details[open] summary { margin-bottom: 8px; } /* =========================================================================== PREISSEITE (17.08.2026) Zwei Wuensche von Arpad: 1. Enterprise soll dieselbe Box sein wie die uebrigen Pakete — nicht ein Band ueber die volle Breite. Es darf unten stehen und gescrollt werden. 2. Die drei Pakete sollen ohne Scrollen zu sehen sein. Zu 2 gehoert eine ehrliche Zahl: Eine Paketkarte ist 673 px hoch (im Browser gemessen), die Kopfzeile nimmt 64. Bleiben fuer Vorspann, Reiter und Umschalter rund 160 px — vorher waren es 637. Die Verdichtung unten ist also kein Feinschliff, sondern ein Umbau: kleinere Ueberschrift, engere Abstaende, flachere Karten. NUR AM DESKTOP. Auf dem Handy ist Scrollen die normale Bedienung, und Text auf eine Bildschirmhoehe zu quetschen, die es dort nicht gibt, macht die Seite unlesbar. =========================================================================== */ @media (min-width: 1024px) { /* --- Vorspann: der groesste Hebel ---------------------------------- */ body[data-page="pricing"] .section--ruled { padding-top: 22px; padding-bottom: 22px; } body[data-page="pricing"] .section__head { margin-bottom: 10px; } body[data-page="pricing"] .section__title { font-size: clamp(1.9rem, 2.8vw, 2.5rem); margin: 2px 0 8px; } body[data-page="pricing"] .section__head p { margin: 0 0 6px; font-size: .98rem; } body[data-page="pricing"] .eyebrow { margin-bottom: 2px; } body[data-page="pricing"] .ptabs { margin: 8px 0; } body[data-page="pricing"] .billing { margin: 0 0 8px; } body[data-page="pricing"] .billing__rows { margin-top: 4px; } body[data-page="pricing"] .local-banner { padding: 8px 14px; font-size: .9rem; margin: 10px 0 14px; } /* --- Karten flacher, ohne etwas wegzulassen ------------------------- */ body[data-page="pricing"] .pricing-grid .plan { padding: 18px 20px; } body[data-page="pricing"] .plan__name { font-size: 1.25rem; margin-bottom: 4px; } body[data-page="pricing"] .plan__tag { font-size: .92rem; margin-bottom: 8px; } body[data-page="pricing"] .price { margin: 8px 0; } body[data-page="pricing"] .price__now { font-size: 1.9rem; } body[data-page="pricing"] .plan__features { margin: 10px 0; } body[data-page="pricing"] .plan__features li { margin: 5px 0; font-size: .94rem; line-height: 1.35; } /* --- Enterprise: dieselbe Box wie die uebrigen ---------------------- */ /* `.entband` war ein eigenes Band ueber die volle Breite. Jetzt ist es dasselbe Dreier-Raster wie bei den Paketen, und die Karte sitzt in der MITTLEREN Spalte — gleiche Breite, gleiche Flucht, gleicher Abstand. Die Spalte in der Mitte, weil eine einzelne Karte links buendig aussaehe wie ein vergessenes viertes Paket. */ body[data-page="pricing"] .entband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: none; margin-top: 22px; } body[data-page="pricing"] .entband > .plan--enterprise { grid-column: 2; padding: 18px 20px; } /* --- Zweiter Durchgang: die letzten 200 px --------------------------- Gemessen, wohin sie gehen: Vorspann 377 px, Karte 640 px, Kopfzeile 64. Macht 1081 gegen 900. Die Zahlen unten sind die Differenz, verteilt auf die Stellen, an denen sie am wenigsten weh tut — Abstaende zuerst, Schriftgroessen zuletzt, Inhalt nie. */ body[data-page="pricing"] .section__head { margin-bottom: 6px; } body[data-page="pricing"] .section__head p { margin: 0 0 4px; font-size: .94rem; } body[data-page="pricing"] .ptabs { margin: 6px 0; } /* Die Sparzeile stand als eigene Zeile ueber dem Umschalter — und sagte dasselbe wie die Beschriftung des Umschalters darunter ("Jaehrlich >10 % Rabatt"). Zweimal dieselbe Aussage, zwei Zeilen Hoehe. */ body[data-page="pricing"] .billing { margin: 0 0 6px; } /* `.billing__save` sagt "Mehr als 10 % sparen mit jaehrlicher Zahlung" — und direkt darunter steht auf dem Umschalter "Jaehrlich >10 % Rabatt". Dieselbe Aussage zweimal, 36 px Hoehe. Die Aussage bleibt, die Doppelung geht. */ body[data-page="pricing"] .billing__save { display: none; } body[data-page="pricing"] .billing { margin: 0; } body[data-page="pricing"] .billing__rows { margin-top: 0; } /* Der Abstand zwischen Umschalter und Hinweisband war 39 px allein aus Aussenabstaenden — mehr als die Zeile selbst hoch ist. */ body[data-page="pricing"] .local-banner { margin: 10px 0 12px; } body[data-page="pricing"] .local-banner { padding: 7px 14px; font-size: .88rem; } body[data-page="pricing"] .pricing-grid .plan { padding: 15px 18px; } body[data-page="pricing"] .plan__name { font-size: 1.18rem; } body[data-page="pricing"] .plan__tag { font-size: .88rem; margin-bottom: 6px; } body[data-page="pricing"] .price { margin: 6px 0; } body[data-page="pricing"] .price__now { font-size: 1.7rem; } body[data-page="pricing"] .plan__features { margin: 8px 0; } body[data-page="pricing"] .plan__features li { margin: 2px 0; font-size: .88rem; line-height: 1.3; } /* --- Dritter Durchgang: die letzten 72 px ---------------------------- Aufgeschluesselt an der Karte gemessen (Standard-Paket): Name 24, Untertitel 24, Preis 78, Sparabzeichen 27, Stundenangabe 29, Verlaengerungszeile 19, Merkmalsliste 137, Knopf 46. Die Kuerzungen unten treffen Polsterung und Zeilenhoehe, keinen Inhalt: Es verschwindet keine Angabe, sie stehen nur enger. */ body[data-page="pricing"] .section--ruled { padding-top: 14px; padding-bottom: 18px; } body[data-page="pricing"] .section__title { font-size: clamp(1.8rem, 2.5vw, 2.2rem); } body[data-page="pricing"] .pricing-grid .plan { padding: 13px 16px; } body[data-page="pricing"] .price { margin: 4px 0; } body[data-page="pricing"] .price__now { font-size: 1.55rem; } body[data-page="pricing"] .price__meta, body[data-page="pricing"] .plan__renew { font-size: .8rem; } body[data-page="pricing"] .badge-save, body[data-page="pricing"] .plan__hours { padding-top: 3px; padding-bottom: 3px; font-size: .82rem; } body[data-page="pricing"] .plan__features { margin: 6px 0; } body[data-page="pricing"] .pricing-grid .plan .btn { padding-top: 9px; padding-bottom: 9px; } /* --- Letzte 38 px: nur noch Zwischenraeume --------------------------- Der Vorspann ist 323 px hoch, davon 88 px reine Abstaende zwischen den Bloecken. Da liegt der Rest — nicht in Schrift oder Inhalt. */ body[data-page="pricing"] .section--ruled { padding-top: 10px; } body[data-page="pricing"] .section__head { margin-bottom: 2px; } body[data-page="pricing"] .ptabs { margin: 4px 0; } body[data-page="pricing"] .local-banner { margin: 6px 0 8px; } /* Die verbleibenden 26 px: Abstand zwischen Hinweisband und Raster sowie die Fusspolsterung der Karten. Damit steht der Knopf jeder Karte bei 1440x900 vollstaendig im Bild — nachgemessen, nicht geschaetzt. */ body[data-page="pricing"] .pricing-grid { margin-top: 0; } body[data-page="pricing"] .pricing-grid .plan { padding-bottom: 10px; } } /* ------------------------------------------------------------ Glossar — 01.09.2026 Die Seite ist eine
mit 48 Eintraegen. Im Designsystem gibt es dafuer keine einzige Regel; ohne diese hier stuenden Begriff und Erklaerung in derselben Schrift untereinander und waeren nicht auseinanderzuhalten. `scroll-margin-top` steht hier und nicht als Inline-Style an 96
: Die Kopfleiste ist 72 px hoch und klebt oben, ein Sprungziel ohne diesen Abstand landet dahinter. site.css loest das fuer `section[id]`;
ist kein Abschnitt und faellt deshalb durch. ------------------------------------------------------------ */ body[data-page="glossary"] dl { margin: 0; } body[data-page="glossary"] dt[id] { scroll-margin-top: 88px; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border-soft); color: var(--text-heading); } body[data-page="glossary"] dt[id]:first-of-type { margin-top: 0; border-top: none; padding-top: 0; } body[data-page="glossary"] dt[id] em { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-body-m); color: var(--text-muted); margin-left: var(--sp-2); } body[data-page="glossary"] dd { margin: var(--sp-2) 0 0; max-width: 68ch; } /* Datenschutzerklaerung, Abschnitt 5 (03.09.2026). Das Verarbeiter- verzeichnis ist seit heute eine Liste und soll auch wie eine aussehen: styles.css setzt global `ul { list-style: none; padding: 0 }`, ohne diese Regel stuenden die sieben Auftragsverarbeiter als sieben zusammenhanglose Zeilen untereinander. Eng auf die Seite gebunden, damit `.list` auf allen anderen Seiten bleibt, wie es war. */ body[data-page="privacy-policy"] .list { list-style: disc; padding-left: 1.2em; margin: 0 0 var(--sp-4); } body[data-page="privacy-policy"] .list li { margin-bottom: 8px; }