Diese Seite ist das Designhandbuch von kagels-trading.de: Logo, Farben, Schrift, Buttons, die Bausteine im Artikel und die Seiten rund um Formulare und Käufe. Wer eine neue Seite baut, eine Grafik anlegt oder eine Danke-Seite einrichtet, richtet sich danach. Stand: 7. Oktober 2026.
Kurz für neue Designer: Die Website läuft auf GeneratePress mit GenerateBlocks und einem eigenen Child-Theme. Es gibt keine Webfonts, wir nutzen die Systemschrift des jeweiligen Geräts. Farben kommen aus CSS-Variablen, nie als Hex-Wert ins Markup. Wiederkehrendes Aussehen gehört in einen Global Style mit dem Präfix kk-. Für Danke-, Bestätigungs- und Download-Seiten gibt es eigene Muster, die stehen in Abschnitt 6.
- Entschieden
- 1 Logo
- 2 Farben
- 3 Schrift
- 4 Buttons
- 5 Bausteine
- 6 Seitentypen
- 7 Grafiken
- 8 Regeln
- 9 Englische Seite
- 10 Technik
- 11 Altlasten
Vorab
Was entschieden ist
Diese Punkte sind festgelegt. Wer davon abweichen will, fragt vorher Karsten.
- 07.10.2026 · KarstenEs gibt eine Corporate-Seite, diese hier. Die frühere Seite /corporate/ leitet hierher weiter.
- 07.10.2026 · KarstenZwei Blautöne mit getrennten Rollen: Logo-Blau
#084EC5nur im Logo und in Grafiken,--primary-1für alles im Web. - 07.10.2026 · KarstenFür neue Seiten gilt nur die kk-Button-Familie. Der gelbe Theme-Button bekommt dunkle Schrift statt blauer.
- 07.10.2026 · KarstenDie Systemschrift bleibt, auch auf Danke- und Bestätigungsseiten.
- 07.10.2026 · KarstenDanke-, Ein-Klick- und Download-Seiten haben eine eigene Farbwelt aus Navy, Gold und Creme. Muster sind die Seiten 286930 und 303032.
- 07.10.2026 · KarstenDeutsche und englische Website teilen Logo, Logo-Blau und die Regeln für Grafiken. Alles andere gestaltet jede Website für sich.
- 29.09.2026 · KarstenDas neue einteilige Logo überall, auch in Mails und Grafiken. In Charts immer oben links.
- 21.09.2026 · KarstenCharts tragen die gleitenden Durchschnitte 20, 50, 100 und 200.
Abschnitt 1
Logo
Seit dem 26. September 2026 trägt die Website das einteilige Logo: Stier und Bär als Bildzeichen, daneben „KagelsTrading“ in einer Zeile. Das alte zweizeilige Logo „KAGELS TRADING“ wird nirgends mehr verwendet.
| Fassung | Datei | Wofür |
|---|---|---|
| Farbig | kagels-trading-logo-de-tight.png | Helle Flächen, Header, Mails. Mediathek 337958, 900 × 115 Pixel, transparent. |
| Weiß | kagels-trading-logo-white-2026.svg | Dunkle Flächen und Charts. Mediathek 338023. |
Im Header steht das Logo 300 Pixel breit, bis 1288 Pixel Fensterbreite 260 Pixel, bis 1024 Pixel 220 Pixel. Die Höhe ergibt sich automatisch, bei 300 Pixel Breite rund 38 Pixel. Die Regeln stehen im Zusätzlichen CSS des Customizers.
Logo-Blau ist nicht Website-Blau. Das Logo trägt #084EC5, die Website arbeitet mit #0052FF. Das ist so entschieden: Logo-Blau gehört ins Logo und in Grafiken, --primary-1 in alles, was im Browser gebaut wird.
Abschnitt 2
Farben
35 Variablen liegen im Customizer und stehen auf jeder Seite zur Verfügung. Diese neun tragen die Marke.
Text und Flächen
| Variable | Wert | Wofür |
|---|---|---|
| --text-1 | #333333 | Fließtext, die Body-Farbe der Website |
| --base | #5B616E | Grau für Sekundärtext |
| --base-3 | #EEF0F3 | Helle Flächen |
| --base-4 | #F5F8FF | Blaustichige Flächen |
| --base-5 | #FFFFFF | Weiß, Header-Hintergrund |
| --hintergrund-blau | #E6EDF9 | Infoboxen |
| --hintergrund-beige | #FFF9ED | FAQ-Flächen |
| --contrast | #000000 | Schwarz |
Dazu kommen --secondary-2 (Violett, kommt fast nie vor) und --button-hover (#F7CA00). --accent ist dasselbe Blau wie --primary-1 und färbt die Links der Website, --accent-4 ihren Hover. Die übrigen Variablen --accent-2 bis --accent-8, --contrast-2/-4/-5, --base-2, --grey-1, --white sowie --global-color-15/16 sind für Neues nicht vorgesehen. Zwei davon sind Dubletten: --accent-6 ist dasselbe Gelb wie --button, --accent-8 dasselbe Grün wie --global-color-14.
Funnel-Farben: Danke-, Ein-Klick- und Download-Seiten
Die Seiten rund um Formular und Bestätigung haben eine eigene, ruhigere Farbwelt. Sie hebt sich bewusst vom Rest der Website ab: Wer dort landet, soll sofort sehen, dass er an einem anderen Punkt ist als beim Lesen eines Artikels.
Diese Werte stehen heute als Hex-Werte im CSS jeder einzelnen Seite, nicht als Variable. Das ist eine Altlast, siehe Abschnitt 11. Wer eine neue Funnel-Seite baut, übernimmt Aufbau und Maße des Musters, mit zwei Ausnahmen: Überschriften in der Systemschrift statt Georgia, und Links nicht in Gold, sondern in Navy oder #185FA5.
Kontrast, nachgerechnet
WCAG AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text ab 24 Pixel oder ab 19 Pixel fett. Die Werte gelten für Kombinationen, die auf der Website tatsächlich vorkommen.
| Kombination | Verhältnis | Urteil |
|---|---|---|
| #333333 auf Weiß | 12,6:1 | bestanden |
| Weiß auf #0052FF | 5,8:1 | bestanden |
| Weiß auf #0E2B5D | 13,8:1 | bestanden |
| #333333 auf #FFD814, der Theme-Button | 9,1:1 | bestanden |
| #000000 auf #F7CA00, dessen Hover | 13,4:1 | bestanden |
| Navy #16294B auf Weiß | 14,5:1 | bestanden |
| Grau #66707F auf Weiß | 5,0:1 | bestanden |
| Grau #66707F auf Creme #FAF7EF | 4,7:1 | knapp bestanden |
| Weiß auf #009500 | 4,0:1 | nur als großer Text |
| Gold #B08420 auf Weiß | 3,4:1 | nur als großer Text |
| #ED0F0F auf #0E2B5D | 3,1:1 | nur als großer Text |
Gold ist eine Schmuckfarbe, keine Textfarbe. Für Schrittnummern, Aufzählungspunkte und große Zahlen reicht es. Für Links und kleine Schrift nicht: Dort Navy oder #185FA5 nehmen.
Abschnitt 3
Schrift
Kein Webfont, nur der System-Stack. Das spart Ladezeit und heißt zugleich: Die Website sieht auf einem Mac anders aus als auf einem Windows-Rechner. Genau so ist sie gemeint. Das gilt auch für Danke- und Bestätigungsseiten.
-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
| Ebene | Stärke | Desktop | Tablet ≤ 1024 | Mobil ≤ 768 | Zeilenhöhe |
|---|---|---|---|---|---|
| H1 | 700 | 60 px | 48 px | 38 px | 1,33 em, mobil 1,2 em |
| H2 | 600 | 48 px | 40 px | 30 px | 1,33 em |
| H3 | 600 | 38 px | 30 px | 26 px | 1,33 em |
| H4 | 600 | 30 px | 24 px | 20 px | 1,33 em |
| Fließtext | 400 | 18 px | 18 px | 16 px | 1,7 em |
| Beitragstitel im Archiv | nicht gesetzt | 26 px | 24 px | 22 px | 1,3 em |
| Hauptnavigation | 700 | 16 px | 16 px | 16 px | 1,3 |
| Untermenü | 500 | 16 px | 16 px | 16 px | 1,3 |
Im Blog gilt diese Tabelle nicht. Ein eigenes Stylesheet überschreibt die Überschriften innerhalb der Artikel mit fließenden Größen. Eine H2 im Artikel wird höchstens 38,4 Pixel groß, nicht 48. Auf Landing- und Verkaufsseiten gilt die Tabelle. Die Funnel-Seiten setzen ihre H1 selbst, fließend zwischen 2 und 2,9 rem.
Abschnitt 4
Buttons
Für neue Seiten gibt es genau eine Familie: kk. Dazu kommt der gelbe Theme-Button, den WordPress überall dort zeigt, wo kein eigener Button gesetzt ist. Die älteren Systeme stehen unter Altlasten in Abschnitt 11.
kk · der Standard für Neues
.kk-button--primary Blau, weiße Schrift, 1,2 rem, Radius 10 px, 2 px Rahmen in der Schriftfarbe. Für die eine Handlung, um die es auf der Seite geht. .kk-button--secondary Limette, 0,85 rem, schwarzer Rahmen, wird beim Hover blau. Für alles Zweite.
Theme-Button · überall, wo kein eigener gesetzt ist
Gelb --button mit dunkler Schrift --text-1, beim Hover #F7CA00 mit schwarzer Schrift. Er trifft jeden Formular-Button und jeden Block-Button ohne eigene Farbe. Bis zum 7. Oktober 2026 stand hier blaue Schrift mit nur 4,1:1 Kontrast.
Auf Funnel-Seiten gilt der eigene Download-Button aus dem Muster: Navy mit weißer Schrift, 1,06 rem, Radius 8 px. Er steht nur dort.
Abschnitt 5
Bausteine im Artikel
Das eigentliche Hausdesign. Acht Bausteine, alle im Child-Theme definiert, alle über eine Klasse am Container aufgerufen. Kein Inline-Style nötig, kein Plugin.
Die Proben unten sind nachgebaut und zeigen das Aussehen. Ihre Texte und Zahlen sind Platzhalter, keine geprüften Aussagen. Das echte Verhalten, etwa auf dem Handy, liefert nur die Klasse im Artikel.
30-Sekunden-Box · Klasse kk-blog_30sek oder kk-blog_intro
Das Wichtigste in 30 Sekunden
- Der DAX notiert seit drei Wochen in einer Spanne von 400 Punkten.
- Die Marke bei 24.000 hat bisher zweimal gehalten.
- Unter 23.600 wird die Lage kurzfristig unübersichtlich.
Hellblau #E6F1FB, Kante links 8 px in #185FA5, Radius 14 px. Überschrift #0C447C, zentriert, mit 56 Pixel breitem Unterstrich. Steht in fast jedem Artikel direkt nach der Einleitung.
FAQ-Box · Klasse kk-blog_faq
Häufige Fragen
Beispielfrage im FAQ-Block?
Hier steht die Antwort in zwei bis drei Sätzen.
Amber #FAEEDA, Kante #854F0B, Überschrift #633806. Innen liegt der RankMath-FAQ-Block. Diese Klasse ist doppelt definiert, in den Global Styles steht eine ältere beige Fassung mit blauem Rahmen. Live gewinnt die Amber-Variante aus dem Child-Theme.
Vor- und Nachteile · Klasse kk-blog_procon
- Reguliert in Deutschland, Einlagen bis 100.000 Euro geschützt
- Keine Mindesteinlage
- Kein Handel mit US-Optionen
- Die Handelsplattform gibt es nicht auf Deutsch
Die Überschriften kommen aus dem CSS, nicht aus dem Markup: erste Liste grün, letzte rot. Immer untereinander, Vorteile zuerst. Nie nebeneinander, auch nicht auf breiten Bildschirmen.
Bull- und Bear-Szenario · Klasse kagels-szenario-grid
Bullisches Szenario
Hält die Zone um 24.000, ist der Weg zum Sommerhoch bei 24.700 frei.
Bärisches Szenario
Unter 23.600 wird die Lücke vom 14. August zum nächsten Ziel.
Grauer Grund, unterschieden allein über die 4 Pixel breite Kante links. Das Haus-CSS stapelt diese Karten erst unter 600 Pixel, darüber stehen sie nebeneinander. Der Wrapper braucht deshalb immer style="flex-direction:column".
Steckbrief · Klasse kk-steckbrief
| Anbieter | Beispiel Broker GmbH |
| Gegründet | 2014 in Frankfurt |
| Mindesteinlage | keine |
| Regulierung | BaFin |
Merkmal links in Blau auf #E6F1FB, Wert rechts mit Zebra-Streifen. Für Reviews. Nicht verwechseln mit der Datentabelle darunter.
Datentabelle · Klasse kk-tabelle
| Währungspaar | Kontraktgröße | Pip-Wert |
|---|---|---|
| EUR/USD | 100.000 | 10,00 $ |
| GBP/USD | 100.000 | 10,00 $ |
| USD/JPY | 100.000 | 6,45 $ |
Blauer Verlaufskopf, Zebra, letzte Spalte rechtsbündig und fett in #0066cc. Zahlen laufen mit Tabellenziffern, damit die Kommas untereinander stehen. Jede Tabelle im Artikel bekommt automatisch Luft nach oben und unten. Für Datentabellen im Artikel diese Klasse nehmen. Der frühere Tabellen-Prompt von der alten Corporate-Seite erzeugte ein eigenes Design mit Verlauf, Hover-Anhebung und Karten-Umbau. Er ist mit dem Umbau am 7. Oktober 2026 entfallen, weil die Klasse dasselbe ohne eigenes CSS leistet.
Icon-Liste · Klasse kk-iconlist mit kk-pro, kk-con oder kk-neutral
Drei Varianten: grün #e7f7ee, rot #fdeceb, blau-neutral #eef3fb. Die neutrale Variante ist keine Vor- oder Nachteile-Box, auch wenn sie so aussieht.
Affiliate-CTA · Klasse kk-blog_cta
Weiße Karte, grüner Button #0F6E56, graue Hinweiszeile. Der Hinweis nennt die Mechanik, nie einen Preis oder Zinssatz: Die Box wird bei späteren Überarbeitungen nicht mit angefasst und würde veralten.
Abschnitt 6
Seitentypen rund um Formulare und Käufe
Diese Seiten sieht nur, wer sich gerade eingetragen oder etwas gekauft hat. Sie entscheiden, ob die Mail bestätigt und das E-Book geöffnet wird. Jede neue Seite dieser Art baut auf dem Muster ihres Typs auf.
Ein-Klick-Seite
- Marke-Zeile in Gold, zum Beispiel „Kostenloses E-Book“
- H1 „Fast geschafft.“ und ein Satz, was jetzt passiert
- Drei nummerierte Schritte: Postfach öffnen (mit Absender und genauem Betreff), Button in der Mail klicken, Download kommt
- Karte mit Cover und drei Punkten, was den Leser erwartet
- Hilfe: Spam-Ordner, Hinweis für alle, die schon im Verteiler sind, Mailadresse mit vorbelegtem Betreff
- Impressum und Datenschutz als Links
- noindex
- keine Popups
- keine Webinar-Leiste
- Betreff wörtlich wie in der Opt-in-Mail
Danke- und Download-Seite
- Marke-Zeile und H1 „Bestätigt. Hier ist dein E-Book.“
- Download-Karte: Cover, drei Punkte, Navy-Button direkt auf die PDF, darunter Format, Seitenzahl und Größe
- Auf dem Handy steht der Button im ersten Bildschirm, vor der Aufzählung
- „So holst du am meisten heraus“: drei Schritte mit einem Link in einen passenden Artikel
- Hilfe: Die Mail mit demselben Link ist unterwegs, Mailadresse mit vorbelegtem Betreff
- noindex
- keine Popups
- keine Webinar-Leiste
- Download-Link identisch mit der Auslieferungsmail
Danke-Seite nach einem Kauf
- Bestätigung: was gekauft wurde und dass die Rechnung per Mail kommt
- Der eine nächste Schritt: Zugang, Telegram-Gruppe, Termin oder Onboarding-Seite
- Was in den nächsten Tagen passiert
- Hilfe mit Mailadresse
- noindex
- keine Popups
- keine Werbebanner
- Danke-URL in Digistore eingetragen und aufrufbar
Einklick aus einer E-Mail
- Zugang gleich oben
- Termin mit Wochentag und Uhrzeit
- noindex
Landingpage
- genau eine H1
- ein Ziel, ein Formular
- Datenschutz-Hinweis am Formular
- Formular-Button in Hausfarbe
Popups bleiben über die Adresse draußen. Beim Candlestick-Popup wurden diese Ausschlüsse gemessen (06.10.2026): Adressen mit danke oder ein-klick-fehlt bekommen es nicht. Andere Kampagnen sind nicht geprüft und haben eigene Regeln. Sicher ist der Schalter pro Seite: Jede Seite hat im Editor unter „OptinMonster Settings“ den Schalter „Disable all OptinMonster campaigns“, er gehört auf jeder Funnel-Seite gesetzt. Die Webinar-Leiste wird im GP-Element 329936 pro Seite ausgeschlossen.
Abschnitt 7
Grafiken, Icons und Charts
Grafiken entstehen hauptsächlich in Canva. Die Beispiele unten dürfen als Anregung oder direkt als Vorlage dienen. Wichtig ist, dass die Farbwelt zur Marke passt und wiedererkennbar bleibt.
- Hauptfarbe Blau. Ausgangspunkt ist Logo-Blau
#084EC5. Abstufungen und Tönungen davon passen für Hintergründe, Schattierungen, Ränder und Icons. - Orange
#FFA500als Akzent, sparsam. Für Hervorhebungen, Unterstreichungen, Labels oder Pfeile. - Das Logo ist immer das neue einteilige, nie das alte zweizeilige.
Die Beispiele tragen noch das alte Logo. Wer eines als Vorlage nimmt, ersetzt es durch das neue einteilige Logo aus Abschnitt 1.
Icons
Icons sind blau oder schwarz. Einzige Ausnahme sind Sterne. Innerhalb einer Grafik oder Seite ein einheitlicher Stil: entweder schlichte Outline-Icons oder flache Symbole, nicht gemischt.
Bild-Icons im Hausstil: flach, in Blau.
Charts
- Nur Karstens dunkle Charts mit weißen Kursbalken, alte helle Charts fliegen raus (Karsten, 17.09. und 01.10.2026, gefallen bei den Prognosen).
- Das neue weiße Logo steht immer oben links, die TradingView-Legende direkt darunter (Karsten, 29.09.2026).
- Gleitende Durchschnitte: 20, 50, 100 und 200 (Karsten, 21.09.2026).
- Horizontale Marken in Gelb, Grün und Orange, nie in Blau, höchstens drei Farben. Diese Regel fiel am 17.09.2026 bei der Festlegung des Chart-Hintergrunds für die englische Seite; sie gilt für dieselbe TradingView-Vorlage, ist für die deutsche Seite aber nicht eigens bestätigt.
Abschnitt 8
Regeln für neue Seiten
- FarbenNie Hex-Werte ins Markup, immer die Variable. Sonst wirkt eine Palettenänderung im Customizer nicht mehr auf der ganzen Website.
- KlassenWiederkehrendes Aussehen kommt in einen Global Style mit
kk--Präfix. Block-eigene Styles nur für echte Einzelfälle. - ButtonsNur die kk-Familie oder der Theme-Button. Keine neuen gbp- oder cst-Buttons.
- StrukturJede Sektion ist ein Element auf oberster Ebene mit sprechendem Namen. Dann liest sich die Listenansicht im Editor wie ein Inhaltsverzeichnis.
- AbständeAußen über
.gbp-sectionoder.kk-section__mediumund__large, innen über.inner-container. - ÜberschriftenGenau eine H1 pro Seite, im Hero. Danach H2 zu H3 ohne Sprünge. Das Inhaltsverzeichnis und RankMath lesen die Gliederung aus den Überschriften.
- Hero-BildAls WebP, und
no-lazyam äußeren Element. Sonst leidet die Ladezeit messbar. - BilderZentriert, und keine Spacer für Abstand setzen. Die 24 Pixel unter jedem Bild kommen zentral aus dem Child-Theme.
- FunnelEin-Klick- und Danke-Seiten nur nach dem Muster aus Abschnitt 6, mit Adresse nach Schema, auf noindex, ohne Popups und ohne Webinar-Leiste.
- ElementsVor dem Veröffentlichen prüfen, welche GP Elements auf der neuen URL automatisch greifen. Mehrere Banner haben sehr lange Anzeigelisten.
- CacheNach jeder Style-Änderung: GB-CSS neu erzeugen, dann WP Fastest Cache und Perfmatters leeren. Sonst siehst du die alte Version.
- KontrastTextfarbe immer gegen den tatsächlichen Hintergrund prüfen, nicht gegen Weiß. Markenrot auf Dunkelblau und Gold als Linkfarbe reichen nur für großen Text.
Abschnitt 9
Die englische Seite
kagels-trading.com ist eine eigene Website auf eigener Technik, mit eigener Schrift und eigenen Webfarben. Ihr Designhandbuch liegt dort unter /corporate/. Gemeinsam haben beide Websites nur die Markenregeln: das einteilige Logo, Logo-Blau #084EC5 und die Regeln für Grafiken und Charts aus Abschnitt 7. Werte der englischen Seite gelten hier nicht, und umgekehrt.
Abschnitt 10
Anhang Technik
Layout und Breakpoints
Maße
- Inhaltsbreite 1280 px, zentriert
- Seitenpadding mobil 20 px
- Header weiß, ohne Schatten
- Abstand unter jedem Bild 24 px, zentral geregelt
- Funnel-Seiten: Inhalt höchstens 800 px, Anrisstext höchstens 62ch
Abstände
.gbp-section7 rem / 40 px, bis 1024 px 6 rem / 30 px, bis 767 px 4 rem / 20 px.kk-section__medium40 / 24 px.kk-section__large80 / 24 px, mobil 40 px- Innencontainer über
.inner-container
| Grenze | Wer sie benutzt | Wofür |
|---|---|---|
| 1100 px | GeneratePress | Umschaltpunkt auf das Hamburger-Menü |
| 1024 px | Customizer, Global Styles | Tablet-Schriftgrößen, Sektionspadding |
| 768 px | Customizer | Mobile Schriftgrößen, Fließtext auf 16 px |
| 767 px | Global Styles, Child-Theme | Sektionen, Karten und 30-Sekunden-Box mobil |
| 600 px | Child-Theme | Innenabstände der Haus-Boxen, Tabellen |
| 520 px | Funnel-Seiten | Download-Karte und Schritte mobil |
Für reine Sichtbarkeitsregeln auf Telefonen ist 767 px die richtige Grenze. 1100 px würde Tablets mit treffen.
Wo das CSS liegt
Acht Quellen, in dieser Reihenfolge geladen (gemessen auf der Startseite am 07.10.2026). Wer später kommt, gewinnt bei gleicher Spezifität. Die Reihenfolge erklärt fast jede Überraschung. Perfmatters liefert einige Dateien minifiziert unter eigener Adresse aus, die Quelle bleibt dieselbe.
Dazu kommt der <style>-Block, den jede Funnel-Seite selbst mitbringt. Wer nur die Theme-Datei liest, sieht diese Regeln nicht.
Das Child-Theme liegt im Repository Kagels-Trading-GmbH/kagels-trading-child. Live und Repository waren am 07.10.2026 byte-gleich (Version 3.15). Änderungen am Haus-CSS gehören dorthin, nicht in den Datei-Editor von WordPress. inc/dist/main.css ist ein Build-Artefakt und wird nie direkt bearbeitet.
Abschnitt 11
Altlasten und Baustellen
Alles in diesem Abschnitt ist live, aber kein Vorbild. Wer es auf einer bestehenden Seite findet, lässt es stehen. Wer neu baut, nimmt es nicht.
Ältere Button-Systeme
Schwarz gefüllt oder schwarz umrandet, 1 rem, kein Radius. Trägt keine Markenfarbe.
cst · die orange Familie der älteren Verkaufsseiten
.cst-buttonyellow 18 px, .cst-buttonsmall 15 px, .cst-listbutton 13 px in Blau, .cst-ctabutton im Header mit Versalien und Radius 50 px. Vor dem Zusammenführen gehört je Klasse ein Check Usage in GenerateBlocks, damit auf Zahlenbasis entschieden wird.
Offene Punkte
Fehler Eine Variable, die es nicht gibt
Der Customizer setzt die Farbe von H2 bis H6 auf var(--text-dunkel). Diese Variable ist nirgends definiert. Die Überschriften erben ihre Farbe deshalb vom Fließtext. Wird die Variable eines Tages angelegt, ändern sich schlagartig alle Überschriften, die keine eigene Farbe gesetzt haben.
Altlast Funnel-Farben ohne Variable
Navy, Gold und Creme stehen als Hex-Werte im Style-Block jeder Funnel-Seite. Ziel: eigene Variablen und ein gemeinsames Stylesheet, damit eine Änderung nicht auf jeder Seite einzeln nachgezogen werden muss.
Altlast Gold als Linkfarbe
Auf den Danke-Seiten sind Links und die kleine Marke-Zeile golden. Mit 3,4:1 reicht das nach WCAG AA nur für großen Text.
Altlast Ältere Funnel-Seiten
Nur vier Danke-Seiten und zwei Ein-Klick-Seiten folgen dem Muster. Die übrigen, etwa die Prognose-Danke-Seite, sind älter gebaut, teils ohne H1. Die Ein-Klick-Seite 286930 setzt ihre Überschriften noch in Georgia statt in der Systemschrift.
Altlast Farben außerhalb der Palette
Ein Global Style bringt ein Grün #056A11 mit, ein anderer ein Rot #8E160C. Beide stehen in keiner Variable. Dazu vier Klassen, die in der Liste stehen, aber keine einzige Regel erzeugen.
Zum Schluss
Woher die Werte stammen
Farbwerte, Schriftgrößen, Klassennamen und Breakpoints wurden am 16. September 2026 aus den live ausgelieferten Stylesheets gelesen und am 7. Oktober 2026 gegengeprüft: Customizer, Global Styles, Typografie und Child-Theme. Die Funnel-Werte stammen aus den Seiten 286930 und 303032, die Logomaße aus der Logodatei und einer Messung im Header. Die Kontrastwerte sind nach WCAG 2.1 gerechnet. Die Entscheidungen oben hat Karsten Kagels getroffen.
Wenn sich etwas an der Website ändert, ändert sich diese Seite nicht von allein. Wer eine Farbe, eine Größe oder ein Muster anfasst, trägt es hier nach.