:root{
  --bg:#f7f3ea;
  --paper:#fbf8f1;
  --surface:#ffffff;
  --text:#31402f;
  --muted:#6d7563;
  --line:#d9d1bf;
  --accent:#6f7f62;
  --accent-2:#b68a4e;
  --shadow:0 12px 35px rgba(74, 67, 52, 0.10);
  --radius:22px;
  --container:min(1160px, calc(100% - 32px));
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:28px;
  --space-6:40px;
  --space-7:56px;
  --space-8:80px;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  background:linear-gradient(180deg,#faf7f0 0%,#f4efe5 100%);
  color:var(--text);
  line-height:1.6;
}
html {
  scroll-padding-top: 75px;
}

img{max-width:100%;display:block}
a{color:inherit}
.container{width:var(--container);margin-inline:auto}

.section{padding:var(--space-7) 0}
.section-tight{padding:var(--space-6) 0}
.section-loose{padding:88px 0}

.eyebrow{
  display:inline-block;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}
h1,h2,h3{line-height:1.1;margin:0 0 14px}
h1{font-size:clamp(2rem,4vw,3.15rem);max-width:12ch}
h2{font-size:clamp(1.65rem,3vw,2.35rem)}
h3{font-size:1.28rem}
p{margin:0 0 14px}
small,.muted{color:var(--muted)}

.card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,209,191,.9);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: 50px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(12px);
  background:rgba(250,247,240,.82);
  border-bottom:1px solid rgba(217,209,191,.95);
}
.topbar-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  min-width:0;
}
.brand img{
  width:92px;
  height:92px;
  object-fit:contain;
  flex:none;
}
.brand-text strong{
  display:block;
  font-size:1.18rem;
  letter-spacing:.04em;
}
.brand-text span{
  display:block;
  font-size:.84rem;
  color:var(--muted);
}

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:var(--surface);
  width:46px;
  height:46px;
  border-radius:14px;
  color:var(--text);
}
.nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.nav a{
  position:relative;
  text-decoration:none;
  padding:6px 2px 18px;
  font-size:1rem;
  color:var(--text);
  transition:color .2s ease;
}
.nav a:hover,.nav a.active{color:#22301f}
.nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:30px;
  height:30px;
  transform:translateX(-50%) scale(0.5);
  opacity:0;
  background:url("assets/images/turm-mark.svg") center/contain no-repeat;
  pointer-events:none;
}
.nav a:hover::after,.nav a.active::after{animation:towerMagic .7s ease forwards}
.nav a:hover::before,.nav a.active::before{
  content:"✦";
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  font-size:10px;
  color:#ffc100;
  opacity:0;
  animation:sparkle .6s ease;
}
@keyframes towerMagic{
  0%{transform:translateX(-50%) scale(.55);opacity:0;filter:drop-shadow(0 0 0 rgba(182,138,78,0))}
  50%{transform:translateX(-50%) scale(1.38);opacity:1;filter:drop-shadow(0 0 12px rgba(182,138,78,.7))}
  100%{transform:translateX(-50%) scale(1);opacity:1;filter:drop-shadow(0 0 4px rgba(182,138,78,.35))}
}
@keyframes sparkle{
  0%{opacity:0;transform:translateX(-50%) translateY(0)}
  45%{opacity:1;transform:translateX(-50%) translateY(-6px)}
  100%{opacity:0;transform:translateX(-50%) translateY(-12px)}
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:999px;
  padding:13px 20px;
  border:none;
  box-shadow:0 8px 18px rgba(111,127,98,.18);
}
.cta.light{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}

.hero{
  position:relative;
  padding:74px 0 54px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(247,243,234,.95) 0%, rgba(247,243,234,.65) 35%, rgba(247,243,234,.35) 70%, rgba(247,243,234,.15) 100%),
    url("assets/images/suentelturm.jpg") center center/cover no-repeat;
  filter:saturate(.94) brightness(1.03);
}
.hero .container{position:relative;z-index:1}
.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:32px;
  align-items:center;
  min-height:430px;
}
.hero-copy p{
  max-width:57ch;
  font-size:1.04rem;
}
.hero-facts{padding:24px}
.hero-facts ul{list-style:none;padding:0;margin:0}
.hero-facts li{
  padding:13px 0;
  border-bottom:1px solid rgba(217,209,191,.8);
}
.hero-facts li:last-child{border-bottom:none}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

.grid-3,.grid-2{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.tile{padding:24px}
.tile h3{margin-bottom:8px}
.icon-circle{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(111,127,98,.12);
  margin-bottom:12px;
  font-size:1.2rem;
}

.story{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
}
.story img,.gallery img,.menu-image{
  border-radius:24px;
  box-shadow:var(--shadow);
}
.story-copy{padding:30px}

.menu-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:20px;
}
.menu-panel{padding:18px}
.menu-panel h3{margin:4px 0 14px}
.menu-image{
  border:1px solid var(--line);
  background:#fff;
}

