/* Stap-voor-stap reserveren (2026-10-21), sinds 24-10 als bouwsteen `.tafel`:
   - los op tokodet.com/table (html.tafel-pagina, .tafel.los);
   - ingebed in de homepage, sectie #booking (.tafel.ingebed, proef via ?proef=1).
   Eén vraag per scherm. Bovenin schrijft de reservering zichzelf als zin;
   één koperen lichtbron schuift per stap mee. Goud alleen in het logo.
   Alle regels staan onder .tafel zodat de site-CSS (main.css) er niet doorheen loopt. */

.tafel{
  --zwart:#0a0804;
  --koper:#b54c10;--koper-lt:#e0782e;--koper-hover:#d9611a;
  --cream:#faf2e2;--tekst:#e8d9bc;--stil:#b8a882;
  --display:'Fraunces',Georgia,serif;--body:'DM Sans',sans-serif;
  --lx:50%;--ly:38%;
  --veilig-onder:env(safe-area-inset-bottom,0px);
  --duur:.42s;--curve:cubic-bezier(.65,0,.25,1);
}

/* ---------- de losse pagina ---------- */
html.tafel-pagina{font-size:17px;-webkit-text-size-adjust:100%}
html.tafel-pagina body{margin:0;background:#0a0804;overflow-x:hidden}
.tafel *,.tafel *::before,.tafel *::after{box-sizing:border-box;margin:0;padding:0}
.tafel{position:relative;background:var(--zwart);color:var(--tekst);font-family:var(--body);
  display:flex;flex-direction:column;overflow:hidden;text-align:center}
.tafel.los{min-height:100vh;min-height:100dvh}
.tafel.ingebed{height:100%}

/* ---------- achtergrond: de schildpadwand van de zaal, diep gedimd, en één licht ---------- */
.tafel .bg{position:absolute;inset:-6%;z-index:0;pointer-events:none;
  background:url('../images/hero-wand.jpg') center/cover no-repeat;
  filter:blur(16px) brightness(.22) saturate(1.15);transform:scale(1.04)}
.tafel .bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,8,4,.55),rgba(10,8,4,.35) 40%,rgba(10,8,4,.9))}
.tafel .licht{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at var(--lx) var(--ly),rgba(224,120,46,.42) 0%,rgba(181,76,16,.18) 35%,rgba(10,8,4,0) 70%);
  transition:background-position var(--duur) var(--curve),opacity 1.4s ease,transform 1.4s var(--curve);
  opacity:1;transform:scale(1)}
.tafel.laden .licht{opacity:0;transform:scale(.6)}

.tafel .voortgang{position:absolute;top:0;left:0;right:0;height:3px;z-index:5;background:rgba(250,242,226,.08)}
.tafel .voortgang i{display:block;height:100%;width:0;background:var(--koper-lt);
  box-shadow:0 0 12px rgba(224,120,46,.8);transition:width var(--duur) var(--curve)}

.tafel .talen{position:absolute;top:.9rem;right:1rem;z-index:6;display:flex;gap:.15rem}
.tafel .talen a{font-size:.72rem;letter-spacing:.06em;color:var(--stil);text-decoration:none;padding:.35rem .4rem;
  border-radius:3px;transition:color .2s}
.tafel .talen a[aria-current]{color:var(--cream)}
.tafel .talen a:hover{color:var(--koper-lt)}

/* ---------- kop: logo + de groeiende zin ---------- */
.tafel .kop{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  padding:3.2rem 1.4rem 0;text-align:center;transition:padding .55s var(--curve)}
.tafel.klein .kop{padding-top:2.6rem}
.tafel.ingebed .kop{padding-top:1.2rem}
.tafel .logo{width:clamp(190px,52vw,300px);height:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.8));
  transition:width .55s var(--curve),opacity .9s ease,transform .9s var(--curve)}
.tafel.laden .logo{opacity:0;transform:translateY(16px)}
.tafel.klein .logo{width:96px}
.tafel .zin{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.1rem;line-height:1.4;
  color:var(--cream);max-width:34rem;min-height:1.6rem;margin-top:.6rem;
  opacity:0;transition:opacity .4s ease}
.tafel.ingebed .zin{margin-top:0}
/* ingebed: kreet + hoofdkop zoals elke sectie van de site, feniks als ornament erboven */
.tafel .feniks-kop{width:44px;height:auto;margin-bottom:.8rem;filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));
  transition:width .45s var(--curve),margin .45s var(--curve)}
