/** * Eigene Regeln für vp_neoteric * --------------------------------------------------------------------------- * Angelegt am 29.07.2026 beim Umstieg von vp_merchant. * Herkunft: templates/vp_merchant/css/custom/custom.custom.css (548 Zeilen). * * WARUM DIESE DATEI * "user.css" ist der offizielle Platz von Joomla für eigene Regeln. Sie ist im * Template unter dem Namen "template.user" angemeldet und wird zuletzt geladen, * also nach allen Herstellerregeln. Der Hersteller schreibt sie NIE - sie * überlebt jedes Template-Update. * * DIE FIRMENFARBE STEHT NICHT HIER * Sie steht seit dem 30.07.2026 in der Template-Konfiguration: * System -> Templates -> Website-Templatestile -> "vp_neoteric - Umbau 2026" * -> Reiter Anpassung -> Stil. Dort gesetzt: * * --template-primary-color #004494 (das Blau aus dem Logo) * --template-primary-contrast-color #ffffff (Schrift darauf) * --template-primary-hover-color #333333 (beim Überfahren) * --template-primary-hover-contrast-color #ffffff * --template-link-color #004494 * --template-link-hover-color #333333 * * Damit färben sich alle Knöpfe, Links und Marken des Templates von selbst - * eine Farbänderung ist ein Feld in der Verwaltung, keine Suche in CSS-Dateien. * Die Werte entsprechen dem alten Template (@btn-primary-bg: #004494, * @btn-primary-hover-bg: #333333, Schrift jeweils weiss). * * WER HIER EINE FARBE BRAUCHT, schreibt sie deshalb nicht fest hin, sondern * holt sie über die Variable, mit dem alten Wert als Rückfallebene: * * background-color: var(--template-primary-color, #004494); * * Der zweite Wert greift nur, wenn die Variable fehlt - etwa wenn diese Datei * einmal unter einem anderen Template landet. * * WAS NICHT ÜBERNOMMEN WURDE * Rund die Hälfte der alten Regeln sprach Klassen an, die es nur in * vp_merchant gab: #vpf-header, .navbar-offcanvas, .brand, .horizontal-module, * .bottom-horizontal .nav-pills, .category-name, .owl-item, die Symbolschrift * VPFrameworkIcon und das Bootstrap-4-Akkordeon. Diese Regeln wären hier * wirkungslos und wurden weggelassen statt mitgeschleppt. * * Zwei Regeln wurden bewusst NICHT übernommen, obwohl sie wirken würden: * * .category-page-title { display: none; } * Blendete die Überschrift auf Kategorieseiten aus. Das neue Template * zeigt sie ("E-BIKE"). Ob sie bleiben soll, ist eine Gestaltungsfrage - * deshalb hier nicht stillschweigend wieder ausgeblendet. * * @import 'all.css'; (Font Awesome 5, 137 KB) * Joomla 5 liefert Font Awesome 6 mit. Achtung bei Klassennamen im * Inhalt: Version 5 schreibt "fas fa-…", Version 6 "fa-solid fa-…". * --------------------------------------------------------------------------- */ /* =========================================================================== GESTALTUNGSWERTE - der eine Ort für Radien, Rahmen, Schatten, Übergänge --------------------------------------------------------------------------- Angelegt am 04.08.2026. Das ausführliche Konzept mit Begründungen und Messwerten steht in projekte\website\unterlagen\gestaltungsregeln.md. WARUM EIGENE NAMEN mit dem Vorsatz "fw-" (Fahrrad Wittstock), obwohl das Template 267 eigene Variablen mitbringt: Die Namen des Herstellers gehören ihm und können sich beim nächsten Update ändern. Die Namen hier sind der EINE Ort zum Nachziehen, falls das passiert. WAS HIER NICHT STEHT: die Firmenfarbe. Sie steht in der Template-Konfiguration (Anpassung -> Stil) und wird über var(--template-primary-color) geholt. Eine Farbänderung bleibt damit ein Feld in der Verwaltung. VOR EINER ÄNDERUNG hier: Es ändert sich die ganze Seite auf einmal. Das ist der Zweck - aber danach gehört ein Blick auf mehrere Seiten, nicht nur auf die, an der man gerade arbeitet. =========================================================================== */ :root { /* Ecken. Zwei Stufen, weil dieselbe Rundung auf einem 40 px hohen Knopf und auf einem bildschirmhohen Panel nicht gleich WIRKT. .25rem sind bei der Grundschrift von 14 px genau 3,5 px. */ --fw-radius: .25rem; /* alles Bedienbare und alle Kästen */ --fw-radius-gross: .5rem; /* nur was von unten einfährt: Panel, Dialog */ --fw-radius-rund: 50%; /* nur echte Kreise: Lagerampel, Zählerblase */ /* Rahmen. 2px für Bedienelemente ist keine neue Erfindung, sondern der gemessene Mehrheitswert - 32 von 35 berandeten Knöpfen und 24 von 31 Feldern hatten ihn schon (--btn-border-width des Templates). */ --fw-rand: 1px; /* Kästen, Karten, Trennlinien */ --fw-rand-stark: 2px; /* Knöpfe und Eingabefelder */ /* Eine Linienfarbe statt bisher vier (#e6e6e6, #f2f2f2, #ececec, rgba(0,0,0,.08)). Sichtbar wurde das dort, wo zwei aneinanderstießen. */ --fw-linie: var(--border-color, #dfe3e7); /* Schatten. Knöpfe bekommen keinen - ein Knopf ist durch Fläche, Rahmen und Beschriftung erkennbar. Der Schatten bleibt dem vorbehalten, was tatsächlich über der Seite schwebt. */ --fw-schatten-klein: 0 .125rem .25rem rgba(0, 0, 0, .075); --fw-schatten: 0 .5rem 1rem rgba(0, 0, 0, .15); /* Kurz und nur für Farben. "transition: all" wird NICHT benutzt: Es zieht auch Größen und Positionen mit - daher kam das Hüpfen des Widerrufs-Knopfes beim Überfahren. */ --fw-uebergang: .15s ease-in-out; /* Für Flächen, die auf- und zufahren - bisher nur die Filterspalte am Schreibtisch. ERGÄNZT am 04.08.2026 (Aufgabe 70). Warum länger als der Farbübergang: 150 ms sind zu wenig, um eine 324 px breite Spalte als Bewegung zu lesen; es sähe aus wie ein Springen mit Nachzieheffekt. Über etwa 300 ms wirkt es zäh. */ --fw-uebergang-flaeche: .25s ease-in-out; /* Eine Fingerkuppe trifft rund 40 px. Am AGB-Kästchen ist das schon einmal aufgefallen: 13 px groß, der Link 7 px daneben - beim Ankreuzen ging regelmäßig das AGB-Fenster auf. */ --fw-tippflaeche: 40px; } /* --- Knöpfe ---------------------------------------------------------------- ES WIRD NUR DIE VARIABLE GESETZT, nicht die Eigenschaft. Das Template schreibt in seiner eigenen .btn-Regel border-radius: var(--btn-border-radius); und liest damit selbst hier nach. Eine Zeile wirkt so auf jeden Knopf, auch auf die, die es heute noch nicht gibt. Der Gegenentwurf wäre gewesen, alle Knopfklassen aufzuzählen und mit !important zu überschreiben. Das müsste bei jedem neuen Knopf erweitert werden und blockiert spätere Anpassungen. --------------------------------------------------------------------------- */ .btn { --btn-border-radius: var(--fw-radius); --btn-border-width: var(--fw-rand-stark); /* Das Template gibt Knöpfen einen eingesetzten Lichtrand (inset 0 1px 0 rgba(255,255,255,.15)) - eine Bootstrap-2-Optik, die auf dem dunklen Blau als schmutziger Streifen erscheint. */ --btn-box-shadow: none; transition: color var(--fw-uebergang), background-color var(--fw-uebergang), border-color var(--fw-uebergang); } /* --- Die Tastatur-Markierung ------------------------------------------------ DER WICHTIGSTE PUNKT DIESER DATEI. Am 04.08.2026 mit echtem Tastendruck gemessen: Ein .btn, mit der Tabulatortaste angesteuert, stand auf outline:none OHNE Ersatz. Die Prüfung auf :focus-visible traf zu - sichtbar war trotzdem nichts. Ein gewöhnlicher Link zeigte dagegen den Ring des Browsers. Wer ohne Maus arbeitet, sah also nicht, wo er steht. WARUM :focus-visible UND NICHT :focus :focus zeigt den Ring auch nach einem Mausklick. Das sieht nach einem Fehler aus - und genau deshalb wurde er früher vielerorts abgeschaltet, womit die Tastaturbedienung mit verschwand. :focus-visible zeigt ihn nur, wenn der Browser erkennt, dass ohne Maus gearbeitet wird. Damit ist beides zu haben. WARUM outline UND NICHT box-shadow Ein outline belegt keinen Platz im Layout, verschiebt also nichts. Und er bleibt sichtbar, wenn eine andere Regel den Schatten überschreibt. Der Ring folgt dabei von selbst der Eckenrundung des Elements. WER DIESE REGEL LÖSCHT, macht die Seite ohne Maus unbedienbar - und es fällt niemandem auf, der eine Maus benutzt. --------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .cf_flt_header:focus-visible, .proopc-btn:focus-visible { outline: var(--fw-rand-stark) solid var(--template-primary-color, #004494); outline-offset: 2px; } /* In der oberen Leiste und im Fußbereich steht der Ring auf dunklem Grund - dort wäre das Firmenblau unsichtbar. Deshalb dort weiß. */ .top-bar-content a:focus-visible, .footer-area a:focus-visible, .top-right a:focus-visible { outline-color: #ffffff; } /* =========================================================================== Lagerampel - die farbigen Punkte vor "auf Lager" Das neue Template benutzt dieselben Klassennamen wie das alte und zusätzlich .low-stock. Deshalb greifen diese Regeln unverändert. =========================================================================== */ span[class*="-stock"]:before { content: ''; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; } .normal-stock:before { background-color: #05a54b; } /* auf Lager */ .no-stock:before { background-color: grey; } /* nicht auf Lager */ .depot-stock:before { background-color: orange; } /* Zentrallager, 5-10 Tage */ .low-stock:before { background-color: #f0ad4e; } /* neu in vp_neoteric: Restbestand */ .product-inner span[class*="-stock"] { padding-left: 10px; } /* =========================================================================== Preise =========================================================================== */ /* Erzeugt das "UVP" vor dem Streichpreis. Ohne diese Regel steht dort nur eine durchgestrichene Zahl ohne Erklärung. */ span.PricebasePriceWithTax::before { content: "UVP "; } .product-price-before-discount { text-decoration: none; font-size: 12px; padding-right: 10px; } /* =========================================================================== Custom Fields For All - die Knöpfe für Rahmenhöhe und andere Auswahlfelder =========================================================================== */ .cf4all_button { border: var(--fw-rand-stark) solid #cdd3d9 !important; border-radius: var(--fw-radius) !important; /* Die Erweiterung legt einen weichen dunklen Schatten (0 0 4px rgba(10,10,10,.5)) um diese Knöpfe - der einzige Schatten dieser Art auf der Seite. Nach den Gestaltungsregeln tragen Knöpfe keinen Schatten; die Auswahl wird über Rahmen und Fläche angezeigt, und das tut sie weiter unten bereits. */ box-shadow: none !important; } .cf4all_button:hover { background-color: white !important; box-shadow: none; border: var(--fw-rand-stark) solid #848484 !important; } .cf4all_buttons input[type="radio"]:checked + label, .cf4all_buttons input[type="checkbox"]:checked + label, .cf4all_color_buttons input[type="radio"]:checked + label, .cf4all_color_buttons input[type="checkbox"]:checked + label { background-color: white; border: var(--fw-rand-stark) solid var(--template-primary-color) !important; box-shadow: none; } .cf4all_no_color_btn { background-color: transparent !important; } .cf4all_button::before { content: ''; width: 4px; height: 28px; position: absolute; margin: -7px 0 0 -11.5px; border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } /* Abstand am "Größe ermitteln"-Knopf neben der Feldbeschriftung */ .modal-span { padding-left: 0.3em; } /* =========================================================================== Custom Filters --------------------------------------------------------------------------- BERICHTIGUNG vom 30.07.2026: Am 29.07. stand hier, das Markup habe sich geändert. Das war falsch. Custom Filters gibt unter vp_neoteric exakt dieselben Klassen aus wie vorher - cf_flt_wrapper, cf_wrapper_inner, headexpand. Die senkrechte Darstellung entstand allein dadurch, dass diese Regeln fehlten. =========================================================================== */ /* NICHT übernommen: .cf-searchmod-input { width: 100% !important; } Im alten Template füllte das Suchfeld damit die Spalte. Unter vp_neoteric sprengt es die Zeile: das Feld nimmt die volle Breite, der Knopf "SUCHE" rutscht darunter. Am 29.07.2026 am Bild festgestellt und wieder entfernt. */ .cf_breadcrumbs_wrapper { margin-top: 1em; } /* --------------------------------------------------------------------------- Die Filter stehen in der linken Seitenspalte --------------------------------------------------------------------------- GEÄNDERT am 03.08.2026. Vorher war das hier eine waagerechte Leiste über den Produkten, aus der sich die Liste schwebend öffnete. Das war für FÜNF Filter gebaut und dafür auch richtig. Seit die Artikelmerkmale aus der Warenwirtschaft filterbar sind, sind es in der Kategorie E-Bike FÜNFUNDZWANZIG - am 03.08.2026 gezählt. Als Leiste ergäbe das drei Zeilen graue Kästchen am Schreibtisch und neun auf dem Handy, bevor das erste Rad zu sehen ist. Modul 115 steht deshalb jetzt in der Position "left". Das Template gibt sie als