:root{
  --sand:#F6F1E7;
  --salzgrau:#A9B0B6;
  --marine:#2596be; /* sekundär: Küstenblau */
  --marine-rgb: 37,150,190;
  --text-dark:#0F2A3A; /* dunklere Fließtextfarbe */
  --nav-rgb: 37,150,190; /* unify nav color with primary marine */
  --messing:#F6F1E7; /* helles Gold (Akzent) */
  --tannengruen:#1F3B2C;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  background:var(--sand);
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
}

.container{max-width:1100px;margin:0 auto;padding:1rem}

/* Header: transparent by default, dark professional background when scrolled */
.site-header{
  position:sticky;top:0;z-index:40;
  /* subtle light background at page start for better contrast */
  background:rgba(255,255,255,0.88);color:var(--text-dark);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(15,42,58,0.04);transition:background .22s ease, border-bottom .18s ease, color .18s ease, box-shadow .18s ease;
}
.site-header.scrolled{background:rgba(var(--marine-rgb),0.92);color:#fff;border-bottom:0;box-shadow:0 6px 20px rgba(15,42,58,0.08)}

.header-inner{display:flex;align-items:center;gap:.6rem;padding:.42rem 0.9rem}
.wordmark{font-family:'Playfair Display', serif;font-size:1.1rem;text-decoration:none;letter-spacing:0.6px}
.site-header:not(.scrolled) .wordmark{color:var(--text-dark)}
.site-header .wordmark{color:var(--text-dark)}
.site-header.scrolled .wordmark{color:#fff}

.main-nav{margin-left:1.2rem;display:flex;gap:.6rem}
.nav-link{padding:.4rem .7rem;border-radius:8px;font-weight:600;text-decoration:none}
.site-header:not(.scrolled) .nav-link{color:rgba(15,42,58,0.9)}
.site-header .nav-link{color:rgba(15,42,58,0.9)}
.site-header.scrolled .nav-link{color:rgba(255,255,255,0.95)}
.nav-link.active{border-bottom:2px solid var(--messing);padding-bottom:calc(.4rem - 2px)}

.header-cta{margin-left:auto}
.header-cta .btn.call{background:var(--marine);color:#fff;padding:.42rem .85rem;border-radius:10px;text-decoration:none;font-weight:700;border:0}

/* Hero */
.hero{position:relative;border-radius:14px;overflow:hidden;margin:1.2rem 0}
.hero-img{width:100%;height:520px;object-fit:cover;display:block;filter:brightness(0.62) contrast(1) saturate(1)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--marine-rgb),0.12),rgba(var(--marine-rgb),0.22));}
.hero-content{position:absolute;left:2.2rem;top:2.2rem;color:#fff;max-width:560px}
.hero h1{font-family:'Playfair Display';font-size:2.6rem;margin:.1rem 0;letter-spacing:0.4px}
.sub{opacity:0.95;margin-bottom:.85rem;font-weight:500}

/* Buttons: flat, subtle hover */
.btn{display:inline-block;padding:.55rem .95rem;border-radius:12px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:all .18s ease}
.btn.primary{background:var(--marine);color:#fff;border:1px solid rgba(0,0,0,0.04)}
.btn.primary:hover{filter:brightness(1.03);transform:translateY(-2px)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff}
.btn.small{padding:.3rem .5rem;font-size:.9rem}

/* (removed no-hover utility) */

.info-tiles{display:flex;gap:.8rem;margin-top:1rem}
.tile{
  background:rgba(255,255,255,0.82);
  padding:.7rem .9rem;border-radius:10px;border:1px solid rgba(15,42,58,0.04);
  color:var(--text-dark);
  box-shadow:0 8px 22px rgba(var(--marine-rgb),0.04);
  flex:1;min-width:0;
}
.site-header.scrolled .tile{color:var(--text-dark)}

/* Hover / focus effects for the three info tiles */
.tile{transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease, background-color .18s ease}
.tile:hover, .tile:focus-within{transform:translateY(-6px);box-shadow:0 18px 30px rgba(var(--marine-rgb),0.08);border-color:rgba(var(--marine-rgb),0.12);background:rgba(255,255,255,0.96)}
.tile:active{transform:translateY(-2px)}
.tile:hover strong, .tile:focus-within strong{color:var(--marine)}
.tile:focus-visible{outline:3px solid rgba(var(--marine-rgb),0.12);outline-offset:4px}

.story{padding:1.4rem 0}
.story h2{font-family:'Playfair Display';margin:0 0 .4rem;font-size:1.6rem;color:var(--marine)}
.story h2{font-family:'Playfair Display';margin:0 0 .4rem;font-size:1.6rem;color:var(--text-dark)}
.story p{max-width:70ch;color:rgba(15,42,58,0.9);line-height:1.6}
.story p{max-width:70ch;color:var(--text-dark);line-height:1.6}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.card-img{width:100%;height:280px;object-fit:cover;border-radius:12px;filter:brightness(0.88);box-shadow:0 8px 20px rgba(var(--marine-rgb),0.04);border:0}

.notice{background:linear-gradient(90deg,rgba(253,236,166,0.08),transparent);border-left:4px solid var(--messing);padding:.9rem;margin:1rem 0;border-radius:8px;color:var(--marine)}

.features ul{display:flex;gap:1rem;flex-wrap:wrap;list-style:none;padding:0;margin:.6rem 0}
.features li{background:#fff;border-radius:10px;padding:.6rem .9rem;color:var(--marine);box-shadow:0 4px 10px rgba(var(--marine-rgb),0.03);font-weight:600}

.route{display:none;padding:1rem 0}
.route.active{display:block}
.route-header{display:flex;flex-direction:column;gap:.6rem}
.chips{display:flex;gap:.6rem;overflow:auto}
.chip{background:transparent;border:1px solid var(--salzgrau);padding:.45rem .7rem;border-radius:999px;cursor:pointer}
.chip.active{background:var(--marine);color:#fff;border-color:var(--marine)}
.search input{padding:.5rem .7rem;border:1px solid var(--salzgrau);border-radius:10px}

.menu-list{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.menu-item{background:#fff;padding:1.05rem;border-radius:12px;box-shadow:0 8px 18px rgba(var(--marine-rgb),0.04);border:0;display:block;color:var(--text-dark)}
.menu-item h4{margin:0 0 .45rem;font-family:'Playfair Display';font-size:1.05rem;color:var(--text-dark)}
.menu-item .price{float:right;color:#8C6A1E;font-weight:700}
.menu-item .muted{color:rgba(15,42,58,0.78);margin:0}

.product-card{display:flex;flex-direction:column;gap:1rem;background:#fff;padding:1rem;border-radius:12px;box-shadow:0 8px 20px rgba(var(--marine-rgb),0.04)}
.product-body{flex:1}
.value-options label{margin-right:.9rem}

.contact-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.hours{border-collapse:collapse;margin-top:.5rem}
.hours th{padding:.25rem .5rem;text-align:left;color:var(--salzgrau)}

.legal-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.8rem}
.legal-card{background:#fff;border-radius:14px;padding:1.1rem 1.2rem;box-shadow:0 10px 22px rgba(var(--marine-rgb),0.06);border:1px solid rgba(15,42,58,0.04)}
.legal-card h3{margin:.15rem 0 .6rem;font-family:'Playfair Display', serif;color:var(--text-dark)}
.legal-kicker{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(15,42,58,0.55);margin:0}
.legal-block{margin:.55rem 0;color:rgba(15,42,58,0.88)}
.legal-block p{margin:.1rem 0}
.legal-meta{margin-top:.6rem;color:rgba(15,42,58,0.7);font-weight:600}

.map-placeholder{height:220px;background:#eef0ec;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--salzgrau);margin-top:.6rem;border:0}

/* Inputs */
input,textarea{width:100%;padding:.6rem;border:1.5px solid rgba(169,176,182,0.45);border-radius:10px;margin-top:.4rem;background:white;transition:border-color .15s ease}
input:focus,textarea:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(37,150,190,0.1)}

.site-footer{padding:1.2rem 0;margin-top:2rem;background:transparent;color:var(--salzgrau);text-align:center}
.site-footer a{color:inherit;text-decoration:underline}
.site-footer a:hover{color:var(--marine)}

/* ── Hamburger Menu ── */
.hamburger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;width:38px;height:38px;
  background:none;border:none;cursor:pointer;
  padding:4px;margin-left:auto;border-radius:8px;
  transition:background .15s ease;
}
.hamburger:hover{background:rgba(15,42,58,0.06)}
.hamburger span{
  display:block;height:2px;border-radius:2px;
  background:var(--text-dark);
  transition:transform .22s ease,opacity .18s ease,background .18s ease;
  transform-origin:center;
}
.site-header.scrolled .hamburger span{background:#fff}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav-drawer{
  display:none;position:fixed;inset:0;z-index:39;
  background:rgba(15,42,58,0.45);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .22s ease;
  pointer-events:none;
}
.mobile-nav-drawer.open{opacity:1;pointer-events:auto}
.mobile-nav-panel{
  position:absolute;right:0;top:0;bottom:0;
  width:min(280px,80vw);background:#fff;
  box-shadow:-8px 0 32px rgba(15,42,58,0.12);
  padding:5rem 1.5rem 2rem;
  display:flex;flex-direction:column;gap:.4rem;
  transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.mobile-nav-drawer.open .mobile-nav-panel{transform:translateX(0)}
.mobile-nav-panel .nav-link{
  display:block;padding:.75rem 1rem;border-radius:10px;
  font-size:1.05rem;color:var(--text-dark);
  text-decoration:none;font-weight:600;
  transition:background .15s ease,color .15s ease;
}
.mobile-nav-panel .nav-link:hover,
.mobile-nav-panel .nav-link.active{background:rgba(37,150,190,0.1);color:var(--marine)}
.mobile-nav-panel .btn.call{
  margin-top:1rem;display:block;text-align:center;
  padding:.75rem;border-radius:12px;font-weight:700;
  background:var(--marine);color:#fff;text-decoration:none;
}

/* ── Mobile ── */
@media(max-width:759px){
  .main-nav,.header-cta{display:none}
  .hamburger{display:flex}
  .mobile-nav-drawer{display:block}

  /* Header */
  .header-inner{padding:.55rem 1rem}
  .wordmark{font-size:1rem}

  /* Hero: image on top, text below on white background for readability */
  .hero{margin:.6rem 0;border-radius:12px;overflow:visible;display:flex;flex-direction:column;position:relative}
  .hero-overlay{pointer-events:none}
  .hero-img{height:210px;width:100%;object-fit:cover;display:block;filter:brightness(0.8);flex-shrink:0;border-radius:12px 12px 0 0}
  .hero-overlay{display:none}
  .hero-content{
    position:static;
    background:#fff;
    color:var(--text-dark);
    padding:1.1rem 1rem 0;
    max-width:100%;
    border-radius:0 0 12px 12px;
  }
  .hero h1{font-size:1.3rem;color:var(--text-dark);margin:.1rem 0 .25rem;line-height:1.2}
  .sub{font-size:.88rem;color:rgba(15,42,58,0.6);margin-bottom:.75rem;opacity:1;font-weight:500}
  .hero-ctas{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:0}
  .hero-ctas .btn{text-align:center;padding:.6rem .4rem;font-size:.86rem}
  .hero-ctas .btn.outline{border:1.5px solid var(--marine);color:var(--marine);background:transparent}

  /* Info tiles attached to hero box */
  .info-tiles{
    flex-direction:column;gap:.4rem;
    margin-top:0;padding:.8rem 1rem 1rem;
    background:#fff;
    border-radius:0 0 12px 12px;
  }
  .tile{
    background:rgba(37,150,190,0.05);
    border:1px solid rgba(37,150,190,0.13);
    padding:.6rem .8rem;border-radius:9px;
    display:flex;align-items:baseline;gap:.5rem;
  }
  .tile strong{min-width:5.5rem;font-size:.82rem;color:var(--marine);flex-shrink:0}
  .tile span{font-size:.86rem;color:var(--text-dark);line-height:1.4}

  /* Story */
  .story{padding:.9rem 0}
  .story h2{font-size:1.2rem;margin-bottom:.3rem}
  .story p{font-size:.93rem;line-height:1.65}

  /* Two-col photos */
  .two-col{grid-template-columns:1fr;gap:.7rem}
  .card-img{height:175px}
  .ambiente h3{font-size:.98rem;margin:.1rem 0 .4rem}

  /* Notice */
  .notice{font-size:.87rem;padding:.65rem .8rem}

  /* Features */
  .features ul{gap:.45rem}
  .features li{font-size:.84rem;padding:.4rem .7rem}

  /* General */
  .container{padding:.75rem}
  .route{padding:.5rem 0}

  /* Menu */
  .route-header{flex-direction:column;gap:.55rem;align-items:flex-start}
  .chips{flex-wrap:wrap;gap:.4rem}
  .chip{font-size:.84rem;padding:.38rem .6rem}
  .menu-section{margin-top:1rem}
  .menu-section h2{
    font-size:1rem;
    line-height:1.35;
    margin:0 0 .55rem;
    padding:.45rem .6rem;
    border-left:3px solid var(--marine);
    background:rgba(var(--marine-rgb),0.06);
    border-radius:8px;
    color:var(--text-dark);
  }
  .menu-list{grid-template-columns:1fr;gap:.55rem}
  .menu-item{
    padding:.9rem .9rem;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(var(--marine-rgb),0.06);
  }
  .menu-item h4{
    font-size:1rem;
    line-height:1.35;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:.35rem;
  }
  .menu-item .price{
    float:none;
    align-self:flex-start;
    font-size:.84rem;
    font-weight:700;
    background:rgba(var(--marine-rgb),0.08);
    color:var(--marine);
    padding:.15rem .5rem;
    border-radius:999px;
  }
  .menu-item .muted{
    font-size:.84rem;
    line-height:1.45;
    margin-top:.32rem;
  }
  .search{display:flex;gap:.4rem;align-items:center;width:100%}
  .search input{flex:1;font-size:.88rem}

  /* Contact & Legal */
  .contact-grid{grid-template-columns:1fr}
  .legal-grid{grid-template-columns:1fr}
  .legal-card{padding:.85rem .95rem}

  /* Gutscheine */
  .product-card{padding:.85rem}
  .value-options{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 .6rem}

  /* Gutschein-Konfiguration */
  .config-card{padding:1.2rem;margin:1rem auto}
  .config-card h1{font-size:1.35rem}
  .delivery-options{grid-template-columns:1fr 1fr;gap:.5rem}
  .delivery-label{padding:.7rem .45rem;font-size:.87rem}
  .delivery-label .icon{font-size:1.35rem}
  .delivery-label .label-desc{font-size:.75rem}
}

/* ── Desktop ── */
@media(min-width:760px){
  .hero-img{height:560px}
  .hero-overlay{display:block}
  .hero-content{position:absolute;left:2.2rem;top:2.2rem;color:#fff;max-width:560px;background:none;padding:0}
  .hero h1{color:#fff}
  .sub{color:rgba(255,255,255,0.95);opacity:0.95}
  .hero-ctas{display:flex;flex-direction:row;gap:.75rem;margin-bottom:.85rem}
  .hero-ctas .btn.outline{border-color:rgba(255,255,255,0.5);color:#fff}
  .info-tiles{flex-direction:row;gap:.8rem;margin-top:1rem;padding:0;background:transparent}
  .tile{background:rgba(255,255,255,0.82);display:block}
  .tile strong{min-width:unset;color:var(--text-dark)}
  .tile span{font-size:unset}
  .menu-list{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .legal-grid{grid-template-columns:1fr 1fr}
  .route-header{flex-direction:row;align-items:center;justify-content:space-between}
  .mobile-nav-drawer{display:none !important}
}

/* Print styles for Speisekarte */
@media print{
  body{background:white;color:black}
  .site-header,.site-footer,.btn,.chips,.search,.notice{display:none}
  .menu-list{grid-template-columns:1fr}
  .menu-item{box-shadow:none;border:0;padding:0;margin:0}
}

/* ── Gericht Finder ── */
.finder-page{padding-bottom:3rem}
.finder-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:1.5rem;
  padding:2rem;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(37,150,190,0.12),rgba(253,236,166,0.18));
  overflow:hidden;
  box-shadow:0 24px 40px rgba(15,42,58,0.08);
}
.finder-hero::before{
  content:"";
  position:absolute;
  inset:-40% -10% auto auto;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,150,190,0.28),transparent 65%);
  opacity:.75;
  pointer-events:none;
}
.finder-hero-content{position:relative;z-index:1}
.finder-actions{position:relative;z-index:2;pointer-events:auto}
.finder-kicker{
  font-size:.75rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(15,42,58,0.65);
  margin:0 0 .75rem;
}
.finder-hero h1{
  font-family:"Playfair Display", serif;
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  margin:.2rem 0 .6rem;
}
.finder-sub{max-width:54ch;color:rgba(15,42,58,0.78);line-height:1.55}
.finder-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.finder-ghost{
  border:1.5px solid rgba(37,150,190,0.45);
  color:var(--marine);
  background:rgba(255,255,255,0.6);
}
.finder-ghost:hover{background:rgba(37,150,190,0.1);transform:translateY(-2px)}
.finder-note{margin-top:.8rem;color:rgba(15,42,58,0.6);font-size:.85rem}
.finder-hero-deco{
  position:relative;
  z-index:1;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(15,42,58,0.1),rgba(15,42,58,0.02));
  min-height:220px;
  box-shadow:inset 0 0 0 1px rgba(15,42,58,0.12);
  pointer-events:none;
}
.finder-panel{
  margin-top:1.6rem;
  padding:1.6rem;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 32px rgba(15,42,58,0.06);
}
.finder-panel h2{margin:0 0 .8rem;font-size:1.2rem}
.finder-filters{display:flex;flex-wrap:wrap;gap:.6rem}
.finder-chip{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(15,42,58,0.15);
  background:rgba(37,150,190,0.05);
  cursor:pointer;
  font-weight:600;
}
.finder-chip input{margin:0}
.finder-hint{margin:.9rem 0 0;color:rgba(15,42,58,0.65)}
.finder-result{
  margin-top:1.6rem;
  padding:1.8rem;
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 40px rgba(15,42,58,0.08);
}
.finder-card{
  display:grid;
  gap:1rem;
  grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);
  align-items:start;
}
.finder-card h3{
  margin:0 0 .4rem;
  font-size:1.4rem;
  font-family:"Playfair Display", serif;
}
.finder-meta{color:rgba(15,42,58,0.6);font-size:.9rem}
.finder-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.finder-tag{
  font-size:.78rem;
  padding:.2rem .55rem;
  border-radius:999px;
  background:rgba(37,150,190,0.12);
  color:var(--text-dark);
  font-weight:600;
}
.finder-drink{
  padding:1rem;
  border-radius:14px;
  background:linear-gradient(150deg,rgba(37,150,190,0.14),rgba(253,236,166,0.2));
  box-shadow:inset 0 0 0 1px rgba(37,150,190,0.12);
}
.finder-drink h4{margin:.1rem 0 .4rem;font-size:1rem}
.finder-empty{text-align:center;color:rgba(15,42,58,0.65)}

@media(max-width:759px){
  .finder-hero{grid-template-columns:1fr;padding:1.4rem}
  .finder-hero-deco{min-height:140px}
  .finder-card{grid-template-columns:1fr}

  /* larger tap targets for finder chips and actions */
  .gf-actions .gf-btn, .finder-actions .btn, .finder-actions .gf-btn { padding:.78rem 1rem; font-size:1rem }
  .gf-chips .gf-chip, .finder-filters .finder-chip { padding:.65rem .9rem; font-size:.95rem }
}

/* Floating mobile call button */
.mobile-call{display:none}
@media(max-width:759px){
  .mobile-call{display:block;position:fixed;right:16px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:999px;background:var(--marine);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.35rem;text-decoration:none;box-shadow:0 10px 30px rgba(15,42,58,0.18)}
  .mobile-call:active{transform:scale(.98)}
}

.focus-visible:focus{outline:3px solid rgba(253,236,166,0.28);outline-offset:2px}