/* Gemaakt door lettertypes.py — niet met de hand aanpassen. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(/img/font/caveat-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(/img/font/caveat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url(/img/font/cinzel-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url(/img/font/cinzel-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(/img/font/cinzel-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(/img/font/cinzel-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/img/font/cormorant-garamond-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/img/font/cormorant-garamond-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/img/font/cormorant-garamond-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/img/font/cormorant-garamond-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/img/font/cormorant-garamond-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/img/font/cormorant-garamond-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/img/font/inter-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/img/font/inter-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/img/font/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/img/font/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/img/font/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/img/font/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/img/font/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/img/font/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(/img/font/patrick-hand-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(/img/font/patrick-hand-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Leopold 1 — opmaak van de publieke site.
   Met de hand geschreven in plaats van Tailwind: het ontwerp van 20 mei haalde Tailwind van
   een CDN, en dat is een extern script van 3 MB dat bij elke bezoeker opnieuw moet laden.
   De kleuren, de letters en de maatverhoudingen zijn letterlijk die van het ontwerp. */

:root {
  --goud: #c9a467;
  --goud-600: #a8842f;
  --goud-700: #876626;
  --goud-800: #7a5c22;   /* klein gouden opschrift op een lichte achtergrond: 5,9:1 */
  --ink-900: #141312;
  --ink-800: #22201d;
  --ink-600: #48433a;
  --ink-500: #5d5749;
  --ink-200: #cfcabf;
  --zand-50: #fbf8f3;
  --zand-100: #f5efe6;
  --zee-800: #0a2030;
  --breed: 1280px;
  --rand: 1.5rem;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--zand-50);
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.sier { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; }
.merk { font-family: Cinzel, "Cormorant Garamond", Georgia, serif; letter-spacing: .15em; }

/* --- vaste onderdelen --- */
.omhulsel { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); }
@media (min-width: 640px) { :root { --rand: 2rem; } }

.vak { padding: 6rem 0; }
@media (min-width: 640px) { .vak { padding: 8rem 0; } }
.vak-donker { background: var(--ink-900); color: var(--zand-50); }
.vak-zee { background: var(--zee-800); color: var(--zand-50); position: relative; overflow: hidden; }

.scheiding {
  display: flex; align-items: center; gap: .75rem; color: var(--goud-800);
  font-family: Cinzel, Georgia, serif; font-size: .75rem; letter-spacing: .35em;
  text-transform: uppercase; margin: 0 0 1.5rem; max-width: 260px;
}
.scheiding::before, .scheiding::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud) 50%, transparent);
}
.midden { text-align: center; }
.midden .scheiding { margin-left: auto; margin-right: auto; }

h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; }
h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.1; }
h3 { font-size: 1.5rem; line-height: 1.25; }

.inleiding { margin: 1.5rem 0 0; font-size: 1.0625rem; line-height: 1.75; }
.vak-donker .inleiding, .vak-zee .inleiding { color: rgba(251, 248, 243, .72); }
.vak:not(.vak-donker):not(.vak-zee) .inleiding { color: var(--ink-600); }

/* --- knoppen --- */
.knop {
  display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.75rem;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem;
  border: 1px solid var(--goud); background: var(--goud); color: var(--ink-900);
  transition: background-color .3s, color .3s; cursor: pointer; font-family: inherit;
}
.knop:hover { background: transparent; color: var(--goud); }
.knop-licht {
  background: transparent; color: var(--zand-50); border-color: rgba(251, 248, 243, .6); font-weight: 500;
}
.knop-licht:hover { background: var(--zand-50); color: var(--ink-900); border-color: var(--zand-50); }
.knop-donker { background: var(--ink-900); color: var(--zand-50); border-color: var(--ink-900); font-weight: 500; }
.knop-donker:hover { background: transparent; color: var(--ink-900); }
.knop-omlijnd {
  background: transparent; color: var(--ink-800); border-color: rgba(34, 32, 29, .4); font-weight: 500;
}
.knop-omlijnd:hover { background: var(--ink-900); color: var(--zand-50); border-color: var(--ink-900); }

