/* --- 1. VARIABELEN & BASIS --- */
:root {
  --bg-light-blue: #a3b8d7; /* Variabele voor achtergrondkleur */
  --window-blue: #7a97c6; /* Variabele voor de hoofdkleur (blauw) */
  --text-dark: #2a2a2a; /* Variabele voor donkere tekst */
  --window-white: #ffffff; /* Variabele voor wit */
}

body {
  background: linear-gradient(
    180deg,
    #b8c9e0 0%,
    #a3b8d7 100%
  ); /* Verloopachtergrond */
  color: var(--text-dark); /* Gebruik tekstkleur variabele */
  font-family: "Space Mono", monospace; /* Lettertype instellen */
  margin: 0; /* Geen buitenmarge */
  padding: 0; /* Geen binnenvulling */
  min-height: 100vh; /* Minimaal hele schermhoogte vullen */
}

/* --- 2. HEADER & NAVIGATIE (Mobile First) --- */
.main-header {
  display: flex; /* Maakt flexbox van header */
  justify-content: space-between; /* Logo links, menu rechts */
  align-items: center; /* Verticaal centreren */
  padding: 10px 5%; /* Ruimte aan binnenkant */
  background: rgba(255, 255, 255, 0.9); /* Halftransparant wit */
  border-bottom: 2px solid var(--window-blue); /* Blauwe lijn onderaan */
  position: sticky; /* Blijft bovenin staan bij scrollen */
  top: 0; /* Positie bovenaan */
  z-index: 1000; /* Zorgt dat header bovenop alles ligt */
  backdrop-filter: blur(5px); /* Maakt achtergrond achter header wazig */
}

.logo {
  font-weight: bold; /* Dikgedrukte tekst */
  font-size: 1.1rem; /* Grootte van logo */
  text-transform: uppercase; /* Alles in hoofdletters */
  margin: 0; /* Geen marges */
}

.logo span {
  color: var(--window-blue); /* Accentkleur voor deel van logo */
}

/* Mobiel Menu UI */
.menu-checkbox {
  display: none; /* Verbergt de onzichtbare klik-vanger */
}

.hamburger-label {
  display: flex; /* Maakt flexbox van menu-icoon */
  flex-direction: column; /* Streepjes onder elkaar */
  gap: 4px; /* Ruimte tussen streepjes */
  cursor: pointer; /* Handje bij muisaanwijzer */
}

.bar {
  width: 25px; /* Breedte streepje */
  height: 3px; /* Dikte streepje */
  background-color: var(--window-blue); /* Kleur streepje */
}

.nav-links {
  display: none; /* Standaard onzichtbaar op mobiel */
  flex-direction: column; /* Links onder elkaar */
  position: absolute; /* Los van de normale layout */
  top: 100%; /* Direct onder de header */
  left: 0; /* Vanaf de linker kant */
  width: 100%; /* Volle breedte */
  background: white; /* Achtergrondmenu */
  padding: 20px 0; /* Ruimte boven en onder */
  border-bottom: 2px solid var(--window-blue); /* Lijn onderaan menu */
  z-index: 999; /* Onder de header, boven de content */
  list-style: none; /* Geen opsommingstekens */
  margin: 0; /* Geen marges */
}

.nav-links a {
  text-decoration: none; /* Geen onderstreping */
  color: var(--text-dark); /* Tekstkleur link */
  font-size: 0.9rem; /* Tekstgrootte link */
  padding: 10px 20px; /* Klikbaar gebied vergroten */
  display: block; /* Hele breedte klikbaar maken */
  transition: 0.3s; /* Vloeiende overgang bij hover */
}

/* Menu tonen bij klik */
.menu-checkbox:checked ~ .nav-links {
  display: flex; /* Toon menu als checkbox is aangevinkt */
}

.nav-links a:hover,
.nav-links a.active {
  background-color: var(--window-blue); /* Achtergrond bij hover */
  color: white; /* Tekst wit bij hover */
}

/* --- 3. LAYOUT ELEMENTEN --- */
.hero-section {
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Alles onder elkaar */
  align-items: center; /* Horizontaal centreren */
  padding: 40px 20px; /* Ruimte om de sectie */
}

.window-frame {
  background: var(--window-white); /* Witte vensterkleur */
  border: 2px solid var(--window-blue); /* Blauwe rand */
  border-radius: 8px; /* Afgeronde hoeken */
  overflow: hidden; /* Inhoud binnen hoeken houden */
  max-width: 700px; /* Maximale breedte */
  width: 100%; /* Flexibele breedte */
  box-shadow: 10px 10px 0px rgba(122, 151, 198, 0.4); /* Retro schaduw */
}

