/* De Klub als Teletekst. 40 tekens, 25 regels, acht kleuren. Letter: Bedstead (public domain), naar de SAA5050 teletekstchip.
   Een regel is precies een teken hoog; op een liggend scherm wordt alles breder getrokken, zoals op een oude tv.
   Op een staand scherm (telefoon) bepaalt de breedte de letter en worden regels en letters hoger getrokken. */

@font-face { font-family: "Bedstead"; src: url(../fonts/bedstead.woff2) format("woff2"); font-display: block; }

:root {
  --fs: min(3.8vh, calc((100vw - 32px) / 24));   /* lettergrootte; het script rekent dit precies uit */
  --rh: var(--fs);                                /* hoogte van een regel */
  --sx: 1;                                        /* horizontaal uitrekken (liggend) */
  --sy: 1;                                        /* verticaal uitrekken (staand) */
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: #fff; }
body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; font-family: "Bedstead", ui-monospace, monospace; }
.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: 8px; top: 8px; background: #ff0; color: #000; padding: 4px 8px; z-index: 10; font-family: "Bedstead", monospace; }
.vis-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

.tv { padding: 16px 0; }
.scherm { position: relative; width: calc(24 * var(--fs) * var(--sx)); font-size: var(--fs); line-height: 1; font-kerning: none; font-variant-ligatures: none; }
.rij { display: block; height: var(--rh); width: 24em; white-space: pre; transform: scale(var(--sx), var(--sy)); transform-origin: 0 0; margin: 0; font-size: 1em; font-weight: 400; overflow: visible; }
.rij > * { display: inline-block; height: 1em; vertical-align: top; text-decoration: none; }
h1.rij { font: inherit; }

