/* FAKTIVE sektion 12 2026: "Kontakt" (#demo).
   Hører sammen med assets/sektion12-2026.js, som bygger opmærkningen; uden JavaScript gælder
   de gamle .fform-regler i index.html, og sektionen står som før.

   Sektionen forbliver aubergine, så den står klart efter de lyse priser. Formularen er ikke
   længere en hvid boks, men mørke felter med hårfine kanter, synlige navne og fejl ved feltet.
   1  foto i venstre halvdel (zoomer langsomt ud, driver med scrollen), teksten nederst på fotoet
   2  hårfine ringe, der breder sig ud fra telefonnummeret som et signal
   Farver: aubergine #3C2A44, mørk #2C1F33, creme #F2E7DC, sand #D7B7A3, orange #E45724. */

#demo.s12-klar{--s12-creme:#F2E7DC; --s12-sand:#D7B7A3; --s12-daemp:#B9A095; --s12-orange:#E45724;
  --s12-streg:rgba(242,231,220,.14); --s12-ud:cubic-bezier(.16,1,.3,1);
  position:relative;overflow:clip;isolation:isolate;background:#3C2A44}
#demo.s12-klar .s12{position:relative;z-index:1;align-items:center}

/* ---------- tekst ---------- */
#demo.s12-klar .s12-h2{margin:0 0 18px;color:#fff;font-family:var(--font-display);font-stretch:125%;font-weight:400;
  font-size:clamp(32px,3.6vw,50px);line-height:1.06;letter-spacing:-.015em;max-width:12em}
.s12-ord{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.s12-ord > span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--s12-ud) calc(var(--o) * 60ms)}
.s12-inde .s12-ord > span{transform:none}
#demo.s12-klar .s12-lede{margin:0 0 22px;max-width:28em;font-size:18px;line-height:1.55;font-weight:300;color:var(--s12-sand)}
/* valgfri trin mellem indledningen og telefonen (Platform): nummer og kort tekst på hårlinjer */
#demo.s12-klar .s12-trin{list-style:none;counter-reset:s12-trin;margin:0 0 26px;padding:0;max-width:30em;border-top:1px solid rgba(242,231,220,.16)}
#demo.s12-klar .s12-trin li{counter-increment:s12-trin;display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;padding:13px 0;border-bottom:1px solid rgba(242,231,220,.16)}
#demo.s12-klar .s12-trin li::before{content:counter(s12-trin);grid-row:1 / 3;font-family:var(--font-display);font-stretch:125%;font-size:15px;color:#F08A5D;line-height:1.5}
#demo.s12-klar .s12-trin b{font-weight:500;font-size:16.5px;line-height:1.4;color:#fff}
#demo.s12-klar .s12-trin span{font-size:15px;line-height:1.5;font-weight:300;color:var(--s12-sand)}
.s12-trin{transition:opacity .8s ease .3s,transform 1s var(--s12-ud) .3s}
#demo.s12-klar:not(.s12-inde) .s12-trin{opacity:0;transform:translateY(12px)}
#demo.s12-klar .s12-ring{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;margin:0;font-size:16px;color:var(--s12-sand)}
.s12-ikon{display:grid;place-items:center;width:40px;height:40px;margin-right:14px;border-radius:50%;flex:none;
  background:rgba(228,87,36,.14);box-shadow:inset 0 0 0 1px rgba(228,87,36,.4)}
.s12-ikon svg{width:18px;height:18px;fill:none;stroke:#F08A5D;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#demo.s12-klar .s12-tel{margin-left:6px;color:#fff;font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:24px;
  text-decoration:none;border-bottom:1px solid rgba(242,231,220,.3);transition:border-color .25s ease}
#demo.s12-klar .s12-tel:hover{border-color:var(--s12-orange)}
#demo.s12-klar .s12-tel:focus-visible{outline:2px solid var(--s12-orange);outline-offset:4px;border-radius:2px}
.s12-tekst .eye,.s12-lede,.s12-ring{transition:opacity .8s ease .25s,transform 1s var(--s12-ud) .25s}
#demo.s12-klar:not(.s12-inde) .s12-tekst .eye,#demo.s12-klar:not(.s12-inde) .s12-lede,#demo.s12-klar:not(.s12-inde) .s12-ring{opacity:0;transform:translateY(12px)}

