/* RESET – fjerner browserens standardafstande */
* {
  margin: 0;
  padding: 0;
}

/* GENEREL SIDESTIL */
body {
  background-color: #d9cbc2; /* baggrundsfarve */
  font-family: arial, helvetica, sans-serif; /* brødtekst-font */
}

/* NAVIGATION – topmenu */
.topnav {
  background-color: #e0c58f; /* gul/brun linje */
  display: flex; /* horisontal placering */
  justify-content: space-between; /* logo til venstre – links til højre */
  align-items: center; /* centrerer vertikalt */
  height: 90px; /* gjort lidt højere end før */
  box-sizing: border-box;
  padding: 0 20px; /* lidt ekstra luft */
}

/* Links i toppen */
header a {
  color: black;
  padding: 20px 25px; /* større klik-område */
  text-decoration: none;
  font-family: "Shadows Into Light Two", cursive; /* håndskrevet font */
  font-size: 1.4em; /* større tekst end før */
}

/* Menu-knapper */
.topnav > a {
  display: inline-block;
  background-color: #112250; /* mørk blå */
  color: #e0c58f; /* lys tekst */
  padding: 10px 22px; /* større knapper */
  border-radius: 10px;
  margin: 0px 20px;
  font-weight: bold;
  font-size: 1.3em; /* større tekst i knapperne */
  transition: 0.2s ease; /* blød hover-effekt */
}

/* Hover-effekt – samme som send-knappen */
.topnav > a:hover {
  background-color: #0d1a37; /* mørkere blå */
  transform: scale(1.08); /* pop-effekt lidt større */
}

/* Burger-menu ikon kun på mobil */
.topnav .icon {
  display: none;
}

/* Logoet */
.logo {
  display: flex;
  align-items: center;
  margin-right: auto;
  padding: 3px;
}

.logo img {
  height: 160px;
  width: auto;
  object-fit: contain;
}
/* ---------- DROPDOWN MENU (DESKTOP) ---------- */
/* Wrapper der holder dropdownen på linje med resten af menuen */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Projekter-knappen */
.dropbtn {
  background-color: #112250;
  color: #e0c58f;
  padding: 10px 22px;
  border-radius: 10px;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.3em;
  font-weight: bold;
  display: inline-block;
  cursor: pointer;
}

/* Selve dropdown-boksen */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  background-color: #112250;
  min-width: 200px;
  border-radius: 10px;
  padding: 8px 0;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

/* Links i dropdownen */
.dropdown-content a {
  color: #e0c58f;
  padding: 12px 18px;
  display: block;
  text-decoration: none;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.1em;
  border-radius: 8px;
}

/* Hover på links */
.dropdown-content a:hover {
  background-color: #0d1a37;
}

/* Hover-effekt → dropdown åbner */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Hover-effekt på selve knappen */
.dropdown:hover .dropbtn {
  background-color: #0d1a37;
  transform: scale(1.05);
  transition: 0.2s ease;
}
/* ---------- FOOTER ---------- */
.footer {
  background-color: #112250; /* mørk blå */
  color: #e0c58f; /* beige tekst */
  margin-top: 60px;
  padding: 25px 0;
}

.footer-indhold {
  width: 95%;
  margin: 0 auto;
  text-align: center;
  font-family: "Source Serif 4", serif;
  font-size: 1em;
  line-height: 1.6;
}

/* ---------- Hjem ---------- */

/* HERO-BILLEDE – det store billede øverst */
.forside-img {
  width: 100vw; /* fylder hele bredden */
  padding: 20px 0;
  overflow: hidden;
}
.flow-box,
.flow-box *,
.flow-btn,
.programmer-box,
.programmer-box * {
  font-family: "Source Serif 4", serif !important;
  font-weight: 400 !important; /* NORMAL vægt */
}
.forside-img img {
  width: 100vw;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* fylder uden at blive strukket */
}

/* GRID – hovedlayout med 4 kolonner */
.flow-container {
  width: 95%;
  margin: 40px auto; /* centreret */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 lige store kolonner */
  gap: 30px; /* afstand mellem kolonner */
}

/* Tekstbokse i grid */
.flow-box {
  background-color: #3c507d; /* blå boks */
  color: white;
  padding: 40px;
  border-radius: 30px; /* afrundede hjørner */
  font-size: 1.2em;
  line-height: 1.5;
}