/* --- bovenbalk --- */
.balk {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .3s, box-shadow .3s;
}
.balk.vast {
  background: rgba(20, 19, 18, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(201, 164, 103, .18);
}
.balk-rij {
  max-width: var(--breed); margin: 0 auto; padding: 1rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.balk img { height: 2.75rem; width: auto; }

/* Het merk in de balk is nu het GOUDEN logo. Het bestand heette "logo-wit", maar dat is het
   zwarte merk (wit bedoeld voor een witte achtergrond); zwart op een donkere balk was niet te
   lezen, en op de heldfoto van de startpagina stond het er lelijk op.
   Op de STARTPAGINA blijft het weg zolang je bovenaan staat: daar draagt de heldfoto zelf het
   grote gouden logo. Zodra je scrollt en de balk dichtkleurt, schuift het merk er alsnog in.
   Op de andere pagina's staat de balk meteen vast, dus daar staat het er altijd. */
.balklogo { transition: opacity .3s; }
.balk:not(.vast) .balklogo { opacity: 0; pointer-events: none; }
/* Het embleem — de krans met de L — staat op élke pagina behalve de startpagina. Het is hoger
   dan breed, dus het mag groter dan het liggende opschrift: het steekt onder de balk uit en
   maakt die daardoor zelf wat hoger. Zo is het duidelijk aanwezig zonder de navigatie te
   verdringen. */
.balkembleem { display: flex; align-items: center; gap: .85rem; }
.balkembleem img { height: 6.2rem; width: auto; }
/* Het woordmerk LEOPOLD 1 naast het embleem. Het is sierlijk en breed, dus het krimpt mee en
   verdwijnt op een smalle telefoon: daar is de plaats nodig voor de taalknop en het menuknopje. */
/* De maat is NIET vrij gekozen: in het oorspronkelijke logo is de krans 324 px hoog en het
   woordmerk (LEOPOLD 1 met est. 1988) 157 px. Dat is 0,485 keer zo hoog. Bij een krans van
   6,2 rem hoort dus een woordmerk van 3 rem (Luc, 14 oktober 2026: "nu niet in verhouding"). */
.balkembleem .balkwoord img { height: 3rem; }
/* Op een telefoon staat naast het embleem alleen de taalknop en het menuknopje, en daar is het
   krap: tot 560 px tonen we het woordmerk niet. */
@media (max-width: 560px) { .balkembleem .balkwoord { display: none; } }
/* Tussen 1024 en 1200 px staat de volledige menubalk ernaast en is het krap: daar laten we het
   woordmerk weg, anders breekt "Live" over twee regels. Breder dan 1200 px past alles ruim. */
@media (min-width: 1024px) and (max-width: 1199px) { .balkembleem .balkwoord { display: none; } }
.balk:has(.balkembleem) .balk-rij { padding-top: .55rem; padding-bottom: .55rem; }
@media (max-width: 860px) {
  .balkembleem img { height: 4.1rem; }
  .balkembleem .balkwoord img { height: 2rem; }   /* 0,485 x 4,1 rem, dezelfde verhouding */
}
.balk-nav { display: none; gap: 2.25rem; font-size: 13px; text-transform: uppercase; letter-spacing: .18em; }
@media (min-width: 1024px) { .balk-nav { display: flex; align-items: center; } }
.balk a, .balk button { color: var(--zand-50); }
.streep { position: relative; }
.streep::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px;
  background: var(--goud); transition: width .35s;
}
.streep:hover::after { width: 100%; }
/* Jobs mag opvallen in de balk (Luc, 14 oktober 2026): een gouden kader met donkere letters, in
   plaats van het streepje onder de andere links. In het telefoonmenu hetzelfde, wat kleiner. */
.balk .jobsknop, #telefoonmenu .jobsknop {
  background: var(--goud); color: var(--ink-900);
  border: 1px solid var(--goud); border-radius: 2px;
  padding: .5rem .9rem; line-height: 1;
  transition: background-color .3s, color .3s;
}
.balk .jobsknop:hover, #telefoonmenu .jobsknop:hover { background: transparent; color: var(--goud); }
#telefoonmenu .jobsknop { font-size: 1.4rem; padding: .35rem 1.2rem; }
.balk-rechts { display: flex; align-items: center; gap: 1.25rem; }
.stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-right: .5rem; }
@media (prefers-reduced-motion: no-preference) {
  .stip { animation: pols 2s infinite; }
  @keyframes pols { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

/* taalmenu */
.taal { position: relative; }
.taal > button {
  background: none; border: 0; font: inherit; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .2em; cursor: pointer; display: flex; align-items: center; gap: .4rem;
}
.taal > button:hover { color: var(--goud); }
.taal ul {
  position: absolute; right: 0; top: 100%; margin: .75rem 0 0; padding: .5rem 0; min-width: 150px;
  list-style: none; background: rgba(20, 19, 18, .97); border: 1px solid rgba(201, 164, 103, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.taal[hidden] ul, .taal ul[hidden] { display: none; }
.taal li a { display: block; padding: .5rem 1.25rem; font-size: .8rem; letter-spacing: .06em; }
.taal li a:hover, .taal li a[aria-current] { background: rgba(201, 164, 103, .15); color: var(--goud); }

/* menuknop op een telefoon */
.hamburger { display: block; background: none; border: 0; padding: .5rem; cursor: pointer; }
@media (min-width: 1024px) { .hamburger { display: none; } }
/* GEEN backdrop-filter hier. De achtergrond is al 98 % ondoorzichtig, dus de waas voegde niets
   toe — maar op een iPhone laat zo'n waas na het sluiten soms een vlek achter op het scherm: de
   pagina ziet er dan vaag en dood uit (gemeld door Luc, 14 oktober 2026). */
#telefoonmenu {
  position: fixed; inset: 0; z-index: 60; background: #141312;
  display: flex; flex-direction: column;
  /* Een eigen tekenlaag. Zonder dit tekende iOS de zwarte achtergrond soms maar half: je zag de
     foto van de pagina dwars door het menu en de letters waren nauwelijks te lezen (Luc, 14 okt). */
  transform: translateZ(0);
  /* Past het menu niet op het scherm (grote letters, kleine telefoon), dan schuift het menu zelf,
     niet de pagina erachter. */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#telefoonmenu[hidden] { display: none; }
#telefoonmenu nav {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.875rem;
  color: var(--zand-50);
}
#telefoonmenu .sluit { align-self: flex-end; padding: 1.5rem var(--rand); background: none; border: 0; color: var(--zand-50); cursor: pointer; }

/* --- held --- */
.held { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }
.held > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held-waas {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.65) 100%),
    linear-gradient(180deg, rgba(10,32,48,.45) 0%, rgba(10,32,48,.25) 40%, rgba(10,32,48,.85) 100%);
}
.held-inhoud {
  position: relative; height: 100%; max-width: var(--breed); margin: 0 auto;
  padding: 0 var(--rand) 5rem; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--zand-50);
}
.held-inhoud h1 { color: var(--zand-50); max-width: 56rem; }
/* Het gouden logo staat boven "sinds 22 september 1988": groot genoeg om het merk te dragen,
   en het schaalt mee zodat het op een telefoon niet de halve foto inneemt. */
