@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-black-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-black-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat Brush';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caveat-brush-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat Brush';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caveat-brush-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ==========================================================================
   Denise Stadtegger – Website (DeSta. CD)
   Magenta #DA0090 · Nacht #130E15 · Rosa #FFBAD9/#FFCDE6 · Orange #FF8F49 · Papier #FBF9FC
   ========================================================================== */

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#fbf9fc;color:#1a1320;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%}
a{color:#da0090}a:hover{color:#a8006f}
button{font:inherit}
:focus-visible{outline:3px solid #da0090;outline-offset:3px;border-radius:6px}
::selection{background:#da0090;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;background:#130e15;color:#fff;padding:12px 18px;border-radius:999px;font-weight:800;text-decoration:none;transition:top .2s}
.skip-link:focus{top:16px;color:#fff}

/* ---------- Layout aus dem Entwurf ---------- */
.wrap{max-width:1240px;margin:0 auto;padding-left:48px;padding-right:48px;box-sizing:border-box}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.nav-links{display:flex;gap:36px;align-items:center}
.outline-word{-webkit-text-stroke:2px rgba(255,255,255,.35);color:transparent}
.ls-track{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ls-track::-webkit-scrollbar{display:none}
.ls-card{flex:0 0 calc((100% - 40px) / 3)}

/* Desktop- und Mobil-Layout (aus den freigegebenen Entwürfen) */
.v-mob{display:none !important}
@media (max-width:1023px){
  .v-desk{display:none !important}
  .v-mob{display:flex !important}
}
.v-desk>header{position:sticky;top:0;z-index:60;transition:box-shadow .35s ease,background-color .35s ease,backdrop-filter .35s ease}
.v-mob>header{position:sticky !important;top:0;z-index:60;transition:box-shadow .35s ease}
.is-scrolled .v-desk>header,.is-scrolled .v-mob>header{background:rgba(255,255,255,.86) !important;-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 10px 30px rgba(19,14,21,.08)}

/* Tablet: Mobil-Layout zentriert, nicht auf volle Breite gezogen */
@media (min-width:640px) and (max-width:1023px){
  .v-mob>section,.v-mob>footer{padding-left:max(20px,calc((100% - 600px) / 2)) !important;padding-right:max(20px,calc((100% - 600px) / 2)) !important}
  .v-mob>header{padding-left:max(20px,calc((100% - 640px) / 2)) !important;padding-right:max(14px,calc((100% - 640px) / 2)) !important}
}

/* Kleinere Laptops: Headlines etwas kleiner, damit nichts ins Foto läuft */
@media (min-width:1024px) and (max-width:1279px){
  .v-desk .h1{font-size:62px !important}
  .v-desk h2{font-size:min(52px,4.4vw) !important}
  .v-desk .nav-links{gap:24px}
}


/* ---------- Kontaktformular ---------- */
.cform{background:#ffffff;border-radius:22px;box-shadow:0 18px 40px rgba(19,14,21,.10);border:1.5px solid #f0e6ee;display:flex;flex-direction:column;gap:16px;color:#130e15}
.cform-head{display:flex;flex-direction:column;gap:4px}
.cform-body{display:flex;flex-direction:column;gap:16px;min-width:0}
.cform-wide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px;align-items:start;border-radius:28px;box-shadow:0 24px 60px rgba(19,14,21,.10)}
.cform-wide .cform-head{gap:12px;padding-top:4px}
.cform-wide .cform-script{font-size:36px}
.cform-title{font-family:'Archivo Black',sans-serif;font-size:40px;line-height:1.02;letter-spacing:-.02em;color:#130e15}
.cform-wide .cform-sub{font-size:16px}
.cform-wide .cform-note{margin-top:8px;max-width:340px}
.cform-wide textarea{min-height:150px}
.cform-script{font-family:'Caveat Brush',cursive;font-size:30px;line-height:1;color:#da0090}
.cform-sub{font-size:14px;line-height:1.5;font-weight:500;color:#6b6470}
.cform-row{display:flex;flex-direction:column;gap:16px}
.cform-row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cform-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cform-field>span{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#130e15}
.cform input,.cform textarea{font:500 16px Inter,system-ui,sans-serif;color:#130e15;background:#fbf9fc;border:1.5px solid #e2dce6;border-radius:14px;padding:13px 15px;width:100%;transition:border-color .2s,box-shadow .2s,background-color .2s}
.cform textarea{resize:vertical;min-height:130px;line-height:1.55}
.cform input:hover,.cform textarea:hover{border-color:#ffbad9}
.cform input:focus,.cform textarea:focus{outline:none;border-color:#da0090;background:#fff;box-shadow:0 0 0 4px rgba(218,0,144,.14)}
.cform .is-invalid{border-color:#ff8f49 !important;box-shadow:0 0 0 4px rgba(255,143,73,.18) !important}
.cform-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.cform-foot{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cform-btn{display:inline-flex;align-items:center;gap:10px;background:#da0090;color:#fff;border:0;cursor:pointer;font:800 16px Inter,system-ui,sans-serif;padding:16px 26px;border-radius:999px}
.cform-btn:hover{background:#a8006f}
.cform-btn[disabled]{opacity:.6;cursor:progress}
.cform-note{margin:0;font-size:12.5px;line-height:1.5;font-weight:500;color:#6b6470}
.cform-note a{color:#da0090;font-weight:700}
.cform-status{margin:0;font-size:15px;line-height:1.5;font-weight:700}
.cform-status:empty{display:none}
.cform-status.is-ok{color:#130e15;background:#ffcde6;border-radius:14px;padding:14px 16px}
.cform-status.is-err{color:#130e15;background:#ffe3d1;border-radius:14px;padding:14px 16px}
.cform.is-sent .cform-row,.cform.is-sent .cform-field,.cform.is-sent .cform-foot{display:none}

/* ---------- Instagram: vorbereitet, bis der Account feststeht ausgeblendet ---------- */
.no-ig a[href="#instagram"]{display:none !important}

/* ---------- Scroll-Fortschritt ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#da0090,#e2307c 60%,#ff8f49);pointer-events:none}

/* ---------- Buttons: Glanz, Pfeil-Nudge, Magnet ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background-color .25s ease,color .25s ease;will-change:transform}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%)}
.btn:hover{box-shadow:0 14px 30px rgba(218,0,144,.28)}
.btn svg,.arrow-nudge svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover svg,a:hover>svg:last-child,a:hover .arrow-ico{transform:translate(3px,-3px)}
.pill-btn:hover{background:#a8006f !important;color:#fff !important}
.ghost-btn:hover{background:rgba(255,255,255,.08) !important}
.icon-btn{transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .25s,color .25s,border-color .25s}
.icon-btn:hover{transform:translateY(-3px) rotate(-6deg);background:#da0090 !important;color:#fff !important;border-color:#da0090 !important}

/* Navigation: Unterstrich zeichnet sich */
.nav-links a{position:relative;padding-bottom:4px}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#da0090;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]::after{display:none}
footer a{transition:color .2s ease}
footer a:hover{color:#ffbad9 !important}

/* Karten: 3D-Tilt mit Lichtreflex (per JS), sanftes Anheben */
.tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;transform-style:preserve-3d;will-change:transform;position:relative}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%);opacity:0;transition:opacity .4s ease;z-index:1}
.tilt:hover::before{opacity:1}
.tilt.is-tilting{transition:transform .12s linear,box-shadow .5s ease;box-shadow:0 26px 50px rgba(19,14,21,.22) !important}

/* Fotos: leichter Zoom + Farbe beim Hover */
.photo-hover{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.photo-hover:hover{transform:scale(1.025);filter:saturate(1.12)}
.pin-card{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
.pin-card:hover{transform:rotate(0deg) scale(1.03) !important;box-shadow:0 30px 60px rgba(19,14,21,.3) !important}

/* Sticker wackeln beim Hover */
.sticker{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.sticker:hover{transform:rotate(0deg) scale(1.08) !important}

/* ---------- Bilder im Wechsel (Crossfade + Ken Burns) ---------- */
.slide{transition:opacity 1.4s ease,transform 7s ease-out !important;transform:scale(1.08)}
.slide.is-on{transform:scale(1)}

/* ---------- Laufband ---------- */
.marquee{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.spin-star{animation:spin 9s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Schwebendes Badge ---------- */
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ---------- FAQ: weiches Auf- und Zuklappen ---------- */
.faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
.faq-a>.faq-a-in{overflow:hidden;min-height:0}
.faq-open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.faq-ico{transition:transform .4s cubic-bezier(.2,.8,.2,1),background-color .3s,color .3s}
.faq-open .faq-ico{transform:rotate(180deg)}
.faq-item{transition:box-shadow .3s ease,border-color .3s ease}
.faq-item:hover{box-shadow:0 12px 28px rgba(19,14,21,.08);border-color:#ffcde6 !important}

/* ---------- Swipe-Karten: Ziehen mit der Maus ---------- */
.ls-track{cursor:grab}
.ls-track.is-dragging{cursor:grabbing;scroll-snap-type:none !important}
.ls-track.is-dragging a{pointer-events:none}

/* ---------- Scroll-Reveal (nur mit JS, sonst ist alles sichtbar) ---------- */
.js .rv{opacity:0;translate:0 34px;filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1),filter .9s ease;transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;translate:0 0;filter:none}
.js .rv-img{opacity:0;scale:1.06;transition:opacity 1.1s ease,scale 1.4s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.js .rv-img.in{opacity:1;scale:1}

/* Hero-Headline: Wort für Wort */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;translate:0 110%;transition:translate 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.hero-in .w>span{translate:0 0}

/* Große Outline-Zahlen: Parallax per JS */
.parallax{will-change:transform}

/* ---------- Cursor-Begleiter (nur Maus) ---------- */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid #da0090;border-radius:999px;pointer-events:none;z-index:150;opacity:0;transition:width .3s,height .3s,margin .3s,background-color .3s,opacity .3s,border-color .3s;mix-blend-mode:multiply}
.cursor.is-on{opacity:.9}
.cursor.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(218,0,144,.12);border-color:rgba(218,0,144,.5)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- Mobiles Menü ---------- */
.mnav{position:fixed;inset:0;z-index:100;background:#130e15;color:#fff;display:flex;flex-direction:column;padding:20px 24px 36px;visibility:hidden;opacity:0;clip-path:circle(0 at calc(100% - 40px) 32px);transition:clip-path .7s cubic-bezier(.7,0,.2,1),opacity .3s ease,visibility 0s linear .7s}
.mnav.is-open{visibility:visible;opacity:1;clip-path:circle(150% at calc(100% - 40px) 32px);transition:clip-path .7s cubic-bezier(.7,0,.2,1),opacity .2s ease,visibility 0s}
.mnav-top{display:flex;justify-content:space-between;align-items:center;height:44px}
.mnav-close{width:44px;height:44px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mnav-links{display:flex;flex-direction:column;gap:6px;margin-top:48px}
.mnav-links a{font-family:'Archivo Black',sans-serif;font-size:44px;line-height:1.1;color:#fff;text-decoration:none;letter-spacing:-.02em;opacity:0;translate:0 24px;transition:opacity .5s ease,translate .6s cubic-bezier(.2,.8,.2,1),color .2s}
.mnav-links a:hover,.mnav-links a[aria-current="page"]{color:#da0090}
.mnav.is-open .mnav-links a{opacity:1;translate:0 0}
.mnav.is-open .mnav-links a:nth-child(1){transition-delay:.18s}.mnav.is-open .mnav-links a:nth-child(2){transition-delay:.24s}.mnav.is-open .mnav-links a:nth-child(3){transition-delay:.30s}.mnav.is-open .mnav-links a:nth-child(4){transition-delay:.36s}
.mnav-cta{margin-top:auto;display:flex;flex-direction:column;gap:18px}
.mnav-script{font-family:'Caveat Brush',cursive;font-size:28px;color:#ff8f49}
.mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mnav-row a{color:#fff}
.menu-lock{overflow:hidden}

/* ---------- Seitenwechsel: View Transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(0,0,.2,1) both}
@keyframes vt-out{to{opacity:0;translate:0 -12px}}
@keyframes vt-in{from{opacity:0;translate:0 18px}}

/* ---------- Druck ---------- */
@media print{.v-mob{display:none !important}.v-desk{display:block !important}.progress,.cursor,.mnav,.desta-consent{display:none !important}}

/* ---------- Weniger Bewegung gewünscht ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0ms !important}
  .js .rv,.js .rv-img,.w>span{opacity:1 !important;translate:none !important;scale:none !important;filter:none !important}
  .marquee{animation:none}
  .cursor{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}