.c-contact-form{--c-contact-form-frame-bg:linear-gradient(135deg, var(--flowd-navy-deep) 0%, var(--flowd-slate) 60%, var(--flowd-red-700) 160%);--c-contact-form-frame-inset:var(--s-32);--c-contact-form-inner-bg:var(--flowd-beige-a-72);--c-contact-form-inner-radius:var(--r-md);--c-contact-form-inner-blur:16px;--c-contact-form-inner-saturate:160%;--c-contact-form-inner-border:1px solid var(--flowd-white-a-10);padding:var(--c-contact-form-frame-inset);background:var(--c-contact-form-frame-bg);border-radius:var(--r-lg);box-shadow:var(--shadow-md);position:relative}.c-contact-form__inner{z-index:1;gap:var(--s-24);padding:var(--s-32);background:radial-gradient(ellipse 60% 50% at 18% 22%, #14141414, transparent 60%), radial-gradient(ellipse 70% 55% at 82% 30%, #fff6, transparent 60%), radial-gradient(ellipse 55% 60% at 30% 78%, #ffffff52, transparent 60%), radial-gradient(ellipse 65% 50% at 78% 82%, #14141412, transparent 60%), radial-gradient(ellipse at center, transparent 55%, #1414141a 100%), var(--c-contact-form-inner-bg);-webkit-backdrop-filter:blur(var(--c-contact-form-inner-blur)) saturate(var(--c-contact-form-inner-saturate));border:var(--c-contact-form-inner-border);border-radius:var(--c-contact-form-inner-radius);--fg-1:var(--flowd-ink);--fg-2:var(--flowd-n-600);--fg-3:var(--flowd-n-500);--fg-muted:var(--flowd-n-400);color:var(--fg-1);font-family:var(--font-handwriting);flex-direction:column;font-weight:500;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff73,inset 0 -1px 2px #1414140d}.c-contact-form__sentence{font-size:clamp(var(--fs-2xl), 3vw, var(--fs-4xl));line-height:var(--lh-tight);color:var(--fg-1);margin:0}.c-contact-form__header{justify-content:space-between;align-items:center;gap:var(--s-24);margin-bottom:calc(var(--s-16) - var(--s-24));display:flex}.c-contact-form__greeting{font-family:var(--font-handwriting);font-weight:500;font-size:clamp(var(--fs-2xl), 3vw, var(--fs-4xl));line-height:var(--lh-tight);margin:0}.c-contact-form__stamp-slot{border:2px dashed color-mix(in srgb, var(--fg-1) 35%, transparent);border-radius:var(--r-xs);pointer-events:none;flex-shrink:0;justify-content:center;align-items:center;width:100px;height:116px;display:flex}.c-contact-form__stamp{--notch:4px;--pitch:12px;--m-top:radial-gradient(circle var(--notch) at top, transparent 99%, #000 100%) 0 0 / var(--pitch) calc(var(--notch) * 2) repeat-x;--m-bottom:radial-gradient(circle var(--notch) at bottom, transparent 99%, #000 100%) 0 100% / var(--pitch) calc(var(--notch) * 2) repeat-x;--m-left:radial-gradient(circle var(--notch) at left, transparent 99%, #000 100%) 0 0 / calc(var(--notch) * 2) var(--pitch) repeat-y;--m-right:radial-gradient(circle var(--notch) at right, transparent 99%, #000 100%) 100% 0 / calc(var(--notch) * 2) var(--pitch) repeat-y;--m-fill:linear-gradient(#000, #000) center / calc(100% - var(--notch) * 2) calc(100% - var(--notch) * 2) no-repeat;background:var(--flowd-red);width:80px;height:96px;filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--flowd-ink) 22%, transparent));-webkit-mask:var(--m-top), var(--m-bottom), var(--m-left), var(--m-right), var(--m-fill);mask:var(--m-top), var(--m-bottom), var(--m-left), var(--m-right), var(--m-fill);justify-content:center;align-items:center;display:flex;transform:rotate(5deg)}.c-contact-form__stamp-mark{aspect-ratio:160/110;background-color:var(--flowd-n-0);width:64%;display:block;mask:url(/assets/logo/flowd-w-mark-red.svg) 50%/contain no-repeat}.c-contact-form__field{--field-color:var(--accent);vertical-align:baseline;margin:0 .15em;display:inline-block;position:relative}.c-contact-form__field:has(input[name=name]){--field-color:var(--flowd-red);--field-type-anim:c-contact-form-type-1}.c-contact-form__field:has(input[name=firma]){--field-color:var(--flowd-deep-blue);--field-type-anim:c-contact-form-type-2}.c-contact-form__field:has(input[name=thema]){--field-color:var(--flowd-blue);--field-type-anim:c-contact-form-type-3}.c-contact-form__field:has(textarea[name=text]){--field-color:var(--flowd-slate);--field-type-anim:c-contact-form-type-4}.c-contact-form__field:has(input[name=telefon]){--field-color:var(--flowd-red-700);--field-type-anim:c-contact-form-type-5}.c-contact-form__field:has(input[name=email]){--field-color:var(--flowd-red-600);--field-type-anim:c-contact-form-type-6}.c-contact-form__field[data-text]:before{content:attr(data-text);visibility:hidden;white-space:pre;padding-inline-end:.05em}.c-contact-form__field--block[data-text]:before{display:none}.c-contact-form__field input,.c-contact-form__field textarea{font:inherit;color:var(--field-color);vertical-align:baseline;background:0 0;border:0;outline:0;margin:0;padding:0}.c-contact-form__field input{border:0;border-bottom:2.5px dashed var(--field-color);width:100%;height:100%;position:absolute;inset:0}.c-contact-form__field input::placeholder,.c-contact-form__field textarea::placeholder{color:color-mix(in srgb, var(--field-color) 60%, transparent)}@property --c-contact-form-type-progress{syntax:"<percentage>";inherits:false;initial-value:0%}.c-contact-form__field[data-text]:after{content:attr(data-text);pointer-events:none;font:inherit;color:var(--field-color);white-space:pre;--c-contact-form-type-progress:0%;-webkit-mask-image:linear-gradient(90deg, #000 var(--c-contact-form-type-progress), transparent var(--c-contact-form-type-progress));mask-image:linear-gradient(90deg, #000 var(--c-contact-form-type-progress), transparent var(--c-contact-form-type-progress));opacity:0;position:absolute;inset:0}.c-contact-form__field--block[data-text]:after{white-space:pre-wrap;-webkit-mask-image:linear-gradient(90deg, #000 calc(var(--c-contact-form-type-progress) * 3), transparent calc(var(--c-contact-form-type-progress) * 3)), linear-gradient(90deg, #000 calc((var(--c-contact-form-type-progress) - 33.33%) * 3), transparent calc((var(--c-contact-form-type-progress) - 33.33%) * 3)), linear-gradient(90deg, #000 calc((var(--c-contact-form-type-progress) - 66.66%) * 3), transparent calc((var(--c-contact-form-type-progress) - 66.66%) * 3));mask-image:linear-gradient(90deg, #000 calc(var(--c-contact-form-type-progress) * 3), transparent calc(var(--c-contact-form-type-progress) * 3)), linear-gradient(90deg, #000 calc((var(--c-contact-form-type-progress) - 33.33%) * 3), transparent calc((var(--c-contact-form-type-progress) - 33.33%) * 3)), linear-gradient(90deg, #000 calc((var(--c-contact-form-type-progress) - 66.66%) * 3), transparent calc((var(--c-contact-form-type-progress) - 66.66%) * 3));mask-position:0 0,0 1lh,0 2lh;mask-size:100% 1lh,100% 1lh,100% 1lh;mask-repeat:no-repeat}.c-contact-form:not(:focus-within) .c-contact-form__field[data-text]:has(input:placeholder-shown:not(:focus),textarea:placeholder-shown:not(:focus)):after{opacity:1;animation:var(--field-type-anim) 14s ease-in-out infinite}.c-contact-form:not(:focus-within) .c-contact-form__field[data-text] input:placeholder-shown:not(:focus)::placeholder,.c-contact-form:not(:focus-within) .c-contact-form__field[data-text] textarea:placeholder-shown:not(:focus)::placeholder{color:#0000}@keyframes c-contact-form-type-1{0%{--c-contact-form-type-progress:0%}11%{--c-contact-form-type-progress:100%}90%{--c-contact-form-type-progress:100%}to{--c-contact-form-type-progress:0%}}@keyframes c-contact-form-type-2{0%,11%{--c-contact-form-type-progress:0%}17%{--c-contact-form-type-progress:100%}90%{--c-contact-form-type-progress:100%}to{--c-contact-form-type-progress:0%}}@keyframes c-contact-form-type-3{0%,17%{--c-contact-form-type-progress:0%}24%{--c-contact-form-type-progress:100%}90%{--c-contact-form-type-progress:100%}to{--c-contact-form-type-progress:0%}}@keyframes c-contact-form-type-4{0%,24%{--c-contact-form-type-progress:0%}61%{--c-contact-form-type-progress:100%}90%{--c-contact-form-type-progress:100%}to{--c-contact-form-type-progress:0%}}@keyframes c-contact-form-type-5{0%,61%{--c-contact-form-type-progress:0%}70%{--c-contact-form-type-progress:100%}90%{--c-contact-form-type-progress:100%}to{--c-contact-form-type-progress:0%}}@keyframes c-contact-form-type-6{0%,70%{--c-contact-form-type-progress:0%}78%{--c-contact-form-type-progress:100%}90%{--c-contact-form-type-progress:100%}to{--c-contact-form-type-progress:0%}}.c-contact-form__field--block{font-size:clamp(var(--fs-2xl), 3vw, var(--fs-4xl));line-height:var(--lh-tight);margin:0;display:block}.c-contact-form__field--block textarea{resize:none;border-bottom:2.5px dashed var(--field-color);field-sizing:content;width:100%;min-height:1lh;text-decoration:none;display:block;overflow:hidden}@keyframes c-contact-form-pulse-border{0%,to{border-bottom-color:var(--field-color)}50%{border-bottom-color:color-mix(in srgb, var(--field-color) 35%, transparent)}}.c-contact-form__field input:placeholder-shown:not(:focus),.c-contact-form__field--block textarea:placeholder-shown:not(:focus){animation:1.8s ease-in-out infinite c-contact-form-pulse-border}.c-contact-form__field input:focus,.c-contact-form__field--block textarea:focus{border-bottom-style:solid}@media (prefers-reduced-motion:reduce){.c-contact-form__field input,.c-contact-form__field textarea,.c-contact-form__field[data-text]:after{animation:none!important}.c-contact-form__field[data-text]:after{opacity:0}.c-contact-form__field[data-text] input:placeholder-shown:not(:focus)::placeholder,.c-contact-form__field[data-text] textarea:placeholder-shown:not(:focus)::placeholder{color:color-mix(in srgb, var(--field-color) 60%, transparent)}}.c-contact-form__actions{align-items:center;gap:var(--s-24);margin-top:var(--s-16);flex-wrap:wrap;display:flex}.c-contact-form__hint{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--fg-3)}
