/* Shared editorial restaurant layer — keeps each restaurant's own accent and imagery */
body{background:#030d13}
header{position:absolute;inset:0 0 auto;z-index:30;width:100%;background:linear-gradient(180deg,rgba(2,8,12,.88),rgba(2,8,12,.2),transparent);border-bottom:0}
.hero{min-height:100svh;isolation:isolate}
.hero-bg{filter:brightness(1) saturate(.92);transform:scale(1.015);animation:restaurantHeroReveal 1.2s ease-out both}
.hero-shade{background:linear-gradient(90deg,rgba(2,8,12,.96) 0%,rgba(2,8,12,.72) 38%,rgba(2,8,12,.12) 72%),linear-gradient(180deg,rgba(2,8,12,.18),transparent 46%,rgba(2,8,12,.74))}
.hero-inner{padding-top:clamp(128px,18vh,210px);padding-bottom:clamp(72px,12vh,140px)}
.eyebrow{font-size:.75rem;letter-spacing:.22em}
h1{max-width:880px;font-size:clamp(4.5rem,8.2vw,8.5rem);line-height:.79;letter-spacing:-.055em;text-wrap:balance}
.hero p{max-width:570px;margin-top:1.7rem;font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.65;color:rgba(247,244,237,.84)}
.hero .actions{margin-top:2rem;align-items:center}
.hero .btn{min-height:54px;padding:0 1.35rem;border-radius:2px;font-size:.72rem;letter-spacing:.1em;backdrop-filter:blur(12px)}
.hero .btn.primary{min-width:210px;box-shadow:0 14px 38px color-mix(in srgb,var(--accent) 24%,transparent)}
.hero .btn:not(.primary){border-color:rgba(255,255,255,.3);background:rgba(3,13,19,.28)}
.story,.visit{position:relative}
.story-grid{align-items:center}
.story p,.menu-head p,.visit p{font-size:1rem;line-height:1.8}
.story small,.menu-kicker,.visit small{font-size:.75rem}
.tags span{font-size:.7rem;padding:.55rem .75rem}
.collage,.visual{border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.38)}
.menu-section{background:linear-gradient(180deg,#071821,#030d13)}
.menu-card,.notice,.visit-card{border-radius:3px}
.btn{font-size:.72rem}
.visit-card span{font-size:.9rem;line-height:1.65}
@keyframes restaurantHeroReveal{from{opacity:.72;transform:scale(1.055)}to{opacity:1;transform:scale(1.015)}}
@media(max-width:700px){
 header{position:absolute;background:linear-gradient(180deg,rgba(2,8,12,.9),transparent)}
 .hero{min-height:100svh;align-items:flex-end}
 .hero-inner{padding:118px 0 calc(96px + env(safe-area-inset-bottom))}
 h1{font-size:clamp(3.7rem,17vw,5.4rem);line-height:.82}
 .hero p{font-size:1rem;max-width:92%}
 .hero .actions{display:grid;grid-template-columns:1fr;width:100%;max-width:420px}
 .hero .btn{width:100%;justify-content:center;min-height:56px}
 .story p,.menu-head p,.visit p{font-size:1rem}
 .collage,.visual{border-radius:2px}
}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none}}

/* Editorial image stage: one real visual beat after the hero. */
.editorial-media{position:relative;margin:0;isolation:isolate;background:#06131b;overflow:hidden}
.editorial-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.88) contrast(1.04);transform:scale(1.002);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease}
.editorial-media:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 52%,rgba(2,10,15,.68) 100%)}
.editorial-media figcaption{position:absolute;z-index:2;left:22px;right:22px;bottom:18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.28);color:#f7f4ed;font:800 10px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.12em;text-shadow:0 2px 16px rgba(0,0,0,.8)}
@media(hover:hover) and (pointer:fine){.editorial-media:hover img{transform:scale(1.025);filter:saturate(.98) contrast(1.03)}}
@media(max-width:700px){.editorial-media{height:auto;aspect-ratio:16/10}.editorial-media figcaption{left:16px;right:16px;bottom:14px;font-size:9px}.editorial-media img{object-position:center}}
@media(prefers-reduced-motion:reduce){.editorial-media img{transition:none;transform:none}.editorial-media:hover img{transform:none}}

