body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--text-body-m);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:4px}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 40px}
.label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:var(--radius-pill);font:var(--text-body-m);font-weight:500;border:1.5px solid transparent;cursor:pointer;transition:all .25s ease-out}
.btn-p{background:var(--accent);color:var(--text-inverse)} .btn-p:hover{background:var(--accent-hover);color:var(--text-inverse);text-decoration:none}
.btn-s{border-color:var(--tinte);color:var(--text-body)} .btn-s:hover{background:var(--tinte);color:var(--text-inverse);text-decoration:none}
.art{width:100%;aspect-ratio:3/4;object-fit:cover;box-shadow:var(--shadow-card);border-radius:var(--radius-img);transition:box-shadow .5s ease-out,transform .5s ease-out;display:block}
.card{display:grid;gap:12px;color:var(--text-body)} .card:hover{text-decoration:none;color:var(--text-body)}
.card:hover .art{box-shadow:var(--shadow-lift);transform:translateY(-4px) scale(1.012)}
.badge{font:var(--text-body-s);font-weight:500;padding:4px 12px;border-radius:999px;white-space:nowrap}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px}
body.salon .gallery-grid{grid-template-columns:repeat(2,1fr);gap:64px 56px}
body.meditativ .hand-note{display:none}
.hand-note{font:var(--text-hand);color:var(--accent);animation:floaty 5s ease-in-out infinite}
.hand-note.on-photo{background:color-mix(in srgb, var(--leinwand) 93%, transparent);padding:3px 14px;border-radius:999px;box-shadow:var(--shadow-card);animation:none}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -6px}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease-out,transform .8s ease-out}
.reveal.in{opacity:1;transform:none}
.hero-img{animation:heroIn 1.4s ease-out both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.hero-title span{display:inline-block;animation:lineUp .9s ease-out both}
@keyframes lineUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mosaic img{transition:transform .5s ease-out}
.mosaic figure:hover img{transform:scale(1.02)}
nav.site{position:sticky;top:0;background:color-mix(in srgb, var(--wand) 92%, transparent);backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid var(--border-soft)}
nav.site .nav-item.active{color:var(--accent)}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}.hand-note,.hero-img,.hero-title span{animation:none}}
@media (max-width:1024px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .wrap{padding:0 20px}
  .cols{grid-template-columns:1fr !important;gap:40px !important}
  .nav-links a.nav-item{display:none}
  .mosaic{grid-template-columns:1fr 1fr !important}
}
@media (max-width:560px){.gallery-grid,body.salon .gallery-grid{grid-template-columns:1fr}.mosaic{grid-template-columns:1fr !important}}