/* Auswahlseite für die Kundenpräsentation */
@font-face {
	font-family: "Inter Tight";
	src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900; font-style: normal; font-display: swap;
}
:root { color-scheme: dark; --gutter: clamp(16px, 4vw, 56px); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #000; color: #fff; font-family: "Inter Tight", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
.vtv-pick { min-height: 100vh; min-height: 100dvh; padding: clamp(28px, 5vw, 64px) var(--gutter); display: flex; flex-direction: column; gap: clamp(32px, 5vw, 72px); }
.vtv-pick-head { margin: 0; }
.vtv-pick-logo { display: block; width: 100%; height: auto; fill: currentColor; }
.vtv-pick-intro { font-size: 1.0625rem; line-height: 1.55; color: #C9C9C9; max-width: 54ch; }
.vtv-pick-list { border-top: 1px solid #333; }
.vtv-pick-item { border-bottom: 1px solid #333; }
.vtv-pick-link { display: grid; grid-template-columns: 5rem 1fr minmax(0, 260px); gap: 24px; align-items: center; padding: 26px 0; text-decoration: none; }
.vtv-pick-letter { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #8A8A8A; transition: color .25s ease; }
.vtv-pick-text { display: flex; flex-direction: column; gap: 6px; }
.vtv-pick-name { font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.vtv-pick-desc { font-size: 1rem; line-height: 1.5; color: #C9C9C9; max-width: 56ch; }
.vtv-pick-thumb { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; opacity: .85; transition: opacity .25s ease; }
.vtv-pick-link:hover .vtv-pick-letter { color: #fff; }
.vtv-pick-link:hover .vtv-pick-name { transform: translateX(10px); }
.vtv-pick-link:hover .vtv-pick-thumb { opacity: 1; }
.vtv-pick-link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.vtv-pick-foot { margin-top: auto; font-size: .875rem; color: #8A8A8A; }
@media (max-width: 767px) {
	.vtv-pick-link { grid-template-columns: 3rem 1fr; }
	.vtv-pick-thumb { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }