/* ===========================================================================
   das Schnitzelhaus — the shared shell (Direction 4 · Stammtisch).
   Tokens, type, buttons, the sticky dark header, the footer, the mobile call
   bar. Linked AFTER each page's own <style>, so it wins on shared selectors.
   Palette is sampled from the restaurant's own logo: red #E74036, amber
   #F9A72A. Chosen by Patrick, Jata and Konrad, 2026-10-08 to 10-22.
   =========================================================================== */
:root{
  --red:#E74036;--red-deep:#C3301F;--amber:#F9A72A;--cream:#E9E7BF;
  --paper:#FAF9F7;--paper-2:#F2F0EC;--ink:#171412;--ink-2:#221E1B;--mute:#6F675F;
  --line:rgba(23,20,18,.12);
  /* names the older pages use, mapped onto the same palette */
  --accent:#E74036;--paper2:#F2F0EC;--dim:#6F675F;--rule:rgba(23,20,18,.14);--gold:#F9A72A;
  --header-h:0px;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Barlow',-apple-system,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-top:0}
section,[id]{scroll-margin-top:92px}
h1,h2,h3{font-family:'Oswald',Impact,'Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em;line-height:.95}
.d{font-family:'Oswald',Impact,'Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em;line-height:.92}
.acc{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;
  text-transform:none;letter-spacing:-.01em}
.eyebrow,.meta{font-family:'Barlow',sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red)}
.rule{width:132px;height:4px;background:var(--red);margin:22px 0 0}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:700px){.wrap{padding:0 20px}body{font-size:16px}}
.price{font-family:'Oswald',Impact,sans-serif;font-weight:600;letter-spacing:0}

/* ---------- buttons (both naming schemes) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Barlow',sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:13px 22px;text-decoration:none;border:1.5px solid transparent;transition:.16s;cursor:pointer;
  border-radius:0;line-height:1.1}
.btn-red,.btn.solid{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover,.btn.solid:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn-ghost{border-color:rgba(250,249,247,.42);color:var(--paper);background:transparent}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-out,.btn.ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-out:hover,.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- header ---------- */
header.sh{position:sticky;top:0;left:auto;right:auto;z-index:60;height:auto;padding:0;display:block;
  background:rgba(23,20,18,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
header.sh .nav{display:flex;align-items:center;gap:34px;height:76px;margin:0 auto}
header.sh .brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
header.sh .brand img{width:56px;height:auto;display:block}
header.sh .brand span{display:flex;flex-direction:column;gap:4px}
header.sh .brand b{font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper);line-height:1;white-space:nowrap}
header.sh .brand i{font-style:normal;align-self:flex-start;background:var(--red);color:#fff;font-size:9px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;padding:3px 7px;font-family:'Barlow',sans-serif}
header.sh ul{display:flex;gap:26px;list-style:none;margin:0 0 0 14px;padding:0}
header.sh ul a{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(250,249,247,.78);text-decoration:none;transition:color .15s;border:0;padding:0}
header.sh ul a:hover{color:var(--amber)}
header.sh .cta{margin-left:auto;display:flex;gap:10px}
/* the older pages carry a `header .nav a` rule; these outrank it for the buttons */
header.sh .nav a.btn{display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;padding:13px 22px;line-height:1.1;text-decoration:none;white-space:nowrap}
header.sh .nav a.btn-ghost{color:var(--paper);background:transparent;border:1.5px solid rgba(250,249,247,.42)}
header.sh .nav a.btn-ghost:hover{color:var(--amber);border-color:var(--amber)}
header.sh .nav a.btn-red{color:#fff;background:var(--red);border:1.5px solid var(--red)}
header.sh .nav a.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep)}
@media(max-width:980px){header.sh ul{display:none}}
@media(max-width:560px){header.sh .cta .btn:not(.btn-red){display:none}header.sh .brand b{font-size:15px}header.sh .brand i{font-size:8px}}

/* ---------- announcement ribbon (only when a promo is live) ---------- */
.ribbon{display:none;background:var(--ink);color:var(--amber);text-align:center;font-family:'Barlow',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.ribbon.live{display:block}
.ribbon b{color:var(--paper)}

/* ---------- footer ---------- */
footer.sf{background:var(--ink);color:rgba(250,249,247,.6);text-align:center;padding:56px 0 46px;font-size:14px;line-height:1.7}
footer.sf img{width:92px;margin:0 auto 20px;opacity:1}
footer.sf .fb{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);font-size:15px}
footer.sf p{font-size:14px;margin-top:11px}
footer.sf a{color:var(--amber);text-decoration:none}
footer.sf a:hover{color:var(--paper)}
footer.sf .fl{margin-top:18px;letter-spacing:.06em}
footer.sf .by{font-size:13px;margin-top:16px;color:rgba(250,249,247,.4)}

/* ---------- mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(23,20,18,.97);backdrop-filter:blur(10px)}
.callbar a{flex:1;text-align:center;font-family:'Barlow',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;padding:14px 6px;background:var(--red);color:#fff}
.callbar a+a{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
@media(max-width:640px){.callbar{display:flex}body{padding-bottom:66px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}