:root { color-scheme:light; --navy:#273d30; --brass:#a22622; --muted:#706451; --line:#d8c9a7; --paper:#fcf3dd; --accent:#a22622; --heading:#244b32; --page:#eae4d7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:26px; }
body { margin:0; color:#302b23; background:var(--page); font:16px/1.65 Georgia,'Times New Roman',serif; }
[hidden] { display:none!important; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--brass); outline-offset:4px; }
.skip-link { position:fixed; top:-100px; left:16px; padding:10px; z-index:10; background:white; }
.skip-link:focus { top:10px; }
.demo-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px max(22px,calc((100vw - 1120px)/2)); background:#162c37; color:#fff; font:12px/1.5 'Segoe UI',Arial,sans-serif; }
.demo-bar a:hover { text-decoration:underline; }
.experience-switch { padding:22px; background:#fffaf0; text-align:center; border-bottom:1px solid #dfd6c4; }
.experience-options { display:inline-flex; padding:4px; gap:4px; border:1px solid #d5cdbd; border-radius:30px; background:white; font:600 13px/1.5 'Segoe UI',Arial,sans-serif; }
.experience-options a { padding:12px 30px; border-radius:24px; }
.experience-options a[aria-current] { background:#173444; color:white; }
.experience-switch p { color:#66706e; font:12px/1.5 'Segoe UI',Arial,sans-serif; margin:10px 0 0; }
.paper { position:relative; isolation:isolate; overflow:hidden; width:min(1040px,calc(100% - 64px)); margin:48px auto 56px; padding:60px 64px 60px 25%; background-color:var(--paper); background-image:radial-gradient(#8064300b 1px,transparent 1px); background-size:5px 5px; box-shadow:0 20px 75px #1f231822; border:1px solid var(--line); }
.paper::after { content:''; position:absolute; inset:16px; pointer-events:none; border:1px solid var(--line); z-index:-1; }
/* Display only the illustrated left edge of the unmodified flyer artwork.
   Its printed titles, prices and plus signs never enter the HTML menu area. */
.art-ribbon { position:absolute; inset:0 auto 0 0; width:18%; overflow:hidden; z-index:-1; pointer-events:none; mask-image:linear-gradient(90deg,#000 78%,transparent); }
.art-ribbon img { display:block; width:555.556%; max-width:none; height:auto; }
.card-intro { text-align:center; padding:0 0 22px; }
.card-intro .eyebrow { display:block; color:var(--muted); font:10px/1.5 'Segoe UI',Arial,sans-serif; text-transform:uppercase; letter-spacing:.22em; }
h1 { margin:18px 0 8px; color:var(--heading); font-size:clamp(38px,5.2vw,64px); font-weight:700; line-height:1.04; letter-spacing:-.035em; }
h1 em { display:block; color:var(--accent); font-style:normal; font-size:1.27em; }
.card-intro > p { font-size:18px; font-style:italic; margin:18px 0 10px; }
.card-intro .button { display:inline-block; border-bottom:1px solid var(--line); padding:6px 2px; font:11px/1.5 'Segoe UI',Arial,sans-serif; color:var(--muted); }
.culinary-drawing { width:48px; height:48px; color:var(--accent); flex-shrink:0; }
[data-ornament] .culinary-drawing { width:58px; height:58px; margin:16px 0 0; }
.category-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; padding:17px 0; margin:6px 0 25px; border-block:1px solid var(--line); font:12px/1.5 'Segoe UI',Arial,sans-serif; }
.category-nav a { padding:5px 0; }
.category-nav a:hover { color:var(--accent); text-decoration:underline; }
.menu-group { margin:32px 0 38px; scroll-margin-top:25px; }
.group-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:4px; }
.group-heading h2 { margin:0; color:var(--accent); font-size:27px; line-height:1.2; text-transform:uppercase; letter-spacing:.025em; }
.group-heading .culinary-drawing { width:34px; height:34px; }
.dish { padding:17px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent); }
.dish:last-child { border-bottom:0; }
.dish-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.dish h3 { margin:0; font-size:21px; line-height:1.3; font-weight:700; }
.dish-actions { display:flex; gap:12px; align-items:center; flex-shrink:0; }
.price { font-size:19px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ingredients { margin:4px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.dish-add { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--brass); background:var(--brass); color:white; font:23px/1 'Segoe UI',sans-serif; cursor:pointer; }
.dish-add:hover { filter:brightness(.85); }
.menu-end { text-align:center; margin-top:45px; padding-top:26px; border-top:1px solid var(--line); }
.menu-end p { margin:0 0 8px; font-style:italic; font-size:20px; }
.menu-end small { color:var(--muted); font:11px/1.6 'Segoe UI',Arial,sans-serif; }
.service-note { color:var(--muted); text-align:center; font:12px/1.7 'Segoe UI',Arial,sans-serif; margin:25px 0 0; }
.designs { width:min(1120px,calc(100% - 48px)); margin:0 auto 70px; color:#23333b; font-family:'Segoe UI',Arial,sans-serif; }
.designs .eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#5a666a; }
.designs h2 { font:400 clamp(30px,3vw,42px)/1.2 Georgia,serif; margin:12px 0; }
.designs-heading p { color:#5e686a; font-size:14px; }
.demo-footer { display:flex; justify-content:space-between; gap:20px; padding:24px; border-top:1px solid #d4d5cf; color:#59666a; background:#f5f3ed; font:12px/1.6 'Segoe UI',Arial,sans-serif; }
.view-control { text-align:center; font:12px/1.5 'Segoe UI',Arial,sans-serif; margin:25px 0; }
.view-options { display:flex; justify-content:center; gap:8px; margin-top:9px; }
.view-options a { border:1px solid var(--line); padding:9px 12px; }
.view-options a[aria-current] { background:var(--navy); color:white; }
.category-cover { display:block; width:100%; height:150px; object-fit:cover; margin:18px 0 5px; }
body[data-view="gerichtsfotos"] .has-photo { display:flex; align-items:center; gap:18px; }
.dish-photo { width:105px; height:90px; object-fit:cover; border-radius:3px; }
.dish-copy { min-width:0; flex:1; }
body[data-design="burger"] { --paper:#191b19; --page:#dedbcf; --heading:#ffdd35; --accent:#ffdd35; --brass:#c7a61b; --line:#514e32; --muted:#d5d1bb; color:#fff9e6; font-family:'Segoe UI',Arial,sans-serif; }
body[data-design="burger"] h1 { font-family:Impact,'Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.015em; font-size:clamp(52px,6.5vw,78px); }
body[data-design="burger"] h1 em { display:inline; font-size:1em; }
body[data-design="burger"] .group-heading h2 { font-family:Impact,'Arial Narrow',sans-serif; background:#ffdd35; color:#171917; padding:7px 15px; transform:rotate(-1deg); }
body[data-design="burger"] .dish-add { color:#141811; }
body[data-design="doener"] { --paper:#fff2d5; --page:#34261f; --heading:#8e1d17; --accent:#9e271c; --brass:#97251a; --line:#d3b78a; --muted:#6f4d34; }
body[data-design="doener"] h1 { text-transform:uppercase; font-family:Impact,'Arial Narrow',sans-serif; }
body[data-design="doener"] h1 em { display:inline; font-size:1em; }
body[data-design="doener"] .group-heading h2 { color:#fff1d3; background:#8e1d17; padding:9px 14px; }
body[data-design="cafe"] { --paper:#fff9ed; --page:#e5ece7; --heading:#315e68; --accent:#b75831; --brass:#b75831; --line:#dfc7ac; --muted:#6c7269; }
body[data-design="cafe"] h1 em { font-style:italic; font-weight:400; }
body[data-design="cafe"] .group-heading h2 { color:#315e68; background:#f7dfc6; padding:7px 13px; border-radius:45% 12% 35% 8%; font-size:25px; text-transform:none; }
body[data-design="lindenhof"] { --paper:#fffdf6; --page:#e7e9e2; --heading:#182a3c; --accent:#8c7040; --brass:#8c7040; --line:#dacfb6; --muted:#686c65; }
body[data-design="lindenhof"] h1 { font-size:22px; font-weight:400; text-transform:uppercase; letter-spacing:.12em; }
body[data-design="lindenhof"] h1 em { font-size:2.5em; color:#182a3c; letter-spacing:.025em; margin-top:8px; }
body[data-design="lindenhof"] .group-heading h2 { font-size:23px; font-weight:400; letter-spacing:.1em; }
body[data-design="lindenhof"] .dish-add { background:transparent; color:var(--brass); }
body[data-design="mezze"] { --paper:#fff3da; --page:#e8decc; --heading:#671b16; --accent:#7c211b; --brass:#a46c15; --line:#d6b987; --muted:#706044; }
body[data-design="mezze"] h1 { font-size:clamp(38px,5vw,62px); }
body[data-design="mezze"] h1 em { display:inline; font-size:1em; }
body[data-design="mezze"] .card-intro > p { font-size:30px; color:#7c211b; }
body[data-design="mezze"] .group-heading h2 { background:#e1b34e; color:#352410; padding:7px 15px; transform:rotate(-.7deg); font-size:25px; }
@media(max-width:760px) { .paper { width:calc(100% - 28px); padding:36px 30px 38px 22%; margin:24px auto 40px; } .art-ribbon { width:16%; } .art-ribbon img { width:625%; } h1 { font-size:40px; } .dish h3 { font-size:19px; } .dish-heading { flex-wrap:wrap; gap:7px; } .dish-actions { margin-left:auto; } body[data-view="gerichtsfotos"] .has-photo { align-items:start; gap:12px; } .dish-photo { width:75px; height:75px; } }
@media(max-width:480px) { .demo-bar { padding:10px 16px; font-size:11px; } .demo-bar > span { display:none; } .experience-switch { padding:16px 12px; } .experience-options { display:flex; } .experience-options a { flex:1; padding:12px 9px; font-size:12px; } .paper { width:calc(100% - 16px); padding:30px 20px 35px 19%; } .paper::after { inset:9px; } .art-ribbon { width:12%; } .art-ribbon img { width:833.333%; } .card-intro .eyebrow { letter-spacing:.1em; font-size:9px; } h1 { font-size:34px; } .card-intro > p { font-size:16px; } .group-heading h2 { font-size:22px; } .dish h3 { font-size:18px; } .price { font-size:17px; } .ingredients { font-size:13px; } .category-nav { font-size:11px; gap:6px 14px; } .dish-actions { gap:8px; } .dish-add { width:34px; height:34px; } .designs { width:calc(100% - 36px); } .demo-footer { flex-direction:column; } body[data-design="burger"] h1 { font-size:43px; } body[data-design="lindenhof"] h1 { font-size:15px; } body[data-design="lindenhof"] h1 em { font-size:2.1em; } body[data-design="mezze"] h1 { font-size:34px; } body[data-design="mezze"] .card-intro > p { font-size:24px; } body[data-design="mezze"] .group-heading h2 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }