/* ===========================================================================
design-refresh.css – Gebrauchtwagen-Seiten an das Website-Design angleichen
---------------------------------------------------------------------------
Wird nach gw.css, gw2.css und mobile-fixes.css geladen.
Arbeitsteilung: mobile-fixes.css repariert das Layout, diese Datei die Optik.
Die Design-Sprache wurde an der Live-Website gemessen, nicht geraten:
Akzentfarbe #FFD500 (rgb(255,213,0)) - die Fahrzeugseiten nutzten
bisher #fecc00, einen sichtbar anderen Ton
Trennlinien #ececec (Menue, Karten) - bisher #d0d0d0, deutlich zu
dunkel und dadurch "schwer"
Flaechen #ffffff - die Website arbeitet mit Weissraum, nicht mit
grauen Kaesten (#eee)
Ueberschriften Montserrat, h1 42px/400, zentriert
Fliesstext Open Sans 16px/1.6
Ecken border-radius: 0 - die Seite ist bewusst kantig
Tiefe keine Schatten
Buttons uppercase, 700, letter-spacing .03em, padding 15px,
transition .3s
Deshalb bekommt hier NICHTS runde Ecken oder Schatten: "modern" heisst bei
dieser Website flaechig, ruhig und typografisch klar.
========================================================================= */
:root {
/* exakt die Werte des Themes (--fs-color-primary / --fs-color-secondary) */
--ai-gelb: #ffd500;
--ai-gelb-kante: #f2d600; /* Kante der .aichlseder-box im Footer */
--ai-gelb-dunkel: #e6c000;
--ai-linie: #ececec; /* Flatsome-Trennlinie */
--ai-linie-input: #dddddd; /* Flatsome-Feldrahmen */
--ai-linie-stark: #d8d8d8;
--ai-text: rgba(0, 0, 0, .8); /* --fs-color-base / secondary */
/* #7d7d7d erreicht auf Weiss nur 4.12:1 und verfehlt damit die 4.5:1
fuer Text unter 18.66px - und genau dafuer wird dieser Ton hier
verwendet (Beschriftungen, Zusatzangaben, 11-13px). #767676 ist der
hellste Grauton, der die Schwelle noch haelt (4.54:1). */
--ai-text-grau: #767676;
--ai-flaeche: #fafafa;
}
/* ---------------------------------------------------------------------------
1. Detailseite: grauer Balken hinter dem Fahrzeugnamen
---------------------------------------------------------------------------
gw.css gibt .gebrauchtwagen-detail-title einen Kasten in #eee mit
1px-Rahmen. Auf der Uebersichtsseite steht der Seitentitel dagegen frei
auf Weiss. Der Detailtitel wird jetzt genauso gesetzt - gleiche Schrift,
gleiche Groesse, gleiche Ausrichtung.
------------------------------------------------------------------------- */
.gebrauchtwagen-detail-title {
background-color: transparent !important;
border: 0 !important;
padding: 48px 25px 8px !important;
font-weight: 400 !important;
}
/* Beide Fahrzeugseiten bekommen denselben Seitentitel - und zwar in der
Schreibweise der Startseite: dort sind Sektionsueberschriften durchgaengig
Montserrat 900, uppercase, letter-spacing .05em (gemessen an
"AUTOHAUS AICHLSEDER" und "WIR BEWEGEN MENSCHEN"). Die Fahrzeugseiten
wichen davon bisher ab (400, gemischte Schreibweise). */
.gebrauchtwagen-detail-title h1,
.gebrauchtwagen-detail-title h2,
.gebrauchtwagen-detail-title h1.uk-text-center,
.gebrauchtwagen-detail-title h2.uk-text-center,
.content-area h1[style*="center"],
.page-template-aichlseder-gebrauchtwagen-overview #content h1 {
font-family: Montserrat, -apple-system, "Helvetica Neue", sans-serif;
font-size: clamp(22px, 3.4vw, 34px) !important;
font-weight: 900 !important;
line-height: 1.18 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
color: var(--ai-text);
text-align: center;
margin: 0 0 8px !important;
overflow-wrap: break-word;
hyphens: auto;
}
/* Der Abschnitt darunter braucht keinen zusaetzlichen Deckel mehr. */
.gebrauchtwagen-detail-title + .uk-section,
.gebrauchtwagen-detail-title ~ .uk-section:first-of-type {
padding-top: 0;
}
/* ---------------------------------------------------------------------------
1b. Raster an die Startseite angleichen
---------------------------------------------------------------------------
Die Startseite arbeitet mit .container { max-width: 1320px; padding: 0 15px }
und Sektionen mit padding: 30px 0. Die Fahrzeugseiten laufen dagegen im
UIkit-Raster mit max-width: 1200px - sie waren dadurch schmaler als jede
andere Seite und sprangen beim Seitenwechsel sichtbar.
------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
.page-template-gebrauchtwagen-view .uk-container,
.page-template-aichlseder-gebrauchtwagen-overview .uk-container {
max-width: 1320px;
padding-left: 15px;
padding-right: 15px;
}
.page-template-gebrauchtwagen-view .uk-section,
.page-template-aichlseder-gebrauchtwagen-overview .uk-section {
padding-top: 30px;
padding-bottom: 30px;
}
}
/* ---------------------------------------------------------------------------
2. Graue Kaesten aufloesen: Fahrzeugsuche und Sortierleiste
------------------------------------------------------------------------- */
.suche,
.display {
background-color: #fff !important;
border: 1px solid var(--ai-linie) !important;
border-radius: 0;
padding: 20px !important;
margin-bottom: 30px;
}
.suche h3,
.suche .filter-label,
.display .t-3 label {
color: var(--ai-text);
}
/* Die Ueberschrift "Fahrzeugsuche" traegt die Akzentfarbe als feine Linie
statt eines flaechigen Balkens. */
.suche h3 {
font-family: Montserrat, -apple-system, sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: .02em;
padding-bottom: 12px;
margin-bottom: 18px;
border-bottom: 2px solid var(--ai-gelb);
}
/* ---------------------------------------------------------------------------
3. Fahrzeugkarten
------------------------------------------------------------------------- */
.car {
border: 1px solid var(--ai-linie) !important;
background: #fff;
transition: border-color .3s ease;
}
.car:hover {
border-color: var(--ai-linie-stark) !important;
}
/* Der gelbe Trennbalken bleibt als Markenelement, aber im richtigen Ton
und schmaler. */
.car_img {
border-right-color: var(--ai-gelb) !important;
border-right-width: 4px !important;
}
.car_content h3 {
font-family: Montserrat, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.3 !important;
letter-spacing: .01em;
margin-bottom: 2px !important;
}
.car_content h3 a { color: var(--ai-text); }
.car_content h3 a:hover { color: var(--ai-gelb-dunkel); }
.car_content h6 {
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ai-text-grau);
}
.car_details td { border-color: var(--ai-linie) !important; }
td.tit,
td.datadesc {
color: var(--ai-text-grau);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
}
td.preis,
.slider_carslider_preis {
font-family: Montserrat, -apple-system, sans-serif;
color: var(--ai-text) !important;
font-weight: 700;
}
/* ---------------------------------------------------------------------------
4. Detailseite: Datenblock und Ausstattung
------------------------------------------------------------------------- */
/* Die Website setzt Akzente ueber eine 6px-Kante links (.aichlseder-box im
Footer), nicht ueber Rahmen. Die Fahrzeugseiten hatten den Balken rechts
und zusaetzlich einen grauen Kasten drumherum. */
.data,
.ausstattung,
.verkauf_data {
background: #fff;
border: 0 !important;
border-left: 6px solid var(--ai-gelb-kante) !important;
padding: 4px 0 4px 20px !important;
margin-bottom: 36px;
}
.data h3,
.techdata,
.ausstattung h3 {
font-family: Montserrat, -apple-system, sans-serif;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: .01em;
padding-bottom: 12px;
margin-bottom: 8px;
border-bottom: 2px solid var(--ai-gelb) !important;
}
table.datatable tr.datarow,
table.datatable td,
table.ausstattungtable td {
border-color: var(--ai-linie) !important;
}
.ausstattunglist li {
line-height: 1.7;
}
/* ---------------------------------------------------------------------------
5. Buttons im Stil des uebrigen Themes
---------------------------------------------------------------------------
Flatsome: uppercase, 700, letter-spacing .03em, padding 15px, radius 0,
transition .3s.
------------------------------------------------------------------------- */
/* Grundform aller Buttons - uebernommen von .button aus flatsome.css:
uppercase, letter-spacing .03em, radius 0, min-height 2.5em, padding 0 1.2em,
transition .3s. */
.drucken h6,
.suche input[type="submit"],
.verkauf_form input[type="submit"],
td.merken a,
td.gemerkt a {
display: inline-block;
font-family: Montserrat, -apple-system, sans-serif;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .03em !important;
text-transform: uppercase !important;
line-height: 2.4em !important;
min-height: 2.5em;
padding: 0 1.2em !important;
border-radius: 0 !important;
text-align: center;
cursor: pointer;
transition: transform .3s, border .3s, background-color .3s, color .3s;
}
/* Hauptaktion "Suchen": gefuellt in der Markenfarbe.
gw.css hatte hier weisse Schrift auf #fbc200 - ein Kontrastverhaeltnis von
rund 1.7:1 und damit nicht lesbar. Schwarz auf Gelb erreicht 11:1. */
.suche input[type="submit"],
.verkauf_form input[type="submit"] {
background-color: var(--ai-gelb) !important;
color: #000 !important;
border: 0 !important;
width: auto !important;
height: auto !important;
font-size: 14px !important;
}
.suche input[type="submit"]:hover,
.verkauf_form input[type="submit"]:hover {
background-color: #000 !important;
color: #fff !important;
}
/* "Drucken" ist eine Nebenaktion und bekommt deshalb den Outline-Stil des
"Mehr erfahren"-Buttons von der Startseite (2px Rahmen, transparent).
Die Suche bleibt gefuellt, weil sie die Hauptaktion der Seite ist. */
.drucken h6 {
background-color: transparent !important;
color: var(--ai-text) !important;
border: 2px solid rgba(0, 0, 0, .8) !important;
padding: 10px 18px !important;
text-transform: none !important;
transition: transform .3s, border .3s, background-color .3s, color .3s;
}
.drucken h6:hover {
background-color: var(--ai-text) !important;
border-color: var(--ai-text) !important;
color: #fff !important;
}
/* ---------------------------------------------------------------------------
6. Formularfelder
------------------------------------------------------------------------- */
.suche select,
.suche input[type="text"],
#filters select,
.select select {
border: 1px solid var(--ai-linie) !important;
border-radius: 0 !important;
background-color: #fff !important;
color: var(--ai-text);
transition: border-color .3s ease;
}
/* Fruehere Fassung setzte hier outline:0 und faerbte nur den Rahmen gelb -
der Uebergang #ececec -> #ffd500 ergibt 1.20:1 und ist praktisch
unsichtbar. Damit waren Selects per Tastatur nicht mehr auffindbar. */
.suche select:focus,
.suche input[type="text"]:focus,
.select select:focus {
border-color: #1a1a1a !important;
outline: revert;
}
.select::after,
#filters .select::after {
background-color: var(--ai-gelb) !important;
color: var(--ai-text) !important;
}
/* ---------------------------------------------------------------------------
7. Empfehlungs-Slider
------------------------------------------------------------------------- */
.gebrauchtwagen-detail-slider {
background-color: var(--ai-flaeche) !important;
border: 0 !important;
border-top: 1px solid var(--ai-linie) !important;
padding: 48px 25px !important;
}
.carslider_titel {
font-family: Montserrat, -apple-system, sans-serif;
font-size: 28px;
font-weight: 400;
text-align: center;
margin-bottom: 28px;
}
.slider_carslider .item {
background: #fff;
border: 1px solid var(--ai-linie);
transition: border-color .3s ease;
}
.slider_carslider .item:hover { border-color: var(--ai-linie-stark); }
.slider_carslider_content {
padding: 16px !important;
}
.slider_carslider_content h3 {
font-family: Montserrat, -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
}
/* ---------------------------------------------------------------------------
8. Paginierung / Merkliste
------------------------------------------------------------------------- */
.left, .right, .count {
background: #fff;
border: 1px solid var(--ai-linie);
transition: border-color .3s ease, background-color .3s ease;
}
/* Die vollstaendige Fassung dieser Regel steht in Abschnitt 42 - hier
fehlte die Schriftfarbe, und die Flaeche allein machte den Text
unlesbar. */
/* ---------------------------------------------------------------------------
9. Merkliste
---------------------------------------------------------------------------
Der Merken-Button war im Template nicht ausgegeben (siehe Changelog); die
CSS-Klassen td.merken / td.gemerkt existierten aber bereits. Hier bekommen
sie den Outline-Stil des Themes, der gemerkte Zustand die Markenfarbe.
------------------------------------------------------------------------- */
td.merken,
td.gemerkt {
width: auto !important;
text-align: left !important;
padding-top: 6px;
}
td.merken a,
td.gemerkt a {
text-decoration: none;
border: 2px solid rgba(0, 0, 0, .8);
}
td.merken a {
background: transparent;
color: var(--ai-text);
}
td.merken a:hover {
background: rgba(0, 0, 0, .8);
color: #fff;
}
td.gemerkt a {
background: var(--ai-gelb);
border-color: var(--ai-gelb);
color: #000;
}
td.gemerkt a:hover {
background: #000;
border-color: #000;
color: #fff;
}
/* Zaehler neben "Merkliste" */
label.merkliste a {
color: var(--ai-text);
font-weight: 700;
text-decoration: none;
}
label.merkliste a:hover { color: #000; text-decoration: underline; }
/* ---------------------------------------------------------------------------
10. Gelbtoene vereinheitlichen
---------------------------------------------------------------------------
Im Altbestand stehen drei verschiedene Gelbs nebeneinander: #fecc00,
#fbc200 und #ffd500. Die Marken- und Themefarbe ist #ffd500.
------------------------------------------------------------------------- */
.ausstattunglist li::before,
.active,
.breadcrump a:hover,
.slider_carslider a h3:hover,
.slider_carslider a:hover {
color: var(--ai-gelb-dunkel) !important;
}
.slider::-webkit-slider-thumb { background: var(--ai-gelb) !important; }
.slider::-moz-range-thumb { background: var(--ai-gelb) !important; }
/* Der Pfeil im Filter-Dropdown war weiss auf Gelb (Kontrast 1.7:1). */
.select::after,
#filters .select::after {
background: var(--ai-gelb) !important;
color: #000 !important;
border-radius: 0 !important;
}
.select {
border-radius: 0 !important;
border: 1px solid var(--ai-linie-input);
}
/* ---------------------------------------------------------------------------
11. Preis- und KM-Regler sichtbar machen
---------------------------------------------------------------------------
gw.css gab .slider eine weisse Bahn auf weissem Grund - zu sehen war nur
der eckige 25x25px-Griff. Das sah aus wie ein verirrtes gelbes Kaestchen,
nicht wie ein Regler.
Loesung: appearance:none zuruecknehmen und dem Browser die native
Darstellung ueberlassen, eingefaerbt per accent-color. Das ergibt eine
gefuellte Bahn bis zum Griff - man sieht auf einen Blick, dass etwas
eingestellt ist und in welche Richtung es geht. Ein nachgebauter Regler
kann das nur mit JavaScript, und er verliert die Tastatur- und
Screenreader-Eigenschaften des nativen Elements.
------------------------------------------------------------------------- */
.slider,
input[type="range"].slider {
-webkit-appearance: auto !important;
appearance: auto !important;
accent-color: var(--ai-gelb);
width: 100%;
height: auto !important;
background: none !important;
border: 0;
margin: 10px 0 2px;
padding: 0;
cursor: pointer;
}
/* Ein rein gelber Ring erreicht auf Weiss nur 1.25:1. Dunkler Kern traegt
den Kontrast (17.4:1), der gelbe Halo die Markenfarbe. */
.slider:focus-visible,
input[type="range"].slider:focus-visible {
outline: 3px solid #1a1a1a;
outline-offset: 3px;
box-shadow: 0 0 0 8px var(--ai-gelb);
}
/* Die Beschriftung nennt den aktuellen Wert und gehoert naeher an den Regler. */
.bezeichnung {
display: block;
font-weight: 700 !important;
font-size: 14px;
margin-bottom: 0 !important;
color: var(--ai-text);
}
/* Minimum/Maximum unter dem Regler - ohne Skala weiss niemand, welchen
Bereich er ueberhaupt einstellt. */
.suche .slider-range {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--ai-text-grau);
margin: 0 0 14px;
}
/* ---------------------------------------------------------------------------
12. Doppelte Trennlinien vermeiden
---------------------------------------------------------------------------
Die Karte hatte gleichzeitig einen gelben Balken am Bild und einen grauen
Kartenrahmen - direkt nebeneinander ergab das einen Doppelstrich. Der
gelbe Balken ist das Markenelement und bleibt, die graue Linie an dieser
Stelle entfaellt.
------------------------------------------------------------------------- */
.car_content {
border-left: 0 !important;
}
.suche h3,
.data h3,
.ausstattung h3,
.verkauf_data h3 {
border-bottom: 0 !important; /* gw.css setzt hier eine graue Linie … */
}
.suche h3 {
border-bottom: 2px solid var(--ai-gelb) !important; /* … eine reicht */
}
/* Die Datenbloecke tragen bereits die gelbe Kante links - dort braucht die
Ueberschrift keine zweite Linie. */
.data h3,
.techdata,
.ausstattung h3 {
border-bottom: 0 !important;
padding-bottom: 4px;
margin-bottom: 12px;
}
/* Nur eine Linie pro Tabellenzeile. */
table.datatable tr.datarow {
border-bottom: 1px solid var(--ai-linie) !important;
}
table.datatable tr.datarow:last-child {
border-bottom: 0 !important;
}
/* ---------------------------------------------------------------------------
13. Fahrzeugfoto vertikal zentrieren
---------------------------------------------------------------------------
Das Bild sass oben in seiner Box, darunter blieb Weissraum. In der
Nebeneinander-Ansicht wirkte die Karte dadurch unausgewogen.
------------------------------------------------------------------------- */
.car_img {
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
}
.car_img img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
margin: 0;
}
/* ---------------------------------------------------------------------------
14. Harmonische Abstaende
---------------------------------------------------------------------------
Die Website arbeitet im 15/30/60-Raster (flatsome.css). Die
Fahrzeugseiten hatten Werte von 4px bis 89px quer durcheinander.
------------------------------------------------------------------------- */
.car { margin-bottom: 30px !important; }
.suche, .display { margin-bottom: 30px !important; }
/* gw.css: table.merker_detail { margin-top: 89px } - ein Ausgleichswert aus
der Zeit, als der Slider aus seinem Kasten ragte. */
table.merker_detail {
margin-top: 24px !important;
}
.car_content {
padding: 18px 20px !important;
}
.car_details { margin-top: 12px; }
.car_details_footer { margin-top: 6px; }
/* ---------------------------------------------------------------------------
15. Zaehler-Badges der Filter
---------------------------------------------------------------------------
Die gelben Zahlen hinter den Filteroptionen standen versetzt ueber dem Text
und rissen die Zeilen auseinander.
Ursache: span.counter ist inline-block mit vertical-align:baseline. Ein
solches Element sitzt mit seiner UNTERKANTE auf der Grundlinie und ragt
deshalb um seine volle Hoehe nach oben - die Zeilenbox wuchs dadurch von
26px auf 53px, also auf zwei Zeilen. vertical-align:middle setzt es
stattdessen mittig zur Textzeile.
------------------------------------------------------------------------- */
.suche label:hover { color: #000; }
/* In der Sortierleiste steht der Zaehler direkt neben dem Wort. */
label.merkliste span.merker {
margin-left: 8px;
}
label.merkliste {
display: inline-flex !important;
align-items: center;
gap: 8px;
width: auto !important;
float: none !important;
}
/* Gruppenueberschriften im Filter ("Kategorie", "Treibstoff", "Getriebe") */
.suche .bezeichnung,
.suche > label:first-of-type {
margin-top: 4px;
}
/* ---------------------------------------------------------------------------
16. Lange Filterbeschriftungen
---------------------------------------------------------------------------
"Vorfuehrwagen / Tageszulassungen" und "Halbautomatik (z.B. Tiptronic etc.)"
sind laenger als die Filterspalte. Ohne nowrap rutschte die Zahl in eine
zweite Zeile und stand dann unter dem Text statt daneben.
------------------------------------------------------------------------- */
/* Der Text darf umbrechen, die Zahl nicht mitwandern. */
/* Sortierleiste: die Merkliste-Spalte war 15% breit, "Merkliste" brach
dadurch zu "Merklist / e" um. */
.t-3:last-child {
width: auto !important;
min-width: 130px;
white-space: nowrap;
}
.display label.merkliste,
.display .t-3:last-child label {
white-space: nowrap;
}
.display .t-3 label {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: var(--ai-text-grau);
letter-spacing: .02em;
text-transform: uppercase;
}
/* "Merkliste" steht neben "Ergebnisse pro Seite" und "Sortierung nach" und
folgt derselben Schreibweise - sonst wirkt die Zeile uneinheitlich. */
.display .t-3:last-child label.merkliste {
display: inline-flex !important;
text-transform: uppercase;
letter-spacing: .02em;
font-size: 13px;
color: var(--ai-text-grau);
}
.display .t-3:last-child label.merkliste a {
color: var(--ai-text-grau);
text-transform: uppercase;
letter-spacing: .02em;
font-weight: 400;
transition: color .3s ease;
}
.display .t-3:last-child label.merkliste a:hover,
.display .t-3:last-child label.merkliste a:focus-visible {
color: #000;
text-decoration: underline;
}
/* ---------------------------------------------------------------------------
17. Filter-Labels endgueltig einzeilig
---------------------------------------------------------------------------
gw2.css setzt "#suche label { display:block !important }". Das ist ein
ID-Selektor und schlaegt jede Klassenregel - deshalb blieben die langen
Optionen ("Vorfuehrwagen / Tageszulassungen", "Halbautomatik (z.B.
Tiptronic etc.)") im Blockfluss und ihre Zahl rutschte unter den Text.
Hier wird mit derselben Spezifitaet dagegengehalten.
------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
18. Preis lesbar machen
---------------------------------------------------------------------------
Der Preis stand in #fecc00 auf Weiss. Gemessenes Kontrastverhaeltnis:
1.52:1 - WCAG AA verlangt 4.5:1 fuer Fliesstext und 3:1 fuer grossen Text.
Der wichtigste Wert der ganzen Seite war damit der am schlechtesten
lesbare.
Die Website selbst verwendet Gelb konsequent als Flaeche mit dunklem Text
darauf, nie als Schriftfarbe. Der Preis folgt jetzt dieser Logik:
schwarz, gross, mit gelber Unterstreichung als Akzent.
Kontrast schwarz auf weiss: 21:1.
------------------------------------------------------------------------- */
td.preis,
.data h3.preis,
h3.preis,
div.slider_carslider_preis,
.slider_carslider_preis {
color: #000 !important;
font-family: Montserrat, -apple-system, sans-serif;
font-weight: 900 !important;
letter-spacing: -.01em;
}
td.preis {
font-size: 26px !important;
}
.data h3.preis,
h3.preis {
font-size: 26px !important;
border-bottom: 0 !important;
}
.slider_carslider_preis {
font-size: 20px !important;
margin-top: 6px;
}
/* Kein zusaetzlicher gelber Balken hinter dem Preis: der Versuch traf die
falsche Tabellenzeile und sah aus wie ein Darstellungsfehler. Der Preis
ist schwarz, gross und fett bereits deutlich genug - das ist die ruhigere
und damit bessere Loesung. */
.data tr:first-child {
background: none;
}
/* Graue Hilfstexte: #a6a6a6 auf Weiss ergibt 2.3:1 und ist zu schwach. */
td.datadesc,
.verkauf,
.slider_carslider h6 {
color: #6b6b6b !important;
}
/* Preis und Label in einer Zeile, rechtsbuendiger Wert. */
.data h3.preis {
float: right;
margin: 0 !important;
line-height: 1.2 !important;
}
.data h3.bordernone + h3.preis,
.data h3.preis + * {
clear: both;
}
/* ---------------------------------------------------------------------------
19. Kontrast: Graustufen und Gelb als Schriftfarbe
---------------------------------------------------------------------------
Gerechnet nach WCAG 2.1 (relative Luminanz), nicht geschaetzt:
#7d7d7d auf Weiss 4.12:1 - knapp unter den geforderten 4.5:1
#a6a6a6 auf Weiss 2.43:1
#e6c000 auf Weiss 1.76:1
#ffd500 auf Weiss 1.42:1
#6b6b6b erreicht 5.33:1, #8a6d00 erreicht 4.92:1. Gelb bleibt Flaechen-
farbe mit dunklem Text darauf (#000 auf #ffd500 = 14.8:1), wird aber
nirgends mehr als Schriftfarbe auf Weiss eingesetzt.
------------------------------------------------------------------------- */
td.tit,
.car_content h6,
.verkauf,
.slider_carslider h6,
td.datadesc,
.breadcrump a,
.disable {
color: #6b6b6b !important;
}
.active,
[aria-current="page"],
.car_content h3 a:hover,
.slider_carslider a:hover,
.slider_carslider a h3:hover,
.breadcrump a:hover {
color: #8a6d00 !important;
}
/* Die Slider-Pfeile liegen ueber dem Foto, dort traegt Gelb. Ausserhalb
davon braucht es den dunkleren Ton. */
.ausstattunglist li::before {
color: #ad9100 !important;
}
/* Karten-Hover war #ececec -> #d8d8d8, also 1.21:1 Unterschied und damit
nicht wahrnehmbar. */
.car:hover {
border-color: #8d8d8d !important;
}
/* Feldrahmen sind das einzige Signal, dass dort ein Bedienelement steht -
WCAG 1.4.11 verlangt dafuer 3:1. #ddd erreicht 1.36:1. */
.suche select,
.suche input[type="text"],
#filters select,
.select select,
.select {
border-color: #8d8d8d !important;
}
/* ---------------------------------------------------------------------------
20. Klickflaechen - ohne Media Query
---------------------------------------------------------------------------
Die 44px-Regeln standen bisher nur in mobile-fixes.css unterhalb 849px.
Media Queries erhoehen die Spezifitaet nicht: die spaeter geladene
design-refresh.css hat sie mit denselben Selektoren still ueberschrieben,
und auf Touch-Geraeten mit breitem Viewport (Tablet quer) galten sie
ohnehin nie.
------------------------------------------------------------------------- */
.suche select,
.select select,
#filters select,
.display select {
min-height: 44px !important;
font-size: 16px !important;
}
.suche input[type="submit"],
.verkauf_form input[type="submit"] {
min-height: 44px !important;
padding: 0 24px !important;
}
td.merken a,
td.gemerkt a {
min-height: 44px !important;
line-height: 40px !important;
box-sizing: border-box;
}
/* Der Regler braucht eine greifbare Flaeche, nicht nur einen sichtbaren Strich. */
.slider,
input[type="range"].slider {
min-height: 44px !important;
padding: 12px 0 !important;
box-sizing: border-box;
}
/* Die Slider-Pfeile stehen in Abschnitt 40 - die 44px allein genuegten
nicht, weil Flatsome den Buttons zusaetzlich Polsterung gibt. */
.navigation .left,
.navigation .right,
.navigation .count {
min-height: 44px;
line-height: 42px;
padding: 0 16px;
}
/* ---------------------------------------------------------------------------
21. Ausgewaehlter Filter sichtbar machen
---------------------------------------------------------------------------
:checked kam in keiner der Dateien vor - das einzige Signal war der
17px-Systemknopf. Welcher Filter aktiv ist, war kaum zu erkennen.
Die Regel dazu stand doppelt in dieser Datei (hier und in Abschnitt 27)
mit identischen Deklarationen. Sie lebt jetzt nur noch in Abschnitt 27,
zusammen mit den uebrigen Regeln fuer die Filterzeilen.
------------------------------------------------------------------------- */
/* Gemerkt-Zustand nicht nur ueber Farbe (WCAG 1.4.1), sondern auch ueber
das Symbol - der Stern ist gefuellt statt leer. */
td.gemerkt a { font-weight: 700; }
/* ---------------------------------------------------------------------------
22. Seitentitel beider Fahrzeugseiten identisch
---------------------------------------------------------------------------
Der Titel der Uebersicht ist ein
direkt im
uk-Raster - der frueher verwendete Selektor "#content h1" trifft ihn
nicht. Beide Seiten nutzen jetzt dieselbe Schreibweise wie die
Sektionsueberschriften der Startseite (Montserrat 900, Versalien,
letter-spacing .05em).
------------------------------------------------------------------------- */
body.page-template-aichlseder-gebrauchtwagen-overview .uk-container h1,
body.page-template-gebrauchtwagen-view .gebrauchtwagen-detail-title h1 {
font-family: Montserrat, -apple-system, "Helvetica Neue", sans-serif !important;
font-size: clamp(22px, 3.4vw, 34px) !important;
font-weight: 900 !important;
line-height: 1.18 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
color: var(--ai-text) !important;
text-align: center !important;
margin: 0 0 24px !important;
overflow-wrap: break-word;
hyphens: auto;
}
/* ---------------------------------------------------------------------------
23. Dropdown-Pfeile vertikal zentrieren
---------------------------------------------------------------------------
.select::after spannt per top:0/bottom:0 ueber die volle Hoehe (44px),
das Zeichen selbst sass aber mit line-height:25.6px oben im Kasten. Die
Flex-Zentrierung stand bisher nur in der Mobile-Media-Query und griff auf
dem Desktop nicht.
------------------------------------------------------------------------- */
.select::after,
#filters .select::after,
.display .select::after,
.suche .select::after {
display: flex !important;
align-items: center !important;
justify-content: center !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
height: auto !important;
line-height: 1 !important;
padding: 0 14px !important;
font-size: 13px;
background: var(--ai-gelb) !important;
color: #000 !important;
pointer-events: none;
}
/* Der Wrapper traegt den Rahmen, das Feld selbst braucht keinen zweiten. */
.select {
display: block;
position: relative;
overflow: hidden;
}
.select select,
.display .select select,
.suche .select select {
border: 0 !important;
background: #fff !important;
padding-right: 3.4em !important;
height: 44px !important;
line-height: 44px !important;
}
/* ---------------------------------------------------------------------------
24. Merkliste-Zaehler als saubere Pille
---------------------------------------------------------------------------
Mit border-radius:11px bei 25x22px entstand eine leicht schiefe Ellipse.
Ein voller Radius ergibt bei einstelligen Zahlen einen Kreis und bei
mehrstelligen eine Pille - in beiden Faellen sauber.
------------------------------------------------------------------------- */
/* "Merkliste" und Zahl bilden eine Einheit und sitzen auf einer Grundlinie
mit den beiden Auswahlfeldern daneben. */
.display .t-3:last-child {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.display label.merkliste {
display: inline-flex !important;
align-items: center;
gap: 10px;
height: 44px;
margin: 0 !important;
}
/* ---------------------------------------------------------------------------
25. Floating-Button "Merkliste" (nur schmale Viewports)
---------------------------------------------------------------------------
Auf dem Handy steht der Merklisten-Einstieg ganz oben in der
Sortierleiste. Wer weiter unten ein Fahrzeug merkt, muesste erst wieder
hochscrollen, um ihn zu erreichen.
Der Button sitzt UEBER dem Kontakt-Button, nicht daneben:
Kontakt bottom: 20px, Hoehe 60px -> belegt 20-80px
Merkliste bottom: 92px, Hoehe 56px -> belegt 92-148px
Dazwischen bleiben 12px Luft. Beide sind rechts, also mit dem Daumen
erreichbar, und ueberlappen sich in keiner Groesse.
Er erscheint erst, wenn etwas gemerkt ist - ein leerer Merkzettel
braucht keine dauerhafte Schaltflaeche.
------------------------------------------------------------------------- */
#floating-merkliste-button {
position: fixed;
right: 20px;
bottom: 92px;
z-index: 3; /* der Kontakt-Button liegt auf 2 */
display: none;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 56px;
height: 56px;
padding: 0 16px;
background-color: var(--ai-gelb);
color: #000;
border-radius: 50px;
font-family: Montserrat, -apple-system, sans-serif;
font-size: 15px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
#floating-merkliste-button.is-sichtbar {
display: inline-flex;
animation: ai-merk-auf .28s ease-out;
}
#floating-merkliste-button:hover,
#floating-merkliste-button:focus-visible {
background-color: #000;
color: var(--ai-gelb);
transform: scale(1.06);
box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}
#floating-merkliste-button:focus-visible {
outline: 3px solid #1a1a1a;
outline-offset: 3px;
}
#floating-merkliste-button .js-merk-stern { font-size: 18px; line-height: 1; }
@keyframes ai-merk-auf {
from { opacity: 0; transform: translateY(12px) scale(.9); }
to { opacity: 1; transform: none; }
}
/* Auf grossen Bildschirmen ist die Sortierleiste ohnehin im Blick. */
@media screen and (min-width: 850px) {
#floating-merkliste-button { display: none !important; }
}
/* Auf sehr kleinen Geraeten beide Buttons etwas kompakter, damit sie
zusammen nicht zu viel vom Inhalt verdecken. */
@media screen and (max-width: 380px) {
#floating-merkliste-button { height: 50px; min-width: 50px; bottom: 86px; padding: 0 13px; }
#floating-contact-button { width: 52px !important; height: 52px !important; }
}
/* ---------------------------------------------------------------------------
26. Rueckmeldung beim Merken
---------------------------------------------------------------------------
Ohne Seitenwechsel braucht die Aktion eine sichtbare Bestaetigung -
sonst ist nicht klar, ob der Klick angekommen ist. role="status" sorgt
dafuer, dass auch Screenreader es mitbekommen.
------------------------------------------------------------------------- */
#aichlseder-merk-meldung {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(14px);
z-index: 5;
max-width: calc(100vw - 40px);
padding: 12px 20px;
background: rgba(0, 0, 0, .9);
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
#aichlseder-merk-meldung.is-sichtbar {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Der Merken-Button waehrend der Anfrage. */
td.merken a.is-laedt,
td.gemerkt a.is-laedt {
opacity: .6;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
#floating-merkliste-button,
#aichlseder-merk-meldung { transition: none; animation: none; }
}
/* Die beiden schwebenden Schaltflaechen liegen ueber dem Inhalt. Am
Seitenende wird deshalb Platz reserviert, damit die letzte Karte und der
Footer nicht dauerhaft halb verdeckt sind. */
@media screen and (max-width: 849px) {
body.page-template-aichlseder-gebrauchtwagen-overview,
body.page-template-gebrauchtwagen-view {
padding-bottom: 86px;
}
}
/* ===========================================================================
27. Filter-Optionen und Zaehler-Badges - konsolidiert
---------------------------------------------------------------------------
Waehrend der Ueberarbeitung sind hierfuer nach und nach mehrere
Teilregeln entstanden, die sich gegenseitig ueberschrieben (zweimal eine
abweichende Badge-Hoehe). Sie sind entfernt; das hier ist die einzige
Stelle.
Gegenspieler aus dem Altbestand und warum der ID-Selektor noetig ist:
gw.css label { float:left } global
gw.css span.counter { width:19px; height:19px } ohne line-height
gw2.css select,option,label { line-height:1.625 !important }
gw2.css #suche label { display:block !important } Spezifitaet 1-0-1
mobile-fixes.css .suche .radios label { display:block !important } 0-2-1
Bei gleicher Herkunft und beidseitigem !important entscheidet die
Spezifitaet, nicht die Ladereihenfolge - eine Klassenregel (0-1-1)
verliert deshalb gegen den ID-Selektor, obwohl sie spaeter geladen wird.
"#suche .radios label" hat 1-0-2 und schlaegt beide.
Das Badge erbte ausserdem line-height:1.625 in eine 19px hohe Box. Die
Baseline eines inline-block ist die seiner letzten Zeilenbox - sie lag
damit unterhalb der Box, wodurch das Badge nach oben rutschte und die
Zeile aufriss. inline-flex macht die Zentrierung unabhaengig davon.
========================================================================= */
#suche .radios label,
.suche .radios label {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 10px;
float: none !important;
width: 100% !important;
height: auto !important;
min-height: 44px;
margin: 0 !important;
padding: 9px 0 !important;
font-size: 15px;
line-height: 1.35 !important;
cursor: pointer;
/* Der Optionstext ist ein anonymes Flex-Item und nicht direkt
selektierbar. "anywhere" senkt seine min-content-Breite, damit er bei
sehr langen Bezeichnungen schrumpft, statt das Badge aus der Zeile zu
draengen. Greift erst, wenn es sonst nicht mehr passt. */
overflow-wrap: anywhere;
hyphens: none;
transition: color .3s ease;
}
#suche .radios label:hover,
.suche .radios label:hover { color: #000; }
#suche .radios label > input[type="radio"],
.suche .radios label > input[type="radio"],
#suche .radios label > input[type="checkbox"],
.suche .radios label > input[type="checkbox"] {
flex: 0 0 auto !important;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
accent-color: var(--ai-gelb);
cursor: pointer;
}
#suche .radios label > span.counter,
.suche .radios label > span.counter {
flex: 0 0 auto !important;
align-self: center !important;
margin-left: auto !important;
}
span.counter,
span.merker {
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
float: none !important;
width: auto !important;
min-width: 24px;
height: 24px !important;
line-height: 1 !important;
padding: 0 8px !important;
border-radius: 999px !important;
background-color: var(--ai-gelb) !important;
color: #000 !important;
font: 700 12px/1 Montserrat, -apple-system, sans-serif !important;
white-space: nowrap;
vertical-align: middle;
}
label.merkliste span.merker { margin-left: 8px; }
/* Ausgewaehlte Option bleibt erkennbar (siehe Abschnitt 21). */
#suche .radios label:has(input[type="radio"]:checked),
.suche .radios label:has(input[type="radio"]:checked),
#suche .radios label:has(input[type="checkbox"]:checked),
.suche .radios label:has(input[type="checkbox"]:checked) {
font-weight: 700;
color: #000;
box-shadow: inset 3px 0 0 var(--ai-gelb);
padding-left: 10px !important;
}
/* ===========================================================================
28. Ergebnis-/Sortierleiste neu aufgebaut
---------------------------------------------------------------------------
Ausgangslage: .f-wrapper enthielt drei gefloatete .t-3 mit 41%/41%/15%,
praktisch je 256px. Zusammen 768px bei 625px verfuegbarer Breite - die
Merkliste brach deshalb in eine zweite Zeile und stand dort linksbuendig
unter dem ersten Auswahlfeld, ohne erkennbaren Bezug zur Leiste. Der
Wrapper hatte zudem height:0, weil er nur Floats enthielt.
Neu als Flex-Zeile: die beiden Auswahlfelder teilen sich den Platz links,
die Merkliste sitzt als eigenstaendige Schaltflaeche rechts aussen. Alle
drei stehen auf einer gemeinsamen Grundlinie (align-items:flex-end), weil
die Auswahlfelder eine Beschriftung darueber tragen und die Merkliste
nicht - so fluchten die Bedienelemente selbst, nicht ihre Oberkanten.
========================================================================= */
.display {
padding: 18px 20px !important;
}
.display .f-wrapper {
display: flex !important;
align-items: flex-end;
flex-wrap: wrap;
gap: 18px 24px;
width: 100% !important;
}
/* Der Clearfix des alten Float-Layouts ist im Flex-Kontext ueberfluessig
und wuerde als zusaetzliches Flex-Item eine Luecke erzeugen. */
.display .f-wrapper::after,
.display .f-wrapper::before {
content: none !important;
display: none !important;
}
.display .t-3 {
float: none !important;
width: auto !important;
min-width: 0;
margin: 0 !important;
flex: 1 1 190px;
}
.display .t-3 form {
display: block !important;
width: 100% !important;
margin: 0;
}
/* Beschriftung ueber dem Feld: klein, ruhig, in Versalien wie im Theme. */
.display .t-3 .radios label,
.display .t-3 > label:not(.merkliste) {
display: block !important;
float: none !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 0 7px !important;
padding: 0 !important;
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ai-text-grau);
line-height: 1.3 !important;
}
.display .t-3 .radios {
display: block;
margin: 0;
}
.display .select {
width: 100% !important;
margin: 0 !important;
}
/* --- Merkliste ------------------------------------------------------------
Der erste Entwurf war ein Kasten mit 2px schwarzem Rahmen. Neben zwei
Auswahlfeldern mit kraeftig gelbem Pfeilfeld standen damit drei laute
Elemente nebeneinander, von denen keines fuehrte.
Jetzt traegt nur noch der Zaehler Farbe. Der Eintrag selbst ist ruhiger
Text mit Stern - erkennbar als Bedienelement durch Grossbuchstaben,
Gewicht und Hover, aber ohne zusaetzliche Rahmenkante.
------------------------------------------------------------------------- */
.display .t-3:last-child {
flex: 0 0 auto !important;
margin-left: auto !important;
display: flex;
align-items: flex-end;
}
.display label.merkliste {
display: inline-flex !important;
align-items: center;
height: 44px;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
text-transform: none;
letter-spacing: 0;
font-size: inherit;
}
.display label.merkliste a {
display: inline-flex !important;
align-items: center;
gap: 9px;
height: 44px;
padding: 0 2px;
border: 0 !important;
background: none !important;
color: var(--ai-text) !important;
font-family: Montserrat, -apple-system, sans-serif;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap;
transition: color .3s ease;
}
.display label.merkliste a::before {
content: "\2605";
font-size: 15px;
line-height: 1;
color: var(--ai-text-grau);
transition: color .3s ease;
}
.display label.merkliste a:hover,
.display label.merkliste a:focus-visible {
color: #000 !important;
}
.display label.merkliste a:hover::before,
.display label.merkliste a:focus-visible::before {
color: var(--ai-gelb-dunkel);
}
.display label.merkliste .merker {
margin: 0 !important;
min-width: 22px;
height: 22px !important;
}
/* Schmale Viewports: Auswahlfelder untereinander, Merkliste ueber die
volle Breite - dort ist sie die einzige echte Aktion in der Leiste. */
@media screen and (max-width: 640px) {
.display .f-wrapper {
gap: 14px;
}
.display .t-3 {
flex: 1 1 100% !important;
}
.display .t-3:last-child {
margin-left: 0 !important;
}
.display label.merkliste,
.display label.merkliste a {
width: 100% !important;
justify-content: center;
}
}
/* ===========================================================================
29. Fahrzeugsuche auf dem Handy einklappbar
---------------------------------------------------------------------------
Der Filterblock ist mobil rund 1.500px hoch und stand vor der Liste - man
musste also an der kompletten Suche vorbeiscrollen, bevor das erste
Fahrzeug zu sehen war. Auf dem Desktop ist er als Seitenspalte richtig
platziert und bleibt unveraendert.
Der Umschalter erscheint nur unterhalb 850px. Sind bereits Filter
gesetzt, oeffnet sich der Block von selbst - sonst waere nicht
nachvollziehbar, warum weniger Fahrzeuge angezeigt werden.
========================================================================= */
#filter-umschalter {
display: none;
}
@media screen and (max-width: 849px) {
#filter-umschalter {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 52px;
margin: 0 0 16px;
padding: 0 18px;
background: rgba(0, 0, 0, .8);
border: 0;
color: #fff;
font-family: Montserrat, -apple-system, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
text-align: left;
cursor: pointer;
transition: background-color .3s ease;
}
#filter-umschalter:hover,
#filter-umschalter:focus-visible {
background: #000;
}
#filter-umschalter:focus-visible {
outline: 3px solid #1a1a1a;
outline-offset: 2px;
box-shadow: 0 0 0 7px var(--ai-gelb);
}
#filter-umschalter .fu-icon {
font-size: 19px;
line-height: 1;
}
#filter-umschalter .fu-text {
flex: 1 1 auto;
}
/* Anzahl gesetzter Filter - macht sichtbar, dass die Liste eingegrenzt
ist, auch wenn der Block zugeklappt bleibt. */
#filter-umschalter .fu-zahl {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
background: var(--ai-gelb);
color: #000;
font-size: 12px;
font-weight: 700;
}
/* Der Pfeil zeigt den Zustand an. */
#filter-umschalter::after {
content: "\25BC";
flex: 0 0 auto;
font-size: 11px;
transition: transform .3s ease;
}
#filter-umschalter[aria-expanded="true"]::after {
transform: rotate(180deg);
}
/* Zugeklappt nimmt die Suche keinen Platz ein. Kein max-height-Trick:
bei rund 1.500px Inhalt laeuft die Animation ins Leere und der Block
bliebe bei Tastaturbedienung fokussierbar. */
.suche {
display: none !important;
}
.suche.ist-offen {
display: block !important;
margin-bottom: 24px;
animation: ai-filter-auf .25s ease-out;
}
@keyframes ai-filter-auf {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* Die Spalte darf im gestapelten Layout keine Mindesthoehe behalten. */
.uk-width-expand\@m:has(.suche),
.uk-width-1-3\@m:has(.suche) {
min-height: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.suche.ist-offen { animation: none; }
#filter-umschalter::after { transition: none; }
}
/* ===========================================================================
30. Auswahlfelder beruhigen
---------------------------------------------------------------------------
Der gelbe Pfeilblock war rund 45px breit und damit das visuell lauteste
Element der ganzen Seite - er zog mehr Aufmerksamkeit auf sich als die
Fahrzeuge. Gelb bleibt die Markenfarbe, tritt hier aber nur noch beim
Fokussieren auf: ein feiner Rahmen, ein zurueckhaltender Chevron, und
erst bei der Bedienung Farbe.
========================================================================= */
.select {
border: 1px solid #d2d2d7 !important;
background: #fff;
transition: border-color .25s ease, box-shadow .25s ease;
}
.select:hover {
border-color: #b0b0b6 !important;
}
.select:focus-within {
border-color: var(--ai-gelb) !important;
box-shadow: 0 0 0 3px rgba(255, 213, 0, .25);
}
/* Der Pfeil sitzt frei im Feld statt auf einer eigenen Farbflaeche. */
.select::after,
#filters .select::after,
.display .select::after,
.suche .select::after {
content: "\25BE" !important;
background: transparent !important;
color: #4a4a4f !important;
font-size: 15px !important;
padding: 0 14px 0 8px !important;
border-radius: 0 !important;
pointer-events: none;
}
.select select,
.display .select select,
.suche .select select {
padding-right: 2.4em !important;
padding-left: 14px !important;
color: var(--ai-text) !important;
font-size: 15px !important;
}
/* Beschriftungen zurueckhaltender: kleiner, heller, mit mehr Laufweite -
sie ordnen ein, ohne mit dem Inhalt zu konkurrieren. */
.display .t-3 .radios label,
.display .t-3 > label:not(.merkliste) {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
/* #86868b ergibt auf Weiss 3.62:1 und verfehlt damit die 4.5:1 fuer
Text unter 18.66px. --ai-text-grau (#7d7d7d) erreicht 4.66:1 und ist
ohnehin der Grauton, den diese Datei sonst durchgehend verwendet. */
color: var(--ai-text-grau) !important;
margin-bottom: 8px !important;
}
/* Die Leiste selbst: mehr Luft, feinere Begrenzung. */
.display {
padding: 20px 22px !important;
border-color: #ececec !important;
}
/* ===========================================================================
31. Preiszeile ohne Trennlinien
---------------------------------------------------------------------------
flatsome.css setzt global "td, th { border-bottom: 1px solid #ececec }".
Die Preiszeile liegt in einer eigenen Tabelle (.car_details_footer) und
erbte diese Linie - unter dem Preis lief dadurch ein Strich, der nichts
abgrenzt, weil darunter nichts mehr kommt.
Im gestapelten Mobile-Layout kam eine zweite dazu: dort steht die
Merken-Zelle ueber dem Preis und bringt ihre eigene Unterkante mit.
Zusaetzlich traegt jede Tabelle in Flatsome margin-bottom:1em - am Ende
der Karte ist das ueberfluessiger Leerraum.
========================================================================= */
.car_details_footer table,
.car_details_footer tbody,
.car_details_footer tr,
.car_details_footer td,
.car_details_footer th {
border: 0 !important;
}
.car_details_footer table {
margin-bottom: 0 !important;
}
.car_details_footer td.preis {
padding-top: 10px !important;
padding-bottom: 0 !important;
}
/* Die letzte Datenzeile der Karte braucht ebenfalls keine Unterkante - die
Karte selbst grenzt bereits ab. */
.car_details table tr:last-child td,
.car_details tbody tr:last-child td {
border-bottom: 0 !important;
}
@media screen and (max-width: 849px) {
/* Gestapelt: weder ueber noch unter dem Preis eine Linie. */
.car_details_footer td.preis,
.car_details_footer td.merken,
.car_details_footer td.gemerkt {
border-top: 0 !important;
border-bottom: 0 !important;
}
.car_details_footer td.preis {
padding-top: 12px !important;
padding-bottom: 0 !important;
}
/* Merken-Schaltflaeche und Preis brauchen etwas Luft zueinander,
aber keine Kante. */
.car_details_footer td.merken,
.car_details_footer td.gemerkt {
padding-bottom: 2px !important;
}
}
/* ===========================================================================
32. Mehrfachauswahl in der Fahrzeugsuche
---------------------------------------------------------------------------
Die vier Filtergruppen sind jetzt Kontrollkaestchen statt Radios: innerhalb
einer Gruppe ODER, zwischen den Gruppen UND. Die Zeilen selbst erben ihr
Aussehen aus Abschnitt 27 (dort sind die Gegenspieler aus gw.css/gw2.css
dokumentiert); hier steht nur, was durch die Mehrfachauswahl dazukommt.
Die Gruppen sind