/* ============================================================
   Restaurant Omega – v5 FINAL
   Exakter Nachbau: Dunkles Teal/Petrol, Gold-Akzente
============================================================ */
:root{
  --bg:      #0c1c1a;
  --bg2:     #091614;
  --bg3:     #0e2220;
  --gold:    #c9a84c;
  --gold2:   #d4b85a;
  --cream:   #f5f0e8;
  --white:   #ffffff;
  --text:    rgba(245,240,232,.82);
  --text2:   rgba(245,240,232,.55);
  --border:  rgba(201,168,76,.15);
  --serif:   'Cormorant Garamond',Georgia,serif;
  --sans:    'Josefin Sans',system-ui,sans-serif;
  --ease:    cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--bg);overflow-x:hidden;line-height:1.75}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:rgba(201,168,76,.4);border-radius:3px}

/* ============================================================ LAYOUT */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 48px}
.two-col{width:100%;max-width:1200px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.sec{padding:100px 0}

/* ============================================================ TYPOGRAPHY */
.sec-hdr{text-align:center;margin-bottom:52px}
.eyebrow{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
h2{font-family:var(--serif);font-size:clamp(28px,4vw,50px);font-weight:600;color:var(--cream);line-height:1.15;margin-bottom:10px}
.divider-w{margin:14px 0}
.divider-w.center{text-align:center}
.divider{display:inline-block;max-width:180px;opacity:.7}

/* ============================================================ MOBILE OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(9,22,20,.98);z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.overlay.open{opacity:1;pointer-events:all}
.overlay-x{position:absolute;top:22px;right:26px;background:none;border:none;color:var(--white);font-size:28px;cursor:pointer;transition:color .3s;line-height:1}
.overlay-x:hover{color:var(--gold)}
.overlay-nav{text-align:center}
.overlay-nav li{margin:4px 0}
.overlay-nav a{font-family:var(--serif);font-size:clamp(26px,5vw,40px);color:var(--white);display:block;padding:8px 32px;transition:color .3s}
.overlay-nav a:hover{color:var(--gold)}
.overlay-soc{display:flex;gap:24px;margin-top:36px}
.overlay-soc a{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.5);transition:color .3s}
.overlay-soc a:hover{color:var(--gold)}

/* ============================================================ HEADER */
#hdr{position:fixed;top:0;left:0;right:0;z-index:900;transition:background .4s,box-shadow .4s}
.hdr-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 48px;gap:16px;transition:padding .3s}

/* Scrolled: dunkles Teal – KEIN Grün, KEIN Weiß */
#hdr.s .hdr-inner{
  padding:10px 48px;
  background:rgba(12,28,26,.97);
  backdrop-filter:blur(20px);
  box-shadow:0 2px 20px rgba(0,0,0,.5);
}

/* Nav Links – immer weiß, hover Gold */
.nav-l{display:flex;align-items:center;gap:32px}
.nav-l a{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .3s;position:relative;padding-bottom:3px}
.nav-l a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav-l a:hover{color:var(--gold)}
.nav-l a:hover::after{width:100%}
#hdr.s .nav-l a{color:rgba(255,255,255,.85)}
#hdr.s .nav-l a:hover{color:var(--gold)}

/* Logo */
.logo-wrap{display:flex;align-items:center;justify-content:center}
.logo-img{height:68px;width:auto;object-fit:contain;transition:height .3s}
#hdr.s .logo-img{height:50px}

/* Nav Rechts */
.nav-r{display:flex;align-items:center;justify-content:flex-end;gap:20px}
.nav-r-links{display:flex;align-items:center;gap:24px}
.nav-r-links a{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .3s;position:relative;padding-bottom:3px}
.nav-r-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav-r-links a:hover{color:var(--gold)}
.nav-r-links a:hover::after{width:100%}
#hdr.s .nav-r-links a{color:rgba(255,255,255,.85)}
#hdr.s .nav-r-links a:hover{color:var(--gold)}

