/* ===========================================================
   TYPOGRAFI – FONT TIL HELE PROJEKTET
   =========================================================== */

/* Pricedown font
   Downloadet font brugt til logo og spil-inspirerede overskrifter */
@font-face {
  font-family: "Pricedown";
  src: url("../font/Pricedown.otf");
}

/* =====================
   BASIS: reset
   ===================== */
/* så jeg ungår browser forskelle */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* gør bredder nemmere at styre */
}

/* =========================
   STOPPER HORISONTAL SCROLL
   ========================= */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* =====================
   STARTSIDE STYLING
   ===================== */

body.start {
  background-image: url("../Image/start.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  height: 100vh;

  /* Gør så det i midten, både vertikalt og horisontalt */
  display: flex;
  justify-content: center;
  align-items: center;
}

/*CHAT-GPT HAR HJULPET MED ANIMATIONEN og Text-shadow*/

/* jeg animerer selve <a>, derfor #press-start a */
#press-start a {
  text-decoration: none; /* fjerner understregning */
  color: white;
  font-family: "Pricedown", sans-serif; /* bruger Pricedown */
  font-size: 6rem;
  text-align: center;
  line-height: 1;

  /* Tykt sort outline (GTA-style) */
  text-shadow: -5px -5px 0 #000, 5px -5px 0 #000, -5px 5px 0 #000,
    5px 5px 0 #000, 0px 0px 8px #000;

  /* ANIMATION: pulserende zoom - kører kontinuerligt */
  animation: pulse 1.3s infinite ease-in-out;
  transition: transform 0.25s ease, opacity 0.25s ease;
  display: inline-block; /* vigtigt så transform virker fint */
}

/* Keyframes for pulse animation, zoom ind/ud */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

/* ----------------------------
   LOADING PAGE STYLING
---------------------------- */
body.loading {
  background: black;
  height: 100vh;

  font-family: "Montserrat", sans-serif;
  position: relative;
}

/* Placerer loading-teksten nederst i højre hjørne */
#loading-text {
  color: white;
  font-size: 2.5rem; /*jeg bruger rem fordi det nemmere at skallere på tværs af skærm størrelser*/
  font-weight: 700;
  position: absolute;
  bottom: 30px;
  right: 30px;
  letter-spacing: 2px;
}

/*  (CHAT-GPT HJÆLP) animere kun prikkerne, og ikke teksten,  */

.dots::after {
  content: "";
  animation: dots 1.2s infinite;
}

@keyframes dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}

/* ===========================================================
   HOMESCREEN / FORSIDE
   =========================================================== */

/* =========================
   BODY / BAGGRUND
   ========================= */

body.home-page {
  /* Sørger for at siden fylder hele højden af skærmen */
  min-height: 100vh;

  /* Fjerner standard margin fra browseren */
  margin: 0;

  background-image: url("../Image/home.jpg");

  /* Billedet gentages ikke */
  background-repeat: no-repeat;

  /* Sørger for at billedet altid dækker hele skærmen */
  background-size: cover;

  /* Placering af baggrundsbilledet */
  background-position: center top;

  font-family: "Montserrat", sans-serif;

  color: white;
}

/* =========================
   HEADER & NAVIGATION
   ========================= */

/* Headeren ligger oven på baggrunden */
header {
  /* Absolut positionering for frit layout */
  position: absolute;

  /* Placering i toppen */
  top: 0;
  left: 20px;
  right: 20px;

  /* Flex bruges til at placere logo, menu og knapper */
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Sørger for at headeren ligger over andre elementer */
  z-index: 10;
}

/* =========================
   LOGO
   ========================= */

.logo {
  font-family: "Pricedown", sans-serif;

  font-size: 4rem;

  color: white;

  /* Fjerner standard link-understregning */
  text-decoration: none;

  /* Gør linjeafstanden tættere */
  line-height: 1;

  /* Justerer placeringen visuelt */
  margin-left: 45px;
  margin-top: 30px;

  /* Sort outline og glow for GTA-look */
  text-shadow: -8px -8px 0 #000, 8px -8px 0 #000, -8px 8px 0 #000,
    8px 8px 0 #000, 0 0 14px #000;

  /* Gør hover-effekten blød */
  transition: transform 0.18s ease, text-shadow 0.18s ease;
}

/* Hover-effekt på logo */
.logo:hover {
  /* Lidt zoom for feedback */
  transform: scale(1.06);

  /* Kraftigere glow */
  text-shadow: -8px -8px 0 #000, 8px -8px 0 #000, -8px 8px 0 #000,
    8px 8px 0 #000, 0 0 22px rgba(255, 255, 255, 0.9);
}

/* =========================
   NAVIGATION
   ========================= */

/* Navigationens placering */
nav {
  margin-left: auto;
  margin-right: 80px;
}

/* Menuen vises horisontalt */
nav ul {
  display: flex;

  /* Afstand mellem menupunkter */
  gap: 70px;

  /* Fjerner punkttegn */
  list-style: none;
}

/* Styling af links i menuen */
nav a {
  /* Gør det muligt at animere */
  display: inline-block;

  color: white;

  text-decoration: none;

  font-weight: 600;
  font-size: 20px;

  /* animationer */
  transition: transform 0.16s ease, text-shadow 0.16s ease;
}

/* Hover-effekt på menu */
nav a:hover {
  /* Lille hop og zoom */
  transform: translateY(-6px) scale(1.15);

  /* Outline og glow */
  text-shadow: -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black,
    3px 3px 0 black, 0 0 22px rgba(255, 255, 255, 1);
}

