/* Schmelztiegel – Farben aus dem Logo: Tiegel-Schwarz, Ziegelrot, Teig-Creme.
   Headlines in Rozha One (nah an der Logo-Wortmarke), UI in Barlow Condensed, Fließtext Barlow. */
/* Schriften lokal gehostet (keine Verbindung zu Google beim Seitenaufruf) */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/barlow-condensed-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/barlow-condensed-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/barlow-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/barlow-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Rozha One';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/rozha-one-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Rozha One';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/rozha-one-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ink:#141411;
  --coal:#1d1a16;
  --ember:#a9341c;
  --ember-hi:#c9442a;
  --glow:#ff6a2b;
  --cream:#f3e6cf;
  --crust:#f3dbbe;
  --paper:#f7efe1;
  --basil:#2f5a35;
  --line:#ddcfb6;
  --line-dark:#f3e6cf26;
  --muted:#6e6253;
  --muted-dark:#bcae98;
  --display:'Rozha One',Georgia,'Times New Roman',serif;
  --cond:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --sans:'Barlow',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:17px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--glow);outline-offset:5px}

/* Topline + Header */
.topline{text-align:center;background:var(--ember);color:var(--cream);font:700 14px var(--cond);letter-spacing:2.5px;padding:10px 15px}
.header{height:108px;margin:0 5.4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-dark);gap:28px}
.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.brand-icon{width:58px;height:auto;flex-shrink:0}
.brand-word{width:190px;height:auto}
.header nav{display:flex;gap:38px;font:700 17px var(--cond);text-transform:uppercase;letter-spacing:1.2px}
.header nav a:hover{color:var(--glow)}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:52px;border:1px solid var(--cream);padding:0 23px;font:700 17px var(--cond);text-transform:uppercase;letter-spacing:1.2px;border-radius:3px;transition:background .2s,transform .2s,border-color .2s}
.button:hover{transform:translateY(-2px)}
.button span{font-size:22px;font-weight:500}
.icon{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.header-actions{display:flex;gap:10px;flex-shrink:0}
.contact-button{justify-content:center;gap:10px}
.contact-button .label{font-size:inherit;font-weight:inherit}
.header-actions .contact-button{min-height:46px;padding:0 18px}
.contact-button.call{background:var(--ember);border-color:var(--ember)}
.contact-button.call:hover{background:var(--ember-hi);border-color:var(--ember-hi)}
.contact-button.whatsapp{border-color:#f3e6cf66}
.contact-button.whatsapp:hover{background:#f3e6cf14;border-color:var(--cream)}
.primary{background:var(--ember);border-color:var(--ember);color:var(--cream)}
.primary:hover{background:var(--ember-hi);border-color:var(--ember-hi)}

/* Hero */
.hero{position:relative;padding:58px 5.4% 0;display:grid;grid-template-columns:1fr 1.02fr;overflow:hidden;isolation:isolate}
.hero:before{content:'';position:absolute;z-index:-1;right:-10%;bottom:-30%;width:80%;aspect-ratio:1;background:radial-gradient(closest-side,#a9341c33,transparent)}
.eyebrow{font:700 14px/1.8 var(--cond);letter-spacing:2.5px;margin:0 0 22px;color:var(--muted-dark)}
.little-line{display:inline-block;width:25px;height:1px;background:var(--glow);vertical-align:middle;margin-right:9px}
.hero-copy{z-index:2;padding-bottom:52px;align-self:center}
h1{font:400 clamp(60px,6.6vw,100px)/1 var(--display);letter-spacing:-.01em;margin:0 0 27px;color:var(--cream)}
h1 em,h2 em{font-style:normal;color:var(--ember-hi)}
h1 em{position:relative;display:inline-block;color:var(--glow)}
/* Schwung unter dem Wort – wie unter der Logo-Wortmarke */
h1 em:after{content:'';position:absolute;left:-2%;right:-4%;bottom:-.04em;height:.16em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 14C50 3 130 1 198 6c-60 0-130 3-196 8z' fill='%23a9341c'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.intro{line-height:1.7;color:var(--muted-dark);font-size:18px;margin:0 0 30px;max-width:520px}
.hero-note{display:flex;align-items:center;gap:10px;font:600 15px var(--cond);letter-spacing:1px;text-transform:uppercase;color:var(--muted-dark);margin-top:26px}
.hero-note>span{color:var(--glow);font-size:22px}

/* Der kochende Tiegel */
.tiegel-stage{position:relative;min-width:0;align-self:center;aspect-ratio:1;transform:translate(8px,-14px)}
.tiegel-glow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,#ff7a35 0%,#e2522a 34%,#a9341c 58%,#a9341c00 100%);filter:blur(6px);animation:glow 3.2s ease-in-out infinite}
.tiegel-ring{position:absolute;inset:1%;border:1px solid var(--line-dark);border-radius:50%}
.tiegel-ring:after{content:'';position:absolute;inset:5%;border:1px dashed #f3e6cf1f;border-radius:50%}
.tiegel-anim{position:absolute;left:17%;right:17%;top:10%;bottom:14%}
.tiegel-img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 92%;animation:brodeln 2.6s ease-in-out infinite;filter:drop-shadow(0 26px 22px #0009)}
/* Dampf über dem Rand */
.steam{position:absolute;z-index:1;left:12%;right:12%;top:8%;height:40%}
.steam i{position:absolute;bottom:0;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#f3e6cf66,#f3e6cf00);filter:blur(10px);opacity:0;animation:dampf 5s ease-out infinite}
.steam i:nth-child(1){left:2%;animation-delay:0s}
.steam i:nth-child(2){left:68%;animation-delay:1.3s}
.steam i:nth-child(3){left:16%;animation-delay:2.6s;width:20%}
.steam i:nth-child(4){left:76%;animation-delay:3.7s;width:20%}
/* Blasen auf der Oberfläche (links und rechts der Flamme) */
.bubbles{position:absolute;z-index:3;left:0;right:0;top:33.5%;height:6%;pointer-events:none}
.bubbles i{position:absolute;top:0;width:4.2%;aspect-ratio:1;border-radius:50%;border:2px solid var(--crust);background:#f3dbbe55;transform:scale(0);opacity:0;animation:blubb 2.4s ease-in infinite}
.bubbles i:nth-child(1){left:20%;animation-delay:.1s}
.bubbles i:nth-child(2){left:28%;animation-delay:1.2s;width:3%}
.bubbles i:nth-child(3){left:72%;animation-delay:.6s}
.bubbles i:nth-child(4){left:78%;animation-delay:1.8s;width:3%}
.bubbles i:nth-child(5){left:24%;animation-delay:2s;width:2.6%}
.bubbles i:nth-child(6){left:67%;animation-delay:1.5s;width:2.6%}
/* Funken – werden in app.js erzeugt */
.sparks{position:absolute;z-index:3;left:30%;right:30%;top:2%;height:30%;pointer-events:none}
.sparks i{position:absolute;bottom:0;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#ffb347;box-shadow:0 0 8px 2px #ff6a2b;opacity:0;animation:funke var(--d) linear var(--delay) infinite}
/* Eigenes Video ersetzt die CSS-Animation, sobald assets/tiegel.mp4 existiert */
.tiegel-video{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;border-radius:50%;mix-blend-mode:lighten;display:none}
.has-video .tiegel-video{display:block}
.has-video .tiegel-anim{display:none}
.round-stamp{position:absolute;z-index:4;right:0;top:0;width:119px;height:119px;border-radius:50%;background:var(--cream);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(13deg);box-shadow:0 0 0 5px var(--ink)}
.round-stamp span{font:700 11px var(--cond);letter-spacing:2px}
.round-stamp strong{font:400 34px/1.1 var(--display);color:var(--ember)}
.round-stamp .stamp-halal{font-size:18px;letter-spacing:2.5px}
.tiegel-caption{position:absolute;left:14%;bottom:-40px;right:14%;text-align:center;font:700 13px var(--cond);letter-spacing:3px;color:var(--muted-dark)}
.hero-bottom{grid-column:1/-1;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center;padding:21px 0;margin-top:44px;font:700 13px var(--cond);letter-spacing:2.2px;color:var(--muted-dark)}
.hero-bottom>a{font-size:21px;color:var(--cream)}
.flavour-band{background:var(--ember);color:var(--cream);padding:18px 0;white-space:nowrap;overflow:hidden;font:700 28px var(--cond);letter-spacing:2px}
.flavour-track{display:flex;width:max-content;animation:marquee 70s linear infinite;will-change:transform}
.flavour-group{display:flex;align-items:center;gap:40px;padding-right:40px;flex-shrink:0}
.flavour-band i{font-style:normal;font-size:26px;color:var(--crust)}

/* Speisekarte */
.menu-section{background:var(--paper);color:var(--ink);padding:91px 7.2% 75px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:39px}
.menu-section .eyebrow{color:var(--ember)}
.section-heading .eyebrow{margin-bottom:12px}
h2{font:400 clamp(42px,4.8vw,70px)/1.02 var(--display);letter-spacing:-.01em;margin:0}
.menu-section h2 em{color:var(--ember)}
.section-heading>p{font-size:16px;line-height:1.7;color:var(--muted)}
.category-list{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line)}
.category-list button{border:1px solid #cdbfa5;padding:9px 18px;border-radius:999px;background:transparent;font:700 16px var(--cond);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;transition:background .2s}
.category-list button:hover{background:#ece0c9}
.category-list button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.menu-category-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:35px 0 12px}
.menu-category-heading .eyebrow{display:block;font-size:13px;margin-bottom:2px}
h3{font:400 34px/1.1 var(--display);margin:5px 0 9px}
.menu-category-heading h3{display:inline-block;background:var(--ember);color:var(--cream);padding:8px 30px 4px 18px;margin:8px 0 12px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.menu-category-heading p{color:var(--muted);font-size:16px;line-height:1.6;margin:0}
.category-count{font:700 14px var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.menu-items{display:grid;grid-template-columns:1fr 1fr;column-gap:65px}
.menu-item{padding:22px 0;border-bottom:1px solid var(--line);min-width:0}
.item-top{display:flex;gap:12px;align-items:baseline}
.item-number{color:var(--ember);font:700 15px var(--cond);min-width:22px}
.item-name{font:700 22px var(--cond);letter-spacing:.3px}
.codes{font-family:var(--sans);font-size:.5em;font-weight:500;letter-spacing:.4px;color:var(--muted);margin-left:5px;vertical-align:super;line-height:0;white-space:nowrap;cursor:help}
.menu-category-heading p .codes{font-size:.72em;margin-left:2px}
.item-dots{flex:1;min-width:28px;border-bottom:2px dotted #c3b393}
.item-price{font:700 21px var(--cond);white-space:nowrap;font-variant-numeric:tabular-nums}
.menu-item p{font-size:15px;color:var(--muted);line-height:1.6;margin:5px 0 0 34px;max-width:88%}
.menu-footnote{margin-top:27px}
.menu-footnote p{font-size:13px;color:var(--muted);line-height:1.7;max-width:560px;margin:0}
.legend{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.75;color:var(--muted)}
.legend p{margin:0 0 10px}
.legend strong{color:var(--ink);text-transform:uppercase;letter-spacing:1px;margin-right:4px}
.legend b{color:var(--ink)}
.text-button{border:0;border-bottom:1px solid currentColor;padding:0 0 4px;background:none;font:700 16px var(--cond);letter-spacing:.5px;white-space:nowrap}

/* Besuch */
.visit-section{position:relative;overflow:hidden;background:var(--coal);padding:77px 7.2%;display:grid;grid-template-columns:1fr 1fr;gap:60px;isolation:isolate}
.visit-section:before{content:'';position:absolute;z-index:-1;left:-15%;top:-40%;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,#a9341c40,transparent)}
.visit-title h2{font-size:clamp(42px,4.6vw,66px);margin-bottom:30px}
.visit-title h2 em{color:var(--glow)}
.light-button{border-color:#f3e6cf80;color:var(--cream);font-size:22px;letter-spacing:.5px}
.light-button:hover{background:#f3e6cf14;border-color:var(--cream)}
.visit-contact{display:flex;flex-wrap:wrap;gap:12px}
.visit-contact .icon{width:22px;height:22px}
.visit-details{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;row-gap:29px}
.visit-details h3{font:700 17px var(--cond);text-transform:uppercase;letter-spacing:1.5px;margin:0 0 15px;color:var(--crust)}
.visit-details p,.visit-details dl{font-size:16px;line-height:1.8;color:var(--muted-dark);margin:0 0 13px}
.visit-details a{font:700 16px var(--cond);letter-spacing:.5px;border-bottom:1px solid var(--muted-dark);padding-bottom:4px}
.visit-details dl>div{display:flex;justify-content:space-between;gap:13px}
.visit-details dd{margin:0;white-space:nowrap}

/* Footer */
footer{padding:35px 5.4%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 25px;border-top:1px solid var(--line-dark)}
footer .brand-icon{width:48px}
footer .brand-word{width:160px}
.footer-contact{display:flex;flex-wrap:wrap;gap:10px 26px;font:700 18px var(--cond);letter-spacing:.5px}
.footer-contact a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.footer-contact a:hover{color:var(--glow)}
.footer-contact .icon{width:18px;height:18px;color:var(--ember-hi)}
footer>p{font-size:14px;color:var(--muted-dark)}
.footer-meta{display:flex;align-items:center;gap:22px}
.footer-meta a{font:700 15px var(--cond);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid currentColor;padding-bottom:2px}
.footer-meta a:hover,.footer-meta a[aria-current]{color:var(--glow)}

/* Impressum */
.legal{padding:64px 7.2% 84px}
.legal>*{max-width:720px}
.legal h1{font-size:clamp(52px,5.6vw,80px);margin-bottom:38px}
.legal h2{font:700 22px/1.2 var(--cond);text-transform:uppercase;letter-spacing:1.5px;color:var(--glow);margin:0 0 8px}
.legal section{margin-bottom:30px}
.legal p+p{margin-top:12px}
.legal ul{margin:10px 0 0;padding-left:22px;font-size:19px;line-height:1.65}
.legal .legal-stand{color:var(--muted-dark);font-size:16px}
.legal p,.legal address{font-size:19px;line-height:1.65;font-style:normal;margin:0;color:var(--cream)}
.legal section a{border-bottom:1px solid currentColor}
.legal section a:hover{color:var(--glow)}
.legal-back{margin-top:14px;gap:16px}

/* Dialog */
dialog{border:0;padding:30px;border-radius:5px;background:var(--paper);color:var(--ink);max-width:640px;width:calc(100% - 32px);max-height:90dvh;box-shadow:0 20px 100px #0008}
dialog::backdrop{background:#141411d9;backdrop-filter:blur(6px)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.dialog-header h2{font-size:38px}
.close-dialog{border:1px solid var(--line);background:none;border-radius:50%;width:42px;height:42px;font-size:26px;flex-shrink:0}
dialog p{font-size:16px;line-height:1.7}
dialog h3{font:700 21px var(--cond);text-transform:uppercase;letter-spacing:.8px;margin-top:25px;color:var(--ember)}
.skip{position:fixed;left:10px;top:-100px;z-index:99;background:var(--paper);color:var(--ink);padding:15px}
.skip:focus{top:10px}

@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes glow{0%,100%{opacity:.78;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@keyframes brodeln{
  0%,100%{transform:translate(0,0) rotate(0)}
  12%{transform:translate(-1px,-3px) rotate(-.8deg)}
  24%{transform:translate(1px,0) rotate(.6deg)}
  36%{transform:translate(0,-2px) rotate(-.4deg)}
  48%{transform:translate(0,0) rotate(0)}
  62%{transform:translate(1px,-4px) rotate(.9deg)}
  74%{transform:translate(-1px,0) rotate(-.6deg)}
  86%{transform:translate(0,-1px) rotate(.3deg)}
}
@keyframes dampf{0%{opacity:0;transform:translateY(40%) scale(.6)}25%{opacity:.9}100%{opacity:0;transform:translateY(-150%) scale(1.8)}}
@keyframes blubb{0%{opacity:0;transform:translateY(40%) scale(0)}20%{opacity:1}70%{opacity:1;transform:translateY(-20%) scale(1)}78%{opacity:0;transform:translateY(-30%) scale(1.5)}100%{opacity:0}}
@keyframes funke{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-260%)}}

@media(min-width:1600px){
  .header,.hero,footer{padding-left:max(5.4%,calc((100vw - 1450px)/2));padding-right:max(5.4%,calc((100vw - 1450px)/2))}
  .header{margin:0}
  .hero{padding-top:70px}
  .menu-section,.visit-section,.legal{padding-left:max(7.2%,calc((100vw - 1390px)/2));padding-right:max(7.2%,calc((100vw - 1390px)/2))}
}
@media(max-width:1000px){
  .header{height:96px}
  .brand-icon{width:50px}
  .brand-word{width:160px}
  .header nav{gap:20px;font-size:15px}
  .header-actions .label{display:none}
  .header-actions .contact-button{width:46px;padding:0}
  .button{padding:0 17px;gap:15px}
  .hero{padding-top:45px}
  .round-stamp{width:95px;height:95px}
  .round-stamp strong{font-size:28px}
  .round-stamp .stamp-halal{font-size:15px;letter-spacing:2px}
  .menu-items{column-gap:35px}
  .visit-section{gap:35px}
  .visit-details{column-gap:25px;grid-template-columns:1fr}
  .visit-details>div:last-child{display:none}
}
@media(max-width:680px){
  .topline{font-size:12px;letter-spacing:1.2px;padding:9px}
  .header{margin:0 16px;height:84px;gap:10px}
  .brand{gap:8px}
  .brand-icon{width:42px}
  .brand-word{width:138px}
  .header nav{display:none}
  .header-actions{gap:8px}
  .header-actions .contact-button{width:44px;min-height:44px}
  .light-button{font-size:20px}
  .footer-contact{order:3;width:100%;font-size:17px}
  .hero{padding:34px 16px 0;grid-template-columns:1fr}
  .hero-copy{padding-bottom:0}
  .eyebrow{font-size:12px;letter-spacing:1.5px;margin-bottom:18px}
  h1{font-size:clamp(50px,14vw,80px);margin-bottom:22px}
  .intro{font-size:17px;margin-bottom:24px;line-height:1.6}
  .intro br{display:none}
  .hero-note{margin-top:18px;font-size:14px}
  .tiegel-stage{width:100%;margin:26px auto 58px;transform:none}
  .round-stamp{right:-1%;top:0;width:88px;height:88px}
  .round-stamp span{font-size:9px}
  .round-stamp strong{font-size:25px}
  .round-stamp .stamp-halal{font-size:14px;letter-spacing:2px}
  .tiegel-caption{bottom:-38px;font-size:12px}
  .hero-bottom{font-size:12px;letter-spacing:1.2px;padding:14px 0;margin-top:12px}
  .hero-bottom>span:nth-child(2){display:none}
  .flavour-band{padding:14px 0;font-size:21px}
  .flavour-group{gap:25px;padding-right:25px}
  .flavour-track{animation-duration:55s}
  .flavour-band i{font-size:20px}
  .menu-section{padding:53px 16px}
  .section-heading{display:block;margin-bottom:27px}
  .section-heading h2{font-size:46px}
  .section-heading>p{font-size:15px;margin:18px 0 0}
  .category-list{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;padding-bottom:20px;scrollbar-width:thin}
  .category-list button{font-size:15px;padding:8px 14px}
  .menu-category-heading{margin-top:28px;align-items:flex-start}
  .menu-category-heading h3{font-size:29px;padding:7px 24px 3px 14px}
  .category-count{font-size:12px;margin-top:30px}
  .menu-category-heading p{font-size:14px;max-width:250px}
  .menu-items{grid-template-columns:1fr}
  .menu-item{padding:18px 0}
  .item-name{font-size:20px}
  .item-price{font-size:19px}
  .menu-item p{font-size:14px}
  .menu-footnote p{font-size:12px}
  .legend{font-size:12px}
  .visit-section{padding:47px 16px;grid-template-columns:1fr;gap:42px}
  .visit-title h2{font-size:46px}
  .visit-details{grid-template-columns:1fr;gap:30px 20px}
  .visit-details>div:last-child{display:block}
  .visit-details p,.visit-details dl{font-size:15px}
  .visit-details dl>div{margin-bottom:7px}
  footer{padding:29px 16px}
  footer>p{display:none}
  .footer-meta{gap:14px}
  .legal{padding:44px 16px 56px}
  .legal h1{font-size:54px;margin-bottom:28px}
  .legal p,.legal address,.legal ul{font-size:17px}
  dialog{padding:22px}
  .dialog-header h2{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button{transition:none}
}