/* LC Variation Split, weitere Farben in der Kachel (K6). Nur Anordnung und Aufbau; Farben nur aus den Gestaltungswerten
   des Templates mit Ersatzwert (Leitlinie 8.6): --lc-linie-stark (Rand der Felder und Bilder), --lc-text-leise (Rand heller
   und leerer Felder, mindestens 3:1 zu Weiß; „+N“), --lc-akzent (Rand bei Zeiger und Fokus), --lc-flaeche-hell (Feld ohne
   Farbton); Rundung aus --lc-radius. Die Farbtöne der Felder kommen als Daten am Element (--lcvs-ton1, --lcvs-ton2).
   Die Ausrichtung der Zeile kommt vom Template (NOVA links, AVIA mittig). Farbfelder 16 px, Ziele mindestens 24 px groß
   (WCAG 2.2, 2.5.8). */

/* Die Zeile steht direkt unter dem Bild, vor dem Titel (Vorlage productlist/item_box.tpl). Ohne weitere Farben gibt es keine
   Zeile, der Titel beginnt dann direkt unter dem Bild. */
.lcvs-weitere {
    margin-bottom: .5rem;
}

/* inline-flex statt der Lücken aus den Leerzeichen zwischen den Einträgen; die Zeile bleibt in der Ausrichtung des Templates */
.lcvs-weitere-liste {
    display: inline-flex;
    flex-wrap: wrap;
    vertical-align: top;
}

/* Farbfelder: die Ziele (24 px) liegen ohne Abstand nebeneinander, sichtbar bleiben 8 px zwischen den Feldern. So passen fünf
   Felder und „+N“ in eine Kachel am Handy (375 px breit) */
.lcvs-weitere--farbfelder .lcvs-weitere-eintrag:not(:last-child) {
    margin-right: 0;
}

.lcvs-weitere-link,
.lcvs-weitere-mehr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    text-decoration: none;
    border-radius: var(--lc-radius, 2px);
}

.lcvs-feld {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--lc-linie-stark, #cfcfcf);
    background: var(--lcvs-ton1, var(--lc-flaeche-hell, #f5f7fa));
    /* die Farbe ist hier Inhalt: im Kontrastdesign von Windows nicht ersetzen */
    forced-color-adjust: none;
}

/* zwei Farben: Feld diagonal geteilt, die erste oben links */
.lcvs-feld--zwei {
    background: linear-gradient(135deg, var(--lcvs-ton1) 50%, var(--lcvs-ton2) 50%);
}

.lcvs-feld--hell,
.lcvs-feld--leer {
    border-color: var(--lc-text-leise, #6e6e6e);
}

/* ohne Farbton: gestrichelt, damit es nicht wie Weiß aussieht */
.lcvs-feld--leer {
    border-style: dashed;
}

.lcvs-bild {
    display: block;
    width: 2rem;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: 1px solid var(--lc-linie-stark, #cfcfcf);
    border-radius: var(--lc-radius, 2px);
}

.lcvs-weitere-mehr {
    padding: 0 .25rem;
    font-size: .875rem;
    color: var(--lc-text-leise, #6e6e6e);
}

.lcvs-weitere-link:hover .lcvs-feld,
.lcvs-weitere-link:hover .lcvs-bild {
    border-color: var(--lc-akzent, #000);
}

.lcvs-weitere-link:focus-visible,
.lcvs-weitere-mehr:focus-visible {
    outline: 2px solid var(--lc-akzent, #000);
    outline-offset: 2px;
}