Kapitel 06 # Design anpassen Deine Website hat ein Gestaltungssystem, und dieses System hat einen Schalterkasten. Wer dort einen Wert ändert, ändert die ganze Website auf einmal, statt sie Stelle für Stelle nachzuziehen. Dieses Kapitel zeigt dir, wo der Kasten liegt, welche Schalter du gefahrlos umlegst und welche besser stehen bleiben. 11 Min Gilt für jedes AI Website Template ## Was ein Design-Token ist Deine Website benutzt an hunderten Stellen dieselben Werte: dieselbe Textfarbe, denselben Abstand zwischen zwei Abschnitten, dieselbe Rundung an den Ecken. Ein Design-Token ist so ein Wert mit einem Namen. Er steht einmal an zentraler Stelle, und alle anderen Stellen fragen diesen Namen ab. Der Nutzen zeigt sich beim ersten Wechsel. Willst du eine andere Akzentfarbe, änderst du einen Wert, und jeder Knopf, jeder Link und jeder aktive Zustand zieht mit. Ohne Tokens wäre dasselbe eine Suche durch jede Datei, bei der du zuverlässig drei Stellen übersiehst. Deshalb gilt in jedem Template dieselbe Regel: Farbwerte, Radien und Abstände stehen in den Tokens, nicht in einzelnen Seiten. Eine Farbe, die du direkt in eine Seite schreibst, funktioniert dort sofort und bleibt beim nächsten Wechsel liegen. Solche Einzelstellen fallen meist erst Monate später auf, oft im Dunkelmodus. Als Tokens liegen in deinem Template vor allem diese Gruppen bereit. - **Flächen.**Der Seitenhintergrund, Karten, Kästen und abgesetzte Bänder. -**Text.**Meist drei Abstufungen: kräftig für Überschriften, normal für Fließtext, leise für Nebeninfos. -**Linien.**Trennlinien, Kartenrahmen und Formularrahmen. -**Akzent.**Deine eine Signalfarbe, samt ihrer Abstufungen für Hover und helle Flächen. -**Form.**Die Radien für Ecken und die Abstandsleiter zwischen den Abschnitten. -**Schrift.**Die Familie und die Größenstufen.** Die Regel in einem Satz **Aussehen ändert man über Tokens. Wer eine Farbe direkt in eine Seite schreibt, baut eine Stelle, die beim nächsten Markenwechsel vergessen wird. Das schreibst du deiner KI Zeig mir alle Design-Tokens dieses Projekts als Übersicht: Datei, Name, Wert und wofür der Token da ist. Sag mir dazu, ob es eine dunkle Fassung gibt und wo sie steht. Nichts ändern, nur auflisten. Kopieren ## Wo die Tokens liegen Es gibt zwei Bauarten von Templates, und sie unterscheiden sich genau an dieser Stelle. Welche du hast, siehst du an einem Blick in deinen Projektordner. Was sonst noch wo liegt, steht im Kapitel [Aufbau deines Templates](https://ai-website.com/de/docs/structure). ### Template mit einem Ordner `src` Die Tokens stehen im Token-Block ganz oben in `src/styles/global.css`. Darunter, in derselben Datei, folgt ein zweiter Block für den Dunkelmodus. Er belegt dieselben Namen mit anderen Werten. ### Template ohne Ordner `src` Die Tokens stehen im `:root`-Block von `assets/css/style.css`, ebenfalls im oberen Teil der Datei. Ein Bauschritt entfällt hier, deine Änderung ist nach dem Neuladen sofort sichtbar. -**src/styles/global.css** *· Tokens im Template mit Bauschritt* - **assets/css/style.css** *· Tokens im statischen Template* - **styleguide.html** *· dasselbe System zum Ansehen* Beide Dateien sind gleich aufgebaut. Oben stehen die Werte, darunter die Bausteine, die sie benutzen. Du arbeitest im oberen Teil. Was weiter unten steht, ist die Mechanik, und die läuft am besten, wenn du sie in Ruhe lässt. | Rolle | Typische Namen | Was daran hängt | | --- | --- | --- | | Grundfläche | page, bg, cream | Der Hintergrund jeder Seite. Die größte Fläche und damit der stärkste Eingriff ins Gesamtbild. | | Abgesetzte Flächen | card, paper, surface | Karten, Kästen, Formularfelder und alles, was sich vom Hintergrund abheben soll. | | Text | ink, fg, muted | Überschriften, Fließtext und Nebentext, meist in drei Abstufungen derselben Farbe. | | Linien | border, line | Trennlinien zwischen Abschnitten, Kartenrahmen und Rahmen von Eingabefeldern. | | Akzent | accent, blue, terra | Knöpfe, Links, aktive Zustände und Fokusringe. Die Farbe, die Besucher als deine Marke erinnern. | | Radien | radius, radius-card | Wie rund Karten, Knöpfe, Bilder und Eingabefelder an den Ecken sind. | | Abstände | space, gap | Der Abstand zwischen Abschnitten und die Luft innerhalb von Karten. | **Keine Farbwerte in Seiten** Findest du in einer Seitendatei einen Farbcode wie `#c46f4d`, ist das fast immer eine Altlast. Lass sie durch den passenden Token ersetzen, sonst bleibt genau diese Stelle beim nächsten Wechsel in der alten Farbe stehen. ## Die Farbe wechseln Jedes Template kommt mit genau einem Akzent. Das ist die Farbe der Knöpfe, der Links und der aktiven Zustände, und sie ist der Teil deiner Website, an den Besucher sich erinnern. Sie zu wechseln ist der häufigste Design-Wunsch überhaupt. Der Wechsel läuft über den Token, nicht über die Fundstellen. Der Unterschied ist nicht Bequemlichkeit, sondern Vollständigkeit. Über den Token erwischst du auch die Zustände, die du beim Durchklicken nie zu sehen bekommst, etwa den Fokusring bei Bedienung über die Tastatur oder die Hinterlegung von markiertem Text. Ein Akzent ist dabei selten ein einzelner Wert. Meist ist es eine kleine Familie: der Grundton, eine dunklere Fassung für den überfahrenen Zustand, ein sehr heller Ton für Flächen und manchmal ein aufgehellter Ton, der auf dunklen Bändern noch leuchtet. Diese Familie wird gemeinsam gesetzt, sonst passt der Hover nach dem Wechsel nicht mehr zum Grundton. Das schreibst du deiner KI Wechsle die Akzentfarbe des Projekts auf [hier deine Farbe eintragen]. Ändere dabei die komplette Akzent-Familie in den Tokens, also Grundton, Hover-Ton, helle Fläche und den Ton für dunkle Flächen, und ebenso die passenden Werte in der dunklen Fassung. Sag mir danach, welche Stellen außerhalb der Tokens du mitgezogen hast, etwa Favicon, Browserleisten-Farbe und Textmarkierung. Prüf zum Schluss die Kontraste in beiden Fassungen. Kopieren Einige Stellen tragen die Farbe außerhalb des Stylesheets. Sie fallen beim ersten Blick nicht auf und sehen falsch aus, sobald jemand genauer hinsieht. - **Das Favicon.**Das kleine Bild im Browser-Tab ist eine eigene Datei und trägt oft den Akzent. -**Die Browserleisten-Farbe.**Auf dem Handy färbt sich die Leiste über der Seite ein. Der Wert steht im Kopf der Seite, nicht im Stylesheet. -**Die Textmarkierung.**Was ein Besucher mit der Maus markiert, wird in der Akzentfarbe hinterlegt. -**Dekorative Grafiken.**Muster, Verläufe und bewegte Hintergründe holen ihre Farbe manchmal aus einem Skript statt aus dem Stylesheet. -**Das Vorschaubild beim Teilen.**Wer deinen Link in einem Messenger verschickt, sieht ein Bild, das noch die alte Farbe zeigen kann.** Ein Akzent, nicht zwei **Der Wunsch nach einer zweiten Signalfarbe kommt fast immer, und er macht das Design fast immer kaputt. Zwei Akzente heben sich gegenseitig auf, weil das Auge nicht mehr erkennt, was der wichtigste Knopf auf der Seite ist. Willst du mehr Vielfalt, hol sie über Flächen, Größen und Abstände. Eine Aufteilung, die trägt: rund 60 Prozent ruhige Grundfläche, 30 Prozent abgesetzte Flächen, höchstens 10 Prozent Akzent. ## Kontrast prüfen statt schätzen Eine Farbe kann auf deinem Bildschirm gut aussehen und trotzdem unlesbar sein: auf einem älteren Laptop, bei Sonne im Freien oder für Augen, die Kontraste schwächer wahrnehmen. Dafür gibt es feste Zahlen, und sie sind der Grund, warum manche Farbwünsche in der Umsetzung leicht verschoben werden. Die Werte stammen aus den Richtlinien für Barrierefreiheit und gelten als Untergrenze, nicht als Ziel. -**Fließtext:**mindestens 4,5 zu 1 gegen seine Fläche. -**Große Schrift**ab etwa 24 Pixeln, fett ab etwa 19 Pixeln: mindestens 3 zu 1. -**Bedienelemente:**Rahmen von Knöpfen und Feldern, Symbole und Fokusringe mindestens 3 zu 1 gegen die Nachbarfarbe. Schätzen funktioniert hier nicht. Besonders mittelhelle Töne täuschen. Orange, Gelbgrün und Türkis wirken kräftig und fallen als Schriftfarbe trotzdem durch. Lass deine KI rechnen, statt über den Eindruck zu diskutieren. Das schreibst du deiner KI Prüf die Kontraste nach meiner Farbänderung. Rechne für jedes wichtige Paar den Wert aus: Fließtext auf der Grundfläche, Fließtext auf Karten, Nebentext auf allen Flächen, Knopfbeschriftung auf dem Akzent, Akzent als Linkfarbe im Text und helle Schrift auf dunklen Bändern. Prüf das in der hellen und in der dunklen Fassung und nenn mir jeden Wert unter dem Grenzwert mit einem konkreten Korrekturvorschlag. Kopieren Fällt ein Ton durch, wird er heller oder dunkler geschoben, bis er besteht. Seine Rolle behält er. Manche Templates lösen das eleganter und führen zwei Fassungen derselben Markenfarbe: eine kräftige als Fläche und eine abgedunkelte als Schrift. Beide Wege sind sauber, entscheidend ist, dass der Text lesbar bleibt.** Farbe allein reicht nie **Ein Fehler im Formular darf nicht nur rot sein, ein Link nicht nur bunt. Beides braucht zusätzlich Text, ein Symbol oder eine Unterstreichung. Wer allein über Farbe informiert, verliert alle Besucher, die sie nicht unterscheiden können. ## Hell und Dunkel, beide Fassungen Viele Templates bringen beide Fassungen mit. Ein Schalter im Kopf der Seite wechselt zwischen ihnen, die Wahl merkt sich der Browser, und beim ersten Besuch entscheidet die Einstellung des Geräts. Technisch ist die dunkle Fassung ein zweiter Token-Block in derselben Datei. Er belegt dieselben Namen mit anderen Werten. Genau deshalb funktioniert der Dunkelmodus überhaupt: Die Bausteine fragen unverändert nach der Textfarbe, sie bekommen nur eine andere Antwort. Dunkel ist dabei keine Umkehr von Hell. Reines Weiß auf reinem Schwarz flimmert beim Lesen, und eine Akzentfarbe, die auf Weiß satt wirkt, sackt auf dunklem Grund oft weg. Deshalb hat die dunkle Fassung eigene, bewusst gewählte Werte. Für dich folgt daraus eine Gewohnheit: Jede Farbänderung wird in beiden Fassungen angesehen, nicht in einer. Der häufigste Fehler ist ein Akzent, der im Hellen gut sitzt und im Dunklen zu dunkel bleibt.** Den Dunkelmodus nie an Einzelstellen reparieren **Sieht im Dunkelmodus etwas falsch aus, liegt die Ursache in einem Token-Wert und nicht in der einzelnen Karte. Korrigier den Wert im dunklen Block. Eine Ausnahmeregel für eine Karte löst das Problem für heute und erzeugt zwei neue für den nächsten Wechsel. ## Die Schrift wechseln Eine Schriftfamilie reicht für die meisten Websites. Unterschiede entstehen über Gewicht, Größe und Laufweite, nicht über eine zweite Familie. Manche Templates arbeiten bewusst mit zweien, einer für Überschriften und einer für den Fließtext. Alles darüber wirkt unruhig und kostet zusätzlich Ladezeit. Der zweite Punkt wiegt schwerer als der Geschmack. Schriften liegen im Projekt und werden von deiner eigenen Adresse geladen, nie von einem fremden Server. Bindest du eine Schrift über einen fremden Dienst ein, überträgt der Browser jedes Besuchers dessen IP-Adresse dorthin, bevor irgendjemand zugestimmt hat. Das Landgericht München I hat 2022 in einem Fall dazu Schadenersatz zugesprochen, und danach ging eine Welle von Abmahnschreiben durchs Land. Wie du das für deine Seite einordnest, klärst du im Zweifel mit deiner Rechtsberatung. Lokal abgelegte Schriften stellen die Frage gar nicht erst. Lokal ist zusätzlich schneller. Browser trennen ihren Zwischenspeicher heute pro Website. Ein fremder Dienst spart dir also nichts mehr und kostet stattdessen einen weiteren Verbindungsaufbau, bevor der erste Buchstabe erscheint. ### Was Ladezeit kostet Jeder Schnitt ist eine eigene Datei. Vier Gewichte in normal und kursiv sind acht Dateien. Nimm nur die Schnitte, die du wirklich benutzt, verwende ausschließlich das Format WOFF2 und lade höchstens ein bis zwei Schnitte vorab. Der Rest darf nachkommen, solange die Seite in der Zwischenzeit lesbar bleibt. ### Was die Lizenz verlangt Nicht jede Schrift darf als Webfont eingebunden werden. Schriften unter der SIL Open Font License sind auch kommerziell frei nutzbar und deshalb der einfachste Weg. Bei gekauften Schriften brauchst du eine ausdrückliche Webfont-Lizenz, die oft nach Seitenaufrufen abgerechnet wird. Eine Schriftdatei vom eigenen Rechner zu kopieren ist keine Lizenz. Das schreibst du deiner KI Wechsle die Schrift des Projekts auf [Name der Schrift]. Nimm nur die Schnitte, die wir wirklich brauchen, leg sie als WOFF2 lokal im Projekt ab und binde sie dort ein, wo die bisherige Schrift eingebunden ist. Keine Einbindung über einen fremden Server. Nenn mir danach die Lizenz der Schrift, die Gesamtgröße der Dateien und jede Stelle, an der der alte Schriftname noch stand. Kopieren** Lesbarkeit vor Charakter **Fließtext ab 16 Pixeln auf dem Handy, Zeilenhöhe mindestens das Anderthalbfache der Schriftgröße, Zeilenlänge etwa 50 bis 75 Zeichen. Eine Schrift, die diese Werte nicht verträgt, ist eine Schrift für Überschriften und keine für Text. ## Abstände und Rundungen Abstände sind der Teil des Designs, der am stärksten wirkt und am seltensten bewusst wahrgenommen wird. In deinem Template liegen sie als Leiter vor: eine überschaubare Zahl fester Stufen, die überall wiederkehren. Eine Leiter ist freien Werten überlegen, weil freie Werte sich vermehren. Erst sind es 20 Pixel, dann 22, weil es an einer Stelle knapp aussah, dann 18 an einer anderen. Nach zehn Änderungen hat die Seite dreißig verschiedene Abstände, wirkt unruhig, und niemand kann sagen warum. Mit einer Leiter hast du bei jeder Entscheidung nur zwei Möglichkeiten: eine Stufe größer oder eine Stufe kleiner. Für Rundungen gilt dasselbe in klein. Meist gibt es zwei Werte, einen für Karten und große Flächen und einen für kleine Elemente. Willst du das Design weicher, änderst du diese Werte, nicht die einzelne Karte. Der umgekehrte Weg endet mit Knöpfen, die auf drei Seiten drei verschiedene Ecken haben. Das schreibst du deiner KI Ich möchte, dass Karten und Knöpfe weniger rund wirken und die Abschnitte etwas mehr Luft bekommen. Ändere beides über die Radius- und Abstands-Tokens, nicht an einzelnen Bausteinen. Zeig mir vorher, welche Tokens es gibt, welche Werte sie haben und welche Elemente jeweils daran hängen. Kopieren** Luft ist kein verschenkter Platz **Wirkt eine Seite gedrängt, liegt es selten am Inhalt und meist am Abstand zwischen den Abschnitten. Geh eine Stufe der Leiter hoch, statt einen neuen Zwischenwert zu erfinden. ## Der Styleguide im Browser In fast jedem Template liegt eine Datei `styleguide.html` im Hauptordner. Sie zeigt dein Design-System zum Ansehen: die Farbwelt in beiden Fassungen, die Schriftgrößen, die Knöpfe, Karten und typischen Abschnitte, alles mit dem echten Stylesheet deiner Website. Sie braucht keinen Bauschritt. Du öffnest sie im Browser und siehst den Stand deines Systems auf einer Seite. Nach einer Token-Änderung ist das die schnellste Kontrolle, die es gibt. Statt fünf Seiten durchzuklicken und zu hoffen, siehst du alle Bausteine nebeneinander. Der zweite Zweck ist Kommunikation. Arbeitest du mit einer Designerin, einer Agentur oder einer Kollegin zusammen, schick ihnen diese Datei. Sie ist ein vollständiges Briefing über dein System und beantwortet die meisten Rückfragen, bevor sie entstehen.** Der Styleguide bleibt bei dir **Diese Datei gehört nicht auf den Server. Sie ist eine interne Referenz und hat für Besucher keinen Zweck. Beim Hochladen schließt du sie aus, zusammen mit den Erklärdateien, dem Wissensordner und den Skills. In manchen Templates liegt sie ohnehin außerhalb des Ordners, der veröffentlicht wird, dann erledigt sich das von selbst. In manchen Templates sind die Werte im Styleguide von Hand aus den Tokens übernommen. Änderst du dort etwas, zieh den Styleguide mit. Sonst zeigt deine Referenz nach einiger Zeit etwas anderes als deine Website, und dann glaubt niemand mehr beiden. ## Logo und Favicon tauschen Das Logo liegt je nach Template als eigene Bilddatei im Bilderordner, oder es steckt als Grafik direkt im Code der Seite. Der zweite Fall ist häufiger, als man vermutet, und er hat eine Folge, die viele überrascht.** Eine Textsuche findet dein Logo nicht **Steckt die Wortmarke als Grafik im Code, besteht sie aus Linien und Kurven statt aus Buchstaben. Eine Suche nach dem alten Firmennamen läuft daran vorbei und meldet null Treffer, obwohl der Name deutlich sichtbar auf jeder Seite steht. Genauso verhält es sich mit Namen und Zahlen, die in ein Bild eingebrannt sind. Lass deine KI ausdrücklich auch nach Grafiken suchen, nicht nur nach Text. Das Favicon ist das kleine Bild im Browser-Tab und im Lesezeichen. Es liegt als eigene Datei bei den öffentlichen Dateien deines Projekts und trägt oft die Akzentfarbe. Wechselst du die Farbe, gehört es mit gewechselt, sonst bleibt genau dort die alte Marke stehen. Dazu kommt das Vorschaubild, das erscheint, wenn jemand deinen Link in einem Messenger oder in einem sozialen Netzwerk teilt. In vielen Templates ist das im Auslieferungszustand ein Bild der erfundenen Person. Es gehört vor dem Livegang ersetzt, mehr dazu steht im Kapitel [Live gehen](https://ai-website.com/de/docs/launch). Das schreibst du deiner KI Tausch das Logo gegen meine Datei [Pfad zur Datei]. Such vorher alle Stellen, an denen das bisherige Logo vorkommt, ausdrücklich auch die, an denen es als Grafik im Code steht und nicht als Bilddatei. Denk an das Favicon, an das Vorschaubild fürs Teilen und an die einfarbige Fassung für dunkle Flächen. Liste mir am Ende jede geänderte Stelle auf. Kopieren** Drei Fassungen reichen **Eine Fassung in voller Farbe, eine einfarbige für dunkle Flächen und ein reduziertes Zeichen für kleine Größen. Halte rundherum immer etwas Abstand frei und zieh das Logo nie in die Breite, um eine Lücke zu füllen. ## Die Versionsnummer im statischen Template Damit deine Website schnell lädt, speichert der Browser die Gestaltungsdatei beim ersten Besuch und benutzt danach die gespeicherte Fassung, ohne nachzufragen. In statischen Templates ist diese Speicherzeit bewusst sehr lang eingestellt, teils ein ganzes Jahr. Das ist gut für die Ladezeit und wird in dem Moment zum Problem, in dem du die Datei änderst. Deshalb hängt an jeder Einbindung eine Versionsnummer, und diese Nummer ist deine Aufgabe.** Statisches Template: die Nummer hochzählen **Änderst du `assets/css/style.css` oder eine andere Gestaltungs- oder Skriptdatei, zähl die Versionsnummer im Verweis hoch. Aus `style.css?v=12` wird `style.css?v=13`, und zwar auf jeder Seite, die die Datei einbindet. Unterlässt du das, siehst du deine Änderung nach einem harten Neuladen, während Besucher mit gespeicherter Fassung wochenlang die alte Website sehen. Es sieht aus wie ein Fehler in deiner Arbeit, und es ist keiner. Bei Templates mit Bauschritt entfällt das. Dort bekommt jede erzeugte Datei beim Bauen einen Namen mit Prüfsumme, der sich bei jeder Änderung mitändert. Der Browser hält die neue Datei für eine andere Datei und lädt sie. Das schreibst du deiner KI Ich habe eine Gestaltungsdatei geändert. Zähl die Versionsnummer im Verweis hoch, und zwar auf allen Seiten, die die Datei einbinden. Sag mir danach, wie viele Dateien du angefasst hast und ob irgendwo noch die alte Nummer steht. Kopieren ## Was du besser nicht anfasst Nicht alles, was sich ändern lässt, sollte geändert werden. Diese drei Bereiche sind im Template zu Ende gedacht, und ein Eingriff kostet dort mehr, als er bringt. ### Das Bewegungssystem Einblendungen beim Scrollen, Übergänge und dezente Effekte laufen über ein zentrales System und über wenige Angaben im Code. Dieses System achtet an einer Stelle darauf, ob ein Besucher in seinem Betriebssystem weniger Bewegung eingestellt hat, und hält dann still. Wer eigene Animationen danebenbaut, umgeht diese Rücksicht meist, ohne es zu merken. Mehr Bewegung macht eine Website ohnehin selten besser, sie wirkt schnell unruhig und verzögert das Lesen. Nutze die vorhandenen Angaben, statt neue Effekte einzuführen. ### Die Rasterbreiten Wie breit der Inhalt läuft, wo er umbricht und wie viele Spalten ein Abschnitt hat, ist auf drei Gerätegrößen abgestimmt. Eine Breite hier zu vergrößern wirkt am Schreibtisch großzügig und erzeugt auf dem Handy einen Balken, der sich seitlich schieben lässt. Das ist einer der wenigen Fehler, den Besucher sofort bemerken. ### Komponenten einzeln umstylen Eine Karte, die anders aussehen soll als alle anderen Karten, ist fast immer der Anfang eines Systems, das auseinanderfällt. Nach fünf solchen Ausnahmen gibt es kein System mehr, sondern eine Sammlung von Sonderfällen, und jede Token-Änderung greift nur noch zur Hälfte. Soll eine Stelle wirklich anders sein, ist die bessere Frage, ob daraus ein neuer, benannter Baustein wird, den es dann überall gibt. Dieselbe Zurückhaltung gilt für die Schriftgrößen-Leiter und für die Zeilenhöhen. Sie sind aufeinander abgestimmt, und ein einzelner geänderter Wert wirkt an drei anderen Stellen mit, die du beim Ändern nicht vor Augen hast. ## Die Prüfrunde nach jeder Änderung Design-Änderungen sind schnell gemacht und zeigen ihre Nebenwirkungen an Stellen, an die man beim Ändern nicht denkt. Diese Runde kostet zehn Minuten und fängt fast alles ab. - Die Änderung steht in den Tokens, nicht in einzelnen Seiten - Helle und dunkle Fassung sind beide angesehen - Die Kontraste der wichtigsten Paare sind gerechnet und liegen über dem Grenzwert - Knöpfe sind im Ruhezustand, beim Überfahren und mit Tastatur-Fokus geprüft - Formularfelder, Fehlermeldungen und Hinweise sehen weiterhin richtig aus - Bei 390, 768 und 1440 Pixeln Breite nachgesehen - Auf dem Handy lässt sich nichts seitlich verschieben - Favicon, Browserleisten-Farbe und Vorschaubild tragen die neue Farbe - Der Styleguide zeigt denselben Stand wie die Website - Beim statischen Template ist die Versionsnummer hochgezählt Das schreibst du deiner KI Ich habe das Design geändert. Geh die Prüfrunde durch: Kontraste in beiden Fassungen, Knöpfe in allen Zuständen inklusive Tastatur-Fokus, Formularfelder und Fehlermeldungen, seitlicher Überlauf bei 390, 768 und 1440 Pixeln Breite, und ob irgendwo noch ein alter Farbwert direkt in einer Seite steht. Gib mir eine Liste nach Dringlichkeit sortiert. Kopieren** Der Rahmen steht, jetzt zählt der Inhalt ** Wenn Farbe, Schrift und Abstände sitzen, ist der Rahmen fertig, und der Rest entscheidet sich über das, was darin steht. Wie du deine Seiten so aufbereitest, dass Menschen und KI-Assistenten dich finden, steht im Kapitel [SEO und Sichtbarkeit](https://ai-website.com/de/docs/seo). --- Canonical page: https://ai-website.com/de/docs/design