/* Alhambra Petit Restaurant Cafetaria */
:root{
  --bordeaux:#A21C35;
  --bordeaux-dark:#82162B;
  --bordeaux-light:#C0213F;
  --goud:#C4996C;          /* jouw goud: alleen voor lijnen, randen en stippen */
  --goud-tekst:#8A6534;    /* zelfde goud, donkerder gemaakt zodat kleine tekst leesbaar blijft */
  --creme:#FBF6F0;
  --wit:#FFFFFF;
  --inkt:#1C1917;
  --grijs:#6B6360;
  --lijn:#E7DED4;
  --groen:#1F7A46;
  --rood:#B3261E;
  --radius:14px;
  --schaduw:0 2px 6px rgba(28,25,23,.06), 0 12px 28px rgba(28,25,23,.07);
  --max:1180px;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--creme);color:var(--inkt);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.center{text-align:center}
.muted{color:var(--grijs)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* knoppen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;
  background:var(--bordeaux);color:#fff;font-weight:600;cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{background:var(--bordeaux-light);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--bordeaux);border-color:var(--bordeaux)}
.btn.ghost:hover{background:rgba(162,28,53,.07)}
.btn.wit{background:#fff;color:var(--bordeaux)}
.btn.wit:hover{background:#f3ece4}
.btn.blok{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.klein{padding:.5rem 1rem;font-size:.9rem}

/* koptekst */
.topbar{background:var(--bordeaux-dark);color:#FFFFFF;font-size:.85rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;padding:.55rem 20px}
.topbar span,.topbar a{display:inline-flex;align-items:center;gap:.4rem}
/* De balk stond vol tekst waar je niet op kon klikken, terwijl het adres en
   "Bestellen en afhalen" allebei ergens naartoe wijzen: de kaartroute en de
   menukaart. Een onderstreping bij aanwijzen laat zien dat er iets te doen is;
   de statusmelding blijft gewoon tekst, want die verwijst nergens heen. */
.topbar a:hover{text-decoration:underline}
.topbar a:focus-visible{outline:2px solid var(--goud);outline-offset:2px;border-radius:4px}

/* Bestellen staat uit. Deze balk staat tussen de bordeauxrode bovenbalk en de
   kop, zodat hij op elke pagina meteen in beeld is -- ook bij iemand die
   rechtstreeks op de menukaart binnenkomt. Amber en niet rood: er is niets
   stuk, we nemen alleen even geen bestellingen aan. */
.besteluit{background:#FDF3E3;border-bottom:1px solid #E8C99A;color:#6B4A12}
.besteluit .wrap{padding:.7rem 20px;font-size:.92rem;line-height:1.5;text-align:center}
@media (max-width:680px){
  .besteluit .wrap{padding:.6rem 16px;font-size:.86rem;text-align:left}
}

header.site{
  position:sticky;top:0;z-index:50;background:rgba(251,246,240,.92);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--lijn);
}
header.site .wrap{display:flex;align-items:center;gap:1.5rem;padding:.6rem 20px}
.merk{display:flex;align-items:center;gap:.85rem;color:var(--bordeaux)}
/* logo: embleem boven de naam, overal hetzelfde blok */
/* De naam als echte tekst hoort bij logoBlok(). Op een breed scherm staat de
   afbeelding er en blijft deze verborgen; op een telefoon precies andersom. */
.merkblok .woordtekst{display:none}
.merkblok{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;line-height:0}
.merkblok .embleem{display:block;width:auto;height:38px}
.merkblok .woordbeeld{display:block;width:auto;height:18px}
.merkblok.middel .embleem{height:62px}
.merkblok.middel .woordbeeld{height:28px}
.merkblok.groot .embleem{height:140px}
.merkblok.groot .woordbeeld{height:50px}

nav.hoofd{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
nav.hoofd a{position:relative;font-weight:500;font-size:.95rem;display:inline-flex;align-items:center;height:40px;line-height:1}
nav.hoofd a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:transparent;border-radius:2px}
nav.hoofd a:hover::after,nav.hoofd a.actief::after{background:var(--goud)}
nav.hoofd a.mandknop::after{display:none}
.menuknop{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.menuknop span{display:block;width:24px;height:2px;background:var(--inkt);margin:5px 0;border-radius:2px}
.mandknop,nav.hoofd a.mandknop{background:var(--bordeaux);color:#fff;border:0;border-radius:999px;padding:0 1.1rem;height:40px;font-weight:600;font-size:.95rem;cursor:pointer;display:inline-flex;gap:.55rem;align-items:center;line-height:1;white-space:nowrap}
.mandknop:hover,nav.hoofd a.mandknop:hover{background:var(--bordeaux-light)}
.mandknop .telling,.js-telling{background:var(--goud);color:#3A2A00;border-radius:999px;min-width:22px;height:22px;padding:0 .35rem;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;line-height:1}

/* hero */
.hero{position:relative;padding:5.5rem 0 5rem;overflow:hidden;background:
  radial-gradient(120% 90% at 70% 0%, #C0213F 0%, #A21C35 45%, #82162B 100%);color:#FFFFFF}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:
    radial-gradient(circle at 0 0, transparent 14px, #FFFFFF 14px, #FFFFFF 15px, transparent 15px),
    radial-gradient(circle at 40px 40px, transparent 14px, #FFFFFF 14px, #FFFFFF 15px, transparent 15px);
  background-size:40px 40px;
}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero h1{color:#fff}
.hero p.lead{font-size:1.15rem;color:#EBD8CB;max-width:46ch}
.hero .acties{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero .kaart{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:1.6rem 1.7rem}
.hero .kaart h3{color:#fff;font-size:1.05rem;letter-spacing:.02em}
.tijden{list-style:none;margin:0;padding:0;font-size:.95rem}
.tijden li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.2rem;
  padding:.5rem .7rem;border-radius:9px}
.tijden li + li{margin-top:1px}
.tijden .dag{display:flex;align-items:center;gap:.5rem}
.tijden .dag::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent;flex:none}
.tijden .tijd{font-variant-numeric:tabular-nums;white-space:nowrap}
.tijden li.dicht .tijd{opacity:.6}
.tijden li.vandaag{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.tijden li.vandaag .dag::before{background:var(--goud)}
.tijden.licht li{color:var(--grijs)}
.tijden.licht li.vandaag{background:rgba(162,28,53,.07);color:var(--inkt)}
.tijden.licht li.vandaag .dag::before{background:var(--bordeaux)}
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;background:rgba(255,255,255,.12)}
.status .stip{width:9px;height:9px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.22)}
.status.dicht .stip{background:#F87171;box-shadow:0 0 0 4px rgba(248,113,113,.22)}

/* secties */
section{padding:4.5rem 0}
.kop{max-width:60ch;margin-bottom:2.4rem}
.kop .label{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--goud-tekst);font-weight:700;display:block;margin-bottom:.7rem}
/* Kleurbanden. Secties wisselen tussen creme en wit, zodat ze niet aan elkaar
   plakken. Op een witte band krijgen de kaartjes een cremevulling; zo houdt een
   kaartje altijd contrast met de ondergrond waar het op ligt. */
.band-wit{background:var(--wit)}
.band-wit .kaartje{background:var(--creme)}

.raster{display:grid;gap:1.4rem}
.raster.drie{grid-template-columns:repeat(3,1fr)}
.raster.vier{grid-template-columns:repeat(4,1fr)}
.kaartje{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--schaduw)}
.kaartje .icoon{width:46px;height:46px;border-radius:12px;background:rgba(162,28,53,.08);color:var(--bordeaux);display:grid;place-items:center;margin-bottom:1rem}
.kaartje .icoon svg{width:24px;height:24px}

/* Contactblok. Het kaartje met openingstijden is veel hoger dan adres en bestellen.
   Naast elkaar in drie gelijke kolommen laat dat een gat vallen onder de twee korte;
   nu vullen adres en bestellen samen de hoogte van de openingstijden. */
.contactraster{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.contactkolom{display:grid;gap:1.4rem;align-content:start}

/* Lange leestekst (voorwaarden, privacy, allergenen) op een wit vlak.
   Wit is hier de leeskleur: rustiger voor de ogen dan tekst los op de creme grond. */
.leesblok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:2.4rem 2.6rem;box-shadow:var(--schaduw)}
.leesblok > h2{font-size:1.15rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--lijn)}
.leesblok > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.leesblok > p:last-child,.leesblok > ul:last-child{margin-bottom:0}
@media (max-width:680px){ .leesblok{padding:1.6rem 1.3rem} }

/* categorie tegels */
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.tegel{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bordeaux);color:#fff;padding:1.3rem;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;border:0;cursor:pointer;text-align:left;transition:transform .15s ease}
.tegel:hover{transform:translateY(-3px)}
.tegel b{font-family:var(--serif);font-size:1.2rem}
.tegel small{color:#E7CFC2}

/* menu pagina */
.bestel{display:grid;grid-template-columns:220px 1fr 340px;gap:2rem;align-items:start;padding:2.5rem 0 4rem}
.zijkolom{position:sticky;top:96px;max-height:calc(100vh - 118px);overflow-y:auto;overscroll-behavior:contain;padding-right:.35rem}
.zijkolom::-webkit-scrollbar{width:6px}
.zijkolom::-webkit-scrollbar-thumb{background:#DCD2C6;border-radius:3px}
.categorielijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.categorielijst button{width:100%;text-align:left;background:none;border:0;padding:.6rem .9rem;border-radius:10px;cursor:pointer;font-weight:500;color:var(--grijs)}
.categorielijst button:hover{background:rgba(162,28,53,.06);color:var(--inkt)}
.categorielijst button.actief{background:var(--bordeaux);color:#fff;font-weight:600}
.zoek{width:100%;padding:.75rem 1rem .75rem 2.6rem;border:1px solid var(--lijn);border-radius:999px;background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6360' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") .85rem center/18px no-repeat}
.zoek:focus{outline:2px solid var(--bordeaux);outline-offset:1px}
.categorie{margin-bottom:2.6rem;scroll-margin-top:112px}
.categorie h2{display:flex;align-items:baseline;gap:.8rem;border-bottom:1px solid var(--lijn);padding-bottom:.6rem;margin-bottom:1.1rem}
.categorie h2 small{font-family:var(--font);font-size:.8rem;color:var(--grijs);font-weight:400}
.gerechten{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.gerecht{display:flex;gap:1rem;align-items:flex-start;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:1rem 1.1rem;cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease;text-align:left;width:100%}
.gerecht:hover{border-color:var(--bordeaux);box-shadow:var(--schaduw)}
.gerecht .info{flex:1;min-width:0}
.gerecht b{display:block;font-weight:600}
.gerecht p{font-size:.87rem;color:var(--grijs);margin:.2rem 0 0}
.gerecht .prijs{font-weight:700;white-space:nowrap;color:var(--bordeaux)}
.gerecht .plus{width:32px;height:32px;border-radius:50%;background:var(--bordeaux);color:#fff;display:grid;place-items:center;flex:none;font-size:1.2rem;line-height:1}
.gerecht.uitverkocht{opacity:.5;cursor:not-allowed}
.gerecht.uitverkocht .plus{background:var(--grijs)}
.vlag{display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--goud-tekst);border:1px solid var(--goud);border-radius:999px;padding:.05rem .5rem;margin-left:.45rem;vertical-align:middle}

/* winkelmand */
.mand{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden;position:sticky;top:96px;display:flex;flex-direction:column;max-height:calc(100vh - 118px)}
.mand h3{margin:0;padding:1.1rem 1.3rem;border-bottom:1px solid var(--lijn);display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex:none}
.mand .totalen,.mand .voet{flex:none}
/* De mand is een kolom met een vaste maximale hoogte: kop, lijst, totalen,
   knop. Alleen de lijst mag meegroeien en scrollen. Die eigenschappen stonden
   op .regels, maar dat blokje zit IN #mandInhoud en niet rechtstreeks in de
   mand -- dus deden ze niets. Bij meer dan een paar gerechten groeide de mand
   door zijn maximale hoogte heen en knipte overflow:hidden de totalen en de
   knop Afrekenen er onderaf. Ze moeten op de laag eronder staan.
   (Zelfde valkuil als eerder: een flex-kind krimpt niet onder zijn inhoud
   zolang min-height op auto staat.) */
.mand #mandInhoud{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.mand .regels{padding:.5rem .4rem}
.regel{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;padding:.7rem .9rem;border-radius:10px}
.regel:hover{background:#FAF6F1}
.regel .aantal{display:flex;align-items:center;gap:.35rem;border:1px solid var(--lijn);border-radius:999px;padding:.1rem}
.regel .aantal button{width:24px;height:24px;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--bordeaux);font-weight:700}
.regel .aantal button:hover{background:rgba(162,28,53,.09)}
.regel .aantal span{min-width:18px;text-align:center;font-weight:600;font-size:.9rem}
.regel .naam{font-size:.93rem;font-weight:500}
.regel .opties{font-size:.8rem;color:var(--grijs)}
.regel .rprijs{font-weight:600;font-size:.93rem}
.mand .totalen{padding:1rem 1.3rem;border-top:1px solid var(--lijn);font-size:.93rem}
.mand .totalen div{display:flex;justify-content:space-between;padding:.2rem 0}
.mand .totalen .eind{font-size:1.15rem;font-weight:700;padding-top:.6rem;margin-top:.4rem;border-top:1px dashed var(--lijn)}
.mand .voet{padding:0 1.3rem 1.3rem}
.leeg{padding:2.4rem 1.3rem;text-align:center;color:var(--grijs);font-size:.92rem}

/* modaal */
.overlay{position:fixed;inset:0;background:rgba(28,25,23,.55);display:none;align-items:center;justify-content:center;padding:1rem;z-index:100}
.overlay.open{display:flex}
.modaal{background:var(--wit);border-radius:18px;max-width:520px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modaal header{padding:1.4rem 1.6rem .8rem;position:relative}
.modaal header h3{margin:0;font-size:1.5rem}
.modaal header p{margin:.3rem 0 0;color:var(--grijs);font-size:.92rem}
.sluit{position:absolute;top:1rem;right:1rem;background:#F1E9E1;border:0;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1}
.modaal .body{padding:.6rem 1.6rem 1.2rem}
.optiegroep{border-top:1px solid var(--lijn);padding:1.1rem 0}
.optiegroep h4{margin:0 0 .1rem;font-size:.98rem}
.optiegroep .hint{font-size:.78rem;color:var(--grijs);margin-bottom:.7rem}
.keuze{display:flex;align-items:center;gap:.7rem;padding:.5rem .2rem;cursor:pointer;border-radius:8px}
.keuze:hover{background:#FAF6F1}
.keuze input{accent-color:var(--bordeaux);width:18px;height:18px}
.keuze .meer{margin-left:auto;color:var(--grijs);font-size:.88rem}
.modaal footer{position:sticky;bottom:0;background:var(--wit);border-top:1px solid var(--lijn);padding:1rem 1.6rem;display:flex;gap:1rem;align-items:center}
.modaal footer .aantal{display:flex;align-items:center;gap:.6rem;border:1px solid var(--lijn);border-radius:999px;padding:.3rem .5rem}
.modaal footer .aantal button{width:30px;height:30px;border:0;background:none;cursor:pointer;font-size:1.15rem;color:var(--bordeaux);font-weight:700;border-radius:50%}

/* formulieren */
.veld{margin-bottom:1rem}
.veld label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.veld input,.veld select,.veld textarea{
  width:100%;padding:.75rem .95rem;border:1px solid var(--lijn);border-radius:10px;background:var(--wit)
}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--bordeaux);outline-offset:0;border-color:var(--bordeaux)}
.veld .fout{color:var(--rood);font-size:.8rem;margin-top:.3rem;display:none}
.veld.mis input,.veld.mis select{border-color:var(--rood)}
.veld.mis .fout{display:block}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
fieldset{border:0;padding:0;margin:0 0 1.4rem}
legend{font-family:var(--serif);font-size:1.25rem;margin-bottom:.9rem}
.keuzeblok{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.2rem}
.keuzeblok label{border:1px solid var(--lijn);border-radius:12px;padding:1rem;cursor:pointer;background:var(--wit);display:flex;gap:.7rem;align-items:flex-start}
.keuzeblok label:has(input:checked){border-color:var(--bordeaux);box-shadow:0 0 0 1px var(--bordeaux);background:#FFF9F5}
.keuzeblok input{accent-color:var(--bordeaux);margin-top:.2rem}
.keuzeblok b{display:block}
.keuzeblok small{color:var(--grijs)}

/* afrekenen */
.afreken{display:grid;grid-template-columns:1.3fr .7fr;gap:2.5rem;padding:2.5rem 0 4rem;align-items:start}
.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:1.6rem 1.7rem;box-shadow:var(--schaduw)}
.betaalopties{display:grid;gap:.7rem}
.betaal{display:flex;align-items:center;gap:.9rem;border:1px solid var(--lijn);border-radius:12px;padding:.9rem 1rem;cursor:pointer;background:var(--wit)}
.betaal:has(input:checked){border-color:var(--bordeaux);box-shadow:0 0 0 1px var(--bordeaux)}
.betaal .logo{width:40px;height:28px;border-radius:6px;display:grid;place-items:center;font-size:.62rem;font-weight:800;color:#fff;flex:none}
.melding{background:#FFF4E5;border:1px solid #F2D9AE;color:#6B4A08;border-radius:12px;padding:.9rem 1.1rem;font-size:.9rem;margin-bottom:1.2rem;display:flex;gap:.7rem}
.melding.rood{background:#FDECEA;border-color:#F5C6C2;color:#7A1E17}
.melding.groen{background:#E9F7EF;border-color:#BFE5CE;color:#14532D}

/* bevestiging */
.bevestig{max-width:640px;margin:0 auto;padding:4rem 0}
.vinkje{width:76px;height:76px;border-radius:50%;background:#E9F7EF;color:var(--groen);display:grid;place-items:center;margin:0 auto 1.4rem}
.bon-preview{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;background:#fff;border:1px dashed var(--lijn);border-radius:10px;padding:1.4rem;white-space:pre-wrap;line-height:1.5}

/* voetregel */
footer.site{background:var(--bordeaux-dark);color:#E9D6C9;padding:3.5rem 0 2rem;margin-top:2rem;
  border-top:3px solid var(--goud)}
/* Volgorde: verhaal, openingstijden, adres, links. De hoogste kolom staat naast
   de eveneens hoge logokolom, de twee korte staan samen aan het eind. Zo loopt de
   hoogte af in plaats van kort-lang-kort. */
footer.site .raster{grid-template-columns:1.45fr 1.35fr 1fr .95fr;gap:2.4rem;align-items:start}
footer.site h4{font-family:var(--serif);color:#fff;font-size:1.05rem;margin:0 0 .8rem}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site ul{list-style:none;margin:0;padding:0;font-size:.92rem}
footer.site li{padding:.22rem 0}
footer.site .merk{margin-bottom:1.2rem;justify-content:flex-start}
footer.site .feiten{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
footer.site .feiten li{font-size:.75rem;letter-spacing:.04em;color:#E9D6C9;padding:.25rem .7rem;
  border:1px solid rgba(196,153,108,.55);border-radius:999px;background:rgba(255,255,255,.05)}
footer.site h4{letter-spacing:.02em}
footer.site ul li{padding:.26rem 0}
footer.site a{border-bottom:1px solid transparent}
footer.site a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--goud)}
footer.site .tijden li{padding:.2rem .55rem}
footer.site .tijden .tijd{gap:0}
footer.site .tijden li.vandaag{background:rgba(255,255,255,.12)}

.onder{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.4rem;font-size:.82rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;color:#BFA595}

@media (max-width:1080px){
  .bestel{grid-template-columns:1fr;}
  .zijkolom{position:sticky;top:84px;z-index:20;max-height:none;overflow:visible;min-width:0;
    background:var(--creme);padding:.7rem 0;margin:0 -20px;padding-inline:20px;border-bottom:1px solid var(--lijn)}
  .categorielijst{flex-direction:row;overflow-x:auto;gap:.4rem;padding-bottom:.2rem;scrollbar-width:none;min-width:0}
  .categorielijst::-webkit-scrollbar{display:none}
  .categorielijst li{flex:none}
  .categorielijst button{white-space:nowrap;border:1px solid var(--lijn);background:var(--wit);border-radius:999px;padding:.45rem .95rem}
  .mand{position:static;max-height:none}
  .gerechten{grid-template-columns:1fr}
  .hero .wrap{grid-template-columns:1fr}
  .afreken{grid-template-columns:1fr}
  .raster.drie,.raster.vier{grid-template-columns:1fr 1fr}
  footer.site .raster{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  nav.hoofd{display:none}
  nav.hoofd.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--creme);
    flex-direction:column;align-items:stretch;gap:0;padding:.4rem 20px 1rem;
    border-bottom:1px solid var(--lijn);box-shadow:0 14px 24px rgba(28,25,23,.08)}
  /* 48 pixels hoog: met 40 zat je onder wat Apple aanhoudt voor een duim, en
     in een lijstje met zes regels tik je dan makkelijk de buurman aan. */
  nav.hoofd.open a{padding:0;height:48px;border-bottom:1px solid var(--lijn)}
  nav.hoofd.open a:last-of-type{border-bottom:0}

  /* De actieve pagina was een gouden streep over de volle breedte. In een
     rijtje met scheidingslijnen leest dat als nog zo'n lijn in plaats van als
     markering. Nu: de naam in huisstijlkleur en wat zwaarder. */
  nav.hoofd.open a::after{display:none}
  nav.hoofd.open a.actief{color:var(--bordeaux);font-weight:700}

  /* De bestelknop. Zonder eigen ruimte plakte de B tegen de ronde rand van de
     knop; daardoor leek hij verder naar links te staan dan de links erboven,
     terwijl hij er precies onder begon. Nu staat de tekst gecentreerd in de
     knop, met lucht eromheen en een ademruimte boven het rijtje. */
  nav.hoofd.open a.mandknop{
    justify-content:center;height:50px;padding:0 1.4rem;
    margin-top:.8rem;border-bottom:0;font-size:1rem;
  }
  .menuknop{display:block;margin-left:auto}
  header.site .wrap{position:relative}
  .raster.drie,.raster.vier,.keuzeblok,.rij,footer.site .raster,.contactraster{grid-template-columns:1fr}
  section{padding:3rem 0}
}

.btn.uit{opacity:.45;cursor:not-allowed;pointer-events:auto}

/* onderhoudsscherm */
.slotje{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(120% 90% at 50% 0%, #C0213F 0%, #A21C35 45%, #82162B 100%);color:#FFFFFF}
.slotkaart{max-width:520px;width:100%;text-align:center;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:2.8rem 2.2rem}
.slotkaart .merkblok{margin-bottom:.4rem}
/* logo in het blok over ons */
.overlogo{display:flex;justify-content:center;margin:0 auto 1.6rem}


.slotkaart h1{color:#fff;font-size:clamp(1.7rem,4vw,2.3rem);margin:1.6rem 0 .6rem}
.slotkaart p{color:#E9D2C4;margin:0 auto 1.4rem;max-width:40ch}
.slotkaart .tijden{max-width:320px;margin:0 auto 1.4rem;text-align:left;font-size:.9rem}
.slotkaart .slotadres{font-size:.85rem;color:#C9A895;margin-bottom:1.6rem}
.slotlink{background:none;border:0;color:#C9A895;font-size:.8rem;cursor:pointer;text-decoration:underline;padding:.4rem}
.slotlink:hover{color:#fff}
#slotForm{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}
#slotForm input{padding:.65rem .9rem;border-radius:9px;border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.18);color:#fff;min-width:180px}
#slotForm input::placeholder{color:#C9A895}
#slotForm button{padding:.65rem 1.2rem;border-radius:9px;border:0;background:#fff;color:var(--bordeaux);font-weight:600;cursor:pointer}
#slotFout{width:100%;font-size:.82rem;color:#FFC9C4}

/* twee kaarten: ontbijt en avond */
.dagdeelbalk{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 .4rem}
.dagdeelknop{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  border:1px solid var(--lijn);background:var(--wit);border-radius:14px;padding:.75rem 1.2rem;
  cursor:pointer;min-width:180px;text-align:left;transition:border-color .15s ease, box-shadow .15s ease}
.dagdeelknop:hover{border-color:var(--bordeaux)}
.dagdeelknop.actief{border-color:var(--bordeaux);box-shadow:0 0 0 1px var(--bordeaux);background:#FFF9F5}
.dagdeelknop b{font-family:var(--serif);font-size:1.1rem}
.dagdeelknop small{color:var(--grijs);font-size:.85rem;font-variant-numeric:tabular-nums}
.dagdeelknop .wanneer{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--grijs);margin-top:.25rem}
.dagdeelknop .wanneer.open{color:var(--groen)}
/* een kaart die nu niet besteld kan worden mag je wel inzien, maar oogt gedempt */
.dagdeelknop.kijken{background:var(--creme)}
.dagdeelknop.kijken b,.dagdeelknop.kijken small{opacity:.7}

/* openingstijden met twee blokken per dag */
.tijden .tijd{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.tijden .blok{display:inline-flex;align-items:baseline;gap:.5rem;white-space:nowrap}
.tijden .blok em{font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.tijden .blok.dichtdag{opacity:.7}


/* de twee kaarten op de homepagina */
.kaartblok{position:relative;padding-top:2.6rem}
.kaartblok .klok{position:absolute;top:1.3rem;left:1.6rem;font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--goud-tekst);font-variant-numeric:tabular-nums}
.kaartblok h3{font-size:1.4rem;margin-bottom:.4rem}

/* ============================================================
   Klantomgeving: inloggen, registreren, mijn account
   Zelfde bouwstenen als de rest van de site (paneel, veld, melding, btn),
   met een paar toevoegingen die alleen hier nodig zijn.
   ============================================================ */
.smalvak{max-width:460px;margin:0 auto;padding:3rem 0 4rem}
.smalvak h1{font-size:clamp(1.8rem,4vw,2.4rem)}

.wwEisen{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .8rem;font-size:.78rem;color:var(--grijs)}
.wwEisen li{display:flex;align-items:center;gap:.35rem}
.wwEisen li::before{content:"○";font-size:.9em;color:var(--lijn)}
.wwEisen li.goed{color:var(--groen)}
.wwEisen li.goed::before{content:"●";color:var(--groen)}

.accountraster{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.scheiding{border:0;border-top:1px solid var(--lijn);margin:1.6rem 0}
.tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.feitenlijst{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:0;font-size:.92rem}
.feitenlijst dt{color:var(--grijs)}
.feitenlijst dd{margin:0;font-weight:500}

.vlag.goed{color:var(--groen);border-color:var(--groen)}

.bestelregel{border:1px solid var(--lijn);border-radius:12px;margin-bottom:.6rem;overflow:hidden}
.bestelregel summary{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1rem;cursor:pointer;
  list-style:none;font-size:.92rem}
.bestelregel summary::-webkit-details-marker{display:none}
.bestelregel summary:hover{background:var(--creme)}
.bestelregel[open] summary{border-bottom:1px solid var(--lijn);background:var(--creme)}
.bestelinhoud{padding:.4rem 1rem 1rem}

.paneel.gevaar{border-color:#F0C9C6}
.paneel.gevaar h3{color:var(--rood)}
.btn.rood{background:var(--rood)}
.btn.rood:hover{background:#8F1D17}

.vinkje.wacht{background:#FFF4E5;color:#B45309}

@media (max-width:760px){
  .accountraster,.tweekolom{grid-template-columns:1fr}
}

/* de eisenlijst wordt rustig groen zodra alles klopt */
.wwEisen.afgevinkt li{color:var(--groen)}

/* meelopende hint bij het telefoonveld */
.telhint{display:block;margin-top:.3rem;font-size:.78rem;line-height:1.4}
.telhint.fout{color:var(--rood)}
.veld input.mis{border-color:var(--rood)}

/* Klantnummer op de accountpagina. Cijfers even breed, zodat het nummer als
   een nummer leest en niet als losse tekst. */
.klantnr{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* Verplichte velden. Het sterretje moet opvallen zonder te schreeuwen, en
   krijgt zijn betekenis uit de regel boven het blok. */
.veld label .ster,.ster{color:var(--rood);font-weight:700}
/* Een veld dat nog niet klopt: rode rand en de reden eronder. Pas zichtbaar
   als de klant het veld verlaat of op bestellen drukt, niet al terwijl hij
   het eerste teken typt. */
.veld.mis input,.veld.mis select,.veld.mis textarea{border-color:var(--rood);
  background:#FEF6F5}
.veld.mis input:focus,.veld.mis select:focus{outline-color:var(--rood)}

/* Twee panelen naast elkaar met een eigen rand. Zonder dit is elk paneel
   precies zo hoog als zijn eigen inhoud en eindigt de ene kolom halverwege de
   andere; dat leest als een fout in de pagina. Ze strekken nu mee tot dezelfde
   hoogte en hun knop staat onderaan, zodat beide knoppen op een lijn liggen. */
.accountraster.gelijk{align-items:stretch}
.accountraster.gelijk > .paneel.gelijk{display:flex;flex-direction:column}
.paneel.gelijk > form{display:flex;flex-direction:column;flex:1 1 auto}
.paneel.gelijk > form > *{flex:0 0 auto}
.paneel.gelijk > form > .btn{margin-top:auto;align-self:flex-start}

/* De twee dagdeelkaarten en het blok "Over Alhambra" stonden met een
   inline-stijl op twee kolommen. Een inline-stijl wint van elke mediaquery,
   dus die bleven ook op een telefoon naast elkaar staan en duwden de pagina
   ruim tachtig pixels te breed. Nu staan ze hier, waar ze wel kunnen buigen. */
.kaartenraster{grid-template-columns:1fr 1fr;margin-bottom:3.5rem}
.overblok{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.naarkaart{margin-top:1.6rem}
.citaatblok{
  border-radius:20px;overflow:hidden;padding:3rem;text-align:center;color:#FFFFFF;
  background:radial-gradient(120% 90% at 30% 10%, #C0213F, #82162B);
}
@media (max-width:820px){
  .kaartenraster,.overblok{grid-template-columns:1fr}
  .overblok{gap:1.8rem}
}
@media (max-width:680px){
  .citaatblok{padding:1.8rem 1.3rem;border-radius:16px}
  .kaartenraster{margin-bottom:2rem}
}

/* Melding over de servicekosten in de winkelmand. Geen waarschuwkleur: het is
   geen fout maar informatie, en rood zou het zwaarder maken dan het is. Wel
   duidelijk afgezet met een gouden randje, zodat een klant het ziet voordat
.totalen .muted span{color:var(--grijs)}

/* ============================================================
   TELEFOON
   ------------------------------------------------------------
   Niet alleen "het past", maar een eigen indeling. Op een scherm van
   390 pixels telt elke centimeter: wat op een breed scherm naast elkaar
   staat en daar lucht geeft, wordt hier een stapel die je eerst
   wegscrollt voordat je ziet waar het over gaat.

   Gemeten op een iPhone-simulator, niet gegokt.
   ============================================================ */
@media (max-width:680px){

  /* --- de balk bovenaan ---
     Stond met drie regels onder elkaar: adres, "Bestellen en afhalen", en
     de openingsstatus. Samen ruim honderd pixels voordat het logo in beeld
     kwam. Het adres staat in de voettekst en op de contactpagina; wat een
     bezoeker hier en nu moet weten is of je open bent. De rest gaat weg. */
  .topbar .wrap{gap:.5rem;padding:.45rem 20px}
  /* Alleen de DIRECTE kinderen verbergen. Schreef ik hier "span", dan ging ook
     het bolletje binnen de statusmelding weg en bleef de balk leeg achter. */
  .topbar .wrap > span:not(#topStatus),.topbar .wrap > a{display:none}
  .topbar #topStatus{font-size:.8rem}

  /* --- logo ---
     Het woordmerk is een afbeelding; op 18 pixels hoog werd de ondertitel
     onleesbaar. Hier tonen we de naam als tekst, naast het embleem in plaats
     van eronder. Dat is korter, blijft scherp, en laat ruimte over voor het
     menuknopje. */
  /* ALLEEN het kleine logo in de kop. In de voettekst, op het onderhoudsscherm
     en in het blok "Over Alhambra" staat hetzelfde merkblok groter en op een
     BORDEAUX ondergrond; daar is het plaatje prima leesbaar en zou de tekst
     bordeauxrood op bordeauxrood worden, naast het embleem in plaats van
     eronder. Vandaar de uitzondering op middel en groot. */
  .merkblok:not(.middel):not(.groot){flex-direction:row;align-items:center;gap:.55rem;line-height:1}
  .merkblok:not(.middel):not(.groot) .woordbeeld{display:none}
  .merkblok:not(.middel):not(.groot) .embleem{height:34px}
  /* min-width:0 en overflow: zonder die twee kan een flex-onderdeel niet onder
     zijn eigen inhoud krimpen, en duwt de merknaam de hele pagina open. Precies
     dezelfde fout als bij de categorierij op de menupagina. */
  .merk{min-width:0;overflow:hidden}
  .merkblok{min-width:0}
  .merkblok:not(.middel):not(.groot) .woordtekst{display:flex;flex-direction:column;gap:.1rem;text-align:left;min-width:0}
  .merkblok .woordtekst b,.merkblok .woordtekst small{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .merkblok .woordtekst b{
    font-family:var(--serif);font-size:1.12rem;font-weight:600;
    color:var(--bordeaux);line-height:1;letter-spacing:.01em;
  }
  .merkblok .woordtekst small{
    font-size:.53rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--goud-tekst);font-weight:700;line-height:1.1;
  }
  header.site .wrap{gap:.8rem;padding:.5rem 20px}

  /* Een raster- of flexonderdeel krijgt standaard min-width:auto en kan dus
     NIET krimpen onder de breedte van zijn eigen inhoud. Dat is in dit
     bestand drie keer de oorzaak van een te brede pagina geweest: de
     categorierij, de merknaam en de herokolom. Daarom hier in een keer voor
     alle tekstkolommen die op een telefoon moeten meebuigen. */
  .hero .wrap > *,.overblok > *,.bestel > *,.afreken > *,
  .raster > *,.contactraster > *,.contactkolom > *,
  .keuzeblok > *,.rij > *,.accountraster > *,.tweekolom > *,
  footer.site .raster > *{min-width:0}

  /* --- hero ---
     Vijfenhalve centimeter lucht boven de kop is mooi op een laptop en
     verspilling op een telefoon. De kop krijgt ook wat minder gewicht,
     anders breekt "nacht" als los woord af op een eigen regel. */
  .hero{padding:2.4rem 0 2.6rem}
  .hero h1{font-size:clamp(1.75rem,7.5vw,2.4rem);line-height:1.12;text-wrap:balance}
  .hero .lead{font-size:1rem;line-height:1.55}
  /* De openingsstatus staat al in de balk bovenaan; twee keer hetzelfde
     bericht binnen een half scherm leest als een storing. */
  .hero #heroStatus{display:none}

  /* Knoppen onder elkaar en even breed. Twee knoppen van verschillende
     lengte naast elkaar oogt rommelig en is lastiger te raken. */
  .acties{display:flex;flex-direction:column;gap:.7rem;align-items:stretch}
  .acties .btn{width:100%;justify-content:center}

  /* Acht uitgelichte gerechten onder elkaar is ruim duizend pixels scrollen.
     Met een lagere ondergrens passen er twee naast elkaar en is het de helft. */
  .tegels{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
  .tegel{padding:.9rem;min-height:98px}
  .tegel b{font-size:1.02rem}
  .tegel small{font-size:.78rem}

  /* --- koppen en secties --- */
  section{padding:2.4rem 0}
  h2{font-size:clamp(1.4rem,6vw,1.9rem);text-wrap:balance}
  .kop p{font-size:.95rem}

  /* De twee dagdeelkaarten pasten net niet naast elkaar (180px per stuk op
     350px ruimte) en vielen daardoor onder elkaar: ruim tachtig pixels extra
     voordat de kaart begint. Iets smaller en ze staan naast elkaar. */
  .dagdeelbalk{gap:.5rem;margin:1rem 0 .2rem}
  .dagdeelknop{min-width:0;flex:1 1 0;padding:.6rem .8rem}
  .dagdeelknop b{font-size:1rem}
  .dagdeelknop small{font-size:.78rem}

  /* --- de kaart ---
     De rij categorieknoppen scrolt zijwaarts, maar niets liet dat zien.
     Een zachte verloop aan de rechterrand maakt duidelijk dat er meer is. */
  .zijkolom{position:relative}
  .zijkolom::after{
    content:"";position:absolute;top:0;bottom:0;right:0;width:28px;pointer-events:none;
    background:linear-gradient(90deg, rgba(251,246,240,0), var(--creme));
  }
  .categorielijst button{padding:.5rem 1rem;font-size:.92rem}

  /* Gerechtkaartjes compacter, maar de plusknop juist groter: dat is de knop
     die het vaakst wordt aangetikt en 32 pixels is aan de krappe kant. */
  .gerechten{gap:.6rem}
  .gerecht{padding:.85rem .9rem;gap:.7rem}
  .gerecht .plus{width:40px;height:40px;font-size:1.35rem}
  .gerecht b{font-size:1rem}

  /* Plus en min in de winkelmand: van 24 naar 40 pixels. Onder de 44 die
     Apple aanhoudt kwam je er met een duim nauwelijks op. */
  .regel .aantal{gap:.15rem;padding:.15rem}
  .regel .aantal button{width:40px;height:40px;font-size:1.15rem}
  .modaal footer .aantal button{width:40px;height:40px}
  .sluit{width:40px;height:40px}

  /* De winkelmand blijft onder de kaart staan. Hem bovenaan zetten leek
     handig, maar een LEGE mand duwt dan eerst zeventig gerechten weg. De
     knop "Bestellen" in de kop springt er met een tik naartoe, en die toont
     ook het aantal. */
  .bestel{gap:1.2rem;padding:1.2rem 0 3rem}

  /* De openingsstatus staat al in de balk bovenaan en nog een keer in het
     gekleurde kader eronder. Drie keer hetzelfde bericht binnen een half
     scherm is te veel; de tussenregel kan weg. */
  #menuStatus{display:none}

  /* --- formulieren ---
     16 pixels is geen smaak maar een regel: onder die grootte zoomt iOS
     vanzelf in zodra je een veld aantikt, en dan staat de pagina scheef. */
  input,select,textarea{font-size:16px}
  .veld label{font-size:.9rem}
  fieldset{padding:1.1rem 1rem}

  /* --- vensters ---
     Een venster dat als een blok in het midden hangt werkt op een telefoon
     slechter dan een blad dat van onderen opkomt: dichter bij je duim. */
  .overlay{align-items:flex-end;padding:0}
  .modaal{max-height:92vh;border-radius:18px 18px 0 0;width:100%}
  .modaal footer{padding:1rem 1.1rem calc(1rem + env(safe-area-inset-bottom))}

  /* --- lange tekst ---
     Een mailadres of gerechtnaam zonder spaties mag de pagina niet oprekken. */
  .gerecht b,.regel .naam,.mand b,td,dd{overflow-wrap:anywhere}

  /* Openingstijden: dag en tijden stonden naast elkaar met een tijdblok dat
     niet mocht afbreken. Op een smal scherm past dat niet meer, dus zetten we
     de tijden onder de dagnaam. */
  .tijden li{grid-template-columns:1fr;gap:.1rem}
  .tijden .tijd{align-items:flex-start}
  .tijden .blok{gap:.4rem}

  /* --- voettekst --- */
  footer.site .raster{gap:1.4rem}
}

/* Heel smalle telefoons (iPhone SE en oudere Androids). Hier is 20 pixels
   marge aan weerszijden te veel van het goede. */
@media (max-width:360px){
  .wrap{padding:0 14px}
  .zijkolom{margin:0 -14px;padding-inline:14px}
  .hero h1{font-size:1.6rem}
  .merkblok .woordtekst b{font-size:1rem}
  .merkblok .woordtekst small{font-size:.5rem;letter-spacing:.1em}
}