:root{
  --basis:#0D1513;--flaeche:#14201D;--linie:#2A3A36;--text:#F5F1E8;--mute:#A9AFA6;--gold:#D9B468;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--basis);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;
  background-image:radial-gradient(900px 600px at 85% -10%,rgba(217,180,104,.10),transparent 60%),radial-gradient(700px 500px at -10% 110%,rgba(217,180,104,.06),transparent 60%);
  background-attachment:fixed;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--gold)}
main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:22px 16px 40px}
.brand{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:34px}
.brand b{color:var(--text);font-weight:700}
.kicker{display:block;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
h1{font-weight:800;font-size:clamp(40px,10.5vw,76px);line-height:1.03;letter-spacing:-.02em;margin:0}
h1 .z{display:block}
h1 .g{color:var(--gold);display:block}
.goldlinie{width:84px;height:5px;background:var(--gold);border-radius:2px;margin:24px 0 22px;transform-origin:left;animation:wachsen .7s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes wachsen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.goldlinie{animation:none}}
.lead{font-size:clamp(17px,4.4vw,20px);color:#E4DFD3;margin:0;max-width:560px}
h2{font-weight:800;font-size:clamp(28px,7vw,40px);line-height:1.08;letter-spacing:-.015em;margin:0}

/* Hero */
.hero{display:grid;gap:30px;align-items:start;grid-template-areas:"kopf" "medien" "form"}
.hero .kopf{grid-area:kopf}.hero .medien{grid-area:medien}.hero .card{grid-area:form}
.medien{position:relative;margin:0 auto;width:72%;max-width:300px}
.medien img,.medien video{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--linie);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.medien video{display:none;aspect-ratio:4/5;object-fit:cover;background:#000}
.medien.mit-video img{display:none}
.medien.mit-video video{display:block}

/* Glas-Karte mit Formular */
.card{background:rgba(20,32,29,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(245,241,232,.12);border-radius:20px;padding:24px 20px;box-shadow:0 24px 50px rgba(0,0,0,.35)}
.card h3{font-size:22px;font-weight:800;margin:0 0 4px}
.card .small{color:var(--mute);font-size:15px;margin:0 0 16px}
label.f{display:block;font-size:14px;font-weight:700;margin:14px 0 6px}
input[type=text],input[type=email]{width:100%;font:inherit;font-size:17px;color:var(--text);background:rgba(13,21,19,.85);border:1px solid var(--linie);border-radius:12px;padding:14px 14px;outline:none}
input[type=text]:focus,input[type=email]:focus{border-color:var(--gold)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#D7D2C6;margin:18px 0 6px;cursor:pointer}
.consent input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:var(--gold)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.btn,button.btn{display:block;width:100%;text-align:center;font:inherit;font-size:18px;font-weight:800;color:#14100A;background:var(--gold);border:0;border-radius:14px;padding:17px 20px;margin-top:16px;cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.65;cursor:wait}
.btn.zweit{background:transparent;color:var(--gold);border:2px solid var(--gold)}
.nospam{text-align:center;color:var(--mute);font-size:14px;margin:12px 0 0}
.msg{display:none;margin-top:12px;font-size:15px;color:#F0B4A4}
.msg.err{display:block}
.done{display:none;text-align:left}
.done h3{font-size:26px}
.done p{color:#E4DFD3;margin:10px 0 0}

/* Inhalt */
.inhalt{margin-top:64px}
.liste{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.liste li{display:flex;gap:14px;align-items:flex-start;background:rgba(20,32,29,.6);border:1px solid var(--linie);border-radius:16px;padding:18px 18px}
.haken{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#14100A;display:grid;place-items:center;font-weight:800;font-size:16px}
.liste b{display:block;font-size:18px;line-height:1.3}
.liste span.t{display:block;color:var(--mute);font-size:15px;margin-top:3px}
.ich{margin-top:64px;border-left:3px solid var(--gold);padding:4px 0 4px 20px;max-width:720px;color:#E4DFD3}
.ich strong{color:var(--text)}
.unten{margin-top:56px}

/* Zentrierte Seiten (Download) */
.center{max-width:640px;margin:0 auto;text-align:left}
.angebot{margin-top:56px}
.angebot h2{font-size:clamp(26px,6.5vw,34px)}
.angebot p{color:#E4DFD3;margin:14px 0 0}

/* Rechtstexte */
.legal{max-width:760px}
.legal h1{font-size:clamp(34px,8vw,48px);margin-bottom:10px}
.legal h2{font-size:20px;margin:30px 0 8px}
.legal p{color:#E4DFD3;margin:0 0 12px}

footer{width:100%;max-width:1120px;margin:0 auto;padding:22px 16px 34px;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--mute)}
footer a{color:var(--mute);text-decoration:none}
footer a:hover{color:var(--text)}

@media (min-width:880px){
  main{padding:34px 28px 60px}
  .hero{grid-template-columns:1.08fr .92fr;gap:30px 56px;grid-template-areas:"kopf medien" "form medien"}
  .card{padding:28px 26px}
  .hero .card{max-width:520px}
  .medien{width:100%;max-width:440px;margin:0 0 0 auto;position:sticky;top:30px}
  .liste{grid-template-columns:1fr 1fr}
  footer{padding:24px 28px 40px}
}