/* ============================================================
   Familien Elbek
   Signaturelement: tuschstregen — 3px kant + forskudt dobbeltstreg
   på alt "fysisk": knapper, kort, videothumbs, nav.
   ============================================================ */

:root {
  --creme:    #FBF4EC;
  --rosa:     #F0BEC0;
  --rosa-dyb: #C97A82;
  --blaa:     #A9C8DD;
  --blaa-dyb: #3E6280;
  --blaek:    #2C2A2A;
  --gul:      #D9B863;
  --groen:    #7E9B76;   /* mat mosgrøn, fjerde accent */

  --kant: 3px solid var(--blaek);
  --tusch: 5px 5px 0 var(--blaek);
  --tusch-lille: 3px 3px 0 var(--blaek);

  /* sideluft: 5vw, men aldrig bredere indhold end 1600px */
  --side: max(5vw, calc((100% - 1600px) / 2));

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --broed: "Source Serif 4", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* konfettilaget måler sig efter hele sidens højde */
  position: relative;
  /* konfetti strøet ud over den cremede baggrund */
  background-color: var(--creme);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><g opacity='0.55'><rect x='237' y='449' width='7' height='15' rx='2' fill='%237E9B76' transform='rotate%28143 240 456%29'/><rect x='237' y='266' width='7' height='15' rx='2' fill='%23A9C8DD' transform='rotate%28150 240 273%29'/><rect x='100' y='417' width='7' height='15' rx='2' fill='%237E9B76' transform='rotate%28131 103 424%29'/><rect x='328' y='320' width='7' height='15' rx='2' fill='%23F0BEC0' transform='rotate%2847 331 327%29'/><rect x='234' y='161' width='7' height='15' rx='2' fill='%23F0BEC0' transform='rotate%2836 237 168%29'/><rect x='281' y='420' width='7' height='15' rx='2' fill='%23F0BEC0' transform='rotate%28177 284 427%29'/><rect x='310' y='208' width='7' height='15' rx='2' fill='%23C97A82' transform='rotate%28115 313 215%29'/><rect x='338' y='86' width='7' height='15' rx='2' fill='%23F0BEC0' transform='rotate%28159 341 93%29'/><rect x='431' y='276' width='7' height='15' rx='2' fill='%23F0BEC0' transform='rotate%2816 434 283%29'/><rect x='24' y='103' width='7' height='15' rx='2' fill='%23C97A82' transform='rotate%2861 27 110%29'/><rect x='21' y='404' width='7' height='15' rx='2' fill='%23D9B863' transform='rotate%28118 24 411%29'/><rect x='231' y='308' width='7' height='15' rx='2' fill='%23C97A82' transform='rotate%2850 234 315%29'/><rect x='125' y='333' width='7' height='15' rx='2' fill='%237E9B76' transform='rotate%2875 128 340%29'/><rect x='8' y='345' width='7' height='15' rx='2' fill='%237E9B76' transform='rotate%2821 11 352%29'/><rect x='341' y='148' width='7' height='15' rx='2' fill='%23C97A82' transform='rotate%28104 344 155%29'/><rect x='483' y='436' width='7' height='15' rx='2' fill='%23D9B863' transform='rotate%2821 486 443%29'/><rect x='167' y='394' width='7' height='15' rx='2' fill='%23C97A82' transform='rotate%2858 170 401%29'/><rect x='153' y='21' width='7' height='15' rx='2' fill='%23C97A82' transform='rotate%2817 156 28%29'/><rect x='398' y='61' width='7' height='15' rx='2' fill='%23F0BEC0' transform='rotate%28102 401 68%29'/><rect x='439' y='154' width='7' height='15' rx='2' fill='%23F0BEC0' transform='rotate%2898 442 161%29'/><circle cx='498' cy='16' r='4' fill='%23F0BEC0'/><circle cx='117' cy='115' r='4' fill='%23F0BEC0'/><circle cx='248' cy='200' r='4' fill='%237E9B76'/><circle cx='222' cy='45' r='4' fill='%23C97A82'/><circle cx='330' cy='109' r='4' fill='%23D9B863'/><circle cx='180' cy='52' r='4' fill='%23D9B863'/><circle cx='178' cy='15' r='4' fill='%237E9B76'/><circle cx='396' cy='480' r='4' fill='%23F0BEC0'/><circle cx='76' cy='134' r='4' fill='%23F0BEC0'/><circle cx='13' cy='38' r='4' fill='%237E9B76'/><circle cx='416' cy='257' r='4' fill='%23A9C8DD'/><circle cx='357' cy='294' r='4' fill='%23A9C8DD'/><path d='M237 268 l16 0' stroke='%23A9C8DD' stroke-width='4' stroke-linecap='round' transform='rotate%2848 245 268%29'/><path d='M222 337 l16 0' stroke='%23F0BEC0' stroke-width='4' stroke-linecap='round' transform='rotate%2898 230 337%29'/><path d='M210 223 l16 0' stroke='%23F0BEC0' stroke-width='4' stroke-linecap='round' transform='rotate%2854 218 223%29'/><path d='M146 450 l16 0' stroke='%23D9B863' stroke-width='4' stroke-linecap='round' transform='rotate%28151 154 450%29'/><path d='M461 18 l16 0' stroke='%23A9C8DD' stroke-width='4' stroke-linecap='round' transform='rotate%2853 469 18%29'/><path d='M209 445 l16 0' stroke='%23C97A82' stroke-width='4' stroke-linecap='round' transform='rotate%28154 217 445%29'/><path d='M59 29 l16 0' stroke='%23A9C8DD' stroke-width='4' stroke-linecap='round' transform='rotate%2837 67 29%29'/><path d='M234 140 l16 0' stroke='%23C97A82' stroke-width='4' stroke-linecap='round' transform='rotate%282 242 140%29'/><path d='M176 433 l16 0' stroke='%237E9B76' stroke-width='4' stroke-linecap='round' transform='rotate%2875 184 433%29'/><path d='M45 46 l16 0' stroke='%23A9C8DD' stroke-width='4' stroke-linecap='round' transform='rotate%2823 53 46%29'/><path d='M306 333 l16 0' stroke='%23F0BEC0' stroke-width='4' stroke-linecap='round' transform='rotate%2862 314 333%29'/></g></svg>");
  background-size: 520px 520px;
  color: var(--blaek);
  font-family: var(--broed);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.075rem);
  line-height: 1.65;
  overflow-x: hidden;
}

/* papirkorn over hele baggrunden */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  color: var(--blaa-dyb);
}

p { margin: 0 0 1em; }

a { color: var(--rosa-dyb); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--blaa-dyb); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--rosa-dyb);
  outline-offset: 3px;
}

.spring-over {
  /* gemmes opad, ikke ud til siden — et element 9999px ude i venstre
     side gør dokumentet bredere end skærmen */
  position: absolute;
  left: 0.75rem;
  top: -6rem;
  background: var(--gul);
  color: var(--blaek);
  padding: 0.7em 1.2em;
  border: var(--kant);
  font-family: var(--display);
}
.spring-over:focus { top: 0.75rem; z-index: 50; }

