/* =========================================================================== * tokens.css -- die einzige Quelle fuer Radien, Abstaende und Neutraltoene. * * Wird als erstes Stylesheet geladen; alle weiteren Dateien haengen als * Abhaengigkeit daran (siehe functions.php). Sie verwenden ausschliesslich * diese Variablen -- keine hartkodierten Werte. * * FARBEN STEHEN HIER NICHT VOLLSTAENDIG. * * Primaer- und Sekundaerfarbe besitzt Flatsome und gibt sie als * --fs-color-primary und --fs-color-secondary aus. Sie werden hier nur * referenziert, nicht kopiert: Sonst gaebe es zwei Wahrheiten, und eine * Aenderung im Customizer schlaege nicht mehr durch. * ======================================================================== */ :root { /* -- Radien ------------------------------------------------------------- * Verbindlich laut Design-Briefing, Abschnitt 3. Keine anderen Werte * erfinden -- abweichende Radien sind der schnellste Weg zu einer Oberflaeche, * die zusammengewuerfelt wirkt. */ --shop-radius-pill: 999px; /* Schaltflaechen, Suchfeld, Badges */ --shop-radius-card: 12px; /* Produktkarten, Kacheln, Boxen */ --shop-radius-image: 8px; /* Bilder innerhalb von Karten */ --shop-radius-input: 8px; /* Eingabefelder, Auswahllisten */ /* -- Abstaende ---------------------------------------------------------- * 8er-Raster. Alle Innen- und Aussenabstaende sind Vielfache davon. */ --shop-space-1: 8px; --shop-space-2: 16px; --shop-space-3: 24px; --shop-space-4: 32px; --shop-space-6: 48px; --shop-space-8: 64px; --shop-space-12: 96px; /* zwischen Startseiten-Sektionen */ /* -- Neutrale Farben ---------------------------------------------------- * Kontraste am 13.08.2026 nachgerechnet, jeweils gegen Weiss: * * --shop-text 15,8 : 1 * --shop-text-muted 8,1 : 1 -- die 7:1 der Vorgabe halten * * --shop-text-muted NICHT aufhellen. Der Wert sieht dunkel aus, ist aber * die Untergrenze fuer eine Zielgruppe, die im Schnitt aelter ist. */ --shop-text: #1f2328; --shop-text-muted: #4a5058; --shop-border: #dcdfe3; --shop-border-hover: #a8aeb5; --shop-surface: #ffffff; --shop-surface-alt: #f6f7f8; /* Verweise im Fliesstext -- Herleitung im Merkposten unter diesem Block. */ --shop-link: #916b25; --shop-link-hover: #79591f; /* -- Zustaende ----------------------------------------------------------- */ --shop-transition: 150ms ease; /* * Der sanfte Uebergang, seit 14.08.2026 (Kunde: "Hover-Animationen sanfter"). * * 300 ms statt der 150 aus dem Briefing -- bewusst darueber: Die 150 ms * gelten fuer kleine Zustandswechsel wie eine Farbe. Wo sich etwas BEWEGT, * also Kopfhoehe, Schatten oder ein aufklappendes Menue, wirken sie * abgehackt. * * Die Kurve ist ein easeOutCubic: schneller Beginn, weiches Auslaufen. Der * Anfang der Bewegung folgt damit unmittelbar auf die Maus, das Ende kommt * ruhig zum Stehen. Ein lineares oder "ease-in" wirkte traege, weil die * ersten Millisekunden nichts passiert. */ --shop-transition-sanft: 300ms cubic-bezier(.33, 1, .68, 1); --shop-shadow-hover: 0 2px 8px rgba(0, 0, 0, .08); --shop-focus-ring: 0 0 0 3px rgba(0, 0, 0, .15); } /* --------------------------------------------------------------------------- * MERKPOSTEN ZUR SEKUNDAERFARBE -- gemessen, nicht geschaetzt * * Das Gold #b8882f erreicht auf Weiss nur 3,18 : 1 und reisst damit die * Mindestanforderung von 4,5 : 1. Es darf deshalb NICHT als Textfarbe auf * hellem Grund verwendet werden. * * Brauchbar ist es als Flaeche mit dunklem Text darauf: Gold gegen * --shop-text ergibt 4,97 : 1. * * FUER VERWEISE IM FLIESSTEXT steht deshalb --shop-link bereit (02.09.2026, * Kunde: "Gold fuer Links"). Das ist dasselbe Gold, nur abgedunkelt: gleicher * Farbton (39 Grad) und gleiche Saettigung (59 Prozent), Helligkeit von 45 auf * 36 Prozent. Damit bleibt der Marken-Eindruck und die Anforderung ist * erfuellt. * * --shop-link #916b25 auf Weiss 4,85 : 1 * --shop-link auf --shop-surface-alt 4,52 : 1 * --shop-link-hover #79591f 6,44 : 1 * * WER DIESE WERTE AENDERT, RECHNET NACH. 4,5 : 1 ist keine Empfehlung, und der * Unterschied zwischen 3,18 und 4,85 sieht man einer Farbe nicht an. * * Zum Vergleich, beides unbedenklich: * Gruen #325645 auf Weiss 8,23 : 1 * Weiss auf Gruen #325645 8,23 : 1 * ------------------------------------------------------------------------ */ /* =========================================================================== * HOVER-UEBERGAENGE, SEITENUEBERGREIFEND * * Steht hier und nicht in einer Komponentendatei, weil es fuer alles gilt -- * derselbe Grund wie beim Fokus weiter unten. * * NUR DAUER UND KURVE, NICHT DIE EIGENSCHAFTEN. Flatsome legt schon fest, WAS * sich beim Hover aendert (mal die Farbe, mal Schatten, mal alles). Das noch * einmal aufzuzaehlen hiesse, diese Liste zu kopieren und beim naechsten * Theme-Update daneben zu liegen. Hier wird nur bestimmt, WIE SCHNELL -- * was Flatsome uebergehen laesst, laesst es dann sanfter uebergehen. * * Die Selektoren tragen "body" beziehungsweise ".header" nicht aus Schoenheit: * Flatsome setzt etwa .nav>li>a{transition:all .2s} mit (0,2,1). Eine kuerzere * Regel verloere, und zwar lautlos -- die Uebergaenge blieben einfach schnell. * ======================================================================== */ body a, body button, body .button, body input[type="submit"], body .header .nav > li > a, body .widget_product_categories li a, body .product-small .box-image, body .product-small .box-text, body .col-inner .box-image img { transition-duration: 300ms; transition-timing-function: cubic-bezier(.33, 1, .68, 1); } /* =========================================================================== * FOKUS * * Steht hier und nicht in einer Komponentendatei, weil es fuer jedes bedienbare * Element gilt und niemals verloren gehen darf -- ein entfernter Fokusring * macht die Seite fuer Tastaturbedienung unbrauchbar. * * Flatsome bringt selbst ein brauchbares System mit: * * .button:focus-visible, a:focus-visible, button:focus-visible, * input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px } * * Die folgende Grundregel ist deshalb nur eine Untergrenze fuer alles, was * dort nicht aufgezaehlt ist. :where() hat Spezifitaet 0 und ist damit * absichtlich schwach -- sie soll nichts uebersteuern, nur Luecken schliessen. * ======================================================================== */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--fs-color-primary, #325645); outline-offset: 2px; box-shadow: var(--shop-focus-ring); } /* * FORMULARFELDER -- der eine Fall, in dem Flatsome sein eigenes System aushebelt * * In flatsome.css steht: * * input[type=email]:focus, ... input[type=text]:focus, select:focus, * textarea:focus { background-color:#fff; box-shadow:0 0 5px #ccc; * color:#333; opacity:1!important; outline:0 } * * Das ist :focus, nicht :focus-visible, und mit (0,2,1) spezifischer als * Flatsomes eigenes input:focus-visible (0,1,1) und als die Grundregel oben * (0,1,0). Beide verlieren. Uebrig blieb ein Schimmer in #ccc -- gegen Weiss * 1,61 : 1, gemessen am 14.08.2026. WCAG verlangt fuer Fokusanzeigen 3 : 1. * Praktisch heisst das: In der Kasse war nicht zu sehen, in welchem Feld man * steht. * * Die Selektoren sind hier einzeln ausgeschrieben, damit sie auf dieselbe * Spezifitaet (0,2,1) kommen. Bei Gleichstand entscheidet die Ladereihenfolge * -- und die stimmt seit der Korrektur in der functions.php vom 14.08.2026. * FAELLT DIESE REIHENFOLGE, FAELLT AUCH DIESE REGEL, und zwar lautlos. * * Der weiche Schatten von Flatsome bleibt bewusst stehen: Er stoert nicht und * traegt zusaetzlich, sobald der Ring danebensteht. */ input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="tel"]:focus-visible, input[type="url"]:focus-visible, input[type="number"]:focus-visible, input[type="search"]:focus-visible, input[type="password"]:focus-visible, input[type="date"]:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--fs-color-primary, #325645); outline-offset: 2px; } /* * PRODUKTGALERIE * * flatsome-shop.css schaltet den Ring am Bildlink per !important ab: * * .product-gallery-slider .woocommerce-product-gallery__image a:focus-visible * { outline: none !important } * * Damit springt der Fokus beim Durchtabben durch die Produktseite sichtbar ins * Nichts. Nur mit !important zu kontern -- der einzige Grund, warum es hier * steht. Der Ring liegt nach innen (negativer Versatz), weil das Bild randlos * in seiner Flaeche sitzt und ein aeusserer Ring vom Nachbarn beschnitten wird. */ .product-gallery-slider .woocommerce-product-gallery__image a:focus-visible { outline: 2px solid var(--fs-color-primary, #325645) !important; outline-offset: -2px; }