/* Blue Ocean visual polish — scoped only to Blue Ocean. */

/* Make the restaurant itself the visual brand in the hero while preserving the shared Sierig navigation. */
@media(min-width:901px){
  header{grid-template-columns:330px 1fr 90px!important;padding-inline:clamp(54px,4.6vw,82px)!important}
  header>a:first-child{position:relative;display:flex!important;align-items:center;width:290px;height:72px;text-decoration:none!important}
  header>a:first-child img{opacity:0!important;width:1px!important;height:1px!important;position:absolute!important}
  header>a:first-child:before{content:"⚓  BLUE OCEAN\A     HEILIGENHAFEN";white-space:pre;color:#f4f5f4;font:700 16px/1.45 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-shadow:0 2px 18px rgba(0,0,0,.65)}
  header>a:first-child:after{content:"";position:absolute;left:37px;top:19px;width:125px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.65}
  header .claim{opacity:0!important;pointer-events:none!important}
  header .menu{justify-self:end!important}
  header .menu button{border-radius:4px!important;background:rgba(3,13,19,.34)!important;backdrop-filter:blur(8px)}

  .hero-inner{width:auto!important;margin:0!important;padding-left:clamp(62px,4.8vw,86px)!important;padding-right:clamp(50px,4vw,72px)!important;padding-bottom:180px!important}
  .eyebrow{font-size:.88rem!important;letter-spacing:.235em!important}
  h1{max-width:720px!important;margin-top:18px!important;font-size:clamp(6.7rem,9.2vw,9.7rem)!important;line-height:.75!important;letter-spacing:-.062em!important}
  .hero p{margin-top:2rem!important;font-size:1.22rem!important;max-width:590px!important}

  .hero .actions{grid-template-columns:minmax(250px,1.02fr) minmax(260px,1.06fr) minmax(330px,1.22fr)!important;gap:18px!important;width:min(1100px,calc(100vw - 330px))!important;margin-top:2.5rem!important;align-items:stretch!important}
  .hero .btn,.hero .live-hours-btn{border-radius:9px!important;min-height:82px!important}
  .hero .btn{font-size:.9rem!important}
  .hero .btn.primary{box-shadow:0 20px 55px color-mix(in srgb,var(--accent) 30%,transparent)!important}
  .hero .btn:not(.primary){background:rgba(2,10,15,.54)!important;border-color:rgba(222,182,92,.58)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 18px 50px rgba(0,0,0,.18)!important}
  .hero .live-hours-btn{padding-inline:1.75rem!important;font-size:1rem!important;box-shadow:0 0 0 1px rgba(241,203,115,.34),0 22px 62px rgba(222,182,92,.32),inset 0 0 34px rgba(255,226,143,.10)!important}
}

/* Blue Ocean has its own proof rail inside the hero. Keep the interactive hours layer above it. */
.hero-inner{z-index:12!important}
.hero .live-hours-wrap{position:relative!important;z-index:40!important}
.hero .live-hours-wrap:before,.hero .live-hours-wrap:after{content:none!important;display:none!important}
.hero .live-hours-panel{z-index:120!important;top:auto!important;bottom:calc(100% + 12px)!important;left:auto!important;right:0!important;width:min(390px,78vw)!important;max-height:min(52vh,430px)!important;overflow:auto!important;overscroll-behavior:contain!important;box-shadow:0 24px 70px rgba(0,0,0,.56)!important}

/* Continuous Blue Ocean quality rail: one shared surface, four quiet editorial markers. */
.hero:after{content:none!important;display:none!important}
.blue-proof-strip{position:absolute;z-index:4;left:clamp(52px,4.5vw,82px);right:clamp(52px,4.5vw,82px);bottom:24px;display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:0;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:linear-gradient(90deg,rgba(2,12,17,.64),rgba(4,19,26,.56) 48%,rgba(2,12,17,.64));backdrop-filter:blur(8px);box-shadow:0 14px 40px rgba(0,0,0,.16);overflow:hidden}
.blue-proof-item{position:relative;min-height:64px;display:flex;align-items:center;gap:10px;padding:0 18px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;color:rgba(237,244,246,.86)!important;transition:background-color .18s ease,color .18s ease}
.blue-proof-item:not(:last-child):after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent)}
.blue-proof-primary{background:linear-gradient(90deg,rgba(222,182,92,.035),transparent)!important}
.blue-proof-icon{width:24px!important;height:24px!important;flex:0 0 24px!important;display:grid;place-items:center;border:0!important;border-radius:0!important;background:transparent!important;color:rgba(145,184,196,.72)!important;font:600 13px/1 Georgia,serif!important}
.blue-proof-primary .blue-proof-icon{color:rgba(222,182,92,.82)!important}
.blue-proof-item strong{font:500 12px/1.3 Arial,Helvetica,sans-serif!important;letter-spacing:.018em!important;color:rgba(247,244,237,.84)!important}
.blue-proof-primary strong{font-weight:600!important;color:rgba(255,255,255,.94)!important}
@media(hover:hover) and (pointer:fine){.blue-proof-item:hover{transform:none!important;background:rgba(255,255,255,.025)!important;border:0!important;box-shadow:none!important}.blue-proof-primary:hover{background:linear-gradient(90deg,rgba(222,182,92,.055),rgba(255,255,255,.015))!important}}

@media(max-width:1100px) and (min-width:701px){
  .blue-proof-strip{left:28px;right:28px;grid-template-columns:1fr 1fr;bottom:20px}
  .blue-proof-item{min-height:58px}
  .blue-proof-item:nth-child(2):after{display:none}
  .blue-proof-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)!important}
  .hero-inner{padding-bottom:190px!important}
  .hero .live-hours-panel{width:min(360px,82vw)!important}
}

@media(max-width:900px){
  .hero .btn,.hero .live-hours-btn{border-radius:8px!important}
}

@media(max-width:700px){
  .hero{padding-bottom:144px!important}
  .hero .live-hours-panel{z-index:120!important;left:0!important;right:0!important;bottom:calc(100% + 8px)!important;width:100%!important;max-height:min(62vh,460px)!important}
  .hero .live-hours-btn{min-height:54px!important}
  .blue-proof-strip{z-index:3;left:12px;right:12px;bottom:10px;grid-template-columns:1fr 1fr;border-radius:9px}
  .blue-proof-item{min-height:56px;gap:7px;padding:7px 10px}
  .blue-proof-item:nth-child(2):after{display:none}
  .blue-proof-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)!important}
  .blue-proof-icon{width:20px!important;height:20px!important;flex-basis:20px!important;font-size:11px!important}
  .blue-proof-item strong,.blue-proof-primary strong{font-size:9px!important;line-height:1.25!important}
}

@media(prefers-reduced-motion:reduce){
  .blue-proof-item{transition:none!important}
  .blue-proof-item:hover{transform:none!important}
}

/* Visual-reference QA marker: this scoped layer is intentionally benchmarked against the approved Blue Ocean hero reference. */