/* Anfang: Goerdes Webdesign Theme: Farbgebung Blau, Orange und helle Headerfläche Zweck: Diese Datei sammelt die zentralen Farbrollen des Child Themes. Grundidee des Themes: Blau = Links, Navigation, Orientierung und sachliche Klarheit. Orange = Tastaturfokus, Hinweise, aktive Hervorhebung und warme Akzente. Grau, Weiß und sehr helles Blaugrau = ruhige, gut lesbare Textflächen. Neue Richtung für den Header: Der Header soll nicht düster wirken. Deshalb werden dort keine großen dunkelblauen Flächen mehr verwendet. Stattdessen verwendet der Header: 1. sehr helles Blaugrau als Grundfläche, 2. halbtransparentes Weiß als helle Bildüberlagerung, 3. dunkles Blaugrau für gut lesbaren Text, 4. kräftiges Blau für Navigation und Links, 5. Rostorange nur als warmer Akzent für Hover und Tastaturfokus. Barrierefreiheit: Die Farben sind so gewählt, dass Text und Navigation auf hellen Flächen gut lesbar bleiben. Der Tastaturfokus bleibt deutlich sichtbar. Orange wird nicht als reine Schmuckfarbe verwendet, sondern als erkennbare Bedienhilfe. Wichtig: Diese Datei definiert nur Farbrollen. Die konkrete Verwendung im Header erfolgt in: /wp-content/themes/goerdes-webdesign-theme/assets/css/header.css Ende der allgemeinen Erklärung. */ :root { /* Anfang: Grundfarben der Website Diese Farben gelten für die normalen Inhaltsbereiche der Website. Sie bleiben bewusst ruhig, hell und textfreundlich. --goerdes-color-background: Sehr helles, kühles Blaugrau. Diese Farbe wirkt ruhiger als reines Weiß und eignet sich gut als allgemeiner Seitenhintergrund. --goerdes-color-surface: Reines Weiß. Diese Farbe eignet sich für Inhaltsflächen, Karten, Kommentarbereiche oder klar abgegrenzte Textbereiche. --goerdes-color-text: Fast schwarzes, sehr dunkles Blaugrau. Diese Farbe ist die wichtigste normale Textfarbe. --goerdes-color-text-muted: Dunkles Schiefergrau. Diese Farbe eignet sich für zurückhaltende Zusatzinformationen. */ --goerdes-color-background: #F4F6F8; /* sehr helles, kühles Blaugrau */ --goerdes-color-surface: #FFFFFF; /* reines Weiß */ --goerdes-color-text: #111827; /* fast schwarzes, sehr dunkles Blaugrau */ --goerdes-color-text-muted: #4B5563; /* dunkles Schiefergrau */ /* Ende: Grundfarben der Website */ /* Anfang: Blau für Links und Orientierung Blau bleibt die zentrale Orientierungsfarbe des Themes. Diese Farben werden für normale Links, Navigation und aktive Bereiche verwendet. --goerdes-color-link: Kräftiges, dunkles Blau. Gut geeignet für normale Textlinks auf hellem Hintergrund. --goerdes-color-link-hover: Sehr dunkles Marineblau. Wird verwendet, wenn ein Link mit der Maus berührt wird. --goerdes-color-active: Tiefes Dunkelblau. Geeignet für aktive Zustände, die stärker hervorgehoben werden müssen. */ --goerdes-color-link: #0B4F8A; /* kräftiges, dunkles Blau */ --goerdes-color-link-hover: #083A66; /* sehr dunkles Marineblau */ --goerdes-color-active: #062F4F; /* tiefes Dunkelblau */ /* Ende: Blau für Links und Orientierung */ /* Anfang: Orange für Fokus, Hinweise und warme Akzente Orange ist die zentrale Akzentfarbe des Themes. Sie soll nicht großflächig verwendet werden. Sie ist vor allem für Fokus, Hinweise und aktive Bedienzustände gedacht. --goerdes-color-focus: Kräftiges Rostorange. Diese Farbe ist wichtig für den sichtbaren Tastaturfokus. Sie soll vor allem für outline, border oder box-shadow verwendet werden. Sie sollte nicht als normale Textfarbe auf hellorangefarbenem Hintergrund verwendet werden. --goerdes-color-focus-background: Sehr helles Cremeorange. Diese Farbe kann beim Fokus hinter dem Text liegen und macht den Fokus besser sichtbar. --goerdes-color-focus-text: Fast schwarzes, sehr dunkles Blaugrau. Diese Farbe ist für Text gedacht, wenn ein Element den hellorangefarbenen Fokus-Hintergrund bekommt. Dadurch bleibt der Text besser lesbar als mit orangefarbener Schrift. --goerdes-color-notice-border: Dunkles Kupferorange. Diese Farbe eignet sich für Hinweis-Rahmen. --goerdes-color-notice-background: Sehr helles Warmorange. Diese Farbe eignet sich für dezente Hinweisflächen. */ --goerdes-color-focus: #C05621; /* kräftiges Rostorange für Fokusrahmen, Linien und Schatten */ --goerdes-color-focus-background: #FFF3E6; /* sehr helles Cremeorange für Fokus-Hintergründe */ --goerdes-color-focus-text: #111827; /* dunkle Textfarbe auf hellorangefarbenem Fokus-Hintergrund */ --goerdes-color-notice-border: #B45309; /* dunkles Kupferorange */ --goerdes-color-notice-background: #FFF7ED; /* sehr helles Warmorange */ /* Ende: Orange für Fokus, Hinweise und warme Akzente */ /* Anfang: Rahmen und Linien Rahmen und Linien sollen sichtbar sein, aber nicht hart wirken. --goerdes-color-border: Helles Blaugrau. Geeignet für normale Trennlinien und dezente Rahmen. --goerdes-color-border-strong: Neutrales Mittelgrau. Geeignet für stärkere Trennungen, wenn mehr Sichtbarkeit nötig ist. */ --goerdes-color-border: #CBD5E1; /* helles Blaugrau */ --goerdes-color-border-strong: #6B7280; /* neutrales Mittelgrau */ /* Ende: Rahmen und Linien */ /* Anfang: Header-Farben für einen hellen, freundlichen Seitenkopf Diese Farben sind speziell für den oberen Seitenbereich gedacht. Neue gestalterische Richtung: Der Header soll freundlich, hell, ruhig und einladend wirken. Er soll nicht wie eine düstere Thriller-Oberfläche aussehen. Wichtig: Der Thriller-Ton entsteht durch die Texte. Die Website selbst soll Orientierung, Vertrauen und Leselust vermitteln. Das dekorative Headerbild kann helle Blautöne, helles Grau und warme orangefarbene Akzente enthalten. Große dunkelblaue Flächen sollen vermieden werden. --goerdes-color-header-background: Sehr helles, freundliches Blaugrau. Das ist die sichere Grundfarbe des Headers, falls das Bild nicht lädt. --goerdes-color-header-overlay: Halbtransparentes Weiß. Diese helle Schicht liegt über dem Headerbild. Sie hellt das Bild auf, beruhigt unruhige Stellen und verhindert eine düstere Wirkung. --goerdes-color-header-text: Fast schwarzes, sehr dunkles Blaugrau. Diese Farbe ist für den Website-Titel im hellen Header gedacht. --goerdes-color-header-text-muted: Dunkles Schiefergrau. Diese Farbe ist für die Website-Beschreibung oder zurückhaltenden Zusatztext gedacht. --goerdes-color-header-navigation-background: Reines Weiß. Die Hauptnavigation bekommt damit eine eigene helle Fläche. Die Menülinks liegen dadurch nicht direkt auf dem Bild. Das verbessert die Lesbarkeit, besonders bei grafischen Headerbildern. --goerdes-color-header-navigation-link: Kräftiges, dunkles Blau. Diese Farbe macht die Menülinks klar erkennbar. --goerdes-color-header-navigation-link-hover: Kräftiges Rostorange. Diese Farbe ist der warme Hover-Akzent für sehende Mausnutzer. --goerdes-color-header-border: Helles Blaugrau. Diese Farbe trennt Header, Navigation und Inhalt ruhig voneinander. */ --goerdes-color-header-background: #EAF3F8; /* sehr helles, freundliches Blaugrau */ --goerdes-color-header-overlay: rgba(255, 255, 255, 0.68); /* halbtransparentes Weiß; hellt das Headerbild auf */ --goerdes-color-header-text: #111827; /* fast schwarzes, sehr dunkles Blaugrau */ --goerdes-color-header-text-muted: #4B5563; /* dunkles Schiefergrau */ --goerdes-color-header-navigation-background: #FFFFFF; /* reines Weiß; sorgt dafür, dass Navigationslinks nicht direkt auf dem grafischen Headerbild liegen */ --goerdes-color-header-navigation-link: #0B4F8A; /* kräftiges, dunkles Blau */ --goerdes-color-header-navigation-link-hover: #C05621; /* kräftiges Rostorange */ --goerdes-color-header-border: #CBD5E1; /* helles Blaugrau */ /* Ende: Header-Farben für einen hellen, freundlichen Seitenkopf */ /* Anfang: Twenty Twenty-One Variablen vorsichtig überschreiben Twenty Twenty-One verwendet eigene globale CSS-Variablen. Diese Werte werden hier behutsam auf die Goerdes-Webdesign-Theme-Farbrollen gelegt. Wichtig: Das Parent Theme wird nicht verändert. Es werden nur Variablen im Child Theme überschrieben. Dadurch bleibt das Child Theme update-sicherer. */ --global--color-background: var(--goerdes-color-background); --global--color-primary: var(--goerdes-color-text); --global--color-secondary: var(--goerdes-color-text-muted); --global--color-border: var(--goerdes-color-border); --global--color-white: var(--goerdes-color-surface); /* Ende: Twenty Twenty-One Variablen vorsichtig überschreiben */ } /* Ende: Goerdes Webdesign Theme: Farbgebung Blau, Orange und helle Headerfläche */