.window-top {
  background: var(--window-blue); /* Blauwe bovenbalk */
  color: white; /* Witte tekst in balk */
  padding: 8px 15px; /* Ruimte in balk */
  display: flex; /* Flexbox voor balk-inhoud */
  justify-content: space-between; /* Titel links, knopjes rechts */
  align-items: center; /* Verticaal centreren */
}

.controls .dot {
  display: inline-block; /* Bolletjes naast elkaar */
  width: 10px; /* Breedte bolletje */
  height: 10px; /* Hoogte bolletje */
  background: white; /* Kleur bolletje */
  border-radius: 50%; /* Maakt bolletje rond */
  margin-right: 4px; /* Ruimte tussen bolletjes */
  opacity: 0.8; /* Beetje doorzichtig */
}

.main-img {
  width: 100%; /* Foto vult breedte venster */
  height: auto; /* Verhouding behouden */
  display: block; /* Geen witruimte onder foto */
}

.hero-content h1 {
  font-size: 1.8rem; /* Grootte titel (mobiel) */
  text-align: center; /* Gecentreerde titel */
  margin-top: 30px; /* Ruimte boven titel */
}

.hero-content span {
  background-color: var(--window-blue); /* Blauwe achtergrond achter tekst */
  color: white; /* Witte letters */
  padding: 0 5px; /* Beetje ruimte om tekst */
}

.hero-content p {
  max-width: 500px; /* Max breedte voor leesbaarheid */
  text-align: center; /* Tekst centreren */
  margin: 15px auto; /* Ruimte en centreren */
  background: rgba(255, 255, 255, 0.5); /* Lichtdoorzichtig wit blok */
  padding: 15px; /* Ruimte binnen blok */
  border-radius: 10px; /* Afgeronde hoeken blok */
}

.main-footer {
  text-align: center; /* Tekst onderaan centreren */
  padding: 30px; /* Ruimte onderaan */
  font-size: 0.8rem; /* Kleine tekst */
}

/* --- 4. DESKTOP AANPASSINGEN --- */
@media (min-width: 801px) {
  .hamburger-label {
    display: none; /* Verberg menu-icoon op PC */
  }

  .nav-links {
    display: flex; /* Toon menu altijd op PC */
    flex-direction: row; /* Links naast elkaar */
    position: static; /* Normale positie in header */
    width: auto; /* Alleen benodigde breedte */
    background: transparent; /* Geen achtergrond nodig */
    border: none; /* Geen rand nodig */
    padding: 0; /* Geen vulling */
    gap: 20px; /* Ruimte tussen links */
  }

  .nav-links a {
    padding: 5px 10px; /* Kleinere padding voor desktop */
  }

  .window-frame {
    box-shadow: 15px 15px 0px rgba(122, 151, 198, 0.4); /* Grotere schaduw op PC */
  }

  .hero-content h1 {
    font-size: 2.5rem; /* Grotere titel op PC */
  }

  .hero-content span {
    padding: 0 10px; /* Iets bredere markering */
  }
}
/* GESCHIEDNIS CSS */
/* --- 1. VARIABELEN & BASIS --- */
:root {
  --cloud-blue: #a3b8d7; /* Zachtblauwe kleur voor accenten */
  --window-header: #7a97c6; /* De donkerdere kleur voor de vensterbalken */
  --bg-light: #f0f4f9; /* Hele lichte achtergrondkleur */
  --text-dark: #333333; /* Bijna zwarte kleur voor de tekst */
}

body {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--cloud-blue) 100%
  ); /* Kleurverloop van wit naar blauw */
  background-attachment: fixed; /* De achtergrond blijft staan terwijl je scrollt */
  color: var(--text-dark); /* Stelt de tekstkleur in */
  font-family: "Space Mono", monospace; /* Gebruikt een retro-stijl lettertype */
  margin: 0; /* Haalt de standaard witruimte weg */
}

.main-img {
  width: 100%; /* Maakt afbeeldingen altijd vensterbreed */
  height: auto; /* Behoudt de juiste verhoudingen */
  display: block; /* Voorkomt witruimte onder de afbeelding */
}

