@font-face{font-family:"Unbounded";src:url(/fonts/unbounded-latin.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin.woff2) format("woff2");font-weight:100 700;font-display:swap}

:root{
  --navy:#0C1A2E;
  --navy-2:#12243D;
  --line:#2A4466;
  --ice:#E8EEF6;
  --muted:#A9BBD1;
  --mint:#5EE6A8;
  --mint-ink:#0C1A2E;
  --error:#FFB0A3;
  --display:"Unbounded",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--navy);color:var(--ice);font:400 17px/1.6 var(--body);overflow-x:hidden}
a{color:var(--ice);text-underline-offset:3px}
a:hover{color:var(--mint)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* Seitengerüst */
.page{position:relative;min-height:100dvh;display:flex;flex-direction:column;padding:24px clamp(16px,5vw,72px) 20px;isolation:isolate;overflow:hidden}
.brand{display:inline-flex;align-items:center;gap:12px;font:600 15px/1 var(--display);letter-spacing:.14em;color:var(--ice);text-decoration:none}
.brand svg{width:30px;height:30px}
main{flex:1;display:flex;align-items:center;padding:32px 0}
.content{width:100%;max-width:560px}
footer{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}

/* Großes Zeichen rechts, angeschnitten */
.mark{position:absolute;z-index:-1;top:50%;right:-26vmin;width:min(118vmin,1100px);transform:translateY(-50%);pointer-events:none}
.mark .c{fill:#132946}
.mark .capsule{fill:var(--mint);transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .mark .capsule{animation:dock 900ms cubic-bezier(.2,.8,.2,1) 200ms both}
  @keyframes dock{from{transform:translateX(35%);opacity:0}to{transform:none;opacity:1}}
}

/* Text */
h1{font:700 clamp(40px,6vw,68px)/1.02 var(--display);letter-spacing:-.02em;margin:0 0 18px}
.intro{font-size:clamp(17px,1.6vw,19px);color:var(--muted);margin:0 0 24px;max-width:48ch}
.intro strong{color:var(--ice);font-weight:500}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 28px;margin:0 0 32px;padding:0}
.facts div{border-left:2px solid var(--mint);padding-left:12px}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{margin:0;font-weight:500;line-height:1.35}

/* Formular */
.form-title{font:500 20px/1.3 var(--display);margin:0 0 6px}
.form-note{color:var(--muted);margin:0 0 16px;font-size:15px}
form{display:grid;grid-template-columns:1.3fr 1fr;gap:14px 12px}
form>*{grid-column:1/-1}
form>.half{grid-column:auto}
.field{display:grid;gap:6px;align-content:start}
label{font-weight:500;font-size:15px}
input[type=text],input[type=tel],input[type=email]{
  width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--navy-2);color:var(--ice);font:inherit;transition:border-color 150ms
}
input::placeholder{color:#6F86A3}
input:hover{border-color:#3C5B82}
input:focus-visible{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(94,230,168,.25)}
input[aria-invalid=true]{border-color:var(--error)}
.tel{display:flex;gap:8px}
.tel input{flex:1;min-width:0}
.tel select{
  flex:none;width:7rem;min-height:48px;padding:11px 30px 11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--navy-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BCD6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px;
  color:var(--ice);font:inherit;appearance:none;cursor:pointer;transition:border-color 150ms
}
.tel select:hover{border-color:#3C5B82}
.tel select:focus-visible{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(94,230,168,.25)}
.err{color:var(--error);font-size:14px;margin:0}
.err:empty{display:none}

.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;color:var(--muted);font-weight:400;cursor:pointer}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--mint);cursor:pointer}

/* Der Button ist die Kapsel aus dem Logo */
button[type=submit]{
  justify-self:start;min-height:52px;padding:0 30px;border:0;border-radius:999px;
  background:var(--mint);color:var(--mint-ink);font:600 16px/1 var(--display);letter-spacing:.01em;
  cursor:pointer;transition:background-color 150ms,transform 150ms
}
button[type=submit]:hover{background:#7DF0BC}
button[type=submit]:active{transform:translateY(1px)}
button[type=submit]:disabled{cursor:progress;opacity:.75}
.form-error{border-left:2px solid var(--error);padding:2px 0 2px 12px}

.success{border-left:2px solid var(--mint);padding:4px 0 4px 16px}
.success:focus{outline:none}
.success h2{font:500 22px/1.3 var(--display);margin:0 0 8px}
.success p{margin:0;color:var(--muted)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Rechtstexte */
.legal{max-width:68ch}
.legal h1{font-size:clamp(30px,5vw,44px)}
.legal h2{font:500 19px/1.3 var(--display);margin:32px 0 8px}
.legal p,.legal li{color:var(--muted)}

@media (max-width:760px){
  .page{padding-top:20px}
  main{align-items:flex-start;padding:40px 0 32px}
  .mark{top:-8vmin;right:-34vmin;width:80vmin;transform:none}
  form>.half{grid-column:1/-1}
  .facts{grid-template-columns:1fr;gap:12px}
  button[type=submit]{justify-self:stretch}
}