/* ============================================================================
Avada Child Theme – Rossmann Landtechnik
Barrierefreiheit (BFSG / WCAG 2.1 AA) – CSS
Bis 11.10.2026 Teil der style.css (ab "A11y Fixes"), Inhalt unverändert.
Geladen von functions.php nach style.css, Version = Änderungszeit.
Ausführlich kommentierte Fassung im Projektordner: CSS/a11y-fixes_2026-09-15.css
============================================================================ */
/* A11y Fixes */
/* ============================================================================
TEIL 1
============================================================================ */
/* Sichtbarer Tastaturfokus (WCAG 2.4.7)*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid #1a8436 !important;
outline-offset: 2px !important;
}
/* --- Ankreuzfelder (AGB, Newsletter) und Auswahlpunkte (Zahlungsart, Versand) --- */
.form-control__checkbox:focus-visible + .form-control__checkbox-view,
.form-control__radio:focus-visible + .form-control__radio-view {
outline: 3px solid #166e2e !important;
outline-offset: 2px !important;
border-radius: 2px;
}
/* --- Auswahllisten (Land, Bundesland): select liegt ebenfalls auf opacity 0 --- */
.form-control:has(> .form-control__select:focus-visible) {
outline: 3px solid #166e2e !important;
outline-offset: 2px !important;
}
/* Rueckfallebene fuer Browser ohne :has() - umrandet die Beschriftung daneben */
.form-control__select:focus-visible + .form-control__placeholder {
outline: 3px solid #166e2e !important;
outline-offset: 2px !important;
}
/* --- Textfelder, Schaltflaechen und Links im Shop: nur der dunklere Ton,
die Umrandung selbst kommt schon aus der globalen Regel --- */
.ec-store a:focus-visible,
.ec-store button:focus-visible,
.ec-store input:focus-visible,
.ec-store textarea:focus-visible,
.form-control__text:focus-visible,
.form-control__textarea:focus-visible,
.form-control__button:focus-visible,
.ec-link:focus-visible {
outline-color: #166e2e !important;
}
/* Footer */
.fusion-footer-widget-area{
background-color: #166e2e !important;
}
/* Preiszusatz "(inkl. USt)" */
.zuzueglich { color:#595959 !important; }
/* Toggles */
.c-toggle .panel-title .fusion-toggle-heading {
color: #000000;
}
.c-toggle .panel-title a[aria-expanded="true"] .fusion-toggle-heading {
color: #434549 !important;
/* Flip Boxes ?*/
}
.fusion-flip-boxes .fusion-flip-box .flip-box-back {
background-color: #1a8436 !important;
}
/* Buttons */
.rand-g{
border-width: 1px !important;
border-style: solid !important;
border-bottom-color: #ffe222 !important;
}
.c-button {
background: #1a8436 !important;
}
/* Eyebrows Mähroboter */
#main .maehroboter-eyebrow, #main .maehroboter-eyebrow p{
color: #1a8436 !important;
}
/* Links */
.ecwid a {
color: #1a8436 !important;
}
.darklink{
color: #1a8436 !important;
}
.darker{
color: #166e2e !important;
}
/* Forms */
button.form-control__button {background-color: #1a8436 !important;}
span.form-control__button-text {
filter: none !important;
color: #fff !important
}
/* Sidebar */
#s-date,
#s-mail,
#s-tel,
#s-fa{
background-color: #1a8436 !important;
}
/* Kategorieseite */
/* Produktkachel Beschriftuungstexte */
.grid-product__price-compare-values,
.ec-size .ec-store .ec-text-muted,
.grid-product__subtitle-inner,
.grid-product__textblock.grid-product__included-taxes,
.grid-product__details .ec-text-muted{
color: #595959 !important;
}
/* Produktkachel Labels in der Kategorieseite */
html#ecwid_html body#ecwid_body .ec-size .ec-store .label--notice,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-label,
.ins-component--product-list .ins-component__label--onsale,
.ins-component--product-list .ins-component__label--ribbon {
background-color: #a96500 !important;
color: white !important;
}
html#ecwid_html body#ecwid_body .ec-size .ec-store .label--attention .label__text, html#ecwid_html body#ecwid_body .ec-size .ec-store .label--info .label__text, html#ecwid_html body#ecwid_body .ec-size .ec-store .label--notice .label__text, html#ecwid_html body#ecwid_body .ec-size .ec-store .label--success .label__text, html#ecwid_html body#ecwid_body .ec-size .ec-store .label--highlight .label__text, html#ecwid_html body#ecwid_body .ec-size .ec-store .label--composite .label__text{
color:white !important;
}
.grid-product__label.grid-product__label--Aktion-nur-online{
color:white !important;
}
/* Alt Texte für Produkte ohne Bilder in der Produktübersicht*/
.grid-product__shadow-inner{
color: black !important;
}
/* CF7 Links Dunkler machen */
#main p a,
#main li a,
#main td a{
color: #1a8436;
text-decoration: underline !important;
}
.wpcf7-not-valid-tip{
color: #c02121 !important;
}
/* ===== BFSG: Bild-Rollover für Tastatur und Screenreader neutralisieren =====*/
.fusion-rollover {
visibility: hidden;
transition-property: opacity, transform;
}
.fusion-image-wrapper:hover .fusion-rollover,
.fusion-image-wrapper.hover .fusion-rollover,
.fusion-image-wrapper:focus-within .fusion-rollover {
visibility: visible;
}
/* Produktseiten */
/* Social Share Buttons*/
.ec-likely__widget{
background-color: #fcf9f8 !important;
}
/* ============================================================================
TEIL 2
============================================================================ */
/* ----------------------------------------------------------------------------
WCAG 2.5.8 "Größe des Zielbereichs (Minimum)" — Eye-Able R104
Gemessen mit der Eye-Able-Erweiterung: der Kategorie-Link im Avada-Rollover
ist 59,5 × 15 px — breit genug, 9 px zu flach. Der Abstand zum nächsten Ziel
beträgt 22,4 px, also greift auch die Abstands-Ausnahme nicht.
Einordnung: 2.5.8 gehört zu WCAG 2.2, nicht zu 2.1. Für die BFSG-Konformität
nach EN 301 549 (= WCAG 2.1 AA) ist es NICHT gefordert. Da es reines CSS ist
und Mausnutzern real hilft, wird es trotzdem gesetzt.
line-height auf einem inline-block bestimmt dessen Höhe: 24 px genügen.
Sichtbar wächst nur die Klickfläche, die Schriftgröße bleibt unverändert.
-------------------------------------------------------------------------- */
.fusion-rollover-categories a {
display: inline-block;
min-height: 24px;
line-height: 24px;
}
/* Paginierungspunkte unter den Bildslidern (FlexSlider).
Der Punkt bleibt optisch gleich groß, nur die Trefferfläche wächst.
11.10.2026: Bisher wuchs der sichtbare Punkt mit (11 -> 24 px, wirkte zu
groß). Jetzt 6 px Innenabstand + Hintergrund nur im Inhalt: sichtbar
12 px, Trefferfläche weiter 24 x 24 px. Farben pro Slider bleiben (Avada). */
.flex-control-nav li a,
.flex-control-paging li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
}
.flex-control-paging li a {
padding: 6px;
background-clip: content-box !important;
box-shadow: none !important;
}
/* Startseiten-Slider mobil (bis 640 px): Punkte unter das Bild statt darauf.
11.10.2026 (Nate): Auf dem 300 px hohen Bild lagen sie über dem Schriftzug
"GARTENTECHNIK", auf den Video-Folien reicht "ABSPIELEN" bis an den Rand.
Unter dem Bild auf Weiß: Ring/Punkt in #1a8436 (4,78:1, WCAG 1.4.11),
aktiver Punkt gefüllt. Avada setzt bottom: 20px !important -> #sliders-container davor. */
@media only screen and (max-width: 640px) {
.home #sliders-container .fusion-slider-container {
overflow: visible !important;
margin-bottom: 32px !important;
}
.home #sliders-container .tfs-slider {
overflow: visible !important;
}
.home #sliders-container .tfs-slider .flex-control-nav {
top: 100% !important;
bottom: auto !important;
margin-top: 4px !important;
line-height: 0 !important;
}
.home #sliders-container .tfs-slider .flex-control-paging li a {
background: radial-gradient(circle, #fff 0 4px, #1a8436 4.5px 6px, transparent 6.5px) !important;
background-clip: border-box !important;
}
.home #sliders-container .tfs-slider .flex-control-paging li a.flex-active {
background: radial-gradient(circle, #1a8436 0 6px, transparent 6.5px) !important;
}
}
/* ----------------------------------------------------------------------------
Rückfallebene für den Tag-Tausch in functions.php ab v7.6 — Eye-Able R21
Drei Elemente des gartentechnik.com-Fremdsystems wurden als ausgeliefert
und erzeugten damit "Sprung in der Überschriften-Reihenfolge" (WCAG 1.3.1).
role="presentation" half dort nicht — Eye-Able bewertet für diese Regel den
Tag-Namen. Der Output-Buffer tauscht sie deshalb serverseitig:
.filter-auf-und-zuklappen ("Kategorien", "Zustand", "Marke", "Preis")
-> , weil es echte Abschnittsüberschriften sind. Sie bleiben damit
für die Sprungnavigation per H-Taste erhalten.
.fachhaendler-hinweis ("Wir sind Ihr Fachhändler in ...")
.motorist-telefon ("08752 - 546", bis zu 4x je Seite)
->
, weil ein Werbesatz und eine Telefonnummer keine Gliederungs-
punkte sind und die Sprungliste sonst zumüllen würden.
Optik: beide Varianten behalten die Bootstrap-Hilfsklasse "h3". Im CSS des
Fremdsystems steht
.gartentechnik_com h3, .gartentechnik_com .h3 { font-size: 24px }
.gartentechnik_com h2, .gartentechnik_com .h2 { font-size: 30px }
Die Klasse .h3 (Spezifität 0,2,0) schlägt das Element h2 (0,1,1) — die
Filter-Überschriften bleiben also bei 24 px statt auf h2-Größe zu springen.
Diese Regel ist nur das Sicherheitsnetz, falls gartentechnik.com sein
Bootstrap austauscht. Werte bewusst identisch, sie können sich also nicht
in die Quere kommen.
-------------------------------------------------------------------------- */
p.fachhaendler-hinweis,
p.motorist-telefon,
h2.filter-auf-und-zuklappen {
font-size: 24px;
font-weight: 500;
line-height: 1.1;
margin-top: 20px;
margin-bottom: 10px;
}
/* --- 1. Linkkontrast im Banner und im Einstellungsfenster --- */
.ccm-root .ccm-link-container a,
.ccm-root .ccm-powered-by a,
#ccm-widget .ccm-link-container a,
#ccm-widget .ccm-powered-by a,
#ccm-control-panel .ccm-link-container a,
#ccm-control-panel .ccm-powered-by a {
color: #00405a !important;
text-decoration: underline !important;
}
/* --- 2. Fokus auf den Schaltern sichtbar: Umrandung auf die gemalte Schiene --- */
.ccm-root input.ccm-checkbox-type--switch:focus-visible + label::before {
outline: 3px solid #166e2e !important;
outline-offset: 3px !important;
}
/* --- 3. Schalter "aus" und "an" mit ausreichendem Kontrast --- */
.ccm-root input.ccm-checkbox-type--switch:not([aria-disabled="true"]) + label::before {
background-color: #767676 !important;
}
.ccm-root input.ccm-checkbox-type--switch:not([aria-disabled="true"]):checked + label::before {
background-color: #166e2e !important;
}
.ccm-root input.ccm-checkbox-type--switch:not([aria-disabled="true"]) + label::after {
background-color: #fff !important;
box-shadow: 0 0 0 1px #595959, 0 1px 2px rgba(0, 0, 0, .25) !important;
}
/* --- Mähroboter, Abschnitt "Hanglagen": Kartenüberschriften (WCAG 1.4.3) ---
10.10.2026, Eigenprüfung Befund 2. Grün #1a8436 auf 80 % weißer Karte über
dem Rasenfoto = 2,99:1 (18 px, Soll 4,5:1). Pixelgenau nachgemessen:
Karte 90 % weiß + Dunkelgrün #166e2e = mindestens 5,10:1.
Überschreibt die Regeln aus dem Avada-Custom-CSS (body davor = stärker).
Modellhinweis und Links vorsorglich mit, falls sie in die Karten kommen. */
body #main .maehroboter-hanglagen .maehroboter-hangkarte > .fusion-column-wrapper {
background: rgba(255, 255, 255, .9) !important;
}
body #main .maehroboter-hanglagen .maehroboter-hangkarte .fusion-title-heading,
body #main .maehroboter-hanglagen .maehroboter-hangkarte .maehroboter-modellhinweis,
body #main .maehroboter-hanglagen .maehroboter-hangkarte .maehroboter-modellhinweis p,
body #main .maehroboter-hanglagen .maehroboter-hangkarte a:not(.fusion-button) {
color: #166e2e !important;
}
/* --- Mähroboter, Abschnitt "Vorteile": Inhaltsbox-Überschriften mobil (WCAG 1.4.3) ---
11.10.2026, Eigenprüfung Befund 4. Das Avada-Custom-CSS setzt die h2 bis
640 px auf 23 px (Gewicht 500 = kein großer Text, Soll 4,5:1). Grün #249241
auf #f9f9fb = 3,79:1. Mit #166e2e = 6,04:1, axe in 375 px: 0 Verstöße.
Am Desktop (27 px, großer Text, 3,79:1 reicht) bleibt das Original-Grün. */
@media only screen and (max-width: 640px) {
body #main .maehroboter-vorteile .content-box-heading {
color: #166e2e !important;
}
}