/* --- 2. HEADER & NAVIGATIE (Mobiel Eerst) --- */
.main-header {
  display: flex; /* Zet logo en menu naast elkaar */
  justify-content: space-between; /* Logo links, menu rechts */
  align-items: center; /* Lijn ze verticaal netjes uit */
  padding: 15px 5%; /* Ruimte binnen de header */
  background: rgba(255, 255, 255, 0.9); /* Wit met een beetje doorzichtigheid */
  border-bottom: 2px solid var(--window-header); /* Blauwe streep onder de header */
  position: sticky; /* Header blijft bovenin het scherm plakken */
  top: 0; /* Positie voor het plakken */
  z-index: 1000; /* Zorgt dat de header altijd bovenop ligt */
}

.logo {
  font-weight: bold; /* Dikgedrukt logo */
  font-size: 1.1rem; /* Grootte van het logo */
  text-transform: uppercase; /* Logo in hoofdletters */
  margin: 0; /* Geen extra marges */
}

.logo span {
  color: var(--window-header); /* Maakt een deel van het logo blauw */
}

/* Menu standaard voor mobiel */
.menu-checkbox {
  display: none; /* Verbergt de technische checkbox */
}

.hamburger-label {
  display: flex; /* Container voor de menustreepjes */
  flex-direction: column; /* Streepjes onder elkaar */
  gap: 5px; /* Ruimte tussen de streepjes */
  cursor: pointer; /* Handje bij aanwijzen */
}

.bar {
  width: 25px; /* Breedte van een menustreepje */
  height: 3px; /* Dikte van een menustreepje */
  background-color: var(--window-header); /* Blauwe kleur voor het icoon */
}

.nav-links {
  display: none; /* Verberg menu standaard op mobiel */
  flex-direction: column; /* Links onder elkaar op mobiel */
  position: absolute; /* Laat menu over de tekst zweven */
  top: 100%; /* Start onderaan de header */
  left: 0; /* Vanaf de uiterste linker kant */
  width: 100%; /* Schermbreed menu */
  background: white; /* Achtergrondkleur menu */
  padding: 20px 0; /* Ruimte boven en onder de links */
  text-align: center; /* Centreert de linkteksten */
  border-bottom: 2px solid var(--window-header); /* Lijn onderaan menu */
  list-style: none; /* Geen bolletjes voor de lijst */
  margin: 0; /* Geen marges */
}

.nav-links a {
  text-decoration: none; /* Geen onderstreping bij links */
  color: #333; /* Tekstkleur link */
  padding: 10px; /* Klikbaar oppervlak */
  display: block; /* Maakt hele regel klikbaar */
  font-weight: bold; /* Dikgedrukte links */
}

.nav-links a.active {
  background-color: var(--window-header); /* Blauw als je op die pagina bent */
  color: white; /* Witte tekst voor de actieve link */
}

.menu-checkbox:checked ~ .nav-links {
  display: flex; /* Toont het menu zodra je op de hamburger klikt */
}

/* --- 3. WINDOWS & CONTENT --- */
.history-page {
  padding: 20px; /* Algemene ruimte voor de pagina-inhoud */
}

.intro h1 {
  font-size: 1.8rem; /* Grootte van de hoofdtitel */
  text-align: center; /* Centreert de titel */
}

.intro span {
  color: var(--window-header); /* Accentkleur in de titel */
}

.window-frame {
  background: white; /* Wit binnenpaneel */
  border: 2px solid var(--window-header); /* Blauwe omlijning */
  box-shadow: 10px 10px 0px rgba(122, 151, 198, 0.3); /* Retro schaduw */
  margin: 20px auto; /* Afstand rondom en centreren */
  width: 100%; /* Volle breedte (binnen de marges) */
  overflow: hidden; /* Geen uitstekende inhoud bij ronde hoeken */
}

.window-top {
  background: var(--window-header); /* De blauwe bovenkant van het venster */
  color: white; /* Witte tekst in de bovenkant */
  padding: 8px; /* Ruimte binnen de bovenbalk */
  display: flex; /* Zet elementen in de balk naast elkaar */
  justify-content: space-between; /* Verdeelt de inhoud */
}

.dot {
  width: 10px; /* Breedte van de versierings-bolletjes */
  height: 10px; /* Hoogte van de versierings-bolletjes */
  background: white; /* Witte kleur bolletjes */
  border-radius: 50%; /* Maakt ze rond */
  display: inline-block; /* Zet ze naast elkaar */
  margin-right: 5px; /* Ruimte tussen de bolletjes */
}

summary {
  background: white; /* Achtergrond van het uitklapbare kopje */
  border: 2px solid var(--window-header); /* Blauwe rand om het kopje */
  padding: 15px; /* Ruimte in het kopje */
  margin: 10px 0; /* Afstand tussen de verschillende kopjes */
  cursor: pointer; /* Handje bij aanwijzen */
  list-style: none; /* Verwijdert het standaard pijltje */
  font-weight: bold; /* Dikke tekst */
  text-transform: uppercase; /* Kopjes in hoofdletters */
}

details[open] summary {
  background: var(
    --window-header
  ); /* Blauwe achtergrond als het opengeklapt is */
  color: white; /* Witte tekst als het opengeklapt is */
}

.milestone-flex {
  display: flex; /* Maakt een flexbox van de mijlpaal-inhoud */
  flex-direction: column; /* Op mobiel: foto boven tekst */
  gap: 20px; /* Ruimte tussen foto en tekst */
  padding: 15px; /* Ruimte binnen het paneel */
}

/* --- 4. DESKTOP AANPASSINGEN (Vanaf 801px) --- */
@media (min-width: 801px) {
  .hamburger-label {
    display: none; /* Verbergt de hamburger-knop op grote schermen */
  }

  .nav-links {
    display: flex; /* Toont het menu altijd op desktop */
    flex-direction: row; /* Links naast elkaar op desktop */
    position: static; /* Menu zit weer gewoon in de header-balk */
    width: auto; /* Neemt alleen de benodigde ruimte in */
    background: transparent; /* Geen achtergrondkleur nodig */
    padding: 0; /* Geen extra vulling */
    border: none; /* Geen rand nodig */
    gap: 10px; /* Ruimte tussen de knoppen */
  }

  .nav-links a {
    padding: 8px 15px; /* Ruimte binnen de knoppen */
    border-radius: 4px; /* Licht afgeronde hoeken voor knoppen */
  }

  .milestone-flex {
    flex-direction: row; /* Op desktop: foto en tekst naast elkaar */
    align-items: flex-start; /* Lijn de inhoud aan de bovenkant uit */
  }

  .milestone-flex .window-frame {
    flex: 1; /* De foto-venster krijgt 1 deel van de ruimte */
    margin: 0; /* Geen marges nodig in de flexbox */
  }

  .milestone-flex .text-block {
    flex: 1.5; /* De tekst krijgt 1.5x zoveel ruimte als de foto */
  }
}

.main-footer {
  text-align: center; /* Centreert de footer-tekst */
  padding: 30px; /* Ruimte onderaan */
  background: white; /* Witte achtergrond voor de voet van de pagina */
  border-top: 2px solid var(--window-header); /* Blauwe lijn boven de footer */
  margin-top: 40px; /* Afstand tot de bovenliggende content */
}
/*GALERIJ CSS*/
/* --- 1. GALERIJ BASIS (Mobile First) --- */
.gallery-stack-page {
  padding: 20px; /* Ruimte rondom de hele galerij-pagina */
}

.gallery-stack-page .intro {
  text-align: center; /* Centreert de inleidende tekst */
  margin-bottom: 30px; /* Ruimte onder de introductie */
}

/* De container: Standaard op mobiel een kolom */
.stack-container {
  display: flex; /* Activeert flexbox voor de foto-items */
  flex-direction: column; /* Zet foto's op mobiel recht onder elkaar */
  align-items: center; /* Centreert de foto's horizontaal */
  gap: 30px; /* Ruimte tussen de foto's */
  padding: 20px 0; /* Ruimte boven en onder de stapel */
  height: auto; /* Hoogte past zich aan de inhoud aan */
}

/* De venstertjes op mobiel */
.stack-item {
  position: relative; /* Nodig voor eventuele absolute elementen erin */
  width: 95%; /* Bijna schermbreed op kleine telefoons */
  max-width: 320px; /* Maar nooit breder dan 320px */
  background: white; /* Witte rand rondom de foto (polaroid effect) */
  border: 1px solid var(--window-header); /* Dun blauw randje */
  overflow: hidden; /* Zorgt dat foto niet buiten de rand steekt */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Zachte schaduw voor diepte */
  text-decoration: none; /* Verwijdert onderstreping als het een link is */
  color: inherit; /* Neemt de tekstkleur van de pagina over */
}

.stack-item img {
  width: 100%; /* Foto vult de hele breedte van het item */
  height: 200px; /* Vaste hoogte voor eenheid op mobiel */
  display: block; /* Geen witruimte onder de afbeelding */
  object-fit: cover; /* Snijdt foto bij zodat het kader altijd gevuld is */
}