/* ---------- formularen: mørke felter med hårfine kanter ---------- */
#demo.s12-klar form{position:relative;padding:32px;border-radius:20px;color:var(--s12-creme);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:inset 0 0 0 1px var(--s12-streg),0 30px 70px -30px rgba(0,0,0,.5);
  transition:opacity .8s ease .15s,transform 1s var(--s12-ud) .15s}
#demo.s12-klar:not(.s12-inde) form{opacity:0;transform:translateY(24px)}
#demo.s12-klar label{color:var(--s12-sand);font-size:13px;font-weight:500;margin:0 0 7px}
#demo.s12-klar input,#demo.s12-klar textarea{margin-bottom:16px;padding:13px 14px;border-radius:10px;font-size:15px;
  color:#FBF6F1;background:rgba(20,12,24,.35);border:1px solid rgba(242,231,220,.16);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
#demo.s12-klar input:hover,#demo.s12-klar textarea:hover{border-color:rgba(242,231,220,.28)}
#demo.s12-klar input:focus,#demo.s12-klar textarea:focus{outline:none;border-color:var(--s12-orange);
  background:rgba(20,12,24,.5);box-shadow:0 0 0 3px rgba(228,87,36,.22)}
#demo.s12-klar textarea{min-height:104px}
#demo.s12-klar .s12-ugyldig{border-color:#F08A5D !important;box-shadow:0 0 0 3px rgba(240,138,93,.16)}
#demo.s12-klar .s12-fejl{max-width:none;margin:-10px 0 14px;font-size:13px;line-height:1.4;font-weight:400;color:#F4A07A}
.s12-fejl:empty{display:none}
#demo.s12-klar .consent{margin:4px 0 16px;color:var(--s12-daemp);font-size:13px;line-height:1.5}
#demo.s12-klar .consent input{accent-color:var(--s12-orange);width:18px;height:18px;margin:1px 0 0;flex:none}
#demo.s12-klar .consent a{color:var(--s12-creme) !important;text-decoration:underline;text-underline-offset:2px}
#demo.s12-klar .consent + .s12-fejl{margin:-8px 0 16px 28px}
#demo.s12-klar button[type="submit"]{min-height:52px;border-radius:12px;background:var(--s12-orange);color:#fff;
  font-family:var(--font-text);font-stretch:100%;font-weight:500;font-size:15.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 10px 24px -10px rgba(228,87,36,.7);transition:background-color .2s ease,transform .2s ease}
#demo.s12-klar button[type="submit"]:hover{background:#EE6230;filter:none}
#demo.s12-klar button[type="submit"]:active{transform:scale(.985)}
#demo.s12-klar button[type="submit"]:focus-visible{outline:2px solid #fff;outline-offset:3px}
#demo.s12-klar .ok{background:rgba(242,231,220,.08);border:1px solid var(--s12-streg);color:var(--s12-creme);font-weight:500;
  border-radius:14px;padding:18px 20px}

/* ---------- 1: foto i venstre halvdel ---------- */
#demo.s12-klar[data-form="1"]{padding:0}
#demo.s12-klar[data-form="1"] .s12{min-height:clamp(640px,88vh,860px);padding-top:96px;padding-bottom:48px}
/* uden foto: mindre luft i bunden, så formularen og footeren hænger sammen */
#demo.s12-klar[data-form="2"]{padding-bottom:40px}
#demo.s12-klar[data-form="1"] .s12-tekst{align-self:end;padding-bottom:6px}
/* på fotoet skal det lille "Kontakt" være lysere end husets kobber for at kunne læses */
#demo.s12-klar .s12-tekst .eye{color:#F08A5D !important}
.s12-foto picture{display:contents}
.s12-foto{position:absolute;left:0;top:0;bottom:0;width:52%;margin:0;overflow:hidden;z-index:0;
  /* toner ud mod formularen og ned mod footeren; helt gennemsigtig lidt før kanten, så den sidste
     delvise pixel (bredden er ikke et helt antal pixel) ikke viser sig som en lys streg */
  -webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 97%),linear-gradient(180deg,#000 62%,transparent 97%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 58%,transparent 97%),linear-gradient(180deg,#000 62%,transparent 97%);
  mask-composite:intersect;
  /* masken må ikke gentages: bredden er ikke et helt antal pixel, og en ny kopi af masken
     ville ellers begynde helt synlig i den sidste pixel og vise sig som en lys streg */
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  opacity:0;transition:opacity 1.2s ease}
.s12-inde .s12-foto{opacity:1}
.s12-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 20%;will-change:transform;
  transform:scale(calc(1.08 - var(--s12-p,.5) * .08)) translate3d(0,calc((var(--s12-p,.5) - .5) * -30px),0)}
