/* Hellas Grill – statischer Nachbau (ProntoSite-Spec) · moderne Variante, Animationen nur per CSS */

/* ---------- Schriften (lokal) ---------- */
@font-face{font-family:"Lalezar";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lalezar-v14-latin-regular.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/open-sans-v34-latin-regular.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/open-sans-v34-latin-600.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/open-sans-v34-latin-700.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/roboto-v30-latin-500.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/roboto-v30-latin-700.woff2) format("woff2")}

/* ---------- Variablen ---------- */
:root{
  --base:#d9ccc1;
  --muted:#a89a8f;
  --accent:#9cc40b;
  --accent-2:#c4ec2c;
  --link:#d0f747;
  --white:#fff;
  --glass:rgba(16,13,11,.55);
  --glass-strong:rgba(12,10,8,.9);
  --line:rgba(255,255,255,.08);
  --radius:18px;
  --radius-s:12px;
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,.8,.24,1);
  --head-font:"Lalezar",Helvetica,Arial,Verdana,sans-serif;
  --body-font:"Open Sans",Helvetica,Arial,Verdana,sans-serif;
  --ui-font:"Roboto",Helvetica,Arial,Verdana,sans-serif;
  --gutter:50px;
  --wrap:1300px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0d0b09;color:var(--base);font:400 15px/1.8 var(--body-font);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#111}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:var(--link);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--accent-2)}
p{margin:0 0 12px}
b,strong{font-weight:700;color:#f1e8e1}
h1,h2,h3,h4{font-family:var(--head-font);font-weight:400;text-transform:uppercase;color:var(--white);margin:0 0 12px;letter-spacing:.01em}
h1{font-size:44px;line-height:1.15}
h2{font-size:34px;line-height:1.25;color:#efe5dc}
h3{font-size:24px;line-height:1.3}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:5px;left:5px;z-index:10000;width:auto;height:auto;clip:auto;background:#fff;color:#000;padding:10px 20px}

/* Seitenhintergrund: Holz, fixiert, mit Abdunklung für Tiefe */
.page{min-height:100vh;position:relative;background:
  radial-gradient(1200px 600px at 50% 0%,rgba(156,196,11,.07),transparent 60%),
  linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25)),
  #000 url(/img/body-bg.webp) left top/100% 100% no-repeat;background-attachment:fixed}

/* ---------- Header (Desktop) ---------- */
.masthead{position:relative;z-index:50;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.top-bar{max-width:var(--wrap);margin:0 auto;padding:5px var(--gutter);display:flex;justify-content:flex-end;flex-wrap:wrap;font-size:13px;line-height:19px;color:var(--muted)}
.top-bar__item{display:inline-flex;align-items:center;margin-left:18px;white-space:nowrap}
.top-bar__item:first-child{margin-left:0;margin-right:auto}
.top-bar__item svg{width:15px;height:15px;margin-right:6px;fill:var(--accent);flex:none}
.top-bar__item b{margin-right:4px;color:var(--base);font-weight:600}
.top-bar a{color:inherit}
.top-bar a:hover{color:var(--accent-2)}

.header-bar{max-width:1200px;height:100px;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center}
.header-bar .nav{flex:1 1 0;display:flex}
.branding{flex:none;padding:10px 20px 0;align-self:flex-start}
.branding a{display:block}
.branding img{display:block;width:260px;height:160px;margin-bottom:-80px;position:relative;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));transform-origin:50% 0;transition:filter .3s var(--ease)}
.branding a:hover img{filter:drop-shadow(0 12px 28px rgba(156,196,11,.35))}
.main-nav{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;flex:1 1 0}
.main-nav li{margin:20px 2px}
.main-nav a{position:relative;display:flex;align-items:center;height:60px;padding:0 18px;border-radius:12px;color:var(--white);font:400 17px/21px var(--head-font);text-transform:uppercase;letter-spacing:.03em;transition:color .25s var(--ease),background-color .25s var(--ease)}
.main-nav a::after{content:"";position:absolute;left:18px;right:18px;bottom:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.main-nav a:hover{color:var(--accent-2);background:rgba(255,255,255,.05)}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.main-nav a[aria-current="page"]{color:var(--accent-2);background:rgba(156,196,11,.12)}

/* Mobile-Header (ausgeblendet auf Desktop) */
.mobile-bar,.nav-toggle,.drawer{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;line-height:0;max-width:1600px;margin:0 auto;overflow:hidden;background:#000;border-radius:0 0 clamp(0px,calc(100vw - 1600px),28px) clamp(0px,calc(100vw - 1600px),28px)}
.hero__slides{position:relative;height:clamp(420px,37.5vw,600px);overflow:hidden}
.hero__slide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero__slide:not(:first-child){opacity:0}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,6,5,.82) 0%,rgba(8,6,5,.45) 38%,rgba(8,6,5,0) 70%),
  linear-gradient(0deg,rgba(8,6,5,.75) 0%,rgba(8,6,5,0) 45%);pointer-events:none}