/* =========================
   HOVEDLAYOUT
   ========================= */

/* Layout opdelt i tre kolonner */
.home-layout {
  /* Fylder hele skærmens højde */
  min-height: 100vh;

  /* Grid-layout bruges til opdeling */
  display: grid;

  /* Tre kolonner: venstre, midte, højre */
  grid-template-columns: 1fr 1fr 1fr; /*chat hjalp med collum grid*/

  /* Vertikal centrering */
  align-items: center;

  /* Luft i siderne */
  padding: 0 60px;
}

/* =========================
   CHARACTER GRID (VENSTRE)
   ========================= */

.character-section {
  position: absolute;
  left: 60px;
  top: 200px;
  z-index: 5;
}

/* Grid til karakter-ikoner */
.character-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* karakterboksen */
.character-box {
  width: 90px;
  height: 90px;

  background: rgba(0, 0, 0, 0.6);

  /* Runde hjørner */
  border-radius: 8px;

  /* usynlig kant */
  border: 2px solid transparent;

  /* Centrerer billedet */
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  cursor: pointer;

  /* hover-animationer  (chatgpt)*/
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease, background 0.18s ease;
}

/* Hover-effekt på karakterbokse */
.character-box:hover {
  transform: translateY(-4px) scale(1.05);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.9);
}

/* speciel karakter */
.special-border {
  border-color: white;
  box-shadow: 0 0 22px rgba(255, 255, 255, 1);
}

/* Billedet fylder boksen */
.character-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   AVATAR 
   ========================= */

/* Avatar placeres i midterste kolonne */
.avatar-area {
  grid-column: 2;
  display: flex;
  justify-content: center;

  /* Visuel justering  (chatgpt)*/
  transform: translateX(-100px);
}

/* Avatarens størrelse og skygge */
.avatar {
  width: 260px;
  filter: drop-shadow(0 0 12px black);

  /* Gør hover-effekten blød (chatgpt)*/
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Hover-effekt på avatar */
.avatar:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.6));
  cursor: pointer;
}

/* Simpel idle-animation for liv (chatgpt)*/
.avatar-bounce {
  animation: idle 2.8s ease-in-out infinite;
}

/* Animation der får avataren til at bevæge sig op og ned */
@keyframes idle {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

/* =========================
   STATS (HØJRE SIDE)
   ========================= */

#stats-area {
  grid-column: 3;

  /* Justering af placering */
  margin-left: -90px;
  margin-top: -150px;
}

/* Overskrift til stats */
.stats-title-outside {
  width: 450px;
  text-align: center;
  margin-bottom: 10px;

  font-size: 28px;
  font-weight: 700;

  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black;

  transition: transform 0.18s ease, text-shadow 0.18s ease;
}

/* Hover-effekt på stats-overskrift (chatgpt) */
.stats-title-outside:hover {
  transform: translateY(-3px) scale(1.04);
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black, 0 0 18px rgba(255, 255, 255, 0.9);
}

/* Stats-boksen */
.stats-box {
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
  border-radius: 6px;
  width: 450px;

  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Hover-effekt på stats-boks */
.stats-box:hover {
  transform: translateY(-4px) scale(1.02);
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35),
    inset 0 0 18px rgba(255, 255, 255, 0.1);
}

/* En enkelt stat */
.stat {
  margin-bottom: 14px;
}

/* Baggrund for progress bar */
.bar {
  width: 100%;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
}

/* Fyldet i baren starter på 0 */
.fill {
  height: 100%;
  width: 0%;

  /* Blød animation når værdien ændres (chatgpt) */
  transition: width 1.2s ease;
}

/* Når JS tilføjer klassen show, fyldes baren  (chatgpt)*/
.fill.show {
  width: var(--value);
}

/* Procenttekst */
.percent {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

/* =========================
   MINI MAP
   ========================= */

.mini-map {
  position: fixed;
  bottom: 40px;
  left: 60px;
  z-index: 20;

  transition: transform 0.25s ease;
}

/* Hover-zoom på mini-map */
.mini-map:hover {
  transform: scale(1.08);
}

/* Cirklen omkring kortet */
.map-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid black;

  overflow: hidden;
  position: relative;
  background: black;

  transition: box-shadow 0.25s ease;
}

/* Glow ved hover */
.mini-map:hover .map-circle {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

/* Selve kortbilledet */
.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* lokation på kortet */
.map-location {
  position: absolute;
  width: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}

/* Pulse-effekt på lokation knap (chatgpt) */
.mini-map:hover .map-location {
  animation: pulseMap 1s infinite;
}

/* Animation til mini-map markering */
@keyframes pulseMap {
  0% {
    transform: translate(-50%, -100%) scale(1);
  }
  50% {
    transform: translate(-50%, -100%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -100%) scale(1);
  }
}

/* =========================
   LYDKNAP
   ========================= */

#sound-btn {
  position: absolute;
  top: 15px;
  right: -50px;

  background: none;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  margin-left: 30px;

  z-index: 20;
}

/* Ikonet for lyd */
#sound-btn img {
  width: 150px;
  height: auto;

  filter: drop-shadow(2px 2px 4px black);
  transition: transform 0.2s ease;
}

/* Hover-effekt på lydikon */
#sound-btn:hover img {
  transform: scale(1.1);
}
/* ===========================================================
   PROJECTS SIDE

   =========================================================== */

/* =========
   BODY 
   ========= */

/* styling kun for projects.html */
body.projects-page {
  /* Fjerner browserens standard margin */
  margin: 0;

  background: #000;

  font-family: "Montserrat", sans-serif;

  color: white;
}

/* =========================
   WRAPPER (chat gpt hjalp her)
   ========================= */

/* Wrapper samler hele sidens indhold og centrerer det */
.projects-wrapper {
  width: 100%;

  /* Maks bredde for ikke at blive for bred på store skærme */
  max-width: 1400px;

  /* Centrerer wrapperen horisontalt */
  margin: 0 auto;

  /* Luft omkring indholdet */
  padding: 40px 80px;

  /* Sørger for at siden fylder hele højden */
  min-height: 100vh;

  /* Flex bruges til at fordele header, indhold og bund-navigation */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* =========================
   PROJEKT-GRID
   ========================= */

/* Grid der viser de to projekt-kategorier */
.projects-grid {
  /* Grid-layout med to kolonner */
  display: grid;
  grid-template-columns: 1fr 1fr;

  /* Afstand mellem projekterne */
  gap: 60px;

  /* Afstand fra headeren */
  margin-top: 180px;

  /* Afstand ned til bund-navigationen */
  margin-bottom: 140px;
}

/* =========================
   ENKELT PROJEKT
   ========================= */

/* Hver projektboks */
.project-item {
  /* Centrerer indholdet */
  text-align: center;
}

/* Titel over hvert projekt */
.project-item h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

/* Projektbillede */
.project-item img {
  width: 100%;

  /* Begrænser størrelsen på store skærme */
  max-width: 500px;

  /* Runde hjørner */
  border-radius: 12px;

  /* Blød hover-animation */
  transition: transform 0.25s ease;
}

/* Hover-effekt på projektbilleder */
.project-item img:hover {
  /* Lidt zoom */
  transform: scale(1.04);
}
/* ======================================================
   OM MIG SIDE 
   ====================================================== */

/* =========================
   SIDE / BAGGRUND
   ========================= */

/* Gælder for Om mig-siden via class på body */
body.about-page {
  /* den sørger for at siden fylder hele skærmens højde */
  min-height: 100vh;

  background: url("../Image/mig.jpg") center / cover no-repeat;

  font-family: "Montserrat", sans-serif;

  color: white;
}

/* =========================
   LAYOUT-CONTAINER
   ========================= */

/* Container der centrerer Om mig-boksen */
.about-layout {
  display: flex;
  justify-content: center;
  align-items: center;

  /* Fylder hele højden af skærmen */
  min-height: 100vh;

  /* Gør det muligt at placere overskrift absolut */
  position: relative; /* vigtig for .about-title */
}

/* =========================
   OM MIG BOKS
   ========================= */

/* Sort, gennemsigtig boks med billede og tekst */
.about-box {
  background: rgba(0, 0, 0, 0.6);

  /* Boksens størrelse */
  width: 70%;
  max-width: 1150px;
  height: 60vh; /* Fast højde giver scroll i tekstfeltet */

  /* Grid-layout: billede til venstre, tekst til højre */
  display: grid;
  grid-template-columns: 1fr 2fr;

  /* Afstand mellem billede og tekst */
  gap: 40px;

  /* Rykker boksen ned, så den ikke rammer header/logo */
  margin-top: 80px;

  /* Indvendig luft */
  padding: 40px;

  /* Runde hjørner */
  border-radius: 12px;

  /* hover-effekt */
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Hover-effekt  */
.about-box:hover {
  transform: translateY(-4px) scale(1.02);
  background: rgba(0, 0, 0, 0.75);

  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35),
    inset 0 0 18px rgba(255, 255, 255, 0.1);

  /* Cursor ændres ikke, da boksen ikke er klikbar */
  cursor: default;
}

/* =========================
   OVERSKRIFT
   ========================= */

/* Overskriften placeres frit over boksen */
.about-title {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);

  font-family: "Montserrat", sans-serif;

  font-size: 3rem;
  font-weight: 700;
  color: white;

  /* Sort outline  */
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000,
    3px 3px 0 #000;
}

/* =========================
   BILLEDE
   ========================= */

.about-image img {
  /* Fylder sin grid-kolonne */
  width: 100%;
  height: 100%;

  /* Sørger for at billedet beskæres  */
  object-fit: cover;

  /* Justerer fokuspunktet i billedet */
  object-position: 40% center;

  /* Runde hjørner */
  border-radius: 10px;
}

/* =========================
   TEKST MED SCROLL
   ========================= */

/* Tekstområdet kan scrolles, hvis teksten er lang */
.about-text {
  overflow-y: auto;

  /* Giver lidt luft til scrollbar */
  padding-right: 12px;
}

/* Afsnit i teksten */
.about-text p {
  line-height: 1.7;
  margin-bottom: 18px;
  font-size: 1rem;
}

/* ======================================================
   KONTAKT-SIDE
  
   ====================================================== */

/* =========================
   SIDE / BAGGRUND
   ========================= */

/* Gælder kun for body med class="contact-page" */
body.contact-page {
  background-image: url("../Image/kontakt.jpg");
  background-repeat: no-repeat;

  /* Zoomer let ind på billedet, så den passer bedre */
  background-size: 110%;

  /* Justerer billedets placering lodret */
  background-position: center 0%;

  /* Sørger for at siden altid fylder hele skærmen */
  min-height: 100vh;

  font-family: "Montserrat", sans-serif;

  color: white;
}

/* =========================
   LAYOUT
   ========================= */

/* Container der holder hele kontaktsiden */
.contact-layout {
  position: relative;

  /* Fylder hele viewport-højden */
  height: 100vh;
}

/* =========================
   KONTAKT-BOKS
   ========================= */

/* Sort gennemsigtig boks med kontaktindhold */
.contact-box {
  position: absolute;
  top: 50%;
  left: 50%;

  /* Centrerer boksen præcist */
  transform: translate(-50%, -50%);

  /* Lille justering op */
  margin-top: -40px;

  background: rgba(0, 0, 0, 0.6);
  padding: 35px;
  width: 420px;

  border-radius: 10px;
  text-align: center;

  /* Forbereder hover-animation  (chat gpt)*/
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Hover-effekt på kontaktboksen (chat gpt) */
.contact-box:hover {
  transform: translate(-50%, calc(-50% - 4px)) scale(1.02);
  background: rgba(0, 0, 0, 0.75);

  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35),
    inset 0 0 18px rgba(255, 255, 255, 0.1);
}

/* =========================
   OVERSKRIFT & UNDERTEKST
   ========================= */

/* Overskrift */
.contact-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 5px;

  /* Sort outline for bedre læsbarhed */
  text-shadow: 2px 2px 0 black;
}

/* Undertekst */
.contact-subtitle {
  font-size: 14px;
  margin-bottom: 15px;
  opacity: 0.8;
}

/* =========================
  Email ikon
   ========================= */

/* Mail-ikon */
.contact-icon {
  width: 80px;
  height: auto;
  margin-top: 5px;

  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Hover-effekt */
.contact-icon:hover {
  transform: scale(1.1);
}

/* =========================
   FORM
   ========================= */

/* Inputfelter og tekstfelt */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;

  border: none;
  border-radius: 5px;

  font-family: "Montserrat", sans-serif;
}

/* Tekstfeltets højde og adfærd */
.contact-form textarea {
  height: 90px;
  resize: none;
}

/* =========================
   SEND-KNAP
   ========================= */

/* Send-knap i formularen */
.send-btn {
  background: #2eff5d;
  border: none;

  padding: 10px 25px;
  font-weight: 700;

  border-radius: 5px;
  cursor: pointer;
}

/* =========================
   AVATAR
   ========================= */

/* Avatar placeret nederst */
.contact-avatar {
  position: absolute;
  bottom: 30px;
  left: -50px;

  /*  avatarens placering */
  transform: translate(-40px, 40px);
}

/* Avatar-billedet */
.contact-avatar img {
  width: 600px;

  transition: transform 0.18s ease, filter 0.18s ease;
}

/* Hover-effekt på avatar */
.contact-avatar img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.6));
  cursor: pointer;
}

/* =========================
   BACK / NEXT KNAPPER
   kun på de sidder hvor back/next-navigation
   findes i HTML.
   ========================= */

/* Fælles styling for back og next */
.next-button,
.back-button {
  position: absolute;
  bottom: 40px;

  font-family: "Pricedown", sans-serif;
  font-size: 3rem;
  color: white;
  text-decoration: none;

  /* Tyk sort outline (GTA) */
  text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000,
    4px 4px 0 #000, 0 0 8px #000;

  transition: transform 0.15s ease;
}

/* Hover-effekt */
.next-button:hover,
.back-button:hover {
  transform: scale(1.1);
}

/* Placering */
.next-button {
  right: 40px;
}

.back-button {
  left: 40px;
}

/* Bruges på sider, hvor der kun er én back-knap */
.back-only {
  right: 40px;
  left: auto;
}

/* ======================================================
   FLOW-SIDE
   ====================================================== */

/* =========================
   SIDE / BAGGRUND
   ========================= */

/* Gælder kun for body med class="flow-page" */
.flow-page {
  background: black;
  min-height: 100vh;

  /* Samme font som resten af portfolioen */
  font-family: "Montserrat", sans-serif;
  color: white;
}

/* =========================
   WRAPPER
   ========================= */

