/* ==========================================================================
   vladmazur.de — design system
   Editorial cream/navy theme. Color tokens live inline on #top so the whole
   palette can be swapped in one place. This file holds resets, keyframes,
   component hover states (converted from the design export's inline hovers),
   responsive rules and motion preferences.
   ========================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}
a{color:inherit;}
img{display:block;max-width:100%;}
::selection{background:#181E33;color:#F0ECE2;}

.vm-skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.vm-skip:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:200;padding:.7rem 1.1rem;background:var(--ink);color:var(--cream);border-radius:8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* film grain overlay */
#vm-grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* hero portrait */
#hero-portrait{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:660px;object-fit:cover;border-radius:4px;}

/* ---- keyframes ---- */
@keyframes vmAurora{0%{transform:translate3d(0,0,0) scale(1);}33%{transform:translate3d(-4%,3%,0) scale(1.08);}66%{transform:translate3d(3%,-2%,0) scale(1.04);}100%{transform:translate3d(0,0,0) scale(1);}}
@keyframes vmAurora2{0%{transform:translate3d(0,0,0) scale(1.05);}50%{transform:translate3d(5%,4%,0) scale(1.12);}100%{transform:translate3d(0,0,0) scale(1.05);}}
@keyframes vmMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes vmDot{0%,100%{opacity:.35;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);}50%{opacity:1;box-shadow:0 0 0 5px transparent;}}
@keyframes vmFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes vmBlink{0%,48%{opacity:1;}49%,100%{opacity:0;}}

header nav a{white-space:nowrap;}
#vm-marquee *{white-space:nowrap;}

/* ---- hover states (were `style-hover` in the export) ----
   The export keeps base styles INLINE, so :hover end-states need !important
   to win over inline color/background/border/box-shadow. Transitions live on
   the base class (not inline) so enter + leave both animate. */
.vm-logo{transition:opacity .25s ease;}
.vm-logo:hover{opacity:.72;}

.vm-navlink{transition:color .2s;}
.vm-navlink:hover{color:var(--accent) !important;}

.vm-nav-cta{transition:border-color .25s,background .25s,color .25s;}
.vm-nav-cta:hover{border-color:var(--ink) !important;background:var(--ink) !important;color:var(--cream) !important;}

.vm-btn-primary{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s,border-color .3s;}
.vm-btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -18px rgba(24,30,51,.6);background:var(--accent) !important;border-color:var(--accent) !important;}

.vm-btn-ghost{transition:border-color .25s,background .25s,transform .3s;}
.vm-btn-ghost:hover{border-color:var(--ink) !important;background:var(--paper) !important;transform:translateY(-3px);}

.vm-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;}
.vm-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(24,30,51,.45);border-color:color-mix(in srgb,var(--accent) 45%,var(--line)) !important;}

.vm-proj{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;}
.vm-proj:hover{transform:translateY(-6px);box-shadow:0 30px 56px -30px rgba(24,30,51,.5);border-color:color-mix(in srgb,var(--accent) 50%,var(--line)) !important;}
.vm-proj .vm-arrow{transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.vm-proj:hover .vm-arrow{transform:translate(4px,-4px) !important;}
.vm-proj .vm-name{transition:color .3s ease;}
.vm-proj:hover .vm-name{color:var(--accent) !important;}
.vm-proj .vm-bar{transition:width .45s cubic-bezier(.2,.7,.2,1);}
.vm-proj:hover .vm-bar{width:100% !important;}

.vm-cert{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.vm-cert:hover{transform:translateY(-5px);box-shadow:0 28px 52px -28px rgba(24,30,51,.55) !important;}

.vm-contact{transition:background .3s,border-color .3s,transform .3s;}
.vm-contact:hover{background:rgba(255,255,255,.07) !important;border-color:rgba(239,233,220,.3) !important;transform:translateY(-3px);}

.vm-btn-accent{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,filter .3s;}
.vm-btn-accent:hover{transform:translateY(-3px);box-shadow:0 22px 44px -18px color-mix(in srgb,var(--accent) 85%,transparent);filter:brightness(1.08);}

.vm-foot-link{transition:color .2s;}
.vm-foot-link:hover{color:#fff !important;}
.vm-foot-legal{transition:color .2s;}
.vm-foot-legal:hover{color:rgba(239,233,220,.85) !important;}

/* ---- layout grids ---- */
.vm-cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.6rem;}
@media(min-width:980px){.vm-cert-grid{grid-template-columns:repeat(4,1fr);gap:1.6rem 2rem;}}
.vm-cert{width:100%;max-width:270px;margin-inline:auto;}

/* ---- responsive ---- */
.vm-mobile-cta{display:none;}
@media(max-width:760px){
  .vm-nav-links{display:none !important;}
  .vm-hero-est{display:none !important;}
  .vm-mobile-cta{display:flex !important;}
}

/* ---- motion preferences ---- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;}
  #vm-marquee{animation:none !important;}
}

/* ---- section grids: deterministic columns (override inline auto-fit) ---- */
.vm-grid-svc{grid-template-columns:1fr !important;}
@media(min-width:560px){.vm-grid-svc{grid-template-columns:repeat(2,1fr) !important;}}
@media(min-width:920px){.vm-grid-svc{grid-template-columns:repeat(3,1fr) !important;}}

.vm-grid-proj{grid-template-columns:1fr !important;}
@media(min-width:600px){.vm-grid-proj{grid-template-columns:repeat(2,1fr) !important;}}
@media(min-width:1080px){.vm-grid-proj{grid-template-columns:repeat(4,1fr) !important;}}

/* ---- hero portrait corner brackets: keep on-screen on mobile ---- */
@media(max-width:760px){
  #vm-portrait{max-width:88%;margin-inline:auto;}
  .vm-corner-tl{top:-.6rem !important;left:-.6rem !important;}
  .vm-corner-br{bottom:-.6rem !important;right:-.6rem !important;}
}

/* ==========================================================================
   (05) Kundenstimmen — editorial testimonial slider
   Native scroll-snap deck; JS adds .is-ready (active emphasis + dots/arrows).
   Without JS it degrades to a plain horizontal scroller, all cards equal.
   ========================================================================== */
.vm-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.vm-sl-head{margin-top:2.4rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap;}
.vm-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;font-weight:500;color:var(--ink-soft);}
.vm-trust li{display:inline-flex;align-items:center;gap:.55rem;}
.vm-trust li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);}

