/* VARZANOVIC.AT / Phase 2: Startseite, Galerie und persönliches Statement */
/* Bestehende dunkle Hero-Fläche */
.vz-home {display:block;min-width:0;overflow:clip;}
.vz-home__hero {position:relative;min-height:100svh;padding:84px 18px 48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;}
.vz-home__stage {position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;width:min(92vw,1300px);height:min(80svh,790px);min-height:430px;border-radius:clamp(22px,2.8vw,34px);background:#101010;border:1px solid #292929;box-shadow:0 28px 60px rgba(0,0,0,.3);}
html[data-theme="dark"] .vz-home__stage {background:#111;box-shadow:0 28px 70px rgba(0,0,0,.55);}
.vz-home__stage::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 23% 42% at 50% 49%,rgba(248,188,41,.045),transparent 90%);}
.vz-home__art {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.65;}
.vz-home__identity {position:relative;z-index:1;text-align:center;padding:18px;}
.vz-home__identity h1,.vz-home__identity p {margin:0;}
.vz-home__identity h1 {color:#fff;font-size:clamp(22px,2.8vw,43px);line-height:1.09;letter-spacing:-.052em;font-weight:800;text-wrap:balance;}
.vz-home__identity p {margin-top:6px;color:#f8bc29;font-size:clamp(12px,1.5vw,20px);line-height:1.13;letter-spacing:.08em;font-weight:740;}
.vz-home__scroll {display:flex;align-items:center;gap:17px;text-decoration:none;color:var(--vz-muted);font-size:10px;font-weight:800;letter-spacing:.20em;transition:color .2s ease;}
.vz-home__scroll span:last-child {font-size:21px;color:var(--vz-gold);font-weight:400;line-height:1;}
.vz-home__scroll:hover {color:var(--vz-text);}

/* Monatliche Galerie: helles und dunkles Theme mit großem Ghost-Lettering */
.vz-gallery {position:relative;padding:94px 0 100px;overflow:hidden;isolation:isolate;border-top:1px solid var(--vz-line);background:var(--vz-bg);}
.vz-gallery__top {display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:3;}
.vz-gallery__month {color:var(--vz-muted);font-size:10px;font-weight:770;letter-spacing:.11em;text-transform:uppercase;text-align:right;}
.vz-gallery__month span {padding-inline:7px;color:var(--vz-gold);}
.vz-gallery__artboard {position:relative;isolation:isolate;max-width:1500px;margin:36px auto 0;}
.vz-gallery__ghost {position:absolute;left:50%;top:4px;z-index:-1;margin:0;color:var(--vz-text);opacity:.048;pointer-events:none;user-select:none;white-space:nowrap;text-align:center;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-stretch:condensed;font-size:clamp(170px,29vw,490px);font-weight:900;line-height:.94;letter-spacing:-.055em;transform:translateX(-50%) scaleX(.92);transform-origin:center top;}
html[data-theme="light"] .vz-gallery__ghost {opacity:.07;}
.vz-gallery__viewport {position:relative;z-index:1;height:535px;max-width:1300px;margin:0 auto;overflow:hidden;outline-offset:-5px;perspective:1000px;touch-action:pan-y;}
.vz-gallery__arc {position:absolute;left:3%;bottom:-4px;width:94%;height:350px;fill:none;stroke:var(--vz-line);stroke-width:1.3;pointer-events:none;opacity:.70;}
.vz-gallery__photo {position:absolute;top:66px;left:50%;width:clamp(195px,19vw,236px);aspect-ratio:4/5;padding:0;border:0;background:var(--vz-surface-raised);border-radius:5px;overflow:hidden;transform:translateX(calc(-50% + var(--vx, 0px))) translateY(var(--vy, 0px)) rotate(var(--vr, 0deg)) scale(var(--vs, 1));transform-origin:center center;opacity:var(--vo,0);filter:grayscale(var(--vgray,0)) brightness(var(--vbright,1));box-shadow:0 14px 32px rgba(0,0,0,.21);z-index:var(--vz,1);pointer-events:var(--vp,none);cursor:pointer;transition:transform .66s cubic-bezier(.18,.76,.19,1),opacity .5s ease,filter .5s ease,box-shadow .35s ease;will-change:transform,opacity;}
.vz-gallery__photo img {display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.vz-gallery__photo.is-active {outline:1px solid color-mix(in srgb,var(--vz-gold) 62%,transparent);outline-offset:4px;box-shadow:0 23px 50px rgba(0,0,0,.36);}
.vz-gallery__photo.is-active:hover {box-shadow:0 26px 65px rgba(0,0,0,.45);}
.vz-gallery__photo-index {position:absolute;bottom:10px;right:11px;font-size:9px;letter-spacing:.08em;color:#fff;background:rgba(0,0,0,.54);padding:5px 7px;border-radius:3px;}
.vz-gallery__empty {position:absolute;top:35%;left:50%;transform:translateX(-50%);width:80%;text-align:center;color:var(--vz-muted);}
.vz-gallery__spark {position:absolute;bottom:6px;left:50%;width:88px;height:63px;color:var(--vz-text);transform:translateX(-50%);pointer-events:none;opacity:.78;}
.vz-gallery__controls {display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-top:-1px;}
.vz-gallery__info {display:flex;flex-direction:column;gap:7px;min-width:0;}
.vz-gallery__counter {font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;color:var(--vz-text);letter-spacing:.06em;font-size:19px;}
.vz-gallery__current-title {color:var(--vz-muted);font-size:13px;line-height:1.4;min-height:19px;}
.vz-gallery__buttons {display:flex;align-items:center;gap:10px;}
.vz-gallery__arrow {display:flex;align-items:center;justify-content:center;width:56px;height:47px;border:1px solid var(--vz-line);border-radius:7px;background:var(--vz-surface);color:var(--vz-text);font-size:23px;line-height:1;transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;}
.vz-gallery__arrow:hover:not(:disabled) {background:var(--vz-gold);color:var(--vz-black);border-color:var(--vz-gold);transform:translateY(-2px);}
.vz-gallery__arrow:disabled {cursor:not-allowed;opacity:.35;}
.vz-gallery__hint {text-align:right;color:var(--vz-muted);font-size:9px;letter-spacing:.12em;font-weight:770;}
.vz-gallery__demo {margin-top:30px;margin-bottom:0;color:var(--vz-muted);font-size:11px;font-style:italic;}

/* Abschnitt 2 - Erklärung */
.vz-explain {padding-block:clamp(85px,10vw,160px);border-top:1px solid var(--vz-line);}
.vz-explain__eyebrow {display:flex;align-items:center;gap:34px;margin-bottom:48px;}
.vz-explain__rule {height:1px;flex:1;background:var(--vz-line);}
.vz-explain__grid {display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.82fr);align-items:start;gap:clamp(35px,7vw,125px);}
.vz-explain h2 {margin:0;color:var(--vz-text);font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(44px,5.5vw,89px);line-height:.99;letter-spacing:-.025em;font-weight:900;}
.vz-explain h2 span {color:var(--vz-gold);}
.vz-explain__body {padding-top:9px;}
.vz-explain__body p {font-size:clamp(16px,1.5vw,19px);line-height:1.74;color:var(--vz-muted);margin:0 0 19px;max-width:560px;}
.vz-explain__body strong {color:var(--vz-text);font-weight:720;}
.vz-explain__tag {display:inline-flex;align-items:center;gap:11px;margin-top:17px;font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--vz-text);}
.vz-explain__tag>span {width:8px;height:8px;background:var(--vz-gold);border-radius:50%;}

/* Abschnitt 3 - Gelbes Editorial-Statement */
.vz-why {background:var(--vz-gold);color:var(--vz-black);padding:clamp(75px,9vw,135px) 0 24px;position:relative;isolation:isolate;overflow:hidden;}
.vz-why::before {content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(16,16,16,.09) 1px,transparent 1px);background-size:calc(100% / 9) 100%;opacity:.28;pointer-events:none;}
.vz-why__eyebrow {font-size:10px;letter-spacing:.2em;font-weight:900;margin-bottom:clamp(42px,6vw,100px);}
.vz-why__layout {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.82fr);gap:clamp(38px,6vw,115px);align-items:end;}
.vz-why h2 {font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(60px,8.5vw,140px);font-weight:900;line-height:.94;letter-spacing:-.015em;margin:0;}
.vz-why h2 em {font-style:normal;white-space:nowrap;position:relative;}
.vz-why h2 em::after {content:"";position:absolute;left:0;right:0;bottom:2px;border-bottom:5px solid #101010;transform:rotate(-2deg);}
.vz-why__copy {max-width:580px;padding:0 0 7px;}
.vz-why__copy p {font-size:clamp(16px,1.48vw,19px);line-height:1.67;margin:0 0 23px;font-weight:520;}
.vz-why__copy a {text-decoration-thickness:2px;text-underline-offset:4px;font-weight:850;}
.vz-why__copy a:hover {text-decoration:none;}
.vz-why__bottom {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:clamp(88px,11vw,170px);padding-top:21px;border-top:1px solid rgba(16,16,16,.35);font-size:10px;letter-spacing:.12em;font-weight:850;}

/* Foto groß ansehen */
.vz-lightbox[hidden] {display:none !important;}
.vz-lightbox {position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:clamp(12px,3vw,40px);}
.vz-lightbox__backdrop {position:absolute;inset:0;border:0;background:rgba(0,0,0,.89);backdrop-filter:blur(12px);cursor:zoom-out;}
.vz-lightbox__panel {position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:min(86vw,650px);max-height:90svh;}
.vz-lightbox__panel img {display:block;width:100%;min-height:0;max-height:calc(90svh - 46px);object-fit:contain;border-radius:4px;}
.vz-lightbox__close {position:absolute;top:8px;right:8px;display:grid;place-items:center;width:39px;height:39px;border:0;border-radius:5px;background:var(--vz-gold);color:var(--vz-black);font-size:30px;line-height:1;}
.vz-lightbox__bottom {display:flex;justify-content:space-between;gap:12px;color:#fff;font-size:12px;}
body.vz-lightbox-open {overflow:hidden;}

@media(max-width:900px) {
 .vz-home__hero {padding:75px 12px 38px;}
 .vz-home__stage {width:100%;height:calc(100svh - 135px);min-height:340px;border-radius:24px;}
 .vz-home__identity {max-width:340px;}
 .vz-home__identity h1 {font-size:clamp(24px,7vw,32px);}
 .vz-home__identity p {font-size:14px;}
 .vz-gallery {padding:75px 0 80px;}
 .vz-gallery__ghost {font-size:clamp(134px,33vw,290px);top:35px;}
 .vz-gallery__viewport {height:460px;}
 .vz-gallery__photo {top:62px;width:clamp(160px,24vw,218px);}
 .vz-gallery__arc {height:285px;bottom:13px;}
 .vz-gallery__spark {bottom:2px;}
 .vz-explain__grid, .vz-why__layout {grid-template-columns:1fr;gap:28px;}
 .vz-explain h2 {font-size:clamp(52px,10vw,83px);}
 .vz-why h2 {font-size:clamp(65px,13vw,130px);}
 .vz-why__copy {max-width:720px;}
}
@media(max-width:600px) {
 .vz-home__stage {height:calc(100svh - 130px);}
 .vz-home__scroll {font-size:9px;}
 .vz-gallery {padding:58px 0 74px;}
 .vz-gallery__top {align-items:flex-start;flex-direction:column;gap:8px;}
 .vz-gallery__month {text-align:left;font-size:9px;}
 .vz-gallery__artboard {margin-top:28px;}
 .vz-gallery__ghost {top:40px;font-size:43vw;letter-spacing:-.06em;}
 .vz-gallery__viewport {height:383px;}
 .vz-gallery__photo {top:68px;width:clamp(164px,49vw,202px);}
 .vz-gallery__arc {height:230px;bottom:18px;width:140%;left:-20%;}
 .vz-gallery__spark {width:62px;height:50px;bottom:2px;}
 .vz-gallery__controls {grid-template-columns:1fr auto;gap:9px;}
 .vz-gallery__hint {display:none;}
 .vz-gallery__counter {font-size:16px;}
 .vz-gallery__current-title {font-size:12px;}
 .vz-gallery__arrow {height:42px;width:47px;font-size:19px;}
 .vz-gallery__demo {margin-top:20px;font-size:10px;line-height:1.5;}
 .vz-explain {padding-block:78px 90px;}
 .vz-explain__eyebrow {margin-bottom:34px;}
 .vz-explain h2 {font-size:clamp(45px,11vw,65px);}
 .vz-explain__body p,.vz-why__copy p {font-size:16px;line-height:1.65;}
 .vz-explain__tag {font-size:9px;letter-spacing:.04em;}
 .vz-why {padding-top:72px;}
 .vz-why__eyebrow {margin-bottom:36px;}
 .vz-why h2 {font-size:clamp(51px,13vw,78px);line-height:.97;}
 .vz-why__bottom {flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:8px;line-height:1.5;margin-top:68px;}
 .vz-why__bottom span:nth-child(2) {order:3;width:100%;}
 .vz-lightbox__panel {width:95vw;}
}
@media(prefers-reduced-motion:reduce) {.vz-gallery__photo {transition:none;}}