/* RESERVIEREN Button – Gold */
.btn-res{display:inline-block !important;padding:9px 20px !important;background:var(--gold) !important;color:#0c1c1a !important;border-radius:2px;letter-spacing:2px !important;font-weight:700 !important;transition:background .3s,transform .2s !important}
.btn-res:hover{background:var(--gold2) !important;transform:translateY(-1px)}
.btn-res::after{display:none !important}

/* Social */
.nav-soc{display:flex;align-items:center;gap:10px}
.nav-soc a{color:rgba(255,255,255,.7);display:flex;align-items:center;transition:color .3s}
.nav-soc a:hover{color:var(--gold)}
#hdr.s .nav-soc a{color:rgba(255,255,255,.6)}
#hdr.s .nav-soc a:hover{color:var(--gold)}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.burger span{display:block;width:24px;height:2px;background:var(--white);transition:background .3s}

/* ============================================================ HERO */
.hero{position:relative;height:100vh;min-height:700px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 40% 50%, rgba(20,50,45,.9) 0%, transparent 65%),
    linear-gradient(135deg, var(--bg2) 0%, #0e2220 50%, var(--bg2) 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(9,20,18,.5) 0%,rgba(9,20,18,.35) 40%,rgba(9,20,18,.6) 100%)}
.hero-cnt{position:relative;z-index:2;text-align:center;padding:0 24px;max-width:840px}
.h-pre{font-family:var(--sans);font-size:13px;font-weight:300;letter-spacing:7px;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:4px;opacity:0;animation:fu .9s .1s var(--ease) forwards}
.h-rest{display:block;font-family:var(--serif);font-size:clamp(26px,3.8vw,48px);font-weight:400;font-style:italic;color:var(--white);letter-spacing:2px;opacity:0;animation:fu .9s .25s var(--ease) forwards}
.h-name{display:block;font-family:var(--serif);font-size:clamp(72px,13vw,155px);font-weight:700;color:var(--white);line-height:.87;letter-spacing:-2px;text-shadow:0 4px 40px rgba(0,0,0,.4);opacity:0;animation:fu .9s .4s var(--ease) forwards}
.h-sub{font-family:var(--sans);font-size:clamp(12px,1.3vw,15px);font-weight:300;color:rgba(255,255,255,.72);letter-spacing:1px;margin:14px 0 42px;opacity:0;animation:fu .9s .55s var(--ease) forwards}
.btn-event{display:inline-block;padding:15px 56px;border:2px solid var(--gold);color:var(--gold);font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:5px;text-transform:uppercase;background:transparent;cursor:pointer;transition:all .35s var(--ease);opacity:0;animation:fu .9s .7s var(--ease) forwards}
.btn-event:hover{background:var(--gold);color:var(--bg);box-shadow:0 8px 30px rgba(201,168,76,.3);transform:translateY(-3px)}
.scroll-hint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2}
.scroll-hint span{display:block;width:1px;height:64px;background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);animation:sp 2s ease-in-out infinite}

/* ============================================================ ÜBER UNS */
.about-visual{position:relative;min-height:500px}
.deco-leaf{position:absolute;top:-20px;right:-30px;width:200px;opacity:.5;pointer-events:none;z-index:1}
.deco-food{position:absolute;bottom:-10px;left:-20px;width:160px;opacity:.45;pointer-events:none;z-index:1}
.main-photo{position:relative;z-index:2;width:75%;margin-left:auto;border-radius:2px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.main-photo img{width:100%;aspect-ratio:2/3;object-fit:cover}
.about-txt p{color:var(--text);font-size:15px;line-height:1.9;margin-bottom:12px}

/* GOLD italic heading – wie auf Original */
.italic-head{
  font-family:var(--serif);
  font-size:clamp(20px,2.5vw,30px);
  font-weight:400;font-style:italic;
  color:var(--gold);   /* GOLD – nicht weiß, nicht grün */
  line-height:1.4;
  margin-bottom:8px;
}

/* ============================================================ SPEISEKARTE */
.menu-photo{border-radius:2px;overflow:hidden;box-shadow:0 16px 60px rgba(0,0,0,.4);position:relative;z-index:1}
.menu-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.menu-visual{position:relative}
.menu-deco{position:absolute;right:-50px;bottom:-30px;width:200px;opacity:.08;z-index:0;pointer-events:none}
.menu-txt p{color:var(--text);font-size:15px;line-height:1.85;margin-bottom:28px}

/* SPEISEKARTE Button – gold outline auf dunklem Hintergrund */
.btn-ol{
  display:inline-block;padding:12px 36px;
  border:2px solid var(--gold);color:var(--gold);
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  background:transparent;border-radius:0;
  transition:all .3s var(--ease);
}
.btn-ol:hover{background:var(--gold);color:var(--bg);transform:translateY(-2px)}

/* ============================================================ GALERIE */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gi{overflow:hidden;aspect-ratio:4/3;cursor:pointer;border-radius:2px;position:relative;background:var(--bg3)}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);display:block}
.gi::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .3s}
.gi:hover img{transform:scale(1.07)}
.gi:hover::after{opacity:1}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.open{opacity:1;pointer-events:all}
.lb-x,.lb-p,.lb-n{position:absolute;background:none;border:none;color:#fff;cursor:pointer;transition:color .3s;z-index:1;line-height:1}
.lb-x{top:20px;right:26px;font-size:28px}
.lb-p{left:16px;font-size:68px;top:50%;transform:translateY(-50%)}
.lb-n{right:16px;font-size:68px;top:50%;transform:translateY(-50%)}
.lb-x:hover,.lb-p:hover,.lb-n:hover{color:var(--gold)}
.lb-w{max-width:90vw;max-height:90vh}
.lb-w img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:2px}

