/* Theme Name: tegrafo Storefront Child Theme URI: https://shop-test.tegrafo.de/ Description: Child-Theme von Storefront für den Amnesty-Merchshop (tegrafo e.K.). CSS- und Funktions-Anpassungen leben hier statt im Parent-Theme, damit Storefront-Updates nichts überschreiben. Author: tegrafo e.K. Template: storefront Version: 1.90.29 Text Domain: tegrafo-storefront-child License: Proprietary Nutzungsrechte: Rahmenvertrag tegrafo/AMNESTY, Abschnitt „Urheber- und Nutzungsrechte“ – Erklärung im Kopf von wp-content/plugins/tegrafo-merchshop-core/tegrafo-merchshop-core.php */ /* ========================================================================== Amnesty Corporate Identity – globale Styles Quelle aller Werte: Handbuch_Corporate_Identity.pdf, S. 9 (Farben), S. 16–17 (Typografie). Abweichungen sind an Ort und Stelle begründet. Aufbau: 1. Schriften (self-hosted, keine externen Requests) 2. Design-Tokens 3. Grundlayout und Abstände 4. Typografie 5. Links 6. Buttons 7. Formularfelder 8. Fokus und Bedienhilfen 9. Kopfbereich 10. Fußbereich 11. Shop-Übersicht und Produktarchiv 12. Produktseite 13. Startseite: Bildbereich mit Aktionsbalken 14. Warenkorb und Kasse 15. Konto- und Anmeldebereich 16. Symbole, Hinweise, Zahlungsarten 17. Feinschliff Kopfbereich und Seitenkopf 18. Social Media im Fußbereich 19. Kennzeichnung Shop, Warenkorb-Typografie, Versandhinweis 20. Variantenauswahl als Schaltflächen 21. Mitlaufender Kopfbereich, Fußbereich am unteren Rand 22. Startseite: Bereichsauswahl 23. Bereichsumschalter (alle Seiten außer Startseite) 24. Vertrauenshinweise 25. Ticketsystem (SupportCandy) 26. Telefonzeiten mit Erreichbarkeit 27. Hilfe-Seite: E-Mail als Notausgang unter dem Formular 28. Farbhinweis in der Produktübersicht 29. Größentabelle ========================================================================== */ /* 1. Schriften ============================================================= Das Handbuch schreibt die Amnesty Trade Gothic vor und nennt Arial als Systemschrift, wenn die Hausschrift nicht installiert werden kann (S. 16, Pkt. 1). Trade Gothic ist nicht self-hostbar; Roboto tritt mit Freigabe vom 16.09.2026 an ihre Stelle – Roboto Condensed für Überschriften (entspricht Trade Gothic Condensed No. 20/18), Roboto Regular für Fließtext (entspricht Trade Gothic Roman). Arial bleibt als erster Fallback stehen und ist damit weiterhin die vom Handbuch vorgesehene Ersatzschrift. Self-hosted als WOFF2, keine Einbindung über fonts.googleapis.com – der Shop läuft cookie-frei und darf keine externen Ressourcen nachladen (§25 TDDDG). Lizenz: SIL Open Font License 1.1, siehe assets/fonts/OFL.txt. Kursive Schnitte sind bewusst nicht eingebunden: Das Handbuch kennt keine Kursiv-Auszeichnung (Hervorhebungen werden gelb markiert oder unterstrichen, S. 17 Pkt. 4) – spart zwei Dateien. */ @font-face { font-family: "Roboto"; src: url("assets/fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("assets/fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("assets/fonts/roboto-condensed-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("assets/fonts/roboto-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* 2. Design-Tokens ========================================================= */ :root { /* --- Primärfarben (Handbuch S. 9) --- */ --tg-gelb: #ffff00; /* Amnesty Gelb, HKS 3, CMYK 0/0/100/0 */ --tg-schwarz: #000000; /* HKS 88, CMYK 0/0/0/100 */ --tg-weiss: #ffffff; /* --- Sekundärfarben (Handbuch S. 9): warme Grautöne für Hintergründe, Informationskästen und Grafiken. Nicht für Text. --- */ --tg-hellgrau: #c7c2ba; /* Pantone Warm Grey 3 C */ --tg-grau: #a59d95; /* Pantone Warm Grey 6 C */ --tg-dunkelgrau: #766a62; /* Pantone Warm Grey 10 C */ /* --- Semantische Zuordnung --- Gelb ist ausschließlich der Handlungsebene vorbehalten: "Es ist wichtig, mit dem Gelb sparsam umzugehen und die Farbe nicht für dekorative Zwecke zu missbrauchen, damit sie ihre Kraft nicht verliert." (S. 9, Pkt. 3) */ --tg-text: var(--tg-schwarz); --tg-text-leise: var(--tg-dunkelgrau); /* 5,2:1 auf Weiß – WCAG AA */ --tg-flaeche: var(--tg-weiss); --tg-flaeche-info: var(--tg-hellgrau); /* Infokästen, 11,9:1 mit Schwarz */ --tg-linie: var(--tg-hellgrau); --tg-linie-kraeftig: var(--tg-schwarz); --tg-aktion-flaeche: var(--tg-gelb); /* CTA, 19,6:1 mit Schwarz */ --tg-aktion-text: var(--tg-schwarz); --tg-markierung: var(--tg-gelb); /* "wie mit einem Textmarker" (S. 20) */ /* --- Schriftfamilien --- */ --tg-font-text: "Roboto", Arial, Helvetica, sans-serif; --tg-font-headline: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; /* --- Schriftgrößen --- Das Handbuch staffelt im Verhältnis 1:2 (80/40/20/10 pt auf DIN A4, S. 17). Auf dem Bildschirm ist diese Staffel zu grob: 8,5 pt wäre unlesbar, 80 pt sprengt jedes Handy-Display. Die Hierarchie und ihre Reihenfolge bleiben erhalten, die Sprünge sind fluid gestaucht. */ --tg-fs-hero: clamp(2.25rem, 1.50rem + 3.20vw, 3.50rem); /* 36 → 56 px */ --tg-fs-h1: clamp(1.875rem, 1.45rem + 1.80vw, 2.50rem); /* 30 → 40 px */ --tg-fs-h2: clamp(1.50rem, 1.33rem + 0.75vw, 1.75rem); /* 24 → 28 px */ --tg-fs-h3: clamp(1.1875rem, 1.16rem + 0.12vw, 1.25rem);/* 19 → 20 px */ --tg-fs-text: 1.0625rem; /* 17 px */ --tg-fs-klein: 0.875rem; /* 14 px – Marginalien, Bildunterschriften, Pflichtangaben (Rolle: Trade Gothic Cn No. 18) */ --tg-fs-button: 1rem; /* 16 px */ --tg-fs-navigation: 1.125rem; /* 18 px – die Navigation trägt den ganzen Kopfbereich und darf etwas kräftiger sein als ein Knopf im Fließtext */ /* --- Zeilenabstände --- */ --tg-lh-hero: 1.05; --tg-lh-headline: 1.15; --tg-lh-text: 1.65; /* --- Laufweite --- Die Spationierungswerte des Handbuchs (−5 bis +10) sind InDesign-Einheiten zu 1/1000 em, auf dem Bildschirm praktisch wirkungslos. Für Versalien braucht es spürbar mehr, sonst kleben die Großbuchstaben. */ --tg-ls-versal: 0.02em; --tg-ls-versal-klein: 0.04em; /* je kleiner der Grad, desto mehr Luft */ /* --- Abstände: 4er-Raster --- */ --tg-space-3xs: 0.25rem; /* 4 px */ --tg-space-2xs: 0.5rem; /* 8 px */ --tg-space-xs: 1rem; /* 16 px */ --tg-space-s: 1.5rem; /* 24 px */ --tg-space-m: 2.5rem; /* 40 px */ --tg-space-l: 4rem; /* 64 px */ --tg-space-xl: 6rem; /* 96 px */ /* --- Maße --- */ --tg-container: 75rem; /* 1200 px */ --tg-textbreite: 68ch; /* Lesebreite für Fließtext */ --tg-radius: 0; /* Flächen und Kästen bleiben eckig. Die Vorgabe "immer gerade Seitenränder und eine rechteckige Form" (S. 14) gilt dem Aktionsbalken – der gelben Fläche auf Bildern –, nicht den Bedienelementen. */ --tg-radius-knopf: 4px; /* Knöpfe mit leicht gerundeten Ecken, wie auf amnesty.de. */ /* Zustandsfarbe der gelben Knöpfe beim Überfahren und bei Tastaturfokus. Schwarz darauf erreicht 15,0:1. */ --tg-gelb-aktiv: #ffd700; } /* 3. Grundlayout und Abstände ============================================== Mobile-first: Der Seitenrand ist auf kleinen Displays schmaler als Storefronts Standard (2,62 em ≈ 42 px), damit Produktbilder größer werden können. Ab Tablet wird er wieder großzügiger. */ .col-full { max-width: var(--tg-container); padding-left: var(--tg-space-xs); padding-right: var(--tg-space-xs); } @media (min-width: 48em) { .col-full { padding-left: var(--tg-space-m); padding-right: var(--tg-space-m); } } /* Luft zwischen den großen Seitenabschnitten – der wichtigste Hebel für "offener und weniger dicht". */ #content.site-content { padding-top: var(--tg-space-m); padding-bottom: var(--tg-space-l); } @media (min-width: 48em) { #content.site-content { padding-top: var(--tg-space-l); padding-bottom: var(--tg-space-xl); } } /* 4. Typografie ============================================================ */ body, button, input, select, textarea { color: var(--tg-text); font-family: var(--tg-font-text); font-size: var(--tg-fs-text); line-height: var(--tg-lh-text); } /* Fließtext bekommt eine begrenzte Lesebreite. Tabellen, Raster und WooCommerce-Bausteine sind ausgenommen, die brauchen die volle Breite. */ .entry-content > p, .entry-content > ul, .entry-content > ol, .woocommerce-product-details__short-description, .term-description > p { max-width: var(--tg-textbreite); } h1, h2, h3, h4, h5, h6 { color: var(--tg-text); font-family: var(--tg-font-headline); font-weight: 700; line-height: var(--tg-lh-headline); /* Handbuch S. 17, Pkt. 6: "Überschriften und Fließtext werden immer linksbündig ausgerichtet." */ text-align: left; text-wrap: balance; margin-top: 0; margin-bottom: var(--tg-space-s); } /* Versalien laut Handbuch S. 16, Pkt. 2. Umgesetzt über text-transform, damit im Markup die normale Schreibweise stehen bleibt – wichtig für Screenreader, Suchmaschinen und Copy-&-Paste. */ h1, h2, h3 { text-transform: uppercase; letter-spacing: var(--tg-ls-versal); } h1 { font-size: var(--tg-fs-h1); } h2 { font-size: var(--tg-fs-h2); } h3 { font-size: var(--tg-fs-h3); } h4, h5, h6 { font-size: var(--tg-fs-text); letter-spacing: var(--tg-ls-versal); } /* Ausnahme von der Versalien-Regel: Produkttitel sind Daten, keine Headlines. Lange deutsche Artikelnamen in Großbuchstaben sind schlechter lesbar. Freigabe dieser Abweichung am 16.09.2026. */ .product_title, .woocommerce-loop-product__title, .wc-block-components-product-name, .product-name, .widget .product-title { text-transform: none; letter-spacing: 0; font-family: var(--tg-font-headline); } /* Kleintexte: Marginalien, Bildunterschriften, Pflichtangaben. Im Handbuch die Rolle der Trade Gothic Condensed No. 18 (S. 16, Pkt. 4). */ small, .wc-gzd-additional-info, .woocommerce-price-suffix, .wc-gzd-product-units, figcaption, .entry-meta { font-family: var(--tg-font-headline); font-size: var(--tg-fs-klein); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--tg-text-leise); } /* Hervorhebung im Fließtext: gelb markiert wie mit einem Textmarker (Handbuch S. 17, Pkt. 4 und S. 20). */ mark, .entry-content mark { background-color: var(--tg-markierung); color: var(--tg-schwarz); padding: 0 var(--tg-space-3xs); } hr { border: 0; border-top: 1px solid var(--tg-linie); margin: var(--tg-space-m) 0; } ::selection { background-color: var(--tg-gelb); color: var(--tg-schwarz); } /* 5. Links ================================================================= Amnesty Gelb erreicht auf Weiß nur 1,07:1 und ist als Linkfarbe unbrauchbar. Links sind deshalb schwarz und unterstrichen – damit sind sie auch ohne Farbwahrnehmung erkennbar (WCAG 1.4.1). Beim Hover legt sich die gelbe Markierung dahinter; das ist exakt die Handbuchregel "Hervorhebungen werden gelb markiert. Ist dies nicht möglich, wird unterstrichen." (S. 17, Pkt. 4). */ a { color: var(--tg-text); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; transition: background-color 120ms linear; } a:hover, a:focus { color: var(--tg-schwarz); background-color: var(--tg-markierung); } /* Keine Unterstreichung und keine Markierung bei Bedienelementen und Bildlinks – dort wäre beides nur Unruhe. */ a.button, a.added_to_cart, /* Die Blöcke in Warenkorb und Kasse setzen ihre Knöpfe teils als um – ohne diesen Eintrag bekämen sie die Unterstreichung der Textlinks. */ a.wc-block-components-button, .wc-block-components-button, .wc-block-components-totals-coupon-link, .main-navigation a, .storefront-primary-navigation a, .site-header a, .site-branding a, .woocommerce-loop-product__link, .woocommerce-product-gallery a, .flex-control-nav a, .page-numbers, .wc-tabs a, .woocommerce-MyAccount-navigation a { text-decoration: none; } /* Storefront unterstreicht Links im Inhaltsbereich über `.hentry .entry-content a` – zwei Klassen und ein Element und damit spezifischer als die Ausnahmeliste oben. Warenkorb, Kasse und Kontobereich liegen genau dort, ihre Knöpfe bekamen deshalb trotz der Ausnahme eine Unterstreichung. Für Bedienelemente im Inhalt muss die Ausnahme denselben Vorspann tragen. */ .hentry .entry-content a.button, .hentry .entry-content a.added_to_cart, .hentry .entry-content a.wc-block-components-button, .hentry .entry-content .wc-block-components-button, .hentry .entry-content .wc-block-components-totals-coupon-link, .hentry .entry-content .woocommerce-loop-product__link, .hentry .entry-content .wc-tabs a, .hentry .entry-content .page-numbers { text-decoration: none; } a.button:hover, a.added_to_cart:hover, .woocommerce-loop-product__link:hover, .woocommerce-product-gallery a:hover, .site-branding a:hover { background-color: transparent; } /* Storefront hellt die Hover-Farbe der Zweitnavigation auf #8F837B auf – 3,7:1 auf Weiß und damit unter WCAG AA. Beim Hover wird stattdessen nicht heller, sondern dunkler. Die eigentliche Navigation kommt in Schritt (b). */ .secondary-navigation ul.menu a:hover { color: var(--tg-schwarz); } /* 6. Buttons =============================================================== Gelb mit schwarzer Schrift ist die stärkste Kombination der CI (19,6:1) und trägt inhaltlich genau das, was ein CTA braucht: "Gelb ist die Farbe der Dringlichkeit und steht für Intervention und Protest." (S. 9, Pkt. 2) Rollenverteilung: .button.alt → die eigentliche Handlung (In den Warenkorb, Zur Kasse) = gelb .button → Nebenhandlungen (Warenkorb aktualisieren, Gutschein) = hellgrau Die Farbwerte selbst liefert Storefronts Customizer-CSS, gefüttert über die Filter in functions.php. Hier steht nur Form und Typografie. */ button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-block-button__link, a.button { font-family: var(--tg-font-headline); font-size: var(--tg-fs-button); font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: var(--tg-ls-versal-klein); text-align: center; border: 0; border-radius: var(--tg-radius-knopf); padding: var(--tg-space-xs) var(--tg-space-s); /* Mindestens 44 px hoch – Touch-Ziel nach WCAG 2.5.5 */ min-height: 2.75rem; text-shadow: none; } /* Die Hover-Farben erzeugt Storefront selbst aus den CI-Werten oben: Gelb #FFFF00 → #E6E600, Hellgrau #C7C2BA → #AEA9A1, jeweils mit schwarzer Schrift (19,6:1 bzw. 9,0:1). Hier deshalb nur den Textschatten entfernen, den Storefront auf Buttons legt. */ button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .wp-block-button__link:hover, a.button:hover { text-shadow: none; } /* Die gelben Handlungsknöpfe bekommen beim Überfahren und bei Tastaturfokus ein satteres Gelb statt Storefronts abgedunkeltem #E6E600 – auf amnesty.de ist das die Zustandsfarbe. Schwarz darauf erreicht 15,0:1. */ /* Die Selektorliste spiegelt die von Storefront erzeugte Regel eins zu eins. Beim ersten Anlauf war nur `.button.alt:hover` abgedeckt – Storefront führt aber auch `.widget-area .widget a.button.alt:hover` mit vier Klassen, und diese Variante gewann weiter mit #E6E600. Gleiche Selektoren, später im Quelltext, also gewinnen unsere. */ button.alt:hover, button.alt:focus-visible, input[type="button"].alt:hover, input[type="button"].alt:focus-visible, input[type="reset"].alt:hover, input[type="reset"].alt:focus-visible, input[type="submit"].alt:hover, input[type="submit"].alt:focus-visible, .button.alt:hover, .button.alt:focus-visible, .widget-area .widget a.button.alt:hover, .widget-area .widget a.button.alt:focus-visible, .site-header-cart .widget_shopping_cart a.button.alt:hover, .site-header-cart .widget_shopping_cart a.button.alt:focus-visible, .single_add_to_cart_button:hover, .single_add_to_cart_button:focus-visible { background-color: var(--tg-gelb-aktiv); border-color: var(--tg-gelb-aktiv); color: var(--tg-schwarz); } /* Auf schmalen Displays laufen die Haupt-Buttons über die volle Breite – größere Trefferfläche, klarere Handlungsaufforderung. */ @media (max-width: 47.99em) { .single_add_to_cart_button, .checkout-button, .wc-proceed-to-checkout .button, .woocommerce-form-login .button, .woocommerce-form-register .button { display: block; width: 100%; } } /* 7. Formularfelder ======================================================== Nur Optik. Die Feldlogik von Germanized (Pflichtfelder, Reihenfolge, Checkboxen im Checkout) bleibt unangetastet. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea, .input-text { background-color: var(--tg-weiss); border: 1px solid var(--tg-dunkelgrau); border-radius: var(--tg-radius); box-shadow: none; color: var(--tg-text); padding: var(--tg-space-2xs) var(--tg-space-xs); min-height: 2.75rem; } input::placeholder, textarea::placeholder { color: var(--tg-text-leise); opacity: 1; } label { font-family: var(--tg-font-headline); font-weight: 400; letter-spacing: 0; } /* Die Sternchen-Pflichtfeldmarkierung von WooCommerce/Germanized bleibt erhalten, wird aber nicht mehr in einer Signalfarbe gesetzt – Gelb wäre hier unlesbar, Rot ist nicht Teil der CI. */ .required, .woocommerce form .form-row .required { color: var(--tg-text); text-decoration: none; } /* 8. Fokus und Bedienhilfen ================================================ Ein rein gelber Fokusrahmen erreicht auf Weiß 1,07:1 und verfehlt die 3:1-Anforderung für Nicht-Text-Kontraste (WCAG 1.4.11) deutlich. Der Rahmen ist deshalb schwarz: 21:1 auf Weiß, auf dem gelben Knopf immer noch 19,6:1, im schwarzen Fußbereich wird er weiß (Abschnitt 10). Ein zusätzlicher gelber Außenring war der erste Entwurf. Auf Bedienelementen mit viel Innenabstand – Navigationspunkte, Reiter – wurde daraus ein sehr wuchtiger Kasten; er ist am 16.09.2026 wieder entfallen. */ /* Der Rahmen gilt ausdrücklich nur für Bedienelemente, nicht für beliebige Elemente. Grund: Storefront und die WooCommerce-Blöcke geben reinen Layout-Behältern ein `tabindex="-1"`, damit Sprungmarken und die Fehlerbehandlung im Checkout sie anspringen können – darunter `#content`, das die ganze Seite umfasst. Mit der Tabulatortaste sind solche Behälter nicht erreichbar, sie erhalten den Fokus nur per Skript. Chrome wertet das nicht als Tastaturbedienung und zeichnet nichts; Firefox schon. Dort zog sich dann ein Rahmen um den gesamten Inhaltsbereich, sichtbar als zwei senkrechte Linien über die volle Seitenhöhe. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible, [contenteditable]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--tg-schwarz); outline-offset: 2px; } /* Kein Rahmen beim Klicken – aber weiterhin einer bei der Tastatur. Storefront zeichnet ihn unabhängig von der Eingabeart: `a:focus, input:focus, textarea:focus, button:focus { outline: 2px solid }` (storefront/style.css, Zeile 31). Dadurch sprang bei jedem Mausklick ein schwarzer Kasten um den angeklickten Link – am deutlichsten um die Symbole im Kopfbereich, deren Trefferfläche hoch und schmal ist. `:focus-visible` ist die Unterscheidung, die es dafür gibt: Der Browser entscheidet, ob ein Fokus angezeigt gehört. Bei der Maus nicht, bei Tabulator und Pfeiltasten schon. `:focus:not(:focus-visible)` trifft genau die Fälle, in denen der Browser „nein" sagt, und räumt dort auf. Bewusst nicht einfach alle Rahmen abgeschaltet: Ohne sichtbaren Fokus ist eine Seite mit der Tastatur nicht mehr bedienbar (WCAG 2.4.7). Die Regel nimmt den Rahmen nur dort weg, wo ihn niemand braucht. */ :focus:not(:focus-visible) { outline: none; } /* Und zur Sicherheit: Behälter, die nur Sprungziel sind, bekommen nie einen Rahmen – unabhängig davon, wie ein Browser `:focus-visible` auslegt. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } a:focus-visible { background-color: transparent; } /* Reine Textlinks: Der Rahmen liegt eng am Text statt auf Abstand. */ p a:focus-visible, li a:focus-visible, .entry-content a:focus-visible, .tegrafo-fuss a:focus-visible, .woocommerce-breadcrumb a:focus-visible { outline-offset: 1px; } /* Großflächige Bedienelemente bekommen gar keinen Rahmen, sondern dieselbe Hervorhebung wie die aktive Seite: schwarzer Balken und hellgraue Fläche. Ein Rahmen umschließt dort den kompletten Klickbereich samt Innenabstand und wirkt als Kasten – bei einem Navigationspunkt mit 26 px Innenabstand oben und unten ist das ein auffälliger Block. Balken und Fläche sind als Fokusanzeige ausreichend: Schwarz auf Weiß erreicht 21:1, die Fläche hebt sich zusätzlich ab (WCAG 2.4.7). */ /* Bei Tastaturbedienung dieselbe schwarze Fläche wie beim Hover, zusätzlich ein weißer Rahmen innen – sonst wäre der Fokus auf der aktuellen Seite, die ohnehin schwarz ist, nicht zu erkennen. */ .main-navigation ul.menu > li > a:focus-visible, .main-navigation ul.nav-menu > li > a:focus-visible { background-color: var(--tg-schwarz); color: var(--tg-weiss); outline: 2px solid var(--tg-weiss); outline-offset: -6px; } .woocommerce-tabs ul.tabs li a:focus-visible { outline: none; border-bottom-color: var(--tg-schwarz); background-color: var(--tg-flaeche-info); } .site-header-cart a:focus-visible, .tegrafo-konto a:focus-visible, .handheld-navigation a:focus-visible, .secondary-navigation a:focus-visible, .storefront-handheld-footer-bar ul li > a:focus-visible { outline: none; background-color: var(--tg-flaeche-info); box-shadow: 0 3px 0 0 var(--tg-schwarz); } .hentry .entry-content .woocommerce-MyAccount-navigation ul li a:focus-visible { outline: none; background-color: var(--tg-flaeche-info); box-shadow: inset 3px 0 0 0 var(--tg-schwarz); padding-left: var(--tg-space-2xs); } /* Sprungmarke zum Inhalt – Storefront bringt sie mit, sie war nur unsichtbar unauffällig. */ .skip-link:focus { background-color: var(--tg-gelb); color: var(--tg-schwarz); font-family: var(--tg-font-headline); font-weight: 400; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 9. Kopfbereich =========================================================== Kopffarbe je Bereich (Wunsch AMNESTY, Farbkonzept vom 25.09.2026): Gelb im ganzen Merchshop samt Startseite, Weiß im Materialshop und im Gruppenbereich. Bis zum 27.09.2026 war es umgekehrt (Gelb auf der Startseite und den beiden Aktionsmaterialien-Bereichen, Weiß auf Merchshop-Unterseiten). Das Logo darf auf beiden stehen (Handbuch S. 10, Pkt. 2 – gelb, weiß oder schwarz sind zulässig). Die Hintergrundfarbe selbst kommt NICHT von hier, sondern aus Storefronts eigener, request-abhängiger Customizer-CSS-Ausgabe (farben.php – dort steht auch, warum: nur dieser Weg kann sich je Aufruf unterscheiden, eine feste Regel in dieser Datei könnte das nicht). Hier steht deshalb nur noch die Trennlinie. Kundenwunsch, zweite Runde: auf den Merchshop-Unterseiten (weißer Kopf) war die Linie bislang bewusst heller (Hellgrau statt Kräftig) – auf Wunsch jetzt überall gleich kräftig wie auf der Startseite. `tegrafo- kopf-weiss` (bis 27.09.2026 `tegrafo-kopf-merch`) kommt aus kanal.php, derselben Bedingung, die auch farben.php verwendet – hier also ohne eigene Regel, die Fallunterscheidung gilt nur noch für die Kopf-Hintergrundfarbe. Kundenwunsch, dritte Runde: Die Linie stand nach dem Umzug des Bereichsumschalters an `storefront_header` (damals nötig, um über dem inzwischen entfernten Kategorienmenü zu stehen) nur noch innerhalb von `.site-header` zur Verfügung, weil `
` den kompletten `storefront_header`-Hook umschließt und die Linie dadurch weder an der richtigen Stelle (vor statt hinter dem Umschalter) noch über die volle Seitenbreite ging (Kundenrückmeldungen 19.09.2026, „Linie verschieben" und „Linie über die ganze Breite"). Der eigentliche Fehler saß am Hook, nicht hier: Der Umschalter hängt jetzt wieder an `storefront_before_content` (bereiche.php) und rendert damit als eigenständiges Element NACH `
` – die Linie kann deshalb wieder ganz normal an `.site-header` selbst hängen, direkt unter Logo/Suche/ Konto/Warenkorb und über die volle Breite, ohne Sonderregel. Die Linie zwischen Umschalter und Inhalt bleibt unverändert Sache von `.tegrafo-umschalter` selbst (Abschnitt 23). */ /* Seit dem 27.09.2026 ohne Linie (Wunsch AMNESTY vom 25.09., Punkt 5, „ähnlich wie beim Amnesty-UK-Shop“). Die Kante zwischen gelbem Kopf und weißem Inhalt trägt die Fläche allein. Bis dahin 1 px Schwarz, siehe oben. */ .site-header { border-bottom: 0; /* War var(--tg-space-s), Kundenwunsch: der Freiraum über Logo/Zusatz wirkte zu großzügig. */ padding-top: var(--tg-space-2xs); padding-bottom: 0; } /* Logohöhe zentral steuerbar. Die Schutzzone leitet sich daraus ab. */ .site-branding { --tg-logo-h: 48px; /* Schutzzone = x = Versalhöhe „INTERNATIONAL" = 26 % der Logohöhe (gemessen im Logo aus dem Brand Hub: 159 von 606 px, seit 27.09.2026; in der alten Fassung waren es 24 %). */ --tg-logo-schutzzone: calc(var(--tg-logo-h) * 0.26); margin-bottom: var(--tg-space-s); } @media (min-width: 48em) { .site-branding { --tg-logo-h: 64px; } } .site-branding .tegrafo-logo { display: inline-block; padding: var(--tg-logo-schutzzone); /* Der linke Schutzraum kommt bereits vom Seitenrand des Containers. */ padding-left: 0; text-decoration: none; background-color: transparent; } .site-header .site-branding img { display: block; /* Nur proportional skalieren – Aufbau und Proportionen des Logos dürfen nicht verändert werden (Handbuch S. 11). Deshalb `height: auto` mit `max-height` statt einer festen Höhe: Bis 25.09.2026 stand hier `height: var(--tg-logo-h)` neben `max-width: 100%`. Wurde der Platz knapp, schrumpfte nur die Breite – bei 375 px 44 × 48 statt 165 × 48, bei 800 px 210 × 64 statt 220 × 64 (Befund Tobias). So bleibt das Seitenverhältnis in jedem Fall erhalten. */ width: auto; height: auto; max-width: 100%; max-height: var(--tg-logo-h); } /* Navigationsleiste – Teil derselben Kopffläche, kein eigener Ton. Anders als der Kopf selbst hat sie keine Storefront-Einstellung, die sich request- abhängig setzen ließe – deshalb hier direkt über die body-Klasse aus kanal.php, mit derselben Bedingung wie farben.php. */ .storefront-primary-navigation { background-color: var(--tg-gelb); } body.tegrafo-kopf-weiss .storefront-primary-navigation { background-color: var(--tg-weiss); } .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a, .handheld-navigation ul.menu li a, .secondary-navigation ul.menu a { font-family: var(--tg-font-headline); font-weight: 400; font-size: var(--tg-fs-navigation); text-transform: uppercase; letter-spacing: var(--tg-ls-versal-klein); color: var(--tg-text); text-decoration: none; background-color: transparent; /* Die schwarze Fläche blendet auf, statt hart umzuspringen. Kurz genug, dass sie der Mausbewegung nicht hinterherhinkt. Wer im Betriebssystem weniger Bewegung eingestellt hat, sieht weiterhin den harten Wechsel – das regelt die Medienabfrage in Abschnitt 8. */ transition: background-color 180ms ease-out, color 180ms ease-out; } /* Die aktuelle Seite ist bereits schwarz und soll beim Überfahren nicht nachträglich noch einmal aufblenden. */ .main-navigation ul.menu > li.current-menu-item > a, .main-navigation ul.menu > li.current-menu-ancestor > a, .main-navigation ul.menu > li.current_page_parent > a { transition: none; } /* Hover und aktuelle Seite bekommen eine schwarze Fläche mit weißer Schrift – so löst es auch amnesty.de. Der Block füllt die ganze Höhe der Leiste, weil die Menüpunkte 1,618 em Innenabstand oben und unten tragen. Kein Gelb: Das bleibt den Handlungen vorbehalten ("mit dem Gelb sparsam umgehen", Handbuch S. 9, Pkt. 3). Weiß auf Schwarz ist vom Handbuch ausdrücklich gedeckt (S. 16, Pkt. 7) und erreicht 21:1. */ .main-navigation ul.menu > li > a:hover, .main-navigation ul.nav-menu > li > a:hover, .main-navigation ul.menu > li.current-menu-item > a, .main-navigation ul.menu > li.current-menu-ancestor > a, .main-navigation ul.menu > li.current_page_parent > a { background-color: var(--tg-schwarz); color: var(--tg-weiss); } /* Untermenü: Storefront erzeugt daraus ein neutrales Grau (#F0F0F0), das in keiner CI-Palette vorkommt. Stattdessen weiß mit Hellgrau-Kante. */ .main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children { background-color: var(--tg-weiss); border: 1px solid var(--tg-linie); } .main-navigation ul.menu ul li a, .main-navigation ul.nav-menu ul li a { font-family: var(--tg-font-headline); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tg-text); } .main-navigation ul.menu ul li a:hover { background-color: var(--tg-flaeche-info); } /* Menütaste auf Mobilgeräten – 44 px Trefferfläche, CI-Typografie. */ button.menu-toggle { background-color: var(--tg-weiss); border: 2px solid var(--tg-schwarz); color: var(--tg-text); min-height: 2.75rem; } button.menu-toggle:hover { background-color: var(--tg-gelb); } /* Navigationsleiste (Kategorienmenü) als eine Zeile. Storefront verteilt die Leiste mit Prozentbreiten und Floats: Navigation 73,9 %, Warenkorb 21,7 %, dazwischen 4,35 % Abstand. Konto und Warenkorb stehen seit dem Kundenwunsch „beides rechts oben" nicht mehr hier, sondern oben beim Logo (siehe „Kopfzeile: Logo, Suche, Konto, Warenkorb" weiter unten) – die Prozentrechnung ergäbe für die Navigation allein keine 100 % mehr und bräuchte ohnehin eine Flex-Zeile statt fester Breiten. Die Selektoren führen `.woocommerce-active .site-header` mit, weil Storefronts Breitenregeln genau diese Spezifität haben und sonst gewinnen würden. */ @media (min-width: 48em) { .site-header .storefront-primary-navigation > .col-full { display: flex; align-items: center; gap: var(--tg-space-s); } /* Storefront legt auf `.col-full` ein Clearfix-Paar mit `content: ""`. Im Float-Layout unsichtbar – in einer Flex-Zeile werden daraus zwei echte Flex-Elemente, und der Zwischenraum schiebt die Navigation um 24 px nach rechts. Sichtbar daran, dass der erste Menüpunkt nicht mehr mit dem Logo darüber fluchtete. */ .site-header .storefront-primary-navigation > .col-full::before, .site-header .storefront-primary-navigation > .col-full::after { content: none; } .woocommerce-active .site-header .storefront-primary-navigation .main-navigation { width: auto; float: none; clear: none; margin-right: 0; margin-bottom: 0; flex: 1 1 auto; } } /* Warenkorb und Konto */ .site-header-cart .cart-contents, .tegrafo-konto a { font-family: var(--tg-font-headline); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tg-ls-versal-klein); color: var(--tg-text); text-decoration: none; background-color: transparent; } .tegrafo-konto { padding: var(--tg-space-xs) 0; } /* Auf Mobilgeräten gibt es die feste Fußleiste mit eigenem Konto-, Such- und Warenkorb-Zugang (Storefront, storefront_handheld_footer_bar – drei von diesen Elementen hier unabhängige Elemente, keine Duplikate im Markup). Konto, Suche und Warenkorb hier im Kopf wären dort ein zweiter Weg zu denselben drei Zielen und würden die Fußleiste nur verdoppeln. */ @media (max-width: 47.99em) { .tegrafo-konto, .site-header .site-header-cart, .site-header .site-search { display: none; } } /* 10. Fußbereich =========================================================== Weiß auf Schwarz – vom Handbuch ausdrücklich vorgesehen (S. 16, Pkt. 7: "in Ausnahmefällen invertiert in Weiß auf schwarzem oder grauem Balken"). Kontrast 21:1. */ .site-footer { background-color: var(--tg-schwarz); color: var(--tg-weiss); padding-top: var(--tg-space-l); /* Auf Mobilgeräten liegt die feste Fußleiste (4,236 em hoch) über dem Seitenende. Ohne diesen Zuschlag verschwinden die letzten Zeilen des Fußbereichs dahinter. */ padding-bottom: calc(var(--tg-space-s) + 4.235801032em); } @media (min-width: 48em) { .site-footer { padding-bottom: var(--tg-space-s); } } .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: var(--tg-weiss); } .site-footer a { color: var(--tg-weiss); text-decoration: underline; } /* Im Fuß würde die gelbe Markierung auf Schwarz zwar funktionieren, wäre aber ein zweiter Gelb-Einsatz neben den Buttons. Stattdessen verschwindet beim Hover die Unterstreichung. */ .site-footer a:hover, .site-footer a:focus { background-color: transparent; color: var(--tg-weiss); text-decoration: none; } .site-footer :focus-visible { outline-color: var(--tg-weiss); } .tegrafo-fuss { display: grid; grid-template-columns: 1fr; gap: var(--tg-space-m); } /* Vier Spalten seit dem 22.09.2026 (Hilfe, Rechtliches, Amnesty International, Dieser Shop). Ab Tablet zwei nebeneinander, erst am Desktop alle vier – vier schmale Spalten bei 48em wären enger als die längsten Einträge („Widerruf & Rücksendung“, „Kontakt zu Amnesty“). */ @media (min-width: 48em) { .tegrafo-fuss { grid-template-columns: repeat(2, 1fr); gap: var(--tg-space-m) var(--tg-space-l); } } @media (min-width: 64em) { .tegrafo-fuss { grid-template-columns: repeat(4, 1fr); } } .tegrafo-fuss__titel { font-size: var(--tg-fs-h3); margin-bottom: var(--tg-space-xs); } .tegrafo-fuss__liste { list-style: none; margin: 0; padding: 0; } .tegrafo-fuss__liste li + li { margin-top: var(--tg-space-2xs); } .tegrafo-fuss__logo { display: block; height: 48px; width: auto; max-width: 100%; /* Abstand zum Link „Über uns“ darüber: bis 29.09.2026 nur die Zeilenhöhe, das Logo klebte am Link (Wunsch Tobias). Jetzt ein Zwischenraum wie zwischen Spaltentitel und Liste, plus die Schutzzone des Logos. */ margin-top: var(--tg-space-s); /* Schutzzone auch hier: 26 % der Logohöhe (Kopf, Abschnitt 9) */ margin-bottom: calc(48px * 0.26); } .tegrafo-fuss__absender { font-family: var(--tg-font-headline); font-size: var(--tg-fs-klein); line-height: 1.5; color: var(--tg-weiss); max-width: 42ch; margin-bottom: 0; } /* Widerrufsbutton („Vertrag widerrufen“, § 356a BGB) als eigene Zeile oben im Fuß – umgehängt in inc/fussbereich.php. Germanized gibt ihn als p.eu-owb-order-withdraw-from-contract-button > a.button aus, zentriert. Bis 24.09.2026 stand er unter dem Copyright, weiß auf Hellgrau (1,77:1): `.site-footer a` färbte die Schrift weiß und ist spezifischer als Storefronts `.button`. Jetzt gelb mit Schwarz wie die Handlungsknöpfe (19,6:1), linksbündig am Raster, mit derselben Trennlinie wie darunter. Die Selektoren schlagen auch `.site-footer a:hover` und `a:focus`, die den Hintergrund sonst durchsichtig machten. */ .site-footer .eu-owb-order-withdraw-from-contract-button { text-align: left; margin: 0 0 var(--tg-space-m); padding-bottom: var(--tg-space-m); border-bottom: 1px solid var(--tg-dunkelgrau); } .site-footer .eu-owb-order-withdraw-from-contract-button a.button { background-color: var(--tg-gelb); color: var(--tg-schwarz); text-decoration: none; } .site-footer .eu-owb-order-withdraw-from-contract-button a.button:hover, .site-footer .eu-owb-order-withdraw-from-contract-button a.button:focus-visible { background-color: var(--tg-gelb-aktiv); color: var(--tg-schwarz); } /* Eingeblendete Fußleiste auf Mobilgeräten (Konto, Suche, Warenkorb). */ .storefront-handheld-footer-bar { background-color: var(--tg-weiss); border-top: 2px solid var(--tg-schwarz); } /* Die Verknüpfungen brauchen eine deckende Fläche: Hinter der Leiste liegt das Suchfeld (z-index 1), das erst beim Antippen der Lupe hervorkommt. Mit durchsichtigen Verknüpfungen (z-index 999) schiene es dauerhaft durch. */ .storefront-handheld-footer-bar ul li > a { color: var(--tg-text); background-color: var(--tg-weiss); text-decoration: none; /* Storefronts Trennlinie ist halbtransparentes Weiß und auf weißem Grund unsichtbar. */ border-right-color: var(--tg-linie); } /* Das Suchfeld selbst ebenfalls auf deckendem Grund, damit beim Aufklappen nicht der Seiteninhalt durchscheint. `bottom` zusätzlich überschrieben: Storefront schiebt das geschlossene Suchfeld nur um 2em nach unten aus dem Bild (assets/css/woocommerce/ woocommerce.css) – in der Annahme, dass es dort so schmal bleibt. Mit eigenem Rahmen und Hintergrund oben und dem größeren `padding` aus dieser Datei ragt es aber höher als 2em, und der obere Rand blieb als schmale, weiße Linie quer über der Fußleiste sichtbar – unabhängig vom Hover, einfach immer (Kundenrückmeldung 19.09.2026, „komische Linien"). `-100vh` schiebt es garantiert vollständig aus dem sichtbaren Bereich, unabhängig von der tatsächlichen Höhe des Suchfelds. Die Aufklapp-Regel (`.search.active .site-search { bottom: 100% }`, dieselbe Datei) bleibt unverändert – der Wechsel läuft weiter über Storefronts eigenes footer.js, das beim Antippen der Lupe die Klasse `active` umschaltet. */ .storefront-handheld-footer-bar ul li.search .site-search { background-color: var(--tg-weiss); border-top: 1px solid var(--tg-linie); bottom: -100vh; } .storefront-handheld-footer-bar ul li.cart .count { background-color: var(--tg-gelb); color: var(--tg-schwarz); border-color: var(--tg-schwarz); } /* „Produkte" (kopfbereich.php, seit 27.09.2026): dieselbe Symbolschrift wie Suche und Warenkorb (Font Awesome aus dem Parent-Theme, lokal geladen), Zeichen „tshirt" – dasselbe Motiv wie das Merch-Symbol im archivierten Bereichsumschalter. */ .storefront-handheld-footer-bar ul li.produkte > a::before { content: "\f553"; } /* 11. Shop-Übersicht und Produktarchiv ====================================== Ziel: größere Produktbilder, mehr Weißraum, weniger Kanten. Storefront legt die Produkte als gefloatete Listenelemente mit prozentualen Breiten aus; hier übernimmt stattdessen ein Raster, das sich an der verfügbaren Breite orientiert statt an einer festen Spaltenzahl. */ /* Volle Breite, wo keine Seitenleiste ausgegeben wird. Storefront gibt der Inhaltsspalte ab 768 px sonst 73,9 % und stellt die restlichen 26 % für eine Leiste frei, die auf Shop-Seiten gar nicht mehr erscheint. */ @media (min-width: 48em) { .tegrafo-volle-breite .content-area { width: 100%; float: none; margin-left: 0; margin-right: 0; } } /* Seitenkopf des Archivs */ .woocommerce-products-header { margin-bottom: var(--tg-space-m); } .woocommerce-products-header__title { font-size: var(--tg-fs-h1); margin-bottom: var(--tg-space-xs); } .term-description, .woocommerce-products-header .taxonomy-description { max-width: var(--tg-textbreite); } /* Kategorienzeile mit Seitenzahlen – bewusst leise: kleine Schrift, normale Schreibweise statt Versalien, dunkelgrau statt schwarz. Das war vorher ein kräftig gestaltetes Menü im Kopf (Kundenwunsch: dezenter, hier an der Ergebniszeile). Die aktuelle Kategorie bekommt WordPress' eigene `current-menu-item`-Klasse und hebt sich darüber ab, ohne dass die Zeile insgesamt lauter wirkt. Kundenwunsch, zweite Runde: Die Seitenzahlen standen zuvor in einer eigenen Zeile darüber (`.storefront-sorting`, jetzt komplett entfernt) – zwei fast leere Zeilen mit je eigenem Rand darunter wirkten unnötig auseinandergezogen. `tegrafo_kategorien_zeile()` (produktarchiv.php) gibt die Seitenzahlen jetzt selbst mit aus, als zweites Kind hier in derselben Flex-Zeile: Kategorien links, `margin-left: auto` schiebt die Seitenzahlen auf derselben Linie nach rechts. Kundenwunsch, dritte Runde: Auf schmalen Displays brechen die Kategorien ohnehin auf mehrere Zeilen um – die Seitenzahlen landeten dann auf einer eigenen, fast leeren Zeile, aber noch immer nach rechts geschoben statt sauber eingeordnet (Kundenrückmeldung 19.09.2026, „Paginierung besser lösen"). Unter dieser Breite deshalb eine eigene Zeile mit voller Breite: `.woocommerce-pagination` selbst braucht dafür kein `justify-content`, das steckt schon auf `ul.page-numbers` (weiter unten in dieser Datei) und zentriert die Seitenzahlen automatisch, sobald die Zeile die volle Breite einnimmt. */ .tegrafo-kategorien { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tg-space-s) var(--tg-space-m); margin-bottom: var(--tg-space-m); } .tegrafo-kategorien .woocommerce-pagination { margin-left: auto; margin-top: 0; } /* Nach den beiden Basisregeln oben, nicht davor: Gleiche Selektor-Spezifität, also entscheidet die Reihenfolge im Quelltext – vor den Basisregeln stehend hätte dieser Block bei jeder Bildschirmbreite verloren, „max-width" hin oder her. */ @media (max-width: 47.99em) { .tegrafo-kategorien { flex-direction: column; align-items: stretch; } .tegrafo-kategorien .woocommerce-pagination { margin-left: 0; margin-top: var(--tg-space-s); } } .tegrafo-kategorien__liste { display: flex; flex-wrap: wrap; align-items: center; /* Waagerecht großzügig, seit die Trennpunkte weg sind: Der Abstand ist jetzt das Trennzeichen. Senkrecht eng, damit eine umbrechende Zeile zusammenhängend bleibt. */ gap: var(--tg-space-2xs) var(--tg-space-m); list-style: none; margin: 0; padding: 0; } /* Am Telefon passen fünf Kategorien à 18px nicht mit 40px Lücke nebeneinander – dort reicht die kleinere Stufe, der Umbruch trennt ohnehin schon. Und noch eine Stufe kleiner, seit im iframe bei 386px nachgemessen: Die Zeile war mit 18/16px und 24px Lücke **196px** hoch – auf einem 844px hohen Display rund ein Viertel des Sichtbereichs, noch vor dem ersten Produkt. Die Hauptzeile brach auf drei Zeilen um, die Unterzeile auf zwei. Durchgemessen wurden drei Wege: nur die Lücke auf 16px 196px – bringt nichts, der Umbruch bleibt 16/15px und Lücke 16px 160px – gewählt je eine Zeile, quer scrollbar 118px – spart am meisten, schiebt aber Kategorien aus dem Bild, die man dann nur durch Wischen findet Die 15px der Unterzeile haben bewusst kein Token: Zwischen `--tg-fs-button` (16px) und `--tg-fs-klein` (14px) liegt nichts, und für einen einzigen Sonderfall lohnt kein sechster Schriftgrad in der Staffel. 14px wären auch gegangen, 15px hält den Abstand zur Hauptzeile aber gleichmäßig. */ @media (max-width: 47.99em) { .tegrafo-kategorien__liste { gap: var(--tg-space-2xs) var(--tg-space-xs); } } .tegrafo-kategorien__liste li { position: relative; } /* Zweite Zeile: die Unterkategorien der aktuellen Hauptkategorie (inc/produktarchiv.php, Kundenwunsch 23.09.2026). `flex-basis: 100%` zwingt die Liste in eine eigene Zeile – sie steht im Quelltext hinter den Seitenzahlen (die per `margin-left: auto` rechts kleben), landet aber trotzdem sauber darunter, weil `.tegrafo-kategorien` ohnehin `flex-wrap: wrap` hat. Kein `order`, damit Lesereihenfolge und Darstellung übereinstimmen. Der Einzug rückt die Unterzeile sichtbar unter die Hauptzeile; ohne ihn stünden zwei gleich aussehende Punktreihen übereinander und man wüsste nicht, welche welcher untergeordnet ist. Am Telefon entfällt er – dort bricht die Hauptzeile selbst schon um, und jeder Millimeter zählt. */ .tegrafo-kategorien__unter { flex: 0 0 100%; gap: var(--tg-space-2xs) var(--tg-space-s); margin-top: var(--tg-space-2xs); } @media (max-width: 47.99em) { .tegrafo-kategorien__unter { gap: var(--tg-space-2xs) var(--tg-space-xs); } } @media (min-width: 48em) { .tegrafo-kategorien__unter { padding-left: var(--tg-space-m); } } /* --- Hauptzeile ------------------------------------------------------------ Kundenwunsch 23.09.2026: „das kategoriemenu und untermenü schöner und deutlicher gestalten". Vorher stand hier bewusst eine sehr leise Zeile – 14px, Grau, Trennpunkte – weil das kräftige Aufklappmenü im Kopf am 18.09.2026 abgeschafft worden war und die Kategorien nicht wieder wie ein „richtiges" Menü wirken sollten. Mit der zweistufigen Struktur aus der AMNESTY-Vorlage trägt diese Zurückhaltung nicht mehr: Zwei graue Punktreihen übereinander sagen weder, dass sie Navigation sind, noch welche der anderen untergeordnet ist. Deshalb jetzt klar zwei Ebenen: Hauptzeile Roboto Condensed, 18px (--tg-fs-navigation, genau dafür angelegt), Schwarz, gemischte Schreibung Unterzeile Roboto, 16px, Grau, eingerückt Gemischte Schreibung statt Versalien ist Absicht: Der Bereichsumschalter direkt darüber steht in Versalien auf gefüllten Reitern. Stünde die Kategorienzeile genauso da, hätte man zwei gleich laute Reihen übereinander und keine Rangfolge mehr. Condensed und 18px reichen, damit die Zeile als Navigation gelesen wird. Die Trennpunkte sind ersatzlos weg. Sie hatten einen Fehler, der mit dem Umbruch auffiel: Das Zeichen gehörte per `li + li::before` zum *folgenden* Eintrag und stand absolut positioniert links davon – brach die Zeile um, rutschte der Punkt an den Anfang der neuen Zeile. Abstand allein trennt sauberer, und bei 40px Lücke braucht es ohnehin kein Zeichen mehr. */ .tegrafo-kategorien__liste a { font-family: var(--tg-font-headline); font-size: var(--tg-fs-navigation); font-weight: 400; line-height: 1.3; text-transform: none; letter-spacing: normal; color: var(--tg-text); text-decoration: none; } .tegrafo-kategorien__liste a:hover, .tegrafo-kategorien__liste a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; } /* Die aktuelle Kategorie mit kräftigem schwarzem Unterstrich. Zwischenstand, der es nicht geworden ist: erst eine gelbe Textmarker-Markierung („wie mit einem Textmarker", Handbuch S. 20). Sie war deutlich, stand aber als zweite gelbe Fläche direkt unter dem gelben Reiter des Bereichsumschalters. Entscheidung Tobias 23.09.2026: „ja unterstrich statt gelb" – damit bleibt Gelb dem Umschalter und den Knöpfen vorbehalten, so wie es das Handbuch mit „sparsam einsetzen" (S. 9) meint. 3 px, nicht die 2 px der Unterzeile: In der Hauptzeile sind alle Einträge schwarz, der Unterstrich ist dort das **einzige** Unterscheidungsmerkmal und muss entsprechend tragen. In der Unterzeile kommt der Wechsel von Grau auf Schwarz hinzu, da genügt weniger. Genau daran war die alte Fassung gescheitert: ein dünner Unterstrich unter 14 px Grau sah aus wie ein Link, der gerade überfahren wird. `current-product_cat-ancestor` und `current-product-ancestor` sind die Klassen, die WordPress vergibt, wenn man in einer Unterkategorie beziehungsweise auf einer Produktseite darunter steht – so ist in der Hauptzeile auch der Weg dorthin markiert, nicht nur das Blatt unten. */ .tegrafo-kategorien__liste .current-menu-item > a, .tegrafo-kategorien__liste .current-menu-ancestor > a, .tegrafo-kategorien__liste .current-product_cat-ancestor > a, .tegrafo-kategorien__liste .current-product-ancestor > a, .tegrafo-kategorien__liste .current_page_parent > a { color: var(--tg-text); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 3px; } /* --- Unterzeile ------------------------------------------------------------ Nach den Regeln der Hauptzeile, nicht davor: `.tegrafo-kategorien__unter` und `.tegrafo-kategorien__liste` sind beide eine einzelne Klasse, die Spezifität ist also gleich und die Reihenfolge im Quelltext entscheidet. Dieselbe Falle wie schon bei der Paginierung und beim Umschalter. */ .tegrafo-kategorien__unter a { font-family: var(--tg-font-text); font-size: var(--tg-fs-button); color: var(--tg-text-leise); } .tegrafo-kategorien__unter a:hover, .tegrafo-kategorien__unter a:focus-visible { color: var(--tg-text); } /* Die aktuelle Unterkategorie: Schwarz statt Grau, dazu 2 px Unterstrich. Dünner als oben, weil hier schon der Farbwechsel trägt. */ .tegrafo-kategorien__unter .current-menu-item > a { color: var(--tg-text); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; } /* Schriftgrade am Telefon – **nach** allen `… a`-Regeln oben, nicht oben beim Abstand. Die Regeln haben dieselbe Spezifität (eine Klasse plus ein Element), also entscheidet die Reihenfolge im Quelltext. Beim ersten Anlauf stand dieser Block weiter oben neben der Lückenregel und hatte deshalb keine Wirkung – gemessen im iframe: weiterhin 18/16 px. Dieselbe Falle, vor der die Kommentare in dieser Datei an drei anderen Stellen schon warnen. Die 15 px der Unterzeile haben bewusst kein Token: Zwischen `--tg-fs-button` (16 px) und `--tg-fs-klein` (14 px) liegt nichts, und für einen einzigen Sonderfall lohnt kein sechster Schriftgrad in der Staffel. */ @media (max-width: 47.99em) { .tegrafo-kategorien__liste a { font-size: var(--tg-fs-button); } .tegrafo-kategorien__unter a { font-size: 0.9375rem; /* 15px */ } } /* --- Aufklapplisten an der Hauptzeile -------------------------------------- Wunsch AMNESTY vom 25.09.2026, Entscheidung Tobias 27.09.2026: „Dropdown überall mit Pfeil“ (produktarchiv.php, assets/js/kategorien.js). Hinter den Schriftgraden fürs Telefon, damit deren `… a`-Regel die Einträge der Liste nicht wieder auf die Hauptzeilen-Schrift zieht. Der Pfeil ist ein Knopf, soll aber nicht wie einer aussehen: kein Grau, keine Versalien, kein Innenabstand aus Abschnitt 6. Seine Trefferfläche ist trotzdem 44 px hoch (WCAG 2.5.5 wie die übrigen Knöpfe). Die negativen Ränder oben und unten nehmen ihn aus der Zeilenhöhe heraus – sonst stünde jede Hauptkategorie mit Pfeil höher als „Alles“. Die Hover-Farbe von Storefront (`button:hover`) ist spezifischer als eine einzelne Klasse, deshalb sind die Zustände unten ausdrücklich mit aufgeführt. */ .tegrafo-kategorien__pfeil, .tegrafo-kategorien__pfeil:hover, .tegrafo-kategorien__pfeil:focus { display: inline-flex; align-items: center; justify-content: center; width: 2rem; min-height: 0; height: 2.75rem; margin: -0.625rem 0 -0.625rem var(--tg-space-3xs); padding: 0; vertical-align: middle; background-color: transparent; border: 0; color: var(--tg-text); cursor: pointer; } .tegrafo-kategorien__pfeil[aria-expanded="true"] svg { transform: rotate(180deg); } /* Weiß mit schwarzer Linie wie der Kopf, ohne Schatten – die Zeile bleibt zurückhaltend, die Liste liegt nur darüber. Links um den Innenabstand verschoben, damit die Einträge mit dem Namen der Hauptkategorie fluchten. Offen und zu über `visibility`, nicht `display`: Eine verborgene Liste behält so ihre Maße, das Skript kann sie schon vor dem Öffnen im Bild halten, und ihre Links sind trotzdem nicht per Tabulator erreichbar. */ .tegrafo-kategorien__klapp { position: absolute; top: calc(100% + var(--tg-space-3xs)); left: calc(-1 * var(--tg-space-xs)); z-index: 30; display: block; min-width: 12rem; max-width: calc(100vw - 2 * var(--tg-space-xs)); margin: 0; padding: var(--tg-space-2xs) 0; list-style: none; background-color: var(--tg-weiss); border: 1px solid var(--tg-linie-kraeftig); visibility: hidden; opacity: 0; /* Beim Schließen 150 ms Nachlauf: Wer schräg nach unten in die Liste zielt, streift kurz die Lücke darüber und verliert sie nicht. */ transition: opacity 0.15s ease, visibility 0s linear 0.15s; } .tegrafo-kategorien__pfeil[aria-expanded="true"] + .tegrafo-kategorien__klapp { visibility: visible; opacity: 1; transition: opacity 0.15s ease, visibility 0s linear 0s; } /* Überfahren nur mit einer echten Maus. Ein Tablet meldet `hover: none`, dort öffnet allein der Pfeil – sonst zeigte das erste Tippen auf eine Hauptkategorie die Liste, statt auf ihre Seite zu führen. 100 ms Vorlauf, damit nicht jede Liste aufblitzt, über die die Maus nur hinwegfährt. `data-zu` setzt das Skript nach Esc, bis die Maus den Eintrag verlässt. */ @media (hover: hover) and (pointer: fine) { .tegrafo-kategorien__liste > li:hover:not([data-zu]) > .tegrafo-kategorien__klapp { visibility: visible; opacity: 1; transition: opacity 0.15s ease 0.1s, visibility 0s linear 0.1s; } .tegrafo-kategorien__liste > li:hover:not([data-zu]) > .tegrafo-kategorien__pfeil svg { transform: rotate(180deg); } } .tegrafo-kategorien__klapp li { display: block; } /* Schrift der Unterzeile, aber schwarz: In der Liste gibt es keine aktuelle Ebene, von der sich die Einträge grau abheben müssten. */ .tegrafo-kategorien__klapp a { display: block; padding: var(--tg-space-3xs) var(--tg-space-xs); font-family: var(--tg-font-text); font-size: var(--tg-fs-button); line-height: 1.5; white-space: nowrap; color: var(--tg-text); } .tegrafo-kategorien__klapp a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; } /* Der Fokusrahmen aus Abschnitt 8 steht 2 px außen und fiele hier mit der Linie der Liste zusammen – nach innen gelegt bleibt er als eigener Rahmen erkennbar. */ .tegrafo-kategorien__klapp a:focus-visible { outline-offset: -4px; } .woocommerce-ordering { margin: 0; } .woocommerce-ordering select.orderby { font-family: var(--tg-font-headline); font-size: var(--tg-fs-klein); padding: var(--tg-space-3xs) var(--tg-space-2xs); min-height: 2.75rem; } /* --- Das Raster ---------------------------------------------------------- */ /* `minmax(0, 1fr)` statt `1fr`: `1fr` heißt `minmax(auto, 1fr)`, jede Spalte ist also mindestens so breit wie ihr längstes Wort. „Menschenrechtsspiel“ (160 px) und „AUSFÜHRUNG WÄHLEN“ (144 px) haben das Raster am Telefon und bei 768 px über den Rand geschoben, bei 320 px fehlten rechts 48 px (25.09.2026). Dass die Wörter trotzdem in die Spalte passen, regeln Titel und Button weiter unten. */ .woocommerce ul.products, ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tg-space-m) var(--tg-space-s); margin: 0 0 var(--tg-space-l); padding: 0; list-style: none; /* Storefronts Float-Layout abräumen */ float: none; clear: both; } /* Storefront setzt auf ul.products ein Clearfix-Paar mit `content: ""`. Im Float-Layout ist das unsichtbar – in einem Raster werden daraus zwei echte Rasterfelder, also zwei leere Kacheln vor und nach den Produkten. */ .woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after { content: none; } @media (min-width: 48em) { .woocommerce ul.products, ul.products { gap: var(--tg-space-l) var(--tg-space-m); } .woocommerce ul.products.columns-3, ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .woocommerce ul.products.columns-4, ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .woocommerce ul.products.columns-2, ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Storefronts Prozentbreiten und Ränder überschreiben – im Raster erledigt das `gap`. Auch `first`/`last`-Klassen verlieren damit ihre Bedeutung. Die dritte Zeile ist nötig, weil Storefront die Breiten je Spaltenzahl über `.site-main ul.products.columns-3 li.product` setzt – das ist spezifischer als die beiden Selektoren darüber und würde sie sonst überstimmen. */ .woocommerce ul.products li.product, .site-main ul.products li.product, .site-main ul.products[class*="columns-"] li.product, ul.products li.product { width: auto; max-width: none; float: none; clear: none; margin: 0; padding: 0; /* Handbuch S. 16, Pkt. 6: immer linksbündig. */ text-align: left; display: flex; flex-direction: column; /* Grundabstand zwischen Bild/Titel/Preis, Pflichtangaben und Button. `margin-top: auto` am Button legt darüber noch den restlichen Freiraum, sodass die Buttons einer Reihe unten bündig stehen. */ row-gap: var(--tg-space-2xs); } /* --- Die Kachel ---------------------------------------------------------- */ .woocommerce ul.products li.product a.woocommerce-loop-product__link, ul.products li.product a.woocommerce-loop-product__link { display: block; text-decoration: none; background-color: transparent; } .woocommerce ul.products li.product img, ul.products li.product img { display: block; width: 100%; height: auto; margin: 0 0 var(--tg-space-xs); /* Warmes Hellgrau hinter dem Bild: Produktfotos vor weißem Hintergrund bekommen dadurch eine Kante, ohne dass ein Rahmen nötig wird. Laut Handbuch ist das genau die Rolle der Sekundärfarben – "für Hintergründe, Informationskästen und Grafiken" (S. 9). */ background-color: var(--tg-flaeche-info); } .woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title { font-family: var(--tg-font-headline); font-size: var(--tg-fs-h3); font-weight: 400; /* Produkttitel bleiben in normaler Schreibweise – Abweichung von der Versalien-Regel, freigegeben am 16.09.2026. */ text-transform: none; letter-spacing: 0; color: var(--tg-text); padding: 0; margin: 0 0 var(--tg-space-3xs); /* Lange Wörter trennen statt mitten im Wort umbrechen: Bei 320 px ist eine Spalte 108 px breit, „Menschenrechtsspiel“ braucht 160. Getrennt werden nur Wörter ab 12 Buchstaben mit mindestens 5 auf jeder Seite. `wrap` statt des `balance` aller Überschriften: Mit `balance` trennt Chrome auch Wörter, die passen („But-ton Regenbogen“, „Baumwoll-tasche“ bis 1024 px), `wrap` trennt nur, was nicht in die Zeile geht. Die Silbentrennung braucht `lang="de"` am html-Element, das setzt WordPress. */ -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; text-wrap: wrap; } .woocommerce ul.products li.product .price, ul.products li.product .price { font-family: var(--tg-font-headline); font-size: var(--tg-fs-text); font-weight: 700; color: var(--tg-text); margin: 0; display: block; } /* Pflichtangaben von Germanized: MwSt.-Hinweis, Versandkosten, Lieferzeit, Grundpreis. Sie bleiben vollständig und an Ort und Stelle; typografisch bekommen sie die Rolle der Marginalie (Handbuch S. 16, Pkt. 4). */ .woocommerce ul.products li.product .wc-gzd-additional-info, ul.products li.product .wc-gzd-additional-info { font-family: var(--tg-font-headline); font-size: var(--tg-fs-klein); line-height: 1.4; color: var(--tg-text-leise); margin: var(--tg-space-3xs) 0 0; } .woocommerce ul.products li.product .wc-gzd-additional-info a, ul.products li.product .wc-gzd-additional-info a { color: var(--tg-text-leise); } /* Der Button sitzt am unteren Rand der Kachel, damit die Buttons einer Reihe eine gemeinsame Kante bilden – auch bei unterschiedlich langen Produktnamen. `margin-top: auto` schiebt ihn nach unten, der Mindestabstand hält ihn von den Pflichtangaben darüber frei. Auf schmalen Displays läuft er über die volle Kachelbreite: größere Trefferfläche, klarere Handlungsaufforderung. Seit 1.90.9 gilt das bis 64em: Bei 768 px hat eine der vier Spalten nur 120 px, ein Button mit eigener Breite wäre breiter als die Kachel. */ .woocommerce ul.products li.product .button, ul.products li.product .button { margin-top: auto; align-self: stretch; width: 100%; } /* Unter 64em 4 px statt 24 px Innenabstand seitlich: Das längste Wort („WEITERLESEN“, 97,5 px) passt so noch in die 108 px breite Spalte bei 320 px. Der Text steht zentriert, der kleinere Abstand fällt nur bei den längsten Beschriftungen auf. */ @media (max-width: 63.99em) { .woocommerce ul.products li.product .button, ul.products li.product .button { padding-left: var(--tg-space-3xs); padding-right: var(--tg-space-3xs); } } @media (min-width: 64em) { .woocommerce ul.products li.product .button, ul.products li.product .button { align-self: flex-start; width: auto; } } .woocommerce ul.products li.product .added_to_cart, ul.products li.product .added_to_cart { display: inline-block; margin-top: var(--tg-space-2xs); font-family: var(--tg-font-headline); font-size: var(--tg-fs-klein); } /* --- Kategorie-Kacheln --------------------------------------------------- */ .woocommerce ul.products li.product-category .woocommerce-loop-category__title, ul.products li.product-category .woocommerce-loop-category__title { font-family: var(--tg-font-headline); font-size: var(--tg-fs-h3); text-transform: uppercase; letter-spacing: var(--tg-ls-versal); color: var(--tg-text); } /* --- Seitenblättern ------------------------------------------------------ */ .woocommerce-pagination { margin-top: var(--tg-space-m); } .woocommerce-pagination ul.page-numbers { border: 0; display: flex; flex-wrap: wrap; gap: var(--tg-space-2xs); justify-content: center; } /* Storefronts Clearfix-Paar (`content: ""`) wird in der Flex-Liste zu zwei leeren Einträgen, die je einen `gap` mitbringen: Rechtsbündig endete die Leiste 8 px vor der Rasterkante (gemessen 25.09.2026). Wie beim Raster. */ .woocommerce-pagination ul.page-numbers::before, .woocommerce-pagination ul.page-numbers::after { content: none; } .woocommerce-pagination ul.page-numbers li { border: 0; } .woocommerce-pagination .page-numbers { border-radius: var(--tg-radius-knopf); font-family: var(--tg-font-headline); font-weight: 400; min-width: 2.75rem; min-height: 2.75rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tg-linie); color: var(--tg-text); text-decoration: none; background-color: transparent; } /* Nur die einzelnen Seiten-Links, nicht die ganze Liste: WooCommerce gibt der `