:root {
  --gf-canvas: #F3F0EA;
  --gf-paper: #FFFFFF;
  --gf-navy: #2F4157;
  --gf-steel: #577C8E;
  --gf-steel-dark: #46677C;
  --gf-soft: #EAF0F4;
  --gf-line: #D9D5CE;
  --gf-muted: rgba(27, 42, 59, 0.68);
  --gf-danger: #B42318;
  --gf-shadow: 0 14px 40px rgba(38, 53, 74, 0.09);
}

* { box-sizing: border-box; }

body[data-page="gastfeedback"] {
  margin: 0;
  min-height: 100vh;
  padding: 0 !important;
  background: var(--gf-canvas);
  color: var(--ink, #1B2A3B);
  font-family: var(--ff-body, "Lora", serif);
}

body[data-page="gastfeedback"]::after { display: none; }

button, select, textarea, input { font: inherit; }
button, select, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.gf-head {
  min-height: 72px;
  padding-top: env(safe-area-inset-top, 0);
  background: var(--gf-navy);
  color: #fff;
}

.gf-head-inner {
  width: min(100% - 40px, 960px);
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.gf-logo { display: block; width: 126px; height: auto; }
.gf-head-label {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* DE TAALKIEZER — het uiterlijk komt uit /assets/iselmar-v2.css (.iv-lang,
   .iv-lang-btn, .iv-lang-pop, r1350-1441), die deze pagina toch al laadt. Hier
   staat alleen wat de kopbalk van de vragenlijst er nog aan toevoegt: rechts
   uitlijnen (de balk is verder gecentreerd), wit op het navy, en een popover
   die boven de kopbalk blijft. Zo is er één taalknop op de hele site in plaats
   van twee die uit elkaar groeien. */
.gf-taal { margin-left: auto; flex: 0 0 auto; color: #fff; }
/* 44px hoog, net als de taalknop in de mobiele sitenavigatie (.iv-mhead
   .iv-lang-btn). De basisknop is 36 hoog; gemeten op 320-1440px paste die
   overal, maar een duim mikt niet op 36 pixels. */
.gf-taal .iv-lang-btn { color: #fff; min-height: 44px; }
.gf-taal .iv-lang-pop { z-index: 80; }
/* De popover erft de serif van de pagina; de sitebrede knop staat in Inter. */
.gf-taal .iv-lang-pop button { font-family: var(--ff-display, "Inter", sans-serif); }

.gf-private {
  min-height: 36px;
  margin-left: auto;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
}

.gf-demo {
  background: #fff;
  border-bottom: 1px solid var(--gf-line);
}

.gf-demo-inner {
  width: min(100% - 40px, 960px);
  min-height: 88px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.gf-demo-inner > div { display: grid; gap: 4px; }
.gf-demo-eye, .gf-eye {
  margin: 0;
  color: var(--gf-steel-dark);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.gf-demo-inner strong {
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 15px;
}

.gf-demo-select { display: grid; gap: 5px; min-width: 230px; }
.gf-demo-select span, .gf-field > span {
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 13px;
  font-weight: 600;
}

.gf-demo-select select {
  width: 100%;
  min-height: 44px;
  padding: 0 40px 0 13px;
  border: 1px solid #CFCAC1;
  border-radius: 9px;
  background: #fff;
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 15px;
  font-weight: 600;
}

.gf-main { width: min(100% - 40px, 760px); margin: 36px auto 0; }
.gf-shell {
  /* clip knipt net als hidden op de radius, maar maakt géén scroll-container:
     alleen zo kan de sticky actiebalk hieronder daadwerkelijk blijven staan. */
  overflow: hidden;
  overflow: clip;
  border: 1px solid rgba(47, 65, 87, 0.13);
  border-radius: 18px;
  background: var(--gf-paper);
  box-shadow: var(--gf-shadow);
}

.gf-progress-wrap { padding: 22px 32px 18px; border-bottom: 1px solid #E5E1DA; }
.gf-progress-meta {
  margin-bottom: 9px;
  display: flex;
  justify-content: space-between;
  color: var(--gf-muted);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
}

.gf-progress { height: 5px; overflow: hidden; border-radius: 0; background: #E3E8EA; }
.gf-progress span { display: block; height: 100%; background: var(--gf-steel); transition: width 220ms ease; }

.gf-step { padding: 40px 44px 36px; }
.gf-step-head { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; margin-bottom: 34px; }
.gf-step-icon, .gf-activity-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--gf-soft);
  color: var(--gf-steel-dark);
  border-radius: 12px;
}

/* DE FOTO VAN DE ACTIVITEIT IN HETZELFDE VIERKANT — Nick, 24 aug 2026.
   Zelfde maat en zelfde radius als het pictogram dat er stond, zodat de rest
   van de kop niet verschuift. `place-items: center` van hierboven zou een foto
   in het midden zetten zonder hem te laten vullen; de foto ligt daarom op
   grid-area 1/1 en dekt het hele vlak met object-fit.

   Het pictogram blijft in de opmaak staan ONDER de foto: laadt het bestand
   niet, dan haalt app.js de <img> weg (onerror) en staat het pictogram er weer.
   Zonder die stapeling zou een verdwenen foto een leeg gekleurd blokje geven. */
.gf-step-icon.heeft-foto, .gf-activity-mark.heeft-foto { overflow: hidden; background: var(--gf-soft); }
.gf-step-icon .gf-beeld, .gf-activity-mark .gf-beeld {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* Het pictogram eronder: alleen zichtbaar zolang er geen foto overheen ligt. */
.gf-step-icon.heeft-foto .gf-icon, .gf-activity-mark.heeft-foto .gf-icon { grid-area: 1 / 1; }

/* OP HET INTROSCHERM IS HET EEN ECHTE FOTO, GEEN POSTZEGEL — 24 aug 2026.
   In de stapkoppen blijft het vierkantje van 52px: daar staat het náást een
   kop en een eyebrow, en een brede foto zou die rij uit elkaar trekken. Op het
   introscherm staat het beeld alléén bovenaan, en daar viel bovendien ruimte
   vrij doordat de koppelmelding eruit ging (zie renderIntro in app.js). Een
   band over de volle breedte vult die ruimte en laat zien wáár de gast was.
   16:9 zodat een liggende foto niet wordt bijgesneden tot een strook gras. */
.gf-intro .gf-activity-mark.heeft-foto {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 190px;
  border-radius: 14px;
  margin-bottom: 26px;
}
.gf-icon { flex: 0 0 auto; }

/* De activiteitfoto boven de eerste stap — de plek van de oude voorpagina.
   3:2 in plaats van 16:9: de bron-foto's zijn 4:3 met de baan in de onderste
   helft, en de vlakkere strook sneed die baan er juist af (Nick, 25 aug).
   De uitsnede zelf stuurt app.js per foto bij via object-position. */
.gf-hero {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 300px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--gf-soft);
}
.gf-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gf-hint-line { display: block; color: var(--gf-muted); font-size: 13.5px; margin: 2px 0 6px; font-weight: 400; }

/* Het tegelscherm (Nick, 25 aug): vier foto-tegels om de activiteit te kiezen
   voor wie zonder link binnenkomt. Zelfde foto's en uitsnedes als de hero. */
.gf-kies .gf-lead { margin-bottom: 20px; }
.gf-tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gf-tegel {
  position: relative;
  border: none;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background: var(--gf-soft);
  display: block;
  width: 100%;
}
.gf-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.gf-tegel:hover img { transform: scale(1.03); }
.gf-tegel:focus-visible { outline: 3px solid var(--gf-navy); outline-offset: 2px; }
.gf-tegel span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(20, 30, 42, 0.72), rgba(20, 30, 42, 0));
  color: #fff;
  font-family: var(--ff-display, "Inter", sans-serif);
  font-weight: 600;
  font-size: 16px;
  text-align: left;
}
@media (min-width: 640px) { .gf-tegels { gap: 14px; } .gf-tegel span { font-size: 18px; } }
.gf-step h1, .gf-intro h1, .gf-complete h1 {
  margin: 6px 0 10px;
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: clamp(27px, 5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.gf-lead {
  max-width: 610px;
  margin: 0;
  color: var(--gf-muted);
  font-size: 16px;
  line-height: 1.65;
}

.gf-intro { min-height: 530px; display: flex; flex-direction: column; align-items: flex-start; }
.gf-intro .gf-activity-mark { margin-bottom: 22px; }
.gf-intro .gf-lead { margin-bottom: 24px; font-size: 17px; }
.gf-known {
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid #DCE5E9;
  background: #FCFDFD;
}
.gf-known strong {
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 13px;
}
.gf-known p { margin: 4px 0 0; color: var(--gf-muted); font-size: 13px; line-height: 1.5; }
.gf-question-list { display: grid; gap: 28px; }
.gf-question, .gf-field { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.gf-question legend {
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
}
.gf-question legend span, .gf-field em { color: var(--gf-muted); font-size: 12px; font-style: normal; font-weight: 500; }

/* Cijferschaal: tien of elf knoppen van 48 px hoog. Het aantal kolommen komt
   uit de vraag zelf (--kolommen), op telefoon in twee rijen (--kolommen-mobiel),
   zodat elke knop met één duim te raken blijft. */
.gf-rating { display: grid; grid-template-columns: repeat(var(--kolommen, 10), minmax(0, 1fr)); gap: 6px; }
.gf-rate-option, .gf-choice {
  min-height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #D6D2CA;
  border-radius: 9px;
  background: #fff;
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.gf-rate-option input, .gf-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gf-rate-option:hover, .gf-choice:hover { border-color: var(--gf-steel); background: #F8FAFB; }
.gf-rate-option.is-selected, .gf-choice.is-selected { border-color: var(--gf-navy); background: var(--gf-navy); color: #fff; }
.gf-rate-number { font-size: 16px; font-weight: 700; }
.gf-rate-scale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--gf-muted);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 11.5px;
  font-weight: 500;
}

/* Invulregels van één vraag ('Hole(s)' + 'Waarom'), onder elkaar. */
.gf-veldgroep { min-width: 0; display: grid; gap: 14px; }
.gf-veldgroep .gf-field textarea { min-height: 64px; }
.gf-choice-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gf-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gf-choice { justify-content: flex-start; min-height: 48px; }
.gf-choice span { font-size: 13px; font-weight: 600; line-height: 1.35; }
.gf-choice::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 1px solid #AFAAA2;
  border-radius: 4px;
  background: #fff;
}
.gf-choice:has(input[type="radio"])::before { border-radius: 50%; }
.gf-choice.is-selected::before { border: 4px solid #fff; background: var(--gf-steel); }

.gf-conditional-field { padding-left: 14px; border-left: 3px solid var(--gf-steel); }
/* Vervolgvelden die onder één antwoord uitklappen: zelfde afstand tussen de
   velden als in de vragenlijst zelf, zodat uitklappen niets laat verspringen. */

.gf-num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; }
.gf-num-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gf-num { min-width: 0; display: grid; gap: 6px; }
.gf-num > span {
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.gf-num input {
  width: 100%;
  max-width: 148px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid #CFCAC1;
  border-radius: 9px;
  background: #fff;
  color: var(--ink, #1B2A3B);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 650;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.gf-num input::-webkit-outer-spin-button,
.gf-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gf-num input:focus { border-color: var(--gf-steel-dark); }
.gf-sub-legend {
  margin: 0;
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}
.gf-hint {
  margin: 0;
  color: var(--gf-muted);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
}
.gf-select {
  width: 100%;
  min-height: 48px;
  padding: 0 38px 0 13px;
  border: 1px solid #CFCAC1;
  border-radius: 9px;
  background: #fff;
  color: var(--gf-navy);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 600;
}
.gf-select:focus { border-color: var(--gf-steel-dark); }

.gf-field textarea {
  width: 100%;
  min-height: 92px;
  /* Groeit mee met de tekst (autoGrow in app.js); hierboven scrollt het veld zelf. */
  max-height: 320px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid #CFCAC1;
  border-radius: 9px;
  background: #fff;
  color: var(--ink, #1B2A3B);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 15px;
  line-height: 1.5;
}
.gf-field input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #CFCAC1;
  border-radius: 9px;
  background: #fff;
  color: var(--ink, #1B2A3B);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 16px;
}
.gf-field textarea::placeholder, .gf-field input[type="text"]::placeholder { color: rgba(27, 42, 59, 0.48); }
.gf-field textarea:focus, .gf-field input[type="text"]:focus, .gf-demo-select select:focus { border-color: var(--gf-steel-dark); }

/* Terug en Volgende blijven in beeld, ook als een stap langer is dan het scherm. */
.gf-footbar { position: sticky; bottom: 0; z-index: 4; background: #FBFAF8; }
.gf-actions {
  min-height: 82px;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #E5E1DA;
  background: #FBFAF8;
}
/* Volgende hoort rechts — ook op stap 1, waar de Terug-knop verborgen is en
   space-between hem anders alleen links zou zetten (Nick, 25 aug). */
.gf-btn-next { margin-left: auto; }
.gf-btn {
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--gf-navy);
  border-radius: 10px;
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.gf-btn-next, .gf-btn-start { background: var(--gf-navy); color: #fff; }
.gf-btn-next:hover, .gf-btn-start:hover { background: #26354A; }
.gf-btn-back { background: transparent; color: var(--gf-navy); }
.gf-btn-back:hover { background: var(--gf-soft); }
.gf-btn-start { margin-top: auto; min-width: 190px; }
.gf-status { min-height: 0; padding: 0 32px; color: var(--gf-danger); font-family: var(--ff-display, "Inter", sans-serif); font-size: 13px; font-weight: 600; }
.gf-status:not(:empty) { min-height: 42px; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid #F1C7C2; background: #FFF8F7; }

.has-error { padding: 12px !important; border: 1px solid #EAB5AF !important; background: #FFF8F7; }
.gf-error { margin: 0; color: var(--gf-danger); font-family: var(--ff-display, "Inter", sans-serif); font-size: 12px; font-weight: 650; }

/* Versturen lukte niet — het vangnet is zichtbaar, niet stil. */
.gf-verzendfout {
  margin: 22px 0 0;
  padding: 18px 20px;
  border: 1px solid #F1C7C2;
  background: #FFF8F7;
  border-radius: 14px;
}
.gf-verzendfout strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gf-danger);
  font-family: var(--ff-display, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 700;
}
.gf-verzendfout p { margin: 0 0 14px; color: var(--gf-muted); font-size: 13.5px; line-height: 1.55; }
.gf-verzendfout .gf-btn { min-height: 44px; }

.gf-complete { min-height: 560px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gf-complete-icon { width: 70px; height: 70px; margin-bottom: 22px; display: grid; place-items: center; border: 1px solid #B8D0C2; background: #EDF7F0; color: #357A4F; border-radius: 50%; }
.gf-complete-icon .gf-icon { width: 34px; height: 34px; }
.gf-complete .gf-lead { max-width: 540px; }
.gf-demo-reminder { margin: 16px 0 0; color: var(--gf-muted); font-size: 12.5px; }

.gf-footer {
  width: min(100% - 40px, 760px);
  margin: 28px auto 0;
  padding: 24px 0 max(28px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gf-muted);
  text-align: center;
}
.gf-footer p { margin: 0; font-size: 12px; }

:focus-visible { outline: 2px solid var(--gf-steel-dark) !important; outline-offset: 2px !important; }

/* DE KOP KRIJGT GEEN ZICHTBARE RING — Nick, 24 aug 2026: "haal dat vierkant weg
   om Jullie bezoek". Dat vierkant was geen rand maar de focusring hierboven.
   Bij elke stap zet `ga()` (app.js r493) de focus op de kop, zodat een
   schermlezer hoort waar je terechtkomt in plaats van bovenaan te blijven
   hangen. Die focus BLIJFT staan — hij wordt alleen niet meer getekend.
   Dat mag hier: de kop is geen bedieningselement en je komt er nooit met Tab,
   dus er verdwijnt geen aanwijzing die iemand nodig heeft om te navigeren. */
#gfTitle:focus,
#gfTitle:focus-visible { outline: none !important; }

@media (max-width: 680px) {
  .gf-head { min-height: 62px; }
  .gf-head-inner { width: calc(100% - 32px); min-height: 62px; gap: 10px; }
  .gf-logo { width: 105px; }
  .gf-head-label { display: none; }
  .gf-private { min-height: 34px; padding: 0 10px; }
  .gf-demo-inner { width: calc(100% - 32px); min-height: 118px; padding: 14px 0; display: grid; gap: 10px; }
  .gf-demo-select { width: 100%; min-width: 0; }
  .gf-main { width: calc(100% - 24px); margin-top: 18px; }
  .gf-shell { border-radius: 15px; }
  .gf-progress-wrap { padding: 18px 20px 15px; }
  .gf-step { padding: 28px 20px 26px; }
  .gf-step-head { grid-template-columns: 44px 1fr; gap: 12px; margin-bottom: 27px; }
  .gf-step-icon, .gf-activity-mark { width: 44px; height: 44px; border-radius: 10px; }
  .gf-step-icon .gf-icon, .gf-activity-mark .gf-icon { width: 21px; height: 21px; }
  .gf-step h1, .gf-intro h1, .gf-complete h1 { font-size: 27px; }
  .gf-lead, .gf-intro .gf-lead { font-size: 15px; line-height: 1.58; }
  .gf-intro { min-height: 570px; }
  .gf-rating { gap: 5px; }
  .gf-rate-option { min-width: 0; padding-left: 4px; padding-right: 4px; }
  .gf-rate-scale { margin-top: -6px; display: flex; justify-content: space-between; color: var(--gf-muted); font-family: var(--ff-display, "Inter", sans-serif); font-size: 11px; font-weight: 500; }
  .gf-rating { grid-template-columns: repeat(var(--kolommen-mobiel, 5), minmax(0, 1fr)); }
  .gf-choice-grid, .gf-choice-grid-3 { grid-template-columns: 1fr; }
  .gf-num-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gf-actions { min-height: 78px; padding: 14px 20px; }
  .gf-btn { min-height: 48px; padding: 0 16px; }
  .gf-footer { width: calc(100% - 32px); flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}