/* exact als .section-label/.section-h2 in main.css (zelfde vet, zelfde oranje) */
.tafel .kop-label{font-family:var(--body);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:#d9611a;font-weight:500;margin:0 0 .7rem;line-height:1.4}
.tafel .kop-h2{font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1.2;color:var(--cream);
  margin:0 0 .4rem;letter-spacing:0;text-transform:none;max-height:3rem;overflow:hidden;
  transition:max-height .45s var(--curve),opacity .35s ease,margin .45s var(--curve)}
.tafel.klein .kop-h2{max-height:0;opacity:0;margin:0}
.tafel.klein .feniks-kop{width:34px;margin-bottom:.5rem}
.tafel.toets .feniks-kop,.tafel.toets .kop-label,.tafel.toets .kop-h2{display:none}
.tafel.klein .zin{opacity:1}
.tafel .zin button{font:inherit;color:inherit;background:none;border:0;padding:0 .05em;cursor:pointer;
  border-bottom:1px solid rgba(224,120,46,.45);transition:color .2s,border-color .2s}
.tafel .zin button:hover,.tafel .zin button:focus-visible{color:var(--koper-lt);border-color:var(--koper-lt);outline:none}

/* ---------- podium: één stap tegelijk, zijwaarts wisselen ---------- */
.tafel .podium{position:relative;z-index:2;flex:1;width:100%;max-width:560px;margin:0 auto;
  padding:0 1.4rem;overflow:hidden;min-height:300px}
.tafel [hidden]{display:none!important}
.tafel .stap{position:absolute;inset:0;padding:1rem .4rem .6rem;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  visibility:hidden;opacity:0;transform:translateX(60px);
  transition:opacity var(--duur) ease,transform var(--duur) var(--curve),visibility 0s linear var(--duur)}
/* gecentreerd zolang het past, en gewoon scrollbaar als het niet past (lange tijdlijst) */
.tafel .stap::before,.tafel .stap::after{content:'';flex:1 1 0;min-height:0}
.tafel .stap::before{flex-grow:.7} /* iets boven het midden, dichter bij de zin */
.tafel .stap.actief{visibility:visible;opacity:1;transform:translateX(0);transition-delay:0s}
.tafel .stap.weg{opacity:0;transform:translateX(-60px)}
.tafel .stap.terug-in{transform:translateX(-60px)}
.tafel .stap.terug-weg{opacity:0;transform:translateX(60px)}
.tafel.laden .stap.actief .vraag,.tafel.laden .stap.actief .veld{opacity:0;transform:translateY(10px)}
.tafel .stap.actief .vraag,.tafel .stap.actief .veld{transition:opacity .7s ease .5s,transform .7s var(--curve) .5s}

.tafel .vraag{font-family:var(--display);font-weight:300;font-size:clamp(1.55rem,5.6vw,2.1rem);line-height:1.25;
  color:var(--cream);max-width:20ch;margin-bottom:1rem;font-variation-settings:'opsz' 72;letter-spacing:0;text-transform:none}
.tafel .hint{font-size:.92rem;line-height:1.5;color:var(--tekst);max-width:30ch;margin:-.4rem 0 .9rem}

/* velden: alleen een lijn, groot en gecentreerd */
.tafel .veld{width:100%;max-width:26rem;background:transparent;border:0;border-bottom:1px solid rgba(250,242,226,.35);
  border-radius:0;padding:.7rem .2rem;font-family:var(--display);font-weight:400;font-size:1.55rem;line-height:1.3;
  color:var(--cream);text-align:center;outline:none;caret-color:var(--koper-lt);box-shadow:none;
  transition:border-color .25s;-webkit-appearance:none;appearance:none}
.tafel .veld::placeholder{color:rgba(232,217,188,.38);font-style:italic;font-weight:300}
.tafel .veld:focus{border-bottom-color:var(--koper-lt);box-shadow:none}
.tafel .veld.tekst{font-family:var(--body);font-size:1.1rem;line-height:1.5;resize:none;text-align:left;
  border:1px solid rgba(250,242,226,.28);border-radius:8px;padding:.9rem 1rem}
.tafel .veld.tekst:focus{border-color:var(--koper-lt)}
.tafel .veld.datum{font-family:var(--body);font-size:1.15rem;color-scheme:dark;max-width:16rem}

/* keuzeknoppen */
.tafel .keuzes{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;width:100%;max-width:26rem}
.tafel .keus{font-family:var(--body);font-size:1.1rem;font-weight:500;color:var(--cream);
  background:rgba(10,8,4,.45);border:1px solid rgba(224,120,46,.45);border-radius:999px;
  padding:.85rem 1.3rem;min-width:3.6rem;cursor:pointer;letter-spacing:0;text-transform:none;
  transition:background .2s,border-color .2s,color .2s,transform .15s}
.tafel .keus:hover{border-color:var(--koper-lt)}
.tafel .keus:active{transform:scale(.97)}
.tafel .keus:focus-visible{outline:2px solid var(--koper-lt);outline-offset:2px}
.tafel .keus.gekozen{background:var(--koper);border-color:var(--koper);color:var(--cream);
  box-shadow:0 6px 20px rgba(181,76,16,.4)}
.tafel .keus.vol{opacity:.38;cursor:default;border-style:dashed}
.tafel .keus.vol small{display:block;font-size:.65rem;font-weight:400;letter-spacing:.04em;margin-top:.1rem}
.tafel .keus.breed{flex-basis:100%}
.tafel .keuzes.aantal .keus{min-width:4rem}
/* dagen: twee kolommen (dagnaam boven, datum eronder) zodat zes dagen + "andere dag"
   op een telefoon zonder scrollen passen (Pieter 24-10) */
.tafel .keuzes.dagen{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.tafel .keuzes.dagen .keus{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.6rem .6rem .55rem;
  min-width:0;border-radius:14px;line-height:1.25}
.tafel .keuzes.dagen .keus.breed{grid-column:1/-1;border-radius:999px;padding:.7rem 1rem}
.tafel .keuzes.dagen .keus span:last-child{font-weight:400;color:var(--stil);font-size:.85rem}
.tafel .keuzes.dagen .keus.gekozen span:last-child{color:var(--cream)}
.tafel .keuzes.tijden{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.tafel .keuzes.tijden .keus{padding:.6rem .1rem;min-width:0;font-size:1rem;font-variant-numeric:tabular-nums}
.tafel .keuzes.tijden .leeg{grid-column:1/-1;color:var(--stil);font-style:italic;padding:1rem 0}
.tafel .anderedag{margin-top:.7rem;width:100%;display:flex;justify-content:center}

/* telefoon: land groot, code als voorzetsel bij het nummer */
.tafel .keuzes.landen{margin-bottom:.4rem;gap:.45rem}
.tafel .keuzes.landen .keus{padding:.6rem .9rem;font-size:1rem}
.tafel .landkeuze{font-family:var(--body);font-size:.95rem;color:var(--tekst);background:transparent;
  border:0;border-bottom:1px solid rgba(250,242,226,.25);border-radius:0;padding:.4rem .2rem;margin-bottom:1rem;
  color-scheme:dark;cursor:pointer;max-width:16rem;width:auto}
.tafel .landkeuze:focus{outline:none;border-bottom-color:var(--koper-lt)}
.tafel .telrij{display:flex;align-items:flex-end;gap:.6rem;width:100%;max-width:22rem;padding:0 .8rem}
.tafel .landcode{font-family:var(--display);font-weight:400;font-size:1.9rem;color:var(--koper-lt);
  padding-bottom:.55rem;white-space:nowrap;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:transform .3s var(--curve),color .3s}
.tafel .landcode.let-op{transform:scale(1.12);color:var(--cream)}
.tafel .veld.tel{text-align:left;font-variant-numeric:tabular-nums;letter-spacing:.02em}

.tafel .vink{display:flex;align-items:flex-start;gap:.7rem;max-width:26rem;margin-top:1.4rem;
  font-size:.95rem;line-height:1.5;color:var(--tekst);text-align:left;cursor:pointer;
  letter-spacing:0;text-transform:none;font-family:var(--body)}
.tafel .vink input{width:1.2rem;height:1.2rem;flex:none;margin-top:.15rem;accent-color:var(--koper)}

/* overzicht */
.tafel .samenvatting{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.35rem,4.8vw,1.7rem);
  line-height:1.4;color:var(--cream);max-width:24ch;margin-bottom:1.4rem}
.tafel .samenvatting button{font:inherit;color:inherit;background:none;border:0;padding:0 .05em;cursor:pointer;
  border-bottom:1px solid rgba(224,120,46,.45);transition:color .2s,border-color .2s}
.tafel .samenvatting button:hover,.tafel .samenvatting button:focus-visible{color:var(--koper-lt);border-color:var(--koper-lt);outline:none}
.tafel.overzicht .zin{opacity:0;visibility:hidden;pointer-events:none}   /* ook niet met Tab bereikbaar */
.tafel .details{width:100%;max-width:24rem;text-align:left;border-top:1px solid rgba(250,242,226,.15)}
.tafel .details div{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 0;border-bottom:1px solid rgba(250,242,226,.15)}
.tafel .details dt{flex:0 0 5.2rem;font-size:.8rem;color:var(--stil)}
.tafel .details dd{flex:1;font-size:1rem;color:var(--cream);overflow-wrap:anywhere}
.tafel .details button{font:inherit;font-size:.8rem;color:var(--koper-lt);background:none;border:0;cursor:pointer;padding:0}
.tafel .details button:hover{text-decoration:underline}

/* klaar */
.tafel .stap.klaar .feniks{width:64px;height:auto;margin-bottom:1rem;filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))}
.tafel .klaar-tekst{font-size:1.02rem;line-height:1.6;max-width:30ch;color:var(--tekst);margin-bottom:.8rem}
.tafel .klaar-tekst.stil{color:var(--stil);font-size:.92rem}
.tafel .stap.klaar .knop-tekst{margin-top:1rem}