/* Wrapper der giver luft til header og bund-navigation */
.flow-wrapper {
  padding-top: 200px; /* Giver plads til header */
  padding-bottom: 120px; /* Giver plads til back/next */

  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

/* =========================
   FLOW-SEKTIONER
   ========================= */

/* Hver enkelt flow-boks */
.flow-box {
  background: rgba(255, 255, 255, 0.06);
  padding: 30px;
  margin-bottom: 60px;
  border-radius: 12px;
}

/* Overskrifter i flow-bokse */
.flow-box h2 {
  font-size: 26px;
  margin-bottom: 12px;

  /* skygge */
  text-shadow: 2px 2px black;
}

/* Brødtekst */
.flow-box p {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.9;

  /* Luft mellem afsnit */
  margin-bottom: 20px;
}

/* =========================
   MEDIE-GRID (FÆLLES)
   ========================= */

/* Grundstruktur for alle grids */
.flow-media-grid {
  margin-top: 25px;
  display: grid;
  gap: 20px; /* Ens afstand mellem elementer */
}

/* Fælles styling for billeder */
.flow-media-grid img {
  width: 100%;
  height: 360px;

  /* Viser hele billedet uden beskæring */
  object-fit: contain;
  border-radius: 16px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-effekt på alle billeder */
.flow-media-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

/* =========================
   FLOW 1 – POSTKORTER
   ========================= */

.flow-media-grid.postcards {
  grid-template-columns: 1fr 1fr;
  gap: 0; /* Bevidst valg så plakater står tæt */
}

.flow-media-grid.postcards img {
  height: 320px;
  object-fit: contain;
}

/* =========================
   FLOW 1 – TELEFONER
   ========================= */

.flow-media-grid.phones {
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.flow-media-grid.phones img {
  height: 380px;
  width: auto;
}

/* Ekstra luft mellem tekst og næste sektion */
.flow-subtext {
  margin-top: 30px;
}

/* =========================
   FLOW 2 – 3 TELEFONER
   ========================= */

.phones-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* =========================
   FLOW 3 – VISUELT GRID
   ========================= */

.flow-media-grid.flow3-grid {
  grid-template-columns: repeat(3, 1fr);
}

.flow-media-grid.flow3-grid img {
  height: 400px;
}

/* =========================
   FLOW 4 – VIDEOER
   ========================= */

.flow-media-grid.flow4-videos {
  grid-template-columns: repeat(3, 1fr);
}

.flow-media-grid.flow4-videos video {
  width: 100%;
  height: 240px;

  object-fit: contain;
  border-radius: 12px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flow-media-grid.flow4-videos video:hover {
  transform: scale(1.03);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* =========================
   FLOW 4 – BILLEDER
   ========================= */

.flow-media-grid.flow4-images {
  grid-template-columns: repeat(3, 1fr);
}

.flow-media-grid.flow4-images img {
  width: 100%;
  height: 260px;

  object-fit: contain;
  border-radius: 12px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flow-media-grid.flow4-images img:hover {
  transform: scale(1.04);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* =========================
   FIGMA LINKS
   ========================= */

/* Link til prototype */
.flow-figma-link {
  display: inline-block;
  margin-top: 20px;

  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;

  transition: transform 0.2s ease, opacity 0.2s ease;
}

.flow-figma-link:hover {
  transform: translateX(6px);
  opacity: 0.8;
}

/* =========================
   BACK / NEXT NAVIGATION
   ========================= */

.flow-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
}

/* =========================================================
   FILM-SIDE 
   ========================================================= */

/* ------------------
   BODY – BAGGRUND 
   ------------------*/

body.film-page {
  background: black;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
  color: white;
  overflow-y: auto; /*  overflow-y sikrer scroll ved meget indhold*/
}

/* --------------------------------
   FILM-LAYOUT – HOVEDCONTAINER
   ------------------------------*/

.film-layout {
  max-width: 1000px;
  margin: 0 auto;
  padding: 160px 40px 140px;

  display: flex;
  flex-direction: column;

  /* Afstand mellem de enkelte projekter */
  gap: 120px;
}

/* -----------------
   FILM-SEKTION 
   ----------------*/

.film-section {
  display: flex;
  flex-direction: column; /* Flex column for læserækkefølge */
  gap: 20px;
}

/* -------------------------------
   OVERSKRIFTER TIL PROJEKTER
   -----------------------------*/

.film-title {
  font-size: 32px;
  font-weight: 700;
  text-shadow: 2px 2px 0 black;
}

/* ---------------------------------------------------------
   TEKSTAFSNIT
   ----------------*/

.film-text {
  max-width: 700px;
  line-height: 1.6;
  opacity: 0.9;
}

/* =========================================================
   SHOWREEL / BEHIND THE SCENES SEKTION
   ========================================================= */

/* ---------------------------------------------------------
   SHOWREEL-SEKTION
   ----------------------*/

.showreel-section {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrerer indhold*/
  text-align: center;
}

/* ---------------------------------------------------------
   VIDEO-WRAPPER
   ----------------------*/

.showreel-video-wrapper {
  width: 100%;
  max-width: 380px; /*kontrollere video bredde */
  margin: 30px 0 20px;

  border-radius: 16px;
  overflow: hidden;

  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Selve videoen fylder wrapperen */
.showreel-video-wrapper video {
  width: 100%;
  display: block;
}

/* Hover-effekt  */
.showreel-video-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.4);
}

/* =========================================================
   PROJEKT FAR – PLAKATER
   ========================================================= */

/* Container til plakater side om side */
.projektfar-posters {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 25px;
}

/* Fælles plakat-styling */
.poster {
  width: 48%;
  border-radius: 10px;
  object-fit: cover;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover-effekt for plakater */
.poster:hover {
  transform: scale(1.04);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

/* =========================================================
   FILM CREW – BILLEDGALLERI
   ========================================================= */

/* Galleri med tre billeder */
.film-crew-gallery {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 25px;
}

/* Crew-billeder */
.film-crew-gallery img {
  width: 32%;
  height: 260px;
  border-radius: 10px;
  object-fit: cover;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover-effekt */
.film-crew-gallery img:hover {
  transform: scale(1.04);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

/* =========================================================
   NORTHERN SCRIPT – 2 BILLEDER
   ========================================================= */

/* Container til to billeder */
.northern-posters {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 25px;
}

/* Genbruger .poster-klassen */
.northern-posters .poster {
  width: 48%;
}

/* =========================================================
   LISTE & LINKS
   ========================================================= */

/* Liste over filmroller */
.film-list {
  list-style: none;
  padding-left: 0;
  line-height: 1.8;
  font-size: 15px;
  opacity: 0.9;
}

/* Afstand mellem listepunkter */
.film-list li {
  margin-bottom: 4px;
}

/* Links i listen */
.film-link {
  margin-left: 10px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover på links */
.film-link:hover {
  opacity: 0.7;
  transform: translateX(3px);
}
/* =========================================================
   PROCESS SIDE 
   ========================================================= */

body.process-page {
  background: black;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
  color: white;
  overflow-y: auto; /* Gør siden scrollbar, hvis indholdet er langt */
}

/* =========================================================
   PROCESS WRAPPER
   Holder hele indholdet centreret og giver luft
   ========================================================= */

.process-wrapper {
  max-width: 1000px; /* Begrænser linjelængde for læsbarhed */
  margin: 0 auto; /* Centrerer wrapperen horisontalt */
  padding: 160px 40px 140px;
  /* Top-padding: plads til header
     Side-padding: luft på siderne
     Bottom-padding: luft før bund */

  display: flex; /* Gør det muligt at styre indholdet vertikalt */
  flex-direction: column; /* de placeres under hinanden */
  gap: 20px; /* Luft mellem hver process-boks */
}

/* =========================================================
   PROCESS BOKS
   ========================================================= */

.process-box {
  background: rgba(0, 0, 0, 0.6); /* Sort gennemsigtig boks */
  padding: 40px; /* Indvendig luft */
  border-radius: 14px; /* Runde hjørner */

  display: flex;
  flex-direction: column; /* Tekst og billeder i kolonne */
  gap: 18px; /* Luft mellem tekstafsnit */

  /* Gør boksen klar til hover-animation */
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Hover-effekt */
.process-box:hover {
  transform: translateY(-4px) scale(1.01); /* Løfter boksen let */
  background: rgba(0, 0, 0, 0.75); /* Mørkere ved hover */
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.35),
    inset 0 0 18px rgba(255, 255, 255, 0.08);
}

/* =========================================================
   TEKST & OVERSKRIFTER
   ========================================================= */

.process-box h1 {
  font-size: 36px;
  font-weight: 700;
  text-shadow: 2px 2px 0 black; /* Sort outline */
}

/* Sektionstitler */
.process-box h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 5px;
  text-shadow: 2px 2px 0 black;
}

/* Undertitel (navn + semester) */
.process-box h3 {
  font-size: 16px;
  font-weight: 600;
  opacity: 0.8; /* Let dæmpet */
}

/* Brødtekst */
.process-box p {
  max-width: 750px; /* Gør teksten mere læsebar */
  line-height: 1.6; /* Luft mellem linjer */
  opacity: 0.92; /* Blødere hvid */
}

/* =========================================================
   LISTER
   ========================================================= */

.process-box ul {
  list-style: none; /* Fjerner standard bullets (chat gpt hjalp) */
  padding-left: 0;
  line-height: 1.8;
}

/* Egen bullet-stil (chat gpt hjalp) */
.process-box ul li::before {
  content: "• ";
  margin-right: 4px;
  opacity: 0.8;
}

/* =========================================================
   LINKS (Figma / FigJam / eksterne links)
   ========================================================= */

.process-box a {
  display: inline-block;
  margin-top: 12px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;

  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover-effekt på links */
.process-box a:hover {
  transform: translateX(6px); /* Lille bevægelse mod højre */
  opacity: 0.8;
}

/* =========================================================
   BILLEDER 
   ========================================================= */

.process-media {
  display: flex; /* Billeder ved siden af hinanden */
  gap: 16px;
  margin-top: 20px;
}

.process-media img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 12px;
  object-fit: contain; /* Hele billedet vises */

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover-effekt på billeder */
.process-media img:hover {
  transform: scale(1.04);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
}

/* =========================================================
   KODE / PROMPT BLOK
  
   ========================================================= */

.process-box code {
  display: block;
  background: rgba(255, 255, 255, 0.05);
  padding: 14px 16px;
  border-radius: 8px;

  font-size: 13px;
  line-height: 1.5;
  font-family: monospace; /* Kode-look */
  opacity: 0.9;
}

/* =========================================================
   MEDIA GRIDS
   ========================================================= */

.process-media-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  justify-items: center; /* Centrerer billeder i grid */
}

.process-media-grid img {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.process-media-grid img:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

/* Grid-varianter */
.process-media-grid.one {
  grid-template-columns: 1fr;
}

.process-media-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.process-media-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

/* Størrelsesjusteringer */
.process-media-grid.one img,
.process-media-grid.two img {
  max-width: 600px;
}

.process-media-grid.three img {
  width: 800px;
}

/* ========================================================================================
   RESPONSIVITET
   indeholder alle media queries
   chat gpt er brugt som sparringspartner
   ======================================================================================== */

/* =========================
    START SIDE – TABLET
   ========================= */
@media (max-width: 1024px) {
  #press-start {
    font-size: 4.5rem;
    line-height: 1.05;
  }
}

/* =========================
   📱 START SIDE – MOBIL
   ========================= */
@media (max-width: 768px) {
  body.start {
    padding: 0 20px;
  }

  #press-start {
    font-size: 3rem; /*  mindre på mobil */
    line-height: 1.1;
    text-align: center;
  }

  #press-start a {
    display: inline-block;
    transform: scale(1);
  }
}

/* =========================
    TABLET – LOADING
   ========================= */
@media (max-width: 1024px) {
  #loading-text {
    font-size: 40px;
    letter-spacing: 3px;
  }
}

/* =========================
   📱 MOBIL – LOADING
   ========================= */
@media (max-width: 600px) {
  #loading-text {
    font-size: 28px;
    letter-spacing: 2px;
    text-align: center;
  }
}

/* =========================================
   TABLET – HOME 
   ========================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  body.home-page {
    background-size: 400%;
    background-position: center 50%;
  }

  .logo {
    font-size: 4rem;
    line-height: 0.9;
  }

  /* FJERNER CHARACTER BOXES */
  .character-section {
    display: none;
  }

  /* FJERNER MINI MAP */
  .mini-map {
    display: none;
  }

  /* GØ GRID MERE SIMPEL*/
  .home-layout {
    grid-template-columns: 1fr 1fr;
    padding: 0 40px;
  }

  /* AVATA STØRRE OG MOD VENSTRE */
  .avatar-area {
    grid-column: 1;
    justify-content: flex-start;
    transform: none;
  }

  /* STATS  BLIVER PÅ HØJRE SIDE */
  #stats-area {
    grid-column: 2;
    margin: 0;
    margin-top: -80px;
  }

  #sound-btn {
    right: 30px;
    top: 40px;
  }

  /* AVATAR – reference */
  .avatar {
    width: 300px;
  }

  .next-button {
    font-size: 4rem;
  }
}

/* =========================
   BURGER MENU – TABLET & MOBIL
   ========================= */
@media (max-width: 1024px) {
  /* viser burger */
  .burger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2000;
  }

  .burger span {
    width: 50px;
    height: 10px;
    background: rgb(255, 255, 255);
    border-radius: 2px;
  }

  /* skjuler desktop-menu */
  nav ul {
    display: none;
  }

  /* når burger er åben */
  nav.open ul {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
    z-index: 1500;
  }
}

/* =========================================
    MOBIL – HOME (KOMPAKT TABLET)
   ========================================= */
@media (max-width: 768px) {
  /* ===== BAGGRUND ===== */
  body.home-page {
    background-size: 420%; /* lidt mindre zoom end tablet */
    background-position: center 55%;
  }

  /* ===== HEADER / LOGO ===== */
  .logo {
    font-size: 2rem; /* mindre end tablet */
    line-height: 0.9;
    margin-left: 20px;
    margin-top: 20px;
  }

  /* ===== LYDKNAP ===== */
  #sound-btn {
    right: 16px;
    top: 20px;
  }

  #sound-btn img {
    width: 80px;
  }

  /* ===== LAYOUT ===== */
  .home-layout {
    padding: 0 20px; /* mindre luft */
  }

  /* ===== AVATAR ===== */
  .avatar {
    width: 160px; /* mindre end tablet */
  }

  /* ===== STATS ===== */
  #stats-area {
    margin-top: -40px;
  }

  .stats-title-outside {
    font-size: 22px;
    width: 100%;
  }

  .stats-box {
    width: 100%;
  }

  /* ===== NEXT KNAP ===== */
  .next-button {
    font-size: 3.2rem; /* mere kompakt */
    bottom: 24px;
    right: 24px;
  }

  .character-section,
  .mini-map {
    display: none;
  }

  .burger span {
    width: 24px; /* bredde på streger */
    height: 3px; /* tykkelse */
  }

  .burger {
    gap: 4px; /* afstand mellem burger streger */
  }
}