/* ============================================================ RESERVIERUNG */
.res{position:relative;padding:0;overflow:hidden}
.res-bg{position:absolute;inset:0;background:var(--bg2);background-size:cover;background-position:center;background-repeat:no-repeat}
.res-ov{position:absolute;inset:0;background:rgba(9,18,16,.82)}
.res-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start;padding-top:100px;padding-bottom:100px}
.res-txt{padding-top:8px}
.res-s{font-family:var(--serif);font-size:22px;font-style:italic;color:rgba(255,255,255,.6);margin:6px 0 4px;line-height:1.4}
.res-body{color:rgba(255,255,255,.5);font-size:14px;line-height:1.85;margin-top:8px}
.res-box{background:rgba(255,255,255,.98);padding:40px 36px;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.fg.full{margin-bottom:14px}
.fg label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#5a7a5a}
.fg input,.fg select,.fg textarea{padding:11px 13px;border:1px solid rgba(0,0,0,.12);border-radius:2px;font-family:var(--sans);font-size:14px;color:#0c1c1a;background:#f5f5f0;outline:none;transition:border-color .3s,box-shadow .3s;width:100%}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.12);background:var(--white)}
.fg input::placeholder,.fg textarea::placeholder{color:#bbb}
.fg textarea{resize:vertical}
.cbl{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:#333;cursor:pointer;line-height:1.5}
.cbl input{margin-top:3px;accent-color:var(--gold);flex-shrink:0}
.cbl a{color:var(--gold);text-decoration:underline}
.btn-sub{width:100%;padding:14px;background:var(--gold);color:#0c1c1a;border:none;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:background .3s,transform .2s;border-radius:2px;margin-top:8px}
.btn-sub:hover{background:var(--gold2);transform:translateY(-1px)}
.fnote{font-size:11px;color:#999;text-align:center;margin-top:8px}
.form-ok{display:none;text-align:center;padding:40px 16px}
.ok-ico{width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--bg);font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.form-ok h3{font-family:var(--serif);font-size:28px;margin-bottom:8px;color:#0c1c1a}
.form-ok p{color:#444;line-height:1.7}

/* ============================================================ KONTAKT */
.ct-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:stretch}
.ct-b{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.ct-b:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.ct-b h3{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.ct-b p,.ct-b td{color:var(--text);font-size:15px;line-height:1.9}
.ct-b table{border-collapse:collapse;width:100%}
.ct-b td{padding:3px 12px 3px 0}
.ct-b td:first-child{font-weight:700;min-width:100px}
.ct-b a{transition:color .3s}.ct-b a:hover{color:var(--gold)}
.ct-soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ct-soc a{padding:6px 16px;border:1.5px solid var(--gold);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);transition:all .3s;border-radius:2px}
.ct-soc a:hover{background:var(--gold);color:var(--bg)}
.ct-map{border-radius:2px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.4);border:1px solid var(--border);min-height:420px}
.ct-map iframe{display:block;width:100%;height:100%}

/* ============================================================ FOOTER */
footer{background:var(--bg2);color:var(--white);border-top:1px solid var(--border)}
.ft-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:44px 10%;border-bottom:1px solid rgba(255,255,255,.07)}
.ft-logo img{height:52px;width:auto;opacity:.9}
.ft-nav{display:flex;gap:28px;flex-wrap:wrap}
.ft-nav a{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .3s}
.ft-nav a:hover{color:var(--gold)}
.ft-soc{display:flex;gap:20px}
.ft-soc a{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .3s}
.ft-soc a:hover{color:var(--gold)}
.ft-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px 10%}
.ft-bot span{font-size:12px;color:rgba(255,255,255,.35)}
.ft-bot a{font-size:12px;color:rgba(255,255,255,.35);margin-left:20px;transition:color .3s}
.ft-bot a:hover{color:var(--gold)}

/* ============================================================ BACK TO TOP – GOLD */
.top-btn{position:fixed;bottom:26px;right:26px;width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 20px rgba(201,168,76,.4);z-index:800;opacity:0;pointer-events:none;transform:translateY(8px);transition:all .3s var(--ease)}
.top-btn.v{opacity:1;pointer-events:all;transform:translateY(0)}
.top-btn:hover{background:var(--gold2);transform:translateY(-2px)}

/* ============================================================ ANIMATIONS */
@keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sp{0%,100%{opacity:.25}50%{opacity:1}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.rd1{transition-delay:.15s}

/* ============================================================ RESPONSIVE */
@media(max-width:1024px){
  .container,.hdr-inner,.ft-top,.ft-bot{padding-left:32px;padding-right:32px}
  .two-col{padding:0 32px;gap:52px}
}
@media(max-width:900px){
  .nav-l,.nav-r{display:none}
  .hdr-inner{grid-template-columns:auto 1fr;padding-right:20px}
  .logo-wrap{justify-content:flex-start}
  .burger{display:flex;margin-left:auto}
  .two-col{grid-template-columns:1fr;padding:0 24px;gap:48px}
  .about-visual{min-height:280px}
  .main-photo{width:65%}
  .deco-leaf,.deco-food{display:none}
  .menu-visual{order:-1}
  .menu-photo img{aspect-ratio:16/9}
  .menu-deco{display:none}
  .res-in{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .ct-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .ft-top{flex-direction:column;align-items:flex-start;padding:36px 6%}
  .ft-bot{padding:16px 6%}
}
@media(max-width:600px){
  .sec{padding:72px 0}
  .container{padding:0 18px}
  .two-col{padding:0 18px}
  .hdr-inner{padding:14px 18px}
  .h-name{font-size:clamp(56px,18vw,90px)}
  .gal-grid{grid-template-columns:1fr}
  .res-box{padding:28px 18px}
}