.tafel .fout{margin-top:1rem;font-size:.95rem;line-height:1.5;color:var(--koper-lt);max-width:30ch}
.tafel .wa{margin-top:1rem}

/* ---------- voet: terug + volgende ---------- */
.tafel .voet{position:relative;z-index:2;width:100%;max-width:560px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.8rem 1.4rem calc(1.1rem + var(--veilig-onder));
  transition:opacity .3s;background:none;border:0;text-align:initial}
.tafel.ingebed .voet{padding-bottom:1rem}
.tafel.einde .voet{opacity:0;pointer-events:none}
.tafel .knop{font-family:var(--body);font-size:1.02rem;font-weight:500;letter-spacing:.03em;color:var(--cream);
  background:var(--koper);border:0;border-radius:999px;padding:1.05rem 2.2rem;min-width:11rem;cursor:pointer;
  text-transform:none;box-shadow:0 10px 28px rgba(181,76,16,.38);transition:background .2s,transform .15s,box-shadow .2s}
.tafel .knop:hover{background:var(--koper-hover)}
.tafel .knop:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(181,76,16,.3)}
.tafel .knop:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.tafel .knop[disabled]{opacity:.55;cursor:wait}
.tafel .knop-los{display:inline-block;text-decoration:none;min-width:0;padding:.85rem 1.6rem;font-size:.95rem}
.tafel .knop-tekst{font-family:var(--body);font-size:.95rem;color:var(--stil);background:none;border:0;padding:.6rem .2rem;
  cursor:pointer;text-decoration:none;letter-spacing:0;text-transform:none;transition:color .2s}
