/*
Theme Name: JS Visitenkarte
Version: 1.0.0
Description: Minimalistische JS Landingpage mit Logoanimation.
Requires PHP: 7.4
Text Domain: js-visitenkarte
*/

*{box-sizing:border-box}html{height:100%;background:#101010}body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 25%,#242424,#0d0d0d 80%);padding:clamp(20px,5vw,76px);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.15;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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}main{width:min(100%,1200px);position:relative}.paper{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:radial-gradient(ellipse at 40% 30%,#fff 20%,#fafafa 70%,#f0f0f0);box-shadow:0 24px 65px #0007,0 1px 0 #ffffff26 inset;perspective:1000px;overflow:hidden}.mark{position:absolute;width:42%;aspect-ratio:324/169}.flat-logo{animation:flat-arrival 6.8s both;transform-origin:50% 50%}.flat-logo svg{display:block;width:100%;height:100%;fill:#000}
.teaser{margin:0;position:absolute;top:calc(100% + 38px);width:100%;text-align:center;color:#aaa;font:300 clamp(11px,1.1vw,14px)/1.8 'Segoe UI',Arial,sans-serif;letter-spacing:.16em;animation:teaser 7.6s both;padding:0 12px}
@keyframes flat-arrival{
0%,10%{opacity:0;transform:translate(65vw,-50vh) scale(.15) rotate(-300deg)}
12%{opacity:1;transform:translate(60vw,-45vh) scale(.18) rotate(-300deg);animation-timing-function:cubic-bezier(.22,.55,.3,1)}
48%{opacity:1;transform:translate(0,0) scale(.85) rotate(0deg);animation-timing-function:cubic-bezier(.42,0,.2,1)}
67%{opacity:1;transform:translate(0,0) scale(1.8) rotate(0deg);animation-timing-function:ease-out}
73%{opacity:1;transform:translate(0,0) scale(1.8) rotate(0deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}
100%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}}
@keyframes teaser{0%,80%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:600px){body{padding:24px 18px 80px}.paper{aspect-ratio:4/5}.mark{width:50%}.teaser{top:calc(100% + 25px);letter-spacing:.09em;max-width:310px;left:50%;margin-left:-155px}}
@media(prefers-reduced-motion:reduce){.flat-logo,.teaser{animation:none;opacity:1;transform:none}}

.legal-nav{position:absolute;top:calc(100% + 82px);width:100%;display:flex;justify-content:center;gap:24px;font:13px/1.6 Arial,sans-serif}.legal-nav a{color:#bcbcbc;text-underline-offset:4px}.legal-nav a:hover{color:white}.legal-nav a:focus-visible{outline:2px solid white;outline-offset:5px}body{padding-bottom:130px}@media(max-width:600px){.legal-nav{top:calc(100% + 86px)}}

body:not(.home){display:block;padding:clamp(24px,6vw,80px);color:#eee;font:16px/1.7 "Segoe UI",Arial,sans-serif}body:not(.home) main{max-width:820px;margin:auto}body:not(.home) a{color:inherit}body:not(.home) h1{font-size:36px}body:not(.home) h2{font-size:22px;margin-top:32px}.draft{border:1px solid #888;padding:18px}.placeholder{background:#353535;padding:2px 5px;overflow-wrap:anywhere}