/* Kontaktformulare: Mischung aus S&I-Seite und vesena-Formsprache (10.11.2026).
   Gilt nur mit body.fm (Seite /anfrage/). Nur transform und opacity bewegen sich. */
.fm .kontakt{--ac:#12b5d3;--ap:#79daff;--ink:#04161a;--r1:18,181,211;--r2:10,100,200;--rot:#ff9a90;
 position:relative;overflow:hidden;color:#f5f5f7;background:transparent;padding-top:68px}
.fm .kontakt[data-sparte=reparatur]{--ac:#9b6bff;--ap:#c4a5ff;--ink:#12082b;--r1:155,107,255;--r2:90,60,200}
.fm .kontakt[data-sparte=sparenergie]{--ac:#3cc027;--ap:#9be37e;--ink:#05180a;--r1:60,192,39;--r2:20,150,110}
.fm .kontakt:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:
  radial-gradient(ellipse max(560px,50vw) max(520px,46vw) at 8% 40%,rgba(var(--r1),.5),transparent 70%),
  radial-gradient(ellipse max(600px,54vw) max(520px,48vw) at 94% 22%,rgba(var(--r2),.46),transparent 70%),
  radial-gradient(ellipse max(480px,44vw) max(300px,26vw) at 52% 96%,rgba(var(--r1),.2),transparent 70%);
 animation:fmAtem 16s ease-in-out infinite alternate}
@keyframes fmAtem{from{opacity:.78;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
.fm .kontakt .wrap{position:relative;z-index:1;max-width:680px;padding-top:80px;padding-bottom:112px}
.fm .kontakt .intro{text-align:center;margin-bottom:44px}
.fm .kontakt .eyebrow{margin-bottom:26px;background:rgba(var(--r1),.16);color:var(--ap);box-shadow:inset 0 0 0 1px rgba(var(--r1),.28)}
.fm .kontakt h1{text-wrap:balance;margin:0;color:#f5f5f7;font-size:clamp(46px,9.4vw,84px);font-weight:760;letter-spacing:-.035em;line-height:.98}
.fm .kontakt .unterzeile{margin:12px auto 0;max-width:15em;font-size:clamp(23px,4.4vw,36px);font-weight:300;letter-spacing:-.025em;line-height:1.12;color:#a0a4a8}
.fm .kontakt .unterzeile b{font-weight:400;color:var(--ap)}
/* Glaskarte wie auf der Seite, dazu die Signaturlinie als Marke */
.fm .kontakt form,.fm .kontakt .danke{position:relative;padding:36px 32px 28px;border-radius:32px;background:rgba(255,255,255,.04);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 80px -40px rgba(0,0,0,.9)}
.fm .kontakt form:before,.fm .kontakt .danke:before{content:"";position:absolute;left:40px;right:40px;top:0;height:3px;border-radius:0 0 3px 3px;
 background:linear-gradient(90deg,#12b5d3 0 33.34%,#9b6bff 33.34% 66.67%,#3cc027 66.67%);opacity:.9}
.fm .kontakt fieldset{margin:0 0 30px}
.fm .kontakt .frage{margin:0 0 14px;font-size:15px;font-weight:620;color:#e8e9ee}
.fm .kontakt .frage small,.fm .kontakt .feld>label small{font-size:14px;font-weight:430;color:#8f929c}
.fm .kontakt .chips{gap:10px}
.fm .kontakt .chips span{min-height:48px;padding:0 20px;border:0;border-radius:3px;font-size:16px;font-weight:560;color:#f5f5f7;
 background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.17);transition:transform .2s,box-shadow .2s,background .2s}
.fm .kontakt .chips label:hover span{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);background:rgba(255,255,255,.07)}
.fm .kontakt .chips input:checked+span{animation:none;background:var(--ac);color:var(--ink);box-shadow:0 0 40px -8px rgba(var(--r1),.75)}
.fm .kontakt .chips input:checked+span:before{border-color:var(--ink)}
.fm .kontakt .chips input:focus-visible+span{outline:2px solid var(--ap);outline-offset:3px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.fm .kontakt .chips input:checked:focus-visible+span{box-shadow:0 0 40px -8px rgba(var(--r1),.75)}
.fm .kontakt .feld{gap:10px;margin:0 0 22px}
.fm .kontakt .feld>label{font-size:15px;font-weight:620;color:#e8e9ee}
.fm .kontakt .feld:focus-within>label{color:var(--ap)}
.fm .kontakt .feld input,.fm .kontakt .feld textarea{min-height:62px;padding:18px 22px;border:0;border-radius:3px;background:rgba(255,255,255,.055);color:#f5f5f7;
 font-size:18px;line-height:1.3;caret-color:var(--ap);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.fm .kontakt .feld input::placeholder,.fm .kontakt .feld textarea::placeholder{color:#7d7f8c;opacity:1}
.fm .kontakt .feld input:focus,.fm .kontakt .feld textarea:focus{outline:none;background:rgba(255,255,255,.075);
 box-shadow:inset 0 0 0 1.5px var(--ac),0 0 44px -10px rgba(var(--r1),.6)}
.fm .kontakt .feld input:focus-visible,.fm .kontakt .feld textarea:focus-visible{outline:2px solid transparent}
.fm .kontakt .feld [aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--rot)}
.fm .kontakt .feld [aria-invalid=true]:focus{box-shadow:inset 0 0 0 1.5px var(--rot),0 0 36px -10px rgba(255,120,110,.5)}
.fm .kontakt .fehler{padding-left:22px;font-size:15px;font-weight:550;color:var(--rot)}
.fm .kontakt .senden{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;margin-top:12px;padding:0 8px 0 26px;
 border:0;border-radius:3px;background:#f5f5f7;color:#0a0a0d;font-size:16.5px;font-weight:650;letter-spacing:.01em;text-align:left;cursor:pointer;
 box-shadow:0 26px 60px -26px rgba(var(--r1),.9);transition:transform .2s}
.fm .kontakt .senden:hover{background:#fff;color:#0a0a0d}
.fm .kontakt .senden .pf{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:3px;background:#0a0a0d;transition:transform .25s,background .2s}
.fm .kontakt .senden .pf svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.fm .kontakt .senden:hover .pf{transform:translateX(3px);background:var(--ac)}
.fm .kontakt .senden:hover .pf svg{stroke:var(--ink)}
.fm .kontakt .senden:active{transform:scale(.99)}
.fm .kontakt .senden:focus,.fm .kontakt .senden:focus-visible{outline:2px solid var(--ap);outline-offset:4px}
.fm .kontakt p.klein,.fm .kontakt .klein{font-size:14px;line-height:1.55;color:#9c9daa;margin-top:18px}
.fm .kontakt .klein a{color:#d3d4dc;text-underline-offset:3px}
.fm .kontakt .klein a:hover{color:var(--ap)}
.fm .kontakt .alt{margin-top:0;gap:0 22px}
.fm .kontakt .andere{margin-top:40px;padding-top:0;border:0;text-align:center;font-size:14px;color:#9c9daa}
.fm .kontakt .andere a{display:inline-flex;align-items:center;min-height:42px;margin:10px 4px 0;padding:0 18px;border-radius:3px;color:#e8e9ee;font-weight:540;text-decoration:none;
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);transition:box-shadow .2s,color .2s}
.fm .kontakt .andere a:hover{color:var(--ap);box-shadow:inset 0 0 0 1.5px var(--ac)}
/* Danke-Zustand */
.fm .kontakt .danke{padding:48px 32px 40px;text-align:center}
.fm .kontakt .danke h1{text-align:center;font-size:clamp(40px,8vw,64px);color:#f5f5f7}
.fm .kontakt .danke p{margin:18px auto 0;font-size:18px;color:#a0a4a8}
.fm .kontakt .danke .haken{margin:0 auto 28px;background:rgba(var(--r1),.18);box-shadow:inset 0 0 0 1.5px rgba(var(--r1),.5),0 0 60px -10px rgba(var(--r1),.7)}
.fm .kontakt .danke .haken:before{border-color:var(--ap);animation:none}
.fm .kontakt .danke .haken:after{border-color:var(--ac)}
.fm .kontakt .danke .alt{justify-content:center}
.fm .kontakt .danke .alt a{color:#d3d4dc}
@media(max-width:700px){
 .fm .kontakt .wrap{padding:56px 16px 88px}
 .fm .kontakt .intro{margin-bottom:32px}
 .fm .kontakt .eyebrow{margin-bottom:20px}
 .fm .kontakt form,.fm .kontakt .danke{padding:30px 18px 22px;border-radius:28px}
 .fm .kontakt form:before,.fm .kontakt .danke:before{left:28px;right:28px}
 .fm .kontakt .chips span{min-height:46px;padding:0 17px;font-size:15.5px}
 .fm .kontakt .feld input,.fm .kontakt .feld textarea{min-height:58px;padding:16px 18px;font-size:17px;border-radius:3px}
 .fm .kontakt .fehler{padding-left:18px}
 .fm .kontakt .senden{min-height:60px;font-size:16.5px;padding-left:22px}
 .fm .kontakt .andere{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){.fm .kontakt:before{animation:none}.fm .kontakt .senden .pf,.fm .kontakt .chips span{transition:none}}