.heldlogo { width: clamp(9rem, 20vw, 15rem); height: auto; display: block; margin: 0 0 1.5rem; }
.held-boven { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; color: var(--goud); }
.held-boven span { font-family: Cinzel, Georgia, serif; font-size: .875rem; letter-spacing: .28em; white-space: nowrap; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.held-boven .lijn { flex: 0 0 4rem; height: 1px; background: var(--goud); }
/* Een stille deur naar het beheer (Luc, 14 oktober 2026): het gouden streepje boven de
   titel is aanklikbaar en brengt je naar /beheer/. Het mag er NIET uitzien als een knop —
   alleen wie het weet, gebruikt het. Het vlakje eromheen is onzichtbaar en maakt het
   streepje op een telefoon groot genoeg om te raken. */
.held-boven a.lijn { position: relative; display: block; text-decoration: none; }
.held-boven a.lijn::after { content: ''; position: absolute; inset: -14px -8px; }
/* Op een telefoon past "Desde el 22 de septiembre de 1988" niet op één regel: met het streepje
   ervoor en de wijde letterafstand liep die zin tot 90 px buiten het scherm, en viel het
   jaartal weg. Nederlands en Italiaans pasten net wel, Frans, Duits en Spaans niet. Smaller
   streepje, kleinere letter, minder afstand, en mag afbreken. (Gemeten 13 oktober 2026.) */
@media (max-width: 560px) {
  .held-boven { align-items: flex-start; gap: .5rem; }
  .held-boven .lijn { flex: 0 0 2rem; margin-top: .55rem; }
  .held-boven span { white-space: normal; letter-spacing: .16em; font-size: .8rem; }
}
.held-inhoud p.leidt { margin: 1.75rem 0 0; max-width: 42rem; font-size: 1.125rem; font-weight: 300; line-height: 1.7; color: rgba(251,248,243,.85); }
.held-knoppen { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- verhaal --- */
.tweeluik { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .tweeluik { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.verhaal-beeld { position: relative; }
.verhaal-beeld img { width: 100%; height: 560px; object-fit: cover; }
.insigne {
  position: absolute; right: -1.5rem; bottom: -1.5rem; display: none;
  background: var(--goud); color: var(--ink-900); padding: 1.5rem; max-width: 265px;
}
@media (min-width: 640px) { .insigne { display: block; } }
/* "EST. 1988" is het jaartal waar de zaak op staat; dat mag gezien worden (Luc, 14 oktober 2026).
   Daarom in de titelletter en veel groter dan de rest van het kaartje. */
.insigne .merk {
  font-family: Cinzel, Georgia, serif; font-size: 1.45rem; font-weight: 600;
  letter-spacing: .12em; line-height: 1.1; margin: 0 0 .35rem;
}
.insigne .getal { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.25rem; line-height: 1; margin: .5rem 0 0; }
.insigne .onder { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; margin: .25rem 0 0; }
.cijfers { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(201,164,103,.3); display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1.5rem; }
.cijfers .getal { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.25rem; color: var(--goud-700); margin: 0; line-height: 1; }
.cijfers .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-500); margin: .35rem 0 0; }

/* De speler van de camera's is overal bedienbaar: op de startpagina én op de webcampagina. Er ligt
   GEEN doorzichtig vlak over het beeld, en er staat ook geen knop meer onder: wie op het beeld
   drukt, kijkt meteen live (Luc, 14 oktober 2026). De webcampagina blijft bereikbaar via "Live"
   in het menu en in de voettekst. */

/* --- keuken-kaarten --- */
.kaarten { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kaarten { grid-template-columns: repeat(4, 1fr); } }
.kaart-beeld { position: relative; overflow: hidden; height: 16rem; }
.kaart-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; }
.kaart:hover .kaart-beeld img { transform: scale(1.08); }
.kaart-beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink-900), transparent); }
.kaart .kicker { font-family: Cinzel, Georgia, serif; font-size: 11px; letter-spacing: .3em; color: var(--goud); margin: 1.5rem 0 0; }
.kaart h3 { margin-top: .5rem; }
.kaart p.tekst { margin: .75rem 0 0; font-size: .875rem; line-height: 1.7; color: rgba(251,248,243,.7); }

