/* Formverk Kontakt: formular og broderiramme */
.fv-contact{
  /* Farver fra forsiden: cremefarvede piller med olivenguld kant, lys skrift og græsgrøn */
  --fv-linen:#fbf9ee;--fv-line:#d6cc95;--fv-pill-text:#a99d5f;--fv-gold-deep:#9c8f55;--fv-muted:#5b5a52;--fv-moss:#5f6b45;
  --fv-green:#5f6b45;--fv-green-soft:#f1f2e6;--fv-ink:#1f1f1c;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start;
}
@media (max-width:820px){.fv-contact{grid-template-columns:1fr}}
.fv-contact__fields{display:grid;gap:18px;min-width:0}
.fv-contact__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:520px){.fv-contact__row{grid-template-columns:1fr}}
.fv-contact fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.fv-contact legend{font-weight:700;letter-spacing:-.02em;font-size:1.25rem;margin-bottom:14px;padding:0;color:var(--fv-ink)}

/* Ydelser som piller, ligesom på forsiden */
.fv-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:420px){.fv-pills{grid-template-columns:1fr}}
.fv-pill{position:relative;display:block;cursor:pointer}
.fv-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fv-pill span{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 20px;border:1px solid var(--fv-line);border-radius:999px;background:var(--fv-linen);color:var(--fv-pill-text);font-weight:300;letter-spacing:-.02em;font-size:1.05rem;text-align:center;transition:background .25s,color .25s,border-color .25s}
.fv-pill:hover span{background:#f5f1dc}
.fv-pill input:checked+span{background:var(--fv-green);border-color:var(--fv-green);color:var(--fv-linen)}
.fv-pill input:checked+span::before{content:"";width:12px;height:12px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8' stroke='%23fbf9ee' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.fv-pill input:focus-visible+span{outline:2px dashed var(--fv-gold-deep);outline-offset:3px}

/* Felter: linjen under hvert felt er en række korssting */
.fv-field{display:grid;gap:6px;font-size:1rem;font-weight:300;letter-spacing:-.01em;color:var(--fv-ink);position:relative;padding-bottom:10px}
.fv-field input,.fv-field textarea{font:inherit;font-weight:400;font-size:1rem;color:inherit;border:0;background:transparent;padding:8px 2px;border-radius:0;box-shadow:none;width:100%}
.fv-field input:focus,.fv-field textarea:focus{outline:none}
.fv-field textarea{resize:vertical}
.fv-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8' stroke='%231f1f1c' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/14px 10px}
.fv-field:focus-within::after{background-size:14px 10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8' stroke='%235f6b45' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E")}
/* Nålen der syr linjen */
.fv-field::before{content:"";position:absolute;bottom:4px;left:0;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M2 20 L17 5' stroke='%238d8a74' stroke-width='1.8' stroke-linecap='round'/%3E%3Cellipse cx='18.3' cy='3.7' rx='2.6' ry='1.3' transform='rotate(-45 18.3 3.7)' fill='none' stroke='%238d8a74' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;opacity:0;pointer-events:none;z-index:1}
/* Animation: tilføjes af fv-contact.js, når formularen kommer til syne */
.fv-sew-wait .fv-field::after{clip-path:inset(0 100% 0 0)}
.fv-sew-go .fv-field::after{animation:fv-sew-line 1.6s steps(30,end) var(--fv-d,0s) both}
.fv-sew-go .fv-field::before{animation:fv-needle 1.6s steps(30,end) var(--fv-d,0s) both}
@keyframes fv-sew-line{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fv-needle{0%{left:0;opacity:0}3%{left:0;opacity:1}96%{left:calc(100% - 14px);opacity:1}100%{left:calc(100% - 14px);opacity:0}}

/* Afkrydsning som korssting */
.fv-check{display:flex;gap:12px;align-items:center;cursor:pointer}
.fv-check--small{font-size:.88rem;font-weight:300;color:var(--fv-muted);align-items:flex-start}
.fv-check input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:1.5px solid var(--fv-green);border-radius:5px;background:var(--fv-green-soft);position:relative;margin:0;flex:none;cursor:pointer}
.fv-check--small input{width:20px;height:20px}
.fv-check input::before,.fv-check input::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:#fbf8ee;transform:rotate(45deg) scaleX(0);transition:transform .18s ease-out}
.fv-check input::after{transform:rotate(-45deg) scaleX(0);transition-delay:.15s}
.fv-check input:checked::before{transform:rotate(45deg) scaleX(1)}
.fv-check input:checked::after{transform:rotate(-45deg) scaleX(1)}
.fv-check input:checked{border-color:var(--fv-green);background:var(--fv-green)}
.fv-check:hover input:not(:checked){background:#e2e8d6}
.fv-check input:focus-visible{outline:2px dashed var(--fv-gold-deep);outline-offset:3px}

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

.fv-btn{justify-self:start;font:inherit;font-size:1.05rem;font-weight:400;letter-spacing:-.02em;min-width:min(280px,100%);min-height:52px;border:1px solid var(--fv-green);background:var(--fv-green);color:var(--fv-linen);border-radius:999px;padding:12px 32px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.fv-btn:hover{background:#4c5737;border-color:#4c5737}
.fv-btn:disabled{opacity:.6;cursor:wait;transform:none}
.fv-contact__status{margin:0;font-size:.95rem;min-height:1.4em}
.fv-contact__status.is-ok{color:var(--fv-moss);font-weight:600}
.fv-contact__status.is-error{color:#a24a2e}

/* Rammen man syr i */
.fv-contact__hoop{display:grid;gap:12px;justify-items:center;text-align:center;min-width:0}
.fv-contact__hoop h3{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--fv-ink)}
.fv-contact__hint{margin:0;font-size:.95rem;font-weight:300;color:var(--fv-muted);max-width:38ch}
.fv-draw-wrap{width:100%;max-width:400px;padding-top:8px}
.fv-draw{display:block;margin:0 auto;touch-action:none;cursor:crosshair;filter:drop-shadow(0 6px 10px rgba(156,143,85,.12));max-width:100%}
.fv-contact.is-sent .fv-draw{animation:fv-wiggle .7s ease}
@keyframes fv-wiggle{30%{transform:rotate(-4deg) scale(1.03)}65%{transform:rotate(3deg)}}
.fv-yarns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.fv-yarn{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--fv-line);padding:0;cursor:pointer;position:relative}
.fv-yarn[aria-pressed="true"]{box-shadow:0 0 0 2px var(--fv-pill-text)}
.fv-yarn--erase{background:repeating-linear-gradient(45deg,#fff 0 4px,#ece6d4 4px 8px)}
.fv-tools{display:flex;gap:10px 16px;flex-wrap:wrap;justify-content:center;align-items:center}
.fv-tool{font:inherit;font-size:.9rem;font-weight:300;letter-spacing:-.01em;border:1px solid var(--fv-line);background:var(--fv-linen);color:var(--fv-pill-text);border-radius:999px;padding:8px 18px;cursor:pointer;transition:background .25s,color .25s}
.fv-tool:hover{background:var(--fv-green);border-color:var(--fv-green);color:var(--fv-linen)}

@media (prefers-reduced-motion:reduce){.fv-contact *,.fv-contact *::before,.fv-contact *::after{animation:none!important;transition:none!important}}

.fv-check--small a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.fv-send{display:grid;gap:18px}

/* ===== Hel kontaktside: [formverk_kontakt layout="side"] ===== */
.fv-page{--fv-ink:#1f1f1c;--fv-muted:#5b5a52;--fv-line:#d6cc95;--fv-linen:#fbf9ee;--fv-green:#5f6b45;--fv-pill-text:#a99d5f;--fv-gold-deep:#9c8f55}
/* Båndet går i fuld bredde, også inde i temaets smalle indholdskolonne */
.fv-band{position:relative;overflow:hidden;background:#47552f;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.fv-band__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fv-band::after{content:"";position:absolute;inset:0;pointer-events:none}
/* Med billede eller video: kun en blød mørk tone, som på forsiden – ingen stofstruktur */
.fv-band--media::after{background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.32))}
.fv-band--media .fv-band__inner{padding:96px 20px 104px}
/* Uden billede: rolig græsgrøn flade med en svag lysning */
.fv-band--plain{background:radial-gradient(ellipse at 50% 0%,rgba(255,255,240,.10),transparent 65%),#5f6b45}
.fv-band__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:64px 20px 70px;display:grid;justify-items:center;text-align:center;gap:10px}
.fv-band__title{margin:0;font-family:"FV Pinyon","Pinyon Script",cursive;font-weight:400;font-size:clamp(3.5rem,10vw,7rem);line-height:1.1;color:#f3e3a3;letter-spacing:0}
.fv-band__inner p{margin:0;color:#fff;font-weight:300;letter-spacing:-.01em;max-width:52ch;font-size:1.08rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}

form.fv-contact--page{display:block}
.fv-step{padding-top:72px;max-width:1180px;margin:0 auto}
.fv-step h2,.fv-contact--page .fv-contact__hoop h2{text-align:center;font-size:clamp(1.7rem,3vw,2.2rem);font-weight:700;letter-spacing:-.03em;margin:0 0 10px;line-height:1.15;color:var(--fv-ink);text-wrap:balance}
.fv-step__sub,.fv-contact--page .fv-contact__hint{text-align:center;color:var(--fv-muted);font-weight:300;margin:0 auto 36px;max-width:50ch;font-size:1rem}
.fv-contact--page .fv-contact__hint{margin-bottom:8px}
.fv-contact--page .fv-pills{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1080px;margin:0 auto}
@media (max-width:820px){.fv-contact--page .fv-pills{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fv-contact--page .fv-pill span{min-height:56px;font-size:1.1rem}
@media (max-width:520px){.fv-contact--page .fv-pill span{font-size:.95rem;padding:8px 10px;min-height:50px}}
.fv-details{max-width:760px;margin:0 auto;display:grid;gap:26px}
.fv-details .fv-contact__row{gap:26px}
.fv-contact--page .fv-contact__hoop .fv-draw-wrap{max-width:340px}
.fv-contact--page .fv-send{justify-items:center;text-align:center;padding-top:56px}
.fv-contact--page .fv-send .fv-check--small{max-width:46ch;text-align:left}
.fv-contact--page .fv-btn{justify-self:center;min-width:min(320px,100%);min-height:56px;font-size:1.1rem}
.fv-chicks{display:flex;justify-content:space-around;gap:16px;flex-wrap:wrap;max-width:1080px;margin:88px auto 0}
.fv-chicks canvas{width:110px;height:auto;aspect-ratio:12/10}
.fv-direct{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;max-width:900px;margin:48px auto 0;text-align:center}
.fv-direct h3{margin:0 0 4px;font-size:1rem;font-weight:700;letter-spacing:-.02em;color:var(--fv-ink)}
.fv-direct p{margin:0;font-weight:300;color:var(--fv-muted)}
.fv-direct a{color:inherit;text-decoration-color:var(--fv-line);text-underline-offset:3px}