/* ---------- topbar: klistermærke-nav ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  padding: 1.1rem var(--side) 0.6rem;
}

.maerkat {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--blaek);
  background: var(--rosa);
  border: var(--kant);
  border-radius: 999px;
  padding: 0.35em 1em;
  box-shadow: var(--tusch-lille);
  transform: rotate(-2.5deg);
}
.maerkat:hover { color: var(--blaek); background: var(--gul); }

.topbar nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar nav a {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--blaek);
  background: var(--creme);
  border: 2px solid var(--blaek);
  border-radius: 999px;
  padding: 0.3em 0.85em;
}
.topbar nav li:nth-child(odd) a  { transform: rotate(1.5deg); }
.topbar nav li:nth-child(even) a { transform: rotate(-1.5deg); }
.topbar nav a:hover { background: var(--blaa); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  gap: 2rem 4rem;
  align-items: center;
  padding: 2.5rem var(--side) 3rem;
}
.hero-tekst { max-width: 60ch; }

.hero h1 {
  font-size: clamp(3.2rem, 13vw, 7.5rem);
  margin: 0 0 0.35em;
  transform: rotate(-2deg);
  transform-origin: left center;
  color: var(--blaa-dyb);
  text-shadow: 4px 4px 0 var(--rosa);
}

.undertitel {
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.4rem);
  max-width: 34ch;
  margin-bottom: 1.6rem;
}

.knapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-bottom: 1.2rem;
}

.knap {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  text-decoration: none;
  border: var(--kant);
  padding: 0.65em 1.3em;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.knap-primaer {
  background: var(--gul);
  color: var(--blaek);
  font-size: 1.2rem;
  box-shadow: var(--tusch);
  transform: rotate(-1deg);
}
.knap-primaer:hover {
  color: var(--blaek);
  transform: rotate(-1deg) translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--blaek);
}

.knap-sekundaer {
  background: transparent;
  color: var(--blaa-dyb);
  border-style: dashed;
  font-size: 1rem;
}
.knap-sekundaer:hover { background: var(--blaa); color: var(--blaek); }

/* tallene som tre små klistermærker */
.tal {
  list-style: none;
  grid-column: 1;
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}
.tal li {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blaek);
  border: 2px solid var(--blaek);
  box-shadow: var(--tusch-lille);
  padding: 0.3em 0.75em;
}
.tal li:nth-child(1) { background: var(--creme); transform: rotate(-2deg); }
.tal li:nth-child(2) { background: var(--blaa);  transform: rotate(1.5deg); }
.tal li:nth-child(3) { background: var(--groen); transform: rotate(-1deg); }

/* håndtegnet pil ned mod abonnér-knappen, som pilene på kanalbanneret */
.pil {
  display: none;
  position: relative;
  color: var(--blaa-dyb);
}
.pil em {
  position: absolute;
  right: 0;
  bottom: -6px;
  width: 7rem;
  font-family: var(--display);
  font-weight: 700;
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.1;
  transform: rotate(-4deg);
}
@media (min-width: 1100px) {
  .pil { display: block; margin: 0.4rem 0 0.9rem 1.5rem; }
}

/* kanalbanneret, hele billedet, i heroens højre side */
.hero-foto {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 1.5rem 0 0;
  transform: rotate(-1deg);
}
.hero-foto img {
  width: 100%;
  /* billedet er 949 px bredt — større end det bliver det uskarpt */
  max-width: 949px;
  border: var(--kant);
  box-shadow: var(--tusch);
  background: var(--blaa);
}

.tape {
  position: absolute;
  width: 92px;
  height: 30px;
  background: var(--gul);
  opacity: 0.85;
  border: 1px solid rgba(44, 42, 42, 0.25);
  z-index: 2;
}
.tape-1 { top: -14px; left: -18px; transform: rotate(-28deg); }
.tape-2 { bottom: -12px; right: -20px; transform: rotate(-24deg); }

/* ---------- håndtegnet adskiller ---------- */

.streg {
  border: 0;
  height: 14px;
  margin-inline: var(--side);
  background-repeat: repeat-x;
  background-size: 120px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 8 C 20 2, 40 12, 60 7 S 100 2, 120 8' fill='none' stroke='%233E6280' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- om os ---------- */

.om { padding: 3rem var(--side); }

.om-top {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: start;
}
@media (min-width: 900px) {
  .om-top { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.8fr); }
}

.om-tekst { max-width: 62ch; }

/* faktaseddel — som en note hængt op ved siden af teksten */
.seddel {
  position: relative;
  background: var(--blaa);
  border: var(--kant);
  box-shadow: var(--tusch);
  max-width: 30rem;
  justify-self: end;
  padding: 1.4rem 1.5rem 1.2rem;
  transform: rotate(1.4deg);
}
.seddel h3 {
  font-size: 1.5rem;
  margin-bottom: 0.8em;
  color: var(--blaek);
}
.seddel dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto;
  gap: 0.15rem;
}
.seddel dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blaa-dyb);
}
.seddel dd {
  margin: 0 0 0.9rem;
  line-height: 1.35;
}
.seddel dd:last-child { margin-bottom: 0; }
.tape-3 { top: -15px; left: 50%; margin-left: -46px; transform: rotate(3deg); }

.om h2 {
  font-size: clamp(2rem, 6vw, 3.2rem);
  transform: rotate(-1deg);
}

.mod-os {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin: 3rem 0 1.8rem;
  display: inline-block;
  background: var(--gul);
  color: var(--blaek);
  border: var(--kant);
  padding: 0.15em 0.6em;
  transform: rotate(-1.5deg);
  box-shadow: var(--tusch-lille);
}

.personer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem 1.5rem;
  align-items: start;
}

.person {
  position: relative;
  background: var(--creme);
  border: var(--kant);
  box-shadow: var(--tusch);
  padding: 0.7rem 0.9rem 1rem;
}
.person img {
  width: 100%;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  border: 2px solid var(--blaek);
  background: var(--rosa);
  margin-bottom: 0.7rem;
}
.person h4 {
  font-size: 1.4rem;
  margin-bottom: 0.25em;
  color: var(--blaa-dyb);
}
.person p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* rækken bølger — ingen to kort ens.
   --drej gemmes som variabel, så hover kan bygge videre på den. */
.person { transform: rotate(var(--drej)); }
.p1 { --drej: -2deg;   margin-top: 0.6rem; }
.p2 { --drej: 1.5deg;  margin-top: 2.2rem; }
.p3 { --drej: -1deg;   margin-top: 0; }
.p4 { --drej: 2.5deg;  margin-top: 1.8rem; }
.p5 { --drej: -1.5deg; margin-top: 0.4rem; }

/* holder man musen over et kort, rettes det op og løftes,
   som når man tager et billede ned fra køleskabet */
