/* === VOAP AutoHub — Frontend v0.1.1 === */ /* --vah-primary / --vah-secondary kommen per wp_head aus den Design-Einstellungen. */ .vah-icon svg { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; } input[type="checkbox"], input[type="radio"], select { accent-color: var(--vah-primary, #0077B6); } /* ---------- Archive ---------- */ .vah-archive-page { padding-bottom: 40px; } /* Dunkler Verlauf über dem Kopfbild, damit der weiße Titel auch auf hellen Fotos lesbar bleibt (Kundenfeedback 2026-07-22) — gleiches Prinzip wie beim Detailseiten-Hero. */ .vah-archive-hero { position: relative; background: #1a1a1a; color: #fff; padding: 30px 20px; margin-bottom: 26px; min-height: 380px; display: flex; align-items: center; background-position: center; background-size: cover; } .vah-archive-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%); } .vah-archive-hero h1 { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; font-size: 2.4rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); } .vah-archive { max-width: 1200px; margin: 0 auto; padding: 0 16px; } @media (max-width: 600px) { .vah-archive-hero { min-height: 160px; padding: 20px 16px; } .vah-archive-hero h1 { font-size: 1.6rem; } } /* Kundenfeedback 2026-08-31: Option, den dunklen Standard-Hintergrund (samt Verlauf, der eigentlich nur ein Kopfbild abdunkelt) abzuschalten — ohne eigenes Kopfbild bleibt sonst immer ein voller schwarzer Balken stehen, auch wenn nur der Titel gebraucht wird. */ .vah-archive-hero.vah-archive-hero-no-bg { background: none; min-height: 0; padding: 20px; } .vah-archive-hero.vah-archive-hero-no-bg::before { content: none; } .vah-archive-hero.vah-archive-hero-no-bg h1 { color: #1a1a1a; text-shadow: none; } @media (max-width: 600px) { .vah-archive-hero.vah-archive-hero-no-bg { min-height: 0; padding: 16px; } } /* Feste Spaltenzahl statt auto-fit: bei mehr als 4 Filtern wirkte die freie Verteilung unruhig/krumm (Kundenfeedback 2026-07-22) — jetzt kontrolliert umbrechende Reihen. */ .vah-filter-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; background: #fff; border: 1px solid #dee2e6; border-radius: 10px; padding: 22px; margin-bottom: 26px; box-shadow: 0 2px 8px rgba(0,0,0,.04); } @media (max-width: 1100px) { .vah-filter-bar { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .vah-filter-bar { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .vah-filter-bar { grid-template-columns: 1fr; } } .vah-filter-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; height: 100%; } .vah-filter-field label { font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: #646970; font-weight: 400; } .vah-filter-bar select { padding: 10px 36px 10px 12px; border: 1px solid #dee2e6; border-radius: 6px; font-size: 14px; line-height: 1.4; height: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23646970'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; -webkit-appearance: none; appearance: none; color: #1a1a1a; box-sizing: border-box; width: 100%; } .vah-filter-bar select:focus { border-color: var(--vah-primary, #0077B6); outline: none; box-shadow: 0 0 0 1px var(--vah-primary, #0077B6); } /* Fallback für den seltenen Fall, dass JS nicht läuft und das native -Popup — einzige Möglichkeit, sowohl Auswahl als auch Hover zuverlässig in Markenfarbe zu zeigen (Kundenfeedback 2026-07-22, native Systemfarbe beim Hover ließ sich per CSS grundsätzlich nicht überschreiben). */ .vah-fancy-select { position: relative; } /* !important gegen generische Theme-Button-Styles (xstore/WooCommerce setzen auf