.map-wrap{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:24px;
  align-items:stretch;
}
.map-frame{
  width:100%;
  min-height:390px;
  border:0;
  border-radius:22px;
}

.footer{
  padding:36px 0 28px;
  border-top:1px solid var(--line);
  margin-top:30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:24px;
  align-items:start;
}
.footer a{text-decoration:none}
.footer-links{display:grid;gap:10px}
.socials{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.socials a{
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
}
.copy{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:.95rem;
}
.heart{color:#b66a63;margin-left:6px}

.zoomable{
  cursor:zoom-in;
  transition:transform .25s ease, box-shadow .25s ease;
}
.zoomable:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(143,160,0,1);
}

.lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.lightbox.open{display:block}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(34,31,27,.72);
  backdrop-filter:blur(4px);
}
.lightbox-dialog{
  position:relative;
  width:min(1100px, calc(100% - 24px));
  max-height:calc(100vh - 24px);
  margin:12px auto;
  background:#fbf8f1;
  border:1px solid rgba(217,209,191,.95);
  border-radius:24px;
  box-shadow:0 20px 60px rgba(20,20,20,.28);
  overflow:hidden;
}
.lightbox-head{
  padding:18px 22px 10px;
  border-bottom:1px solid rgba(217,209,191,.8);
}
.lightbox-head h3{margin:0 0 4px}
.lightbox-head p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.lightbox-body{
  overflow:auto;
  max-height:calc(100vh - 120px);
  background:#fff;
}
.lightbox-body img{
  width:100%;
  height:auto;
  display:block;
}
.lightbox-close{
  position:absolute;
  top:10px;
  right:12px;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#2e3a2d;
  font-size:1.9rem;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
body.lightbox-open{
  overflow:hidden;
  position:fixed;
  left:0;
  right:0;
  width:100%;
}

.speisen-premium-top{
  display:grid;
  grid-template-columns:1.02fr 0.98fr;
  gap:28px;
  align-items:start;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.speisen-menu-card{
  padding:20px;
  min-height:100%;
  background:rgba(255,255,255,.78);
}
.speisen-card-head{margin-bottom:14px}
.speisen-card-head h3{margin:4px 0 0}
.speisen-menu-card .menu-image{
  width:100%;
  border-radius:20px;
  border:1px solid rgba(217,209,191,.85);
  box-shadow:0 18px 36px rgba(74,67,52,.10);
}
.speisen-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.speisen-gallery img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:22px;
  box-shadow:0 14px 30px rgba(74,67,52,.12);
  transition:transform .25s ease, box-shadow .25s ease;
}
.speisen-gallery img:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 36px rgba(74,67,52,.16);
}
.speisen-text-premium{
  overflow:hidden;
  max-width:1170px;
  margin:28px auto 0;
  padding:0 20px;
}
.speisen-text-inner{
  padding:30px 34px;
  max-width:1040px;
  margin:0 auto;
}
.speisen-text-premium h3{margin-bottom:18px}

.speisen-threecol{
  display:grid;
  grid-template-columns:1fr minmax(280px, 360px) 1fr;
  gap:24px;
  align-items:start;
  margin-top:8px;
}
.speisen-col{
  color:var(--muted);
  line-height:1.85;
}
.speisen-col p{
  margin:0 0 16px;
}
.speisen-col strong{
  color:var(--text);
}
.speisen-image-card{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,243,234,.96));
  border:1px solid rgba(217,209,191,.9);
  border-radius:22px;
  padding:12px;
  box-shadow:0 14px 32px rgba(74,67,52,.10);
}
.speisen-image-card img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:16px;
}
.speisen-image-card figcaption{
  padding:12px 6px 4px;
  font-size:.95rem;
  color:var(--muted);
}
.speisen-note{
  margin:12px 4px 0;
  font-size:.92rem;
  color:var(--muted);
}
.focus-top{object-position:top}

/* large tablets */
@media (max-width:1100px){
  .section{padding:48px 0}
  .hero{padding:60px 0 42px}
  .hero-grid{gap:24px;min-height:auto}
  .story,.menu-wrap,.map-wrap,.footer-grid{gap:20px}
  .speisen-gallery img{height:210px}
  .speisen-threecol{
    grid-template-columns:1fr;
    gap:20px;
  }
  .speisen-image-card{
    max-width:520px;
    margin:0 auto;
  }
}