@media (hover: hover) {
  .person {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .person:hover {
    transform: rotate(0deg) translate(-3px, -6px) scale(1.03);
    box-shadow: 9px 11px 0 var(--blaek);
    z-index: 3;
  }
  .person img { transition: filter 0.18s ease; }
  .person:hover img { filter: saturate(1.15); }
}

/* står kortene stille, skal de blive stående */
@media (prefers-reduced-motion: reduce) {
  .person:hover { transform: rotate(var(--drej)); box-shadow: var(--tusch); }
}

.p1 img { background: var(--rosa); }
.p2 img { background: var(--blaa); }
.p3 img { background: var(--gul); }
.p4 img { background: var(--groen); }
.p5 img { background: var(--rosa); }

/* navnene får hver sin farve, så rækken ikke er ensfarvet */
.p1 h4 { color: var(--rosa-dyb); }
.p2 h4 { color: var(--blaa-dyb); }
.p3 h4 { color: #8A6A1F; }
.p4 h4 { color: #4A6B45; }
.p5 h4 { color: var(--rosa-dyb); }

/* ---------- videoer ---------- */

.videoer {
  padding: 3rem var(--side) 3.5rem;
  background: var(--blaa);
  border-top: var(--kant);
  border-bottom: var(--kant);
  margin-top: 2rem;
}

.videoer h2 {
  font-size: clamp(2rem, 7vw, 3.6rem);
  transform: rotate(1deg);
  margin-bottom: 1.6rem;
  color: var(--blaek);
}

.video-liste {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem 1.6rem;
}

.video-kort h3 {
  font-size: 1.15rem;
  margin: 0.7rem 0 0.15em;
  color: var(--blaek);
}
.video-kort .dato {
  margin: 0;
  font-size: 0.85rem;
  font-family: var(--display);
  font-weight: 700;
  color: var(--blaa-dyb);
}

.afspil {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: var(--kant);
  box-shadow: var(--tusch);
  background: var(--blaek);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.afspil img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.afspil:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--blaek);
}

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 52px;
  background: var(--rosa);
  border: var(--kant);
  border-radius: 12px;
}
.play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-left: 20px solid var(--blaek);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.afspil:hover .play { background: var(--gul); }

/* første video fylder to spalter og to rækker.
   Ved siden af den står to små oven på hinanden, så der ikke bliver hul. */
@media (min-width: 720px) {
  .video-kort.stor {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
  }
  .video-kort.stor .afspil { flex: 1; }
  .video-kort.stor .afspil img { height: 100%; aspect-ratio: auto; }
  .video-kort.stor h3 { font-size: 1.5rem; }
}

/* to spalter: den store fylder rækken, og fire små går lige op.
   Den sjette ville stå alene med et hul ved siden af. */
@media (min-width: 720px) and (max-width: 1099px) {
  .video-kort:nth-child(6) { display: none; }
}

/* tre spalter: den store + seks små går præcis op */
@media (min-width: 1100px) {
  .video-liste { grid-template-columns: repeat(3, 1fr); }
}

/* iframe indsættes af script.js ved klik */
.video-kort iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: var(--kant);
  box-shadow: var(--tusch);
}

.tom, .alle-videoer {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}
.alle-videoer a { color: var(--blaa-dyb); }

/* ---------- bund: følg + kontakt ---------- */

.bund {
  display: grid;
  gap: 2.5rem 4rem;
  padding: 3.5rem var(--side);
}

@media (min-width: 860px) {
  .bund { grid-template-columns: 1.4fr 1fr; }
  .hero {
    grid-template-columns: minmax(24rem, 0.8fr) minmax(0, 1.2fr);
    padding-block: 3rem 5rem;
  }
  .hero-foto { margin-top: 0; }
}

.folg h2, .kontakt h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  transform: rotate(-1deg);
}

.profiler { list-style: none; margin: 0; padding: 0; }
.profiler li { margin-bottom: 0.9rem; }
.profiler a {
  display: block;
  text-decoration: none;
  color: var(--blaek);
  background: var(--creme);
  border: var(--kant);
  box-shadow: var(--tusch-lille);
  padding: 0.7rem 1rem;
}
.profiler a strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--blaa-dyb);
}
.profiler a span { font-size: 0.95rem; }
.profiler li:nth-child(odd) a  { transform: rotate(-0.6deg); }
.profiler li:nth-child(even) a { transform: rotate(0.6deg); }
.profiler a:hover { background: var(--rosa); }

.kontakt { align-self: start; }

.mail {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  word-break: break-word;
  color: var(--blaek);
  text-decoration: none;
  background: var(--gul);
  border: var(--kant);
  box-shadow: var(--tusch);
  padding: 0.5em 0.9em;
  transform: rotate(1.5deg);
}
.mail:hover { background: var(--rosa); color: var(--blaek); }

.brands {
  margin-top: 2.5rem;
  border: var(--kant);
  border-style: dashed;
  padding: 1.2rem 1.4rem 0.6rem;
  transform: rotate(-0.8deg);
}
.brands h3 {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rosa-dyb);
}
.brands p { font-size: 0.95rem; }

/* ---------- footer ---------- */

.fod {
  border-top: var(--kant);
  background: var(--rosa);
  padding: 1.6rem var(--side);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
}
.fod p { margin: 0; }
.fod a { color: var(--blaek); }

/* ---------- små skærme ---------- */

@media (max-width: 420px) {
  .personer { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .person { padding: 0.5rem 0.6rem 0.8rem; }
  .person h4 { font-size: 1.15rem; }
  .video-liste { grid-template-columns: 1fr; }
  .video-kort.stor { grid-row: auto; }
  .tape { width: 70px; }
}

/* ---------- bevægelse ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .knap-primaer:hover, .afspil:hover { transform: none; }
}

/* ---------- ankre under den faste topbar ---------- */

[id] { scroll-margin-top: 1.5rem; }

/* ---------- tekstside (privatliv) ---------- */

.tekstside {
  max-width: 78ch;
  margin-inline: auto;
  padding: 2.5rem 1.5rem 4rem;
}

.tekstside h1 {
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  transform: rotate(-1.5deg);
  transform-origin: left center;
  margin-bottom: 0.6em;
  text-shadow: 3px 3px 0 var(--rosa);
}

.tekstside h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-top: 2.4rem;
}

.tekstside h3 {
  font-size: 1.15rem;
  margin-top: 1.8rem;
  color: var(--rosa-dyb);
}

.manchet {
  font-size: 1.15rem;
  background: var(--blaa);
  border: var(--kant);
  box-shadow: var(--tusch);
  padding: 1.1rem 1.3rem;
  transform: rotate(-0.5deg);
  margin-bottom: 2.5rem;
}

.kode {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--creme);
  border: 2px solid var(--blaek);
  padding: 0.05em 0.35em;
  white-space: nowrap;
}

.opdateret {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rosa-dyb);
  margin-top: 2.5rem;
}

.tilbage {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  text-decoration: none;
  color: var(--blaek);
  background: var(--gul);
  border: var(--kant);
  box-shadow: var(--tusch);
  padding: 0.55em 1.1em;
  transform: rotate(-1deg);
}
.tilbage:hover { background: var(--rosa); color: var(--blaek); }