.hero__content{position:absolute;z-index:1;left:0;right:0;bottom:0;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) clamp(36px,5vw,70px);line-height:1.6}
.hero h1{font-size:clamp(40px,5.2vw,72px);line-height:1;margin:0 0 16px;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.eyebrow{display:inline-block;margin:0 0 18px;padding:6px 14px;border:1px solid rgba(196,236,44,.35);border-radius:999px;background:rgba(156,196,11,.14);color:var(--accent-2);font:500 12px/1.4 var(--ui-font);text-transform:uppercase;letter-spacing:.18em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero__lead{max-width:520px;font-size:clamp(15px,1.4vw,18px);color:#efe6df;margin:0 0 26px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}

.hero--sub .hero__slides{height:clamp(340px,30vw,480px)}
.hero__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}

/* ---------- Kennzahlen ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:0 0 44px}
.stat{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:baseline;padding:24px 22px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.stat::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.stat__num,.stat__suffix{font:400 54px/1 var(--head-font);background:linear-gradient(135deg,#fff 10%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__suffix{margin-left:2px}
.stat__label{flex-basis:100%;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--base)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border:1px solid transparent;border-radius:999px;background:linear-gradient(135deg,var(--accent),#b5df12);color:#10140a;font:700 14px/16px var(--ui-font);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 22px rgba(156,196,11,.25);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),color .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(156,196,11,.4);color:#10140a}
.btn:active{transform:translateY(0)}
.btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.14);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.btn--block{display:flex;width:100%}

/* ---------- Seitentitel ---------- */
.page-title .wf-wrap{max-width:var(--wrap);margin:0 auto;padding:56px var(--gutter) 0}
.page-title h1{margin:0}
.page-title h1::after,.content h2::after{content:"";display:block;width:56px;height:3px;margin-top:12px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.content h2.center::after{margin-left:auto;margin-right:auto}

/* ---------- Hauptbereich ---------- */
.main{padding:64px 0 80px}
.wf-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.layout{display:flex;align-items:flex-start;gap:40px}
.content{flex:1 1 auto;min-width:0}
.sidebar{flex:0 0 330px;width:330px}

.content h2{margin-top:48px}
.content > :first-child,.content .row:first-child h2:first-child{margin-top:0}
.content h2.center{text-align:center}
.emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;text-transform:none}

.row{display:grid;grid-template-columns:1fr;column-gap:30px;margin-bottom:28px}
.row:last-child{margin-bottom:0}
.row--1-2{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .4s var(--ease),border-color .4s var(--ease)}
.row--1-2:hover{transform:translateY(-3px);border-color:rgba(156,196,11,.3)}
.row--1-2 p:last-child{margin-bottom:0}
.row--1-2 .media img{aspect-ratio:3/2;height:auto;object-fit:cover}
.row--1-2 h3{margin:0 0 10px;font-size:24px;line-height:1.25;color:#fff}
.row img{display:block}

/* Bild mit Zoom beim Hover */
.media{display:block;overflow:hidden;border-radius:var(--radius-s);line-height:0}
.media img{width:100%;transition:transform .7s var(--ease),filter .7s var(--ease)}
.media:hover img{transform:scale(1.06);filter:saturate(1.15)}

/* „Mehr erfahren" mit Pfeil */
.more{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--ui-font);text-transform:uppercase;letter-spacing:.08em}
.more::after{content:"→";transition:transform .3s var(--ease)}
.more:hover::after{transform:translateX(5px)}

/* Sidebar-Widgets */
.widget{position:relative;overflow:hidden;background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:26px;margin-bottom:24px;font-size:14px;line-height:1.75}
.widget:first-child::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.widget:last-child{margin-bottom:0}
.widget-title{display:flex;align-items:center;gap:10px;font:400 17px/1.4 var(--head-font);text-transform:uppercase;color:var(--white);margin:0 0 14px}
.widget-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(156,196,11,.18)}
.widget p{margin:0 0 10px}
.widget p:last-child{margin-bottom:0}

.info-list{list-style:none;margin:0;padding:0}
.info-list li{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px}
.info-list li:last-child{margin-bottom:0}
.info-list b{color:#f1e8e1}
.info-ico{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-top:2px;border-radius:10px;background:rgba(156,196,11,.14);border:1px solid rgba(196,236,44,.22)}
.info-ico svg{width:15px;height:15px;fill:var(--accent-2)}

.content h2.ways-heading{margin:52px 0 22px}
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.way{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .35s var(--ease),border-color .35s}
.way:hover{transform:translateY(-3px);border-color:rgba(156,196,11,.3)}
.way__ico{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#b5df12)}
.way__ico svg{width:24px;height:24px;fill:#10140a}
.way h3{margin:0 0 6px;font-size:20px;line-height:1.3;color:#fff}
.way p{margin:0 0 8px;font-size:14px;line-height:1.7}
.way p:last-child{margin-bottom:0}
.way__hint{color:var(--accent-2);font:500 13px/1.5 var(--ui-font)}
.ways-note{margin-top:18px;font-size:12.5px;color:var(--muted)}
@media (max-width:1200px){.ways{grid-template-columns:1fr}}

/* Galerie (Masonry) */
.gallery{columns:3;column-gap:16px}
.gallery a{display:block;margin:0 0 16px;break-inside:avoid;line-height:0;overflow:hidden;border-radius:var(--radius-s);box-shadow:0 10px 26px rgba(0,0,0,.3);position:relative}
.gallery a::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(156,196,11,.25),transparent 55%);opacity:0;transition:opacity .5s var(--ease)}
.gallery img{width:100%;transition:transform .8s var(--ease)}
.gallery a:hover img{transform:scale(1.07)}
.gallery a:hover::after{opacity:1}

.gallery-tabs{display:flex;gap:10px;margin:0 0 10px}
.gallery-tabs a{padding:9px 20px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#efe6df;font:500 13px/1.2 var(--ui-font);letter-spacing:.03em;transition:background-color .25s,border-color .25s,color .25s}
.gallery-tabs a:hover{background:rgba(156,196,11,.16);border-color:rgba(196,236,44,.5);color:var(--accent-2)}
.content h2.gallery-heading{margin:44px 0 22px;scroll-margin-top:calc(var(--sticky-top,0px) + 30px)}
.gallery{columns:4}
.gallery--grid{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,13vw,200px);gap:16px}
.gallery--grid a{margin:0;height:100%}
.gallery--grid a.tall{grid-row:span 2}
.gallery--grid img{height:100%;object-fit:cover}
@media (max-width:990px){.gallery--grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(140px,30vw,220px)}}
@media (max-width:1200px){.gallery{columns:3}}
/* Lightbox (rein per CSS: :target + :has, Wischen per Scroll-Snap, ohne JavaScript) */
.lightboxes{position:fixed;inset:0;z-index:2000;display:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-blocked:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:rgba(8,6,5,.96)}
.lightboxes::-webkit-scrollbar{display:none}
.lightboxes:has(.lightbox:target){display:flex;animation:fade-in .3s ease both}
.lightbox{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:56px 76px;scroll-snap-align:center;scroll-snap-stop:always}
.lightbox__bg{position:absolute;inset:0;cursor:zoom-out}
.lightbox figure{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(1300px,100%);pointer-events:none}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 150px);border-radius:var(--radius-s);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:lb-zoom .45s var(--ease) both}
.lightbox figcaption{margin-top:14px;font-size:14px;color:#efe6df;text-align:center}
.lightbox figcaption span{margin-left:10px;color:var(--muted);font:500 12px/1 var(--ui-font)}
.lightbox__btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(196,236,44,.35);border-radius:50%;background:rgba(156,196,11,.16);color:var(--accent-2);font:400 30px/1 var(--ui-font);text-decoration:none;transition:background-color .25s,color .25s,transform .25s var(--ease)}
.lightbox__btn:hover{background:var(--accent);color:#10140a;text-decoration:none;transform:scale(1.06)}
.lightbox__prev{left:16px;top:50%;margin-top:-24px}
.lightbox__next{right:16px;top:50%;margin-top:-24px}
.lb-close{position:fixed;top:16px;right:16px;z-index:2001;display:none;font-size:28px}
.lightboxes:has(.lightbox:target) + .lb-close{display:flex}
/* Moderne Browser: feste Pfeile am Rand (::scroll-button), scrollen nicht mit */
@supports selector(::scroll-button(*)){
  .lightbox .lightbox__prev,.lightbox .lightbox__next{display:none}
  .lightboxes::scroll-button(*){position:fixed;top:50%;z-index:2001;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-top:-24px;padding:0;border:1px solid rgba(196,236,44,.35);border-radius:50%;background:rgba(156,196,11,.16);color:var(--accent-2);font:400 30px/1 var(--ui-font);cursor:pointer;transition:background-color .25s,color .25s}
  .lightboxes::scroll-button(*):hover{background:var(--accent);color:#10140a}
  .lightboxes::scroll-button(*):disabled{opacity:.25;cursor:default}
  .lightboxes::scroll-button(left){content:"‹" / "Vorheriges Bild";left:16px}
  .lightboxes::scroll-button(right){content:"›" / "Nächstes Bild";right:16px}
}
/* Mit JavaScript (js/lightbox.js): Öffnen per Klasse, feste Pfeile, ESC/Pfeiltasten */
.lb-nav{display:none}
html.lb-js .lightboxes,html.lb-js .lightboxes:has(.lightbox:target){display:none}
html.lb-js .lightboxes.is-open{display:flex;animation:fade-in .3s ease both}
html.lb-js .lb-close{display:none}
html.lb-js .lightboxes.is-open ~ .lb-close,html.lb-js .lightboxes.is-open ~ .lb-nav{display:flex}
html.lb-js .lightbox .lightbox__prev,html.lb-js .lightbox .lightbox__next{display:none}
html.lb-open{overflow:hidden}
.lb-nav{position:fixed;top:50%;margin-top:-24px;z-index:2001;padding:0;cursor:pointer}
.lb-prev{left:16px}
.lb-next{right:16px}
@supports selector(::scroll-button(*)){html.lb-js .lightboxes::scroll-button(*){display:none}}
/* Andere Browser auf Touch-Geräten: Wischen statt mitlaufender Pfeile */
@supports not selector(::scroll-button(*)){
  @media (pointer:coarse){.lightbox .lightbox__prev,.lightbox .lightbox__next{display:none}}
}
@keyframes lb-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (max-width:700px){
  .lightbox{padding:64px 12px 90px}
  .lightbox img{max-height:calc(100vh - 200px)}
  .lightbox__prev,.lightbox__next{top:auto;bottom:22px;margin-top:0;width:44px;height:44px}
  .lightboxes::scroll-button(*){top:auto;bottom:22px;margin-top:0;width:44px;height:44px}
  .lb-nav{top:auto;bottom:22px;margin-top:0;width:44px;height:44px}
  .lb-prev{left:calc(50% - 56px)}
  .lb-next{right:calc(50% - 56px)}
  .lightboxes::scroll-button(left){left:calc(50% - 56px)}
  .lightboxes::scroll-button(right){right:calc(50% - 56px)}
  .lightbox__prev{left:calc(50% - 56px)}
  .lightbox__next{right:calc(50% - 56px)}
}

/* Karte */
.map{margin-top:26px;line-height:0;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.map iframe{width:100%;height:450px;border:0}
.map-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:22px 0 0}
.map-cta span{font-size:14px;color:var(--muted)}

/* Formular */
.form{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.form p{margin:0 0 20px}
.form p:last-child{margin-bottom:0}
.form label{display:block;font:500 13px/1.5 var(--ui-font);letter-spacing:.04em;color:#efe6df}
.form input[type=text],.form input[type=email],.form textarea{display:block;width:100%;margin-top:8px;padding:12px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-s);color:#f6efe9;font:400 15px/1.5 var(--body-font);transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s}
.form textarea{height:200px;resize:vertical}
.form input:hover,.form textarea:hover{border-color:rgba(255,255,255,.28)}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--accent);background:rgba(255,255,255,.08);box-shadow:0 0 0 4px rgba(156,196,11,.2)}
.form .check{display:flex;gap:12px;align-items:flex-start;font:400 13px/1.7 var(--body-font);color:var(--base);letter-spacing:0}
.form .check input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--accent)}

