/* ==========================================================================
   Resultater 7 (undersiden /resultater7, kladde)
   Prikket papir, tusch og håndskrift (Emil, 3.10.2026, efter kladden
   "JustStatics Mennesker"). Siden bygges af scripts/byg-resultater7.js.
   Menu og footer er de samme som på resten af sitet.

   Kun de fire kunder, hver i én smal spalte: kundetypen med håndskrift, den
   stærkeste sætning stort, resten som løbende linjer. Tallet i hver sætning
   har en orange tuschstreg bag sig. Ingen kort, ingen skygger på teksten,
   ingen lister.

   Papirfarven, prikkerne og håndskriften (Caveat) findes ikke i grundsættet.
   Bliver udtrykket valgt, skal de ind dér som tokens.
   ========================================================================== */

.r7 { --r7-papir: #F4F3EF; --r7-prik: #D9D6CE; --r7-linje: #E3E0D9; --r7-daempet: #6E6B64;
  --r7-haand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  background-color: var(--r7-papir); background-image: radial-gradient(var(--r7-prik) 1.1px, transparent 1.3px); background-size: 22px 22px;
  color: var(--ink); padding: clamp(3.5rem, 7vw, 7rem) clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 8rem); }
.r7-ark { max-width: 44rem; margin: 0 auto; display: grid; gap: clamp(3.5rem, 6vw, 6rem); }

/* Overskriften må være bredere end spalten. */
.r7 .r7-h1 { margin: 0 calc(50% - 50vw + 1rem); text-align: center; font: 700 clamp(2.25rem, 1rem + 4.6vw, 5.5rem)/.98 'Poppins', sans-serif; letter-spacing: -.05em; color: var(--ink); text-wrap: balance; }
.r7-h1 span { color: var(--orange); }

/* Én kunde */
.r7-kunde { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); }
.r7 .r7-kunde p { margin: 0; font: 500 clamp(1.1875rem, .95rem + .9vw, 1.75rem)/1.3 'Poppins', sans-serif; letter-spacing: -.025em; color: var(--ink); text-wrap: pretty; }
.r7 .r7-kunde p.r7-stor { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); line-height: 1.08; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; }
.r7 .r7-kunde p.r7-hvem { font: 700 clamp(1.5rem, 1.2rem + .9vw, 2rem)/1.05 var(--r7-haand); letter-spacing: 0; color: var(--orange-strong); transform: rotate(-1deg); transform-origin: left center; }

/* Tallet i en sætning er fedt. Den orange tuschstreg bag tallet er taget af (Emil, 3.10.2026). */
.r7-mk { position: relative; z-index: 0; white-space: nowrap; font-weight: 700; }

/* Stregen mellem to kunder */
.r7-streg { height: 2px; width: 4.5rem; background: var(--ink); border-radius: 2px; }

/* Staticen, der er tapet på papiret, med en håndskrevet note */
.r7-tapet { position: relative; max-width: 24rem; margin-top: clamp(1rem, 2vw, 1.75rem); }
.r7-foto { display: block; padding: 6px; background: var(--white); border: 1px solid var(--r7-linje); border-radius: 12px; transform: rotate(-1.5deg); box-shadow: 0 22px 48px -30px rgb(0 0 0 / .35); }
.r7-foto img { display: block; width: 100%; height: auto; border-radius: 8px; }
.r7-tape { position: absolute; z-index: 1; top: -14px; left: 50%; width: 7.5rem; height: 1.875rem; background: rgb(249 115 22 / .32); border-radius: 2px; transform: translateX(-50%) rotate(-3deg); }
.r7 .r7-kunde p.r7-note { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.375rem; padding-left: 1rem; font: 700 clamp(1.5rem, 1.2rem + .9vw, 2rem)/1.05 var(--r7-haand); letter-spacing: 0; transform: rotate(-1deg); }
.r7-note svg { flex: none; width: 2.875rem; margin-top: -1.125rem; overflow: visible; }
.r7-note svg path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.r7-note a { color: var(--orange-strong); text-decoration: underline; text-underline-offset: .15em; }