/* ---------- udstyrsliste ---------- */

.grejliste {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}

.grej {
  background: var(--creme);
  border: var(--kant);
  box-shadow: var(--tusch-lille);
  padding: 1rem 1.2rem 0.8rem;
}
.grejliste li:nth-child(odd)  { transform: rotate(-0.5deg); }
.grejliste li:nth-child(even) { transform: rotate(0.5deg); }

.grej h3 {
  font-size: 1.25rem;
  margin-bottom: 0.35em;
  color: var(--blaa-dyb);
}
.grej p { margin: 0; font-size: 0.98rem; }
.grej p:empty { display: none; }

/* ---------- musemarkør: en farveblyant ---------- */
/* Tegnet som SVG direkte i CSS — ingen billedfiler, ingen ekstra hentning.
   Tallene efter url() er spidsen: det punkt der peger. */

body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg transform='rotate(-30 5 3) translate(-11 1)' stroke='%232C2A2A' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M16 2 L20 10 L12 10 Z' fill='%23F0BEC0'/%3E%3Crect x='12' y='10' width='8' height='15' fill='%23D9B863'/%3E%3Crect x='12' y='13' width='8' height='3' fill='%23A9C8DD'/%3E%3C/g%3E%3C/svg%3E") 5 3, auto;
}

/* alt man kan trykke på: samme blyant, men den gnistrer */
a, button, summary {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg transform='rotate(-30 5 3) translate(-11 1)' stroke='%232C2A2A' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M16 2 L20 10 L12 10 Z' fill='%23F0BEC0'/%3E%3Crect x='12' y='10' width='8' height='15' fill='%23D9B863'/%3E%3Crect x='12' y='13' width='8' height='3' fill='%23A9C8DD'/%3E%3C/g%3E%3Cpath d='M24 15 L26 20 L31 22 L26 24 L24 29 L22 24 L17 22 L22 20 Z' fill='%23C97A82' stroke='%232C2A2A' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, pointer;
}

/* ============================================================
   Farve og bevægelse
   ============================================================ */

/* ---------- adskillerne skifter farve ned gennem siden ---------- */

.streg:nth-of-type(2) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 8 C 20 2, 40 12, 60 7 S 100 2, 120 8' fill='none' stroke='%23C97A82' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.streg:nth-of-type(3) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 8 C 20 2, 40 12, 60 7 S 100 2, 120 8' fill='none' stroke='%237E9B76' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- profillinks: hver sin farve ---------- */

.profiler li:nth-child(1) a:hover { background: var(--rosa); }
.profiler li:nth-child(2) a:hover { background: var(--gul); }
.profiler li:nth-child(3) a:hover { background: var(--blaa); }
.profiler li:nth-child(4) a:hover { background: var(--groen); }
.profiler li:nth-child(5) a:hover { background: var(--rosa); }

.profiler a {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.profiler li:nth-child(odd) a:hover,
.profiler li:nth-child(even) a:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--blaek);
}

/* ---------- nav-mærkaterne vipper når man peger ---------- */

.topbar nav a, .maerkat {
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.topbar nav li:nth-child(odd) a:hover  { transform: rotate(-4deg) scale(1.06); }
.topbar nav li:nth-child(even) a:hover { transform: rotate(4deg) scale(1.06); }
.maerkat:hover { transform: rotate(1.5deg) scale(1.05); }

/* ---------- afspil-knappen pumper ---------- */

.play { transition: transform 0.15s ease, background-color 0.15s ease; }
.afspil:hover .play { transform: translate(-50%, -50%) scale(1.12); }

/* ---------- overskriften glider på plads ved indlæsning ---------- */

@keyframes ind-fra-venstre {
  from { opacity: 0; transform: rotate(-6deg) translateX(-24px); }
  to   { opacity: 1; transform: rotate(-2deg) translateX(0); }
}
.hero h1 { animation: ind-fra-venstre 0.6s ease-out both; }

/* ---------- sektioner toner frem når man scroller til dem ---------- */
/* .skjul sættes af script.js, så indholdet altid er synligt uden JavaScript */

.skjul {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.skjul.synlig {
  opacity: 1;
  transform: none;
}

/* ---------- alt bevægelse fra ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none; }
  .skjul, .skjul.synlig { opacity: 1; transform: none; transition: none; }
  .topbar nav a:hover, .maerkat:hover,
  .profiler a:hover, .afspil:hover .play { transform: none; }
}

/* ============================================================
   Fanart
   ============================================================ */

.fanart-top {
  padding: 2rem var(--side) 1.5rem;
  display: grid;
  gap: 1.1rem 2.5rem;
  align-items: start;
}
/* Overskrift, tekst og knap er samlet i én kasse. Ellers ville
   gitteret strække rækkerne for at nå ned til bunden af ugens fanart,
   og der ville stå store huller mellem dem. */
.fanart-intro > * { margin-top: 0; }
.fanart-intro .manchet { margin-bottom: 1.4rem; }
/* knappen faar lidt mere luft over sig — resten staar hvor det stod */
.fanart-intro > p:last-child { margin-top: 2.6rem; margin-bottom: 0; }

@media (min-width: 900px) {
  .fanart-top { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
  .fanart-top .fremhaevet { margin-top: 0.5rem; }
}
.fanart-top h1 {
  font-size: clamp(2.6rem, 9vw, 5rem);
  transform: rotate(-2deg);
  transform-origin: left center;
  text-shadow: 4px 4px 0 var(--rosa);
  margin-bottom: 0.5em;
}
.fanart-top .manchet { max-width: 46ch; margin: 0; }

.galleri-sektion, .upload-sektion { padding: 2.5rem var(--side) 3rem; }

.galleri-sektion h2, .upload-sektion h2 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  transform: rotate(-1deg);
  margin-bottom: 1.5rem;
}

/* ---------- galleriet ---------- */

.galleri {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2rem 1.5rem;
  align-items: start;
}

.vaerk {
  position: relative;
  background: var(--creme);
  border: var(--kant);
  box-shadow: var(--tusch);
  padding: 0.7rem 0.9rem 1rem;
}
.galleri li:nth-child(4n+1) { transform: rotate(-1.5deg); }
.galleri li:nth-child(4n+2) { transform: rotate(1deg);  margin-top: 1.4rem; }
.galleri li:nth-child(4n+3) { transform: rotate(-0.8deg); }
.galleri li:nth-child(4n+4) { transform: rotate(1.8deg); margin-top: 0.8rem; }

/* ---------- galleriet som én rulle ---------- */
/* Med mange tegninger blev siden meterlang. I stedet staar de paa
   én raekke man ruller sidelaens i, med en pil i hver ende. */

.rulle { position: relative; }
.rulle[hidden] { display: none; }

.galleri-rulle {
  display: flex;
  grid-template-columns: none;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* luft til de skæve kort og deres skygger */
  padding: 1.6rem 0.4rem 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rosa-dyb) var(--creme);
}
.galleri-rulle > li {
  flex: 0 0 265px;
  scroll-snap-align: start;
}
.galleri-rulle::-webkit-scrollbar { height: 10px; }
.galleri-rulle::-webkit-scrollbar-track {
  background: var(--creme);
  border: 2px solid var(--blaek);
  border-radius: 6px;
}
.galleri-rulle::-webkit-scrollbar-thumb {
  background: var(--rosa);
  border: 2px solid var(--blaek);
  border-radius: 6px;
}

.rulle-pil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* over kortene: et kort der loeftes ved hover maa ikke laegge sig
     hen over pilen */
  z-index: 4;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--gul);
  border: var(--kant);
  border-radius: 50%;
  box-shadow: var(--tusch-lille);
  cursor: pointer;
}
.rulle-pil svg { width: 60%; height: 60%; }
.rulle-pil:first-of-type { left: -0.8rem; }
.rulle-pil:last-of-type { right: -0.8rem; }
.rulle-pil:hover { background: var(--rosa); }
/* Er der ikke mere at rulle til, staar pilen bare stille og bleg. */
.rulle-pil[disabled] { opacity: 0.3; cursor: default; }