.tafel .knop-tekst:hover{color:var(--cream)}
.tafel .knop-tekst[hidden]{display:none}
.tafel #terug.onzichtbaar{visibility:hidden}

.tafel .hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

@media (min-width:600px){
  .tafel.los .kop{padding-top:4rem}
  .tafel .stap{padding:2rem 1rem}
  .tafel .vraag{max-width:26ch}
}
/* lagere telefoons (iPhone SE/8-formaat): nog een slag compacter, alles zonder scrollen */
@media (max-height:700px){
  .tafel .kop{padding-top:2.4rem}
  .tafel.klein .kop{padding-top:2rem}
  .tafel.ingebed .kop{padding-top:.8rem}
  .tafel.klein .feniks-kop{display:none}
  .tafel .logo{width:clamp(150px,40vw,220px)}
  .tafel.klein .logo{width:72px}
  .tafel .zin{font-size:1rem;margin-top:.4rem}
  .tafel .vraag{font-size:clamp(1.35rem,5vw,1.8rem);margin-bottom:.7rem}
  .tafel .stap{padding-top:.6rem}
  .tafel .keus{padding:.7rem 1.1rem}
  .tafel .keuzes.dagen .keus{padding:.45rem .5rem .4rem}
  .tafel .keuzes.tijden .keus{padding:.5rem .1rem}
  .tafel .hint{margin-bottom:.6rem}
  .tafel .voet{padding-top:.5rem}
  .tafel .knop{padding:.9rem 2rem}
}

