:root{
    --primary:#3C3732; --greige:#9B918C; --sand:#CDC3BE;
    --offwhite:#DCD7D7; --accent:#A00028; --ink:#1D1D1B;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{font-family:'Figtree',sans-serif;color:var(--primary);-webkit-font-smoothing:antialiased;background:var(--ink)}
  body.locked{overflow:hidden}
  a{color:inherit}
  ::selection{background:var(--accent);color:var(--offwhite)}

  /* ================= SPLIT ================= */
  .split{min-height:100vh;display:grid;grid-template-columns:0.9fr 1.1fr}

  /* ---- LINKS: Markenpanel ---- */
  .brand-panel{position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:clamp(2.2rem,4vw,3.6rem);color:var(--offwhite)}
  .brand-panel .bg{position:absolute;inset:0;z-index:0;
    background:url('/assets/img/hero.jpg') center 35%/cover no-repeat;transform:scale(1.03)}
  .brand-panel .veil{position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(29,29,27,.5) 0%,rgba(29,29,27,.12) 26%,rgba(40,35,32,.22) 56%,rgba(29,29,27,.8) 100%)}
  .brand-panel .veil::after{content:"";position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(160,0,40,.2),transparent 38%)}
  .brand-panel .bg{background-position:24% 44%;transform:scale(1.06)}
  .brand-panel>*{position:relative;z-index:2}

  .bp-logo svg{width:clamp(178px,15vw,232px);height:auto;fill:var(--offwhite)}
  .bp-mid{margin:auto 0}
  .bp-ey{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);font-weight:600;margin-bottom:1.5rem;display:block}
  .bp-head{font-weight:500;letter-spacing:-.02em;line-height:1.14;font-size:clamp(1.7rem,3vw,2.7rem);max-width:15ch;
    color:#fff;text-shadow:0 2px 34px rgba(29,29,27,.6)}
  .bp-head .thin{font-weight:300;font-style:italic;color:var(--sand)}
  .bp-contact{margin-top:2rem;font-weight:300;font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.6;color:var(--offwhite);text-shadow:0 1px 20px rgba(29,29,27,.55)}
  .bp-contact .lbl{color:var(--sand);display:block;margin-bottom:.4rem;font-size:.9rem}
  .bp-contact a{font-weight:500;text-decoration:none;border-bottom:1px solid rgba(220,215,215,.35);padding-bottom:1px;transition:.25s;white-space:nowrap}
  .bp-contact a:hover{border-color:var(--accent);color:#fff}
  .bp-insta{display:inline-flex!important;align-items:center;gap:.5rem;margin-top:1.15rem;border-bottom:0!important;padding:0;font-weight:500;color:var(--offwhite);text-shadow:0 1px 20px rgba(29,29,27,.55);white-space:nowrap}
  .bp-insta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
  .bp-insta:hover{color:var(--sand)}
  .bp-foot{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:.82rem;color:var(--sand);font-weight:300}
  .bp-foot span{display:flex;align-items:center;gap:.5rem}
  .bp-foot i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

  /* ---- RECHTS: Formular ---- */
  .form-panel{background:var(--offwhite);display:flex;align-items:center;justify-content:center;
    padding:clamp(2.4rem,5vw,4.6rem) clamp(1.5rem,4.5vw,4.2rem)}
  .form-inner{width:100%;max-width:560px}
  .fp-kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700;display:block;margin-bottom:1rem}
  .fp-title{font-weight:500;font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:-.02em;line-height:1.14}
  .fp-lead{margin-top:.9rem;color:var(--greige);font-weight:300;font-size:1.02rem;line-height:1.55}
  .rule{height:1px;background:rgba(60,55,50,.16);margin:clamp(1.8rem,3.4vw,2.4rem) 0}

  form{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2rem)}
  .req{color:var(--accent);font-weight:600}
  .grouplabel{font-weight:600;font-size:.98rem;margin-bottom:.9rem;color:var(--primary)}

  .checks{display:flex;flex-direction:column;gap:.1rem}
  .check{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;padding:.5rem .5rem;margin:0 -.5rem;border-radius:6px;transition:background .2s}
  .check:hover{background:rgba(60,55,50,.05)}
  .check input{position:absolute;opacity:0;width:0;height:0}
  .check .box{width:20px;height:20px;border:1.5px solid var(--greige);border-radius:5px;flex:none;margin-top:1px;
    display:grid;place-items:center;transition:.2s;background:rgba(255,255,255,.25)}
  .check:hover .box{border-color:var(--primary)}
  .check input:checked+.box{background:var(--accent);border-color:var(--accent)}
  .check .box svg{width:11px;height:11px;stroke:var(--offwhite);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:.2s}
  .check input:checked+.box svg{opacity:1;transform:scale(1)}
  .check input:focus-visible+.box{box-shadow:0 0 0 3px rgba(160,0,40,.25)}
  .check .txt{font-weight:300;font-size:1rem;line-height:1.4;color:var(--primary)}

  .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
  @media(max-width:520px){.row2{grid-template-columns:1fr}}
  .field{display:flex;flex-direction:column;gap:.5rem}
  .field label{font-weight:500;font-size:.88rem;color:var(--primary)}
  .field input{font-family:inherit;font-size:1.02rem;font-weight:300;color:var(--primary);
    background:rgba(255,255,255,.3);border:1.5px solid rgba(60,55,50,.2);border-radius:6px;
    padding:.9rem 1rem;transition:.22s;width:100%}
  .field input::placeholder{color:var(--greige);opacity:.85}
  .field input:hover{border-color:rgba(60,55,50,.36)}
  .field input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.55)}
  .field .hint{font-size:.8rem;color:var(--greige);font-weight:300}
  .field.invalid input{border-color:var(--accent);background:rgba(160,0,40,.04)}
  .field.invalid .hint{color:var(--accent)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-family:inherit;font-weight:500;font-size:1rem;
    padding:1.05rem 2rem;border-radius:40px;border:1.5px solid var(--primary);background:var(--primary);
    color:var(--offwhite);cursor:pointer;transition:.3s;width:100%}
  .btn .ar{transition:transform .3s}
  .btn:hover{background:var(--accent);border-color:var(--accent)}
  .btn:hover .ar{transform:translateX(4px)}
  .legal{margin-top:.2rem;font-size:.76rem;color:var(--greige);font-weight:300;line-height:1.5}
  .legal a{color:var(--greige);text-decoration:underline;text-underline-offset:2px}
  .hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

  .done{display:none}
  .done.on{display:block;animation:fadein .6s ease both}
  .done .tick{width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin-bottom:1.4rem}
  .done .tick svg{width:28px;height:28px;stroke:var(--offwhite);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .done h3{font-weight:500;font-size:1.7rem;margin-bottom:.6rem}
  .done p{color:var(--greige);font-weight:300;max-width:42ch;line-height:1.55}
  @keyframes fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  @media(max-width:900px){
    .split{grid-template-columns:1fr}
    .brand-panel{position:relative;height:auto;min-height:62vh}
    .form-panel{padding:2.6rem 1.4rem 3.4rem}
  }

  /* ================= LOADER ================= */
  .loader{position:fixed;inset:0;z-index:200;background:var(--accent);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
    transition:transform 1s cubic-bezier(.76,0,.24,1)}
  body.revealed .loader{transform:translateY(-101%)}
  body.noloader .loader{display:none}
  .lockup{display:flex;align-items:center;gap:26px}
  .mark{width:104px;height:auto;overflow:visible;flex:none}
  /* Gefüllte Bildmarke wird per Masken-Tracer entlang der Kontur aufgedeckt -> bleibt danach unverändert */
  .mark .marfill use{fill:var(--offwhite)}
  .mark .tracer{fill:none;stroke:#fff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1;stroke-dashoffset:1}
  body.run .mark .tracer{animation:draw 1.5s cubic-bezier(.5,0,.2,1) forwards}
  body.run .mark .tracer.t2{animation-delay:.45s;animation-duration:1.15s}
  @keyframes draw{to{stroke-dashoffset:0}}
  .wordmark{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.04}
  .wordmark span{color:var(--offwhite);font-weight:600;letter-spacing:-.005em;
    font-size:clamp(1.15rem,2.5vw,1.62rem);opacity:0;transform:translateY(14px);filter:blur(4px)}
  body.run .wordmark span{animation:build .7s cubic-bezier(.2,.7,.2,1) forwards}
  body.run .wordmark span:nth-child(1){animation-delay:1.55s}
  body.run .wordmark span:nth-child(2){animation-delay:1.72s}
  body.run .wordmark span:nth-child(3){animation-delay:1.89s}
  @keyframes build{to{opacity:1;transform:none;filter:blur(0)}}
  .progress{position:absolute;bottom:46px;width:120px;height:2px;background:rgba(255,255,255,.25);overflow:hidden;border-radius:2px}
  .progress i{display:block;height:100%;width:0;background:#fff}
  body.run .progress i{animation:pfill 2.4s ease forwards}
  @keyframes pfill{to{width:100%}}

  /* --- statische Vorschau-Zustände (nur zum Screenshotten via ?lp=draw|full) --- */
  body.lp-draw .mark .tracer,body.lp-full .mark .tracer{animation:none}
  body.lp-draw .wordmark span,body.lp-full .wordmark span{animation:none;opacity:1;transform:none;filter:none}
  body.lp-full .mark .tracer{stroke-dashoffset:0}
  body.lp-draw .mark .tracer{stroke-dashoffset:.5}