@media (max-width: 640px) {
  /* paa telefon fylder pilene for meget — der swiper man */
  .rulle-pil { display: none; }
  .galleri-rulle > li { flex-basis: 78%; }
}

/* Billedet vises i sit eget format — intet bliver beskaaret.
   Højden er til gengæld sat på loft: et billede fra en telefon kan være
   4000 pixels højt, og uden loft fylder ét enkelt værk hele skærmen.
   Bredden følger med af sig selv, så der er hverken striber eller strækning. */
.vaerk img {
  /* auto i stedet for 100% gør at små billeder ikke bliver
     forstørret op og udtværet — de vises i deres egen størrelse */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 22rem;
  /* contain er det eneste der holder billedets forhold, naar baade
     bredde og hoejde er begraenset. Uden den straekker browseren det. */
  object-fit: contain;
  margin: 0 auto 1rem;
  /* samme tykke tuschkant som alt andet på siden */
  border: var(--kant);
  box-shadow: var(--tusch-lille);
  background: var(--creme);
}


.vaerk h3 { font-size: 1.2rem; margin-bottom: 0.2em; }
.vaerk p { margin: 0; font-size: 0.92rem; line-height: 1.45; }

/* et enkelt meget langt ord må ikke skubbe kortet ud af facon */
.vaerk h3, .vaerk p { overflow-wrap: anywhere; }

@media (hover: hover) {
  .vaerk { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .vaerk:hover {
    transform: rotate(0deg) translate(-3px, -6px) scale(1.03);
    box-shadow: 9px 11px 0 var(--blaek);
    z-index: 3;
  }
}

/* ---------- formularen ---------- */

.upload-sektion {
  display: grid;
  gap: 2rem 4rem;
}
@media (min-width: 900px) {
  .upload-sektion { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr); }
  .upload-sektion h2 { grid-column: 1 / -1; }
}

.upload-tekst { max-width: 52ch; }

.upload-form {
  background: var(--blaa);
  border: var(--kant);
  box-shadow: var(--tusch);
  padding: 1.6rem 1.7rem 1.2rem;
  transform: rotate(0.6deg);
}

.felt { margin-bottom: 1.3rem; }

.felt label {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  color: var(--blaek);
}

.felt input[type="text"],
.felt textarea,
.felt input[type="file"] {
  width: 100%;
  /* filfeltet har en indbygget mindstebredde fra "Vælg fil"-knappen
     og filnavnet. Uden min-width: 0 stikker det ud over skærmkanten. */
  min-width: 0;
  font-family: var(--broed);
  font-size: 1rem;
  color: var(--blaek);
  background: var(--creme);
  border: 2px solid var(--blaek);
  padding: 0.55em 0.7em;
}
.felt textarea { resize: vertical; }

.hjaelp {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* spamfælden skal være skjult for øjet, men ikke fjernet.
   clip-path i stedet for at flytte den langt ud til siden. */
.honning {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* selve feltet skal også krympes, ellers regner browseren stadig
   dokumentet for bredere end skærmen */
.honning input { width: 1px; }

.upload-form button { cursor: inherit; }

.smaat {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 1.2rem 0 0;
}

/* ---------- kvittering efter upload ---------- */

.kvittering {
  border: var(--kant);
  box-shadow: var(--tusch);
  padding: 1.1rem 1.3rem 0.8rem;
  margin-bottom: 1.5rem;
  transform: rotate(-0.8deg);
}
.kvittering.god   { background: var(--groen); }
.kvittering.skidt { background: var(--gul); }
.kvittering h3 { font-size: 1.25rem; color: var(--blaek); margin-bottom: 0.25em; }
.kvittering p  { margin: 0; }

/* ---------- klik for at forstørre ---------- */

.forstoer {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: inherit;
}

.lup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4vmin;
  background: rgba(44, 42, 42, 0.88);
}
.lup[hidden] { display: none; }

.lup figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}

.lup img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  border: var(--kant);
  box-shadow: 8px 8px 0 var(--rosa);
  background: var(--creme);
}

.lup figcaption {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--creme);
  text-align: center;
  max-width: 46ch;
}

.lup-luk {
  position: absolute;
  top: 4vmin;
  right: 4vmin;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--blaek);
  background: var(--gul);
  border: var(--kant);
  box-shadow: var(--tusch-lille);
  padding: 0.45em 1.1em;
  cursor: inherit;
}
.lup-luk:hover { background: var(--rosa); }

/* ---------- fanart-mærkatet ved siden af navnet ---------- */

.maerkat-fanart {
  background: var(--blaa);
  transform: rotate(2deg);
  margin-left: -0.4rem;
}
.maerkat-fanart:hover { background: var(--groen); }

/* står man allerede på siden, er mærkatet fyldt ud */
.maerkat-fanart[aria-current="page"] {
  background: var(--blaa-dyb);
  color: var(--creme);
}
.maerkat-fanart[aria-current="page"]:hover {
  background: var(--blaek);
  color: var(--creme);
}

/* ============================================================
   Telefon og tablet
   ============================================================ */

@media (max-width: 700px) {

  /* Overskriften må fylde mere, når der ikke er andet ved siden af */
  .hero h1 { font-size: clamp(3.4rem, 15vw, 7.5rem); }

  /* Banneret går helt ud til kanterne, så ansigterne bliver så
     store som skærmen overhovedet tillader. Rotationen slås fra —
     et skævt billede ud til kanten efterlader trekantede huller. */
  .hero-foto {
    width: auto;
    max-width: none;   /* ellers holder max-width:100% den inde i spalten */
    /* under 700px er --side altid 5vw, saa den kan trækkes fra direkte.
       calc(max(...) * -1) afvises af browseren og virker ikke her. */
    margin-inline: -5vw;
    transform: none;
  }
  .hero-foto img {
    max-width: none;
    border-inline: 0;
    box-shadow: 0 5px 0 var(--blaek);
  }
  .tape-1 { left: 14px; }
  .tape-2 { right: 14px; }

  /* Mærkater og menupunkter skal kunne rammes med en tommelfinger */
  .topbar {
    gap: 0.6rem 0.5rem;
    padding-bottom: 0.9rem;
  }
  .topbar nav ul { gap: 0.45rem; }
  .topbar nav a { padding: 0.45em 0.95em; }
  .maerkat { font-size: 1rem; padding: 0.4em 0.9em; }
  .maerkat-fanart { margin-left: 0; }

  /* Lidt mindre luft mellem sektionerne — skærmen er kort */
  .hero { padding-block: 1.5rem 2.5rem; }
  .om, .videoer, .bund, .galleri-sektion, .upload-sektion { padding-block: 2.2rem; }
}