/* Rechtstexte (ProntoSite-Widget im Seiten-Stil) */
.legal{min-height:200px}
html:root{--ps-w-font:"Open Sans",Helvetica,Arial,Verdana,sans-serif;--ps-w-font-text:"Open Sans",Helvetica,Arial,Verdana,sans-serif;--ps-w-text:#d9ccc1;--ps-w-link:#d0f747}
.content .ps-legal{max-width:none;margin:0;padding:0;font:400 15px/1.8 var(--body-font);color:var(--base)}
.content .ps-legal p,.content .ps-legal li,.content .ps-legal td,.content .ps-legal th,.content .ps-legal em{color:var(--base);font-family:var(--body-font)}
.content .ps-legal p{margin:0 0 12px}
.content .ps-legal strong,.content .ps-legal b{color:#f1e8e1;font-weight:700}
.content .ps-legal a{color:var(--link);word-break:break-word}
.content .ps-legal a:hover{color:var(--accent-2)}
.content .ps-legal h2,.content .ps-legal h3,.content .ps-legal h4{font-family:var(--head-font)!important;font-weight:400;text-transform:uppercase!important;letter-spacing:.01em!important;color:#efe5dc}
.content .ps-legal h2{font-size:24px;line-height:1.25;margin:40px 0 12px}
.content .ps-legal h3{font-size:19px;line-height:1.3;margin:26px 0 8px}
.content .ps-legal h4{font-size:16px;line-height:1.3;margin:20px 0 6px}
.content .ps-legal h2::after{width:40px;margin-top:10px}
.content .ps-legal > section:first-of-type h2,.content .ps-legal-draft + section h2{margin-top:0}
.content .ps-legal ul,.content .ps-legal ol{margin:0 0 12px;padding-left:22px}
.content .ps-legal li{margin-bottom:4px}
.content .ps-legal-draft{margin:0 0 32px;padding:14px 18px;border:1px solid rgba(196,236,44,.3);border-radius:var(--radius-s);background:rgba(156,196,11,.1);color:#efe6df;font-size:13.5px}
.content .ps-legal-stand{color:var(--muted);font-size:13px;opacity:1}

/* ---------- Footer ---------- */
.footer{position:relative;background:var(--glass-strong);color:var(--muted)}
.footer::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.footer-cta .wf-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.footer-cta .eyebrow{margin-bottom:12px}
.footer-cta__title{margin:0 0 6px;font:400 clamp(26px,3vw,36px)/1.15 var(--head-font);text-transform:uppercase;color:#fff}
.footer-cta__text p:last-child{margin:0;color:var(--base)}
.footer .footer-cta__btn,.footer .footer-cta__btn:hover{flex:none;font-size:16px;padding:16px 28px;color:#10140a}
.footer-cta__btn svg{width:18px;height:18px;fill:currentColor}
@media (max-width:778px){.footer-cta .wf-wrap{flex-direction:column;align-items:stretch;text-align:left}.footer-cta__btn{width:100%}}
.bottom-bar .wf-wrap{min-height:72px;padding-top:16px;padding-bottom:16px;display:flex;align-items:center;font-size:13px;line-height:23px}
.footer a{color:#efe6df}
.footer a:hover{color:var(--accent-2)}
.footer .ps-badge,.footer .ps-badge-link{white-space:nowrap}
.footer .ps-badge-link{color:#efe6df!important}
.footer .ps-badge-link:hover{color:var(--accent-2)!important}
.footer .ps-badge::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:url(/img/prontosite-favicon.svg) center/contain no-repeat}
.footer .sep{margin:0 4px;opacity:.4}

/* ---------- Digitale Speisekarte ---------- */
.menu-intro{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:28px}
.menu-intro p{max-width:640px;margin:0}
.pdf-card{flex:none;display:flex;align-items:center;gap:14px;padding:16px 22px 16px 16px;border:1px solid rgba(196,236,44,.3);border-radius:var(--radius);background:linear-gradient(135deg,rgba(156,196,11,.18),rgba(156,196,11,.06));color:#fff;box-shadow:var(--shadow);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.pdf-card:hover{color:#fff;transform:translateY(-3px);border-color:var(--accent-2);box-shadow:0 18px 40px rgba(156,196,11,.22)}
.pdf-card__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#b5df12);color:#10140a}
.pdf-card__icon svg{width:24px;height:24px;fill:currentColor}
.pdf-card:hover .pdf-card__icon svg{animation:bob .8s var(--ease) infinite alternate}
.pdf-card__text{display:flex;flex-direction:column;line-height:1.35}
.pdf-card__text b{font:700 15px/1.3 var(--ui-font);color:#fff}
.pdf-card__text small{font-size:12px;color:var(--muted)}
@keyframes bob{to{transform:translateY(3px)}}

.menu-nav{position:sticky;top:calc(var(--sticky-top,0px) + 10px);z-index:20;margin:0 0 30px;padding:10px;border:1px solid var(--line);border-radius:22px;background:rgba(12,10,8,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
/* Fallback (Firefox, ältere Browser): Chips umbrechen, nichts wird abgeschnitten */
.menu-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.menu-nav a{display:block;white-space:nowrap;padding:8px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#efe6df;font:500 13px/1.2 var(--ui-font);letter-spacing:.03em;transition:background-color .25s,border-color .25s,color .25s}
.menu-nav a:hover{background:rgba(156,196,11,.16);border-color:rgba(196,236,44,.5);color:var(--accent-2)}

/* Moderne Browser: eine Zeile mit Pfeil-Buttons – rein per CSS (::scroll-button) */
@supports selector(::scroll-button(*)){
  .menu-nav{padding:10px 56px;border-radius:999px}
  .menu-nav ul{anchor-name:--menu-chips;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-blocked:smooth;scroll-snap-type:x proximity;scroll-padding-inline:4px;scrollbar-width:none}
  .menu-nav ul::-webkit-scrollbar{display:none}
  .menu-nav li{scroll-snap-align:start}
  .menu-nav ul::scroll-button(*){position:absolute;position-anchor:--menu-chips;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid rgba(196,236,44,.35);border-radius:50%;background:rgba(156,196,11,.16);color:var(--accent-2);font:700 18px/1 var(--ui-font);cursor:pointer;transition:background-color .25s,opacity .25s,transform .25s var(--ease)}
  .menu-nav ul::scroll-button(*):hover{background:var(--accent);color:#10140a;transform:scale(1.06)}
  .menu-nav ul::scroll-button(*):disabled{opacity:.3;cursor:default;transform:none;background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--line)}
  .menu-nav ul::scroll-button(left){content:"‹" / "Kategorien nach links";position-area:left center;margin-right:10px}
  .menu-nav ul::scroll-button(right){content:"›" / "Kategorien nach rechts";position-area:right center;margin-left:10px}
}

.menu-grid{columns:2;column-gap:24px}
.menu-cat{break-inside:avoid;display:inline-block;width:100%;margin:0 0 24px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scroll-margin-top:calc(var(--sticky-top,0px) + 80px)}
.menu-cat__media{position:relative;line-height:0;overflow:hidden}
.menu-cat__media img{width:100%;aspect-ratio:2/1;object-fit:cover;transition:transform .9s var(--ease)}
.menu-cat:hover .menu-cat__media img{transform:scale(1.05)}
.menu-cat__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,13,11,.95),rgba(16,13,11,0) 60%)}
.menu-cat__title{position:relative;z-index:1;margin:0;padding:22px 24px 6px;font-size:26px;line-height:1.2}
.menu-cat__media + .menu-cat__title{margin-top:-58px}
.menu-cat__title::after{content:"";display:block;width:44px;height:3px;margin-top:10px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.menu-list{list-style:none;margin:0;padding:6px 24px 14px}
.dish{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.dish:last-child{border-bottom:0}
.dish__nr{flex:none;min-width:34px;height:24px;padding:0 6px;margin-top:1px;border-radius:7px;background:rgba(255,255,255,.06);color:var(--muted);font:500 11px/24px var(--ui-font);text-align:center;letter-spacing:.04em}
.dish__body{flex:1;min-width:0}
.dish__head{display:flex;align-items:baseline;gap:8px}
.dish__name{font-weight:600;color:#f6efe9;line-height:1.45}
.dish__dots{flex:1;min-width:16px;border-bottom:1px dotted rgba(255,255,255,.22);transform:translateY(-4px)}
.dish__size{flex:none;font-size:12px;color:var(--muted)}
.dish__price{flex:none;font:700 15px/1.4 var(--ui-font);color:var(--accent-2);white-space:nowrap}
.dish__desc{margin:3px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.codes{display:inline-block;margin-left:4px;padding:0 6px;border:1px solid rgba(255,255,255,.14);border-radius:6px;font:500 10px/16px var(--ui-font);color:var(--muted);vertical-align:2px;letter-spacing:.04em;cursor:help}
.menu-note{margin:0;padding:12px 24px 18px;font-size:13px;color:#efe6df;border-top:1px solid var(--line);background:rgba(156,196,11,.07)}
.menu-note::before{content:"ⓘ";color:var(--accent-2);margin-right:8px}
.dish:hover .dish__name{color:#fff}
.dish:hover .dish__nr{background:rgba(156,196,11,.2);color:var(--accent-2)}
.dish__nr,.dish__name{transition:background-color .25s,color .25s}

.menu-heading{margin:56px 0 26px;scroll-margin-top:calc(var(--sticky-top,0px) + 80px)}
.menu-cat--drinks .menu-cat__title{font-size:22px}
.sizes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0}
.sizes li{display:flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12.5px;color:var(--muted)}
.sizes b{font:700 13px/1 var(--ui-font);color:var(--accent-2)}

.menu-legend{margin-top:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scroll-margin-top:calc(var(--sticky-top,0px) + 80px)}
.menu-legend summary{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;cursor:pointer;list-style:none;font:400 20px/1.3 var(--head-font);text-transform:uppercase;color:#fff}
.menu-legend summary::-webkit-details-marker{display:none}
.menu-legend summary::after{content:"+";font:400 26px/1 var(--ui-font);color:var(--accent-2);transition:transform .35s var(--ease)}
.menu-legend[open] summary::after{transform:rotate(45deg)}
.menu-legend > p{margin:0;padding:0 24px 8px;font-size:13.5px;color:var(--muted)}
.menu-legend dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 20px;margin:0;padding:6px 24px 22px}
.menu-legend dl div{display:flex;gap:10px;align-items:baseline;font-size:13.5px}
.menu-legend dt{flex:none;min-width:24px;padding:0 6px;border-radius:6px;background:rgba(156,196,11,.16);color:var(--accent-2);font:700 12px/20px var(--ui-font);text-align:center}
.menu-legend dd{margin:0;color:var(--base)}
@media (max-width:990px){
  /* Mobil: Kategorien immer einzeilig, horizontal wischbar (alle Browser) */
  .menu-nav,.menu-nav{padding:8px;border-radius:999px}
  .menu-nav ul{flex-wrap:nowrap;justify-content:flex-start;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .menu-nav ul::-webkit-scrollbar{display:none}
  .menu-nav li{flex:none;scroll-snap-align:start}
  .menu-nav a{padding:7px 14px;font-size:12.5px}
  .menu-nav ul::scroll-button(*){display:none}
  .menu-intro{flex-direction:column;align-items:stretch}
  .menu-grid{columns:1}
}
@media (max-width:560px){
  .menu-list{padding:4px 16px 10px}
  .menu-cat__title{padding:18px 16px 6px;font-size:22px}
  .menu-note{padding:12px 16px 16px}
  .dish{gap:10px}
  .dish__nr{min-width:30px}
  .dish__dots{display:none}
  .dish__head{justify-content:space-between}
}

/* ================= Animationen (nur CSS) ================= */
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hero-fade{0%{opacity:0;transform:scale(1.08)}5%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes drop-in{from{opacity:0;transform:translateY(-24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes reveal{from{opacity:0;transform:translateY(46px) scale(.97)}to{opacity:1;transform:none}}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
@keyframes count-up{from{--n:var(--from,0)}to{--n:var(--to)}}
@keyframes ken-burns{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes logo-shrink{to{transform:translateY(-4px) scale(.56)}}
@keyframes head-solid{to{background:var(--glass-strong);box-shadow:0 12px 34px rgba(0,0,0,.45)}}

@media (prefers-reduced-motion:no-preference){
  html{scroll-blocked:smooth}
  /* Ladeanimationen */
  /* Hero-Slider: 4 Bilder, Überblendung + langsamer Zoom, 4 s pro Bild (16 s Zyklus) */
  .hero__slide{animation:hero-fade 16s linear infinite both}
  .hero__slide:nth-child(2){animation-delay:4s}
  .hero__slide:nth-child(3){animation-delay:8s}
  .hero__slide:nth-child(4){animation-delay:12s}
  .hero__content > *{animation:fade-up .9s var(--ease) both}
  .hero__content > :nth-child(1){animation-delay:.25s}
  .hero__content > :nth-child(2){animation-delay:.4s}
  .hero__content > :nth-child(3){animation-delay:.55s}
  .hero__content > :nth-child(4){animation-delay:.7s}
  .hero__img{animation:ken-burns 12s var(--ease) both}
  .header-bar .branding img{animation:drop-in .9s var(--ease) .1s both}
  .page-title h1{animation:fade-up .8s var(--ease) both}
  .page-title h1::after{transform-origin:left;animation:grow-x .9s var(--ease) .35s both}

  /* Scroll-Reveal & Sticky-Header (Chrome, Edge, Safari 26+; sonst statisch sichtbar) */
  @supports (animation-timeline:view()){
    .content .row,.content .gallery a,.content .form,.content .map,.widget,.menu-cat,.pdf-card,.stat,.way{
      animation:reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 28%;
    }
    .stat__num{--n:var(--to);counter-reset:n var(--n);animation:count-up linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    .stat__num::before{content:counter(n) / "";font:inherit}
    .stat__val{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    @media (min-width:991px){
      :root{--sticky-top:100px}
      .masthead{position:sticky;top:-29px;animation:head-solid linear both;animation-timeline:scroll(root block);animation-range:0 180px}
      .header-bar .branding img{animation:logo-shrink linear both;animation-timeline:scroll(root block);animation-range:0 180px}
    }
  }
}

/* ---------- Mobile (≤ 990px) ---------- */
@media (max-width:990px){
  :root{--gutter:20px}
  .header-bar{display:none}
  /* kein backdrop-filter am Header: sonst wird der fixed-Drawer darin eingesperrt */
  .masthead{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,11,9,.92)}
  .top-bar{justify-content:center;padding:6px 20px;text-align:center}
  .top-bar__item{white-space:normal;margin:0 6px}
  .top-bar__item:first-child{display:none}
  .mobile-bar{display:flex;position:relative;height:57px;padding:0 20px;align-items:center;justify-content:center}
  .mobile-bar .branding{position:absolute;left:50%;top:0;transform:translateX(-50%);padding:0;z-index:2}
  .mobile-bar .branding img{width:120px;height:74px;margin-bottom:-37px}
  .nav-toggle{display:flex;position:absolute;right:20px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;align-items:center;justify-content:center;border:1px solid rgba(196,236,44,.3);border-radius:12px;background:rgba(156,196,11,.14);color:var(--accent-2);cursor:pointer;transition:background-color .25s}
  .nav-toggle:hover{background:rgba(156,196,11,.25)}
  .nav-toggle svg{width:22px;height:16px;fill:currentColor}
  .hero__slides{height:min(78vh,520px)}
  .hero__slide{object-position:55% 50%}
  .hero::after{background:linear-gradient(0deg,rgba(8,6,5,.92) 0%,rgba(8,6,5,.55) 45%,rgba(8,6,5,.1) 80%)}
  .hero__content{padding-bottom:32px}
  .layout{display:block}
  .sidebar{width:auto;margin-top:48px}
  .row--1-2{grid-template-columns:1fr;row-gap:18px}
  .gallery{columns:2}
  .form{padding:22px}

  /* Drawer – fährt von rechts herein */
  .nav-toggle[aria-expanded="true"] ~ .drawer{display:block}
  .drawer{position:fixed;inset:0;z-index:1000}
  .drawer__backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;animation:fade-in .3s ease both}
  .drawer__panel{position:absolute;top:0;right:0;bottom:0;width:320px;max-width:86vw;overflow-y:auto;display:flex;flex-direction:column;gap:28px;padding:84px 28px 32px;background:linear-gradient(180deg,#1c1815,#0e0c0a);border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(0,0,0,.55);animation:slide-in .45s var(--ease) both}
  .drawer__close{position:absolute;top:14px;right:16px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;animation:fade-in .4s ease .15s both;transition:background-color .25s,transform .35s var(--ease)}
  .drawer__close:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
  .drawer__close svg{width:18px;height:18px;fill:currentColor}
  .drawer .mobile-nav{list-style:none;margin:0;padding:0}
  .drawer .mobile-nav li{border-bottom:1px solid var(--line);animation:fade-up .5s var(--ease) both}
  .drawer .mobile-nav li:nth-child(1){animation-delay:.1s}
  .drawer .mobile-nav li:nth-child(2){animation-delay:.15s}
  .drawer .mobile-nav li:nth-child(3){animation-delay:.2s}
  .drawer .mobile-nav li:nth-child(4){animation-delay:.25s}
  .drawer .mobile-nav li:nth-child(5){animation-delay:.3s}
  .drawer .mobile-nav li:nth-child(6){animation-delay:.35s}
  .drawer .mobile-nav a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;color:#fff;font:400 24px/1.2 var(--head-font);text-transform:uppercase;letter-spacing:.02em}
  .drawer .mobile-nav a::after{content:"→";font:400 18px/1 var(--ui-font);color:var(--muted);transition:transform .3s var(--ease),color .3s}
  .drawer .mobile-nav a:hover::after{transform:translateX(4px);color:var(--accent-2)}
  .drawer .mobile-nav a[aria-current="page"]{color:var(--accent-2)}
  .drawer__meta{margin-top:auto;font-size:13px;line-height:1.7;color:var(--muted);animation:fade-up .5s var(--ease) .4s both}
  .drawer__meta p{margin:14px 0 0}
  .drawer__hours{display:flex;gap:10px;align-items:flex-start}
  .drawer__hours svg{flex:none;width:16px;height:16px;margin-top:3px;fill:var(--accent)}
  .drawer__hours b{color:var(--base);font-weight:600}
}
@media (max-width:778px){
  h1{font-size:34px}
  h2{font-size:28px}
  .page-title .wf-wrap{padding-top:40px}
}
@media (max-width:560px){
  .gallery{columns:1}
  .map iframe{height:320px}
  .hero__cta .btn{flex:1 1 auto}
}
@keyframes slide-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}