/* Oramea food – Deep Navy + Gold gemäss Brand Guidelines; food-Akzent (Terrakotta) nur als Kennung. Signatur: der «Bon». */
.food{--accent:var(--food)}
.f-hero{background:radial-gradient(110% 120% at 100% 0%,#24375E 0%,var(--night) 60%,var(--night-3) 100%);border:1px solid rgba(212,175,55,.25);color:#fff;border-radius:24px;padding:34px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;position:relative;overflow:hidden;margin-bottom:26px}
.f-hero::after{content:"";position:absolute;right:-70px;top:-80px;width:300px;height:300px;border-radius:50%;border:3px solid rgba(212,175,55,.55);box-shadow:0 0 0 26px rgba(212,175,55,.07)}
.f-hero h1{font-size:clamp(1.9rem,4.4vw,3.2rem);position:relative;z-index:1}
.f-hero p{color:#C9D1E0;max-width:520px;position:relative;z-index:1}
.zipform{display:flex;background:#fff;border-radius:999px;padding:5px;max-width:480px;position:relative;z-index:1;margin-top:18px}
.zipform input{flex:1;border:0;padding:10px 16px;border-radius:999px;min-width:0;color:var(--ink)}
.zipform input:focus{outline:none}
.zipform button{background:var(--gold-grad);color:var(--night);border:0;border-radius:999px;padding:10px 20px;font-weight:600;cursor:pointer}
.cuis{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px}
.cuis button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:500;white-space:nowrap;cursor:pointer}
.cuis button.on{background:var(--night);color:#fff;border-color:var(--night)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.rcard{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);text-decoration:none;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s}
.rcard:hover{transform:translateY(-3px)}
.rcard .cover{height:110px;background:var(--c,var(--food));display:grid;place-items:center;font-size:3.2rem;position:relative}
.rcard .cover .state{position:absolute;left:12px;top:12px}
.rcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.rcard h3{font-size:1.05rem}
.rcard .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-3)}
.rcard.closed{opacity:.6}
.cb-tag{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:var(--gold-ink);background:var(--gold-2);padding:3px 9px;border-radius:999px;align-self:flex-start}
/* Restaurantseite */
.r-head{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.r-head .ico{width:76px;height:76px;border-radius:20px;background:var(--c);display:grid;place-items:center;font-size:2.4rem;flex-shrink:0}
.r-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.catnav{display:flex;gap:6px;overflow-x:auto;position:sticky;top:62px;background:var(--chalk);padding:10px 0;z-index:5}
.catnav a{padding:7px 13px;border-radius:999px;background:#fff;text-decoration:none;font-weight:500;font-size:.88rem;white-space:nowrap;box-shadow:var(--shadow)}
.dish{display:grid;grid-template-columns:1fr auto;gap:12px;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent;text-align:left;width:100%}
.dish:hover{border-color:var(--food)}
.dish.out{opacity:.5;cursor:not-allowed}
.dish .price{font-family:var(--mono);font-weight:500}
.dish .add{width:34px;height:34px;border-radius:50%;background:var(--food);color:#fff;display:grid;place-items:center;font-weight:600;font-size:1.2rem;align-self:center}
.tags{display:flex;gap:4px;margin-top:4px}
.tags span{font-size:.7rem;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--ok-2);color:var(--ok)}
.tags span.scharf{background:var(--bad-2);color:var(--bad)}
/* Bon */
.bon{background:#fff;border-radius:6px;box-shadow:var(--shadow);position:sticky;top:80px;font-size:.92rem}
.bon::before,.bon::after{content:"";display:block;height:10px;background:radial-gradient(circle at 6px -2px,transparent 7px,#fff 7.5px) 0 0/12px 10px repeat-x}
.bon::before{transform:rotate(180deg);margin-top:-10px}
.bon::after{margin-bottom:-10px}
.bon-in{padding:4px 18px 16px}
.bon h3{font-family:var(--mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;text-align:center;border-bottom:1px dashed var(--line);padding-bottom:10px;margin-bottom:8px}
.bl{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:6px 0;align-items:start}
.bl .q{display:flex;align-items:center;gap:4px}
.bl .q button{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;line-height:1;font-weight:600}
.bl small{display:block;color:var(--ink-3);font-size:.78rem}
.bsum{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px;font-family:var(--mono)}
.bsum div{display:flex;justify-content:space-between;padding:2px 0}
.bsum .tot{font-weight:600;font-size:1.05rem;border-top:1px solid var(--ink);margin-top:6px;padding-top:6px}
.bcb{background:var(--gold-2);color:#8A5A00;border-radius:10px;padding:8px 10px;margin-top:10px;font-weight:700;font-size:.85rem}
.mode{display:flex;background:var(--chalk-2);border-radius:999px;padding:4px;margin:6px 0 12px}
.mode button{flex:1;border:0;background:transparent;padding:8px;border-radius:999px;font-weight:700;cursor:pointer}
.mode button.on{background:#fff;box-shadow:var(--shadow)}
/* Optionen-Dialog */
.opt-group{border:0;padding:0;margin:0 0 14px}
.opt-group legend{font-weight:600;margin-bottom:6px}
.opt{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;margin-bottom:6px;cursor:pointer}
.opt:has(input:checked){border-color:var(--gold);background:var(--gold-2)}
.opt input{margin-right:8px}
/* Mobile Warenkorb-Leiste */
.cartbar{display:none}
@media (max-width:900px){
  .r-layout{grid-template-columns:1fr} .bon-wrap{display:none} .f-hero{grid-template-columns:1fr}
  .cartbar{display:flex;position:fixed;left:12px;right:12px;bottom:72px;background:var(--food);color:#fff;border-radius:16px;padding:14px 18px;justify-content:space-between;align-items:center;font-weight:600;z-index:35;box-shadow:0 12px 30px -10px rgba(224,84,46,.6);text-decoration:none;border:0;font-size:1rem;cursor:pointer}
}
/* Tracking */
.track-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:20px 0}
.track-steps div{text-align:center;position:relative;padding-top:30px;font-size:.84rem;font-weight:700;color:var(--ink-3)}
.track-steps div::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--chalk-2);border:3px solid var(--chalk-2);z-index:1}
.track-steps div::after{content:"";position:absolute;top:15px;left:-50%;width:100%;height:4px;background:var(--chalk-2)}
.track-steps div:first-child::after{display:none}
.track-steps div.done{color:var(--ink)} .track-steps div.done::before{background:var(--food);border-color:var(--food)} .track-steps div.done::after{background:var(--food)}
.track-steps div.now::before{box-shadow:0 0 0 6px rgba(224,84,46,.2)}
.paysel{border:0;padding:0;margin:4px 0 14px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.paysel legend{font-weight:700;margin-bottom:6px;padding:0}
.payopt{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line,#D8DCE4);border-radius:12px;padding:10px 12px;cursor:pointer;position:relative}
.payopt input{position:absolute;opacity:0;pointer-events:none}
.payopt small{color:var(--muted,#5B6577);font-size:.8rem}
.payopt.on{border-color:var(--food);box-shadow:0 0 0 2px color-mix(in srgb,var(--food) 25%,transparent)}
.payopt:focus-within{outline:2px solid var(--food);outline-offset:2px}
/* Warenkorb läuft beim Scrollen mit (Desktop/Tablet): die Spalte selbst klebt, nicht nur der Bon */
.bon-wrap,#bonCheckout{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 92px);overflow:auto;overscroll-behavior:contain;padding:10px 4px 12px;scrollbar-width:thin}
.bon-wrap .bon,#bonCheckout .bon{position:static}
@media (max-width:900px){#bonCheckout{position:static;max-height:none;overflow:visible}}
/* Tisch / Vorbestellung / Reservation */
.svcban{display:flex;flex-direction:column;gap:2px;background:var(--night);color:#fff;border-radius:12px;padding:10px 12px;margin:6px 0 12px;border-left:4px solid var(--gold,#D4AF37)}
.svcban b{font-family:var(--display,Poppins),sans-serif;font-size:1.05rem}
.svcban span{font-size:.85rem;opacity:.9}
.linkbtn{background:none;border:0;color:var(--gold,#D4AF37);font-weight:700;padding:4px 0 0;text-align:left;cursor:pointer;font-size:.82rem;text-decoration:underline}
.resbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid var(--line,#E2E6EE);border-radius:14px;padding:12px 16px;margin:4px 0 16px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:210px;overflow:auto;padding:2px}
.slot{border:1.5px solid var(--line,#D8DCE4);background:#fff;border-radius:10px;padding:9px 0;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.slot.on{background:var(--night);color:#fff;border-color:var(--night)}
.slot:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.slot:focus-visible{outline:2px solid var(--food);outline-offset:2px}

.svctop{position:sticky;top:62px;z-index:6;margin:0 0 12px}
.svctop .svcban{margin:0;box-shadow:0 6px 18px rgba(27,42,74,.18)}
@media (min-width:901px){.svctop{position:static}}

/* Feedback */
.fb{max-width:640px;margin:0 auto}
.fbq{border:0;padding:0;margin:14px 0}
.fbq legend{font-weight:700;margin-bottom:8px;padding:0}
.stars{display:flex;gap:6px}
.stars button{background:#F5F7FA;border:1.5px solid #E1E5EC;border-radius:12px;color:#C9CED8;cursor:pointer;line-height:1;transition:transform .1s}
.stars.lg button{font-size:2.2rem;width:58px;height:58px}
.stars.sm button{font-size:1.15rem;width:36px;height:36px;border-radius:9px}
.stars button.on{color:#D4AF37;border-color:#D4AF37;background:#FBF5E3}
.stars button:active{transform:scale(.92)}
.stars button:focus-visible,.scale button:focus-visible,.nps button:focus-visible,.chips button:focus-visible{outline:2px solid var(--food);outline-offset:2px}
.fbsub{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:4px 0 14px}
.fbsub>div{display:flex;flex-direction:column;gap:6px}.fbsub span{font-size:.86rem;font-weight:600;color:var(--muted,#5B6577)}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.scale button{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid #E1E5EC;background:#fff;border-radius:12px;padding:10px 4px;cursor:pointer;font:inherit}
.scale button b{font-size:1.6rem;line-height:1}.scale button span{font-size:.74rem;color:var(--muted,#5B6577);text-align:center}
.scale button.on{border-color:var(--night);background:var(--night)}.scale button.on span{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1.5px solid #E1E5EC;background:#fff;border-radius:999px;padding:8px 12px;font:600 .86rem/1.2 inherit;cursor:pointer;color:var(--ink)}
.chips button.on{background:#FDECEC;border-color:#C2410C;color:#8A2B07}
.nps{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.nps button{border:1.5px solid #E1E5EC;background:#fff;border-radius:8px;padding:10px 0;font:700 .95rem inherit;cursor:pointer;color:var(--ink)}
.nps button.on{background:var(--night);border-color:var(--night);color:#fff}
.nps-l{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted,#5B6577);margin-top:4px}
.rstar{color:#8C6D12;font-weight:700;font-size:.85rem;white-space:nowrap}.rstar small{color:var(--muted,#5B6577);font-weight:500}
.rstar.big{font-size:1rem;text-decoration:none}
.rv{border-bottom:1px solid var(--line,#E2E6EE);padding:10px 0}
.rv-reply{background:#F5F7FA;border-left:3px solid #D4AF37;padding:8px 10px;border-radius:6px;font-size:.88rem}
@media (max-width:480px){.stars.lg button{width:50px;height:50px;font-size:1.9rem}.nps button{padding:9px 0;font-size:.82rem}}
.fbsub{grid-template-columns:1fr}
.fbsub>div{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.fbsub .stars{flex-wrap:nowrap}
@media (min-width:640px){.fbsub{grid-template-columns:repeat(3,1fr)}.fbsub>div{flex-direction:column;align-items:flex-start}}

.rcard .cover{background-size:cover;background-position:center}
.dish.hasimg{grid-template-columns:84px 1fr auto;align-items:center}
.dish .dimg{width:84px;height:84px;object-fit:cover;border-radius:10px;background:var(--chalk)}
@media (max-width:420px){.dish.hasimg{grid-template-columns:68px 1fr auto}.dish .dimg{width:68px;height:68px}}
.rhero{height:clamp(140px,26vw,240px);border-radius:18px;background-size:cover;background-position:center;margin-top:12px}
.closedban{display:flex;flex-direction:column;gap:4px;background:#FFF6E0;border:1px solid #E8C97A;border-radius:14px;padding:12px 16px;margin:10px 0}
.closedban b{color:#6B4E00}