/* Helt smalle telefoner */
@media (max-width: 380px) {
  .knapper { gap: 0.8rem; }
  .knap-primaer { font-size: 1.1rem; }
  .tal li { font-size: 0.8rem; }
  .seddel { padding: 1.1rem 1.1rem 1rem; }
}


/* ---------- fanart på telefon ---------- */

@media (max-width: 700px) {
  .fanart-top { padding-block: 1.8rem 1.2rem; }
  .fanart-top h1 { font-size: clamp(3rem, 14vw, 5rem); }

  /* ét værk pr. række, og uden skæve vinkler — på en smal skærm
     bliver rotationen bare til skæve mellemrum */
  .galleri { grid-template-columns: 1fr; gap: 1.6rem; }
  .galleri li { transform: none; margin-top: 0; }

  .vaerk { padding: 0.8rem 0.9rem 1rem; }

  /* formularen står lige, så felterne flugter med skærmkanten */
  .upload-form { transform: none; padding: 1.3rem 1.2rem 1rem; }

  /* iOS zoomer ind på felter med skrift under 16px */
  .felt input[type="text"],
  .felt textarea,
  .felt input[type="file"] { font-size: 16px; }
}

/* ---------- dato under hvert værk ---------- */

.vaerk .dato {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rosa-dyb);
}

/* ---------- ugens fanart ---------- */

.fremhaevet { margin: 0; }
.fremhaevet[hidden] { display: none; }

.fremhaevet > h2 {
  display: inline-block;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blaek);
  background: var(--gul);
  border: var(--kant);
  box-shadow: var(--tusch-lille);
  padding: 0.3em 0.8em;
  transform: rotate(-1.5deg);
  margin-bottom: 1.2rem;
}

.galleri-top {
  /* auto-fit: er der kun ét værk fremhævet, fylder det hele bredden
     i stedet for at stå som en lille kasse med to tomme pladser ved siden af */
  grid-template-columns: repeat(auto-fit, minmax(14rem, 21rem));
  justify-content: start;
  gap: 1rem 0.9rem;
}

.vaerk.stort {
  position: relative;
  transform: rotate(-0.8deg);
  padding: 0.5rem 0.6rem 0.7rem;
}
.galleri-top li:nth-child(2) { transform: rotate(1.2deg); margin-top: 0.8rem; }
.galleri-top li:nth-child(3) { transform: rotate(-1.6deg); }

/* Billedet vises så stort som filen tillader — det bliver ikke
   forstørret op, for så ville stregerne blive udtværede. */
.vaerk.stort img { max-height: 13rem; margin-bottom: 0.6rem; }
.vaerk.stort h3 { font-size: 1.05rem; margin-bottom: 0.1em; }
.vaerk.stort p { font-size: 0.85rem; line-height: 1.4; }
.vaerk.stort .dato { font-size: 0.78rem; margin-top: 0.2rem; }

.stjerne {
  position: absolute;
  top: -11px;
  right: -9px;
  width: 32px;
  height: 32px;
  transform: rotate(12deg);
  filter: drop-shadow(3px 3px 0 var(--creme));
}

@media (max-width: 700px) {
  .vaerk.stort { transform: none; }
  /* på en smal skærm er der ikke plads til datoen på de tre små —
     den står stadig på kortet nede i galleriet */
  .vaerk.stort .dato { display: none; }
  .vaerk.stort h3 { font-size: 0.8rem; }
  .stjerne { width: 28px; height: 28px; top: -9px; right: -7px; }
}


/* på telefon må et værk højst fylde to tredjedele af skærmen */
@media (max-width: 700px) {
  .vaerk img { max-height: 60vh; }
  .vaerk.stort img { max-height: 6rem; }
}

/* ============================================================
   Bevægelse, anden omgang
   Alt herunder slås fra ved prefers-reduced-motion nederst.
   ============================================================ */

/* ---------- alt med tuschskygge kan trykkes ned ---------- */

.knap, .maerkat, .topbar nav a, .afspil,
.profiler a, .mail, .tilbage, .upload-form button, .lup-luk {
  transition: transform 0.09s ease, box-shadow 0.09s ease, background-color 0.15s ease;
}

.knap:active, .maerkat:active, .topbar nav a:active,
.profiler a:active, .mail:active, .tilbage:active,
.upload-form button:active, .lup-luk:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--blaek);
}
.afspil:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--blaek); }

/* knapper med rotation skal beholde den, når de trykkes */
.knap-primaer:active { transform: rotate(-1deg) translate(3px, 3px); }
.mail:active { transform: rotate(1.5deg) translate(3px, 3px); }
.tilbage:active { transform: rotate(-1deg) translate(3px, 3px); }
.maerkat:active { transform: rotate(-2.5deg) translate(3px, 3px); }
.maerkat-fanart:active { transform: rotate(2deg) translate(3px, 3px); }

/* ---------- ting der popper ind ---------- */

@keyframes pop-ind {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; }
}

/* de tre klistermærker i toppen kommer en ad gangen */
.tal li {
  animation: pop-ind 0.4s ease-out both;
}
.tal li:nth-child(1) { animation-delay: 0.55s; }
.tal li:nth-child(2) { animation-delay: 0.68s; }
.tal li:nth-child(3) { animation-delay: 0.81s; }

/* gule mærkater ved overskrifterne */
.mod-os, .fremhaevet > h2 {
  animation: pop-ind 0.45s ease-out both;
  animation-delay: 0.15s;
}

/* ---------- pilen tegner sig selv ---------- */

@keyframes tegn-streg {
  from { stroke-dashoffset: 130; }
  to   { stroke-dashoffset: 0; }
}
.pil path {
  stroke-dasharray: 130;
  animation: tegn-streg 0.9s ease-out 0.9s both;
}
.pil em {
  animation: pop-ind 0.4s ease-out 1.6s both;
}

/* ---------- stjernen blinker langsomt ---------- */

@keyframes vip-stjerne {
  0%, 88%, 100% { transform: rotate(12deg) scale(1); }
  92%           { transform: rotate(2deg) scale(1.14); }
  96%           { transform: rotate(18deg) scale(1.05); }
}
.stjerne { animation: vip-stjerne 7s ease-in-out infinite; }

/* ---------- fanart-kortene kommer ind efter hinanden ---------- */