/* --- 2. LIGHTBOX (Het vergrote beeld) --- */
.lightbox {
  position: fixed; /* Blijft op z'n plek staan tijdens scrollen */
  top: 0; /* Vult het hele scherm vanaf de bovenkant */
  left: 0; /* Vult het hele scherm vanaf links */
  width: 100%; /* Volle breedte van het scherm */
  height: 100%; /* Volle hoogte van het scherm */
  background: rgba(0, 0, 0, 0.95); /* Bijna volledig zwarte achtergrond */
  display: none; /* Standaard onzichtbaar */
  justify-content: center; /* Centreert de grote foto horizontaal */
  align-items: center; /* Centreert de grote foto verticaal */
  z-index: 9999; /* Staat bovenop absoluut alles */
}

.lightbox:target {
  display: flex; /* Wordt zichtbaar als de URL eindigt op de ID (#) */
}

.big-view {
  width: 90%; /* Breedte op het scherm */
  max-width: 900px; /* Nooit groter dan 900px */
  background: black; /* Zwarte achtergrond voor de foto-houder */
  border: 2px solid var(--window-header); /* Blauwe rand om de vergroting */
  padding: 0; /* Geen witruimte tussen rand en foto */
}

.big-view img {
  width: 100%; /* Foto vult de breedte van de big-view */
  height: auto; /* Hoogte schaalt mee */
  max-height: 80vh; /* Foto wordt nooit hoger dan 80% van het scherm */
  display: block; /* Voorkomt kieren onder de foto */
  object-fit: contain; /* Zorgt dat de hele foto zichtbaar is zonder vervorming */
}

.close-area {
  position: absolute; /* Bedekt de hele achtergrond */
  width: 100%; /* Volle breedte */
  height: 100%; /* Volle hoogte */
  z-index: -1; /* Ligt achter de foto, klikken sluit de lightbox */
}

/* --- 3. DESKTOP LAYOUT (Vanaf 801px) --- */
@media (min-width: 801px) {
  .stack-container {
    position: relative; /* Maakt vrij positioneren van items mogelijk */
    display: block; /* Geen flexbox meer, maar een vrij canvas */
    height: 750px; /* Vaste hoogte om ruimte te maken voor de stapel */
    max-width: 1000px; /* Breedte op desktop */
    margin-left: 5%; /* Lijnt de stapel uit aan de linkerkant (logo kant) */
    margin-right: auto; /* Zorgt voor automatische rechterkant */
  }

  .stack-item {
    position: absolute; /* Laat de items over elkaar heen stapelen */
    width: 250px; /* Breedte van de 'polaroids' op desktop */
  }

  .stack-item img {
    height: 160px; /* Iets kleinere fotohoogte voor de stapel */
  }

  /* Individuele posities en rotaties (het 'rommelige' stapel-effect) */
  .item-1 {
    top: 20px; /* Afstand vanaf de bovenkant */
    left: 0%; /* Helemaal links */
    transform: rotate(-5deg); /* Draait de foto een beetje naar links */
  }
  .item-2 {
    top: 60px; /* Iets lager dan item 1 */
    left: 20%; /* Iets meer naar rechts */
    transform: rotate(3deg); /* Draait de foto een beetje naar rechts */
  }
  .item-3 {
    top: 30px; /* Weer iets hoger */
    left: 45%; /* Richting het midden */
    transform: rotate(-2deg); /* Bijna recht */
  }
  .item-4 {
    top: 280px; /* Start een nieuwe 'rij' lager */
    left: 5%; /* Weer aan de linkerkant */
    transform: rotate(4deg); /* Draaiing naar rechts */
  }
  .item-5 {
    top: 310px; /* Iets lager dan item 4 */
    left: 30%; /* Meer naar het midden */
    transform: rotate(-4deg); /* Draaiing naar links */
  }

  .stack-item:hover {
    z-index: 100; /* Komt bovenop alle andere foto's bij aanwijzen */
    transform: scale(1.1) rotate(0deg) !important; /* Wordt groter en draait recht */
    transition: 0.3s; /* Maakt de hover-animatie vloeiend */
  }
}
/*TIPS CSS*/
/* --- 1. ALGEMENE PAGINA INSTELLINGEN (Mobile First) --- */
.tips-page {
  display: flex; /* Maakt van de pagina een flex-container */
  flex-direction: column; /* Stapelt alle secties onder elkaar */
  align-items: center; /* Centreert de inhoud horizontaal */
  padding: 0 15px 40px 15px; /* Marges: 0 boven, 15px opzij, 40px onder */
  box-sizing: border-box; /* Zorgt dat padding de breedte niet extra oprekt */
}