/* tablets */
@media (max-width:920px){
  .section{padding:40px 0}
  .container{width:min(100% - 28px, 1160px)}
  .nav-toggle{display:grid;place-items:center}
  .topbar-inner{min-height:72px;gap:12px}
  .brand{gap:10px}
  .brand img{width:64px;height:auto}
  .brand-text strong{font-size:1rem}
  .brand-text span{font-size:.78rem}

  .nav{
    position:absolute;
    left:14px;
    right:14px;
    top:80px;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    background:rgba(251,248,241,.98);
    border:1px solid var(--line);
    border-radius:20px;
    padding:16px;
    box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a{padding:8px 0 10px;width:100%}
  .nav a::after,.nav a::before{display:none}

  .hero{padding:48px 0 34px}
  .hero-grid,.story,.menu-wrap,.map-wrap,.footer-grid,.grid-3,.grid-2{
    grid-template-columns:1fr;
  }
  .hero-copy p{max-width:100%;font-size:1rem}
  .hero-facts{padding:20px}
  .hero-actions{gap:10px;margin-top:20px}
  .story-copy,.tile,.menu-panel,.speisen-text-inner{padding:22px}
  .speisen-premium-top{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 14px;
  }
  .speisen-gallery{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .speisen-gallery img{height:220px}
  .speisen-text-premium{
    margin-top:20px;
    padding:0 14px;
  }
  .map-frame{min-height:340px}
  .copy{margin-top:18px}
}

/* phones */
@media (max-width:640px){
  .container{width:min(100% - 20px, 1160px)}
  .section{padding:32px 0}
  h1{font-size:clamp(1.9rem, 8vw, 2.4rem);max-width:100%}
  h2{font-size:clamp(1.45rem, 6vw, 1.9rem)}
  .topbar-inner{min-height:68px}
  .brand img{width:56px}
  .brand-text span{font-size:.74rem}
  .hero{padding:34px 0 26px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .cta,.cta{width:100%}
  .hero-facts,.tile,.menu-panel,.story-copy,.speisen-menu-card,.speisen-text-inner{padding:18px}
  .story,.menu-wrap,.map-wrap,.footer-grid,.grid-3,.grid-2{gap:16px}
  .menu-wrap{margin-top:16px}
  .socials{gap:10px}
  .socials a{width:100%;justify-content:center;text-align:center}
  .speisen-gallery{
    grid-template-columns:1fr;
    gap:12px;
  }
  .speisen-gallery img{height:230px}
  .speisen-premium-top{padding:0 10px}
  .speisen-text-premium{
    margin-top:16px;
    padding:0 10px;
  }
  .speisen-threecol{gap:16px}
  .speisen-image-card{padding:10px}
  .speisen-image-card figcaption{font-size:.9rem}
  .map-frame{min-height:300px}
  .copy{flex-direction:column;gap:8px}
  .lightbox-dialog{
    width:min(100% - 12px, 1100px);
    max-height:calc(100vh - 12px);
    margin:6px auto;
    border-radius:18px;
  }
  .lightbox-head{padding:14px 16px 8px}
  .lightbox-body{max-height:calc(100vh - 90px)}
}

/* small phones */
@media (max-width:480px){
  .container{width:min(100% - 16px, 1160px)}
  .section{padding:28px 0 !important}
  .nav{left:8px;right:8px;top:74px;padding:14px}
  .nav-toggle{width:42px;height:42px;border-radius:12px}
  .brand{gap:8px}
  .brand img{width:50px}
  .brand-text strong{font-size:.96rem}
  .brand-text span{font-size:.7rem}
  .cta{padding:12px 16px;font-size:.96rem}
  .hero{padding:28px 0 22px}
  .hero-facts li{padding:10px 0}
  .tile,.menu-panel,.story-copy,.speisen-menu-card,.speisen-text-inner{padding:16px}
  .speisen-gallery img{height:210px}
  .map-frame{min-height:260px}
}
.socials{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}

.social-link{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 18px;
  border-radius:999px;

  background:rgba(255,255,255,.9);
  border:1px solid var(--line);

  text-decoration:none;
  font-weight:600;
  color:var(--text);

  transition:all .25s ease;
  box-shadow:0 6px 14px rgba(74,67,52,.08);
}

/* SVG Styling */
.social-icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

/* Hover allgemein */
.social-link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(74,67,52,.14);
}

/* Instagram Stil */
.social-link.insta:hover{
  color:#a04bd9;
  border-color:#e0c6ff;
  background:linear-gradient(135deg,#fff,#f6ebff);
}

/* Facebook Stil */
.social-link.fb:hover{
  color:#1877f2;
  border-color:#cfe0ff;
  background:linear-gradient(135deg,#fff,#eef4ff);
}

@media (max-width:640px){
  .social-link{
    width:100%;
    justify-content:center;
  }
 }
 
 
 /* ===== LIGHTBOX UPGRADE ===== */

.lightbox {
  opacity: 0;
  transition: opacity .3s ease;
}

.lightbox.open {
  display: block;
  opacity: 1;
}

.lightbox-backdrop {
  background: rgba(20,20,20,.85);
  backdrop-filter: blur(6px);
}

.lightbox-dialog {
  transform: scale(.92);
  opacity: 0;
  transition: all .3s ease;
}

.lightbox.open .lightbox-dialog {
  transform: scale(1);
  opacity: 1;
}

.lightbox-body img {
  width: 100%;
  height: auto;
  animation: zoomIn .35s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Galerie klickbar machen */
.speisen-gallery img {
  cursor: zoom-in;
}