/* =========================================
   TABLET  – PROJECTS 
   ========================================= */
@media (max-width: 1024px) {
  .projects-wrapper {
    justify-content: flex-start;
    padding-top: 160px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 80px;
    margin-top: 60px;
  }

  .project-item h2 {
    font-size: 2.4rem;
  }

  .project-item img {
    width: 70%;
    max-width: 700px;
  }
}

/* =========================================
   MOBIL – projects
   ========================================= */

@media (max-width: 768px) {
  .projects-wrapper {
    justify-content: flex-start;
    padding-top: 150px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    margin-top: 40px;
  }

  .project-item h2 {
    font-size: 1rem;
    margin-bottom: 16px;
  }

  .project-item img {
    width: 90%;
    max-width: 320%;
    border-radius: 10px;
  }
}

/* =========================================
    TABLET  – about
   ========================================= */

@media (max-width: 1024px) {
  /* selve boksen bliver mere vertikal */
  .about-box {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 20px;
    padding: 30px;
  }

  /* billed-container først */
  .about-image {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .about-image img {
    width: 160px;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
  }

  /* tekstboksen under */
  .about-title {
    top: 180px;
    font-size: 2.2rem;
  }

  /* tekstboksen under */
  .about-text {
    max-height: 45vh;
    overflow-y: auto;
  }
}

/* =========================================
   MOBIL – ABOUT
   ========================================= */
@media (max-width: 768px) {
  /* Overskrift */
  .about-title {
    top: 150px;
    font-size: 1.8rem;
  }

  /* Boksen bliver smallere og lavere */
  .about-box {
    width: 90%;
    height: 55vh;
    padding: 24px;
    gap: 20px;
  }

  /* Billedet mindre */
  .about-image img {
    max-height: 180px;
    object-fit: cover;
  }

  /* Tekst lidt mindre */
  .about-text p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

/* =========================================
    TABLET – CONTACT
   ========================================= */
@media (max-width: 1024px) {
  /* Zoom baggrund */
  body.contact-page {
    background-size: 300%;
    background-position: center 50%;
  }

  /* Fjerner avatar */
  .contact-avatar {
    display: none;
  }

  /* Gør boksen mere kompakt */
  .contact-box {
    width: 360px;
    padding: 28px;
  }

  .contact-title {
    font-size: 24px;
  }

  .contact-subtitle {
    font-size: 13px;
  }
}

/* =========================================
   MOBIL – CONTACT
   ========================================= */
@media (max-width: 768px) {
  /* Mere zoom på baggrund */
  body.contact-page {
    background-size: 400%;
    background-position: center 30%;
  }

  /* Kontaktboks smallere */
  .contact-box {
    width: 70%;
    padding: 20px;
  }

  .contact-title {
    font-size: 22px;
  }

  .contact-subtitle {
    font-size: 12px;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 14px;
  }
}

/* =========================================
   TABLET – FLOW 
   ========================================= */
@media (max-width: 1024px) {
  .flow-box {
    padding: 24px;
    margin-bottom: 40px;
  }

  /* =====================
     FLOW 1 – POSTKORTER
     ===================== */
  .flow-media-grid.postcards {
    grid-template-columns: 1fr 1fr; /* jeg holder dem side om side*/
    gap: 12px;
  }

  .flow-media-grid.postcards img {
    height: 220px;
    object-fit: contain;
  }

  /* =====================
     FLOW 1 – IPHONES
     ===================== */
  .flow-media-grid.phones {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .flow-media-grid.phones img {
    height: 260px;
    object-fit: contain;
  }

  /* =====================
     FLOW 2 – MOBILE FIRST
     ===================== */
  .flow-media-grid {
    gap: 14px;
  }

  .flow-media-grid img {
    height: 200px;
    object-fit: contain;
  }

  /* =====================
     FLOW 3 – VISUELT GRID
     ===================== */
  .flow-media-grid.flow3-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .flow-media-grid.flow3-grid img {
    height: 240px;
  }

  /* =====================
     FLOW 4 – VIDEOER
     ===================== */
  .flow-media-grid.flow4-videos {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .flow-media-grid.flow4-videos video {
    height: 200px;
    object-fit: contain;
  }

  /* =====================
     FLOW 4 – BILLEDER
     ===================== */
  .flow-media-grid.flow4-images {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .flow-media-grid.flow4-images img {
    height: 220px;
    object-fit: contain;
  }

  body.flow-page .next-button,
  body.flow-page .back-button {
    display: none;
  }
}
/* =========================================
   MOBIL – FLOW 
   ========================================= */
@media (max-width: 768px) {
  body.flow-page .flow-wrapper {
    padding-top: 140px;
    padding-bottom: 80px;
    width: 92%;
  }

  body.flow-page .flow-box {
    padding: 22px;
    margin-bottom: 40px;
  }

  body.flow-page .flow-box h1 {
    font-size: 26px;
  }

  body.flow-page .flow-box h2 {
    font-size: 22px;
  }

  body.flow-page .flow-box p {
    font-size: 14px;
    line-height: 1.6;
  }

  body.flow-page .next-button,
  body.flow-page .back-button {
    display: none;
  }

  .flow-media-grid.flow4-images {
    display: none;
  }
}

.flow-media-grid.flow3-grid img:nth-child(n + 4) {
  display: none;
}

/* =========================================
    TABLET – FILM SIDE
   ========================================= */
@media (max-width: 1024px) {
  .film-layout {
    padding: 140px 30px 120px;
    gap: 80px;
  }

  .film-section {
    gap: 16px;
  }

  .film-title {
    font-size: 26px;
  }

  .film-text {
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
  }

  .showreel-video-wrapper {
    max-width: 340px;
  }

  .film-media-placeholder {
    height: 220px;
  }
}

/* =========================================
    MOBIL – FILM SIDE
   ========================================= */
@media (max-width: 768px) {
  .film-layout {
    padding: 120px 20px 100px;
    gap: 60px;
  }

  .film-section {
    gap: 14px;
  }

  .film-title {
    font-size: 22px;
  }

  .film-text {
    font-size: 14px;
    line-height: 1.55;
  }

  .showreel-video-wrapper {
    max-width: 300px;
  }

  .film-media-placeholder {
    height: 180px;
  }
}

/* =========================================
   TABLET – PROCESS
   ========================================= */
@media (max-width: 1024px) {
  .process-wrapper {
    padding: 140px 30px 120px;
    gap: 60px;
  }

  .process-box {
    padding: 32px;
  }

  /* Tekst lidt smallere */
  .process-box p {
    max-width: 100%;
    font-size: 15px;
  }

  /* Almindelige billeder */
  .process-media {
    flex-wrap: wrap;
    justify-content: center;
  }

  .process-media img {
    max-width: 260px;
  }

  /* Grid-billeder i 2 kolonner */
  .process-media-grid.three,
  .process-media-grid.two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================
    MOBIL – PROCESS
   ========================================= */
@media (max-width: 768px) {
  .process-wrapper {
    padding: 120px 20px 100px;
    gap: 50px;
  }

  .process-box {
    padding: 26px;
  }

  .process-box h1 {
    font-size: 28px;
  }

  .process-box h2 {
    font-size: 22px;
  }

  .process-box p {
    font-size: 14px;
    line-height: 1.55;
  }

  /* Alle billeder i én kolonne */
  .process-media,
  .process-media-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .process-media img,
  .process-media-grid img {
    max-width: 100%;
    width: 100%;
  }
}