/* VOKA by Dicke Butz */
:root{--bg:#140A08;--bg2:#1E110D;--bone:#F4EEE3;--dim:#A2968A;--rust:#d87444;--copper:#C9885A;--neon:#FF3E6E;--pad:clamp(1.1rem,5vw,5rem)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--bone);font-family:'Montserrat',system-ui,sans-serif;font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:fixed;left:-9999px;top:0;z-index:100;background:var(--rust);color:#fff;padding:.8rem 1.2rem}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

/* Kopf */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.8rem var(--pad);transition:background .35s,box-shadow .35s}
.top.solid{background:rgba(20,10,8,.94);box-shadow:0 1px 0 rgba(244,238,227,.08)}
.top-logo img{height:44px;width:auto}
.top-nav{display:flex;gap:clamp(.8rem,2.5vw,2rem);align-items:center}
.top-nav a{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--dim);min-height:44px;display:inline-flex;align-items:center}
.top-nav a:hover{color:var(--bone)}
.top-nav .top-cta{color:var(--bg);background:var(--copper);padding:0 1rem;border-radius:6px;min-height:40px}
.top-nav .top-cta:hover{background:var(--bone);color:var(--bg)}
@media(max-width:560px){.top-nav a:not(.top-cta){display:none}.top-logo img{height:38px}}

/* Hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7rem var(--pad) 4rem;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,62,110,.10),transparent 60%),var(--bg)}
.eye{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rust);margin-bottom:1.2rem}
.hero-logo{width:min(560px,86vw);height:auto;filter:drop-shadow(0 0 30px rgba(255,62,110,.25));animation:glow 4s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 46px rgba(255,62,110,.42))}}
.claim{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(1.5rem,4.2vw,3.2rem);line-height:1.02;margin-top:2.4rem;letter-spacing:-.01em}
.claim span{display:block}
.claim em{display:block;font-style:normal;color:var(--neon);text-shadow:0 0 18px rgba(255,62,110,.55)}
.claim-de{font-family:'Cutive',serif;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:1rem}
.status{display:inline-block;margin-top:1.6rem;font-family:'Cutive',serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(244,238,227,.25);border-radius:999px;padding:.45rem 1rem;color:var(--bone)}
.acts{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1.5rem;border-radius:6px;background:var(--copper);color:var(--bg);text-decoration:none;
  font-family:'Archivo Black',sans-serif;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;border:2px solid var(--copper);transition:background .25s,color .25s,transform .25s}
.btn:hover{background:var(--bone);border-color:var(--bone);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--bone);border-color:rgba(244,238,227,.35)}
.btn.ghost:hover{border-color:var(--copper);color:var(--copper);background:transparent}

/* Bilder */
.wide{position:relative;margin:0}
.wide img{width:100%;aspect-ratio:2/1;object-fit:cover}
@media(max-width:700px){.wide img{aspect-ratio:4/5}}
.wide figcaption{position:absolute;right:var(--pad);bottom:1rem;font-family:'Cutive',serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,238,227,.7)}
.duo{display:grid;grid-template-columns:3fr 2fr;gap:clamp(.6rem,1.5vw,1.2rem);padding:0 var(--pad) clamp(3rem,8vh,6rem)}
.duo figure{margin:0;overflow:hidden;border-radius:4px}
.duo img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:700px){.duo{grid-template-columns:1fr}}

/* Abschnitte */
.konzept,.franchise,.anfrage{padding:clamp(4rem,11vh,8rem) var(--pad);max-width:1280px;margin:0 auto}
.h2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,7vw,5.4rem);line-height:.95;letter-spacing:-.02em;font-weight:400}
.h2 em{font-style:normal;color:var(--copper);display:block}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,4vw,3.5rem);margin-top:clamp(2rem,6vh,3.5rem)}
.cols .k{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rust);margin-bottom:.6rem}
.cols p{max-width:36ch}
@media(max-width:800px){.cols{grid-template-columns:1fr}}
.lead{font-size:1.08rem;max-width:52ch;margin-top:1.4rem;color:var(--bone);opacity:.85}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(244,238,227,.14);margin-top:clamp(2rem,6vh,3.5rem);border:1px solid rgba(244,238,227,.14)}
.three div{background:var(--bg);padding:1.6rem 1.4rem}
.three b{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:1.2rem;color:var(--copper);margin-bottom:.4rem}
.three span{color:var(--dim)}
@media(max-width:800px){.three{grid-template-columns:1fr}}
.group{margin-top:2rem;color:var(--dim);max-width:62ch}
.group a{color:var(--bone)}
.franchise{background:transparent}
.anfrage{border-top:1px solid rgba(244,238,227,.12)}

/* Formular */
.form{max-width:52rem;margin-top:clamp(1.6rem,4vh,2.6rem)}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem)}
@media(max-width:700px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-family:'Cutive',serif;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:1.3rem}
.form input,.form select,.form textarea{width:100%;background:none;color:var(--bone);border:0;border-bottom:1px solid rgba(244,238,227,.35);padding:.85rem 0;min-height:48px;font:inherit;font-size:.95rem}
.form select{appearance:none;cursor:pointer}
.form select option{background:var(--bg2);color:var(--bone)}
.form textarea{resize:vertical;min-height:6rem}
.form :is(input,select,textarea):focus{outline:none;border-bottom-color:var(--copper)}
.form button{margin-top:2rem;display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1.5rem;border-radius:6px;border:2px solid var(--copper);background:var(--copper);color:var(--bg);
  font-family:'Archivo Black',sans-serif;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .25s,transform .25s}
.form button:hover{background:var(--bone);border-color:var(--bone);transform:translateY(-2px)}
.form button[disabled]{opacity:.6;pointer-events:none}
.hint{font-size:.82rem;color:var(--dim);margin-top:1rem;max-width:60ch}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.state{margin-top:1.2rem}
.state:empty{display:none}
.state b{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;color:var(--copper)}
.state.note b{color:var(--neon)}
.state span{color:var(--dim)}

/* Fuss */
.foot{border-top:1px solid rgba(244,238,227,.12);padding:clamp(2.5rem,7vh,4rem) var(--pad);text-align:center;color:var(--dim);font-size:.85rem}
.foot img{width:150px;height:auto;margin:0 auto 1.2rem;opacity:.9}
.foot nav{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.foot nav a{font-family:'Cutive',serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot nav a:hover{color:var(--copper)}
.foot .copy{margin-top:.6rem;font-size:.75rem}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-logo{animation:none}*{transition:none!important}}