.vm-sl-ctrl{display:flex;align-items:center;gap:1rem;flex:none;}
.vm-sl-count{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums;}
.vm-sl-count [data-sl-cur]{color:var(--ink);}
.vm-sl-arrows{display:flex;gap:.55rem;}
.vm-sl-arrow{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:100px;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .25s,background .25s,color .25s,transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s;}
.vm-sl-arrow:hover{border-color:var(--ink);background:var(--ink);color:var(--cream);transform:translateY(-2px);}
.vm-sl-arrow:disabled{opacity:.32;cursor:default;pointer-events:none;}

.vm-sl-stage{margin-top:1.8rem;position:relative;min-width:0;}
.vm-sl-track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.5rem .5rem 1.5rem;margin:-.5rem -.5rem 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;}
.vm-sl-track::-webkit-scrollbar{display:none;}
.vm-sl-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:16px;}
.vm-sl-track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.vm-sl-track.is-dragging *{pointer-events:none;}
@media(min-width:1024px){.vm-sl-track{padding-right:14%;}}

.vm-sl-card{scroll-snap-align:start;flex:0 0 auto;width:clamp(360px,40vw,460px);margin:0;display:flex;flex-direction:column;padding:2.2rem;background:var(--paper);border:1px solid var(--line);border-radius:16px;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s;}
@media(max-width:1023px){.vm-sl-card{width:min(80vw,460px);}}
@media(max-width:599px){.vm-sl-card{width:86vw;padding:1.9rem;}}
.vm-sl-track.is-ready .vm-sl-card{opacity:.5;transform:scale(.97);}
.vm-sl-track.is-ready .vm-sl-card.is-active{opacity:1;transform:scale(1);box-shadow:0 26px 50px -30px rgba(24,30,51,.45);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.vm-sl-mark{font-family:'Newsreader',serif;font-style:italic;font-size:3rem;line-height:.5;color:var(--accent);}
.vm-sl-card blockquote{margin:1rem 0 0;font-size:1.05rem;line-height:1.65;color:var(--ink-soft);flex:1;}
.vm-sl-track.is-ready .vm-sl-card.is-active blockquote{font-size:1.16rem;line-height:1.6;color:var(--ink);}
.vm-sl-card figcaption{margin-top:1.6rem;display:flex;align-items:center;gap:.8rem;}
.vm-sl-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;}
.vm-sl-name{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.95rem;color:var(--ink);}
.vm-sl-role{display:block;font-size:.82rem;color:var(--muted);}

.vm-sl-dots{display:flex;align-items:center;gap:.5rem;margin-top:.2rem;}
.vm-sl-dot{appearance:none;-webkit-appearance:none;border:0;padding:0;cursor:pointer;width:9px;height:9px;border-radius:100px;background:var(--line-strong);transition:width .45s cubic-bezier(.2,.7,.2,1),background .3s;}
.vm-sl-dot[aria-selected="true"]{width:26px;background:var(--accent);}
.vm-sl-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media(max-width:600px){.vm-sl-head{align-items:flex-start;}.vm-sl-arrow{width:42px;height:42px;}}

@media (prefers-reduced-motion: reduce){
  .vm-sl-track{scroll-behavior:auto;}
  .vm-sl-card{transition:none;}
  .vm-sl-dot,.vm-sl-arrow{transition:none;}
}