/* Unified menu and below-the-fold performance layer */
.story,.restaurant-originals,.menu-section,.visit{content-visibility:auto;contain-intrinsic-size:1px 760px}
.menu-section .menu-head{position:relative}
.menu-section .menu-head:before{content:"";position:absolute;left:0;top:-24px;width:72px;height:1px;background:var(--accent)}
.menu-card{border-color:color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:0 34px 90px rgba(0,0,0,.34)}
.menu-bar{min-height:52px;align-items:center;padding-inline:1.25rem}
.menu-bar strong,.menu-bar span{font-size:.75rem;letter-spacing:.1em}
.menu-actions .btn.primary{min-width:220px}
.visit-card{border-color:color-mix(in srgb,var(--accent) 24%,transparent)}
@media(max-width:700px){
 .story,.restaurant-originals,.menu-section,.visit{contain-intrinsic-size:1px 520px}
 .menu-section .menu-head:before{top:-18px;width:54px}
 .menu-card{display:none}
 .menu-actions{display:grid;grid-template-columns:1fr;width:100%}
 .menu-actions .btn{width:100%;min-height:56px;justify-content:center}
}

/* Version-2 originals: compact editorial triptych for the restaurants whose photo sets were explicitly approved. */
.restaurant-originals{padding:clamp(48px,6vw,88px) 0;border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}
.originals-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:22px}
.originals-head small{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.17em}
.originals-head span{max-width:430px;color:var(--muted);font-size:12px;line-height:1.55;text-align:right}
.originals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px)}
.original-shot{position:relative;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:3px;background:#071720;aspect-ratio:1.28/1}
.original-shot img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.original-shot figcaption{position:absolute;right:12px;bottom:10px;color:#fff;font:700 9px/1 Arial,sans-serif;letter-spacing:.12em;text-shadow:0 1px 10px #000}
@media(hover:hover) and (pointer:fine){.original-shot:hover img{transform:scale(1.035)}}
@media(max-width:700px){.originals-head{display:block}.originals-head span{display:block;margin-top:8px;text-align:left}.originals-grid{grid-template-columns:1fr 1fr}.original-shot{aspect-ratio:1.18/1}.original-shot:first-child{grid-column:1/-1;aspect-ratio:1.55/1}}
@media(prefers-reduced-motion:reduce){.original-shot img{transition:none}}

/* Premium live opening status: visually distinct from the secondary CTA without overtaking booking. */
.hero .live-hours-wrap{min-width:220px}
.hero .live-hours-btn{min-height:54px!important;padding:0 1.2rem!important;border-radius:3px!important;border:1px solid color-mix(in srgb,var(--gold) 72%,transparent)!important;background:linear-gradient(135deg,rgba(177,116,8,.92),rgba(116,74,4,.86))!important;color:#fff!important;box-shadow:0 12px 34px rgba(222,182,92,.22),inset 0 0 0 1px rgba(255,255,255,.07)!important;font-size:.72rem!important;letter-spacing:.085em!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important}
.hero .live-hours-btn .live-dot{width:9px!important;height:9px!important;box-shadow:0 0 0 4px rgba(255,255,255,.10),0 0 18px currentColor!important}
.hero .live-hours-btn[data-state="open"]{background:linear-gradient(135deg,rgba(45,123,68,.96),rgba(29,88,48,.92))!important;border-color:rgba(119,196,139,.78)!important;box-shadow:0 12px 36px rgba(119,196,139,.20),inset 0 0 0 1px rgba(255,255,255,.08)!important}
.hero .live-hours-btn[data-state="soon"],.hero .live-hours-btn[data-state="pause"]{background:linear-gradient(135deg,rgba(177,116,8,.96),rgba(116,74,4,.92))!important;border-color:rgba(222,182,92,.82)!important}
.hero .live-hours-btn[data-state="closed"]{background:linear-gradient(135deg,rgba(55,63,68,.96),rgba(31,38,42,.94))!important;border-color:rgba(255,255,255,.18)!important;box-shadow:0 10px 28px rgba(0,0,0,.25)!important}
.hero .live-hours-panel{left:auto!important;right:0!important;width:min(340px,82vw)!important;padding:15px!important;border-radius:6px!important;border-color:rgba(222,182,92,.30)!important;background:rgba(3,12,17,.985)!important;box-shadow:0 22px 60px rgba(0,0,0,.55)!important}
.hero .live-hours-row{grid-template-columns:82px 1fr!important;padding:6px 4px!important}
.hero .live-hours-row.today{background:rgba(222,182,92,.09)!important;box-shadow:inset 2px 0 0 var(--gold)!important}
@media(hover:hover) and (pointer:fine){.hero .live-hours-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 42px rgba(222,182,92,.26),inset 0 0 0 1px rgba(255,255,255,.08)!important}}

/* Blue Ocean crop correction: remove the embedded lower thumbnail/rest strip from the approved source image. */
body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-bg{background-position:center 44%!important;transform:scale(1.085)!important}
body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .editorial-media img[src*="original-blue-ocean-v2"]{object-position:center 42%!important;transform:scale(1.095)!important}
@media(hover:hover) and (pointer:fine){body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .editorial-media:hover img[src*="original-blue-ocean-v2"]{transform:scale(1.12)!important}}
@media(max-width:700px){
 .hero .live-hours-wrap{min-width:0;width:100%}
 .hero .live-hours-btn{min-height:58px!important;width:100%!important}
 .hero .live-hours-panel{left:0!important;right:auto!important;width:100%!important}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-bg{background-position:center 40%!important;transform:scale(1.11)!important}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .editorial-media img[src*="original-blue-ocean-v2"]{object-position:center 39%!important;transform:scale(1.12)!important}
}
@media(prefers-reduced-motion:reduce){.hero .live-hours-btn{transition:none!important}}

/* Blue Ocean premium hero composition — mirrors the approved visual direction without baking UI into an image. */
@media(min-width:901px){
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) header{height:94px;padding-inline:max(34px,calc((100vw - 1420px)/2));background:linear-gradient(180deg,rgba(1,8,12,.82),rgba(1,8,12,.18),transparent)}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero{min-height:100svh;align-items:flex-end}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-bg{filter:brightness(1) saturate(1.03) contrast(1.03)!important;background-position:center 37%!important;transform:scale(1.12)!important}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-shade{background:linear-gradient(90deg,rgba(1,8,12,.96) 0%,rgba(1,8,12,.74) 28%,rgba(1,8,12,.28) 52%,rgba(1,8,12,.06) 76%),linear-gradient(180deg,rgba(2,8,12,.08) 32%,rgba(2,8,12,.20) 63%,rgba(2,8,12,.86) 100%)}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-inner{width:min(1420px,92vw);padding-top:150px;padding-bottom:clamp(68px,8vh,104px)}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .eyebrow{font-size:.82rem;letter-spacing:.24em}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) h1{max-width:760px;margin-top:20px;font-size:clamp(6.5rem,9vw,9.2rem);line-height:.76;letter-spacing:-.06em}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero p{max-width:560px;margin-top:2.1rem;font-size:1.18rem;line-height:1.6}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .actions{display:grid;grid-template-columns:minmax(235px,1.04fr) minmax(235px,1.08fr) minmax(285px,1.2fr);gap:14px;width:min(980px,100%);margin-top:2.35rem;align-items:stretch}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .btn{min-height:76px!important;width:100%;justify-content:center;padding:0 1.5rem;border-radius:4px;font-size:.86rem;letter-spacing:.09em}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .btn.primary{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent));box-shadow:0 18px 48px color-mix(in srgb,var(--accent) 28%,transparent)}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .btn:not(.primary){border-color:rgba(222,182,92,.62);background:rgba(3,11,16,.56);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .live-hours-wrap{min-width:0;width:100%}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .live-hours-btn{min-height:76px!important;width:100%;justify-content:flex-start!important;padding:0 1.55rem!important;border-radius:4px!important;font-size:.92rem!important;line-height:1.35!important;white-space:normal!important;text-align:left!important;box-shadow:0 0 0 1px rgba(241,203,115,.26),0 18px 52px rgba(222,182,92,.30),inset 0 0 30px rgba(255,220,125,.08)!important}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .live-hours-btn[data-state="open"]{background:linear-gradient(135deg,rgba(167,105,2,.98),rgba(116,72,1,.96))!important;border-color:#f1cb73!important;box-shadow:0 0 0 1px rgba(241,203,115,.38),0 18px 54px rgba(222,182,92,.34),inset 0 0 34px rgba(255,226,143,.10)!important}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .live-hours-btn .live-dot{flex:0 0 10px;width:10px!important;height:10px!important}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .live-hours-panel{top:calc(100% + 12px)!important;width:360px!important}
}
@media(max-width:900px){
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-bg{filter:brightness(1) saturate(1.02)!important;background-position:center 36%!important;transform:scale(1.16)!important}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-shade{background:linear-gradient(180deg,rgba(2,8,12,.20),rgba(2,8,12,.36) 42%,rgba(2,8,12,.94) 100%),linear-gradient(90deg,rgba(2,8,12,.78),transparent 70%)}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-inner{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) h1{font-size:clamp(4rem,17vw,6.2rem);line-height:.78}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .actions{gap:8px;max-width:460px}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .btn,body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .live-hours-btn{min-height:60px!important}
}

/* Blue Ocean trust strip and explicit opening-hours affordance — approved copy from visual review. */
@media(min-width:901px){
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero-inner{padding-bottom:clamp(138px,15vh,176px)}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero:after{content:"Frischer Fisch   ·   Direkt von der Küste   ·   Nachhaltige Qualität   ·   Mit Liebe zubereitet";position:absolute;z-index:5;left:0;right:0;bottom:0;min-height:72px;display:flex;align-items:center;justify-content:center;padding:0 32px;border-top:1px solid rgba(95,158,178,.28);background:rgba(2,11,16,.90);color:#e7eef1;font:600 15px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.02em;word-spacing:.18em;backdrop-filter:blur(14px);text-align:center}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .live-hours-wrap:after{content:"←  Öffnungszeiten anzeigen";position:absolute;left:calc(100% + 18px);top:50%;transform:translateY(-50%);width:190px;color:rgba(247,244,237,.88);font:500 13px/1.3 Georgia,serif;font-style:italic;letter-spacing:.02em;text-align:left;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.8)}
}
@media(max-width:900px){
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero{padding-bottom:54px}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero:after{content:"Frischer Fisch · Direkt von der Küste · Nachhaltige Qualität · Mit Liebe zubereitet";position:absolute;z-index:5;left:0;right:0;bottom:0;min-height:54px;display:flex;align-items:center;padding:8px 18px;border-top:1px solid rgba(95,158,178,.24);background:rgba(2,11,16,.93);color:#dce6ea;font:700 8px/1.45 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;justify-content:center}
 body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero .live-hours-wrap:after{content:"Öffnungszeiten anzeigen";display:block;margin-top:6px;color:rgba(247,244,237,.70);font:600 9px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-align:center;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){body:has(.editorial-media img[src*="original-blue-ocean-v2"]) .hero:after{backdrop-filter:none}}

/* Living finish for all other restaurant detail pages; Blue Ocean stays frozen as approved. */
body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .story{isolation:isolate;overflow:clip}
body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .story:before{content:"";position:absolute;left:max(4vw,24px);right:max(4vw,24px);top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 30%,transparent),transparent);opacity:.58;pointer-events:none}
body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .story-grid{position:relative;z-index:1}
body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .editorial-media img[src*="original-"][src*="-v2"]{object-position:center 42%!important;transform:scale(1.055)!important;transform-origin:center 36%;filter:saturate(.90) contrast(1.045)}
body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .visit-card{background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.012));box-shadow:0 24px 70px rgba(0,0,0,.18)}
body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .tags span{transition:border-color .18s ease,background-color .18s ease,color .18s ease}
@media(hover:hover) and (pointer:fine){
 body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .editorial-media:hover img[src*="original-"][src*="-v2"]{transform:scale(1.075)!important;filter:saturate(.98) contrast(1.035)}
 body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .tags span:hover{border-color:color-mix(in srgb,var(--accent) 62%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);color:#fff}
}
@media(max-width:700px){
 body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .story:before{left:12px;right:12px}
 body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .editorial-media img[src*="original-"][src*="-v2"]{object-position:center 40%!important;transform:scale(1.07)!important;transform-origin:center 34%}
}
@media(prefers-reduced-motion:reduce){
 body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .editorial-media img[src*="original-"][src*="-v2"]{transition:none!important}
 body:not(:has(.editorial-media img[src*="original-blue-ocean-v2"])) .editorial-media:hover img[src*="original-"][src*="-v2"]{transform:scale(1.055)!important}
}

