/* IMAKI Sushi & Ramen — Neo-Tokyo Shared Styles (Unterseiten) */
:root{
  --black:#0a0a0a;
  --white:#f4f2ee;
  --red:#d5202e;
  --red-deep:#a8141f;
  --grey:#8d8a84;
  --line:rgba(244,242,238,.15);
  --display:'Anton',sans-serif;
  --body:'Noto Sans JP',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--black);color:var(--white);font-family:var(--body);font-weight:300;overflow-x:hidden}
::selection{background:var(--red);color:var(--white)}

/* NAV */
nav{position:fixed;inset:0 0 auto;z-index:70;display:flex;justify-content:space-between;align-items:stretch;
  border-bottom:1px solid var(--line);background:rgba(10,10,10,.9);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--white);padding:1rem 1.8rem;border-right:1px solid var(--line)}
.brand img{height:40px}
.brand b{font-family:var(--display);font-size:1.15rem;letter-spacing:.06em;font-weight:400}
.navlinks{display:flex;align-items:stretch}
.navlinks a,.langbtn{display:flex;align-items:center;padding:0 1.6rem;color:var(--white);text-decoration:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;border-left:1px solid var(--line);
  transition:background .25s,color .25s;background:transparent;border-top:none;border-bottom:none;border-right:none;cursor:pointer}
.navlinks a:hover,.langbtn:hover{background:rgba(244,242,238,.07)}
.navlinks a.act{color:var(--red)}
.navlinks a.res{background:var(--red);font-weight:500;color:var(--white)}
.navlinks a.res:hover{background:var(--red-deep)}
.langbtn{flex:none;white-space:nowrap}
.langbtn span{color:var(--grey)}
.langbtn b{color:var(--white);font-weight:500}
/* Bereich bis 1040px war zu knapp bemessen — zwischen 1041 und ~1059px (voller
   Padding, aber noch nicht genug Platz) brach die Nav auf allen Seiten in eine
   zweite Zeile um (2026-07-30 live gefunden, mit Iframe-Breitentests vermessen). */
@media(min-width:961px) and (max-width:1060px){.navlinks a,.langbtn{padding-left:1.1rem;padding-right:1.1rem}}

/* PAGE HERO (Unterseiten) */
.phero{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;padding-top:70px}
.phero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phero-bg img{width:100%;height:100%;object-fit:cover;opacity:.4;animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1%)}}
.phero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(10,10,10,.35),rgba(10,10,10,.85) 80%)}
.phero-inner{padding:0 2rem 0}
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.crumb a{color:var(--grey);text-decoration:none}
.crumb a:hover{color:var(--white)}
.phero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.8rem,8vw,7.5rem);line-height:.92;letter-spacing:.01em}
.phero h1 .red{color:var(--red)}
.phero h1 .stroke{color:transparent;-webkit-text-stroke:2px var(--white)}
.phero-meta{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid rgba(244,242,238,.2);margin-top:2.8rem}
.hm-cell{padding:1.3rem 2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--grey);
  border-right:1px solid rgba(244,242,238,.2);text-transform:uppercase;display:flex;align-items:center;gap:1rem}
