/* ============================================================================= marketing.css — die öffentliche Werbeseite auf MARKETING_HOST. WARUM DIESE SEITE KEIN BOOTSTRAP LÄDT Jede andere Seite dieser Anwendung zieht bootstrap.min.css (232 KB) + app.css + bootstrap-icons. Die Werbeseite braucht davon nichts: Sie besteht aus sechs Komponenten (Knopf, Karte, Raster, Akkordeon, Kopf-, Fußleiste), und die stehen hier vollständig in unter 400 Zeilen. Der Grund ist aber nicht die Dateigröße, sondern die Richtung der Kaskade: app.css härtet Farben für die Anwendung (Statusbadges, Tabellen, Formulare) und trägt dabei !important an mehreren Stellen. Läge das über der Werbeseite, verschöbe jede spätere Änderung an der Anwendung still das Aussehen der Seite, die Kunden zuerst sehen — und niemand käme auf die Idee, nach einem Werbeseiten-Fehler in app.css zu suchen. WARUM TROTZDEM JEDE KLASSE „mk-" HEISST Auf dem Marketing-Host liegt nicht nur die Landingpage. Impressum, Datenschutz, AGB, AVV und die Lizenzliste sind dieselben Blade-Views wie im Mandanten und auf dem Signup-Host (sie hängen über $layout in einen fremden Rahmen, siehe Kopfkommentar in resources/views/impressum.blade.php) — und die sind in Bootstrap-Markup geschrieben. Diese Seiten laden Bootstrap deshalb weiterhin, die Landingpage nicht (layouts/marketing.blade.php, $bootstrap). Damit stehen auf denselben Seiten zwei Stylesheets nebeneinander, und genau dort kollidieren `.container`, `.btn`, `.btn-primary`, `.brand` — bei Bootstrap heißen sie gleich und meinen etwas anderes. Ein Präfix ist die einzige Lösung, die ohne Reihenfolge-Glück auskommt. Aus demselben Grund gibt es hier KEINE nackten Elementselektoren (kein `section{}`, kein `h2{}`): die träfen auf den Rechtstextseiten den Bootstrap-Inhalt mit. FARBEN Blau und Verlauf sind keine freie Wahl, sondern exakt die Werte aus public/css/signup.css: Wer hier auf „Kostenlos testen" klickt, steht eine Sekunde später auf dem Signup — zwei verschiedene Blautöne lesen sich als zwei Produkte. #0a58ca statt Bootstraps #0d6efd, weil #0d6efd als Text auf Weiß nur 3,7:1 erreicht; die gehärtete Variante misst 6,44:1. Der Akzent (#8ECCC5, aus public/favicon/favicon.svg) ist eine FLÄCHENFARBE. Als Text auf Weiß sind es 1,8:1, auf dem Markenblau 3,55:1 — beides unlesbar. Für Text und Ikonen auf Hell gibt es deshalb --mk-akz-dark (7,41:1), für Text auf Blau --mk-akz-hell (5,16:1). Wer den hellen Akzent zu Text macht, bricht die Seite; die drei Töne sind bewusst getrennte Rollen, keine Geschmacksstufen. ZWEI BLAUSTUFEN, ZWEI ROLLEN — seit dem 2026-09-06 die tragende Regel dieser Datei. Vorzustand: --mk-blue war ALLES — Überschriften, Navigation, Knöpfe, Wortmarke, Preiszahl. Damit hatten die Überschriften 6,21:1 und der Fließtext darunter 14,89:1: Was das Auge zuerst fangen soll, war der schwächste Reiz der Seite. Seither gilt: --mk-blue-dark Überschriften h1/h2/h3 und die FAQ-Fragen (9,04:1 auf n25) --mk-blue alles Bedienbare — Navigation, Knöpfe, Wortmarke (6,21:1) Ausnahme mit Absicht: .mk-price-amount bleibt --mk-blue. 42 px in 700 ist Großtext (Maßstab dort 3:1), und es ist die eine Stelle, an der das Markenblau als Fläche wirken soll. Die Regel steht seit dem 2026-10-18 in public/css/preistafel.css, die diese Palette über var(--mk-*) mitliest. Schatten sind blau getönt statt schwarz — dieselbe rgba-Basis wie der Werbekasten in signup.css. Schwarz wirkt auf diesen hellen Flächen schmutzig. Alle Textpaare sind gerechnet, nicht geschätzt; die Werte stehen als Kommentar an der jeweiligen Regel. MASSSTAB: AA (4,5:1) ist die UNTERGRENZE, gebaut wird auf 7:1. Der Unterschied ist nicht akademisch — bis zum 2026-09-06 war 4,5:1 der Maßstab, und die Werte lagen entsprechend bei 5,0–5,8:1. Das besteht jede Prüfung und liest sich trotzdem schlecht: auf einem Telefon im Hellen, mit müden Augen oder auf einem billigen Display ist 5,1:1 kein Text, den jemand freiwillig liest. Zwei ausdrückliche Ausnahmen bleiben, weil sie an der Marke hängen: die drei Akzentrollen oben und weiße Schrift auf --mk-blue (6,44:1). tests/Feature/Ui/ContrastPaletteTest.php pinnt die Palette der ANWENDUNG und kennt diese Datei nicht — sie prüft nur die dort hinterlegten Paare. Wer hier eine Farbe ändert, hat also kein Netz und muss nachrechnen. ============================================================================= */ /* Die Schrift liegt als Datei neben der Seite, nicht als Daten-URI im CSS und erst recht nicht bei Google: Ein Fremdrequest überträgt die IP jedes Besuchers an einen Dritten und wäre ohne Einwilligung ein Datenschutzverstoß — das ist der Grund, nicht der Ladezeitgewinn. Nur 600 und 700: Montserrat trägt ausschließlich Überschriften und die Wortmarke, der Fließtext läuft im System-Stack. Ein Regular-Schnitt wäre 18 KB für null Verwendung. font-display:swap, damit der Text während des Ladens lesbar bleibt. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); } :root { --mk-blue: #0A58CA; --mk-blue-dark: #084298; --mk-blue-subtle: #E3F2FD; /* Fläche */ --mk-akz: #8ECCC5; /* Text/Ikone auf Hell — 7,41:1 auf Weiß, 7,16:1 auf --mk-n25. War #26766B (5,40 / 5,22:1). Der Ton trägt SIEBEN Rollen, und jede einzelne gewinnt: Kicker, Häkchen, Ikonen, Fokusring, .mk-btn-primary:active (weiße Schrift darauf, 7,41:1), der Rahmen der hervorgehobenen Preiskarte und .mk-nav a:hover. Auf --mk-akz-subtle misst die Ikone 6,70:1 statt 4,88:1. */ --mk-akz-dark: #205F56; /* Text auf Markenblau — 5,16:1 auf #0A58CA, 7,51:1 auf #084298 */ --mk-akz-hell: #CCEDE8; /* Ikonen-Kachel */ --mk-akz-subtle: #E6F7F4; --mk-n0: #FFFFFF; --mk-n25: #FAFBFC; --mk-n50: #F4F6F9; --mk-n100: #EDF2F7; --mk-n200: #DEE2E6; /* Sekundärtext — 8,14:1 auf Weiß, 7,86:1 auf --mk-n25. War #5F666E (5,81 / 5,61:1). Dieser eine Ton trägt die neun Funktionskarten, die Bildunterschriften, die Vertrauensleiste, die Preiseinheit, beide Preisnotizen und die Testbedingungen im Hero — er ist damit die meistgelesene Farbe der Seite nach --mk-n800 und war die blasseste. Der Abstand zum Fließtext (14,89:1) bleibt groß genug, dass er weiterhin als sekundär liest. */ --mk-n600: #4A5058; --mk-n800: #212529; --mk-font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --mk-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; --mk-shadow-sm: 0 1px 2px rgba(8, 66, 152, .06); --mk-shadow-md: 0 2px 8px rgba(8, 66, 152, .08); --mk-shadow-lg: 0 8px 24px rgba(8, 66, 152, .18); --mk-r-sm: 4px; --mk-r-md: 6px; --mk-r-lg: 8px; /* Senkrechter Abstand der Sektionen, seit dem 2026-10-18 an EINER Stelle (Wunsch des Mitinhabers: „Abstand zwischen den Sektionen verkleinern"). Vorher standen 96/64 px als Literal in .mk-section und .mk-hero und 64 px in .mk-feature — drei Stellen, die beim nächsten Nachjustieren auseinandergelaufen wären. --mk-abstand gilt für Hero und Sektionen, --mk-abstand-block für die fünf Funktionsblöcke, die sich mit wechselndem Grund ohnehin voneinander absetzen. Die Werte ab 992 px stehen im @media-Block direkt darunter. Gemessen (Chromium), allein durch die Abstände: Startseite 9112 → 8696 px bei 1280, 14394 → 14010 px bei 390. */ --mk-abstand: 48px; --mk-abstand-block: 48px; } @media (min-width: 992px) { :root { --mk-abstand: 72px; --mk-abstand-block: 56px; } } /* ── Grundgerüst ─────────────────────────────────────────────────────────── */ /* Nur auf der Landingpage (Klasse am ), damit die Rechtstextseiten mit ihrem Bootstrap-Reset unbehelligt bleiben. */ .mk-page { margin: 0; font-family: var(--mk-font-body); font-size: 16px; line-height: 1.55; color: var(--mk-n800); /* 14,89:1 auf --mk-n25 */ background: var(--mk-n25); -webkit-text-size-adjust: 100%; } .mk-page *, .mk-page *::before, .mk-page *::after { box-sizing: border-box; } /* :where() ist hier nicht Kosmetik, sondern der Kern der Regel. Diese Grundeinstellungen müssen unter .mk-page hängen, damit sie die Rechtstextseiten mit ihrem Bootstrap-Markup nicht anfassen. Ohne :where() hätte „.mk-page p" aber die Spezifität (0,1,1) und schlüge damit JEDE Komponentenklasse (0,1,0) — gemessen im Browser: .mk-price-note, .mk-zentriert-sub, .mk-kicker, .mk-hero-sub, .mk-trust-item, .mk-price-line und .mk-footer-links bekamen allesamt „0 0 16px" statt ihres eigenen Werts, und die zentrierten Absätze standen wegen des überschriebenen „margin: … auto" linksbündig statt in der Mitte. :where() zählt mit null, die Regel wirkt damit wie ein nackter Elementselektor — Grundeinstellung, die jede Komponente überschreiben kann. */ :where(.mk-page) h1, :where(.mk-page) h2, :where(.mk-page) h3 { font-family: var(--mk-font-heading); line-height: 1.25; /* --mk-blue-dark, nicht --mk-blue: 9,04:1 auf --mk-n25 statt 6,21:1. Die Überschriften hatten weniger Kontrast als der Fließtext darunter (14,89:1) — die Hierarchie stand auf dem Kopf. Begründung der Rollenteilung im Dateikopf unter FARBEN. Die dunklen Sektionen setzen weiter unten #fff und bleiben davon unberührt (.mk-dunkel h2, .mk-karte h3). */ color: var(--mk-blue-dark); margin: 0 0 16px; } :where(.mk-page) p { margin: 0 0 16px; } :where(.mk-page) img { max-width: 100%; height: auto; display: block; } /* Lange deutsche Komposita brechen, statt aus ihrem Kasten zu laufen. GEMESSEN (Chromium, 320 px breites Fenster), und das ist der Grund für diese drei Angaben: .mk-hero h1 — gemessen am damaligen Wortlaut „Teilnehmerlisten, die sich selbst ausfüllen."; seit dem 2026-08-24 steht dort „Teilnehmerlisten und Zertifikate, die sich selbst schreiben.", der Treiber ist unverändert das erste Wort: min-content 308 px, verfügbar 272 px (320 − 2×24 Polster von .mk-container) → document.scrollWidth − clientWidth = 12: die ganze Seite scrollte waagerecht. summary im FAQ „Bekommen wir einen Auftragsverarbeitungsvertrag?" min-content 262 px in einem 230-px-Kasten → das Wort malte über den Rand des
hinaus (kein Seiten-Überlauf, weil links noch Polster stand). Gefunden beim Nachmessen des Hero-Falls, gleiche Ursache, deshalb gleich mit erledigt. Nicht das Raster war schuld, sondern das Wort: „Teilnehmerlisten," ist bei 34 px so breit wie es ist, und der Boden von clamp(34px, 5vw, 56px) greift unterhalb von 680 px Fensterbreite. Ein unbrechbares Wort ist zugleich die min-content-Breite des Kastens — und im Hero-Raster bestimmt die die Spaltenbreite, weshalb die Spalte 308 statt 272 px maß und über den rechten Rand hinausragte. Die beiden Angaben tun ZWEI VERSCHIEDENE Dinge, deshalb stehen beide da: hyphens: auto liefert den schönen Bruch. setzt layouts/marketing.blade.php, damit kennt der Browser die deutschen Trennstellen. Nachgemessen in WebKit (Playwright 1.61, 320 px): „Teilnehmerlis- / ten, die sich" und „selbst ausfül- / len." — beides echte Trennstellen. Es hängt aber an einem Trennwörterbuch, das nicht jeder Browser mitbringt; fehlt es, ist die Angabe wirkungslos. overflow-wrap: anywhere ist die Garantie darunter, unabhängig von jedem Wörterbuch: Nur „anywhere" senkt AUCH die min-content-Breite und damit die Rasterspalte (mit „break-word" gemessen: min-content bleibt 308, Überlauf bleibt 12 — es bricht die Zeile, nicht die Spalte). In WebKit gewinnt die Trennung trotzdem, gemessen: mit und ohne „anywhere" dieselben Trennstellen. Chromium bricht dagegen hart („Teilnehmerlist / en"), und zwar auch mit hyphens: auto allein — dort kostet die Garantie also nichts, sie beschreibt nur, was der Browser ohnehin tut. VERWORFEN, den Boden der clamp() zu senken: 30 px wären rechnerisch die Grenze (308 × 30/34 = 272 px, also null Rest), 28 px hätten Luft — aber dieser Boden gilt bis 560 px Fensterbreite, also auf JEDEM Telefon. Für 12 px bei 320 px hätte die Hero-Überschrift auf allen Geräten 6 px verloren. VERWORFEN, min-width: 0 auf die Rasterkinder: nachgemessen wirkungslos, der Überlauf blieb 12. Das schrumpft den Kasten, nicht das Wort — der Text ragt dann eben aus einem 272 px breiten Kasten heraus und hält die Scrollfläche weiter auf 332 px. Nur Überschriften und , nicht der Fließtext: In Absätzen wäre hyphens: auto keine Fehlerbehebung, sondern eine Änderung des Schriftbilds auf allen Breiten. Gemessen überläuft dort auch nichts — die Wörter sind kürzer und die Schrift ist halb so groß. SEIT DEM 2026-10-18 TRENNT DER BROWSER NUR NOCH LANGE WÖRTER (Wunsch des Mitinhabers: „Silbentrennung in Überschriften"). hyphens: auto trennte in Chromium auch Wörter, die in die nächste Zeile gepasst hätten, gemessen an der Live-Seite: im FAQ bei 390 px „regis- trieren", „Teil-nahme", „ge-löscht", „ers-ten"; auf den Inhaltsseiten sogar bei 1280 px („hinein-gehört", „Unter-schied"). Jetzt: - Standard ist hyphens: manual — ein Wort, das passt, wandert ganz in die nächste Zeile. - Nur wo der Browser hyphenate-limit-chars kennt, dürfen Wörter ab 18 Zeichen mit mindestens 6 Zeichen je Seite getrennt werden: „Teilnahmebescheinigung", „Teilnehmerzertifikate", „Auftragsverarbeitungsvertrag" — die passen auf keinem Telefon in eine Zeile, und dort ist ein Trennstrich besser als ein harter Bruch. Ein Browser ohne hyphenate-limit-chars trennt GAR NICHT automatisch, statt wieder jedes Wort. - overflow-wrap: anywhere bleibt als Netz gegen den Seitenüberlauf (Messung oben). - text-wrap: balance verteilt mehrzeilige Überschriften gleichmäßig, statt ein einzelnes Wort in die letzte Zeile zu stellen. Wo es fehlt, bricht der Browser wie bisher. KEINE weichen Trennstriche (­) im Markup: Sie zerlegen das Suchwort im Quelltext und in jeder Wortprüfung der Tests. */ :where(.mk-page) h1, :where(.mk-page) h2, :where(.mk-page) h3, :where(.mk-page) summary { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; } :where(.mk-page) h1, :where(.mk-page) h2, :where(.mk-page) h3 { text-wrap: balance; } /* Gemessen über alle zehn Seiten bei 320–1280 px (Chromium): einzelne Wörter in der letzten Zeile einer mehrzeiligen Überschrift 91 von 174 ohne, 18 mit balance (68 mit pretty). Der Preis von balance: Es bricht gern an einem Bindestrich („QR- / Code") — dagegen .mk-ganz. */ .mk-ganz { white-space: nowrap; } @supports (hyphenate-limit-chars: 18 6 6) { :where(.mk-page) h1, :where(.mk-page) h2, :where(.mk-page) h3, :where(.mk-page) summary { -webkit-hyphens: auto; /* Safari trennt erst ab 17 ohne Präfix. */ hyphens: auto; hyphenate-limit-chars: 18 6 6; } } /* Sprungmarke: sichtbar erst bei Tastaturfokus. NICHT display:none und nicht visibility:hidden — beides nimmt das Element aus der Tabreihenfolge, dann existiert die Marke für genau die Nutzer nicht, für die sie gebaut ist. Versteckt wird senkrecht per transform und nicht per „left:-9999px": Ein Element weit außerhalb der linken Kante zählt in manchen Browsern zur scrollbaren Fläche, und diese Seite darf unter keiner Breite waagerecht scrollen. Nach oben herausgeschoben entsteht keine Scrollfläche — oberhalb des Ursprungs scrollt nichts. */ .mk-skip { position: absolute; top: 0; left: 0; z-index: 100; transform: translateY(-200%); background: var(--mk-blue); color: #fff; /* 6,44:1 */ padding: 12px 20px; border-radius: 0 0 var(--mk-r-md) 0; text-decoration: none; font-weight: 600; } .mk-skip:focus { transform: translateY(0); } /* Fokus: --mk-akz-dark misst 7,41:1 auf Weiß und erfüllt WCAG 1.4.11 (3:1) mit Abstand. Auf den dunkelblauen Sektionen wäre derselbe Ton 1,15:1 — dort schaltet die Regel weiter unten auf Weiß um. KORRIGIERTER ANSPRUCH. Hier stand ".mk-page :focus-visible, .mk-header :focus-visible, .mk-skip:focus-visible" mit dem Kommentar, .mk-header und .mk-footer deckten den Fall der Rechtstextseiten ab. Nachgemessen stimmte daran zweierlei nicht: .mk-footer kam in der Regel überhaupt nicht vor (die Fußleiste hat ihre eigene weiße Regel weiter unten), und abgedeckt waren damit nur Kopf- und Fußleiste. Der INHALT von Impressum, Datenschutz, AGB, AVV und Lizenzliste liegt dazwischen — der trägt dort kein .mk-page, weil an dieser Klasse die Typografie hängt, die mit Bootstrap kollidiert. Jeder Link im Rechtstext, der Drucken-Knopf und die Lizenz-Verweise fielen deshalb auf den Standardring des Browsers zurück, dessen Kontrast niemand geprüft hat. Der Anker ist jetzt .mk-host: die Klasse, die layouts/marketing.blade.php auf JEDEN dieses Hosts schreibt, mit und ohne Bootstrap. Sie hat genau diese eine Aufgabe. Die Sonderfälle bleiben davon unberührt und gewinnen weiterhin, weil sie gleich spezifisch sind und WEITER UNTEN stehen: .mk-dunkel (Zeile ~531) und .mk-footer (~747) schalten auf Weiß. Wer eine der beiden Regeln nach oben verschiebt, macht den Fokusring auf blauem Grund unsichtbar (1,19:1). .mk-skip braucht keinen eigenen Selektor mehr: Die Sprungmarke ist das erste Kind des und damit ebenfalls Nachfahre von .mk-host. */ .mk-host :focus-visible { outline: 3px solid var(--mk-akz-dark); outline-offset: 2px; } /* Hier stand bis zum 2026-08-10 eine Regel „.js-mail:empty::after { content: attr(data-user) '@' attr(data-domain) }". Sie füllte den leeren der mitbenutzten Rechtstext-Views, damit im Impressum dieses Hosts hinter „E-Mail:" auch ohne JavaScript etwas stand. ENTFERNT, weil sie am falschen Ende ansetzte: Der leere war das Problem, und er stand in resources/views/impressum.blade.php und datenschutz.blade.php — also auf JEDEM Mandanten-Host mit, wo weder diese Datei noch das Signup-Layout je geladen werden. Die Adresse steht jetzt als echter mailto-Link in den beiden Views selbst; ein erzeugter ::after-Inhalt, den man in den meisten Browsern nicht einmal markieren kann, ist als Pflichtangabe ohnehin der schlechtere Träger. Klasse und Regel wären ab hier tote Selektoren. */ .mk-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .mk-section { /* --mk-abstand: 48 px, ab 992 px 72 px (bis zum 2026-10-18 64/96 px, Begründung in :root). */ padding: var(--mk-abstand) 0; /* Klebrige Kopfleiste ist 64 px hoch — ohne das verschwindet die Zielüberschrift beim Ankersprung darunter. */ scroll-margin-top: 80px; } /* Für Ankerziele, die selbst keine .mk-section sind — etwa die Klammer um die fünf Funktionsblöcke. Bekäme sie .mk-section, addierte sich deren Polsterung zu der der Blöcke; ohne scroll-margin-top verschwände die Überschrift unter der Kopfleiste. */ .mk-anker { scroll-margin-top: 80px; } .mk-kicker { font-size: 14px; font-weight: 600; letter-spacing: .08em; /* Versalien BLEIBEN. Der Kicker ist eine Rubrik über der Überschrift, keine Aussage — die Form trägt diese Bedeutung, und 14 px gesperrte Großbuchstaben sind nur dann ein Lesbarkeitsproblem, wenn zusätzlich der Kontrast knapp ist. Genau das war der Fall (5,22:1); jetzt sind es 7,16:1. */ text-transform: uppercase; color: var(--mk-akz-dark); /* 7,16:1 auf --mk-n25 */ margin-bottom: 12px; } /* Der Kicker IN der Überschrift (seit dem 2026-10-17). Die Überschriften sind seither kurz („Ohne Konto, ohne App."), und das Thema, unter dem jemand sucht, steht nur noch im Kicker. Als

davor zählte er für keine Suchmaschine zur Überschrift — WerbeseiteGliederungTest verlangt den Begriff aber IN h1/h2. Deshalb ist er ein im Heading und sieht hier genau so aus wie der alte Absatz: Block, eigene Schrift statt der Überschriftenschrift, eigene Zeilenhöhe statt der 1.25 des Headings. 6 px statt der 12 px des alten Absatzes, seit dem 2026-10-18 (Wunsch des Mitinhabers: „Abstände zwischen Kicker und Überschrift prüfen"). Die 12 px wirkten zusammen mit der Zeilenhöhe des Headings und dem Raum über den Großbuchstaben: Sichtbar standen zwischen Kicker und Überschrift 24–27 px (1280 px) bzw. 21–23 px (390 px), gemessen aus den Schriftmetriken — der Kicker sah aus wie eine eigene Zeile über einem eigenen Block. Mit 6 px und der Zeilenhöhe 1.1 im Hero sind es rund 14–19 px, in Hero, Block und dunklem Abschnitt gleich. */ h1 > .mk-kicker, h2 > .mk-kicker { display: block; font-family: var(--mk-font-body); line-height: 1.5; margin-bottom: 6px; } /* ── Knöpfe ──────────────────────────────────────────────────────────────── */ /* Der 1-px-Rahmen sitzt auch bei transparenten Varianten, sonst springt das Layout um 2 px, sobald ein Knopf die Variante wechselt. Mindesthöhe 44 px: Tap-Ziel-Grenze des Projekts. 12 px Polster + 16 px Text ergäben 46 px, aber sobald jemand die Schrift kleiner setzt, fällt es darunter. */ .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 24px; border-radius: var(--mk-r-md); font-family: var(--mk-font-body); font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .mk-btn-lg { padding: 14px 32px; font-size: 18px; min-height: 52px; } /* Weiß auf Markenblau: 6,44:1 */ .mk-btn-primary { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; } /* Die Marken-Geste Blau → Akzentfläche. Die Schrift MUSS dabei auf --mk-blue-dark wechseln: #0A58CA auf #8ECCC5 sind nur 3,55:1, #084298 dagegen 5,17:1. Mit dem helleren Blau wäre der Knopf im Hover schlechter lesbar als im Ruhezustand. */ .mk-btn-primary:hover { background: var(--mk-akz); border-color: var(--mk-akz); color: var(--mk-blue-dark); } .mk-btn-primary:active { background: var(--mk-akz-dark); border-color: var(--mk-akz-dark); color: #fff; /* 7,41:1 */ } .mk-btn-outline { background: transparent; border-color: var(--mk-blue); color: var(--mk-blue); /* 6,21:1 auf --mk-n25 */ } /* Die ERP-Vorlage setzt hier türkise Schrift auf Blau — das wären 3,55:1. Weiß auf Blau sind 6,44:1 und entsprechen dem Ruhezustand von .mk-btn-primary. */ .mk-btn-outline:hover { background: var(--mk-blue); color: #fff; } /* Heller Knopf für die dunkelblauen Sektionen: dort wäre .mk-btn-primary (blau auf blau) unsichtbar. #084298 auf #8ECCC5 sind 5,17:1. */ .mk-btn-akz { background: var(--mk-akz); border-color: var(--mk-akz); color: var(--mk-blue-dark); } .mk-btn-akz:hover { background: #fff; border-color: #fff; color: var(--mk-blue-dark); /* 9,36:1 */ } /* ── Kopfleiste ──────────────────────────────────────────────────────────── */ .mk-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--mk-n100); } .mk-header .mk-container { display: flex; align-items: center; gap: 24px; min-height: 64px; } /* inline-flex mit min-height statt schlichtem Text: Als Link zur Startseite ist die Wortmarke ein Tap-Ziel, und mit reiner Zeilenhöhe kam sie auf 34 px. Gemessen im Browser an allen fünf Referenzbreiten. */ .mk-brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mk-font-heading); font-weight: 700; font-size: 22px; color: var(--mk-blue); text-decoration: none; white-space: nowrap; } .mk-nav { display: none; } .mk-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-blue); text-decoration: none; font-weight: 600; font-size: 16px; padding: 8px 12px; border-radius: var(--mk-r-sm); transition: color .2s ease; } .mk-nav a:hover { color: var(--mk-akz-dark); } /* 7,41:1 auf Weiß */ /* Der Abschnitt, in dem man gerade steht — gesetzt vom Beobachter im Layout über aria-current="true". Der Selektor hängt am ARIA-Attribut und nicht an einer eigenen Klasse: So kann die Anzeige nicht optisch dastehen, ohne angesagt zu werden, und umgekehrt. Eine Klasse daneben wären zwei Wahrheiten über denselben Zustand, und die zweite vergisst irgendwann jemand. Unterstrich statt Farbwechsel: Die Leiste ist ohnehin durchgehend blau, ein zweiter Blauton wäre dort kein Unterschied, den jemand bemerkt. Der Balken sitzt auf dem 8-px-Polster des Links und braucht deshalb kein zusätzliches. */ .mk-nav a[aria-current="true"] { box-shadow: inset 0 -3px 0 0 var(--mk-akz-dark); } .mk-mobile-nav a[aria-current="true"] { color: var(--mk-akz-dark); /* 7,41:1 */ } .mk-header-cta { display: none; margin-left: auto; } /* 44×44 als Tap-Ziel — die drei Striche allein wären 22×16. */ .mk-burger { margin-left: auto; background: none; border: 1px solid var(--mk-n200); border-radius: var(--mk-r-md); min-width: 44px; min-height: 44px; padding: 10px 11px; cursor: pointer; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; } .mk-burger span { display: block; width: 20px; height: 2px; background: var(--mk-blue); border-radius: 1px; } /* Liegt außerhalb von .mk-container: klappt über die volle Breite unter der Leiste auf. */ .mk-mobile-nav { display: none; background: #fff; border-bottom: 1px solid var(--mk-n100); padding: 8px 24px 20px; } .mk-mobile-nav.mk-open { display: block; } .mk-mobile-nav a { display: block; padding: 12px 4px; color: var(--mk-blue); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--mk-n100); } .mk-mobile-nav a:hover { color: var(--mk-akz-dark); } /* Der Knopf im Mobilmenü erbt sonst die drei Regeln darüber und stünde als blauer Text mit Trennlinie links im Menü statt als Knopf. */ .mk-mobile-nav .mk-btn { margin-top: 16px; width: 100%; border-bottom: none; } .mk-mobile-nav a.mk-btn-primary { color: #fff; } .mk-mobile-nav a.mk-btn-primary:hover { color: var(--mk-blue-dark); } @media (min-width: 992px) { .mk-nav { display: flex; gap: 4px; margin: 0 auto; } .mk-header-cta { display: inline-flex; } /* !important, weil .mk-open sonst über den Umbruchpunkt hinweg offen bliebe, wenn jemand das Fenster mit aufgeklapptem Menü aufzieht. */ .mk-burger, .mk-mobile-nav { display: none !important; } } /* ── Hero ────────────────────────────────────────────────────────────────── */ .mk-hero { background: var(--mk-n25); padding: var(--mk-abstand) 0; } .mk-hero .mk-container { display: grid; gap: 40px; align-items: center; } /* 60/40 und das h1 bis 52 px, seit dem 2026-10-18 (Wunsch des Mitinhabers: „Textspalte im Hero auf etwa 60 Prozent, alternativ die H1 kleiner"). Es braucht BEIDES, gemessen an der Live-Seite (Chromium und WebKit): 45/55, bis 56 px (vorher) 1280 px: Textspalte 500 px, „Zertifikat automatisch." braucht 674 px → jeder Satz bricht, das h1 steht auf VIER Zeilen, der Knopf „Kostenlos testen" endet bei 705–745 px — auf einem 1366×768-Laptop (rund 650 px sichtbar) unter dem Falz. nur 60/40, bis 56 px 667 px Spalte gegen 674 px Satz: drei Zeilen. 55/45, bis 48 px zwei Zeilen erst ab 1280 px, drei bei 992 und 1024. 60/40, bis 52 px zwei Zeilen (ein Satz je Zeile, wie der
es meint) ab 992 px; Knopf-Unterkante 476–489 px. Der Screenshot wird dabei schmaler (445 statt 612 px bei 1280). Er belegt, dass es das Produkt gibt; gelesen wird er im Hero nicht. Unter 992 px ändert sich nichts (34 px). */ @media (min-width: 992px) { .mk-hero .mk-container { grid-template-columns: 60fr 40fr; } } .mk-hero h1 { font-size: clamp(34px, 4.4vw, 52px); /* 1.1 statt 1.25: Bei 52 px sind das 57 statt 65 px je Zeile — zwei Sätze, die als Block gelesen werden sollen, nicht als zwei Absätze. */ line-height: 1.1; font-weight: 700; margin-bottom: 16px; /* Keine Silbentrennung im Hero, seit dem 2026-10-17. Die Regel oben (hyphens: auto für alle Überschriften) war für „Teilnehmerlisten," gedacht, ein Wort, das bei 34 px nicht in 272 px passte. Die Überschrift heißt seither „Teilnehmer erfassen. Zertifikat automatisch.", das längste Wort passt auf jeder Breite, und Chromium trennte trotzdem („Teilnehmer er- / fassen."). Der Umbruch steht jetzt fest im Markup (
in marketing/landing.blade.php). overflow-wrap: anywhere bleibt als Netz für einen künftigen Wortlaut mit einem längeren Wort. */ -webkit-hyphens: manual; hyphens: manual; } .mk-hero-sub { font-size: 18px; color: var(--mk-n800); margin-bottom: 24px; } .mk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } /* 15 px, nicht 14: Hier stehen die Testbedingungen („14 Tage oder 3 Kurse — ohne Kreditkarte, ohne automatische Verlängerung"). Das ist der kaufentscheidende Satz des Hero und war der SCHWÄCHSTE Text der ganzen Seite (14 px auf 5,61:1) — er sah aus wie ein Kleingedrucktes, das man überliest. Jetzt 15 px auf 7,86:1. */ .mk-microcopy { font-size: 15px; color: var(--mk-n600); } /* 7,86:1 auf --mk-n25 */ /* overflow:hidden lässt das rechteckige Bild die Rundung annehmen, ohne dass das Bild selbst einen Radius braucht. */ .mk-browser { background: #fff; border: 1px solid var(--mk-n200); border-radius: var(--mk-r-lg); box-shadow: var(--mk-shadow-lg); overflow: hidden; } .mk-browser-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--mk-n50); border-bottom: 1px solid var(--mk-n100); } .mk-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-n200); } /* Steht der Hero ohne Screenshot da, ersetzt dieser Kasten das Bild — ohne ihn klappt das zweispaltige Raster auf eine halbleere Seite zusammen. */ .mk-hero-claim { background: #fff; border: 1px solid var(--mk-n200); border-radius: var(--mk-r-lg); box-shadow: var(--mk-shadow-md); padding: 32px; } .mk-hero-claim ul { list-style: none; margin: 0; padding: 0; } .mk-hero-claim li { position: relative; padding-left: 34px; margin-bottom: 14px; font-size: 16px; } .mk-hero-claim li:last-child { margin-bottom: 0; } .mk-hero-claim li svg { position: absolute; left: 0; top: 3px; color: var(--mk-akz-dark); } /* ── Vertrauensleiste ────────────────────────────────────────────────────── */ .mk-trustbar { background: #fff; padding: 32px 0; border-top: 1px solid var(--mk-n100); border-bottom: 1px solid var(--mk-n100); } /* Das Raster sitzt an der

    , nicht mehr am .mk-container: Die Punkte waren einzelne

    und sind seit dem 2026-09-06 eine Liste. Eine Vorlesefunktion hörte vorher zusammenhanglose Absätze statt „Liste mit 3 Einträgen" — gleichrangige Aussagen sind genau das, wofür es

      gibt. Am Aussehen ändert sich nichts; list-style und die Browser-Einrückung müssen dafür weg. */ .mk-trustbar-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px 24px; } /* Eine Spalte, dann drei — die Zweierstufe bei 576 px ist am selben Tag entfallen wie der vierte Punkt (Begründung in landing.blade.php an der Vertrauensleiste). Bei drei Einträgen setzt ein Zweierraster den letzten allein in eine zweite Reihe; genau unter dem mittigen Hero liest sich dieses Loch rechts als abgeschnittene Liste. Der Umbruch liegt bei 768 und nicht bei 992 px, gemessen (Chromium): Bei 768 px sind die Spalten 224 px breit und die Punkte 70 px hoch — dieselbe Dichte, mit der die Leiste als Viererraster ohnehin schon ab 992 px stand (218 px Spalten, 70 px Höhe). Zwischen 700 und 767 px wäre einspaltig sogar der höhere Block (101 statt 70 px). Seitenüberlauf bleibt auf jeder Breite von 320 bis 1440 px bei 0. */ @media (min-width: 768px) { .mk-trustbar-liste { grid-template-columns: repeat(3, 1fr); } } .mk-trust-item { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--mk-n600); /* 8,14:1 auf Weiß */ } /* Ohne flex:0 0 auto staucht Flexbox das Icon, sobald der Text zweizeilig wird. */ .mk-trust-item svg { flex: 0 0 auto; color: var(--mk-akz-dark); } /* ── Funktionsblöcke ─────────────────────────────────────────────────────── */ .mk-feature { padding: var(--mk-abstand-block) 0; } /* 48/56 px, bis 2026-10-18 64 px */ .mk-feature-hell { background: #fff; } .mk-feature-grau { background: var(--mk-n25); } .mk-feature .mk-container { display: grid; gap: 40px; align-items: center; } /* 1fr 1fr BLEIBT, auch nachdem der Hero am 2026-10-18 auf 60/40 gegangen ist (geprüft auf Wunsch des Mitinhabers): Die Textspalte misst bei 1280 px 556 px, das sind rund 75 Zeichen je Zeile und damit schon die Obergrenze bequemen Lesens. Bei 60 % wären es rund 90 Zeichen, die Merkmallisten läsen sich schlechter, und der Screenshot, der hier die Funktion zeigt, würde kleiner. Kleiner geworden ist stattdessen das h2 (unten). */ @media (min-width: 992px) { .mk-feature .mk-container { grid-template-columns: 1fr 1fr; } /* Die Umkehrung greift erst ab 992 px. Darunter steht der Text immer vor dem Bild — die DOM-Reihenfolge ist die Lesereihenfolge und wird mobil nie verdreht. */ .mk-feature-bild-links .mk-feature-text { order: 2; } .mk-feature-bild-links .mk-feature-bild { order: 1; } } /* Ohne Screenshot bleibt es bei einer Spalte — sonst stünde ab 992 px eine leere Spalte neben dem Text. Die Breitenbegrenzung ist dabei nicht Kosmetik: Über die vollen 1200 px gelesen, verliert das Auge beim Zeilenwechsel die Zeile. 740 statt 860 px (2026-09-06): 860 waren zwar besser als 1200, aber immer noch rund 100 Zeichen je Zeile. Bequem liest sich 60–75, tragbar ist bis ~85 — dort liegen 740 px bei 16 px Schrift. Die Regel greift nur im bildlosen Zustand und ist mit den heute committeten zwölf Screenshots gerade wirkungslos; sie wird trotzdem mitgezogen, weil sie genau dann gilt, wenn jemand die Bilder entfernt. */ .mk-feature-einspaltig .mk-container { max-width: 740px; } @media (min-width: 992px) { .mk-feature-einspaltig .mk-container { grid-template-columns: 1fr; } } /* Bis 32 statt 36 px seit dem 2026-10-18 — passend zum Hero-h1, das von 56 auf 52 px ging. */ .mk-feature h2 { font-size: clamp(26px, 2.8vw, 32px); } .mk-checklist { list-style: none; margin: 24px 0 0; padding: 0; } /* Das Häkchen hängt absolut in der Einrückung, damit mehrzeilige Punkte am Text ausgerichtet bleiben statt unter das Icon zu laufen. */ .mk-checklist li { position: relative; padding: 0 0 0 34px; margin-bottom: 12px; } .mk-checklist li svg { position: absolute; left: 0; top: 3px; color: var(--mk-akz-dark); } .mk-shot-card { background: #fff; border: 1px solid var(--mk-n200); border-radius: var(--mk-r-lg); box-shadow: var(--mk-shadow-md); overflow: hidden; } /* ── Dunkle Sektion (Zertifikate, Schluss-CTA) ───────────────────────────── */ .mk-dunkel { background: var(--mk-blue); color: #fff; text-align: center; } .mk-dunkel h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); } /* Auf Blau kippt der Kicker vom dunklen auf den hellen Akzent: --mk-akz-dark wäre hier 1,15:1. --mk-akz-hell misst 5,16:1. */ .mk-dunkel .mk-kicker { color: var(--mk-akz-hell); } /* Die 680 px sind seit dem 2026-09-06 der Deckel des ABSATZES, nicht mehr der des Kastens — sie sind ein Zeilenmaß für Fließtext, und eine Überschrift ist keiner. Was der Absatz-Deckel am Kasten anrichtete, gemessen (Chromium, Montserrat 700 geladen): Die Überschrift wächst über clamp(26px, 3.4vw, 40px) mit dem Fenster, der Kasten blieb bei 680. „Der nächste Kurs kommt bestimmt." braucht bei 40 px 751 px, „Jedes Zertifikat lässt sich nachprüfen." 796 px. Beide brachen deshalb ausgerechnet dort um, wo Platz im Überfluss ist: ab 1053 px Fensterbreite die eine, ab 993 px die andere. Auf einem 1024-px-Laptop stand die Zeile ganz, auf einem 1440-px-Schirm zweizeilig — die Seite wurde beim Größerwerden des Fensters schlechter. 880 statt 680 und nicht ganz offen: .mk-container gäbe 1152 px her, das ist für einen mittigen Schlusskasten zu viel Fläche. 880 trägt beide Überschriften einzeilig (796 px der längeren, 84 px Rest) und hält den Block trotzdem als Spalte zusammen. Kicker und Knopf tragen die Öffnung mit: Beide stehen über das text-align:center von .mk-dunkel mittig, unabhängig von der Kastenbreite, und .mk-btn ist inline-flex — ein breiterer Kasten dehnt ihn nicht. Nachgemessen bleibt der Seitenüberlauf auf jeder Breite von 320 bis 1600 px bei 0. Unter 536 px Fensterbreite bricht die Überschrift weiterhin, und dort zu Recht: Bei 560 px Fenster stehen 512 px für 488 px Bedarf, bei 520 px nur noch 472 px. */ .mk-dunkel-inner { max-width: 880px; margin: 0 auto; } /* Solides Weiß statt rgba(255,255,255,.85): 6,44:1 statt 5,10:1. text-align:left, obwohl .mk-dunkel zentriert: Ein zentrierter FÜNFZEILER hat keine feste linke Kante — das Auge muss nach jedem Zeilenwechsel den Zeilenanfang neu suchen. Der Block bleibt über das margin:auto von .mk-dunkel-inner mittig stehen, die Sektion sieht also weiterhin zentriert aus; nur die Zeilen bekommen eine Kante. Überschrift, Kicker und Knopf bleiben ausdrücklich zentriert — dort ist es eine Zeile, und die Mitte trägt dann die Bedeutung „das gilt für den ganzen Abschnitt". */ .mk-dunkel-lead { font-size: 18px; color: #fff; /* 6,44:1 auf --mk-blue */ text-align: left; /* Das Zeilenmaß, das bis zum 2026-09-06 am Kasten hing (Begründung dort): Bei 18 px Schrift standen in einem 880-px-Kasten rund 103 Zeichen in einer Zeile, hier sind es rund 80. Der längere der Absätze läuft über fünf Zeilen — dort kostet jede zu lange Zeile einen gesuchten Zeilenanfang. margin-inline:auto, weil der Absatz damit schmaler ist als sein Kasten und sonst linksbündig darin klebte; die gemessene Breite ist auf jedem Fenster ab 768 px unverändert 680 px. */ max-width: 680px; margin-inline: auto; } /* Weiß, nicht --mk-akz-dark: der Fokusring muss auch hier 3:1 erreichen (6,44:1). */ .mk-dunkel :focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Zwei Karten seit dem 2026-10-17 (vorher drei, die dritte „Vollständig oder gar nicht" ist entfallen). In drei Spalten blieb rechts ein leeres Feld stehen. max-width hält die zwei mittig unter dem Absatz darüber zusammen — dieselbe Breite wie .mk-dunkel-inner. */ .mk-karten { display: grid; gap: 16px; margin: 40px auto; text-align: left; max-width: 880px; } /* Als einzige Sektion bricht sie auf 768 px um, nicht auf 992: zwei Karten mit zwei Sätzen stehen dort schon nebeneinander. */ @media (min-width: 768px) { .mk-karten { grid-template-columns: repeat(2, 1fr); } } /* Der Kartengrund ist DUNKLER als die Sektion, nicht heller — die Umkehrung der ursprünglichen Idee, und sie stimmt in beide Richtungen. Vorzustand: rgba(255,255,255,.06) auf --mk-blue, ergibt #1962CD. Das hellte den Grund auf und senkte damit JEDEN Textkontrast in der Karte: Die weiße Kartenüberschrift maß 5,72:1, dieselbe Farbe zwei Zentimeter daneben AUSSERHALB der Karte 6,44:1. Die Karte machte ihren eigenen Inhalt schlechter lesbar als die Fläche, auf der sie liegt. Und weil jede Erhöhung der Deckkraft den Grund weiter aufhellt, führte der naheliegende Weg („Karte deutlicher machen") noch tiefer hinein — bei .12 wären es 5,07:1 gewesen. --mk-blue-dark statt eines eigenen Hex: Der Ton steht schon in :root und wird von Knöpfen und Fußzeile benutzt. Die Zusage des alten Kommentars („die Karten bleiben stimmig, falls das Blau je wechselt") trägt damit weiter — ein Token ist kein fremder Wert. Gemessen, alt → neu: Kartenüberschrift weiß 5,72 → 9,36:1 Kartentext 5,09 → 9,36:1 Rahmen gegen den Kartengrund 1,48 → 3,13:1 Kartenfläche gegen die Sektion 1,13 → 1,45:1 Der Rahmen bleibt transluzent (gleiche Begründung), aber bei .45 statt .25: Weil die Karte sich farblich nur wenig von der Sektion abhebt, ist er es, der die Karte als Form definiert — bei 1,48:1 tat er das nicht. */ .mk-karte { background: var(--mk-blue-dark); border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--mk-r-lg); padding: 24px; } .mk-karte h3 { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 8px; } .mk-karte p { color: #fff; margin: 0; font-size: 15px; } /* 9,36:1 */ /* ── Weitere Funktionen ──────────────────────────────────────────────────── */ .mk-more { background: #fff; } .mk-zentriert { text-align: center; font-size: clamp(26px, 3vw, 36px); } /* Linksbündig in einem mittig stehenden Block — gleiche Begründung wie bei .mk-dunkel-lead: Der Absatz läuft über drei Zeilen, und ein zentrierter Mehrzeiler hat keine feste linke Kante. Die zentrierte Überschrift darüber bleibt zentriert. */ .mk-zentriert-sub { text-align: left; color: var(--mk-n600); max-width: 660px; margin: 0 auto 48px; } /* Zwei Spalten, auch auf breiten Schirmen — seit dem 2026-10-17 trägt das Raster vier Karten statt sechs. In drei Spalten stand die vierte allein in einer eigenen Reihe und sah aus wie vergessen. Die Höchstbreite hält die zwei Karten zusammen unter der zentrierten Überschrift, statt sie auf 1200 px auseinanderzuziehen. Wer wieder sechs Karten einsetzt, nimmt die dritte Spalte zurück (bis dahin stand hier ab 992 px repeat(3, 1fr)). */ .mk-more-grid { display: grid; gap: 16px; max-width: 900px; margin: 48px auto 0; } @media (min-width: 576px) { .mk-more-grid { grid-template-columns: repeat(2, 1fr); } } .mk-more-card { background: #fff; border: 1px solid var(--mk-n200); border-radius: var(--mk-r-lg); box-shadow: var(--mk-shadow-sm); padding: 24px; transition: border-color .15s ease; } /* NUR die Rahmenfarbe. Hier standen zusätzlich „box-shadow: var(--mk-shadow-md)" und „transform: translateY(-1px)" — und das waren genau die beiden Signale, die in jeder Oberfläche „Knopf" bedeuten: Die Karte hob sich an und warf einen größeren Schatten, als ließe sie sich drücken. Diese neun Karten sind aber
      und haben kein Ziel. Wer klickt, bekommt keine Rückmeldung — und zweifelt danach an der Seite, nicht an der Karte. Ein Hover-Effekt ist ein Versprechen; wo es nichts einzulösen gibt, darf er nicht gegeben werden. Der Rahmenwechsel bleibt: Er liest sich als „unter dem Zeiger", nicht als „drückbar", und hält die Karten auf einem Raster mit neun Kacheln unterscheidbar. Wer die Karten je verlinkt, darf Hub und Schatten zurückholen — dann stimmen sie. */ .mk-more-card:hover { border-color: var(--mk-akz); } /* Das Akzentpaar in seiner sauberen Form: helle Fläche, dunkle Ikone (6,70:1). */ .mk-more-card .mk-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--mk-r-md); background: var(--mk-akz-subtle); color: var(--mk-akz-dark); margin-bottom: 12px; } .mk-more-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; } /* 15 px: In diesen neun Absätzen steht die halbe Funktionsliste des Produkts — das ist Lesetext, keine Bildunterschrift, und 14 px war dafür zu klein. */ .mk-more-card p { font-size: 15px; color: var(--mk-n600); margin: 0; } /* 8,14:1 */ /* ── Galerie ─────────────────────────────────────────────────────────────── */ .mk-gallery { background: var(--mk-n25); } .mk-gallery-grid { display: grid; gap: 20px; margin-top: 48px; } @media (min-width: 576px) { .mk-gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .mk-gallery-grid { grid-template-columns: repeat(3, 1fr); } } /* margin:0 ist Pflicht — der Browser gibt
      sonst 40 px Seitenrand. */ .mk-gallery figure { margin: 0; background: #fff; border: 1px solid var(--mk-n200); border-radius: var(--mk-r-lg); box-shadow: var(--mk-shadow-sm); overflow: hidden; } .mk-gallery figcaption { font-size: 15px; color: var(--mk-n600); padding: 12px 16px; } /* 8,14:1 */ /* Der Knopf um ein Bildschirmfoto — er öffnet es groß im . Seit dem 2026-10-26 an JEDEM Screenshot der Seite (Hero, Funktionsblöcke, Galerie; marketing/vergroesserbar.blade.php), bis dahin nur in der Galerie und unter dem Namen .mk-gallery-btn. Ein Knopf und kein Link: Das Ziel ist kein Dokument, sondern ein Zustand DIESER Seite. Ein Link auf die PNG-Datei nähme auf dem Handy die Zurück-Taste. Er sieht aus wie das Bild allein — deshalb display:block ohne Rahmen und Polster. „cursor: pointer" steht ABSICHTLICH NICHT hier, sondern erst unter .mk-js: Ohne JavaScript tut der Knopf nichts, und ein Zeiger, der Klickbarkeit anzeigt, wo keine ist, war schon bei den .mk-more-card der Fehler. Die Klasse setzt das Skript im Layout auf , sobald die Vergrößerung wirklich verdrahtet ist. */ .mk-bild-btn { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; } .mk-js .mk-bild-btn { cursor: zoom-in; } /* Der Fokusring liegt hier INNEN. Alle drei Rahmen um den Knopf (.mk-browser, .mk-shot-card, .mk-gallery figure) tragen overflow:hidden für die runden Ecken, und der Ring aus .mk-host :focus-visible sitzt 2 px AUSSERHALB des Knopfs. Gemessen am 2026-10-26 (Chromium, 1440 px, Tastaturfokus): am Hero-Bild war vom Ring nichts zu sehen, in der Galerie nur der untere Strich über der Bildunterschrift — wer mit der Tastatur durch die Seite ging, verlor den Fokus an jedem Bild. -3 px bei 3 px Breite legt den Ring genau auf den Bildrand. */ .mk-host .mk-bild-btn:focus-visible { outline-offset: -3px; } /* Ein Bild mit Platzhalter (marketing/bild.blade.php), seit dem 2026-10-26. Der Platzhalter — 32 px als data:-URL im style-Attribut — füllt sofort die Fläche, die width/height am reservieren, und das Bild blendet erst ein, wenn es vollständig ist. Vorher baute sich jedes Bild sichtbar von oben nach unten auf, und mit loading="lazy" genau dann, wenn man hinsah. 100 % 100 % und nicht cover: Der Platzhalter hat bis auf eine gerundete Pixelzeile das Seitenverhältnis des Bildes. cover schnitte diese Zeile ab, 100 % 100 % verzerrt sie unsichtbar. Ausgeblendet wird nur unter .mk-blende — die Klasse setzt das Skript im Kopf des Layouts, zusammen mit dem Lauscher, der .mk-da vergibt. Ohne Skript keine Klasse, und das Bild bleibt sichtbar. */ .mk-bild { display: block; background-size: 100% 100%; background-repeat: no-repeat; } .mk-blende .mk-bild img { transition: opacity .15s ease-out; } .mk-blende .mk-bild img:not(.mk-da) { opacity: 0; } /* Das Hero-Bild erscheint ohne Übergang: Es steht im ersten Bildschirm und ist das Erste, was man ansieht — dort wirkt ein Einblenden wie Warten. Weiter unten ist es der ruhige Wechsel vom Platzhalter zum Bild. Unsichtbar bis zum Laden ist es trotzdem. */ .mk-blende .mk-hero .mk-bild img { transition: none; } @media (prefers-reduced-motion: reduce) { .mk-blende .mk-bild img { transition: none; } } /* Der Rahmen des kommt vom Browser — hier wird er entfernt und durch die Kartenform der Seite ersetzt. ::backdrop ist die Fläche dahinter; ohne eigene Regel ist sie in den meisten Browsern fast durchsichtig, und der Screenshot stünde dann vor der weiterlaufenden Seite statt vor einem ruhigen Grund. */ .mk-lightbox { max-width: min(1200px, 92vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--mk-r-lg); background: #fff; box-shadow: var(--mk-shadow-lg); overflow: hidden; } .mk-lightbox::backdrop { background: rgba(8, 66, 152, .72); } .mk-lightbox img { max-height: calc(92vh - 64px); width: auto; margin: 0 auto; } .mk-lightbox-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 16px; border-top: 1px solid var(--mk-n100); } .mk-lightbox-titel { font-size: 15px; color: var(--mk-n600); } /* 8,14:1 */ /* 44 px Tap-Ziel wie jeder andere Knopf der Seite — Escape schließt zusätzlich, aber auf dem Handy gibt es keine Escape-Taste. */ .mk-lightbox-zu { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 1px solid var(--mk-n200); border-radius: var(--mk-r-md); background: #fff; color: var(--mk-blue-dark); /* 9,36:1 */ font-family: var(--mk-font-body); font-size: 15px; font-weight: 600; padding: 8px 16px; cursor: pointer; } .mk-lightbox-zu:hover { background: var(--mk-n50); } /* ── Preise ──────────────────────────────────────────────────────────────── */ /* Nur die Sektion der Startseite. Die Tafel selbst (Karten, Fußnote, Erklärkästen) steht seit dem 2026-10-18 in public/css/preistafel.css — dieselbe Datei lädt das Signup, das bis dahin eine eigene Bootstrap-Fassung der Tafel hatte. Markup: resources/views/marketing/preistafel.blade.php. */ .mk-pricing { background: #fff; } /* ── Fehlerseite ─────────────────────────────────────────────────────────── */ /* Schmal und mittig statt über die vollen 1200 px: Auf einer Seite mit vier Zeilen Text wirkt die volle Containerbreite wie ein Layoutfehler. */ .mk-fehler { max-width: 640px; margin: 0 auto; text-align: center; } .mk-fehler h1 { font-size: clamp(28px, 4vw, 40px); } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .mk-faq { background: var(--mk-n25); } .mk-faq-inner { max-width: 720px; margin: 48px auto 0; } /* KEIN Polster mehr an
      , es sitzt jetzt an summary und am Absatz. Grund: Nur so reicht die Hover-Fläche der Frage über die volle Kartenbreite. Mit Polster am Elternteil hörte sie 20 px vor dem Rand auf, und eine Trefferfläche, die vor der sichtbaren Kante endet, fühlt sich kaputt an. */ .mk-faq details { background: #fff; border: 1px solid var(--mk-n200); border-radius: var(--mk-r-lg); box-shadow: var(--mk-shadow-sm); margin-bottom: 12px; transition: border-color .15s ease; } /* Die offene Frage ist erkennbar — vorher sahen offen und geschlossen fast gleich aus, und bei neun Kästen untereinander verliert man, welchen man aufgeklappt hat. */ .mk-faq details[open] { border-color: var(--mk-akz-dark); } /*
      / bleibt nativ: Tastaturbedienung und Zustandsansage bringt der Browser mit, ein nachgebautes Akkordeon müsste beides von Hand liefern. Deshalb steht zum FAQ weiterhin keine Zeile JavaScript. Das native Dreieck weicht trotzdem einem eigenen Chevron. Es saß wegen „list-style-position: outside" im Polster der Karte statt in der Zeile, war winzig, und in jedem Browser anders. Ein Zeichen, an dem die einzige Auskunft „hier lässt sich etwas öffnen" hängt, darf nicht dem Zufall überlassen bleiben. ZWEI Angaben zum Abschalten, beide nötig: „list-style: none" wirkt in Chromium und Firefox, ältere WebKit-Fassungen brauchen ::-webkit-details-marker. ABSOLUT positioniert und NICHT per display:flex. Flexbox erzeugt für den Fragetext ein anonymes Flex-Element, und an dem greift die Regel weiter oben (Z. ~194 „overflow-wrap: anywhere") nicht mehr — genau die, die den gemessenen Überlauf von „Auftragsverarbeitungsvertrag?" bei 320 px Fensterbreite verhindert. Mit absoluter Positionierung bleibt summary ein Blockelement, die Regel greift weiter, und das Markup im Blade bleibt unangetastet. */ .mk-faq summary { position: relative; font-family: var(--mk-font-heading); font-weight: 600; color: var(--mk-blue-dark); /* 9,36:1 auf Weiß */ cursor: pointer; padding: 16px 52px 16px 20px; border-radius: var(--mk-r-lg); list-style: none; transition: background-color .15s ease; } .mk-faq summary::-webkit-details-marker { display: none; } .mk-faq summary:hover { background: var(--mk-n50); } /* Die Frage IST eine Überschrift, sieht aber aus wie vorher. Ohne diese Regel brächte das

      im (seit 2026-09-12, Begründung dort) die Schriftgröße und die Ränder der Seitenüberschriften mit: Die Klappe wäre plötzlich doppelt so hoch, und die Frage stünde nicht mehr neben dem Chevron, sondern darüber. `font: inherit` nimmt Familie, Größe, Gewicht und Zeilenhöhe vom — die Stelle, an der sie schon definiert sind, gleich darüber. `display: inline` verhindert, dass das h3 einen eigenen Block im gepolsterten aufspannt. */ .mk-faq summary h3 { font: inherit; color: inherit; margin: 0; display: inline; } /* Das Chevron aus zwei Rändern eines gedrehten Quadrats — kein SVG und keine Daten-URI, weil es sonst als Bild eine eigene Farbe bräuchte und nicht mit currentColor mitliefe. 2 px Strichstärke wie die Ikonen der Seite. */ .mk-faq summary::after { content: ""; position: absolute; top: 50%; right: 22px; width: 9px; height: 9px; border-right: 2px solid var(--mk-akz-dark); /* 7,41:1 auf Weiß */ border-bottom: 2px solid var(--mk-akz-dark); transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; } /* Zeigt im offenen Zustand nach oben. -20% statt -70%, weil der Drehpunkt des Quadrats beim Kippen wandert — sonst sitzt der Haken zu hoch in der Zeile. */ .mk-faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); } .mk-faq details > p { color: var(--mk-n800); padding: 0 20px 16px; margin: 0; } /* Verweise auf die Ratgeber in zwei Antworten (seit dem 2026-10-18). Ohne Regel nähme der Link das Browserblau — dieselbe Falle wie in der Fusszeile, Begründung bei .mk-footer-nav a. Unterstrichen wie in .mk-prosa: Farbe allein trägt keinen Link. */ .mk-faq details > p a { color: var(--mk-blue-dark); /* 9,04:1 auf Weiß */ text-underline-offset: 2px; } .mk-faq details > p a:hover { text-decoration-thickness: 2px; } /* ── Fußleiste ───────────────────────────────────────────────────────────── */ /* --mk-blue-dark, nicht --mk-blue: sonst läuft die Fußleiste mit dem Schluss-CTA direkt darüber zu einem Block zusammen. */ .mk-footer { background: var(--mk-blue-dark); color: rgba(255, 255, 255, .9); padding: 48px 0; text-align: center; } .mk-footer .mk-brand { color: #fff; display: inline-block; margin-bottom: 16px; } .mk-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0 0 8px; } /* Polster statt margin: macht aus den Links 44-px-Tap-Ziele. rgba(255,255,255,.9) auf #084298 sind 7,88:1. */ .mk-footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; color: rgba(255, 255, 255, .9); text-decoration: none; transition: color .2s ease; } /* --mk-akz-hell, nicht --mk-akz: Rollentrennung aus dem Dateikopf, 7,51:1 statt 5,17:1. */ .mk-footer-links a:hover { color: var(--mk-akz-hell); } .mk-footer :focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .mk-footer small { font-size: 14px; } /* ── Bewegung ────────────────────────────────────────────────────────────── */ /* Am , nicht am : scrollendes Element ist das Wurzelelement, an bleibt die Regel in den meisten Browsern wirkungslos. Die Klasse setzt das Layout nur auf der Landingpage — die Rechtstextseiten haben keine Ankernavigation. */ .mk-html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .mk-html { scroll-behavior: auto; } .mk-page *, .mk-page *::before, .mk-page *::after { transition: none !important; animation: none !important; } } /* ── Erhöhter Kontrast ───────────────────────────────────────────────────── */ /* Wer im Betriebssystem „erhöhter Kontrast" gesetzt hat, hat das getan, weil die üblichen Abstufungen für ihn nicht reichen — nicht als Geschmacksangabe. Die Seite gibt dann die Sekundärstufe auf: Sekundärtext wird Fließtextfarbe, Rahmen werden sichtbar statt angedeutet. Am .mk-host und nicht an :root, damit auch die Rechtstextseiten dieses Hosts mitziehen — dort greift die Regel auf Kopf- und Fußleiste, den Rest macht dort Bootstrap. Alles andere ist unberührt: Für alle, die die Einstellung NICHT gesetzt haben, ändert dieser Block nichts. Die drei Akzentrollen bleiben, wie sie sind: --mk-akz ist eine Flächenfarbe, und sie hier zu Text zu machen wäre genau der Fehlgriff, vor dem der Dateikopf warnt. */ @media (prefers-contrast: more) { .mk-host { --mk-n600: var(--mk-n800); /* auf Weiß: 15,43:1 statt 8,14:1 */ --mk-n200: #6C737B; /* Rahmen auf Weiß: 4,80:1 statt 1,30:1 */ --mk-n100: #8B9299; } /* Transluzentes Weiß gibt es auf dieser Stufe nicht mehr — die Fußzeile ist die letzte Stelle, an der noch welches steht. */ .mk-footer, .mk-footer-links a, .mk-footer-nav a { color: #fff; } /* Der Kartenrahmen in der dunklen Sektion wird voll deckend (1,45:1 gegen die Karte reichten dort nur, weil der Rahmen bei .45 die Form trug). */ .mk-karte { border-color: #fff; } /* Der Fokusring wird dicker, nicht nur farbiger: Wer erhöhten Kontrast braucht, sucht die Fokusmarke meist auch länger. */ .mk-host :focus-visible { outline-width: 4px; } } /* ───────────────────────────────────────────────────────────────────────────── INHALTSSEITEN (marketing/inhaltsseite.blade.php) Die eigenen Seiten für Funktionen, Preise und Ratgeber, seit dem 2026-09-12. Sie sind Fließtext und nicht Raster — deshalb braucht es hier fast nichts ausser einer Lesebreite. 720 px ist dieselbe Breite wie .mk-faq-inner, und das ist kein Zufall, sondern der Punkt: Beide sind zusammenhängender Text zum Lesen. Zwei verschiedene Lesebreiten auf derselben Seite wären zwei Antworten auf dieselbe Frage. Über etwa 75 Zeichen je Zeile verliert das Auge beim Rücksprung die nächste Zeile — bei 16 px Grundschrift sind das rund 720 px. ───────────────────────────────────────────────────────────────────────────── */ .mk-prosa { max-width: 720px; /* Nicht zentriert: Die Brotkrume darüber steht linksbündig, und ein zentrierter Textblock unter einer linksbündigen Zeile sieht aus wie ein Fehler. */ margin: 0; } .mk-prosa h1 { margin: 0 0 24px; } /* Auf dem Telefon kleiner, seit dem 2026-10-18. Bis dahin galten die 2em des Browsers (32 px) auf jeder Breite, und „Teilnahmebescheinigung" misst bei 32 px 426 px — mehr, als irgendein Telefon hergibt (312 px bei 360, 342 bei 390, 382 bei 430). Das Suchwort des Ratgebers stand damit in seiner eigenen Überschrift getrennt. 6.4vw lässt es ab 360 px ganz (23 px → 312 px Bedarf bei 360), ab 500 px sind es wieder 32 px. Die Überschriften dieser Seiten sind lang (bis rund 90 Zeichen); fünf, sechs Zeilen in 32 px füllten den ersten Bildschirm allein. */ .mk-prosa h1 { font-size: clamp(22px, 6.4vw, 32px); } /* Die Zwischenüberschriften der Ratgebertexte. Grosszügiger Abstand NACH OBEN und ein knapper nach unten: Eine Überschrift gehört sichtbar zum Text, der ihr folgt, nicht zu dem, der über ihr endet — ohne diesen Unterschied liest sich eine lange Seite als eine einzige Fläche. */ .mk-prosa h2 { margin: 40px 0 12px; } .mk-prosa h3 { margin: 28px 0 8px; } .mk-prosa p { margin: 0 0 16px; } .mk-prosa ul { margin: 0 0 16px; padding-left: 22px; } .mk-prosa li { margin: 0 0 8px; } /* Links im Fließtext sind unterstrichen. Farbe allein genügt nicht: Wer Farben schlecht unterscheidet, sähe den Link sonst nicht — dieselbe Überlegung wie beim Kontrastmaßstab im Kopf dieser Datei. */ .mk-prosa a { color: var(--mk-blue-dark); text-underline-offset: 2px; } .mk-prosa a:hover { text-decoration-thickness: 2px; } /* Der Kasten „Kurz gesagt" am Anfang der Ratgebertexte: die Antwort für den, der nicht die ganze Seite liest. Kein