/* Finest Dental v215: Startseite nach Referenzbild. Masse in vw entsprechen der Vorlage (1670 x 941). */
@font-face{font-family:"FD Serif";src:url("/assets/fonts/fd-serif.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FD Serif";src:url("/assets/fonts/fd-serif-bolditalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"FD Inter";src:url("/assets/fonts/inter-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FD Inter";src:url("/assets/fonts/inter-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --grund:#fefafa;          /* cremeweisser Grund der Vorlage */
  --schrift:#22303c;
  --magenta:#FE2271;        /* Marke */
  --magenta-klein:#e3125f;  /* kleine Schrift */
  --f-display:"FD Serif",Georgia,"Times New Roman",serif;
  --f-text:"FD Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--schrift);font-family:var(--f-text);-webkit-font-smoothing:antialiased}
h1,p{margin:0}
:focus-visible{outline:3px solid var(--schrift);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:5;background:var(--schrift);color:#fff;padding:.6rem 1rem}
.skip:focus{top:1rem}

/* Buehne: das Bild fuellt die Breite, bleibt im Verhaeltnis der Vorlage und sitzt mittig. */
.stage{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.art{position:absolute;left:0;top:50%;width:100vw;aspect-ratio:1670/941;transform:translateY(-50%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.art picture img,.art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Die Nadel liegt als eigenes Bild ueber dem Kompass und dreht sich um die Nabe. */
.needle{position:absolute;left:68.2635%;top:21.7853%;width:5.7485%;height:auto;display:block;transform-origin:49.4792% 47.8947%;animation:einpendeln 4.2s .35s cubic-bezier(.3,.6,.3,1) both,ruhe 9s 4.6s ease-in-out infinite alternate;will-change:transform}
@keyframes einpendeln{0%{transform:rotate(-64deg)}30%{transform:rotate(15deg)}52%{transform:rotate(-8deg)}70%{transform:rotate(4deg)}85%{transform:rotate(-1.6deg)}100%{transform:rotate(0)}}
@keyframes ruhe{0%{transform:rotate(0)}50%{transform:rotate(1.4deg)}100%{transform:rotate(-1.1deg)}}
.art canvas{opacity:0;transition:opacity 1.2s ease}
.art.live canvas{opacity:1}

/* Alles Weitere sitzt an denselben Stellen wie in der Vorlage. */
.frame,.logo,.copy{position:absolute}
.logo{left:5.4vw;top:calc(50% - 28.17vw + 2.25vw);width:10.3vw;z-index:2}
.logo img{display:block;width:100%;height:auto}
.copy{left:7.6vw;top:calc(50% - 28.17vw + 11.75vw);z-index:2;width:46vw}
.eyebrow{font-size:max(.75rem,1.005vw);line-height:1.2;font-weight:700;letter-spacing:.215em;text-transform:uppercase;color:var(--magenta-klein)}
h1{margin-top:2.305vw;font-family:var(--f-display);font-weight:400;font-size:3.832vw;line-height:1.1408;letter-spacing:0;color:var(--schrift);white-space:nowrap}
h1 em{font-style:italic;font-weight:700;color:var(--magenta)}
.lead{margin-top:1.886vw;width:33vw;font-size:max(1rem,1.44vw);line-height:1.4;letter-spacing:.012em;color:var(--schrift)}
.go{margin-top:2.275vw}
.btn{display:inline-flex;align-items:center;justify-content:center;width:max(17.5rem,25.75vw);height:max(3.4rem,4.13vw);padding:0 2.4vw 0 2.65vw;border-radius:999px;
  background:linear-gradient(180deg,#f0146b 0%,#e00c61 48%,#cc0955 100%);color:#fff;text-decoration:none;white-space:nowrap;font-size:max(1.0625rem,1.44vw);font-weight:400;
  box-shadow:0 .9vw 1.8vw -.8vw rgb(204 9 85/.5);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:translateY(-1px);box-shadow:0 1.2vw 2.2vw -.9vw rgb(204 9 85/.55)}
.notice{margin-bottom:1.5vw;padding:.7rem 1rem;border-left:3px solid var(--magenta);background:rgb(255 255 255/.85);font-size:1rem;max-width:30rem}

.legal{position:absolute;left:7.6vw;bottom:1.1rem;z-index:2;display:flex;gap:1.5rem;font-size:.8125rem;color:#4a5560}
.legal a{color:inherit;text-decoration:none}
.legal a:hover{text-decoration:underline}

/* Schmale und hochformatige Bildschirme: Text oben, Kompass und Wellen darunter. */
@media (max-width:59.99rem),(max-aspect-ratio:6/5){
  .stage{display:flex;flex-direction:column;padding:1.25rem 1.5rem 0}
  .logo,.copy{position:static;width:auto}
  .logo{width:7.5rem;margin-left:-.35rem}
  .copy{margin-top:clamp(1.75rem,6vh,3.5rem)}
  .eyebrow{font-size:.75rem;letter-spacing:.17em}
  h1{margin-top:1.1rem;font-size:clamp(2.05rem,9.6vw,3.6rem);white-space:normal}
  .lead{margin-top:1.25rem;width:auto;max-width:32rem;font-size:1.0625rem;line-height:1.45}
  .go{margin-top:1.6rem}
  .btn{width:100%;max-width:23rem;height:3.6rem;padding:0 1.5rem 0 1.7rem;gap:1rem;font-size:1.125rem;box-shadow:0 14px 26px -12px rgb(204 9 85/.5)}
    .art{position:relative;top:auto;transform:none;width:calc(100% + 3rem);margin:auto -1.5rem 0;max-width:none;aspect-ratio:810/871;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%),linear-gradient(90deg,transparent 0,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 16%),linear-gradient(90deg,transparent 0,#000 14%);mask-composite:intersect}
  .needle{left:34.5679%;top:15.4994%;width:11.8519%}
  .stage>.art{order:3}
  .legal{position:absolute;left:1.5rem;bottom:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}