.app-section,
.pro-tips-section,
.intro {
  display: flex; /* Maakt flexbox van de secties */
  flex-direction: column; /* Inhoud van de sectie onder elkaar */
  align-items: center; /* Inhoud horizontaal centreren */
  text-align: center; /* Tekst in het midden uitlijnen */
  width: 100%; /* Volle breedte benutten */
  margin-bottom: 40px; /* Afstand tussen de verschillende onderdelen */
  padding: 0 10px; /* Kleine zij-marge voor tekst op mobiel */
  box-sizing: border-box; /* Padding meerekenen in de breedte */
}

/* --- 2. CAMERA WINDOW & FILTERS (Mobile First) --- */
.camera-window {
  width: 100%; /* Op mobiel vult het venster de hele breedte */
  max-width: 600px; /* Maar wordt nooit breder dan 600px op desktop */
  margin: 20px 0; /* Ruimte boven en onder het venster */
  background: #fff; /* Witte achtergrondkleur */
  box-sizing: border-box; /* Maatvoering correct houden */
}

.camera-body {
  padding: 15px; /* Ruimte binnen de rand van de camera */
  background: #f0f4f8; /* Lichtgrijze kleur voor de 'behuizing' */
  position: relative; /* Nodig voor het plaatsen van effecten erin */
}

.viewfinder {
  position: relative; /* Basis voor de filter-lagen die erbovenop komen */
  width: 100%; /* Vult de camera-body */
  margin: 0; /* Geen extra marges */
  background: #000; /* Zwarte achtergrond (voor als foto laadt) */
  border: 3px solid var(--window-header); /* Blauwe rand om de zoeker */
  overflow: hidden; /* Filters blijven binnen de randen */
  line-height: 0; /* Voorkomt kieren onder de afbeelding */
}

.viewfinder img {
  display: block; /* Verijdert witruimte onder de foto */
  width: 100%; /* Foto vult de zoeker */
  height: auto; /* Behoudt de verhoudingen */
  transition: 0.4s; /* Laat filter-veranderingen vloeiend verlopen */
  object-fit: cover; /* Zorgt dat de zoeker altijd gevuld is */
}

/* Filter Knoppen */
.filter-bar {
  display: flex; /* Zet knoppen naast elkaar */
  flex-wrap: wrap; /* Knoppen gaan naar volgende regel als het niet past */
  justify-content: center; /* Knoppen in het midden uitlijnen */
  gap: 8px; /* Ruimte tussen de knoppen */
  margin-top: 15px; /* Afstand tussen zoeker en knoppen */
}

.btn {
  flex: 1; /* Knoppen worden even breed */
  min-width: 70px; /* Voorkomt dat ze te klein worden op mobiel */
  background: #fff; /* Witte knop-achtergrond */
  border: 2px solid var(--window-header); /* Blauwe omlijning */
  padding: 10px 5px; /* Ruimte binnen de knop */
  text-align: center; /* Tekst in het midden */
  cursor: pointer; /* Handje bij aanwijzen */
  font-size: 0.75rem; /* Iets kleinere letters voor mobiel */
  font-weight: bold; /* Dikgedrukte letters */
  transition: 0.3s; /* Vloeiende kleurverandering bij klikken */
}

/* Filter Logica (Checkbox Hack) */
input[type="radio"] {
  display: none; /* Verbergt de eigenlijke radiobuttons */
}

.filter-layer {
  position: absolute; /* Ligt bovenop de afbeelding */
  top: 0; /* Vanaf de bovenrand */
  left: 0; /* Vanaf de linkerrand */
  width: 100%; /* Bedekt hele zoeker */
  height: 100%; /* Bedekt hele zoeker */
  pointer-events: none; /* Je kunt 'door' de laag heen klikken */
  opacity: 0; /* Standaard onzichtbaar */
  transition: 0.4s; /* Vloeiend verschijnen/verdwijnen */
  z-index: 2; /* Ligt bovenop de foto */
}

/* VHS EFFECT */
#vhs:checked ~ .viewfinder .vhs-effect {
  opacity: 1; /* Maakt de VHS-laag zichtbaar */
  background: repeating-linear-gradient(
    /* Maakt horizontale scan-lijnen */ 0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 2px,
    transparent 3px
  );
}
#vhs:checked ~ .viewfinder img {
  filter: contrast(1.2) sepia(0.3); /* Maakt foto geler en harder qua kleur */
}

/* CYBER EFFECT */
#cyber:checked ~ .viewfinder .cyber-effect {
  opacity: 0.4; /* Maakt de blauwe laag zichtbaar */
  background: #001eff; /* Felle neon-blauwe kleur */
  mix-blend-mode: color; /* Mengt alleen de kleur met de foto eronder */
}
#cyber:checked ~ .viewfinder img {
  filter: hue-rotate(160deg) saturate(1.5); /* Verandert alle kleuren naar neon-tinten */
}