/* Knapper inde i flow-boksene */
.flow-btn {
  display: block;
  width: fit-content;
  margin: 30px auto 0 auto; /* centreret */
  background-color: #112250;
  color: #e0c58f;
  padding: 12px 25px;
  border-radius: 10px;
  font-size: 1.4em;
  font-family: "Shadows Into Light Two", cursive;
  font-weight: bold;
  text-decoration: none;
  transition: 0.2s ease;
}

.flow-btn:hover {
  background-color: #0d1c3d;
  transform: scale(1.05); /* lille pop-effekt */
}

/* PROGRAMMER-BILLEDE – står i kolonne 4 */
.programmer-box {
  background-color: #3c507d;
  padding: 20px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.programmer-box img {
  width: 100%;
  max-width: 280px; /* gør billedet en passende størrelse */
  border-radius: 20px;
}

/* Venstre lille boks */
.forside-img2 img,
.forside-img3 img {
  width: 100%;
  height: auto;
  border-radius: 30px;
}

/* Velkomstbillede venstre */
.forside-img4 {
  display: flex;
  justify-content: flex-start;
  margin-top: 50px;
  margin-left: 400px; /* placering */
}

.forside-img4 img {
  width: 290px;
  border-radius: 30px;
}

/* Kontakt-billede i midten */
.forside-img5 {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.forside-img5 img {
  width: 320px;
  height: auto;
}
/* ---------- KONTAKT SIDE LAYOUT ---------- */

.kontakt-container {
  width: 90%;
  margin: 50px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  font-family: "Source Serif 4", serif;
  font-weight: 400 !important; /* NORMAL vægt */
}

/* Begge bokse */
.kontakt-box {
  background-color: #3c507d;
  padding: 30px;
  border-radius: 30px;
  color: #e0c58f;
}

/* Overskrifter */
.kontakt-title {
  background-color: #112250;
  width: fit-content;
  margin: 0 auto 25px auto;
  padding: 8px 25px;
  border-radius: 10px;
  font-size: 1.3em;
  color: #e0c58f;
  font-family: "Source Serif 4", serif;
}

/* Info felter (venstre side) */
.info-field {
  background-color: #112250;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 1.1em;
}

/* Formularfelter (højre side) */
.kontakt-box label {
  font-size: 1.2em;
  margin: 10px 0 5px 0;
  display: block;
}

.kontakt-input {
  width: 100%;
  background-color: #0c1b3a;
  border: none;
  border-radius: 10px;
  padding: 15px;
  color: white;
  font-size: 1.1em;
  margin-bottom: 20px;
  font-family: "Source Serif 4", serif;
  font-weight: 400 !important; /* NORMAL vægt */
}

.besked {
  height: 150px;
}

/* Send knap */
.kontakt-btn {
  background-color: #112250;
  color: #e0c58f;
  padding: 10px 40px;
  border: none;
  border-radius: 10px;
  font-size: 1.2em;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  font-family: "Source Serif 4", serif;
  font-weight: 400 !important; /* NORMAL vægt */
}

.kontakt-btn:hover {
  background-color: #0d1a37;
}
/* ---------- OM MIG SEKTION ---------- */

/* Container der holder billede + tekst side om side */
.om-mig-section {
  width: 95%;
  margin: 10px auto; /* sektionen rykket lidt op */
  display: grid; /* laver 2 kolonner */
  grid-template-columns: 1fr 1.6fr; /* større billede, lidt smallere tekstboks */
  gap: 40px; /* afstand mellem billede og tekst */
  align-items: center; /* vertikal centrering */
}

/* Portrætbilledet – */
.om-mig-billede img {
  width: 100%;
  max-width: 420px; /* begrænset max størrelse */
  border-radius: 20px; /* bløde hjørner */
  display: block; /* fjerner ekstra whitespace */
}

/* Tekstboksen – */
.om-mig-tekst {
  background-color: white; /* hvid baggrund */
  padding: 30px 45px; /* mindre padding end før */
  border-radius: 35px; /* lidt mindre afrunding end før */
  font-family: "Source Serif 4", serif; /* din valgte font */
  font-size: 1.15em; /* tidligere 1.3em → lidt mindre tekst */
  line-height: 1.55; /* behagelig linjeafstand */
  color: #333; /* mørkegrå tekst */
  text-align: center; /* centreret tekst */
  max-width: 900px; /* gør tekstboksen smallere */
}

/* ---------- CV KONTAINER ---------- */

/* Ydre container der holder begge CV-sider */
.cv-container {
  width: 75%; /* gjort lidt smallere så det er mere elegant */
  margin: 20px auto; /* rykket lidt op */
  background-color: #1b2c4b; /* mørk blå baggrund */
  padding: 35px; /* indvendig afstand */
  border-radius: 40px; /* bløde hjørner */
  display: flex; /* placerer de to CV-billeder ved siden af hinanden */
  justify-content: center; /* centrerer indholdet */
  gap: 30px; /* afstand mellem billederne */
}

/* CV billeder – gjort lidt større */
.cv-billede {
  width: 48%; /* tidligere 45% → nu lidt større */
  border-radius: 20px; /* bløde hjørner */
  display: block; /* ingen ekstra mellemrum */
}
/* Typografi */
h1 {
  padding: 20px 0;
}

p {
  line-height: 150%;
}
/* GRID LAYOUT */
.projekter-grid {
  width: 95%;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Hver projekt-boks */
.projekt-box {
  background-color: #3c507d; /* dine kolonnefarver */
  padding: 20px;
  border-radius: 30px;
  text-align: center;
}

/* Billeder */
.projekt-box img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* Tekst inde i boksen */
.projekt-tekst {
  background-color: #e6e6e6;
  padding: 15px;
  border-radius: 15px;
  margin: 15px 0;
  text-align: left;
  font-family: "Source Serif 4", serif;
  font-size: 1.1em;
  line-height: 1.5;
}

/* Knapper – matcher dine tidligere knapper */
.projekt-btn {
  display: inline-block;
  background-color: #112250;
  color: #e0c58f;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 1.2em;
  font-family: "Shadows Into Light Two", cursive;
  text-decoration: none;
  transition: 0.2s ease;
}

.projekt-btn:hover {
  background-color: #0d1a37;
  transform: scale(1.05);
}
/* Ens størrelse på alle projektbilleder */
.projekt-box img {
  width: 100%;
  height: 220px; /* fast højde på alle billeder */
  object-fit: cover; /* beskærer pænt så alle passer */
  border-radius: 20px;
}
/*------  FLOW SIDE 1 TEKST ØVERST ------*/
.flow-top-tekst {
  background-color: #3c507d;
  color: white;
  padding: 25px 30px;
  border-radius: 15px;
  font-family: "Source Serif 4", serif;
  line-height: 1.6;
  width: 95%;
  margin: 20px auto;
}

/* LAYOUT MED BILLEDER + TEKST TIL HØJRE  */
.flow-layout {
  width: 95%;
  margin: 30px auto;
  display: grid;
  grid-template-columns: 2fr 1.3fr; /* venstre bred, højre tekst smallere */
  gap: 30px;
  align-items: start;
}

/*  BILLEDER: SIDE 1 & SIDE 2 VED SIDEN AF HINANDEN  */
.flow-billed-gruppe {
  display: grid;
  grid-template-columns: 1fr 1fr; /* to billeder ved siden af hinanden */
  gap: 20px;
}

.flow-billed-gruppe img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/*  TEKSTEN TIL HØJRE  */
.flow-højre-tekst {
  background-color: #3c507d;
  color: white;

  padding: 40px 45px; /* større indre afstand */
  border-radius: 20px;

  font-family: "Source Serif 4", serif;
  font-size: 1.2em; /* større tekst */
  line-height: 1.7;

  min-height: 460px; /* ← GØR BOKSEN MARKANT STØRRE */
  display: flex;
  align-items: center; /* centrer tekst vertikalt */
}
/* Container til fanerne – gør at de ligger på række */
.faner-container {
  display: flex;
  gap: 15px; /* afstand mellem fanerne */
  margin-bottom: 15px; /* luft ned til tekstboksen */
}

/* Enkel fane */
.fane {
  background-color: #112250; /* mørk blå */
  color: #e0c58f; /* beige/guld tekst */
  padding: 10px 25px; /* indre luft */
  border-radius: 12px; /* afrundede hjørner */
  font-family: "Shadows Into Light Two", cursive; /* samme font som knapperne */
  font-size: 1.3em;
  font-weight: bold;
  margin-top: 10px;

  user-select: none; /* kan ikke markeres */
  pointer-events: none; /* kan ikke klikkes */
}

/*------ FLOW  2 ------ */
/* De små faner øverst */
.opgave-top {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  margin-top: 20px;
}

.opgave-tab {
  background-color: #112250;
  color: #e0c58f;
  padding: 10px 25px;
  border-radius: 10px;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.3em;
  font-weight: bold;
  margin-left: 10px;
}

/* Stor blå tekstboks med opgaven */
.opgave-tekstboks {
  background-color: #3c507d;
  color: white;
  padding: 40px;
  border-radius: 25px;
  width: 50%;
  font-family: "Source Serif 4", serif;
  font-size: 1.1em; /* tilpas tekststørrelsen */
  line-height: 1.6;
  margin-left: 10px;
}

.opgave-tekstboks p {
  margin-bottom: 18px; /* giver mellemrum  */
  margin-left: 10px;
}

.opgave-tekstboks strong {
  color: #e0c58f; /* Gør overskrifterne mere tydelige */
  font-size: 0.9em;
}
/* Container til billederne i Flow 2 – placeret til højre */
.flow2-billeder {
  position: absolute; /* gør det muligt at placere dem frit */
  top: 250px; /* justér for at rykke dem ned ad siden */
  right: 10px; /* afstand fra højre side */
  display: flex;
  flex-direction: column; /* billederne under hinanden */
  gap: 70px; /* luft mellem billeder */
}

/* Styling af billederne */
.flow2-billeder img {
  width: 600px; /* størrelse på billederne */
  height: auto;
  border-radius: 20px; /* runde hjørner */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); /* lidt skygge */
}

/*------ FLOW  3 ------ */
.opgave-header {
  display: flex;
  gap: 15px; /* lille luft mellem dem */
  margin: 20px 0 10px 10px;
}

.opgave-btn {
  background-color: #112250;
  color: #e0c58f;
  padding: 10px;
  border-radius: 10px;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.3em;
  font-weight: bold;
  margin-left: 10px;
}

/* Tekstboksen */
.opgave-tekst-boks {
  background-color: #3c507d;
  color: white;
  padding: 35px 40px;
  margin: 0 10px 30px 10px;
  border-radius: 25px;
  font-family: "Source Serif 4", serif;
  font-size: 1.2em;
  line-height: 1.6;
}

/*  FLOW 3 BILLEDGALLERI  */

/* Hele galleriet */
.flow3-gallery {
  width: 90%;
  margin: 40px auto;
  display: grid;
  gap: 25px; /* afstand mellem rækker */
}

/* En række med 2 billeder */
.gallery-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 billeder ved siden af hinanden */
  gap: 20px;
}

/* Billederne */
.gallery-row img {
  width: 100%;
  height: auto;
  border-radius: 20px; /* samme runde hjørner som dine andre billeder */
  object-fit: cover;
}
/*------ FLOW  4 ------ */
/* Opgave og Flow knapper (samme stil som dine andre)  */
.opgave-flow-container {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.opgave-btn,
.flow-btn {
  background-color: #112250;
  color: #e0c58f;
  padding: 10px 25px;
  border-radius: 10px;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.3em;
  font-weight: bold;
}

/* Flow 4 tekstboks */
.flow4-tekstboks {
  background-color: #3c507d;
  color: white;
  padding: 30px 40px;
  border-radius: 22px;
  margin-top: 20px;
  width: 93%;
  line-height: 1.55;
  font-family: "Source Serif 4", serif;
  font-size: 1.15em;
  margin-left: 10px;
}

/*  Flow 4 galleri  */
.flow4-gallery {
  width: 95%;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 billeder ved siden af hinanden */
  gap: 25px;
}

.flow4-gallery img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}
strong {
  color: #e0c58f; /* Gør overskrifterne mere tydelige */
  font-size: 0.9em;
}
.side-tekst {
  background-color: #3c507d;
  color: white;
  padding: 35px;
  border-radius: 30px;
  font-family: "Source Serif 4", serif;
  font-size: 1.1em;
  line-height: 1.6;
  margin: 20px;
}

/* --------- VIDEO RÆKKE --------- */
.video-row {
  width: 95%;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.video-row video {
  width: 100%;
  border-radius: 12px;
  background: black;
}

/* ------ Flow 5 ------ */
.tekst-sektion {
  width: 95%;
  margin: 40px auto;
}
/* Titel-boksen */
.sektion-titel {
  background-color: #112250;
  color: #e0c58f;
  padding: 12px 30px;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.6em;
  border-radius: 12px;
  width: fit-content;
  margin-bottom: 20px;
}
.tekst-med-billeder {
  width: 100%;
  margin: 10px;
  display: grid;
  grid-template-columns: 2fr 1.2fr; /* stor tekst – mindre billede-side */
  gap: 30px;
  align-items: start;
}

.tekst-boks {
  background-color: #3c507d;
  color: white;
  padding: 45px;
  border-radius: 30px;
  font-family: "Source Serif 4", serif;
  font-size: 1.2em;
  line-height: 1.7;
}

.billede-side {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.billede-side img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  background-color: white;
}

/* ---------- PROTOTYPE KNAPPER ---------- */
.prototype-knapper {
  width: 95%;
  display: flex;
  flex-direction: column;
  gap: 30px; /* luft mellem knapper */
}

.prototype-btn {
  background-color: #112250;
  color: #e0c58f;
  padding: 18px 0;
  text-align: center;
  border-radius: 14px;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.5em;
  text-decoration: none;
  transition: 0.2s ease;
}

.prototype-btn:hover {
  background-color: #0d1a37;
  transform: scale(1.03);
}
/* ------ Tidligere projekter ------ */
.tidligere-projekter-sektion {
  width: 95%;
  margin: 40px auto;
}

/* Titel-boksen */
.tp-titel {
  background-color: #112250;
  color: #e0c58f;
  padding: 12px 30px;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.6em;
  border-radius: 12px;
  width: fit-content;
  margin-bottom: 20px;
}

/* Tekstboksen */
.tp-tekstboks {
  background-color: #3c507d;
  color: white;
  padding: 35px 40px;
  border-radius: 20px;
  line-height: 1.7;
  font-family: "Source Serif 4", serif;
  font-size: 1.2em;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); /* Lækker let skygge */
}
/* ---------- TIKTOK VIDEO GALLERI (DESKTOP) ---------- */

.tiktok-video-galleri {
  width: 95%;
  margin: 30px auto 50px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 videoer i række */
  gap: 25px;
}

.tiktok-video-galleri video {
  width: 100%;
  height: 500px;
  border-radius: 20px;
  background-color: black;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
}
/* ---------- FAST TILBAGE-KNAP ---------- */
.tilbage-knap {
  top: 120px; /* lige under din menu */
  left: 20px;
  z-index: 6000;

  background-color: #112250;
  color: #e0c58f;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: "Shadows Into Light Two", cursive;
  font-size: 1.3em;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: 0.2s ease;
}

.tilbage-knap:hover {
  transform: scale(1.08);
  background-color: #0d1a37;
}
/*----------------------------------------------- MOBILVENLIGT LAYOUT ----------------------------------------------- */
@media screen and (max-width: 600px) {
  /* ---------- NAVIGATION ---------- */

  .topnav {
    height: auto;
    padding: 10px 15px;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e0c58f;
  }

  /* Gør logoet mindre på mobil */
  .logo img {
    height: 100px;
  }

  /* Skjul desktop-links */
  .topnav > a {
    display: none;
  }

  header a {
    font-size: 1.1em;
    padding: 10px 15px;
  }

  /* -------- BURGER IKON -------- */
  .topnav .icon {
    display: block;
    font-size: 2em;
    background-color: #112250;
    color: #e0c58f;
    padding: 10px 15px;
    border-radius: 10px;
  }

  /* Når menuen bliver åben */
  .topnav.responsive {
    width: 100%;
  }

  /* ------ BURGER-MENUENS INHOLD (BLÅ BOKS) ------ */
  .topnav.responsive a,
  .topnav.responsive .dropdown {
    display: block;
    width: 100%;
    background-color: #112250;
    color: #e0c58f;
    text-align: center;
    padding: 12px 0;
    border-radius: 10px;
    margin: 5px 0;
  }

  /* Skjul dropdown i lukket tilstand */
  .topnav .dropdown {
    display: none;
  }

  /* Vis dropdown når menuen er åben */
  .topnav.responsive .dropdown {
    display: block;
  }

  /* ---------- DROPDOWN INDE I BURGER-MENU ---------- */

  .dropdown .dropbtn {
    width: 100%;
    padding: 12px 0;
    font-size: 1.3em;
    background-color: #112250;
    color: #e0c58f;
    border-radius: 10px;
    margin-bottom: 5px;
  }

  /* Pil bevares på Projekter i mobil-menu */
  .dropbtn .arrow {
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s ease;
  }

  /* Drej pil når dropdown åbner */
  .dropdown:focus-within .arrow {
    transform: rotate(180deg);
  }

  /* Dropdown indhold */
  .dropdown-content {
    display: none;
    background-color: #112250;
    width: 100%;
    border-radius: 10px;
  }

  /* Åbn dropdown ved klik */
  .dropdown:focus-within .dropdown-content {
    display: block;
  }

  .dropdown-content a {
    padding: 10px 0;
    display: block;
    text-align: center;
    color: #e0c58f;
  }
  /* Gør checkbox usynlig */
  .proj-check {
    display: none;
  }

  /* Dropdown lukket som standard */
  .proj-check ~ .dropdown-content {
    display: none;
  }

  /* Når checkbox er CHECKED → dropdown åbner */
  .proj-check:checked ~ .dropdown-content {
    display: block;
  }

  /* Roter pilen */
  .proj-check:checked + .dropbtn .arrow {
    transform: rotate(90deg);
  }

  /* ---------- HERO BILLEDE ---------- */
  .forside-img img {
    width: 100%;
    height: auto;
  }

  /* ---------- FLOW GRID → 1 KOLONNE ---------- */
  .flow-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .flow-box {
    padding: 25px;
    font-size: 1.1em;
  }

  .flow-btn {
    font-size: 1.2em;
  }

  .programmer-box img {
    max-width: 200px;
  }

  .om-mig-section {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .om-mig-billede img {
    max-width: 260px;
    margin: auto;
  }

  .om-mig-tekst {
    padding: 25px;
    font-size: 1em;
  }

  .cv-container {
    flex-direction: column;
    width: 90%;
    padding: 20px;
  }

  .cv-billede {
    width: 100%;
  }

  .kontakt-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .kontakt-box {
    padding: 20px;
  }

  .kontakt-input {
    font-size: 1em;
    padding: 12px;
  }

  .kontakt-btn {
    font-size: 1.1em;
  }

  .projekter-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .projekt-box {
    padding: 15px;
  }

  .projekt-tekst {
    font-size: 1em;
    padding: 12px;
  }

  .flow-top-tekst {
    padding: 20px;
    font-size: 1em;
  }

  .flow-layout {
    grid-template-columns: 1fr;
  }

  .flow-billed-gruppe {
    grid-template-columns: 1fr;
  }

  .flow-højre-tekst {
    padding: 25px;
    font-size: 1.1em;
    min-height: auto;
  }

  .flow2-billeder {
    position: static;
    width: 100%;
    display: grid;
    gap: 20px;
  }

  .flow2-billeder img {
    width: 100%;
  }

  .opgave-tekstboks {
    width: 100%;
    padding: 25px;
    font-size: 1em;
  }

  .gallery-row {
    grid-template-columns: 1fr;
  }

  .opgave-tekst-boks {
    font-size: 1.05em;
    padding: 25px;
  }

  .flow4-tekstboks {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.05em;
    padding: 25px;
  }

  .flow4-gallery {
    grid-template-columns: 1fr;
  }
  .video-row {
    grid-template-columns: 1fr;
  }

  .tiktok-video-galleri {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tiktok-video-galleri video {
    height: 250px;
  }
  /* ---------- FLOW 5 - processen  ---------- */
  .tekst-med-billeder {
    width: 95%;
    margin: 30px auto;
    display: grid;
    grid-template-columns: 1fr; /* ÉN kolonne */
    gap: 25px;
  }

  .tekst-boks {
    padding: 30px;
    font-size: 1.05em;
    line-height: 1.6;
  }

  .billede-side {
    grid-template-columns: 1fr; /* Ét billede pr. række */
    gap: 20px;
  }

  .billede-side img {
    border-radius: 12px;
  }

  /* ---------- MOBIL: PROTOTYPE KNAPPER ---------- */
  .prototype-knapper {
    width: 95%;
    margin: 30px auto 50px auto;
    gap: 20px;
  }

  .prototype-btn {
    font-size: 1.3em;
    padding: 16px 0;
  }
}