/**
 * Vitrine – Markenmodul (mod_vitrinebrand)
 *
 * Drei Darstellungen: .vb--editorial, .vb--tiles, .vb--tabs.
 * Farben/Schriften als Variablen (im Template überschreibbar):
 *   --vb-ink, --vb-ink-2, --vb-muted, --vb-line, --vb-accent, --vb-accent-soft, --vb-tile
 *   --vb-head, --vb-serif, --vb-sans (Vorgabe: Schriften aus den com_vitrine-Optionen)
 * Breitenabhängig über Container-Queries, d. h. passend zur Modulposition,
 * nicht zur Fensterbreite.
 */

.vb {
    --vb-ink: #1c1c1e;
    --vb-ink-2: #3a3a3c;
    --vb-muted: #6e6e73;
    --vb-line: #e3e3e0;
    --vb-accent: #8a6d3b;
    --vb-accent-soft: #f1ebe0;
    --vb-tile: #f4f2ee;
    --vb-ease: cubic-bezier(.2, .7, .2, 1);
    container-type: inline-size;
    color: var(--vb-ink);
    font-family: var(--vb-sans, inherit);
}
.vb *, .vb *::before, .vb *::after { box-sizing: border-box; }
.vb [hidden] { display: none !important; }
.vb-inner { --vb-gut: clamp(16px, 4cqi, 56px); padding: clamp(40px, 6cqi, 88px) var(--vb-gut); }
.vb ul { list-style: none; margin: 0; padding: 0; }
.vb li { margin: 0; padding: 0; }
.vb li::before { content: none; }
.vb a, .vb a:hover, .vb a:focus { color: inherit; text-decoration: none; }
.vb a:focus-visible, .vb button:focus-visible { outline: 2px solid var(--vb-accent); outline-offset: 3px; }

/* ---- Kopf ---------------------------------------------------------------- */
.vb .vb-head { margin: 0 0 clamp(26px, 3.5cqi, 48px); }
.vb .vb-head--center { text-align: center; }
.vb .vb-eyebrow {
    display: block; margin: 0 0 10px; font-family: var(--vb-sans, inherit); font-size: 11px; font-weight: 600;
    line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; color: var(--vb-accent);
}
.vb .vb-title {
    margin: 0; font-family: var(--vb-head, var(--vb-serif, Georgia, serif)); font-size: clamp(30px, 3.6cqi, 46px);
    font-weight: 400; line-height: 1.1; letter-spacing: .005em; color: var(--vb-ink); text-transform: none;
}

/* ---- Bausteine ----------------------------------------------------------- */
.vb .vb-tile { display: block; position: relative; overflow: hidden; background: var(--vb-tile); aspect-ratio: 1; }
.vb .vb-tile img {
    display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 11%;
    mix-blend-mode: multiply; transition: transform .7s var(--vb-ease);
}
.vb a.vb-tile:hover img, .vb a.vb-tile:focus-visible img, .vb .vb-product:hover img { transform: scale(1.06); }