@keyframes ind-nedefra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; }
}
.galleri > li {
  animation: ind-nedefra 0.45s ease-out both;
}
.galleri > li:nth-child(1) { animation-delay: 0.05s; }
.galleri > li:nth-child(2) { animation-delay: 0.13s; }
.galleri > li:nth-child(3) { animation-delay: 0.21s; }
.galleri > li:nth-child(4) { animation-delay: 0.29s; }
.galleri > li:nth-child(5) { animation-delay: 0.37s; }
.galleri > li:nth-child(n+6) { animation-delay: 0.45s; }

/* ---------- abonnér-knappen minder om sig selv ---------- */
/* Én lille vrikken hvert tiende sekund. Stopper når musen er på. */

@keyframes vrik {
  0%, 90%, 100% { transform: rotate(-1deg); }
  93%           { transform: rotate(-3.5deg) scale(1.03); }
  96%           { transform: rotate(1.5deg) scale(1.03); }
}
.knap-primaer { animation: vrik 10s ease-in-out 3s infinite; }
/* animationen skal helt væk ved berøring, ikke bare sættes på pause —
   ellers vinder den over hover- og klik-effekten */
.knap-primaer:hover, .knap-primaer:focus-visible { animation: none; }

/* ---------- forstørrelsen folder sig ud ---------- */

@keyframes lup-ind { from { opacity: 0; } to { opacity: 1; } }
@keyframes lup-billede {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; }
}
.lup { animation: lup-ind 0.18s ease-out both; }
.lup figure { animation: lup-billede 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

/* ---------- tapen sidder løst ---------- */

.hero-foto .tape { transition: transform 0.25s ease; }
.hero-foto:hover .tape-1 { transform: rotate(-34deg) translate(-2px, -1px); }
.hero-foto:hover .tape-2 { transition-delay: 0.06s; transform: rotate(-18deg) translate(2px, 1px); }

/* ---------- alt bevægelse fra ---------- */

@media (prefers-reduced-motion: reduce) {
  .tal li, .mod-os, .fremhaevet > h2, .galleri > li,
  .pil path, .pil em, .stjerne, .knap-primaer,
  .lup, .lup figure {
    animation: none !important;
    opacity: 1 !important;
    transform: none;
  }
  .stjerne { transform: rotate(12deg); }
  .knap-primaer { transform: rotate(-1deg); }
  .hero-foto:hover .tape-1,
  .hero-foto:hover .tape-2 { transform: none; }
  .knap:active, .maerkat:active, .topbar nav a:active,
  .profiler a:active, .mail:active, .tilbage:active,
  .afspil:active, .lup-luk:active { transform: none; box-shadow: var(--tusch); }
}

/* ---------- like ---------- */

.like {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.3em 0.7em 0.3em 0.5em;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--blaek);
  background: var(--creme);
  border: 2px solid var(--blaek);
  border-radius: 999px;
  box-shadow: var(--tusch-lille);
  cursor: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
.like:hover { background: var(--rosa); }
.like:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--blaek); }

.hjerte {
  width: 18px;
  height: 17px;
  flex: none;
}
.hjerte path { fill: none; }
.like.liket .hjerte path { fill: var(--rosa-dyb); }
.like.liket { background: var(--rosa); }

.like-tal { line-height: 1; min-width: 1ch; text-align: left; }

/* hjertet giver et hop når man trykker */
@keyframes hjerteslag {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.like.banker .hjerte { animation: hjerteslag 0.42s ease-out; }

/* på de tre små øverst er der kun plads til et lille et */
.vaerk.stort .like {
  margin-top: 0.4rem;
  padding: 0.2em 0.55em 0.2em 0.4em;
  font-size: 0.78rem;
}
.vaerk.stort .hjerte { width: 14px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
  .like.banker .hjerte { animation: none; }
  .like:active { transform: none; box-shadow: var(--tusch-lille); }
}

/* ============================================================
   Levende detaljer — små ting der bliver ved med at bevæge sig.
   Alt slukkes af prefers-reduced-motion længere oppe.
   ============================================================ */

/* tallene i hero'en vipper på skift */
@keyframes vip {
  0%, 100% { transform: rotate(var(--hvil)) translateY(0); }
  50%      { transform: rotate(var(--vend)) translateY(-5px); }
}
.tal li { animation: vip 5s ease-in-out infinite; }
.tal li:nth-child(1) { --hvil: -2deg;   --vend: 0.5deg;  animation-delay: 0s; }
.tal li:nth-child(2) { --hvil: 1.5deg;  --vend: -1deg;   animation-delay: 0.7s; }
.tal li:nth-child(3) { --hvil: -1deg;   --vend: 1.5deg;  animation-delay: 1.4s; }

/* tapestykkerne sidder løst og blafrer en anelse */
@keyframes tape-blaf {
  0%, 100% { transform: rotate(var(--tape-drej)) translateY(0); }
  50%      { transform: rotate(calc(var(--tape-drej) + 3deg)) translateY(-2px); }
}
.tape-1 { --tape-drej: -28deg; animation: tape-blaf 6s ease-in-out infinite; }
.tape-2 { --tape-drej: -24deg; animation: tape-blaf 7s ease-in-out infinite 1.2s; }
.tape-3 { --tape-drej: 3deg;   animation: tape-blaf 8s ease-in-out infinite 0.6s;
          transform-origin: top center; }

/* den håndskrevne pil peger og peger */
@keyframes pil-puf {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px) rotate(-2deg); }
}
.pil svg { animation: pil-puf 2.4s ease-in-out infinite; }

/* mærkaten i toppen svinger som en nøglering */
@keyframes svaj {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}
.maerkat { transform-origin: top center; animation: svaj 4.5s ease-in-out infinite; }
.maerkat-fanart { animation-delay: 0.9s; }

/* afspil-knappen ånder, så man kan se den kan trykkes */
@keyframes aande {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.07); }
}
.play { animation: aande 2.8s ease-in-out infinite; }
.video-kort:nth-child(even) .play { animation-delay: 0.9s; }

/* sedlen hænger og gynger i tapen */
@keyframes gynge {
  0%, 100% { transform: rotate(1.4deg); }
  50%      { transform: rotate(0.2deg) translateY(-3px); }
}
.seddel { transform-origin: top center; animation: gynge 7s ease-in-out infinite; }

/* familiekortene flyder ganske stille op og ned */
@keyframes flyd {
  0%, 100% { transform: rotate(var(--drej)) translateY(0); }
  50%      { transform: rotate(var(--drej)) translateY(-6px); }
}
.person { animation: flyd 6s ease-in-out infinite; }
.person.p2 { animation-delay: 0.8s; }
.person.p3 { animation-delay: 1.6s; }
.person.p4 { animation-delay: 2.4s; }
.person.p5 { animation-delay: 3.2s; }

/* hover slår svævningen fra, så kortet står stille når man peger */
@media (hover: hover) {
  .person:hover { animation: none; }
  .afspil:hover .play { animation: none; }
}