/* de acht kleuren, voorgrond en achtergrond */
.v-zwart { color: #000; } .v-rood { color: #f00; } .v-groen { color: #0f0; } .v-geel { color: #ff0; }
.v-blauw { color: #00f; } .v-magenta { color: #f0f; } .v-cyaan { color: #0ff; } .v-wit { color: #fff; }
.g-zwart { background: #000; } .g-rood { background: #f00; } .g-groen { background: #0f0; } .g-geel { background: #ff0; }
.g-blauw { background: #00f; } .g-magenta { background: #f0f; } .g-cyaan { background: #0ff; } .g-wit { background: #fff; }

/* dubbele hoogte: de bovenste helft van twee regels */
.rij.dubbel > span { transform: scaleY(2); transform-origin: 0 0; }
.rij.onder-dubbel > span { visibility: hidden; }

/* links: alleen een lijn bij aanwijzen of focus, zoals een cursor */
a { color: inherit; cursor: pointer; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: .12em; outline: none; }
a:focus-visible { background-image: linear-gradient(currentColor, currentColor); background-size: 100% .1em; background-repeat: no-repeat; background-position: 0 100%; }
.terug:hover, .terug:focus-visible { background: #ff0 !important; color: #000; text-decoration: none; }
.taal:hover, .taal:focus-visible { background: #0ff; color: #000; text-decoration: none; } /* EN of NL in de kopregel (11 november 2026): bij focus omgekeerd, net als Gewone site */
.groot-knop:hover, .groot-knop:focus-visible { background: #fff !important; color: #000; text-decoration: none; }
.fastext { width: 10ch; }
.fastext:hover, .fastext:focus-visible { text-decoration: none; filter: brightness(1.2); background: #222; }

/* aanraakscherm: bladeren en de gekleurde knoppen in dubbele hoogte, groot genoeg voor een duim */
/* ook de regel van de menukaart (300, 310, 320, 350): die links moeten met een duim te raken zijn */
html.tt-aanraak .rij.knoppen, html.tt-aanraak .rij.blader, html.tt-aanraak .rij.kaartregel { height: calc(2 * var(--rh)); }
html.tt-aanraak .rij.knoppen > *, html.tt-aanraak .rij.blader > *, html.tt-aanraak .rij.kaartregel > * { transform: scaleY(2); transform-origin: 0 0; }

/* blokjesplaatjes: precies zo groot als hun tekens, scherpe blokjes */
.mozaiek { display: inline-block; width: calc(var(--k) * 1ch); height: calc(var(--r) * var(--fs)); image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: top; position: relative; z-index: 1; }
.rij.leeg > span { visibility: hidden; }
.rij.met-plaatje { position: relative; z-index: 2; }

/* subpagina's: zonder script staan ze onder elkaar, met script een tegelijk */
.sub + .sub { margin-top: var(--rh); }
html.tt-js .sub { display: none; }
html.tt-js .sub.aan { display: block; }
html.tt-js .sub + .sub { margin-top: 0; }

/* De beeldbuis (12 november 2026). Teletekst keek je op een beeldbuis, dus ligt er een laag over het scherm. De buis is
   het scherm plus de rand eromheen: zachte beeldlijnen, een iets opgelicht zwart zoals glas, donkerder naar de hoeken,
   ronde hoeken en een vleug van de rode, groene en blauwe streepjes van het masker. De letters gloeien in hun eigen kleur,
   met een heel licht randje rood en blauw. Bewust niet: een bol beeld (wazige tekst, links op de verkeerde plek) en flikkeren.
   Gekozen door Wubbo uit een proef met drie standen (subtiel, midden, stevig): dit is midden. Op een aanraakscherm zijn de
   lijnen en de hoeken lichter, zodat de menu's goed leesbaar blijven. */
:root {
  --crt-stap: 3px;      /* afstand tussen de beeldlijnen */
  --crt-lijn: .34;      /* hoe donker een beeldlijn is */
  --crt-glas: .04;      /* hoeveel het zwart oplicht */
  --crt-rand: .64;      /* hoe donker de hoeken worden */
  --crt-rand-van: 40%;  /* waar het donker worden begint */
  --crt-hoek: 32px;
  --crt-masker: .035;   /* de rode, groene en blauwe streepjes van het masker */
  --crt-band: .05;      /* de waas achter de storingslijn; de lijn zelf is drie keer zo licht */
}
html.tt-aanraak { --crt-lijn: .27; --crt-rand: .55; --crt-hoek: 24px; --crt-masker: .025; }

.scherm::before {
  content: ""; position: absolute; inset: -16px; z-index: 6; pointer-events: none; border-radius: var(--crt-hoek);
  background:
    radial-gradient(100% 100% at 50% 50%, transparent var(--crt-rand-van), rgba(0, 0, 0, var(--crt-rand)) 82%),
    repeating-linear-gradient(180deg, transparent 0, rgba(0, 0, 0, var(--crt-lijn)) calc(var(--crt-stap) / 2), transparent var(--crt-stap)),
    repeating-linear-gradient(90deg, rgba(255, 0, 0, var(--crt-masker)) 0 1px, rgba(0, 255, 0, var(--crt-masker)) 1px 2px, rgba(0, 0, 255, var(--crt-masker)) 2px 3px),
    linear-gradient(rgba(255, 255, 255, var(--crt-glas)), rgba(255, 255, 255, var(--crt-glas)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
@media (max-width: 599px) { .scherm::before { inset: -16px -8px; } }

/* de gloed van het fosfor, per teken in zijn eigen kleur */
.rij > * { text-shadow: -.02em 0 0 rgba(255, 0, 70, .22), .02em 0 0 rgba(0, 170, 255, .22), 0 0 .12em color-mix(in srgb, currentColor 65%, transparent), 0 0 .58em color-mix(in srgb, currentColor 31%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  /* de storingslijn: af en toe trekt er een dunne lichte lijn met een waas erachter van boven naar beneden over de buis,
     zoals je dat op een oude tv vaak zag, in tweeenhalve seconde. Twee keer in een ronde van 31 seconden, op ongelijke
     momenten (na 6 en na 19 seconden), zodat het niet als een klok voelt. De ronde loopt op de klok (--crt-tijd uit
     js/maat.js), dus hij gaat bij een nieuwe pagina verder waar hij was. Alleen transform en opacity, dus licht voor de
     browser. Niet met Minder beweging. */
  .scherm::after { content: ""; position: absolute; left: -16px; right: -16px; top: -16px; height: 14%; z-index: 7; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, transparent 0, rgba(255, 255, 255, var(--crt-band)) 90%, rgba(255, 255, 255, calc(var(--crt-band) * 3)) 97%, rgba(255, 255, 255, calc(var(--crt-band) * 3)) 99%, transparent 100%);
    animation: crt-storing 31s linear var(--crt-tijd, 0s) infinite; }
  @media (max-width: 599px) { .scherm::after { left: -8px; right: -8px; } }
  @keyframes crt-storing {
    0%, 19% { transform: translateY(0); opacity: 0; }
    20%, 26% { opacity: 1; }
    27% { transform: translateY(640%); opacity: 0; }
    27.1%, 61% { transform: translateY(0); opacity: 0; }
    62%, 68% { opacity: 1; }
    69% { transform: translateY(640%); opacity: 0; }
    69.1%, 100% { transform: translateY(0); opacity: 0; }
  }
}

/* tijdens het zoeken naar een pagina */
.kopregel [data-paginanummer].zoekt { color: #0f0; }

/* Zenchef: een laag over de pagina zolang het reserveerpaneel open is */
.reserveer-laag { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
body:has(iframe[src*="bookings.zenchef.com"][class*="opened"]) .reserveer-laag { opacity: 1; pointer-events: auto; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .reserveer-laag { transition: none; } }
@media print { .scherm::before, .scherm::after { display: none; } }

/* Overgang van de site naar Teletekst (22 oktober 2026): geen harde zap maar subtiel. De site dooft uit in het zwart, daarna
   komt Teletekst op, met een heel klein beetje opwarmen zoals een beeldbuis. Tussen Teletekstpagina's onderling geen
   overgang (het script in de kop slaat hem over). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html.van-site::view-transition { background: #000; }
  html.van-site::view-transition-group(*) { animation: none; }
  html.van-site::view-transition-old(*) { animation: tt-site-uit .26s ease-in both; }
  html.van-site::view-transition-new(*) { animation: tt-aan .5s cubic-bezier(.2, .7, .2, 1) .2s both; }
  @keyframes tt-site-uit { to { opacity: 0; filter: brightness(.5); } }
  @keyframes tt-aan { from { opacity: 0; transform: scaleY(.985); filter: brightness(1.5); } }
}