/* 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; }
.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%; }
.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; } }
#telefoonmenu {
  position: fixed; inset: 0; z-index: 60; background: rgba(20, 19, 18, .98);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
}
#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); }
/* 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: 230px;
}
@media (min-width: 640px) { .insigne { display: block; } }
.insigne .merk { font-size: .75rem; letter-spacing: .3em; margin: 0; }
.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; }

/* Het camerabeeld op de startpagina is een link naar de grote weergave. De speler zit in een
   iframe van een andere site en vangt elke klik zelf op, dus leggen we er een doorzichtig vlak
   overheen. Op de webcampagina zelf doen we dat niet: daar moet de speler bedienbaar blijven. */
.camlink { display: block; position: relative; cursor: zoom-in; }
.camlink .camdek { position: absolute; inset: 0; z-index: 2; }

/* --- 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.5rem;
  display: flex; align-items: center; justify-content: center; min-height: 140px;
  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); }
.partner img { max-height: 5rem; 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;
}
.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: 5rem; width: auto; }
.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; }
.partners.campartners .partner { min-height: clamp(56px, 12vh, 104px); padding: .3rem .5rem; }
.partners.campartners .partner img { max-height: clamp(2.2rem, 9vh, 4.4rem); 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); }
.meteoklik { text-align: center; margin-top: 1.25rem; }

/* =================== 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); }