/* mørkt ned mod bunden, så teksten kan læses på fotoet */
.s12-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(44,31,51,.94) 0%,rgba(44,31,51,.72) 30%,rgba(44,31,51,.12) 62%,rgba(44,31,51,.2) 100%)}

/* ---------- 2: ringe fra telefonnummeret ---------- */
.s12-signal{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 92%);mask-image:linear-gradient(180deg,#000 45%,transparent 92%)}
.s12-signal svg{position:absolute;left:var(--cx,25%);top:var(--cy,60%);width:1300px;height:1300px;transform:translate(-50%,-50%);overflow:visible}
/* kun levende ringe: de faste hårfine ringe er fjernet (brugeren 2026-10-01: for mange ringe) */
.s12-boelge{fill:none;stroke:rgba(242,231,220,.32);stroke-width:1.2;vector-effect:non-scaling-stroke;
  transform-origin:0 0;transform:scale(.05);opacity:0;animation:s12-boelge 7.5s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay:calc(var(--r) * 1.5s)}
@keyframes s12-boelge{0%{transform:scale(.05);opacity:0}8%{opacity:1}100%{transform:scale(3.4);opacity:0}}
/* peger man på nummeret, går signalet hurtigere */
.s12-kalder .s12-boelge{animation-duration:3.2s;animation-delay:calc(var(--r) * .64s)}
#demo.s12-klar[data-form="2"]::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(900px 600px at var(--cx,25%) var(--cy,60%),rgba(90,63,99,.35),transparent 70%);
  /* lysskæret og ringene toner helt ud, før sektionen slutter, så kontakt og footer står som én flade
     uden en kant, hvor det lysere felt stopper */
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 92%);mask-image:linear-gradient(180deg,#000 45%,transparent 92%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ---------- glidende overgang til footeren ----------
   Samme aubergine og samme kornede struktur som footeren (sat af JavaScript ud fra footerens egen
   baggrund), og footerens streg i toppen fjernes, så kontakt og footer står som én flade. */
#demo.s12-klar ~ footer{border-top:0 !important;box-shadow:none !important;
  /* sektionens højde ender på en brøkdel af en pixel; uden overlap skinner sidens lyse baggrund
     igennem som en tynd streg mellem de to flader */
  margin-top:-2px !important}

/* ---------- kontakt og footer som én sektion ----------
   Bruges på undersiderne: kontakten (#demo) og footeren ligger i .s12-slut, som bærer den fælles baggrund: aubergine med
   footerens kornede struktur. Lysskæret og ringene fra telefonikonet fylder hele rammen, også
   bag footeren, så der ingen kant er mellem de to. */
.s12-slut{position:relative;isolation:isolate;overflow:clip;
  background:#3C2A44 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.s12-slut > #demo.s12-klar,.s12-slut > footer{background:none !important}
/* lagene i kontakten måles ud fra rammen i stedet for sektionen */
.s12-slut > #demo.s12-klar{position:static;overflow:visible}
.s12-slut > footer{position:relative;z-index:1}
.s12-slut .s12-signal,.s12-slut > #demo.s12-klar::after{-webkit-mask-image:none;mask-image:none}

/* ---------- smalle skærme ---------- */
@media (max-width:899px){
  #demo.s12-klar .s12{grid-template-columns:1fr;gap:36px}
  #demo.s12-klar[data-form="1"] .s12{min-height:0;padding-top:300px;padding-bottom:64px}
  .s12-foto{width:100%;bottom:auto;height:520px;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent);
    -webkit-mask-composite:source-over;mask-composite:add}
  .s12-foto img{object-position:35% 18%}
  #demo.s12-klar form{padding:22px}
  .s12-signal svg{width:900px;height:900px}
}
@media (prefers-reduced-motion:reduce){
  .s12-ord > span{transform:none !important}
  .s12-foto img{transform:none}
  .s12-boelge{animation:none;opacity:.25;transform:scale(1.4)}
  #demo.s12-klar *{transition-duration:.01ms !important;transition-delay:0s !important}
}