(account.html:5770),
deshalb über :has() — dasselbe Muster nutzt die Datei schon oben. */
html.vch-an #allListingsContent td:has(> div > [onclick]) > div,
html.vch-an #allListingsContent td:has(> [onclick]),
html.vch-an #allListingsContent .vcla-actions {
display: flex !important;
flex-wrap: wrap !important;
justify-content: stretch !important;
gap: .6rem !important;
margin-top: .6rem !important;
row-gap: .6rem !important;
}
/* Gesperrte Knöpfe (ohne Abo) bleiben sichtbar und lesbar — sie erklären
im Titel, warum sie gerade nicht gehen. */
html.vch-an #allListingsContent button[disabled] { opacity: 1 !important; }
.vch-lite-hinweis {
display: flex;
align-items: flex-start;
gap: .5rem;
margin: 0 0 .9rem;
padding: .7rem .85rem;
border-radius: 10px;
background: var(--vch-blau-weich);
color: var(--vch-mitte);
font-family: 'Manrope', system-ui, sans-serif;
font-size: .82rem;
line-height: 1.5;
}
.vch-lite-hinweis svg { flex: 0 0 auto; color: var(--vch-blau); margin-top: 1px; }
/* Breite Tabellen rollen in sich statt die Seite zu sprengen. */
html.vch-an .main table {
display: block;
width: 100% !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
html.vch-an .main .card,
html.vch-an .main .panel,
html.vch-an .main .box {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* ═══════════════════════════════════════════════════════════
18. AUSWAHLBLATT VON UNTEN (Lieferort)
═══════════════════════════════════════════════════════════ */
.vch-blatt {
position: fixed;
inset: 0;
z-index: 2147483200;
background: rgba(15, 23, 34, .45);
display: flex;
align-items: flex-end;
opacity: 0;
transition: opacity .2s ease;
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
.vch-blatt.auf { opacity: 1; }
.vch-blatt-karte {
width: 100%;
max-height: 84vh;
display: flex;
flex-direction: column;
background: var(--vch-flaeche);
border-radius: 18px 18px 0 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
transform: translateY(100%);
transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}
.vch-blatt.auf .vch-blatt-karte { transform: none; }
@media (prefers-reduced-motion: reduce) {
.vch-blatt, .vch-blatt-karte { transition: none; }
}
.vch-blatt-griff {
display: block;
width: 38px; height: 4px;
margin: .55rem auto .2rem;
border-radius: 999px;
background: var(--vch-rand);
}
.vch-blatt-kopf {
display: flex;
align-items: center;
gap: .5rem;
padding: .4rem 1rem .2rem;
}
.vch-blatt-kopf h3 {
flex: 1 1 auto;
margin: 0;
font-family: 'Satoshi', 'Manrope', system-ui, sans-serif;
font-weight: 800;
font-size: 1.06rem;
color: var(--vch-text);
}
.vch-blatt-zu {
flex: 0 0 auto;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
border: none; background: transparent;
color: var(--vch-text);
border-radius: 50%;
cursor: pointer; padding: 0;
}
.vch-blatt-inhalt {
flex: 1 1 auto;
overflow-y: auto;
padding: .3rem 1rem 1.2rem;
-webkit-overflow-scrolling: touch;
}
.vch-blatt-hinweis {
margin: .2rem 0 .8rem;
font-size: .86rem;
line-height: 1.5;
color: var(--vch-leise);
}
.vch-blatt-unter {
margin: 1.2rem 0 .5rem;
font-family: 'Satoshi', 'Manrope', system-ui, sans-serif;
font-weight: 800;
font-size: .9rem;
color: var(--vch-text);
}
.vch-blatt-link {
display: inline-block;
margin-top: 1rem;
font-size: .87rem;
font-weight: 700;
color: var(--vch-blau);
text-decoration: none;
}
.vch-adrliste { display: flex; flex-direction: column; gap: .5rem; }
.vch-adr {
display: flex;
align-items: center;
gap: .7rem;
width: 100%;
box-sizing: border-box;
padding: .8rem .9rem;
border: 1.5px solid var(--vch-rand);
border-radius: 12px;
background: transparent;
color: var(--vch-text);
font-family: inherit;
text-align: left;
cursor: pointer;
}
.vch-adr.gewaehlt { border-color: var(--vch-blau); background: var(--vch-blau-weich); }
.vch-adr-text { flex: 1 1 auto; min-width: 0; }
.vch-adr-text b {
display: block;
font-size: .92rem;
font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vch-adr-text span {
display: block;
font-size: .8rem;
color: var(--vch-leise);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vch-adr-haken { flex: 0 0 auto; color: var(--vch-blau); display: flex; }
/* — Konto-Blatt „Wer kauft ein?" — */
.vch-profilzeile {
display: flex;
align-items: center;
gap: .8rem;
padding: .85rem .9rem;
border-radius: 12px;
background: var(--vch-grund);
}
.vch-profiltext { flex: 1 1 auto; min-width: 0; }
.vch-profiltext b {
display: block;
font-size: .95rem;
font-weight: 700;
color: var(--vch-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vch-profiltext span { display: block; font-size: .8rem; color: var(--vch-leise); }
.vch-blatt-strich {
border: none;
border-top: 1px solid var(--vch-rand);
margin: 1.1rem 0 .8rem;
}
.vch-blatt-link-mitte {
display: block;
width: 100%;
margin-top: .9rem;
padding: .6rem 0;
border: none;
background: transparent;
font-family: inherit;
text-align: center;
cursor: pointer;
}
.vch-plzreihe { display: flex; gap: .5rem; }
.vch-plzfeld {
flex: 1 1 auto;
min-width: 0;
height: 44px;
padding: 0 .9rem;
border-radius: 999px;
border: 1.5px solid var(--vch-rand);
background: var(--vch-grund);
color: var(--vch-text);
font-family: inherit;
font-size: 16px;
outline: none;
-webkit-appearance: none;
}
.vch-plzreihe .vch-kbtn { flex: 0 0 auto; }
/* ═══════════════════════════════════════════════════════════
19. GERAETE-SPERRE fuer Admin/Editor
═══════════════════════════════════════════════════════════ */
#vcHandySperre {
position: fixed;
inset: 0;
z-index: 2147483640;
background: var(--vch-grund);
display: flex;
align-items: center;
justify-content: center;
padding: 1.6rem;
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
.vch-sperre-karte {
max-width: 22rem;
width: 100%;
background: var(--vch-flaeche);
border: 1px solid var(--vch-rand);
border-radius: 16px;
padding: 1.8rem 1.4rem;
text-align: center;
box-shadow: var(--vch-schatten);
}
.vch-sperre-karte svg {
width: 42px; height: 42px;
color: var(--vch-blau);
margin-bottom: .9rem;
}
.vch-sperre-karte h2 {
font-family: 'Satoshi', 'Manrope', system-ui, sans-serif;
font-weight: 800;
font-size: 1.12rem;
color: var(--vch-text);
margin: 0 0 .6rem;
}
.vch-sperre-karte p {
font-size: .89rem;
line-height: 1.6;
color: var(--vch-mitte);
margin: 0 0 1.2rem;
}
.vch-sperre-karte .vch-sperre-weg {
display: inline-flex;
align-items: center;
justify-content: center;
height: 42px;
padding: 0 1.3rem;
border-radius: 999px;
border: none;
background: var(--vch-blau);
color: #fff;
font-family: inherit;
font-size: .9rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
/* ═══════════════════════════════════════════════════════════
22. THEMEN-PILLEN, WARENKORB-EBENE (Betreiber 24.08.2026)
═══════════════════════════════════════════════════════════ */
/* Themen sitzen in DERSELBEN Chip-Zeile wie der Lieferort (Bild 5). */
.vch-chip-thema { font-weight: 600; }
/* — Aktions-Kacheln (Bild 1): grosse farbige Karten, waagrecht scrollend — */
.vch-aktionen {
display: flex;
gap: .6rem;
overflow-x: auto;
scrollbar-width: none;
padding: .2rem .9rem 1rem;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.vch-aktionen::-webkit-scrollbar { display: none; }
/* Amazon-Mass: rund 70 % der Schirmbreite, deutlich hoch, Ueberschrift
oben, darunter das Produktbild — nicht ein Rubriken-Symbol. */
.vch-aktion {
position: relative;
flex: 0 0 auto;
scroll-snap-align: start;
width: 72vw;
max-width: 290px;
height: 430px;
display: flex;
flex-direction: column;
gap: .15rem;
padding: 1.1rem 1.1rem 0;
border-radius: 14px;
overflow: hidden;
color: #fff;
text-decoration: none;
box-sizing: border-box;
}
.vch-aktion-titel {
font-family: 'Satoshi', 'Manrope', system-ui, sans-serif;
font-size: 1.72rem;
font-weight: 800;
line-height: 1.08;
letter-spacing: -.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vch-aktion-sub {
font-size: .95rem;
opacity: .92;
margin-bottom: .7rem;
}
/* Das Produktbild fuellt den Rest der Kachel. */
.vch-aktion-bild {
flex: 1 1 auto;
margin: 0 -1.1rem;
background: center/cover no-repeat;
}
/* — Warenkorb: oeffnet aus dem localStorage, ohne Seitenwechsel — */
.vch-korb-leer { padding: 2.2rem 1.1rem; text-align: center; }
.vch-korb-leer h3 {
margin: 0 0 .35rem;
font-family: 'Satoshi', 'Manrope', system-ui, sans-serif;
font-size: 1.02rem;
font-weight: 800;
}
.vch-korb-leer p { margin: 0 0 1.1rem; font-size: .88rem; color: var(--vch-leise); }
.vch-korb-zeile {
display: grid;
grid-template-columns: 76px 1fr auto;
gap: .7rem;
align-items: start;
padding: .8rem .9rem;
border-bottom: 1px solid var(--vch-rand);
}
.vch-korb-bild {
width: 76px; height: 76px;
border-radius: 10px;
overflow: hidden;
background: var(--vch-grund) center/cover no-repeat;
}
.vch-korb-mitte { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.vch-korb-titel {
font-size: .88rem; font-weight: 600; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vch-korb-var { font-size: .76rem; color: var(--vch-leise); }
.vch-korb-preis { font-size: .95rem; font-weight: 800; }
.vch-korb-menge { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.vch-korb-mbtn {
width: 32px; height: 32px;
border-radius: 999px;
border: 1px solid var(--vch-rand);
background: var(--vch-flaeche);
color: var(--vch-text);
font-size: 1.05rem; line-height: 1;
cursor: pointer;
}
.vch-korb-mzahl { min-width: 20px; text-align: center; font-size: .9rem; font-weight: 700; }
.vch-korb-weg {
border: none; background: none; padding: .1rem 0;
color: var(--vch-leise); font-family: inherit; font-size: .8rem; cursor: pointer;
}
.vch-korb-fuss { padding: 1rem .9rem 1.6rem; }
.vch-korb-summe {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: .8rem; font-size: .95rem;
}
.vch-korb-summe b { font-size: 1.2rem; font-weight: 800; }
/* ═══════════════════════════════════════════════════════════
21. KEINE KASTEN-HUELLEN (Betreiber 24.08.2026)
„Die etwas hellere schwarze Box, die die Kaertchen in sich haelt,
soll nirgendwo sein — auch nicht in den Einstellungen."
Die Huelle kostet auf 390 px doppelte Polsterung plus Rand und
bringt keine Information. Der Inhalt bleibt, nur die Schale faellt.
═══════════════════════════════════════════════════════════ */
html.vch-an #vcRecoRow .vcreco-sec,
html.vch-an .vcreco-sec,
html.vch-an .vcrg-huelle,
html.vch-an .main > .section > .card,
html.vch-an .main .card,
html.vch-an #vcHandyEinst .vch-kliste,
html.vch-an .vch-kliste {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Der Kartenkoerper selbst behaelt seine Flaeche — nur die Huelle faellt. */
html.vch-an .vch-kkarte-klein,
html.vch-an .vch-kkarte,
html.vch-an [class*="-card"] .vch-kbild { background: var(--vch-flaeche) !important; }
html.vch-an .vch-kkarte-klein { border: 1px solid var(--vch-rand) !important; }
/* In der Detailansicht blieben zuletzt noch zwei Kaesten stehen: der
Q&A-Aufklapper und die fuenf Produktbild-Rahmen. Beide flach auf den
Grund, wie der Betreiber es verlangt hat. */
html.vch-an #listingDetailModal .vcdu-card,
html.vch-an #listingDetailModal .ldm-sec,
html.vch-an #listingDetailModal .ldm-prodfig,
html.vch-an #listingDetailModal .ldm-dcard {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Die Kaufkarte behaelt ihre Flaeche — sie ist die Handlung, nicht Inhalt. */
html.vch-an #listingDetailModal .vcdu-ctcard {
background: var(--vch-flaeche) !important;
border: 1px solid var(--vch-rand) !important;
border-radius: 14px !important;
}
/* Die Bestell-/Buendelkarten in den Regalen behalten ihren Rahmen,
damit die Reihe nicht zu einer Bilderwand verschwimmt. */
html.vch-an #vcRecoRow .vcbndl {
background: var(--vch-flaeche) !important;
border: 1px solid var(--vch-rand) !important;
border-radius: 14px !important;
}
/* ═══════════════════════════════════════════════════════════
20. DASHBOARD — kompakt statt hoch
═══════════════════════════════════════════════════════════ */
/* — „Konto vervollstaendigen" war 231 px hoch, fast ein Drittel
des Schirms. Kopf + Balken + eine Zeile reichen. — */
html.vch-an #vcOnboardKarte { margin-bottom: .8rem; }
html.vch-an #vcOnboardKarte .vcob-kopf { padding: .6rem .85rem; gap: .5rem; }
html.vch-an #vcOnboardKarte .vcob-titel { font-size: .88rem; }
html.vch-an #vcOnboardKarte .vcob-balken { height: 5px; margin-top: .38rem; }
/* 🚨 Acht Schritte à 74 px = 592 px auf einem 375-px-Schirm. Die Leiste
lief aus dem Bild und schnitt die Woerter ab („Nachw…"). Der Balken
darueber sagt dasselbe auf einer Zeile — am Rechner bleibt sie. */
html.vch-an #vcOnboardKarte .vcob-leiste { display: none !important; }
html.vch-an #vcOnboardKarte .vcob-jetztzeile {
padding: 0 .85rem .7rem;
gap: .55rem;
flex-wrap: nowrap;
}
html.vch-an #vcOnboardKarte .vcob-jetzttext { font-size: .78rem; line-height: 1.35; }
html.vch-an #vcOnboardKarte .vcob-weiter {
padding: .5rem .85rem;
font-size: .78rem;
white-space: nowrap;
}
/* — Profil-Banner: `clamp(220px,24vw,300px)` steht als Inline-Stil an
#profileBannerPreview. 24vw sind am Telefon 90 px, also greift der
Boden 220 px — auf 293 px Breite ein fast quadratischer Klotz.
Ein Seitenverhaeltnis waechst stattdessen mit der Breite mit. — */
html.vch-an #profileBannerPreview {
height: auto !important;
min-height: 0 !important;
aspect-ratio: 2.8 / 1 !important;
}
/* Im schmalen Band sass das 76-px-Bild mitten auf „Banner hochladen". */
html.vch-an #profileBannerPreview > div:not(#bannerHint) {
left: .6rem !important;
bottom: .6rem !important;
}
html.vch-an #profilePicPreview {
width: 58px !important;
height: 58px !important;
border-width: 2px !important;
}
html.vch-an #profilePicInitial { font-size: 1.25rem !important; }
html.vch-an #bannerHint { padding-left: 66px !important; }
/* — Kein Haarlinien-Raster in den Konto-Angaben — */
html.vch-an .main .info-row.info-row {
border-bottom: none !important;
padding: .42rem 0 !important;
}
/* Kopfzeile der Karten: „2 Aktive Inserate" lief rechts aus dem Bild. */
html.vch-an .main .card-header {
flex-wrap: wrap !important;
gap: .3rem .6rem !important;
}
/* ═══════════════════════════════════════════════════════════
28. DETAILANSICHT NACH DER VORLAGE (Betreiber 25.08.2026)
═══════════════════════════════════════════════════════════
Drei Bildschirmfotos als Vorgabe, „1 zu 1", ausdruecklich auch
„gleiche Farbe, Schrift, mal blau manche, dick manche duenne".
Gelesen wurde aus den Bildern:
· Blau markiert IMMER etwas Anklickbares (Shop, Verkaeufer,
Rueckgabe, Melden) — nie blosse Auszeichnung.
· Die Ueberschrift ist GROSS aber NICHT fett; darunter steht
eine graue, duennere Beschreibungszeile.
· Genau eine Zahl ist fett und gross: der Preis.
· Zwei Kaufknoepfe, gelb und orange, mit schwarzer Schrift.
· Die Eckdaten stehen als ruhige Tabelle, Beschriftung grau
links, Wert rechts — ohne Kasten, ohne Linien.
🚨 Diese Regeln haengen alle an `html.vch-an` und stehen im
760px-Block. Ab 761px gilt davon NICHTS ([[handy-ansicht-eigene-ebene]]).
═══════════════════════════════════════════════════════════ */
:root {
/* Betreiber 25.08.2026: „statt gelb Knoepfe blau machen und dieses
dunkle Gelb dunkles Blau." Haupthandlung = Vermittco-Blau. */
--vch-az-gelb: #1B56CC;
--vch-az-orange: #0E3487;
--vch-az-rot: #CC0C39;
--vch-az-gruen: #067D62;
--vch-az-grau: #565959;
--vch-az-pille: #F0F2F2;
}
html[data-theme="dark"] {
--vch-az-rot: #FF6B81;
--vch-az-gruen: #4BC46B;
--vch-az-grau: #A0AABA;
--vch-az-pille: rgba(255, 255, 255, .10);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--vch-az-rot: #FF6B81;
--vch-az-gruen: #4BC46B;
--vch-az-grau: #A0AABA;
--vch-az-pille: rgba(255, 255, 255, .10);
}
}
/* — 1. Anzeige ganz oben: gerahmter Kasten, kleines Bild links — */
html.vch-an #vchAzAnzeige:empty { display: none !important; }
html.vch-an #vchAzAnzeige {
margin: .55rem .9rem .75rem !important;
border: 1px solid var(--vch-rand) !important;
border-radius: 10px !important;
overflow: hidden !important;
background: var(--vch-flaeche) !important;
}
html.vch-an .vch-aza-karte {
display: flex !important;
align-items: center !important;
gap: .7rem !important;
padding: .6rem .7rem !important;
cursor: pointer !important;
}
html.vch-an .vch-aza-bild {
flex: 0 0 54px !important;
width: 54px !important; height: 54px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
html.vch-an .vch-aza-text { min-width: 0 !important; flex: 1 1 auto !important; }
html.vch-an .vch-aza-titel {
font-size: .93rem !important;
line-height: 1.3 !important;
font-weight: 600 !important;
color: var(--vch-text) !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
html.vch-an .vch-aza-fuss {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: .3rem !important;
}
html.vch-an .vch-aza-marke {
background: var(--vch-az-rot) !important;
color: #fff !important;
font-size: .7rem !important;
font-weight: 800 !important;
padding: 2px 7px !important;
border-radius: 4px !important;
letter-spacing: .02em !important;
}
html.vch-an .vch-aza-spo {
font-size: .78rem !important;
color: var(--vch-az-grau) !important;
font-weight: 400 !important;
}
/* — 2. Shopzeile: blauer Shop-Link links, Sterne rechts — */
html.vch-an #vchAzShop {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: .6rem !important;
padding: 0 .9rem !important;
margin: .2rem 0 .35rem !important;
}
html.vch-an .vch-azs-link {
font-size: .97rem !important;
font-weight: 400 !important;
color: var(--vch-blau) !important;
text-decoration: none !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Ohne Ziel kein blauer Link — Blau heisst hier „anklickbar". */
html.vch-an .vch-azs-tot { color: var(--vch-az-grau) !important; }
html.vch-an .vch-azs-sterne {
flex: 0 0 auto !important;
font-size: .93rem !important;
white-space: nowrap !important;
}
html.vch-an .vch-azs-sterne .n { color: var(--vch-blau) !important; }
/* — 3. Ueberschrift: gross, aber NICHT fett (so steht es im Bild) — */
html.vch-an #listingDetailModal .ldm-title,
html.vch-an #listingDetailModal #ldmTitle,
html.vch-an .dm-page .dp-title,
html.vch-an .dm-page .vcdp-title {
font-size: 1.42rem !important;
line-height: 1.28 !important;
font-weight: 500 !important;
letter-spacing: -.01em !important;
color: var(--vch-text) !important;
padding: 0 .9rem !important;
margin: .1rem 0 .3rem !important;
}
/* — 4. Graue, duennere Beschreibungszeile darunter — */
html.vch-an #vchAzSub {
font-size: 1.06rem !important;
line-height: 1.34 !important;
font-weight: 300 !important;
color: var(--vch-az-grau) !important;
padding: 0 .9rem !important;
margin: 0 0 .55rem !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* — 5. Auszeichnungen: erste dunkle Plakette, Rest ruhig — */
html.vch-an #listingDetailModal #ldmBadges,
html.vch-an #listingDetailModal .ldm-badges {
display: flex !important;
flex-wrap: wrap !important;
gap: .38rem !important;
padding: 0 .9rem !important;
margin: 0 0 .6rem !important;
}
/* 🚨 GEMESSEN: hier stand `rgba(15,23,34,.06)` — auf dunklem Grund ist
das unsichtbar, „Computer & Tablets" und „Neu" standen als nackter
Text mit Aufzaehlungspunkt da. Die Fuellung kommt jetzt aus einer
Variablen, die in beiden Themen traegt. */
/* 🚨 Betreiber 25.08.2026: „die Woerter oben in Farbe machen, die Schrift
nicht in eine Box, und Verfuegbar gruene Schrift." Also KEINE Pille mehr:
nur Schrift, durch einen Mittelpunkt getrennt. Die Seiten setzen Fuellung
und Farbe teils INLINE (fahrzeuge.html: `background:rgba(229,50,12,.12)`)
— dagegen kommt nur `!important` an. */
html.vch-an #listingDetailModal #ldmBadges > *,
html.vch-an #listingDetailModal .ldm-badges > *,
html.vch-an #listingDetailModal .dp-badges > *,
html.vch-an #listingDetailModal .vcdp-badges > * {
display: inline-flex !important;
align-items: center !important;
gap: .3rem !important;
font-size: .93rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
background-color: transparent !important;
color: var(--vch-mitte) !important;
border: none !important;
}
/* Mittelpunkt als Trenner statt Kasten. */
html.vch-an #listingDetailModal #ldmBadges > * + *::before,
html.vch-an #listingDetailModal .ldm-badges > * + *::before,
html.vch-an #listingDetailModal .dp-badges > * + *::before,
html.vch-an #listingDetailModal .vcdp-badges > * + *::before {
content: "·" !important;
margin-right: .45rem !important;
color: var(--vch-leise) !important;
}
/* „Verfuegbar" und Verwandte in Gruen — gesetzt von azPlakettenFaerben().
🚨 GEMESSEN: als `.vch-plak-gruen` allein verlor diese Regel gegen die
Grundregel darueber — die traegt ZWEI IDs, diese nur eine. Gruen kam
nicht durch. Darum hier dieselben zwei IDs. */
html.vch-an #listingDetailModal #ldmBadges > .vch-plak-gruen,
html.vch-an #listingDetailModal .ldm-badges > .vch-plak-gruen,
html.vch-an #listingDetailModal .dp-badges > .vch-plak-gruen,
html.vch-an #listingDetailModal .vcdp-badges > .vch-plak-gruen {
color: var(--vch-az-gruen) !important;
font-weight: 700 !important;
}
/* Der Aufzaehlungspunkt zwischen den Plaketten gehoert nicht in die
Vorlage — dort stehen reine Pillen nebeneinander. */
html.vch-an #listingDetailModal #ldmBadges > *::before,
html.vch-an #listingDetailModal #ldmBadges > *::after,
html.vch-an #listingDetailModal .ldm-badges > *::before,
html.vch-an #listingDetailModal .ldm-badges > *::after {
content: none !important;
}
/* (Die dunkle Plakette von gestern ist raus — der Betreiber will Schrift
in Farbe, keine Flaeche.) */
/* — 6. Grossbild: eine Buehne, randlos, quadratisch wie im Bild — */
html.vch-an #listingDetailModal .ldm-stage {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 0 !important;
background: var(--vch-flaeche) !important;
border-radius: 0 !important;
}
html.vch-an #listingDetailModal .ldm-main-img {
width: 100% !important;
height: 100% !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* Zaehler und Pfeile gehoeren nicht ins Bild — die Punkte zeigen es. */
html.vch-an #listingDetailModal #ldmCounter,
html.vch-an #listingDetailModal .ldm-nav,
html.vch-an #listingDetailModal #ldmThumbs { display: none !important; }
/* — 7. Leiste unter dem Bild: Punkte mittig, Herz und Teilen rechts — */
/* 🚨 GEMESSEN: als Raster mit `grid-column:3` landeten Herz UND Teilen
in derselben Spalte und stapelten sich uebereinander — die Leiste war
128px hoch statt 60. Punkte gehoeren mittig, die zwei Knoepfe daneben
nach rechts: also eine Zeile, die Punkte schwebend zentriert. */
html.vch-an #vchAzGal {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: .35rem !important;
min-height: 44px !important;
padding: .35rem .9rem .8rem !important;
margin: 0 !important;
}
html.vch-an #vchAzGal .vch-punkte {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -60%) !important;
margin: 0 !important;
}
html.vch-an #vchAzGal .vch-azg-knopf,
html.vch-an #vchAzGal .vcdu-heart {
position: static !important;
flex: 0 0 auto !important;
width: 42px !important; height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
color: var(--vch-text) !important;
padding: 0 !important;
margin: 0 !important;
}
/* Herz links vom Teilen — im Bild steht es in dieser Reihenfolge. */
html.vch-an #vchAzGal .vcdu-heart { order: 1 !important; }
html.vch-an #vchAzGal .vch-azg-teilen { order: 2 !important; }
/* — 8. Farbe und Ausfuehrung: Beschriftung duenn, Wert fett — */
html.vch-an #listingDetailModal .vcdu-varsplit,
html.vch-an #listingDetailModal #ldmEgOptions,
html.vch-an #listingDetailModal .vcvar-wrap { padding: 0 .9rem !important; }
html.vch-an #listingDetailModal .vcvar-label,
html.vch-an #listingDetailModal .vcdu-varlabel {
font-size: .97rem !important;
font-weight: 400 !important;
color: var(--vch-text) !important;
margin-bottom: .4rem !important;
}
html.vch-an #listingDetailModal .vcvar-label b,
html.vch-an #listingDetailModal .vcvar-label strong { font-weight: 700 !important; }
/* — 9. Preis: die einzige grosse fette Zahl — */
html.vch-an #listingDetailModal .ldm-price,
html.vch-an #listingDetailModal #ldmPrice,
html.vch-an .dm-page .dp-price,
html.vch-an .dm-page .vcdp-price {
font-size: 1.85rem !important;
font-weight: 700 !important;
letter-spacing: -.02em !important;
line-height: 1.12 !important;
color: var(--vch-text) !important;
padding: 0 .9rem !important;
margin: .25rem 0 .1rem !important;
}
/* Streichpreis und USt-Hinweis: klein, grau, duenn. */
html.vch-an #listingDetailModal .vcdu-oldprice,
html.vch-an #listingDetailModal .ldm-oldprice,
html.vch-an #listingDetailModal .vcdp-mwst,
html.vch-an #listingDetailModal .ldm-mwst {
font-size: .84rem !important;
font-weight: 300 !important;
color: var(--vch-az-grau) !important;
padding: 0 .9rem !important;
}
html.vch-an #listingDetailModal #vcpbDetail { padding: 0 .9rem !important; }
/* — 10. Versandzeile: Datum fett, Rest duenn (wie im Bild) — */
html.vch-an #listingDetailModal #vcduShipRow,
html.vch-an #listingDetailModal .vcdu-shiprow {
font-size: .93rem !important;
font-weight: 400 !important;
color: var(--vch-text) !important;
padding: 0 .9rem !important;
margin: .3rem 0 .5rem !important;
}
html.vch-an #listingDetailModal .vcdu-shiprow b,
html.vch-an #listingDetailModal .vcdu-shiprow strong { font-weight: 700 !important; }
/* — 11. Kaufteil: Kasten weg, zwei farbige Pillen wie in der Vorlage — */
html.vch-an #listingDetailModal .vcdu-ctcard {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 .9rem !important;
margin: .2rem 0 1rem !important;
gap: .6rem !important;
}
html.vch-an #listingDetailModal .vcdu-ctcard .vcdu-ct-h {
font-size: 1.02rem !important;
font-weight: 700 !important;
color: var(--vch-az-gruen) !important;
margin: 0 0 .1rem !important;
padding: 0 !important;
}
/* Haupthandlung = gelb, schwarze Schrift. Zweite = orange. So im Bild. */
html.vch-an #listingDetailModal .vcdu-ctcard > .vcdu-primar,
html.vch-an #listingDetailModal .vcdu-ctcard > .ldm-cta-btn:first-of-type,
html.vch-an #listingDetailModal .vch-kaufzeile > :first-child {
min-height: 50px !important;
border-radius: 999px !important;
background: var(--vch-az-gelb) !important;
color: #ffffff !important;
border: none !important;
box-shadow: none !important;
font-size: 1rem !important;
font-weight: 600 !important;
}
html.vch-an #listingDetailModal .vcdu-ctcard > #vcMsgAskBtn,
html.vch-an #listingDetailModal .vcdu-ctcard > .vcdu-zweit,
html.vch-an #listingDetailModal .vch-kaufzeile > .vch-korbknopf {
min-height: 50px !important;
border-radius: 999px !important;
background: var(--vch-az-orange) !important;
color: #ffffff !important;
border: none !important;
box-shadow: none !important;
font-size: 1rem !important;
font-weight: 600 !important;
}
/* — 12. „Weitere Moeglichkeiten" bleibt die ruhige Zeile von vorher — */
html.vch-an .vch-mehrakt {
background: transparent !important;
border: none !important;
color: var(--vch-blau) !important;
font-weight: 400 !important;
}
/* — 13. Eckdaten: Beschriftung grau links, Wert rechts, keine Linien — */
html.vch-an #vchAzInfo {
padding: 0 .9rem !important;
margin: .2rem 0 1rem !important;
}
html.vch-an .vch-azi-zeile {
display: grid !important;
grid-template-columns: 8.6rem 1fr !important;
gap: .2rem .7rem !important;
align-items: start !important;
padding: .22rem 0 !important;
}
html.vch-an .vch-azi-k {
font-size: .9rem !important;
font-weight: 300 !important;
color: var(--vch-az-grau) !important;
}
html.vch-an .vch-azi-w {
font-size: .9rem !important;
font-weight: 500 !important;
color: var(--vch-text) !important;
text-align: left !important;
background: none !important;
border: none !important;
padding: 0 !important;
line-height: 1.4 !important;
}
html.vch-an .vch-azi-blau { color: var(--vch-blau) !important; font-weight: 400 !important; }
html.vch-an .vch-azi-recht {
font-size: .88rem !important;
font-weight: 300 !important;
line-height: 1.5 !important;
color: var(--vch-text) !important;
margin: .8rem 0 0 !important;
}
/* — 14. Merken: Ueberschrift fett, Knopf als heller Umriss — */
html.vch-an #vchAzMerken { padding: 0 .9rem !important; margin: 0 0 1rem !important; }
html.vch-an .vch-azm-h {
font-size: 1.02rem !important;
font-weight: 700 !important;
color: var(--vch-text) !important;
margin: 0 0 .5rem !important;
}
html.vch-an .vch-azm-knopf {
width: 100% !important;
min-height: 46px !important;
border-radius: 999px !important;
border: 1px solid var(--vch-rand) !important;
background: transparent !important;
color: var(--vch-text) !important;
font-size: .95rem !important;
font-weight: 400 !important;
box-shadow: none !important;
}
/* — 15. Melden: blaue Zeile mit Fahne, kein Knopf-Aussehen — */
html.vch-an #vchAzMelden { padding: 0 .9rem !important; margin: 0 0 1.2rem !important; }
html.vch-an .vch-azmd-knopf {
display: inline-flex !important;
align-items: center !important;
gap: .5rem !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: .3rem 0 !important;
color: var(--vch-blau) !important;
font-size: .95rem !important;
font-weight: 400 !important;
}
html.vch-an .vch-azmd-f { display: inline-flex !important; color: var(--vch-az-grau) !important; }
/* — 16. Empfehlungsregal: Ueberschrift wie im Bild, „Gesponsert" grau — */
html.vch-an #listingDetailModal #vcRecoRow > :first-child {
font-size: 1.08rem !important;
font-weight: 700 !important;
padding: 0 .9rem !important;
}
/* — 17. Standortzeile wie „Deliver to …" im Bild: Nadel + blaue Schrift — */
html.vch-an #listingDetailModal #ldmLoc,
html.vch-an #listingDetailModal .ldm-loc {
display: flex !important;
align-items: center !important;
gap: .4rem !important;
padding: 0 .9rem !important;
margin: .1rem 0 .7rem !important;
font-size: .92rem !important;
font-weight: 400 !important;
color: var(--vch-blau) !important;
background: none !important;
border: none !important;
}
html.vch-an #listingDetailModal #ldmLoc svg,
html.vch-an #listingDetailModal .ldm-loc svg {
flex: 0 0 auto !important;
width: 15px !important; height: 15px !important;
color: var(--vch-az-grau) !important;
}
/* — 18. Nachmessungen am lebenden Fenster (25.08.2026) — */
/* Leere Sternereihe: die Vorlage zeigt bei 0 Bewertungen NICHTS.
Fuenf graue Umriss-Sterne neben dem Preis sahen aus wie ein Fehler. */
html.vch-an #listingDetailModal .vcpb-empty { display: none !important; }
/* Standortzeile: die Schrift steckt in Kind-Elementen mit eigener Farbe —
das Blau musste deshalb bis zu den Kindern durchgereicht werden. */
html.vch-an #listingDetailModal #ldmLoc span,
html.vch-an #listingDetailModal .ldm-loc span,
html.vch-an #listingDetailModal #ldmLocText,
html.vch-an #listingDetailModal #ldmLocText2 {
color: var(--vch-blau) !important;
font-weight: 400 !important;
}
/* Verfuegbarkeit ueber dem Kaufteil steht in der Vorlage gruen. */
html.vch-an #listingDetailModal .vcdu-ctcard .vcdu-ct-h {
color: var(--vch-az-gruen) !important;
}
/* — 19. Nachbesserungen aus der Betreiber-Rueckmeldung 25.08.2026 — */
/* „mach die schatten der knöpfe weg" — gilt fuer die Detailansicht UND
fuer das Blatt. vc-knopfdesign.js setzt den Schatten zusaetzlich
INLINE; dagegen arbeitet `azKaufknoepfe()` und
`knoepfeSchwebenLassen()` in vc-handy.js. */
html.vch-an #listingDetailModal button,
html.vch-an #listingDetailModal a,
html.vch-an #listingDetailModal .vcdu-card,
html.vch-an .vch-blatt-karte,
html.vch-an .vch-aktinhalt button,
html.vch-an .vch-aktinhalt a {
box-shadow: none !important;
text-shadow: none !important;
}
/* Steht oben eine bezahlte Anzeige, weicht die Shopzeile. */
html.vch-an #vchAzShop.vch-az-weicht { display: none !important; }
/* Die Sponsorenkarte sitzt jetzt ganz oben — sie bringt ihre eigene
Gestaltung mit, braucht hier also nur Platz und Abstand. */
html.vch-an #vchAzAnzeige > .vch-az-sponsorkarte {
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
html.vch-an #vchAzAnzeige:has(> .vch-az-sponsorkarte) {
border: none !important;
margin: .3rem .9rem .8rem !important;
background: transparent !important;
}
/* Aufklapper stehen jetzt direkt unter der Beschreibung und bilden dort
EINEN ruhigen Stapel: Haarlinie nur zwischen ihnen, kein Kasten. */
html.vch-an #listingDetailModal .vcdu-accsec,
html.vch-an #listingDetailModal .ldm-bottom,
html.vch-an #listingDetailModal .ldm-sec.vcdu-card {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 🚨 GEMESSEN (Betreiber-Bild 25.08.2026: drei Pillen ohne Schrift):
Die Dreier-Gruppe „Teilen · Preisalarm · Parken" kommt aus der
Kartenleiste. Stehen die drei Knoepfe NEBENEINANDER, blendet sie ihre
Beschriftungen aus und zeigt nur die Zeichen — sonst passten sie nicht
in die Zeile. Im Blatt stehen sie aber UNTEREINANDER ueber die volle
Breite: dort ist das Ausblenden sinnlos und macht aus dem Knopf ein
Raetsel. Hier bekommen Zeichen UND Beschriftung ihren Platz zurueck.
Belegt: erzwungenes `display` liess „Teilen" mit 42px Breite erscheinen. */
html.vch-an .vch-aktinhalt button > span,
html.vch-an .vch-aktinhalt a > span {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
overflow: visible !important;
}
html.vch-an .vch-aktinhalt .vckl-k-ic { flex: 0 0 auto !important; }
/* Die Knoepfe tragen INLINE `flex:1 1 0` und `overflow:hidden` aus der
Kartenleiste — im Blatt darf beides nicht mehr abschneiden. */
html.vch-an .vch-aktinhalt button,
html.vch-an .vch-aktinhalt a {
overflow: visible !important;
white-space: normal !important;
padding-left: .9rem !important;
padding-right: .9rem !important;
}
/* Gemessen: das Blatt haelt 8.8px Abstand, die Dreier-Gruppe nur 1.6px —
die letzten drei Pillen klebten dadurch sichtbar enger zusammen als die
oberen. Gleicher Abstand fuer alle. */
html.vch-an .vch-aktinhalt .vcdu-trio,
html.vch-an .vch-aktinhalt .vcdu-actrow {
display: flex !important;
flex-direction: column !important;
gap: .55rem !important;
width: 100% !important;
}
/* Modellzeile unter der Ueberschrift — gleicher Rand wie alles andere;
ohne diese Regel klebte „Camaro VI" am linken Bildrand. */
html.vch-an #listingDetailModal #ldmSubtitle,
html.vch-an #listingDetailModal .ldm-subtitle,
html.vch-an #listingDetailModal .dp-subtitle,
html.vch-an #listingDetailModal .vcdp-subtitle,
html.vch-an #listingDetailModal .vcdp-sub,
html.vch-an #listingDetailModal .ldm-sub,
html.vch-an #listingDetailModal .dp-sub {
padding: 0 .9rem !important;
margin: 0 0 .25rem !important;
font-size: .95rem !important;
font-weight: 400 !important;
color: var(--vch-az-grau) !important;
}
/* Finanzierungszeile im Geldblock — gleicher Rand, ruhige Schrift. */
html.vch-an #listingDetailModal #ldmFinLine,
html.vch-an #listingDetailModal #dmFinLine,
html.vch-an #listingDetailModal .ldm-finline,
html.vch-an #listingDetailModal .dp-finline {
padding: 0 .9rem !important;
margin: .15rem 0 .5rem !important;
font-size: .9rem !important;
font-weight: 400 !important;
}
/* Anbieterzeile und Preis-Beschriftung: gleicher Rand, ruhige Schrift. */
html.vch-an #listingDetailModal .vcdp-company,
html.vch-an #listingDetailModal .ldm-company,
html.vch-an #listingDetailModal .dp-company,
html.vch-an #listingDetailModal .vcdp-pricelbl,
html.vch-an #listingDetailModal .dp-price-label {
padding: 0 .9rem !important;
margin: 0 0 .35rem !important;
font-size: .9rem !important;
font-weight: 400 !important;
color: var(--vch-az-grau) !important;
}
/* Vertrauens-Zeile unter dem Kaufteil — gleicher Rand, ruhige Schrift. */
html.vch-an #listingDetailModal .vcdp-trust,
html.vch-an #listingDetailModal .ldm-trust,
html.vch-an #listingDetailModal .dp-trust {
padding: 0 .9rem !important;
margin: 0 0 .9rem !important;
font-size: .86rem !important;
color: var(--vch-az-grau) !important;
}
/* Melde-Zeile: die vorhandene Huelle der Seite, als EINE ruhige blaue
Zeile gesetzt — Beschriftung und Knopf nebeneinander, kein Kasten. */
html.vch-an #vchAzMelden .vch-azmd-zeile {
display: flex !important;
align-items: center !important;
gap: .5rem !important;
flex-wrap: wrap !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font-size: .92rem !important;
color: var(--vch-az-grau) !important;
}
html.vch-an #vchAzMelden .vch-azmd-zeile button,
html.vch-an #vchAzMelden .vch-azmd-zeile a {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
min-height: 0 !important;
color: var(--vch-blau) !important;
font-size: .92rem !important;
font-weight: 400 !important;
text-decoration: none !important;
}
/* ═══════════════════════════════════════════════════════════
20. ECKDATEN OBEN, OHNE SYMBOLE (Betreiber 25.08.2026)
„die Symbole bei jeder Kategorie sollten nicht in der Detailansicht
sein, sondern einfach oben aufgelistet mit normaler Schrift."
Die Eckdaten stehen jetzt direkt unter den Plaketten; ihre Zeichen
werden ausgeblendet, Beschriftung und Wert bleiben als Schrift.
═══════════════════════════════════════════════════════════ */
html.vch-an #listingDetailModal #ldmSpecs,
html.vch-an #listingDetailModal .ldm-specs-grid,
html.vch-an #listingDetailModal .vcdu-secgrid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .35rem .9rem !important;
padding: 0 .9rem !important;
margin: .1rem 0 .9rem !important;
background: none !important;
border: none !important;
}
html.vch-an #listingDetailModal #ldmSpecs > *,
html.vch-an #listingDetailModal .ldm-specs-grid > *,
html.vch-an #listingDetailModal .vcdu-secgrid > * {
display: block !important;
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
font-size: .9rem !important;
}
/* Die Zeichen raus — genau das war die Ansage. */
html.vch-an #listingDetailModal #ldmSpecs svg,
html.vch-an #listingDetailModal .ldm-specs-grid svg,
html.vch-an #listingDetailModal .vcdu-secgrid svg,
html.vch-an #listingDetailModal .ldm-spec svg,
html.vch-an #listingDetailModal .vcdu-faktico { display: none !important; }
/* Wert kraeftig, Beschriftung leise — normale Schrift, kein Kasten. */
html.vch-an #listingDetailModal .ldm-spec b,
html.vch-an #listingDetailModal .ldm-spec strong,
html.vch-an #listingDetailModal .ldm-spec-v { font-weight: 600 !important; color: var(--vch-text) !important; }
html.vch-an #listingDetailModal .ldm-spec small,
html.vch-an #listingDetailModal .ldm-spec-l { font-weight: 400 !important; color: var(--vch-az-grau) !important; }
/* Anzeige mitten in der Ansicht: etwas Luft davor und danach. */
html.vch-an #vchAzAnzeige { margin: 1rem .9rem 1.2rem !important; }
/* ═══════════════════════════════════════════════════════════
21. KEIN AUFBLITZEN DES ALTEN ZUSTANDS (Betreiber 25.08.2026)
„bei der Handyversion soll nicht erst die alte Farbe / das alte Design
kommen und dann das neue — es soll immer sofort das Neue sein."
Die Ansicht bleibt unsichtbar, bis die Handy-Ebene sie EINMAL geordnet
hat; dann setzt `detailFreigeben()` `data-vch-fertig`.
🚨 NOTBREMSE: Sollte das JavaScript gar nicht laufen (Fehler, Datei
blockiert), darf die Ansicht nicht dauerhaft leer bleiben. Die
Zeitspur deckt sie nach 600 ms von selbst auf. Ein unsichtbarer
Bruchteil einer Sekunde ist hinnehmbar — eine leere Seite nie.
═══════════════════════════════════════════════════════════ */
@keyframes vch-notbremse { to { opacity: 1; } }
html.vch-an #listingDetailModal .ldm-page,
html.vch-an #listingDetailModal .dm-page {
opacity: 0;
animation: vch-notbremse .01s linear .6s forwards;
}
html.vch-an #listingDetailModal .ldm-page[data-vch-fertig],
html.vch-an #listingDetailModal .dm-page[data-vch-fertig] {
opacity: 1 !important;
animation: none !important;
}
/* 🚨 KEINE Ausnahme fuer „Bewegung reduzieren": der Schleier ist keine
Bewegung, sondern ein Vorhang von einem Sekundenbruchteil. Haette ich
ihn dort abgeschaltet, waere genau fuer diese Nutzer das Aufblitzen
zurueckgekommen — also das Gegenteil von Ruhe. */
/* Sterne unter der Ueberschrift — eine ruhige Zeile, Zahl in Blau. */
html.vch-an #vchAzSterne {
padding: 0 .9rem !important;
margin: 0 0 .4rem !important;
font-size: .95rem !important;
line-height: 1.3 !important;
}
html.vch-an #vchAzSterne:empty { display: none !important; }
html.vch-an #vchAzSterne .n { color: var(--vch-blau) !important; }
/* ═══════════════════════════════════════════════════════════
22. FILTERLEISTE (Betreiber 25.08.2026: „Filter zeigt es nicht
gut und schoen an")
GEMESSEN: `.mobile-filterbar` war durchsichtig, die zwei Knoepfe
ebenfalls — keine Fuellung, kein Rand, keine Form. Auf dem grauen
Seitengrund sah das aus wie ausgegraut/abgeschaltet.
Jetzt: eigene Flaeche mit Haarlinie, Knoepfe als klare Umriss-Pillen,
die Trefferzahl als blaue Perle.
═══════════════════════════════════════════════════════════ */
html.vch-an .mobile-filterbar {
background: var(--vch-flaeche) !important;
border-bottom: 1px solid var(--vch-rand) !important;
gap: .55rem !important;
padding: .5rem .9rem !important;
min-height: 0 !important;
height: auto !important;
}
html.vch-an .mobile-filterbar .mfb-btn {
flex: 1 1 0 !important;
min-height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .4rem !important;
border: 1.5px solid var(--vch-rand) !important;
border-radius: 999px !important;
background: var(--vch-flaeche) !important;
color: var(--vch-text) !important;
font-size: .93rem !important;
font-weight: 600 !important;
box-shadow: none !important;
padding: 0 .9rem !important;
}
/* Aktive Filter: blauer Umriss statt blasser Schrift. */
html.vch-an .mobile-filterbar .mfb-btn[data-aktiv="1"],
html.vch-an .mobile-filterbar .mfb-btn.aktiv {
border-color: var(--vch-blau) !important;
color: var(--vch-blau) !important;
background: var(--vch-blau-weich) !important;
}
/* Die Zahl hinter „Filter" als Perle, damit sie nicht wie Text mitlaeuft. */
html.vch-an .mobile-filterbar .mfb-btn .mfb-zahl,
html.vch-an .mobile-filterbar .mfb-btn b,
html.vch-an .mobile-filterbar .mfb-btn .badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 20px !important;
height: 20px !important;
padding: 0 .3rem !important;
border-radius: 999px !important;
background: var(--vch-blau) !important;
color: #fff !important;
font-size: .74rem !important;
font-weight: 800 !important;
}
html.vch-an .mobile-filterbar .mfb-btn svg {
width: 17px !important; height: 17px !important;
opacity: .75 !important;
}
/* Zweites Netz zur Inline-Faerbung: greift, sobald vc-knopfdesign KEINEN
Inline-Stil (mehr) geschrieben hat. Zwei IDs, damit es dessen
Klassen-Regeln schlaegt. */
/* 🚨 GEMESSEN 25.08.2026: ein NACKTER Knopf mit `data-vch-kauf` wurde blau,
derselbe Knopf mit `class="ldm-cta-btn"` blieb weiss. Die Klassenregel der
Seite ist genauer als eine reine Attributregel. Deshalb steht das Attribut
hier ZUSAETZLICH neben `[class]` — das zaehlt wie eine weitere Klasse und
schlaegt damit jede Ein-Klassen-Regel der Seite, ohne dass ich jeden
einzelnen Klassennamen kennen muss (die heissen je Familie anders:
`ldm-cta-btn`, `dm-btn`, `vcdu-primar` …). */
html.vch-an #listingDetailModal [data-vch-kauf="1"],
html.vch-an #listingDetailModal [data-vch-kauf="1"][class],
html.vch-an #listingDetailModal .vcdu-ctcard [data-vch-kauf="1"][class],
html.vch-an #listingDetailModal .vcdu-buy [data-vch-kauf="1"][class] {
background: var(--vch-az-gelb) !important;
background-image: none !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
box-shadow: none !important;
}
html.vch-an #listingDetailModal [data-vch-kauf="2"],
html.vch-an #listingDetailModal [data-vch-kauf="2"][class],
html.vch-an #listingDetailModal .vcdu-ctcard [data-vch-kauf="2"][class],
html.vch-an #listingDetailModal .vcdu-buy [data-vch-kauf="2"][class] {
background: var(--vch-az-orange) !important;
background-image: none !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
box-shadow: none !important;
}
/* „Weitere Moeglichkeiten" bleibt eine Zeile — nie eine Pille. */
html.vch-an #listingDetailModal .vch-mehrakt,
html.vch-an #listingDetailModal .vch-mehrakt[class],
html.vch-an #listingDetailModal .vcdu-ctcard .vch-mehrakt[class],
html.vch-an #listingDetailModal .vcdu-buy .vch-mehrakt[class],
html.vch-an #dmBody .vch-mehrakt {
background: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Laufender Suchbegriff oben: kraeftige Schrift statt Platzhaltergrau,
daneben ein Kreuz zum Loeschen. */
html.vch-an #vcHandyKopf .vch-suchfeld.vch-suchfeld-aktiv span {
color: var(--vch-text) !important;
font-weight: 600 !important;
}
html.vch-an #vcHandyKopf .vch-such-weg {
flex: 0 0 auto !important;
width: 38px !important; height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
color: var(--vch-mitte) !important;
padding: 0 !important;
margin-left: -6px !important;
}
/* ═══════════════════════════════════════════════════════════
23. KEINE LEEREN BALKEN LINKS UND RECHTS (Betreiber 25.08.2026)
„das nervt bei der Handyansicht, dass links und rechts einfach leere
Balken sind — es soll alles mit Inhalt gefuellt werden."
GEMESSEN auf der Detailansicht bei 375px:
`.vcreco-sec` links 32 / rechts 32 → nur 311px nutzbar
`.vcreco-track` links 46 / rechts 46 → nur 282px
Karte 214px breit
Also 92px — ein VIERTEL des Bildschirms — leer, und man sah nur eine
Karte plus einen Streifen. Die Einrueckung stammt vom Rechner-Aufbau,
wo neben dem Regal noch eine Spalte steht; auf dem Telefon gibt es die
nicht.
Regel: Ueberschrift und Text behalten den Seitenrand (.9rem), die
SPUR laeuft randlos durch und traegt den Rand nur als Innenabstand —
so beginnt die erste Karte buendig mit dem Text und die letzte darf
bis an die Kante scrollen. Genau so machen es Amazon und Netflix.
═══════════════════════════════════════════════════════════ */
html.vch-an .vcreco-sec,
html.vch-an .vcrg-rail,
html.vch-an .vhr-sec,
html.vch-an #vcRecoRow > *,
html.vch-an .vcrec-sec {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Ueberschriftzeile der Regale: normaler Seitenrand. */
html.vch-an .vcreco-hrow,
html.vch-an .vcrg-tcrow,
html.vch-an .vhr-pnrow,
html.vch-an .vhr-dlrow {
padding-left: .9rem !important;
padding-right: .9rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Die Spur selbst: randlos, Rand nur als Innenabstand. */
html.vch-an .vcreco-track,
html.vch-an .vcrg-track,
html.vch-an .vhr-dltrack,
html.vch-an .vhr-offtrack,
html.vch-an .vcrec-track {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: .9rem !important;
padding-right: .9rem !important;
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
scroll-padding-left: .9rem !important;
}
/* Eckdaten-Tabelle: sass die Beschriftungsspalte zu breit, blieb rechts
Luft. Beschriftung nur so breit wie noetig. */
html.vch-an .vch-azi-zeile {
grid-template-columns: minmax(6.5rem, max-content) 1fr !important;
}
/* 🚨 GEMESSEN: die Seitenraender STAPELN sich.
`.ldm-page` 16px
`#vcRecoRow` +16px → 32
`.vcreco-sec` +14.4 → 46 fuer die Spur
Dazu kommt auf jedem Textblock nochmal mein eigener `.9rem`. Ergebnis
waren 30px Rand am Text und 46px am Regal — bei 375px Bildschirm ein
Viertel leerer Balken.
Ab hier gibt es GENAU EINE Quelle fuer den Seitenrand: die Bloecke
selbst (.9rem). Die Huelle traegt keinen mehr — dadurch koennen Bild,
Kartenband und die Regal-Spuren randlos durchlaufen. */
html.vch-an #listingDetailModal .ldm-page,
html.vch-an #listingDetailModal .dm-page,
html.vch-an #listingDetailModal #vcRecoRow {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Bloecke, die bisher vom Rand der Huelle gelebt haben, brauchen ihn
jetzt selbst — sonst klebten sie an der Kante. */
html.vch-an #listingDetailModal #ldmDealer,
html.vch-an #listingDetailModal #dmDealer,
html.vch-an #listingDetailModal .ldm-dealersec,
html.vch-an #listingDetailModal #ldmDealerSection,
html.vch-an #listingDetailModal .vcdu-qasec,
html.vch-an #listingDetailModal #ldmProductReviews,
html.vch-an #listingDetailModal #dmProductReviews,
html.vch-an #listingDetailModal .vcdu-accsec,
html.vch-an #listingDetailModal .ldm-bottom,
html.vch-an #listingDetailModal [data-vch-prodgal] {
padding-left: .9rem !important;
padding-right: .9rem !important;
box-sizing: border-box !important;
}
/* Bild, Kartenband und Regal-Spuren bleiben ausdruecklich randlos. */
html.vch-an #listingDetailModal .vcdu-gal,
html.vch-an #listingDetailModal .ldm-stage,
html.vch-an #listingDetailModal #vcduMapBand {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 🚨 GEMESSEN: die Aufklapp-Ueberschriften klebten nach dem Entfernen des
Huellen-Randes an der linken Kante. Grund: die aeltere Regel traf sie
ueber `.ldm-sec.vcdu-card` (DREI Klassen) und setzte `padding: 0` —
genauer als mein `.vcdu-accsec` mit zwei Klassen. Statt Selektoren
gegeneinander aufzuruesten bekommt hier die UEBERSCHRIFT selbst ihren
Rand; sie ist das, was man sehen kann. */
/* (Der Rand der Ueberschriften wird in vc-handy.js gesetzt — hier verlor
die Regel gegen eine aeltere mit drei Klassen. Nur der Fliesstext
bleibt hier.) */
html.vch-an #listingDetailModal .vcdu-accbody,
html.vch-an #listingDetailModal .ldm-sec > p,
html.vch-an #listingDetailModal .vcdp-sec > p {
padding-left: .9rem !important;
padding-right: .9rem !important;
box-sizing: border-box !important;
}
/* Der Aufklapper-Inhalt darf innen keinen zweiten Rand mehr aufschlagen. */
html.vch-an #listingDetailModal .vcdu-accbody > * {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Kaesten mit eigenem Innenrand: auf 375px zaehlt jeder Pixel.
GEMESSEN: Haendlerkarte 38px je Seite (24 eigene + 14 von aussen),
VIN-Werkzeug 21px. Der Rand von aussen reicht — innen genuegt wenig. */
html.vch-an #listingDetailModal .ldm-dcard,
html.vch-an #listingDetailModal .dm-dcard,
html.vch-an #listingDetailModal .vcvin-card,
html.vch-an #listingDetailModal #vcVinMount > * {
padding-left: .35rem !important;
padding-right: .35rem !important;
border-radius: 12px !important;
box-sizing: border-box !important;
}
/* Das Hero-Bild der Haendlerkarte darf randlos laufen. */
html.vch-an #listingDetailModal .ldm-dhero {
margin-left: -.35rem !important;
margin-right: -.35rem !important;
width: calc(100% + .7rem) !important;
}
/* ═══════════════════════════════════════════════════════════
24. KOPFZEILE DARF NICHTS VERDECKEN (Betreiber 25.08.2026)
„bei fahrzeuge verdeckt die suchleiste das erste inserat."
GEMESSEN: Kopfzeile fest, 95px hoch; `body` traegt zwar
`padding-top: 96px`, die erste Karte lag trotzdem bei top=0 und war
oben abgeschnitten. Statt der Huelle bekommt deshalb der Inhalt selbst
den Abstand — das wirkt unabhaengig davon, was mit dem Body-Rand
passiert. `scroll-margin-top` sorgt zusaetzlich dafuer, dass beim
Springen zu einem Inserat nichts unter der Leiste landet.
═══════════════════════════════════════════════════════════ */
/* 🚨 18.09.2026 auf 0 gesetzt — Betreiber: „es buggt alles in der
Handyansicht". GEMESSEN bei 390px: `body` traegt den Kopf-Abstand
inzwischen auf ALLEN Kategorieseiten wirksam (Huelle beginnt bei
top=96, Kopf endet bei 95). Dieser Zusatz legte darum 92px LEERE
Flaeche unter die Suchleiste — auf maschinen, verpackungen,
werkstoffe, software, kategorie (alle dynamischen), auf immobilien/
elektrogeraete zwischen Filterleiste und Treffern, und auf der
fahrzeuge-Trefferliste DOPPELT, weil dort `.browse-layout` in
`.browse-wrap.mde-results` steckt (Brotkrumen erst bei y=206).
Der Sog `margin-top:-56vh`, der damals die erste Karte unter den Kopf
zog, wird weiter unten eigens abgefangen. Gegenprobe nach der
Aenderung: erste Karte auf allen 8 Seiten unterhalb des Kopfes. */
html.vch-an .browse-wrap,
html.vch-an .browse-layout,
html.vch-an .mde-results {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 🚨 Hier stand eine Ausnahme „traegt schon die Filterleiste den Abstand".
GEMESSEN: auf fahrzeuge.html EXISTIERT `.mobile-filterbar`, ist dort
aber 0px hoch — die Ausnahme griff und setzte den Abstand wieder auf
null, die erste Karte blieb verdeckt. `:has()` kann keine Hoehe pruefen;
eine Ausnahme, die auf Vorhandensein statt auf Wirkung schaut, ist
darum wertlos. Doppelter Abstand ist harmloser als verdeckter Inhalt. */
html.vch-an [data-id],
html.vch-an .srpeg,
html.vch-an .fzcard {
scroll-margin-top: calc(var(--vch-kopf-h) + 10px) !important;
}
/* 🚨 GEMESSEN auf fahrzeuge.html: `#fzHomeSecs` begann bei top=-32px, die
erste Ueberschrift lag hinter der Kopfzeile. URSACHE steht in
fahrzeuge.html:481 — `.mde-wrap:has(.mde-filterbox){margin-top:-56vh}`.
Dieser Sog gehoert zur Rechner-Gestaltung, wo der Inhalt bewusst in den
Hero hineinragt. Auf dem Telefon blendet die Handy-Ebene den Hero aus
— der Sog blieb aber und zog alles unter die feste Leiste. */
html.vch-an .mde-wrap,
html.vch-an .mde-wrap:has(.mde-filterbox) {
margin-top: 0 !important;
}
/* 🚨 GEMESSEN: mit `margin-top: 0` steht der Behaelter schon korrekt bei
96px (der Body-Rand traegt). Mein zusaetzlicher Innenabstand von 102px
war doppelt gezaehlt — daraus wurde eine 250px hohe Leerflaeche, genau
das Gegenteil von „rutsche alles weiter hinauf". Der Sog war das
Problem, nicht der fehlende Abstand. */
html.vch-an #fzHomeSecs,
html.vch-an .mde-wrap:first-of-type {
padding-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════
25. ENGER UND KLEINER (Betreiber 25.08.2026)
„rutsche alles weiter hinauf und mach alles kleiner, Schrift usw."
„die Eckdaten alle 3 in einer Linie, um Platz zu sparen."
„die Beschreibung verkürze das etwas, dass früher das … kommt."
═══════════════════════════════════════════════════════════ */
/* Eckdaten: drei nebeneinander statt zwei — spart eine ganze Zeile. */
html.vch-an #listingDetailModal #ldmSpecs,
html.vch-an #listingDetailModal .ldm-specs-grid,
html.vch-an #listingDetailModal .vcdu-secgrid {
grid-template-columns: repeat(3, 1fr) !important;
gap: .3rem .6rem !important;
margin: .05rem 0 .6rem !important;
}
html.vch-an #listingDetailModal #ldmSpecs > *,
html.vch-an #listingDetailModal .ldm-specs-grid > *,
html.vch-an #listingDetailModal .vcdu-secgrid > * {
font-size: .82rem !important;
line-height: 1.25 !important;
}
html.vch-an #listingDetailModal .ldm-spec b,
html.vch-an #listingDetailModal .ldm-spec strong,
html.vch-an #listingDetailModal .ldm-spec-v { font-size: .84rem !important; }
html.vch-an #listingDetailModal .ldm-spec small,
html.vch-an #listingDetailModal .ldm-spec-l { font-size: .75rem !important; }
/* Alles eine Spur kleiner und enger — mehr Inhalt im ersten Blick. */
html.vch-an #listingDetailModal .ldm-title,
html.vch-an #listingDetailModal #ldmTitle,
html.vch-an .dm-page .dp-title,
html.vch-an .dm-page .vcdp-title {
font-size: 1.2rem !important;
line-height: 1.24 !important;
margin: .05rem 0 .2rem !important;
}
html.vch-an #vchAzSub {
font-size: .93rem !important;
line-height: 1.3 !important;
margin: 0 0 .35rem !important;
-webkit-line-clamp: 2 !important; /* frueher „…" — so die Ansage */
}
html.vch-an #vchAzShop { margin: .1rem 0 .2rem !important; font-size: .9rem !important; }
html.vch-an #vchAzShop .vch-azs-link { font-size: .9rem !important; }
html.vch-an #vchAzSterne { margin: 0 0 .25rem !important; font-size: .88rem !important; }
html.vch-an #listingDetailModal #ldmSubtitle,
html.vch-an #listingDetailModal .ldm-subtitle,
html.vch-an #listingDetailModal .vcdp-sub { font-size: .86rem !important; margin: 0 0 .15rem !important; }
html.vch-an #listingDetailModal #ldmBadges,
html.vch-an #listingDetailModal .ldm-badges { margin: 0 0 .35rem !important; }
html.vch-an #listingDetailModal #ldmBadges > *,
html.vch-an #listingDetailModal .ldm-badges > * { font-size: .84rem !important; }
html.vch-an #listingDetailModal .ldm-price,
html.vch-an #listingDetailModal #ldmPrice,
html.vch-an .dm-page .dp-price,
html.vch-an .dm-page .vcdp-price {
font-size: 1.6rem !important;
margin: .15rem 0 .05rem !important;
}
/* Weniger Luft zwischen den Abschnitten. */
html.vch-an #listingDetailModal .ldm-page > *,
html.vch-an .dm-page > * { margin-bottom: .7rem !important; }
html.vch-an #vchAzInfo { margin: .1rem 0 .7rem !important; }
html.vch-an .vch-azi-zeile { padding: .14rem 0 !important; }
html.vch-an .vch-azi-k, html.vch-an .vch-azi-w { font-size: .85rem !important; }
html.vch-an .vch-azi-recht { font-size: .82rem !important; margin: .5rem 0 0 !important; }
html.vch-an #vchAzMerken { margin: 0 0 .6rem !important; }
html.vch-an .vch-azm-knopf { min-height: 42px !important; font-size: .9rem !important; }
html.vch-an #vchAzMelden { margin: 0 0 .8rem !important; }
html.vch-an #listingDetailModal .vcdu-ctcard { margin: .1rem 0 .7rem !important; gap: .45rem !important; }
/* ═══════════════════════════════════════════════════════════
26. PERSONALISIERUNG OHNE KAESTEN (Betreiber 25.08.2026)
„mach bei der Personalisierung da im Hintergrund die Boxen weg."
Die Regale bringen fuer jedes Panel eine eigene Flaeche mit Rahmen
und Schatten mit. Untereinander gestapelt ergibt das auf dem Telefon
eine Treppe aus Kaesten. Passt zu [[personalisierung-optik-schlicht]]:
keine Umrandung, keine Flaeche — nur Inhalt.
═══════════════════════════════════════════════════════════ */
/* 🚨 GEMESSEN 25.08.2026: `transparent` war der falsche Wert. Der Body
traegt auf der Startseite bewusst #F3F5F9 ([[homepage-band-hero-bis-kategorien]]);
durchsichtige Abschnitte liessen genau diesen Grauton durchscheinen —
und was der Betreiber als „Box im Hintergrund" sah, war das Loch
zwischen zwei weissen Nachbarn. Die Abschnitte bekommen darum die
FLAECHE statt gar nichts: eine durchgehende Bahn ohne sichtbare Kanten. */
html.vch-an .vhr-pn,
html.vch-an .vhr-sec,
html.vch-an .vhr-bento,
html.vch-an .vhr-au,
html.vch-an .vhr-aubg,
html.vch-an .vcreco-sec,
html.vch-an .vcrg-rail,
html.vch-an .mde-sec,
html.vch-an .fz-sec,
html.vch-an #vcHomeRecoHint,
html.vch-an .vhr-hint,
html.vch-an #fzHomeSecs > * {
background: var(--vch-flaeche) !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding-top: .2rem !important;
padding-bottom: .2rem !important;
margin-top: .4rem !important;
margin-bottom: .4rem !important;
}
/* ═══════════════════════════════════════════════════════════
27. LEISTE WEG, ALLES HINAUF (Betreiber 25.08.2026)
„rutsch alle Symbole runter und mach die Leiste oben weg" +
„den Preis hinaufschieben, so dass der bei der Kante vom Bild ist —
wir müssen so viel Platz machen, dass alles auf den 1. Blick da ist."
GEMESSEN vorher (375×812): Kopfleiste 52px · Bild ab 241 · Bildleiste
619–679 · Preis erst bei 693 — weit unter dem Bildschirmrand.
Zwei Flaechen ohne Inhalt: die weisse Leiste oben (52px) und die
Bildleiste unter dem Bild (60px). Beide werden zu Auflagen:
· Die Kopfleiste schwebt jetzt UEBER dem Inhalt (kein Platzverbrauch).
· Die Punkt-/Herz-/Teilen-Leiste legt sich auf den unteren Bildrand.
Damit ruecken Preis und Kaufknoepfe um rund 112px nach oben.
🚨 Lesbarkeit: ueber einem hellen Foto waeren schwarze Zeichen weg.
Jedes Zeichen bekommt darum eine weiche runde Auflage. Sobald man
scrollt, setzt `vch-gescrollt` die Leiste wieder auf Flaeche — dann
steht sie ueber weissem Inhalt und braucht die Auflage nicht mehr.
═══════════════════════════════════════════════════════════ */
/* 🚨 Kein Platz mehr fuer eine LEISTE — aber die schwebenden Zeichen
duerfen den Titel nicht ueberdecken. Reserviert wird darum nur noch
die Hoehe der Zeichen, ohne Flaeche und ohne Trennlinie: die Leiste
ist weg, der Platzverbrauch von 52px auf 42px gesunken. */
html.vch-an #listingDetailModal.open { padding-top: 42px !important; }
html.vch-an #vcHandyDetailKopf {
height: 60px !important;
padding: 10px .6rem 0 !important; /* Zeichen etwas tiefer */
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
transition: background .18s ease, box-shadow .18s ease;
}
html.vch-an #vcHandyDetailKopf .vch-dk-knopf {
background: rgba(255, 255, 255, .82) !important;
box-shadow: 0 1px 4px rgba(15, 23, 34, .18) !important;
backdrop-filter: saturate(160%) blur(6px);
-webkit-backdrop-filter: saturate(160%) blur(6px);
color: #0F1722 !important;
}
/* Gescrollt: wieder eine echte Leiste, Auflagen weg. */
html.vch-an #vcHandyDetailKopf.vch-gescrollt {
background: var(--vch-flaeche) !important;
border-bottom: 1px solid var(--vch-rand) !important;
padding-top: 0 !important;
height: 52px !important;
}
html.vch-an #vcHandyDetailKopf.vch-gescrollt .vch-dk-knopf {
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
color: var(--vch-text) !important;
}
/* Bildleiste als Auflage auf den unteren Bildrand — spart 60px.
🚨 NICHT `position:absolute`: `#vchAzGal` ist ein Geschwister der
Galerie, kein Kind. Absolut gesetzt suchte es sich den naechsten
positionierten Vorfahren — die ganze Seite — und landete bei 5623px.
Ein negativer oberer Abstand legt es auf den Bildrand, ohne den
Bezugsrahmen zu verlassen. */
/* 🚨 Betreiber 25.08.2026: „mach das ins Bild hinein, rechts unten — man
soll es aber anklicken koennen, also ohne diese Quadrate rundherum."
Die Leiste liegt jetzt VOLLSTAENDIG im Bild und braucht keine eigene
Hoehe mehr: nochmal ~50px gespart. Ohne Flaechen hinter den Zeichen
waeren sie auf einem dunklen Foto unsichtbar — statt eines Kastens
bekommen sie darum einen weichen Schlagschatten. Das ist eine Kontur,
kein Rahmen. */
html.vch-an #vchAzGal {
position: relative !important;
z-index: 3 !important;
min-height: 0 !important;
padding: 0 .7rem .5rem !important;
margin: -46px 0 0 !important;
background: none !important;
}
/* 🚨 Liegt die Leiste IM Bild (vc-handy.js setzt dann
`data-vch-imbild`), gelten weder Negativ-Abstand noch Fluss: sie
haengt absolut am unteren Bildrand. Damit kann sie nichts mehr
verschieben und der Preis kann nicht mehr unter das Bild geraten.
Diese Regel MUSS nach der obigen stehen — sie nimmt deren
`margin` zurueck. */
html.vch-an #vchAzGal[data-vch-imbild] {
position: absolute !important;
left: 0; right: 0; bottom: 0;
margin: 0 !important;
padding: 0 .7rem .6rem !important;
z-index: 4 !important;
pointer-events: none; /* das Bild bleibt antippbar … */
}
/* … nur die Zeichen selbst nehmen den Tipp an. */
html.vch-an #vchAzGal[data-vch-imbild] > * { pointer-events: auto; }
html[data-theme="dark"].vch-an #vchAzGal {
background: linear-gradient(to top, rgba(15,15,18,.92), rgba(15,15,18,0)) !important;
}
/* Die Galerie wird zum Bezugsrahmen fuer die Auflage. */
html.vch-an #listingDetailModal .vcdu-gal { position: relative !important; }
html.vch-an #vchAzGal .vcdu-heart,
html.vch-an #vchAzGal .vch-azg-knopf,
html.vch-an #vchAzGal .vch-azg-teilen {
background: none !important;
box-shadow: none !important;
border: none !important;
color: #0F1722 !important;
width: 36px !important; height: 36px !important;
/* Kontur statt Kasten — bleibt auf hellem UND dunklem Foto lesbar. */
filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.45)) !important;
}
html.vch-an #vchAzGal .vch-punkte i {
filter: drop-shadow(0 0 2px rgba(255,255,255,.9)) !important;
}
/* Der Preis darf jetzt direkt an die Bildkante ruecken. */
html.vch-an #listingDetailModal .ldm-price,
html.vch-an #listingDetailModal #ldmPrice {
margin-top: .35rem !important;
}
/* Anzeigen-Anreisszeile oben bei den Angaben: eine ruhige Zeile mit
Zeichen, Betrag kraeftig, „ANZEIGE" als kleines Etikett. */
html.vch-an #listingDetailModal #ldmVersTeaser,
html.vch-an #listingDetailModal #dmVersTeaser,
html.vch-an #listingDetailModal .ldm-adteaser {
display: flex !important;
align-items: center !important;
gap: .45rem !important;
flex-wrap: wrap !important;
padding: .35rem .9rem .5rem !important;
margin: 0 0 .5rem !important;
background: none !important;
border: none !important;
border-top: 1px solid var(--vch-rand) !important;
font-size: .9rem !important;
color: var(--vch-text) !important;
}
html.vch-an #listingDetailModal #ldmVersTeaser b,
html.vch-an #listingDetailModal #ldmVersTeaser strong { font-weight: 700 !important; }
html.vch-an #listingDetailModal .ldm-vers-ad {
font-size: .68rem !important;
letter-spacing: .04em !important;
color: var(--vch-az-grau) !important;
border: 1px solid var(--vch-rand) !important;
border-radius: 4px !important;
padding: .05rem .3rem !important;
background: none !important;
}
/* 🚨 „alles auf den 1. Blick": GEMESSEN lag der Kaufteil bei 824px — der
Bildschirm endet bei 812. Groesster Einzelposten war das quadratische
Bild mit 375px. Auf 4:3 (281px) bleibt es gross, spart aber 94px; damit
stehen Preis UND beide Kaufknoepfe ohne Scrollen da. */
html.vch-an #listingDetailModal .vcdu-gal,
html.vch-an #listingDetailModal .vcdu-gk,
html.vch-an #listingDetailModal .ldm-stage {
aspect-ratio: 4 / 3 !important;
height: auto !important;
max-height: 46vh !important;
}
html.vch-an #listingDetailModal .vcdu-gk img {
width: 100% !important; height: 100% !important;
object-fit: contain !important;
}
/* Abstaende noch eine Spur enger. */
html.vch-an #listingDetailModal .ldm-page > *,
html.vch-an .dm-page > * { margin-bottom: .45rem !important; }
html.vch-an #vchAzSub { margin: 0 0 .25rem !important; }
html.vch-an #listingDetailModal #ldmSpecs,
html.vch-an #listingDetailModal .ldm-specs-grid { margin: 0 0 .4rem !important; }
/* Letzte Feinarbeit: gemessen endete der zweite Kaufknopf bei 821px, der
Bildschirm bei 812 — neun Pixel fehlten. Die hole ich aus den beiden
groessten verbliebenen Luecken (je 13px), nicht aus der Schriftgroesse. */
html.vch-an #listingDetailModal .ldm-price,
html.vch-an #listingDetailModal #ldmPrice { margin-top: .1rem !important; }
/* 🚨 Dieser Wert war der eigentliche Ueberlappungs-Grund: er zog ALLES
Nachfolgende 56px hinauf, auch den Preis. Er gilt nur noch, solange
die Leiste ausnahmsweise NICHT im Bild liegt (Galerie nicht
gefunden) — dann ist sie ein normaler Block im Fluss. */
html.vch-an #vchAzGal:not([data-vch-imbild]) { margin-top: -56px !important; }
html.vch-an #listingDetailModal .vcdu-ctcard { margin-top: 0 !important; }
/* Der Teilen-Knopf in der Bildleiste erbte keine Rundung — er stand als
weisses Rechteck neben dem runden Herz. */
html.vch-an #vchAzGal .vcdu-heart,
html.vch-an #vchAzGal .vch-azg-knopf,
html.vch-an #vchAzGal .vch-azg-teilen {
border-radius: 50% !important;
border: none !important;
}
/* Etwas Luft zwischen den schwebenden Zeichen und der Shopzeile. */
html.vch-an #vchAzShop { margin-top: .25rem !important; }
/* Punkte nach links, Herz und Teilen nach rechts — beides im Bild. */
html.vch-an #vchAzGal .vch-punkte {
position: static !important;
transform: none !important;
margin-right: auto !important;
}
html.vch-an #vchAzGal { justify-content: space-between !important; }
html.vch-an #vchAzGal .vcdu-heart,
html.vch-an #vchAzGal .vch-azg-knopf,
html.vch-an #vchAzGal .vch-azg-teilen { border-radius: 0 !important; }
/* Teilen oben in der Kopfzeile entfaellt (siehe vc-handy.js). */
html.vch-an #vcHandyDetailKopf .vch-dk-weg { display: none !important; }
/* USt-Angabe direkt unter dem Preis — klein, ruhig, aber da. */
html.vch-an #vchAzUst {
padding: 0 .9rem !important;
margin: 0 0 .2rem !important;
font-size: .82rem !important;
font-weight: 400 !important;
color: var(--vch-az-grau) !important;
line-height: 1.3 !important;
}
html.vch-an #vchAzUst:empty { display: none !important; }
/* 🚨 „mach den grauen Stich weg bei Versicherungen" + „kleiner machen und
in Luecken quetschen": keine Trennlinie, kein grauer Grund, kleinere
Schrift, und die Zeile darf umbrechen statt eine eigene Bahn zu belegen. */
html.vch-an #listingDetailModal #ldmVersTeaser,
html.vch-an #listingDetailModal #dmVersTeaser,
html.vch-an #listingDetailModal .ldm-adteaser {
border-top: none !important;
background: none !important;
padding: .1rem .9rem .15rem !important;
margin: 0 0 .25rem !important;
font-size: .8rem !important;
color: var(--vch-mitte) !important;
}
html.vch-an #listingDetailModal #ldmVersTeaser svg { width: 14px !important; height: 14px !important; }
html.vch-an #listingDetailModal .ldm-vers-ad { font-size: .62rem !important; padding: 0 .25rem !important; }
/* Noch enger: die letzten Abstaende, die niemand braucht. */
html.vch-an #listingDetailModal .ldm-page > *,
html.vch-an .dm-page > * { margin-bottom: .3rem !important; }
html.vch-an #listingDetailModal #ldmBadges,
html.vch-an #listingDetailModal .ldm-badges { margin: 0 0 .2rem !important; }
html.vch-an #listingDetailModal #ldmSpecs,
html.vch-an #listingDetailModal .ldm-specs-grid { margin: 0 0 .25rem !important; gap: .2rem .6rem !important; }
html.vch-an #vchAzSub { margin: 0 0 .15rem !important; }
html.vch-an #listingDetailModal #ldmSubtitle,
html.vch-an #listingDetailModal .vcdp-sub { margin: 0 0 .1rem !important; }
html.vch-an #vchAzShop { margin: .15rem 0 .1rem !important; }
html.vch-an #listingDetailModal #vcpbDetail { margin: 0 0 .25rem !important; }
/* Listenansicht: der Kopf-Abstand kommt allein vom `body` (siehe 24.). */
html.vch-an .mobile-filterbar { padding: .35rem .9rem !important; }
/* ═══════════════════════════════════════════════════════════
28. FUSSZEILE AUF DAS RECHTLICHE EINDAMPFEN (Betreiber 25.08.2026)
„verkleinere den Footer so, dass nur mehr alle rechtlichen Sachen sind
wie Impressum, AGB usw. — alles was nicht rechtlich ist, weg. Fragen &
Antworten kannst du drinnen lassen, alles was so Infos sind auch."
GEMESSEN: die Fusszeile war auf dem Telefon **3466px** hoch — mehr als
vier Bildschirme. Aufteilung:
.vcftr-benefits 265px „Geprüfte Anbieter / Sichere Zahlung …"
Spalte Marktplatz 488px (Kategorien — stehen schon in der Leiste unten)
Spalte Unternehmen 205px (So funktioniert es, Für Kunden …)
.vcftr-brand > p 108px Marketingtext
.vcftr-tchips 54px „SSL-verschlüsselt / DSGVO-konform …"
.vcftr-social 36px
Das sind rund 1150px reine Werbung. Es bleiben: Rechtliches,
Kundenservice (FAQ, Dokumente, Bestellungen) und Kontakt.
🚨 NUR ausblenden, nichts entfernen — am Rechner steht alles unveraendert,
und ein spaeterer Umbau der Fusszeile findet seine Bausteine wieder.
═══════════════════════════════════════════════════════════ */
html.vch-an .vcftr .vcftr-benefits,
html.vch-an .vcftr .vcftr-tchips,
html.vch-an .vcftr .vcftr-social,
html.vch-an .vcftr .vcftr-brand p {
display: none !important;
}
/* (Die Werbe-Spalten blendet `fusszeileEindampfen()` in vc-handy.js aus —
ueber die UEBERSCHRIFT. `:nth-of-type` zaehlt Tags, nicht Klassen, und
traf dadurch die falsche Spalte.) */
/* Schnellzugriff (Kategorien, stehen schon in der Leiste unten) und die
Zahlungsart-Logos sind Werbung, kein Rechtstext. */
html.vch-an .vcftr .vcftr-quick,
html.vch-an .vcftr .vcftr-partners,
html.vch-an .vcftr .vcftr-pblock { display: none !important; }
/* 🚨 „Partner & Dienste" (Stripe & Co.) ist die Drittanbieter-Offenlegung.
Der Betreiber will sie auf dem Telefon trotzdem weg — sie bleibt über
die Datenschutzerklaerung erreichbar, die in der Spalte „Rechtliches"
direkt darunter steht. Am Rechner bleibt der Block unveraendert. */
/* Zwei Spalten nebeneinander statt untereinander. */
html.vch-an .vcftr .vcftr-top {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .3rem .7rem !important;
align-items: start !important;
}
html.vch-an .vcftr .vcftr-brand { grid-column: 1 / -1 !important; }
/* 🚨 GEMESSEN: die Spalten trugen eine feste Breite von 253px — im
282px breiten Raster passten nie zwei nebeneinander, sie brachen um
und standen doch wieder untereinander. Ohne `min-width: 0` bricht
ausserdem kein langer Link um, sondern sprengt die Spalte. */
html.vch-an .vcftr .vcftr-top { width: 100% !important; max-width: none !important; }
/* 🚨 GEMESSEN: unter der letzten Spalte klaffte eine Luecke von 50px —
`padding-bottom: 41.6px` am Raster plus 8px Spaltenabstand. Dieses
Polster war fuer „Schnellzugriff" und „Partner & Dienste" gedacht, die
darunter folgten; beide sind auf dem Telefon jetzt aus, das Polster
polstert also gegen nichts. */
html.vch-an .vcftr .vcftr-top { padding-bottom: .5rem !important; }
html.vch-an .vcftr .vcftr-col:last-of-type { margin-bottom: 0 !important; }
html.vch-an .vcftr .vcftr-col {
margin: 0 0 .5rem !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
flex: none !important;
}
/* 🚨 GEMESSEN am Bildschirmfoto: mit `overflow-wrap: anywhere` brach der
Browser mitten im Wort um — „Datenschutzerkläru/ng",
„Widerrufsbelehrun/g", „vermittco@gmail.co/m". Das sieht kaputt aus.
`break-word` bricht nur, wenn ein Wort wirklich nicht passt, und
`hyphens: auto` setzt dabei einen echten Trennstrich an einer
erlaubten Stelle — die Seiten tragen `lang="de"`, der Browser trennt
also nach deutschen Regeln. Zusammen mit der kleineren Schrift passen
die meisten Begriffe jetzt ohnehin in eine Zeile. */
html.vch-an .vcftr .vcftr-col a,
html.vch-an .vcftr .vcftr-col li {
overflow-wrap: break-word !important;
word-break: normal !important;
-webkit-hyphens: auto !important;
hyphens: auto !important;
font-size: .72rem !important;
line-height: 1.35 !important;
}
/* Die Zeilen sassen 8px auseinander — bei 1.35 Zeilenhoehe reicht die
Haelfte, und die Spalte wird spuerbar kuerzer. */
html.vch-an .vcftr .vcftr-col li { margin-bottom: .22rem !important; }
html.vch-an .vcftr .vcftr-col h3,
html.vch-an .vcftr .vcftr-col h4,
html.vch-an .vcftr .vcftr-col > *:first-child {
font-size: .68rem !important;
letter-spacing: .06em !important;
margin: 0 0 .2rem !important;
}
html.vch-an .vcftr .vcftr-logo { font-size: 1.1rem !important; }
html.vch-an .vcftr .vcftr-fine,
html.vch-an .vcftr .vcftr-bottom {
font-size: .74rem !important;
line-height: 1.55 !important;
padding-top: .6rem !important;
}
/* Schmalerer Seitenrand = breitere Spalten (118 -> 130px), damit lange
Begriffe seltener ueberhaupt umbrechen muessen. */
html.vch-an .vcftr .vcftr-in { padding: .8rem .7rem 1rem !important; }
/* 🚨 GEMESSEN: hier stand eine aeltere Fassung derselben Regeln — mit
`display: block` fuer `.vcftr-top`. Weil sie WEITER UNTEN im Blatt
steht als das Zwei-Spalten-Raster, hat sie es bei gleicher Genauigkeit
geschlagen: `gridTemplateColumns` war gesetzt, aber `display` war
`block` — das Raster damit wirkungslos, die Spalten standen weiter
untereinander. Die alte Fassung ist entfernt; es gilt nur noch der
Block weiter oben. */
/* Bild 1: die schwebenden Zeichen duerfen noch enger sitzen. */
html.vch-an #listingDetailModal.open { padding-top: 34px !important; }
html.vch-an #vcHandyDetailKopf { padding-top: 4px !important; height: 46px !important; }
html.vch-an #vcHandyDetailKopf .vch-dk-knopf { width: 34px !important; height: 34px !important; }
html.vch-an #vchAzShop { margin-top: 0 !important; }
/* ═══════════════════════════════════════════════════════════
29. COOKIE-BANNER AUF DEM TELEFON (Betreiber 25.08.2026)
„mach den Cookiebanner wie große Firmen das mit Handy machen: nur
Schrift mit ‚Wir verwenden Cookies‘, ohne Symbole, ohne den Fuchs,
kurzgefasst 1 Satz was es macht — nicht mehr. Es soll kein
Runterschauen sein und nicht den Bildschirm bedecken."
Der Entwurf am Rechner ist eine grosse Buehne (Logo, Kicker, Fuchs,
handschriftliche Notiz, vier Kategorie-Kacheln). Auf 375px wurde daraus
eine bildschirmfuellende Seite zum Scrollen.
Hier bleibt: Ueberschrift · EIN Satz · die Knoepfe. Als schmales Blatt
unten, der Inhalt darueber bleibt sichtbar.
🚨 Die granulare Auswahl geht nicht verloren — „Cookie-Einstellungen"
oeffnet weiterhin die vollstaendige Ansicht (`.vccc-set`). Das ist die
Voraussetzung dafuer, dass die Kurzfassung zulaessig bleibt
([[cookie-consent]] · fail-closed).
═══════════════════════════════════════════════════════════ */
html.vch-an .vccc-ov {
align-items: flex-end !important;
padding: 0 !important;
background: rgba(8, 17, 32, .35) !important;
}
html.vch-an .vccc-banner .vccc-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
max-height: none !important;
height: auto !important;
border-radius: 16px 16px 0 0 !important;
box-shadow: 0 -8px 30px rgba(8, 17, 32, .22) !important;
overflow: visible !important;
transform: none !important;
}
html.vch-an .vccc-banner .vccc-pad { padding: 1rem .95rem !important; }
/* Alles Schmuckwerk raus: Logo, Kicker, Fuchs, Notiz, Kategorie-Kacheln. */
html.vch-an .vccc-banner .vccc-logo,
html.vch-an .vccc-banner .vccc-kicker,
html.vch-an .vccc-banner .vccc-art,
html.vch-an .vccc-banner .vccc-note,
html.vch-an .vccc-banner .vccc-cats,
html.vch-an .vccc-banner .vccc-cat-ico,
html.vch-an .vccc-banner .vccc-net { display: none !important; }
/* 🚨 GEMESSEN: `.vccc-foot-txt` auszublenden hat „Cookie-Einstellungen",
„Datenschutzerklärung" und „Impressum" mitgenommen — die liegen darin.
Das darf nicht passieren: die granulare Auswahl und die Pflichtlinks
muessen auf der ERSTEN Ebene erreichbar bleiben, sonst waere die
Kurzfassung nicht mehr zulaessig ([[cookie-consent]] · [[doc-consent-gates]]).
Der Block bleibt also sichtbar — nur schmal gesetzt. */
html.vch-an .vccc-banner .vccc-foot-txt {
display: block !important;
margin: .55rem 0 0 !important;
padding: 0 !important;
/* 🚨 GEMESSEN: der Block war 300px hoch, obwohl sein Inhalt nur 21px
misst. Grund: `.vccc-foot` ist eine Flex-Spalte und der Block traegt
`flex: 1 1 300px` — die 300px sind die BASIS, nicht der Inhalt. Ohne
`flex: 0 0 auto` bleibt er aufgeblasen, egal wie wenig drinsteht. */
flex: 0 0 auto !important;
order: 2 !important; /* Linkzeile unter die Knoepfe */
}
html.vch-an .vccc-banner .vccc-acts { order: 1 !important; }
html.vch-an .vccc-banner .vccc-foot { height: auto !important; }
/* 🚨 GEMESSEN: der Block war 300px hoch — darin steckt neben den Links
noch Fliesstext. Gebraucht wird auf dem Telefon NUR die Linkzeile
(Cookie-Einstellungen · Datenschutzerklärung · Impressum); der Rest
steht ausfuehrlich hinter „Cookie-Einstellungen". */
html.vch-an .vccc-banner .vccc-foot-txt > :not(.vccc-links) { display: none !important; }
html.vch-an .vccc-banner .vccc-links {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: .15rem .8rem !important;
margin: 0 !important;
}
html.vch-an .vccc-banner .vccc-links > * { font-size: .78rem !important; line-height: 1.7 !important; }
html.vch-an .vccc-banner .vccc-links i { display: none !important; } /* Trennzeichen */
html.vch-an .vccc-banner .vccc-h1 {
font-size: 1.12rem !important;
line-height: 1.25 !important;
margin: 0 0 .3rem !important;
letter-spacing: -.01em !important;
}
html.vch-an .vccc-banner .vccc-lead {
font-size: .88rem !important;
line-height: 1.45 !important;
max-width: none !important;
margin: 0 0 .8rem !important;
}
/* Knoepfe: voll breit untereinander, damit nichts abgeschnitten wird. */
html.vch-an .vccc-banner .vccc-foot,
html.vch-an .vccc-banner .vccc-acts {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: .45rem !important;
padding: 0 !important;
margin: 0 !important;
}
html.vch-an .vccc-banner .vccc-btn,
html.vch-an .vccc-banner .vccc-sbtn {
width: 100% !important;
min-height: 44px !important;
font-size: .93rem !important;
border-radius: 999px !important;
}
html.vch-an .vccc-banner .vccc-links {
display: flex !important;
justify-content: center !important;
gap: 1rem !important;
font-size: .8rem !important;
margin-top: .5rem !important;
}
/* ── 30) Preiszeile der Regal-Karten: nicht auf Null quetschen ──────────
🚨 GEMESSEN am Bildschirmfoto der Startseite: der Preis stand in DREI
Zeilen — „€" / „1 zzgl." / „MwSt." — und „Ansehen →" war am rechten
Rand abgeschnitten.
URSACHE (vc-homereco.js:1077):
.vhr-tcrow { display:flex; justify-content:space-between; gap:.5rem }
Auf dem Rechner ist die Karte breit genug fuer Preis UND Knopf
nebeneinander. Im Zweier-Raster auf 375px ist sie rund 150px breit:
„Ansehen →" schrumpft nicht, also schrumpft die Preisgruppe — bis
unter die Breite von „€ 1" und der Browser bricht sogar zwischen
Waehrungszeichen und Zahl um.
Die Zeile darf umbrechen, die Bestandteile nicht. Der Preis ist die
Angabe, wegen der die Karte ueberhaupt da ist — er geht zuerst auf
eine eigene Zeile, der Knopf rutscht darunter.
Rein additiv, nur unter 760px: am Rechner bleibt die Zeile wie sie ist. */
html.vch-an #vcHomeReco .vhr-tcrow {
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: .15rem .4rem !important;
}
html.vch-an #vcHomeReco .vhr-tcp,
html.vch-an #vcHomeReco .vhr-tcalt,
html.vch-an #vcHomeReco .vhr-tcgo {
white-space: nowrap !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
/* „zzgl. MwSt." ist eine Fussnote, keine Schlagzeile — sie darf klein
sein, muss aber in einer Zeile stehen bleiben (Pflichtangabe). */
html.vch-an #vcHomeReco .vhr-tcrow em {
white-space: nowrap !important;
font-size: .62rem !important;
opacity: .75 !important;
flex: 0 0 auto !important;
}
/* ── 31) Ladezeile in der Konto-Ebene ───────────────────────────────────
Solange die Sitzung geklaert wird, steht hier NICHTS Falsches — weder
„Melden Sie sich an" noch ein halb gefuelltes Konto. Siehe die
Begruendung ueber `sitzungSicher()` in vc-handy.js. */
.vch-kwarten {
display: flex;
align-items: center;
gap: .6rem;
padding: 1.4rem .9rem;
color: var(--vch-grau, #6b7280);
font-size: .86rem;
}
.vch-kspinner {
width: 17px; height: 17px;
flex: 0 0 auto;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
opacity: .55;
animation: vch-dreht .7s linear infinite;
}
@keyframes vch-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.vch-kspinner { animation-duration: 2.4s; }
}
/* ══════════════════════════════════════════════════════════════════════
32) HAENDLER-PROFIL (haendler.html)
🚨 Betreiber 25.08.2026: „wenn man Händler-Profil ansieht, kommt man
nicht zu der Ansicht wie normal."
GEMESSEN auf 375px, vor dieser Aenderung:
• Kopfbereich .shop-head 487px hoch
• Bannerbild 250px (zwei Drittel des Bildes)
• Chip-Reihe 136px = VIER Zeilen
• Suchfeld 26px hoch — kaum zu treffen
• Seitenhoehe 66 506px bei 510 Karten
• Angaben-Zeile zerrissen: „… · 4 / abgeschlossene Verkäufe" und
„… · 510 / Inserate" — Zahl am Zeilenende, Wort in der naechsten.
Die Seite hatte als EINZIGE nie eine Handy-Fassung bekommen.
Alles hier ist additiv und nur unter 760px; haendler.html selbst
bleibt fuer den Rechner unveraendert.
══════════════════════════════════════════════════════════════════════ */
/* ── Angaben-Zeile: der eigentliche Fehler ──────────────────────────────
🚨 URSACHE GEFUNDEN, nicht geraten: `.meta` ist ein Flex-Kasten
(haendler.html:126), die Eintraege sind aber KEINE geschlossenen
Elemente — `'
4 abgeschlossene Verkäufe'` ergibt ein
UND
einen losen Textknoten. Flex macht daraus ZWEI Kaesten, die
unabhaengig voneinander umbrechen. Genau daher stand die Zahl allein
am Zeilenende.
Im normalen Textfluss (`display: block`) gehoert die Zahl wieder zu
ihrem Wort. Die Trenner „ · " sind ebenfalls Text und fliessen mit. */
html.vch-an .meta {
display: block !important;
line-height: 1.6 !important;
font-size: .8rem !important;
}
html.vch-an .meta .mic { display: inline !important; vertical-align: -.12em !important; }
html.vch-an .meta .stars { white-space: nowrap !important; }
/* Zahl und Wort duerfen nie getrennt werden. */
html.vch-an .meta b { white-space: nowrap !important; }
/* ── Banner: ein Drittel des Bildschirms ist zu viel ────────────────────
Das hochgeladene Titelbild ist hochkant (864x1821, siehe Notiz zum
Profilkopf) — auf einem breiten Banner zeigt `cover` ohnehin nur einen
schmalen Streifen. 250px kosten auf dem Telefon nur Platz. */
html.vch-an .banner { height: 132px !important; }
/* 🚨 `.banner:before` beginnt 240px OBERHALB des Banners
(haendler.html:61) — dort blutet das Titelbild nach oben aus und
lag hinter der Zeile „← Zum Marktplatz". Bei 250px Bannerhoehe war
das Verhaeltnis in Ordnung; bei 132px reicht der Ueberstand fast
doppelt so weit ueber das Banner hinaus, und der graublaue Link
(rgb(159,178,204)) stand auf einem beliebigen Foto. Der Ueberstand
wird darum mitverkleinert. */
html.vch-an .banner:before { top: -96px !important; }
/* Und die Rueckwege bekommen dieselbe Kontur, die schon der
Blockier-Schalter braucht: auf einem hochgeladenen Bild traegt
weisse Schrift mit Schatten nicht, eine Kontur am Buchstaben schon
(siehe Notiz zum Profilkopf — drei Anlaeufe mit text-shadow sind
dort gescheitert). */
html.vch-an .topbar .home {
color: #fff !important;
font-weight: 700 !important;
-webkit-text-stroke: 2.4px rgba(0, 0, 0, .55) !important;
paint-order: stroke fill !important;
}
html.vch-an .shop-head { margin-top: -22px !important; padding-bottom: .7rem !important; }
html.vch-an .logo {
width: 62px !important; height: 62px !important;
margin-top: -38px !important; font-size: 1.4rem !important;
border-width: 2px !important;
}
html.vch-an .firm { font-size: 1.15rem !important; margin-top: .5rem !important; }
/* ── Werkzeugleiste: Suchfeld gross genug fuer einen Finger ─────────────
26px war unter jeder Empfehlung; ein Fingertipp braucht ~44px. */
html.vch-an .tools { margin: .9rem 0 .2rem !important; }
html.vch-an .search { padding: .7rem .85rem !important; border-radius: 12px !important; }
html.vch-an .search input { font-size: 16px !important; }
/* 🚨 16px ist kein Schoenheitswert: iOS zoomt die ganze Seite hinein,
sobald ein Eingabefeld kleiner als 16px ist. Danach steht die Seite
schief und der Nutzer muss von Hand herauszoomen. */
/* ── Chips: EINE Zeile zum Wischen statt vier Zeilen ────────────────────
Dieselbe Loesung wie ueberall sonst in der Handy-Ebene. */
html.vch-an .chips {
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
margin: .8rem -.9rem .3rem !important;
padding: 0 .9rem !important;
}
html.vch-an .chips::-webkit-scrollbar { display: none !important; }
html.vch-an .chip { flex: 0 0 auto !important; }
/* ── Karten-Raster ─────────────────────────────────────────────────────
`minmax(220px, 1fr)` ergibt auf 351px genau EINE Spalte. Zwei sind
hier richtig — dieselbe Dichte wie in den Trefferlisten. */
html.vch-an .grid {
grid-template-columns: 1fr 1fr !important;
gap: .7rem !important;
margin-top: .9rem !important;
}
/* „510 Inserate" stand DREIMAL: in der Angaben-Zeile, auf dem
„Alle"-Chip und noch einmal darunter. Auf dem Telefon zaehlt jede
Zeile — der dritte faellt weg. Sobald gefiltert wird, nennt der
aktive Chip die Zahl. */
html.vch-an #shopCount { display: none !important; }
html.vch-an .ptitle { font-size: .82rem !important; line-height: 1.3 !important; }
html.vch-an .pcat { font-size: .68rem !important; }
html.vch-an .pprice { font-size: .92rem !important; }
/* ── „Mehr ansehen" (von vc-handy.js gesetzt, siehe dort) ──────────────*/
html.vch-an #vcHandyShopMehr {
display: block;
width: 100%;
margin: 1rem 0 .2rem;
padding: .85rem 1rem;
border: 0;
border-radius: 999px;
background: var(--vch-blau);
color: #fff;
font: 600 .9rem/1 'Manrope', system-ui, sans-serif;
cursor: pointer;
}
html.vch-an #vcHandyShopMehr:active { filter: brightness(.92); }
html.vch-an #vcHandyShopMehr[hidden] { display: none; }
/* ══════════════════════════════════════════════════════════════════════
33) FILTER-BLATT — alle Filter, alle bedienbar
Begruendung der Aenderungen steht bei `filterKaesten()` in
vc-handy.js. Kurz: drei verschiedene Bauarten je Kategorie, zwei
zugeklappte Gruppen, und ein 323px breiter Desktop-Schub auf einem
375px-Schirm.
Gestaltungsregeln, nach denen hier gearbeitet wurde:
• Ein Filter-Blatt ist eine ARBEITSFLAECHE, kein Hinweis — es
darf fast den ganzen Schirm nehmen (92vh), damit man nicht in
einem 4-Zeilen-Fenster scrollt.
• Tippflaechen mindestens 44px hoch. Kaestchen von 15px sind mit
dem Finger nicht zu treffen; die ganze ZEILE wird zur Flaeche.
• Der Abschluss-Knopf bleibt IMMER sichtbar (klebende Fussleiste)
und liegt ueber der Navigationsleiste — sonst tippt man auf
„Konto" statt auf „Ergebnisse anzeigen".
• Eingabefelder 16px, sonst zoomt iOS die Seite hinein.
══════════════════════════════════════════════════════════════════════ */
.vch-filterblatt .vch-blatt-karte {
max-height: 92vh !important;
height: 92vh !important;
}
/* 🚨 Die Hoehe muss FEST sein, nicht nur begrenzt: nur dann kann der
Inhalt dazwischen scrollen und die Fussleiste unten kleben. Mit
`max-height` allein waere die Karte bei wenigen Filtern kurz und der
Knopf klebte mitten im Bild. */
.vch-filterblatt .vch-blatt-inhalt {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.vch-filterblatt .vch-filterinhalt { max-height: none !important; }
/* Die Fussleiste klebt und liegt ueber allem im Blatt. */
.vch-filterblatt .vch-filterfuss {
flex: 0 0 auto !important;
display: flex !important;
gap: .6rem !important;
align-items: center !important;
border-top: 1px solid var(--vch-rand);
background: var(--vch-flaeche);
}
.vch-filterblatt .vch-filterfuss .vch-kbtn-voll { flex: 1 1 auto !important; }
.vch-filterblatt .vch-filter-reset {
flex: 0 0 auto !important;
background: transparent !important;
border: 0 !important;
color: var(--vch-mitte) !important;
text-decoration: underline !important;
padding: .6rem .2rem !important;
}
/* ── Der hineingelegte Desktop-Kasten ──────────────────────────────────
#filterSidebar ist am Rechner eine feste Spalte mit eigener Breite,
eigenem Rand und eigenem Kopf. Im Blatt muss davon nichts uebrig
bleiben — es ist jetzt Inhalt, kein Behaelter mehr. */
.vch-filterblatt .vch-filterinhalt #filterSidebar,
.vch-filterblatt .vch-filterinhalt .filter-sidebar {
position: static !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
max-height: none !important;
transform: none !important;
inset: auto !important;
z-index: auto !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
/* Eigener Kopf und eigene Fussknoepfe des Kastens: das Blatt hat beides
schon. Die Knoepfe werden NICHT entfernt — der Fussknopf des Blattes
klickt sie ja — nur ausgeblendet. */
.vch-filterblatt .vch-filterinhalt .fs-drawer-head,
.vch-filterblatt .vch-filterinhalt .fs-head,
.vch-filterblatt .vch-filterinhalt .fs-apply,
.vch-filterblatt .vch-filterinhalt .fs-reset { display: none !important; }
/* ── Gruppen ───────────────────────────────────────────────────────────*/
.vch-filterblatt .vch-filterinhalt .fs-group {
border: 0 !important;
border-bottom: 1px solid var(--vch-rand) !important;
border-radius: 0 !important;
padding: .5rem 0 .8rem !important;
margin: 0 !important;
max-height: none !important;
overflow: visible !important;
}
.vch-filterblatt .vch-filterinhalt .fs-group:last-of-type { border-bottom: 0 !important; }
/* 🚨 Die Gruppenueberschrift heisst `.fs-gtitle` (elektrogeraete.html:121)
— ein mit `onclick="fsToggle(this)"`, KEIN