/* ==========================================================================
   Priser: sedler på bordet (1a)
   Emils handoff "priser-sedler" (3.10.2026). Sættes ind af scripts/priser-sedler.js,
   som scripts/byg-forside2.js kalder. Ingen JavaScript.

   Tre sedler på prikket papir: Starter, Plus og Enterprise. Plus er fremhævet med
   større luft, større pris, tydeligere skygge, beige tape og sidens eneste orange
   knap i sektionen. Sedlerne er drejet en anelse (−1°, 0,6° og −0,6°); under 900px
   står de lige og under hinanden.

   Farverne er handoffets egne brand-regler og står som egne variabler:
   espresso til tekst, kuglepen-blå til håndskrift og flueben, beige malertape.
   Fluebenet er sidens normale (en ren streg på en rund flade), ikke handoffets håndtegnede.
   ========================================================================== */

.sedler {
  --sedler-papir: #F4F3EF;         /* sidens papir (papir.css), ikke handoffets #F4F1EB: sektionen ligger i forlængelse af arket over */
  --sedler-prik: #D9D6CE;
  --sedler-blaek: #2A1F1A;         /* espresso */
  --sedler-blaek-2: #3A3028;
  --sedler-daempet: #6B625C;
  --sedler-linje: #E6E1D8;
  --sedler-orange: #F26A1B;
  --sedler-pen: #1B2A4A;           /* kuglepen-blå */
  --sedler-tape: rgb(232 220 196 / .95);
  background-color: var(--sedler-papir);
  background-image: radial-gradient(var(--sedler-prik) 1.1px, transparent 1.3px);
  background-size: 22px 22px;
  color: var(--sedler-blaek);
}
.sedler, .sedler * { box-sizing: border-box; }
/* Arket lige over priserne (ugeplanen) er samme papir, så dets revne underkant skal ikke vises:
   de to skal læses som ét ark. */
.papir:has(+ .sedler) > .papir__kant--bund { display: none; }
.sedler__indre { max-width: 1200px; margin: 0 auto; padding: 96px 24px 80px; }
/* Overskriften "Priser" vises ikke (Emil, 3.10.2026). Den står stadig i koden til skærmlæsere. */
.sedler .sedler__h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sedler__gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }

.sedler__seddel { position: relative; background: #fff; border: 1px solid var(--sedler-linje); border-radius: 6px; padding: 30px 28px; box-shadow: 0 14px 30px -26px rgb(42 31 26 / .4); }
.sedler__seddel.er-starter { transform: rotate(-1deg); }
.sedler__seddel.er-enterprise { transform: rotate(-.6deg); }
.sedler__seddel.er-plus { padding: 40px 34px; transform: rotate(.6deg); box-shadow: 0 30px 60px -32px rgb(42 31 26 / .55); }
.sedler__tape { position: absolute; width: 110px; height: 28px; background: var(--sedler-tape); top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg); }

.sedler__hoved { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sedler .sedler__navn { margin: 0; font: 700 21px 'Poppins', sans-serif; letter-spacing: -.03em; color: var(--sedler-blaek); }
.sedler__om { font: 400 13px 'Poppins', sans-serif; color: var(--sedler-daempet); }
.sedler__pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 20px; }
.sedler__beloeb { font: 700 48px/1 'Poppins', sans-serif; letter-spacing: -.055em; white-space: nowrap; }
.er-plus .sedler__beloeb { font-size: 60px; }
.er-enterprise .sedler__beloeb { font-size: 40px; }
.sedler__enhed { font: 400 15px 'Poppins', sans-serif; color: var(--sedler-daempet); }
.sedler__antal { margin-top: 4px; font: 700 24px 'Caveat', 'Segoe Print', cursive; color: var(--sedler-pen); }

.sedler__knap { display: block; margin: 20px 0 22px; padding: 13px; border-radius: 10px; text-align: center; font: 600 15px 'Poppins', sans-serif; text-decoration: none; color: var(--sedler-blaek); background: #fff; border: 1.5px solid var(--sedler-blaek); transition: background .16s; }
.sedler__knap:hover { background: var(--sedler-papir); }
.sedler__knap.er-primaer { background: var(--sedler-orange); border-color: var(--sedler-orange); color: #fff; }
.sedler__knap.er-primaer:hover { background: #D95A10; border-color: #D95A10; }
.sedler__knap:focus-visible { outline: 2px solid var(--sedler-orange); outline-offset: 3px; }

.sedler .sedler__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sedler .sedler__liste li { display: flex; gap: 10px; align-items: center; margin: 0; font: 400 15px 'Poppins', sans-serif; color: var(--sedler-blaek); }
/* Sidens normale flueben (som i den gamle prisliste): en lille rund flade med et flueben, orange på Plus.
   Handoffets håndtegnede flueben hang på et SVG-filter og blev ikke vist på telefoner. */
.sedler__liste svg { flex: none; width: 1.4em; height: 1.4em; padding: .25em; border-radius: 50%; background: var(--sedler-linje); color: var(--sedler-blaek); }
.er-plus .sedler__liste svg { background: rgb(249 115 22 / .12); color: #EA580C; }

.sedler .sedler__fod { margin: 28px 0 0; font: 400 13px 'Poppins', sans-serif; color: var(--sedler-blaek-2); }

@media (max-width: 900px) {
  .sedler__gitter { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sedler__seddel.er-starter, .sedler__seddel.er-plus, .sedler__seddel.er-enterprise { transform: none; }
}