/* Afslutningen */
.r7-slut { display: flex; justify-content: center; }
/* Knappen er orange som på forsiden (Emil, 3.10.2026); før var den sort. */
.r7-knap { font: 600 1rem 'Poppins', sans-serif; padding: .875rem 1.375rem; border-radius: 10px; background: var(--orange); color: var(--white); text-decoration: none; }
.r7-knap:not(.r7-knap--lys):hover { background: var(--orange-strong); }
.r7-knap:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- Case-siden /resultater7/vue: samme papir, to spalter --------------------- */
.r7-ark--bred { max-width: 68rem; }
.r7-casetop { display: grid; justify-items: center; gap: clamp(1.25rem, 2vw, 1.75rem); }
.r7-tilbage { justify-self: start; font: 400 .875rem 'Poppins', sans-serif; color: var(--r7-daempet); text-decoration: none; }
.r7-tilbage:hover { color: var(--ink); }
.r7 .r7-logoer { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.75rem; }
.r7-logoer img { display: block; width: auto; }
.r7-logo-vue { height: clamp(2rem, 1rem + 2.4vw, 4rem); }
.r7-logo-js { height: clamp(1.5rem, .75rem + 1.8vw, 3rem); }
.r7-logoer span { font: 300 clamp(1.5rem, 1rem + 1vw, 2.25rem)/1 'Poppins', sans-serif; color: var(--r7-daempet); }
.r7 .r7-casetop p.r7-hvem { margin: 0; font: 700 clamp(1.5rem, 1.2rem + .9vw, 2rem)/1.05 var(--r7-haand); color: var(--orange-strong); transform: rotate(-1deg); }

