/* Webthetic — restrained hero and benefit-card refinement */
:root { --ref-ease: cubic-bezier(.22,.75,.25,1); }
html { scroll-padding-top: 88px; }
:focus-visible { outline: 3px solid #95634c; outline-offset: 5px; }
/* Let the typography and actual devices do the work. No backing card. */
.hero {
  background: #faf8f5;
  padding: 164px 0 118px;
  isolation: isolate;
}
.hero:before {
  background-image: radial-gradient(rgba(91,70,57,.16) .8px,transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg,#000,transparent 58%);
  -webkit-mask-image: linear-gradient(90deg,#000,transparent 58%);
  opacity: .38;
}
.hero .aur { inset: 0; translate: none; }
.hero .aur i { display: none; animation: none; }
.hero .aur i:first-child {
  display: block; left: -220px; top: -270px; right: auto;
  width: 600px; height: 600px; filter: none;
  background: radial-gradient(circle,rgba(233,207,187,.45),transparent 68%);
  opacity: .6 !important;
}
.hero .spk { display: none; }
.hero .hg { grid-template-columns: 1fr 1.09fr; gap: 44px; }
.hero h1 { font-size: clamp(3.5rem,5.45vw,5.15rem); line-height: 1.06; letter-spacing: -.055em; }
.hero h1 .ac { color: #a66c51; background: none; animation: none; }
.hero .lead { color: #756b63; font-size: 1.05rem; line-height: 1.8; max-width: 28em; margin: 24px 0 30px; }
.hero .tg { font-size: .67rem; letter-spacing: .15em; color: #95634c; }
.hero .tg .st { animation: none; }
.hero .hb { gap: 12px; }
.hero .hb .b { font-size: .88rem; }
.hero .hb .b.g { padding-inline: 24px; background: transparent; border-color: #cfc5bb; }
.hero .stage.sA {
  aspect-ratio: 1.18; width: 100%; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  --device-x: 0px; --device-y: 0px;
}
.hero .stage.sA:before {
  left: 53%; top: 49%; width: 110%; height: 76%; aspect-ratio: auto;
  translate: -50% -50%; rotate: -25deg;
  border: 1px solid rgba(155,121,93,.22); border-radius: 50%;
  background: none; box-shadow: none; z-index: -1;
  mask-image: linear-gradient(110deg,#000 5%,transparent 35%,transparent 56%,#000 88%);
  -webkit-mask-image: linear-gradient(110deg,#000 5%,transparent 35%,transparent 56%,#000 88%);
}
.hero .stage.sA .stage-circle {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(235,205,185,.50) 0%, rgba(228,181,150,.22) 50%, transparent 72%);
  z-index: -1; pointer-events: none;
  filter: blur(18px);
}
.hero .stage.sA:after {
  content: ''; position: absolute; right: 6%; top: 7%;
  width: 23px; height: 23px; background: #b79174;
  clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  opacity: .65; pointer-events: none;
}
.hero .stage.sA .md1 {
  position: absolute; width: 96%; left: -4%; top: 11%; margin: 0;
  transform: translate3d(var(--device-x),var(--device-y),0) rotate(-3deg);
  transition: transform .75s var(--ref-ease);
  filter: drop-shadow(0 24px 21px rgba(57,42,30,.15));
}
.hero .stage.sA .mm1 {
  width: 25.5%; right: -1%; bottom: 1%;
  transform: translate3d(calc(var(--device-x) * -.65),calc(var(--device-y) * -.65),0) rotate(6deg);
  transition: transform .9s var(--ref-ease);
  filter: drop-shadow(0 20px 17px rgba(57,42,30,.19));
}
.hero .stage.is-visible .mm1 { animation: device-breathe 8s ease-in-out 2; }
@keyframes device-breathe { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
/* Individually framed cards, generous breathing room, consistent proportions. */
#vorteile { background: #f6f3ef; padding: 104px 0 112px; }
#vorteile .vh { display: block; margin-bottom: 44px; }
#vorteile .vh h2 { max-width: 16em; font-size: clamp(2.2rem,3.8vw,3.05rem); line-height: 1.13; }
#vorteile .vh h2 .ac { background: none; color: #a66c51; animation: none; }
#vorteile .tg .st { animation: none; }
#vorteile .g3 { gap: 18px; background: none; border: none; border-radius: 0; overflow: visible; }
#vorteile .vc {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; padding: 30px 28px 24px; border: 1px solid #e5ded6;
  border-radius: 22px; background: #fffdfa !important; background-image: none !important;
  box-shadow: 0 3px 5px rgba(51,35,24,.015);
  transition: opacity .7s var(--ref-ease), translate .7s var(--ref-ease),
    transform .35s var(--ref-ease), box-shadow .35s var(--ref-ease), border-color .35s;
  transition-delay: calc(var(--card-i,0) * 70ms),calc(var(--card-i,0) * 70ms),0s,0s,0s;
}
.benefit-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 27px; }
#vorteile .vc .ic {
  width: 52px; height: 52px; margin: 0; border-radius: 16px;
  background: #f3ebe3; border: 1px solid #ece0d5; color: #996b50;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85); rotate: 0deg;
}
#vorteile .vc .ic svg { width: 24px; height: 24px; transition: transform .4s var(--ref-ease); }
.benefit-no { color: #8c7d70; font-size: .62rem; font-weight: 600; letter-spacing: .09em; }
#vorteile .vc h3 { font-size: 1.35rem; line-height: 1.25; letter-spacing: -.035em; font-weight: 600; margin: 0 0 13px; }
#vorteile .vc p { color: #766d64; font-size: .93rem; line-height: 1.8; margin-bottom: 26px; }
.benefit-detail {
  display: flex; align-items: center; gap: 9px; min-height: 35px;
  padding-top: 17px; margin-top: auto; border-top: 1px solid #eee7e0;
  color: #8a796a; font-size: .7rem; line-height: 1.5;
}
.swatches { gap: 0; }
.swatches i { width: 15px; height: 15px; border-radius: 50%; background: #b3856e; border: 2px solid #fffdfa; transition: transform .4s var(--ref-ease); }
.swatches i+i { margin-left: -4px; background: #d7bda5; }
.swatches i:nth-child(3) { background: #eaded0; }
.swatches span { margin-left: 9px; }
.detail-dot { width: 6px; height: 6px; border-radius: 50%; background: #8a9b82; box-shadow: 0 0 0 3px #edf0e9; margin-inline: 3px; }
.device-outline { width: 9px; height: 14px; border: 1px solid #a28a75; border-radius: 3px; margin-inline: 2px; }
.detail-check { color: #8a9b82; font-size: 14px; line-height: 14px; }
.detail-pin { width: 10px; height: 12px; border: 1px solid #a28a75; border-radius: 7px 7px 7px 0; rotate: -45deg; margin-inline: 2px; }
@media(hover:hover) and (pointer:fine) {
  #vorteile .vc:hover { transform: translateY(-5px); border-color: #d7bdab; box-shadow: 0 15px 32px -20px rgba(82,54,32,.27); background: #fffdfa !important; }
  #vorteile .vc:hover .ic { rotate: 0deg; background: #ede0d3; color: #895b40; }
  #vorteile .vc:hover .ic svg { transform: translateY(-2px) rotate(-5deg); }
  #vorteile .vc:hover .swatches i:first-child { transform: translateX(-3px); }
  #vorteile .vc:hover .swatches i:nth-child(3) { transform: translateX(3px); }
}
/* REFERENZ — Snow Nails case-study, two-column layout */
.ref-section { padding: 110px 0 0; position: relative; z-index: 1; }
.ref-tg { color: #777 !important; margin-bottom: 28px; }
.ref-tg .st { color: #999; }
.ref-card {
  background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 32px;
  width: min(1320px,97%); margin: 0 auto; overflow: hidden;
}
.ref-case {
  display: grid; grid-template-columns: 1fr 1.2fr; min-height: 420px;
}
.ref-info {
  padding: 48px 40px 44px 52px;
  display: flex; flex-direction: column; justify-content: center;
}
.ref-brand {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 28px;
}
.ref-icon { width: 44px; height: 44px; object-fit: contain; }
.ref-logo { height: 26px; width: auto; }
.ref-h2 {
  font-size: clamp(1.4rem,2.2vw,1.75rem); line-height: 1.2;
  letter-spacing: -.03em; color: #1a1a1a; font-weight: 600;
  margin-bottom: 14px; max-width: 22em;
}
.ref-desc { color: #555; font-size: .93rem; line-height: 1.75; margin-bottom: 24px; max-width: 32em; }
.ref-checks { display: flex; flex-direction: column; gap: 12px; }
.ref-checks li {
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; font-weight: 500; color: #333;
}
.ref-checks svg { width: 18px; height: 18px; flex: none; color: #3BBDEE; }
.ref-devices {
  position: relative; overflow: hidden;
  background:
    radial-gradient(rgba(59,189,238,.08) 1px, transparent 1.3px),
    linear-gradient(160deg, #f2fafe 0%, #e8f6fc 100%);
  background-size: 22px 22px, 100% 100%;
  min-height: 380px;
}
.ref-devices .ex-d {
  position: absolute; left: 6%; top: 7%; width: 78%;
  translate: none;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
}
.ref-devices .ex-m {
  position: absolute; left: auto; right: 5%; bottom: 5%; width: 26%;
  translate: none;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.25));
  border-radius: 8px;
}
.ref-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 52px 26px; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,.06);
}
.ref-client { display: flex; flex-direction: column; gap: 2px; }
.ref-client b { font-size: .93rem; color: #1a1a1a; }
.ref-client .ref-meta { font-size: .82rem; color: #888; font-weight: 500; }
.ref-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ref-foot .live { border-color: #ddd; background: #f8f8f8; }
.ref-btn { --bgc: #1a1a1a !important; }
.ref-btn:before { background: #3BBDEE !important; }
.ref-btn:hover { border-color: #3BBDEE !important; }
@media (max-width: 860px) {
  .ref-card { border-radius: 24px; }
  .ref-case { grid-template-columns: 1fr; }
  .ref-info { padding: 32px 28px 28px; }
  .ref-devices { min-height: 340px; }
  .ref-devices .ex-d { left: 5%; top: 6%; width: 82%; }
  .ref-devices .ex-m { right: 4%; bottom: 4%; width: 28%; }
  .ref-foot { padding: 16px 28px 22px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ref-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 600px) {
  .ref-section { padding-top: 68px; }
  .ref-card { width: 100%; border-radius: 20px; }
  .ref-info { padding: 24px 20px 22px; }
  .ref-brand { gap: 12px; margin-bottom: 22px; }
  .ref-icon { width: 36px; height: 36px; }
  .ref-logo { height: 22px; }
  .ref-h2 { font-size: 1.3rem; }
  .ref-checks { gap: 10px; }
  .ref-checks li { font-size: .84rem; }
  .ref-devices { min-height: 280px; }
  .ref-devices .ex-d { left: 3%; top: 5%; width: 85%; }
  .ref-devices .ex-m { right: 3%; bottom: 3%; width: 30%; }
  .ref-foot { padding: 14px 20px 20px; }
}
/* Remove legacy cursor glow and unnecessary continuous decorative motion. */
.cg2 { display: none !important; }
.tick:hover .tk { animation-play-state: paused; }
.tg .st { animation: none; }
@media (min-width: 941px) and (max-width: 1100px) {
  .hero .hg { gap: 24px; }
  .hero h1 { font-size: 4rem; }
  .hero .hb .b { padding-left: 18px; font-size: .8rem; }
  .hero .hb .b.g { padding-inline: 17px; }
  .hero .tg { font-size: .6rem; }
}
@media (max-width: 940px) {
  .hero { min-height: auto; padding: 115px 0 66px; }
  .hero .hg { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .hero .hl { display: contents; }
  .hero .tg { order: 0; font-size: .64rem; }
  .hero h1 { order: 1; font-size: clamp(3rem,7.8vw,4.7rem); max-width: 10em; margin-top: 20px; }
  .hero .lead { order: 2; max-width: 35em; font-size: 1rem; margin: 20px 0 24px; }
  .hero .hb { order: 3; width: fit-content; flex-wrap: wrap; }
  .hero .hb .b { min-height: 52px; flex: initial; padding-inline: 22px; }
  .hero .hb .b:not(.g) { padding-right: 7px; }
  .hero .hb .ci { display: grid; width: 36px; height: 36px; }
  .hero .stage.sA { order: 4; width: min(590px,94%); margin: 30px auto 0; aspect-ratio: 1.4; }
  .hero .stage.sA .md1 { top: 3%; }
  .hero .stage.sA .mm1 { bottom: -2%; width: 24%; }
  .hero .stage.sA:after { top: 0; }
  #vorteile .vh { grid-template-columns: 1fr; gap: 0; max-width: 640px; }
  #vorteile .g3 { grid-template-columns: repeat(2,1fr); }
  #vorteile .vc { padding: 26px 24px 23px; }
}
@media (max-width: 600px) {
  #kontakt .kg > * { min-width: 0; }
  #kontakt h2, #kontakt p, footer a { overflow-wrap: anywhere; }
  .hero { padding: 105px 0 46px; }
  .hero .tg { font-size: .57rem; letter-spacing: .1em; gap: 7px; }
  .hero h1 { font-size: clamp(2.65rem,10.9vw,3.8rem); line-height: 1.07; margin-top: 16px; }
  .hero .lead { font-size: .94rem; line-height: 1.75; margin: 18px 0 22px; }
  .hero .hb { width: 100%; gap: 8px; flex-wrap: nowrap; }
  .hero .hb .b { flex: 1; font-size: .78rem; min-height: 49px; padding-inline: 12px; }
  .hero .hb .b:not(.g) { padding-right: 12px; }
  .hero .hb .b.g { padding-inline: 12px; }
  .hero .hb .ci { display: none; }
  .hero .stage.sA { width: 94%; margin-top: 32px; }
  .hero .stage.sA:after { width: 16px; height: 16px; }
  #vorteile { padding: 68px 0 72px; }
  #vorteile .vh { margin-bottom: 30px; }
  #vorteile .vh h2 { font-size: 2.2rem; }
  #vorteile .vh p { font-size: .94rem; }
  #vorteile .g3 { grid-template-columns: 1fr; gap: 14px; }
  #vorteile .vc { padding: 24px; border-radius: 20px; }
  .benefit-top { margin-bottom: 20px; }
  #vorteile .vc h3 { font-size: 1.3rem; }
  #vorteile .vc p { margin-bottom: 22px; }
  .tk { animation-duration: 52s; }
}
@media (max-width: 380px) {
  .ni { gap: 10px; }
  .nr { gap: 10px; }
  .nr .rf { font-size: .72rem; }
  .nr .b.nb { font-size: .74rem; padding-inline: 12px; }
  .logo img { height: 23px; }
  #kontakt .kg { grid-template-columns: minmax(0,1fr); }
  .cc, .calb { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv,.wd span,.tlc { opacity: 1 !important; translate: none !important; }
  .hero .stage.sA .mk { --device-x: 0px; --device-y: 0px; translate: none !important; }
  #vorteile .vc:hover { transform: none; }
}
/* Progressive fallback: the page remains readable with scripts disabled. */
@media print {
  .rv,.wd span,.tlc { opacity: 1; translate: none; }
  .nav,.bar,.fab,.cb { display: none !important; }
}