.vb .vb-chev { width: 7px; height: 11px; flex: none; transition: transform .3s var(--vb-ease); }
.vb .vb-more {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 11.5px; font-weight: 600;
    line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.vb .vb-more span {
    padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .35s var(--vb-ease);
}
.vb .vb-more:hover span { background-size: 100% 1px; }
.vb .vb-more:hover .vb-chev { transform: translateX(4px); }

.vb .vb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 12px 34px;
    font-family: var(--vb-sans, inherit); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .2em;
    text-align: center; text-transform: uppercase; border: 1px solid var(--vb-ink); border-radius: 0;
    transition: background .25s, color .25s, border-color .25s;
}
.vb a.vb-btn--line { background: transparent; color: var(--vb-ink); }
.vb a.vb-btn--line:hover { background: var(--vb-ink); color: #fff; }
.vb a.vb-btn--solid { background: var(--vb-ink); color: #fff; }
.vb a.vb-btn--solid:hover { background: var(--vb-accent); border-color: var(--vb-accent); color: #fff; }
.vb .vb-btn--ghost { border-color: currentColor; }
.vb .vb-count, .vb .vb-n { font-size: 13px; line-height: 1.4; color: var(--vb-muted); }
.vb .vb-all { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(36px, 4.5cqi, 60px); }

/* ---- Variante „Editorial“ ------------------------------------------------ */
.vb--editorial .vb-row {
    display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); align-items: center;
    gap: clamp(24px, 4.5cqi, 72px); padding: clamp(22px, 2.6cqi, 36px) 0; border-top: 1px solid var(--vb-line);
}
.vb--editorial .vb-row:last-child { border-bottom: 1px solid var(--vb-line); }
.vb--editorial .vb-row.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr); }
.vb--editorial .vb-row.is-flip .vb-imgs { order: 2; }
.vb--editorial .vb-imgs { display: grid; grid-template-columns: repeat(var(--vb-cols, 3), minmax(0, 1fr)); gap: clamp(8px, 1cqi, 14px); }
.vb--editorial .vb-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vb--editorial .vb-cat {
    margin: 0; font-family: var(--vb-head, var(--vb-serif, Georgia, serif)); font-size: clamp(28px, 2.7cqi, 38px);
    font-weight: 400; line-height: 1.1; color: var(--vb-ink); text-transform: none; letter-spacing: 0;
}
.vb--editorial .vb-n { margin-top: -8px; }
.vb--editorial .vb-cap {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px;
    padding: 26px 12px 10px; font-size: 12px; line-height: 1.3; color: var(--vb-ink);
    background: linear-gradient(rgba(244, 242, 238, 0), rgba(244, 242, 238, .96) 45%);
    opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--vb-ease);
}
.vb--editorial .vb-cap b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb--editorial .vb-cap i { font-style: normal; color: var(--vb-muted); white-space: nowrap; }
.vb--editorial .vb-cap small { margin-right: 2px; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vb-accent); }
.vb--editorial .vb-tile:hover .vb-cap, .vb--editorial .vb-tile:focus-visible .vb-cap { opacity: 1; transform: none; }
@media (hover: none) { .vb--editorial .vb-cap { display: none; } }
@container (max-width: 760px) {
    .vb--editorial .vb-row, .vb--editorial .vb-row.is-flip { grid-template-columns: 1fr; gap: 14px; }
    .vb--editorial .vb-row.is-flip .vb-imgs { order: 0; }
    .vb--editorial .vb-text { order: -1; flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
    .vb--editorial .vb-n { display: none; }
    .vb--editorial .vb-more { font-size: 10.5px; letter-spacing: .16em; }
    .vb--editorial .vb-all .vb-btn { width: 100%; }
}

/* ---- Variante „Kacheln“ -------------------------------------------------- */
.vb--tiles .vb-grid { display: grid; grid-template-columns: repeat(var(--vb-cols, 3), minmax(0, 1fr)); gap: clamp(14px, 1.8cqi, 26px); }
.vb--tiles .vb-card { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.vb--tiles .vb-collage { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 3 / 2; }
.vb--tiles .vb-collage .vb-tile { aspect-ratio: auto; min-width: 0; min-height: 0; }
.vb--tiles .vb-collage .vb-tile img { position: absolute; inset: 0; }
.vb--tiles .vb-collage .is-main { grid-row: 1 / 3; }
.vb--tiles .vb-collage .is-main img { padding: 9%; }
.vb--tiles .vb-collage--n1 { grid-template-columns: 1fr; }
.vb--tiles .vb-collage--n2 .vb-tile { grid-row: 1 / 3; }
.vb--tiles .vb-meta {
    position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px;
    padding: 16px 2px 6px; border-bottom: 1px solid var(--vb-line);
}
.vb--tiles .vb-name {
    grid-column: 1; margin: 0; font-family: var(--vb-head, var(--vb-serif, Georgia, serif)); font-size: clamp(24px, 2.2cqi, 30px);
    font-weight: 400; line-height: 1.15; color: var(--vb-ink); text-transform: none; letter-spacing: 0;
}
.vb--tiles .vb-stretch::after { content: ""; position: absolute; inset: 0; }
.vb--tiles .vb-n { grid-column: 1; }
.vb--tiles .vb-go {
    grid-column: 2; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.vb--tiles .vb-meta:hover .vb-name { color: var(--vb-accent); }
@container (max-width: 300px) { .vb--tiles .vb-go-label { display: none; } }
.vb--tiles .vb-meta:hover .vb-chev { transform: translateX(4px); }
.vb--tiles .vb-alltile {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 14px; min-height: 100%; padding: clamp(26px, 3.4cqi, 48px);
}
.vb--tiles .vb-alltile--dark { background: var(--vb-ink); color: #fff; }
.vb--tiles .vb-alltile--light { background: var(--vb-accent-soft); color: var(--vb-ink); }
.vb--tiles .vb-alltile::after {
    content: ""; position: absolute; right: -18%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(201, 169, 106, .35); box-shadow: 0 0 0 28px rgba(201, 169, 106, .06); pointer-events: none;
}
.vb--tiles .vb-alltile .vb-eyebrow { margin: 0; }
.vb--tiles .vb-alltile--dark .vb-eyebrow { color: #c9a96a; }
.vb--tiles .vb-alltile-title { font-family: var(--vb-head, var(--vb-serif, Georgia, serif)); font-size: clamp(30px, 3cqi, 40px); line-height: 1.08; }
.vb--tiles .vb-alltile-sub { margin-bottom: 8px; font-size: 14px; line-height: 1.5; opacity: .78; }
.vb--tiles .vb-alltile .vb-btn { padding: 12px 24px; }
.vb--tiles .vb-alltile--dark:hover .vb-btn { background: #fff; color: var(--vb-ink); }
.vb--tiles .vb-alltile--light:hover .vb-btn { background: var(--vb-ink); color: #fff; }
@container (max-width: 980px) { .vb--tiles .vb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) {
    .vb--tiles .vb-grid { grid-template-columns: 1fr; gap: 26px; }
    .vb--tiles .vb-alltile { min-height: 0; }
}

/* ---- Variante „Reiter“ --------------------------------------------------- */
.vb--tabs .vb-tabs {
    display: flex; gap: clamp(18px, 3cqi, 40px); margin-bottom: clamp(22px, 2.6cqi, 34px);
    border-bottom: 1px solid var(--vb-line); overflow-x: auto; scrollbar-width: none;
}
.vb--tabs .vb-tabs::-webkit-scrollbar { display: none; }
.vb--tabs .vb-tab {
    position: relative; margin: 0; padding: 0 0 14px; border: 0; border-radius: 0; background: none; box-shadow: none;
    cursor: pointer; white-space: nowrap; font-family: var(--vb-head, var(--vb-serif, Georgia, serif));
    font-size: clamp(20px, 1.9cqi, 26px); font-weight: 400; line-height: 1.1; color: var(--vb-muted);
    text-transform: none; letter-spacing: 0; transition: color .2s;
}
.vb--tabs .vb-tab sup {
    margin-left: 4px; font-family: var(--vb-sans, inherit); font-size: 10px; font-weight: 600; line-height: 1;
    letter-spacing: .05em; vertical-align: 8px; color: var(--vb-muted);
}
.vb--tabs .vb-tab::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vb-ink);
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--vb-ease);
}
.vb--tabs .vb-tab:hover, .vb--tabs .vb-tab[aria-selected="true"] { color: var(--vb-ink); background: none; }
.vb--tabs .vb-tab[aria-selected="true"]::after { transform: scaleX(1); }
.vb--tabs .vb-panel { animation: vb-in .45s var(--vb-ease); }
@keyframes vb-in { from { opacity: 0; transform: translateY(8px); } }
.vb--tabs .vb-strip { display: grid; grid-template-columns: repeat(var(--vb-cols, 5), minmax(0, 1fr)); gap: clamp(10px, 1.4cqi, 20px); }
.vb--tabs .vb-product { display: flex; flex-direction: column; gap: 4px; }
.vb--tabs .vb-product .vb-tile { margin-bottom: 10px; }
.vb--tabs .vb-pbrand { font-size: 10.5px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--vb-accent); }
.vb--tabs .vb-pname { font-family: var(--vb-serif, Georgia, serif); font-size: 18px; line-height: 1.25; }
.vb--tabs .vb-product:hover .vb-pname { color: var(--vb-accent); }
.vb--tabs .vb-ref { font-size: 11.5px; letter-spacing: .04em; color: var(--vb-muted); }
.vb--tabs .vb-price { font-size: 13px; color: var(--vb-ink-2); }
.vb--tabs .vb-allcard {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; aspect-ratio: 1;
    padding: 18px; text-align: center; border: 1px solid var(--vb-line); transition: border-color .25s, background .25s;
}
.vb--tabs .vb-allcard:hover { border-color: var(--vb-ink); background: var(--vb-accent-soft); }
.vb--tabs .vb-allcard-n { font-family: var(--vb-head, var(--vb-serif, Georgia, serif)); font-size: 46px; line-height: 1; color: var(--vb-accent); }
.vb--tabs .vb-allcard-t { font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; }
@container (max-width: 820px) {
    .vb--tabs .vb-strip {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto;
        scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 calc(var(--vb-gut) * -1); padding: 0 var(--vb-gut); scroll-padding: 0 var(--vb-gut);
    }
    .vb--tabs .vb-strip::-webkit-scrollbar { display: none; }
    .vb--tabs .vb-strip > li { scroll-snap-align: start; }
    .vb--tabs .vb-all .vb-btn { width: 100%; }
}
@container (max-width: 480px) { .vb--tabs .vb-strip { grid-auto-columns: 64%; } }

@media (prefers-reduced-motion: reduce) {
    .vb *, .vb *::after { transition: none !important; animation: none !important; }
}