/* Et foto med tape. På case-siden er .r7-foto en span, ikke et link. */
span.r7-foto { position: relative; transform: none; }
span.r7-foto.er-h { transform: rotate(1.5deg); }
span.r7-foto.er-v { transform: rotate(-1.5deg); }
.r7-vifte { display: flex; justify-content: center; align-items: flex-end; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.r7-vifte span.r7-foto { width: clamp(7rem, 3rem + 13vw, 15rem); }
.r7-vifte span.r7-foto:nth-child(1) { transform: translate(12%, 5%) rotate(-6deg); }
.r7-vifte span.r7-foto:nth-child(2) { z-index: 1; width: clamp(8rem, 3.5rem + 15vw, 17.5rem); }
.r7-vifte span.r7-foto:nth-child(3) { transform: translate(-12%, 5%) rotate(6deg); }
.r7-vifte .r7-tape { width: 4.5rem; height: 1.375rem; top: -10px; }

/* To spalter: tekst og foto. .er-omvendt sætter fotoet til venstre. */
.r7-to { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.r7-to.er-omvendt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.r7-to.er-omvendt > .r7-kunde { order: 2; }
.r7-to--top { align-items: start; }
.r7 .r7-tal { margin: 0; display: grid; gap: .5rem; }
.r7-tal .r7-stor { display: block; font: 700 clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem)/1.08 'Poppins', sans-serif; letter-spacing: -.045em; color: var(--ink); }
.r7 .r7-kunde p.r7-format { font: 500 .9375rem/1.4 'Poppins', sans-serif; letter-spacing: 0; }
.r7-format span { color: var(--r7-daempet); font-weight: 400; margin-right: .375rem; }
.r7-format span:not(:first-child) { margin-left: 1rem; }
/* Forklaringen er brødtekst, ikke en af de store linjer. */
.r7.r7--case .r7-to:not(.r7-to--top) .r7-kunde p:not([class]) { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); line-height: 1.45; font-weight: 400; letter-spacing: -.01em; color: var(--r7-daempet); max-width: 30rem; }
.r7 .r7-h2 { margin: 0; font: 700 clamp(2rem, 1.2rem + 2.8vw, 3.5rem)/1 'Poppins', sans-serif; letter-spacing: -.05em; color: var(--ink); }
.r7-h2 span { color: var(--orange); }
.r7-slut { gap: .75rem; flex-wrap: wrap; }
.r7-knap--lys { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

@media (max-width: 820px) {
  .r7-to, .r7-to.er-omvendt { grid-template-columns: 1fr; }
  .r7-to.er-omvendt > .r7-kunde { order: 0; }
  .r7-to > .r7-foto { max-width: 24rem; }
}

/* --- Foto med håndskrevne noter og pile (case-siden) ---------------------------
   Figuren er 160 x 100. Fotoet er kvadratet i den ene side, noterne står i resten, og
   pilene (SVG i samme mål) peger fra noten ind på stedet i billedet. Skriften følger
   figurens bredde (cqw), så noter og pile passer sammen i alle bredder. */
.r7-to--anno { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.r7-to--anno.er-omvendt { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.r7-anno { position: relative; margin: 0; aspect-ratio: 160 / 100; container-type: inline-size; }
.r7-anno span.r7-foto { position: absolute; top: 0; right: 0; width: 62.5%; transform: none; }
.r7-anno.er-v span.r7-foto { right: auto; left: 0; }
.r7-pile { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.r7-pile path { fill: none; stroke: var(--orange-strong); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.r7-noter { position: absolute; top: 0; left: 0; width: 33%; height: 100%; font: 700 clamp(.9375rem, 3.5cqw, 1.625rem)/1 var(--r7-haand); color: var(--ink); text-align: right; }
.r7-anno.er-v .r7-noter { left: 66.5%; text-align: left; }
.r7-noter b { display: block; font-weight: 700; color: var(--orange-strong); transform: rotate(-1deg); }
.r7-noter span { position: absolute; top: var(--y); left: 0; right: 0; text-wrap: balance; }
@media (max-width: 820px) {
  .r7-to--anno, .r7-to--anno.er-omvendt { grid-template-columns: 1fr; }
}

/* Den anden linje under tallet på case-siden: dæmpet, så kun den første linje råber. */
.r7-tal .r7-anden { display: block; font: 500 clamp(1.0625rem, .95rem + .5vw, 1.375rem)/1.3 'Poppins', sans-serif; letter-spacing: -.015em; color: var(--r7-daempet); }
.r7-tal .r7-anden b { font-weight: 600; color: var(--ink); }
/* Mere luft mellem toppen og den første static. */
.r7--case .r7-casetop { margin-bottom: clamp(2rem, 4vw, 4.5rem); }

/* --- Fotoet i midten med kort på begge sider (case-siden) ----------------------
   Tallet står centreret over. Kortene står i en spalte på hver side af fotoet og
   går lidt ind over billedets kant. --y er kortets top i procent af fotoets højde,
   --r er hældningen. På smalle skærme lægger kortene sig i to spalter under fotoet. */
.r7-scenesek { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.r7-scenesek .r7-tal { justify-items: center; text-align: center; }
.r7-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem) minmax(0, 1fr); }
.r7-scene > span.r7-foto { grid-column: 2; grid-row: 1; }
.r7-kortkol { position: relative; z-index: 2; grid-row: 1; }
.r7-kortkol.er-venstre { grid-column: 1; }
.r7-kortkol.er-hoejre { grid-column: 3; }
.r7 .r7-kort { position: absolute; top: var(--y); width: min(17rem, 100% + 2.5rem); margin: 0; padding: .875rem 1rem 1rem; display: grid; gap: .375rem;
  background: var(--white); border: 1px solid var(--r7-linje); border-radius: 12px; box-shadow: 0 16px 32px -20px rgb(0 0 0 / .4);
  font: 500 .9375rem/1.35 'Poppins', sans-serif; letter-spacing: -.005em; color: var(--ink); transform: rotate(var(--r, 0deg)); }
.er-venstre .r7-kort { right: -2.5rem; }
.er-hoejre .r7-kort { left: -2.5rem; }
.r7-kort b { font-size: .6875rem; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--orange-strong); }
@media (max-width: 900px) {
  .r7-scene { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .r7-scene > span.r7-foto { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 26rem); margin-bottom: .5rem; }
  .r7-kortkol, .r7-kortkol.er-venstre, .r7-kortkol.er-hoejre { grid-column: auto; grid-row: 2; display: grid; gap: .75rem; align-content: start; }
  .r7 .r7-kort, .er-venstre .r7-kort, .er-hoejre .r7-kort { position: static; width: auto; transform: none; }
}
@media (max-width: 480px) {
  .r7-scene { grid-template-columns: 1fr; }
  .r7-kortkol.er-hoejre { grid-row: 3; }
}

/* Mere luft mellem den anden static og tallene for hele batchen. */
.r7--case .r7-to--top { margin-top: clamp(2rem, 4vw, 4.5rem); }

/* --- Fotoet i midten med håndskrevne noter og pile (case-siden, i brug) --------
   Figuren er 220 x 100: fotoet er kvadratet i midten, noterne står på hver side, og
   pilene (SVG i samme mål) peger fra noten ind på stedet. Skriften følger figurens
   bredde (cqw). Håndskriften er sat lidt større og med mere luft mellem linjerne end
   resten af håndskriften på siden, så den er let at læse. */
.r7-fig { position: relative; margin: 0 auto; width: 100%; max-width: 60rem; aspect-ratio: 220 / 100; container-type: inline-size; }
.r7-fig > span.r7-foto { position: absolute; top: 0; left: 27.2727%; width: 45.4545%; transform: none; }
.r7-fig .r7-pile path { stroke-width: 1; }
.r7-n { position: absolute; top: var(--y); width: 24.5%; font: 700 clamp(1.0625rem, 2.7cqw, 1.75rem)/1.12 var(--r7-haand); color: var(--ink); text-wrap: balance; }
.r7-n.er-v { left: 0; text-align: right; }
.r7-n.er-h { left: 75.5%; text-align: left; }
.r7 .r7-scenesek p.r7-format { margin: 0; text-align: center; font: 500 .9375rem/1.4 'Poppins', sans-serif; letter-spacing: 0; color: var(--ink); }
@media (max-width: 700px) {
  .r7-fig { aspect-ratio: auto; display: grid; gap: 1rem; }
  .r7-fig > span.r7-foto { position: relative; left: auto; width: 100%; }
  .r7-fig .r7-pile { display: none; }
  .r7-fig figcaption { display: grid; gap: .625rem; }
  .r7-n, .r7-n.er-v, .r7-n.er-h { position: static; width: auto; text-align: left; font-size: 1.375rem; }
}

/* Noterne ved billedet står i sitets almindelige skrift (Emil, 3.10.2026): håndskriften var svær
   at læse. Kun pilene er håndtegnede. */
.r7-n { font: 500 clamp(.875rem, 1.75cqw, 1.125rem)/1.35 'Poppins', sans-serif; letter-spacing: -.01em; }
/* Mere luft mellem de to billedsektioner. */
.r7--case .r7-scenesek + .r7-scenesek { margin-top: clamp(2.5rem, 5vw, 5.5rem); }
@media (max-width: 700px) { .r7-n, .r7-n.er-v, .r7-n.er-h { font-size: 1rem; } }

/* --- Resultatsiden i to spalter: teksten og ÉN tegning (eller kundens static) ----
   Aldrig to tegninger i samme sektion. .er-modsat sætter tegningen til venstre.
   Tegningerne er håndtegnede SVG'er: blæk (streger), blyant (stiplet og skravering)
   og orange (vores tal). Teksten i dem er håndskrift. */
.r7-kunde--to { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.r7-kunde--to.er-modsat { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); }
.r7-kunde--to.er-modsat > .r7-tekst { grid-column: 2; grid-row: 1; }
.r7-kunde--to.er-modsat > .r7-tegning { grid-column: 1; grid-row: 1; }
.r7-tekst { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); min-width: 0; }
.r7-tegning { min-width: 0; }
.r7-tegning .r7-tapet { margin-top: 0; }
.r7-svg { display: block; width: 100%; height: auto; overflow: visible; }
.r7-svg text { font-family: var(--r7-haand); font-weight: 700; }
.r7-svg .t-blaek { fill: var(--ink); }
.r7-svg .t-orange { fill: var(--orange-strong); }
.r7-svg .t-blyant { fill: var(--r7-daempet); }
.r7-svg .s-blaek { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.r7-svg .s-blyant { fill: none; stroke: var(--r7-daempet); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 6; }
.r7-svg .s-orange { fill: none; stroke: var(--orange); stroke-linecap: round; stroke-linejoin: round; }
.r7-svg .f-orange { fill: var(--orange); opacity: .92; }
.r7-svg .f-skrav { fill: url(#r7-skrav); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.r7-svg .ru { filter: url(#r7-ru); }
@media (max-width: 820px) {
  .r7-kunde--to, .r7-kunde--to.er-modsat { grid-template-columns: minmax(0, 1fr); }
  .r7-kunde--to.er-modsat > .r7-tekst, .r7-kunde--to.er-modsat > .r7-tegning { grid-column: auto; grid-row: auto; }
  .r7-tegning { max-width: 27rem; }
}

/* Stemplet: et tal, der er stemplet på papiret (tegning nr. 10 i artefaktet "Papirvisualiseringer"). */
.r7-stempel { width: max-content; max-width: 100%; display: grid; gap: .1rem; padding: .7rem 1.25rem .8rem; margin: 1rem 0 1.25rem .75rem; border: 5px solid var(--orange-strong); border-radius: 10px; outline: 2px solid var(--orange-strong); outline-offset: 4px; color: var(--orange-strong); transform: rotate(-5deg); opacity: .9; filter: url(#r7-ru); }
.r7-stempel b { font: 800 clamp(3rem, 2rem + 4vw, 4.5rem)/.9 'Poppins', sans-serif; letter-spacing: -.05em; }
.r7-stempel span { font: 700 .875rem/1.2 'Poppins', sans-serif; letter-spacing: .12em; text-transform: uppercase; }

/* --- Resten af sætningerne: en kuglepen skriver dem én ad gangen ---------------
   Sætningerne skrives med håndskrift direkte på papiret (ingen kasse). Linjerne bliver
   stående, og pennen skriver videre nedad. Feltet har fra start plads til de første mange
   linjer (min-height) og ligger sidst på siden, så intet over det flytter sig, når det vokser.
   Kuglepennen flyttes af /nyt-site/resultater-skriver.js til det sted, der skrives. */
.r7-skriv { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.r7-ark-linjer { position: relative; min-height: clamp(52rem, 46rem + 14vw, 62rem); max-width: 54rem; padding-bottom: 2rem; }
.r7-skrevet { list-style: none; margin: 0; padding: 0 3.5rem 0 0; display: grid; gap: .5rem; }
.r7-skrevet li { font: 700 clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem)/1.2 var(--r7-haand); color: var(--ink); padding-bottom: .35rem; border-bottom: 1.5px dashed #CFCBC2; }
.r7-skrevet b { font-weight: 700; color: var(--orange-strong); }
.r7-skrevet li.er-slut { border-bottom: 0; color: var(--orange-strong); }
.r7-pen { position: absolute; left: 0; top: 0; height: clamp(3.5rem, 3rem + 1.6vw, 4.75rem); width: auto; max-width: none; pointer-events: none; opacity: 0; transform-origin: 50% 100%; transform: rotate(24deg); transition: opacity .3s; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .18)); }
.r7-pen.er-i-gang { opacity: 1; }
.r7 .r7-taeller { margin: 0; font: 500 .9375rem/1.4 'Poppins', sans-serif; color: var(--r7-daempet); }
.r7-taeller span { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .r7-pen { display: none; } }

/* Annonceforbruget står til højre for hver skrevet linje, i sidens egen skrift. */
.r7-skrevet li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(1rem, 2.5vw, 2rem); align-items: center; }
.r7-skrevet small { font: 500 .8125rem/1.3 'Poppins', sans-serif; letter-spacing: 0; color: var(--r7-daempet); white-space: nowrap; transition: opacity .4s; }
.r7-ark-linjer { max-width: 62rem; }
@media (max-width: 700px) { .r7-skrevet li { grid-template-columns: minmax(0, 1fr); row-gap: .15rem; } }

/* Knappen i bunden af "Ikke overbevist endnu?". Arket bliver længere, mens blyanten skriver, så en knap
   under det ville blive skubbet ned hele tiden. Den hænger i stedet fast i bunden af skærmen, så længe
   man er i sektionen, og står derfor stille. Bag den toner linjerne ud i papiret, så teksten ikke
   står oven i knappen. */
.r7-fast { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: center; margin-top: -1rem; padding: 2.75rem 0 1.25rem; background: linear-gradient(to bottom, rgb(244 243 239 / 0), var(--r7-papir) 55%); pointer-events: none; }
.r7-fast .r7-knap { pointer-events: auto; }