/* abonnér-knappen giver et lille hop en gang imellem */
@keyframes hop {
  0%, 88%, 100% { transform: translate(0, 0); }
  92%           { transform: translate(-2px, -4px); }
  96%           { transform: translate(0, -1px); }
}
.knap-primaer { animation: hop 9s ease-in-out infinite; }
.knap-primaer:hover { animation: none; }

/* ---------- konfetti der falder ned over siden ---------- */
/* Laget bygges af script.js, så der ikke ligger pynt i HTML-en. */

.konfetti {
  /* ligger på selve siden, ikke på skærmen, så konfettien
     bliver liggende hvor den er når man scroller */
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* bag indholdet: body > * løfter alt andet op på lag 1 */
  z-index: 0;
}

.flage {
  position: absolute;
  top: -24px;
  width: 9px;
  height: 16px;
  border-radius: 2px;
  animation: fald linear infinite;
}

@keyframes fald {
  from { top: -24px;  transform: rotate(0deg); }
  to   { top: 100%;   transform: rotate(540deg); }
}

/* ============================================================
   Tegnebrættet — tegn.html
   ============================================================ */

.tegne-sektion {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.6rem;
  align-items: start;
  max-width: 1460px;
  margin: 0 auto;
  padding: 2.4rem 1.2rem;
}

/* ---------- værktøjskassen i venstre side ---------- */

.vaerktoej {
  display: grid;
  gap: 1.1rem;
  background: var(--creme);
  border: 3px solid var(--blaek);
  box-shadow: var(--tusch);
  padding: 1rem 1rem 1.2rem;
  transform: rotate(-0.7deg);
}

.vt-gruppe {
  border: 0;
  margin: 0;
  padding: 0;
}

.vt-gruppe legend {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blaa-dyb);
  padding: 0 0 0.4rem;
}

/* ---------- farverne ---------- */

.farver {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45rem;
}

.farve {
  aspect-ratio: 1;
  border: 2px solid var(--blaek);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.farve:hover { transform: scale(1.12) rotate(-6deg); }

.farve.valgt {
  box-shadow: 0 0 0 3px var(--creme), 0 0 0 5px var(--blaek);
  transform: scale(1.1);
}

/* ---------- tykkelserne ---------- */

.tykkelser {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}

.tykkelse {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--creme);
  border: 2px solid var(--blaek);
  padding: 0;
  cursor: pointer;
}

.tykkelse span {
  display: block;
  background: var(--blaek);
  border-radius: 50%;
  max-width: 60%;
  max-height: 60%;
}

.tykkelse.valgt { background: var(--blaa); }

/* ---------- redskaber og handlinger ---------- */

.redskaber,
.vt-handling {
  display: grid;
  gap: 0.45rem;
}

.vt-knap {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  background: var(--creme);
  color: var(--blaek);
  border: 2px solid var(--blaek);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.vt-knap:hover { transform: translate(-2px, -2px); background: var(--rosa); }
.vt-knap.valgt { background: var(--gul); }
.vt-ryd:hover  { background: var(--rosa-dyb); }

.vt-handling {
  border-top: 2px dashed var(--blaek);
  padding-top: 1rem;
}

/* ---------- selve lærredet ---------- */

.braet {
  position: relative;
  border: 3px solid var(--blaek);
  box-shadow: var(--tusch);
  background: var(--creme);
  transform: rotate(0.4deg);
  /* Hele brættet skal kunne ses uden at rulle, mens man tegner.
     Lærredet er 4:3, så et loft på bredden er også et loft på højden. */
  max-width: calc((100vh - 13rem) * 4 / 3);
}

#laerred {
  display: block;
  width: 100%;
  height: auto;
  /* fingeren skal tegne, ikke rulle siden */
  touch-action: none;
  /* blyanten fra resten af siden er markør her også */
}

/* ---------- filfeltet der fyldes af tegn.js ---------- */

.honning-felt { display: none; }

.fejl-linje {
  font-weight: 600;
  color: var(--rosa-dyb);
  border-left: 4px solid var(--rosa-dyb);
  padding-left: 0.8rem;
}

/* ---------- smalle skærme: værktøjet lægger sig over brættet ---------- */

@media (max-width: 780px) {
  .tegne-sektion { grid-template-columns: 1fr; }

  .vaerktoej {
    transform: rotate(-0.4deg);
    grid-template-columns: repeat(2, 1fr);
  }

  .vt-handling { grid-column: 1 / -1; grid-auto-flow: column; }
}

/* ---------- ophavsret nederst ---------- */
/* Står på sin egen linje under de to andre, i mindre skrift. */

.fod .ophav {
  flex: 1 0 100%;
  order: 3;
  margin: 0.6rem 0 0;
  padding-top: 0.8rem;
  border-top: 2px dashed var(--blaek);
  font-size: 0.78rem;
  line-height: 1.5;
  /* Ingen max-width her: den ville gøre linjen smal nok til at den
     kunne stå ved siden af de to andre i stedet for under dem. */
}

/* ---------- samtykke til statistik ---------- */

/* En lille seddel nede i hjoernet. Den spaerrer ikke for siden, saa man
   kan se, hvad man siger ja eller nej til. */
.samtykke {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 20;
  max-width: 22rem;
  padding: 1.1rem 1.2rem;
  background: var(--creme);
  border: var(--kant);
  box-shadow: var(--tusch);
}

/* Sedlen hopper op nedefra og skyder en anelse over maalet, saa den
   ligner noget der bliver lagt paa bordet. Ved prefers-reduced-motion
   koerer det paa 0,01ms via reglen laengere oppe, saa den bare staar der. */
@keyframes samtykke-op {
  from { transform: translateY(calc(100% + 1rem)); }
  to   { transform: translateY(0); }
}

@keyframes samtykke-ned {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(100% + 1rem)); }
}

.samtykke {
  animation: samtykke-op 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.4s both;
}

.samtykke-vaek {
  animation: samtykke-ned 0.3s ease-in both;
}

.samtykke h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--blaa-dyb);
}

.samtykke p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.samtykke-knapper {
  display: flex;
  gap: 0.6rem;
}

/* Ja og nej fylder lige meget. Ingen af dem skal vaere den lette udvej. */
.samtykke button {
  flex: 1;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-weight: 700;
  color: var(--blaek);
  border: var(--kant);
  box-shadow: var(--tusch-lille);
  cursor: pointer;
}

.samtykke-ja { background: var(--groen); }
.samtykke-nej { background: var(--blaa); }

.samtykke button:hover { background: var(--gul); }

.samtykke button:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

@media (max-width: 480px) {
  .samtykke {
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
    max-width: none;
  }
}

/* Fortryd-knappen paa privatlivssiden. .knap giver kun formen, saa
   farve og skriftstoerrelse kommer her. */
#skift-samtykke {
  font-size: 1rem;
  background: var(--blaa);
  color: var(--blaek);
  box-shadow: var(--tusch-lille);
  cursor: pointer;
}
#skift-samtykke:hover { background: var(--gul); }
#skift-samtykke:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}