.hm-cell:last-child{border-right:none}
.hm-cell b{color:var(--white);font-weight:500}
.dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--red);animation:blink 1.8s infinite}
.dot.open{background:#3ecf6a}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* SECTIONS */
section{padding:7rem 2rem;position:relative}
.wrap{max-width:1400px;margin:0 auto}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.tag::before{content:'';width:2.2rem;height:2px;background:var(--red)}
h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:.95}
h2 .red{color:var(--red)}
.lede{color:var(--grey);line-height:2;max-width:36em;margin-top:1.8rem;font-size:1rem}
.btn3{display:inline-flex;align-items:center;gap:.9rem;margin-top:2.6rem;background:var(--red);color:var(--white);border:none;cursor:pointer;
  padding:1.1rem 2.2rem;text-decoration:none;font-family:var(--mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;transition:background .3s,gap .3s}
.btn3:hover{background:var(--red-deep);gap:1.3rem}
.btn3.dark{background:var(--white);color:var(--black)}
.btn3.dark:hover{background:var(--red);color:var(--white)}
.btn3.blk{background:var(--black);color:var(--white)}
.btn3.blk:hover{background:var(--red)}
.btn3.ghost{background:transparent;border:1px solid var(--line);color:var(--white)}
.btn3.ghost:hover{border-color:var(--red);background:var(--red)}

/* BADGES (Speisen-Kennzeichnung) */
.badge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none}
.badge.v{background:#e7f3e2}.badge.s{background:#fdeaea}
.badge svg{display:block}
.sigbadge{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;background:var(--black);color:var(--white);padding:.2rem .55rem;text-transform:uppercase}

/* FOOTER */
footer{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1.6rem 2.2rem;align-items:center;padding:2.2rem 2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
footer>span{margin-right:auto}
footer a{color:var(--grey);text-decoration:none}
footer a:hover{color:var(--red)}

/* STICKY MOBILE BAR */
.mbar{position:fixed;bottom:0;left:0;right:0;z-index:80;display:none;grid-template-columns:1fr 1fr 1.2fr;
  background:rgba(10,10,10,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.mbar a{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.8rem 0 calc(.8rem + env(safe-area-inset-bottom));
  color:var(--white);text-decoration:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;border-right:1px solid var(--line)}
.mbar a:last-child{border-right:none;background:var(--red);font-weight:500}
.mbar svg{display:block}

/* REVEAL */
.rv{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}

@media(max-width:960px){
  section{padding:4.5rem 1.2rem}
  .phero{min-height:52vh;padding-top:104px}
  .phero-inner{padding-bottom:1.2rem}
  .phero-meta{grid-template-columns:1fr}
  .hm-cell{border-right:none;border-bottom:1px solid rgba(244,242,238,.15)}
  footer{flex-direction:column;text-align:center;padding-bottom:6.5rem}
  .mbar{display:grid}
}

/* MOBILE BURGER-MENÜ */
.burger{display:none;background:transparent;border:none;border-left:1px solid var(--line);padding:0 1.3rem;cursor:pointer;align-items:center}
@media(max-width:960px){
  .burger{display:flex}
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:rgba(10,10,10,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .35s cubic-bezier(.16,1,.3,1);z-index:-1}
  nav.open .navlinks{transform:none}
  .navlinks a,.navlinks .langbtn{display:flex !important;border-left:none;border-bottom:1px solid var(--line);
    padding:1.05rem 1.4rem;font-size:.8rem}
  .navlinks a.res{justify-content:center;border-bottom:none}
}

/* Footer Social-Icons */
.fsoc{display:flex;gap:.7rem;align-items:center}
.fsoc a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
  border-radius:50%;color:var(--grey);transition:.3s}
.fsoc a:hover{color:var(--white);border-color:var(--red);background:var(--red)}

/* BARRIEREFREIHEIT (WCAG 2.1 AA) */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:#d5202e;color:#f4f2ee;
  padding:1rem 1.6rem;font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.1em}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid #ff4f5a;outline-offset:2px}
.tag{color:#ff4f5a}
.crumb{color:#ff4f5a}
p a:not(.btn3):not(.cta):not(.skip){text-decoration:underline}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1 !important;transform:none !important}
}

/* TABLET (601–960px) */
@media (min-width:601px) and (max-width:960px){
  section{padding:5.5rem 2.4rem}
  .phero-meta{grid-template-columns:repeat(3,1fr)}
  .hm-cell{border-bottom:none;border-right:1px solid rgba(244,242,238,.2)}
  .hm-cell:last-child{border-right:none}
}
@supports (height:100svh){.phero{min-height:62svh}}

/* iOS-HÄRTUNG: Nav garantiert fixiert + horizontal verriegelt */
nav{position:fixed;top:0;left:0;right:0;-webkit-backdrop-filter:blur(12px)}
.mbar{-webkit-backdrop-filter:blur(14px)}
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body{width:100%;max-width:100vw}
@media(max-width:960px){.navlinks{-webkit-backdrop-filter:blur(14px)}}

/* STRUKTURIERTER FOOTER */
footer{display:block;padding:0;border-top:1px solid var(--line)}
.ft-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;padding:4rem 2rem 3rem}
.ft-logo{font-family:var(--display);font-size:1.6rem;letter-spacing:.05em;color:var(--white)}
.ft-logo i{font-style:normal;color:var(--red)}
.ft-brand p{color:var(--grey);line-height:2;margin:1rem 0 1.4rem;font-size:.9rem;letter-spacing:.02em;text-transform:none;font-family:var(--body)}
.ft-brand p a{color:var(--grey);text-decoration:none}
.ft-hours b{font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:#ff4f5a;font-weight:500}
.ft-brand p a:hover{color:var(--white)}
.ft-col{display:flex;flex-direction:column;gap:.7rem}
.ft-col b{font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:#ff4f5a;margin-bottom:.4rem;font-weight:500}
.ft-col a{color:var(--grey);text-decoration:none;font-size:.92rem;letter-spacing:.02em;text-transform:none;font-family:var(--body);width:fit-content}
.ft-col a:hover{color:var(--white)}
.ft-bottom{border-top:1px solid var(--line);padding:1.4rem 2rem;text-align:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
@media(max-width:960px){
  .ft-grid{grid-template-columns:1fr;gap:2.4rem;text-align:center}
  .ft-col{align-items:center}
  .ft-col a{width:auto}
  .fsoc{justify-content:center}
  footer{padding-bottom:5.4rem}
}