/* DREAMY EFFECT */
#dreamy:checked ~ .viewfinder .dreamy-effect {
  opacity: 0.6; /* Zachte witte gloed zichtbaar maken */
  background: #ffffff; /* Witte kleur */
  mix-blend-mode: soft-light; /* Zorgt voor een zacht dromerig contrast */
  backdrop-filter: blur(2px); /* Maakt de foto eronder wazig */
}
#dreamy:checked ~ .viewfinder img {
  filter: brightness(1.1) blur(1px); /* Foto iets lichter en waziger maken */
}

/* Actieve knop kleur geven */
#none:checked ~ .filter-bar label[for="none"],
#vhs:checked ~ .filter-bar label[for="vhs"],
#cyber:checked ~ .filter-bar label[for="cyber"],
#dreamy:checked ~ .filter-bar label[for="dreamy"] {
  background: var(
    --window-header
  ); /* Geselecteerde filter krijgt blauwe achtergrond */
  color: white; /* Witte tekst voor geselecteerde knop */
}

/* --- 3. APPS & TIPS (Mobile First) --- */
.app-grid {
  display: flex; /* Flexbox voor de lijst met apps */
  flex-direction: column; /* Apps onder elkaar op mobiel */
  gap: 20px; /* Ruimte tussen de app-boxen */
  width: 100%; /* Volle breedte */
  padding: 0; /* Geen extra padding */
  list-style: none; /* Geen bolletjes bij de lijst */
}

.app-box {
  width: 100%; /* Breedte van één app-kaart */
  box-sizing: border-box; /* Padding binnen de breedte houden */
  text-align: left; /* Tekst links uitlijnen */
  padding: 20px; /* Ruimte binnen de kaart */
  background: white; /* Witte kaart */
}

.tips-stack {
  width: 100%; /* Container voor tips */
  max-width: 600px; /* Beperkt breedte op grote schermen */
}

.timeline-item {
  background: white; /* Achtergrond van een tip */
  border: 1px solid var(--window-header); /* Blauwe rand */
  margin-bottom: 15px; /* Ruimte tussen de tips */
  padding: 20px; /* Ruimte binnen de tip */
  text-align: left; /* Tekst links uitlijnen */
}

/* --- 4. DESKTOP AANPASSINGEN (Vanaf 801px) --- */
@media (min-width: 801px) {
  .camera-window {
    margin: 20px auto; /* Centreert het cameravenster op desktop */
  }

  .filter-bar {
    display: flex; /* Flexbox voor de knoppen */
    justify-content: space-between; /* Knoppen netjes verdelen over de breedte */
  }

  .app-grid {
    display: grid; /* Verandert de lijst in een raster op desktop */
    grid-template-columns: repeat(3, 1fr); /* 3 kolommen die even breed zijn */
    max-width: 900px; /* Maximale breedte van het raster */
  }
}
/* CONTACT CSS*/
/* --- 1. CONTACT PAGINA BASIS (Mobile First) --- */
.contact-page {
  padding: 30px 15px; /* Ruimte boven/onder (30px) en opzij (15px) */
  display: flex; /* Maakt flexbox van de pagina */
  flex-direction: column; /* Stapelt elementen verticaal */
  align-items: center; /* Centreert het formulier horizontaal */
  min-height: 80vh; /* Zorgt dat de pagina minimaal 80% van het scherm vult */
  box-sizing: border-box; /* Padding telt niet mee voor de totale breedte */
}

/* Het venster: op mobiel bijna schermbreed, op desktop begrensd */
.contact-window {
  width: 100%; /* Neemt de volle breedte van de container in */
  max-width: 500px; /* Wordt op grotere schermen nooit breder dan 500px */
  background: #ffffff; /* Witte achtergrondkleur */
  border: 3px solid var(--window-blue); /* Dikke blauwe omlijning (vensterstijl) */
  box-sizing: border-box; /* Breedteberekening inclusief randen */
}

.contact-form {
  display: flex; /* Maakt flexbox van het formulier */
  flex-direction: column; /* Zet labels en invoervelden onder elkaar */
  padding: 20px; /* Ruimte tussen de rand en de invoervelden */
  background: #f0f4f8; /* Lichtgrijze achtergrond binnen het venster */
}