/* ---------- toetsenbord open (klasse via table.js) ----------
   De bouwsteen wordt zo hoog als het zichtbare scherm: vraag, veld en de knop
   Volgende staan samen boven het toetsenbord. Rustig: zin, hint en landknoppen
   gaan weg; de grote landcode voor het nummer laat zien welk land gekozen is en
   is aantikbaar om te wisselen (sluit het toetsenbord). Ingebed in de site
   komt de bouwsteen even los over de pagina te liggen (fixed), zodat de balken
   van de site en de scrollpositie er niet toe doen. */
.tafel.toets{height:var(--vvh,100dvh);min-height:0;overflow:hidden;transform:translateY(var(--vvt,0px))}
.tafel.ingebed.toets{position:fixed;top:0;left:0;right:0;z-index:1000;max-width:none}
.tafel.toets .kop{padding-top:.6rem}
.tafel.toets .logo,.tafel.toets .talen,.tafel.toets .voortgang{display:none}
.tafel.toets .zin,.tafel.toets .hint,.tafel.toets .keuzes.landen,.tafel.toets .landkeuze{display:none}
.tafel.toets .podium{min-height:0}
.tafel.toets .stap{padding-top:.5rem;justify-content:flex-start}
.tafel.toets .stap::before{flex-grow:.35}
.tafel.toets .vraag{margin-bottom:.7rem}
.tafel.toets .voet{padding-top:.4rem;padding-bottom:calc(.7rem + var(--veilig-onder))}
/* heel weinig ruimte over (klein toestel): de vraag kleiner */
.tafel.laag .vraag{font-size:1.25rem;margin-bottom:.5rem}
.tafel.laag .vink{margin-top:.8rem}
.tafel.laag .veld{font-size:1.3rem;padding:.45rem .2rem}

@media (prefers-reduced-motion:reduce){
  .tafel .stap,.tafel .licht,.tafel .logo,.tafel .voortgang i,.tafel .landcode,.tafel .stap.actief .vraag,.tafel .stap.actief .veld{transition-duration:.01ms!important;transition-delay:0s!important}
  .tafel .stap,.tafel .stap.weg,.tafel .stap.terug-in,.tafel .stap.terug-weg{transform:none}
}

/* ---------- ingebed in de homepage: sectie #booking (proef 24-10) ----------
   De sectie is precies zo hoog als het scherm onder de bovenbalk (table.js zet de
   hoogte in px, zodat een open toetsenbord hem niet laat springen). Scroll-snap van
   de browser laat hem beeldvullend "doorglijden" zodra je in de buurt scrolt;
   proximity, dus doorscrollen blijft gewoon mogelijk. Zolang de sectie in beeld is
   wijkt op de telefoon de onderbalk (body.tafel-in-beeld, via table.js). */
html:has(.booking-tafel){scroll-snap-type:y proximity}
section.booking-tafel{position:relative;padding:0;height:min(calc(100vh - 60px),660px);height:min(calc(100dvh - 60px),660px);
  overflow:hidden;scroll-snap-align:start;scroll-margin-top:60px}
/* balansronde 02-11: niet hoger dan 660 px, anders staat één vraag in een zee van leegte (table.js meet hetzelfde) */
section.booking-tafel::before{display:none}
/* naad onder de sectie (zelfde als hero/verhaal): beide panelen werpen een schaduw in de spleet */
section.booking-tafel{box-shadow:0 10px 24px rgba(0,0,0,.85)}
section.booking-tafel + .naad + .info{box-shadow:0 -10px 24px rgba(0,0,0,.85);border-top:0}
body.tafel-in-beeld .bottom-nav{transform:translateY(120%)}
.bottom-nav{transition:transform .35s ease}
@media (min-width:768px){
  section.booking-tafel{height:min(calc(100vh - 80px),660px);height:min(calc(100dvh - 80px),660px);scroll-margin-top:80px}
}