/* --- galerij --- */
.galerij { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .galerij { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.galerij figure { margin: 0; overflow: hidden; aspect-ratio: 1; }
.galerij figure:first-child { grid-column: span 2; grid-row: span 2; }
.galerij img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 1.2s; }
.galerij figure:hover img { transform: scale(1.08); }

/* --- webcams --- */
.vak-zee > .achtergrond { position: absolute; inset: 0; opacity: .3; pointer-events: none; }
.vak-zee > .achtergrond img { width: 100%; height: 100%; object-fit: cover; }
.vak-zee .omhulsel { position: relative; }
.cams { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .cams { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.cam { aspect-ratio: 16 / 9; background: var(--zee-800); border: 1px solid rgba(201,164,103,.25); }
.cam iframe { width: 100%; height: 100%; border: 0; display: block; }
.cam-naam { margin: .75rem 0 0; font-size: .875rem; text-transform: uppercase; letter-spacing: .25em; color: var(--goud-800); }
.tegels { margin-top: 3.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .tegels { grid-template-columns: repeat(2, 1fr); } }
.tegel {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem; border: 1px solid rgba(201,164,103,.3); transition: background-color .3s;
}
.tegel:hover { background: rgba(20,19,18,.3); }
.tegel .boven { font-size: .75rem; text-transform: uppercase; letter-spacing: .25em; color: var(--goud-800); margin: 0; }
.tegel .onder { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; margin: .25rem 0 0; }
.tegel svg { flex: 0 0 auto; color: var(--goud); }

/* --- partners --- */
.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .partners { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .partners { grid-template-columns: repeat(4, 1fr); } }
.partner {
  background: #fff; border: 1px solid rgba(207,202,191,.6); padding: 1.1rem;
  display: flex; align-items: center; justify-content: center; min-height: 164px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.partner:hover { border-color: rgba(201,164,103,.6); box-shadow: 0 18px 40px -20px rgba(20,19,18,.35); transform: translateY(-4px); }
/* De logo's mogen het vakje echt vullen (Luc, 14 oktober 2026). max-width houdt een breed
   logo zoals Modulo binnen het kader; max-height doet dat voor een vierkant logo. */
.partner img { max-height: 7rem; max-width: 100%; width: auto; object-fit: contain; }
.partner .naam { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.75rem; color: var(--ink-800); }
.partner:hover .naam { color: var(--goud-600); }

/* --- contact --- */
.gegevens { margin-top: 2.5rem; display: grid; gap: 2rem; }
.gegeven { display: flex; gap: 1.25rem; }
.gegeven .ikoon {
  flex: 0 0 3rem; width: 3rem; height: 3rem; border: 1px solid rgba(201,164,103,.4);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
/* Het vakje van het adres en dat van de mail zijn zelf een link: je kan dus op het tekeningetje
   drukken, niet alleen op de tekst eronder. Daarom moeten ze er ook aanklikbaar uitzien. */
a.ikoon { cursor: pointer; }
a.ikoon:hover, a.ikoon:focus-visible {
  background: rgba(201,164,103,.12); border-color: var(--goud);
}
a.ikoon:focus-visible { outline: 2px solid var(--goud); outline-offset: 2px; }
.gegeven .kop { font-family: Cinzel, Georgia, serif; font-size: 11px; letter-spacing: .3em; color: var(--goud-800); margin: 0; }
.gegeven p.waarde { margin: .35rem 0 0; line-height: 1.7; }
.gegeven .klein { color: var(--ink-500); font-size: .875rem; }
.gegeven a:hover { color: var(--goud-600); }
.kaartbeeld { aspect-ratio: 4 / 5; width: 100%; }
.kaartbeeld iframe { width: 100%; height: 100%; border: 0; filter: grayscale(20%) contrast(1.05); }

/* --- voettekst --- */
.voet { background: var(--ink-900); color: rgba(251,248,243,.8); padding: 4rem 0 2.5rem; border-top: 1px solid rgba(201,164,103,.2); }
.voet-raster { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .voet-raster { grid-template-columns: 2fr 1fr 1fr; } }
.voet img { height: 8.5rem; width: auto; }
@media (max-width: 767px) { .voet img { height: 7rem; } }
/* Het logo en de handtekening van Rayo Desiere naast elkaar (Luc, 14 oktober 2026). Past het niet
   naast elkaar — op een telefoon — dan zakt de handtekening onder het logo. */
.voetmerk { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.voetmerk .voethand img { height: 3.1rem; }
@media (max-width: 767px) { .voetmerk { gap: .75rem; } .voetmerk .voethand img { height: 3rem; } }
.voet .leus { margin: 1.25rem 0 0; max-width: 28rem; font-size: .875rem; line-height: 1.7; color: rgba(251,248,243,.6); }
.sociaal { margin-top: 1.5rem; display: flex; gap: .75rem; }
.sociaal a {
  width: 2.5rem; height: 2.5rem; border: 1px solid rgba(201,164,103,.3);
  display: flex; align-items: center; justify-content: center; transition: background-color .3s, color .3s;
}
.sociaal a:hover { background: var(--goud); color: var(--ink-900); }
.voet .kolomkop { font-family: Cinzel, Georgia, serif; font-size: 11px; letter-spacing: .3em; color: var(--goud); margin: 0 0 1rem; }
.voet ul { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.voet li { margin-bottom: .5rem; }
.voet li a:hover { color: var(--goud); }
.voet-onder {
  max-width: var(--breed); margin: 3rem auto 0; padding: 1.5rem var(--rand) 0;
  border-top: 1px solid rgba(201,164,103,.15);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .75rem; color: rgba(251,248,243,.4);
}
.voet-onder p { margin: 0; }
/* De hele voetregel staat sinds 2 oktober 2026 op één rij links: copyright, de zin over het
   kustleven en wie de site maakte, met daarachter een knopje om hem te mailen. */
.voet-onder { justify-content: flex-start; }
.voetknop {
  display: inline-block; margin-left: .5rem; padding: .15rem .6rem;
  border: 1px solid rgba(201,164,103,.35); border-radius: 999px;
  color: rgba(251,248,243,.55); white-space: nowrap;
  transition: color .25s, border-color .25s;
}
.voetknop:hover { color: var(--goud); border-color: var(--goud); }

/* --- melding over een sluitingsperiode --- */
.melding {
  background: var(--goud); color: var(--ink-900); text-align: center;
  padding: .85rem var(--rand); font-size: .9rem; font-weight: 500;
}
.melding strong { font-weight: 700; }

/* --- lichtbak --- */
#lichtbak { position: fixed; inset: 0; z-index: 80; background: rgba(10,12,15,.93); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
#lichtbak[hidden] { display: none; }
#lichtbak img { max-height: 90vh; max-width: 92vw; object-fit: contain; }
#lichtbak button { position: absolute; background: none; border: 0; color: var(--zand-50); cursor: pointer; padding: .75rem; line-height: 0; }
#lichtbak button:hover { color: var(--goud); }
#lichtbak button[hidden] { display: none; }
#lichtbak .sluit { top: 1rem; right: 1rem; }
/* De pijlen krijgen een ruim aanraakvlak (56 px) en een donkere schijf, zodat ze ook op een
   lichte foto zichtbaar blijven. */
#lichtbak .vorige, #lichtbak .volgende {
  top: 50%; transform: translateY(-50%); width: 3.5rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(10,12,15,.45);
}
#lichtbak .vorige { left: .75rem; }
#lichtbak .volgende { right: .75rem; }
#lichtbak .teller {
  position: absolute; bottom: 1.25rem; left: 0; right: 0; text-align: center;
  margin: 0; font-size: .8rem; letter-spacing: .2em; color: rgba(251,248,243,.75);
}
@media (min-width: 768px) { #lichtbak .vorige { left: 2rem; } #lichtbak .volgende { right: 2rem; } }

/* --- openvouwen bij het scrollen --- */
@media (prefers-reduced-motion: no-preference) {
  .toon { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform .9s; }
  .toon.zichtbaar { opacity: 1; transform: none; }
  .toon-1 { transition-delay: .15s; } .toon-2 { transition-delay: .3s; } .toon-3 { transition-delay: .45s; }
}

/* =================== MENUKAART =================== */
.kaartkop { padding: 9rem 0 3rem; text-align: center; }
.kaartkop h1 { color: var(--ink-900); }
.kaartkop .seizoen { font-family: Cinzel, Georgia, serif; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--goud-800); margin: 1rem 0 0; }
.tabs { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: 2.5rem 0 0; }
.tabs label {
  padding: .7rem 1.6rem; border: 1px solid rgba(201,164,103,.5); cursor: pointer;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 600;
  transition: background-color .25s, color .25s;
}
.tabs label:hover { background: rgba(201,164,103,.15); }
.tabkiezer { position: absolute; opacity: 0; pointer-events: none; }
.tabkiezer:focus-visible + .tabs label[for] { outline: 2px solid var(--goud); outline-offset: 2px; }
#tab-eten:checked ~ .tabs label[for="tab-eten"],
#tab-drank:checked ~ .tabs label[for="tab-drank"],
#tab-wijn:checked ~ .tabs label[for="tab-wijn"] { background: var(--goud); color: var(--ink-900); border-color: var(--goud); }
.tabinhoud { display: none; }
#tab-eten:checked ~ .tabinhoud[data-soort="eten"],
#tab-drank:checked ~ .tabinhoud[data-soort="drank"],
#tab-wijn:checked ~ .tabinhoud[data-soort="wijn"] { display: block; }

.kaartkolommen { columns: 1; column-gap: 4rem; padding: 3rem 0 0; }
@media (min-width: 900px) { .kaartkolommen { columns: 2; } }
.rubriek { break-inside: avoid-column; margin: 0 0 2.75rem; }
.rubriek > h2 {
  font-size: 1.6rem; color: var(--ink-900); padding-bottom: .5rem;
  border-bottom: 1px solid rgba(201,164,103,.45); margin-bottom: 1rem;
}
.rubriek .opmerking { font-size: .85rem; color: var(--ink-500); font-style: italic; margin: -.5rem 0 1rem; }
.tussenkop { font-family: Cinzel, Georgia, serif; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--goud-800); margin: 1.25rem 0 .5rem; }
.gerecht { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .55rem; }
.gerecht .nummer { flex: 0 0 auto; color: var(--goud-600); font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 1.6rem; }
.gerecht .naam { flex: 0 1 auto; }
.gerecht .naam b { font-weight: 600; }
.gerecht .naam .uitleg { color: var(--ink-500); font-size: .9rem; }
.gerecht .punten { flex: 1 1 auto; border-bottom: 1px dotted rgba(93,87,73,.45); min-width: 1.5rem; transform: translateY(-.25rem); }
.gerecht .prijs { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.varianten { margin: .1rem 0 .7rem; padding: 0 0 0 1rem; list-style: none; }
.varianten li { display: flex; align-items: baseline; gap: .5rem; font-size: .92rem; color: var(--ink-600); margin-bottom: .2rem; }
.varianten .punten { flex: 1 1 auto; border-bottom: 1px dotted rgba(93,87,73,.35); transform: translateY(-.25rem); }
.ster { color: var(--goud-600); }
.kaartvoet { padding: 2rem 0 0; border-top: 1px solid rgba(201,164,103,.3); margin-top: 1rem; font-size: .85rem; color: var(--ink-500); }
.kaartvoet p { margin: 0 0 .5rem; }

@media print {
  .balk, #telefoonmenu, .voet, .tabs, .kaartknoppen, #lichtbak { display: none !important; }
  .tabinhoud { display: block !important; }
  .kaartkop { padding-top: 0; }
  body { background: #fff; }
  .kaartkolommen { columns: 2; font-size: 9.5pt; }
  .rubriek { margin-bottom: 1.5rem; }
}

/* =================== WEBCAMPAGINA =================== */
.camkop { padding: clamp(4.5rem, 9vh, 5.5rem) 0 .75rem; text-align: center; }

/* "Live vanuit De Panne" is nu de titel van het camerablok: groter en duidelijker dan het
   kleine opschrift dat er stond, met het rode bolletje ervoor. */
.camtitel {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  font-family: Cinzel, Georgia, serif; font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1.25rem;
}
.vak-zee .camtitel { color: var(--zand-50); }
/* Het camerablok op de startpagina moet in één scherm passen: de bezoeker die naar de beelden
   kijkt, ziet dan ook alle partners zonder te scrollen. */
#webcam.vak { padding: 3.5rem 0 3rem; }
.vak-cams { padding: 0 0 2.5rem; }
.vak-cams .cam { max-height: 28vh; }
.vak-zee .cam { max-height: 25vh; }

/* Op de webcampagina horen de camera's en de partners samen op één scherm: dat is de plaats waar
   de bezoekers komen, en de partners betalen voor die zichtbaarheid. Daarom staan de logo's hier
   kleiner en met meer naast elkaar dan op de startpagina. */
.campartnerkop { max-width: 34rem; margin: clamp(.8rem, 2vh, 1.5rem) auto clamp(.5rem, 1.4vh, .9rem); }
.partners.campartners { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
/* De logo's mogen groter (Luc, 14 oktober 2026): de partners betalen voor die zichtbaarheid.
   Het blijft een clamp, zodat het blok op een laag scherm nog altijd in één beeld past. */
.partners.campartners .partner { min-height: clamp(66px, 14vh, 124px); padding: .35rem .6rem; }
.partners.campartners .partner img { max-height: clamp(2.6rem, 11vh, 5.6rem); max-width: 100%; }
.partners.campartners .partner .naam { font-size: 1.2rem; }
@media (min-width: 640px) { .partners.campartners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .partners.campartners { grid-template-columns: repeat(4, 1fr); } }

/* =================== RESERVEREN =================== */
.reserveer { max-width: 760px; margin: 0 auto; }
.reserveer h1 { color: var(--ink-900); }
.reserveer .blok { margin-top: 2.5rem; padding: 2rem; border: 1px solid rgba(201,164,103,.35); background: #fff; }
.reserveer .blok h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.reserveer ul { padding-left: 1.2rem; color: var(--ink-600); }
.reserveer li { margin-bottom: .4rem; }

/* Klein gouden opschrift: donker op een lichte achtergrond (leesbaarheid), licht op een donkere.
   Zonder deze uitzondering zou het goud in de voettekst, de menusectie, het webcamblok en over de
   heldfoto bijna onzichtbaar worden. */
.vak-donker .scheiding, .vak-zee .scheiding, .held .scheiding,
.vak-donker .tegel .boven, .vak-zee .tegel .boven, .vak-zee .cam-naam,
.voet .scheiding { color: var(--goud); }

/* =================== WEER =================== */
/* De voorspelling komt uit een kader van de weerdienst zelf. Dat kader kan zijn eigen hoogte
   niet doorgeven zonder hun script, dus zetten we ze hier vast — ruim genoeg voor alle regels.
   Op een telefoon is de tabel breder dan het scherm; daarom mag het kader zijwaarts schuiven. */
.meteokop { padding: clamp(7rem, 14vh, 9rem) 0 1.5rem; text-align: center; }
.meteokop .inleiding { max-width: 44rem; margin-inline: auto; }
.vak-meteo { padding-bottom: 5rem; }
.meteo {
  border: 1px solid rgba(207,202,191,.6); background: #fff;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.meteo iframe {
  display: block; border: 0; width: 100%; min-width: 760px;
}
.meteo iframe + iframe { border-top: 1px solid rgba(207,202,191,.6); }

/* =================== JURIDISCHE PAGINA'S =================== */
/* Privacyverklaring en gebruiksvoorwaarden: lange leesteksten, dus een smalle kolom. */
.juridisch { max-width: 46rem; padding: clamp(7rem, 14vh, 9rem) var(--rand) 5rem; }
.juridisch h1 { margin-bottom: 1rem; }
.juridisch h2 { font-size: 1.25rem; margin: 2.25rem 0 .5rem; }
.juridisch p, .juridisch li { line-height: 1.7; }
.juridisch ul { margin: .5rem 0 0 1.1rem; }
.juridisch li { margin-bottom: .6rem; }
.juridisch .klein { margin-top: 2.5rem; color: var(--muted); }