.contact-form label {
  margin-bottom: 5px; /* Ruimte tussen het label en het invoerveld */
  font-size: 12px; /* Kleine letters voor de labels */
  color: var(--window-blue); /* Gebruikt de blauwe themakleur voor tekst */
  font-weight: bold; /* Maakt labels dikgedrukt */
  text-transform: uppercase; /* Zet labels volledig in hoofdletters */
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%; /* Invoervelden vullen de hele breedte */
  box-sizing: border-box; /* Zorgt dat padding de velden niet te breed maakt */
  background: #ffffff; /* Witte achtergrond in de velden */
  border: 2px solid var(--window-blue); /* Blauwe rand om de velden */
  color: #333; /* Donkergrijze tekstkleur bij het typen */
  padding: 12px; /* Ruimte binnenin de invoervelden */
  margin-bottom: 20px; /* Afstand tot het volgende invoerveld */
  font-family: "Space Mono", monospace; /* Gebruikt het retro lettertype */
  border-radius: 0; /* Maakt de hoeken van de velden kaarsrecht */
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #5c79a8; /* Rand wordt donkerder bij klikken/typen */
  outline: none; /* Verwijdert de standaard blauwe browser-rand */
  background: #eef2f7; /* Geeft het veld een zachte tint bij selectie */
}

/* Verzendknop */
.submit-btn {
  background: var(--window-blue); /* Gebruikt de blauwe themakleur */
  color: white; /* Witte tekst op de knop */
  border: none; /* Geen standaard rand */
  padding: 15px; /* Maakt de knop lekker groot en klikbaar */
  font-weight: bold; /* Dikgedrukte letters */
  font-family: "Space Mono", monospace; /* Consistent lettertype */
  cursor: pointer; /* Verandert muis in een handje */
  transition: all 0.2s ease; /* Zorgt voor een korte, vloeiende animatie */
  box-shadow: 4px 4px 0px #cfd9e8; /* Harde retro schaduw rechtsonder */
}

.submit-btn:hover {
  background: #5c79a8; /* Wordt iets donkerder bij aanwijzen */
  transform: translate(
    -2px,
    -2px
  ); /* Schuift de knop een beetje omhoog/links */
  box-shadow: 6px 6px 0px #cfd9e8; /* Maakt de schaduw groter bij aanwijzen */
}

/* --- 2. SUCCESBALK --- */
.success-top-bar {
  position: fixed; /* Staat vast op het scherm */
  top: -80px; /* Verbergt de balk net boven het scherm */
  left: 0; /* Begint aan de linkerkant */
  width: 100%; /* Volle breedte */
  padding: 15px; /* Ruimte binnen de balk */
  text-align: center; /* Centreert de tekst */
  box-sizing: border-box; /* Padding correct berekenen */
  background-color: #2ecc71; /* Groene kleur (staat voor succes) */
  color: white; /* Witte letters */
  display: flex; /* Gebruikt flexbox voor uitlijning */
  align-items: center; /* Centreert verticaal */
  justify-content: center; /* Centreert horizontaal */
  font-family: "Space Mono", monospace; /* Retro font */
  font-weight: bold; /* Dikke letters */
  z-index: 9999; /* Staat altijd bovenop alle andere elementen */
  border-bottom: 4px solid #27ae60; /* Donkergroene rand onderaan voor diepte */
  transition: top 0.5s ease-in-out; /* Animatie van 0.5 sec als de balk verschijnt */
}

body.form-success .success-top-bar {
  top: 0; /* Schuift de balk in beeld als 'form-success' op body staat */
}

/* --- 3. DESKTOP AANPASSINGEN (Vanaf 801px) --- */
@media (min-width: 801px) {
  .contact-page {
    padding: 50px 5%; /* Meer ademruimte rondom op grote schermen */
  }

  .contact-form {
    padding: 30px; /* Maakt de binnenkant van het formulier ruimer */
  }
}
/* Responsiviteit */
@media (max-width: 640px) {
  .contact-window {
    width: 95%;
  }
}
/*foto responsive*/
/* Zorgt dat de foto's responsief meeschalen */
.main-img {
  max-width: 100%; /* De foto wordt nooit breder dan het venster */
  height: auto; /* Behoudt de verhoudingen van de foto */
  display: block; /* Verwijdert witruimte onder de afbeelding */
  object-fit: cover;
}

/* Zorg dat je window-frame niet te groot wordt op gsm */
.window-frame {
  width: 90%; /* Neemt 90% van het scherm in op kleine schermen */
  max-width: 800px; /* Wordt nooit breder dan 800px op laptop */
  margin: 0 auto;
}