{"id":364,"date":"2026-08-15T21:31:59","date_gmt":"2026-08-15T21:31:59","guid":{"rendered":"https:\/\/mk360studio.com\/?page_id=364"},"modified":"2026-08-17T08:09:19","modified_gmt":"2026-08-17T08:09:19","slug":"elementor-364","status":"publish","type":"page","link":"https:\/\/mk360studio.com\/de\/elementor-364\/","title":{"rendered":"Elementor #364"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"364\" class=\"elementor elementor-364\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c320e7d e-con-full e-flex e-con e-parent\" data-id=\"c320e7d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f324ce0 elementor-widget elementor-widget-html\" data-id=\"f324ce0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  ================================================================\r\n  KARLSRUHER HOF \u2014 DIGITALE SPEISEKARTE (QR)  \u00b7  v8\r\n  ----------------------------------------------------------------\r\n  Gornje stavke su TABOVI \u2014 klik menja sadrzaj ispod, nema skrola\r\n  kroz celu kartu. Prvi tab TOP = preporuka sefa (carousel).\r\n  Bez search bara.\r\n  ----------------------------------------------------------------\r\n  Dodavanje novog taba:\r\n  1. <button class=\"tab\" data-p=\"p-xxx\"> u .tabs\r\n  2. <section class=\"panel\" id=\"p-xxx\"> sa .grid unutra\r\n  Tab \"Vegetarisch\" se puni SAM iz svih jela koja u data-t\r\n  imaju \"vegetarisch\" \u2014 ne treba ih duplirati rucno.\r\n  ----------------------------------------------------------------\r\n  WORDPRESS \/ ELEMENTOR: widget \"HTML\" -> nalepi CEO kod.\r\n  ================================================================\r\n-->\r\n\r\n<div id=\"khof\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\r\n\r\n\/* ============ TOKENI ============ *\/\r\n#khof{\r\n  --paper:#FBF9F6; --card:#FFF; --line:#ECE5DC; --line-2:#F4EFE8;\r\n  --ink:#1A1714; --muted:#857A6E; --muted-2:#A79C92;\r\n  --gold:#A78963; --gold-d:#8A6C45; --gold-bg:#F5EFE6;\r\n  --dark:#16130F;\r\n  --r:16px; --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;\r\n  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;\r\n  --max:960px; --hdr:52px;\r\n}\r\n\r\n\/* ============ HARD RESET ============ *\/\r\n#khof, #khof *, #khof *::before, #khof *::after{\r\n  box-sizing:border-box !important;\r\n  margin:0 !important; padding:0 !important; border:0 !important;\r\n  color:inherit !important; font-family:var(--font) !important;\r\n  font-style:normal !important; font-weight:400 !important;\r\n  text-decoration:none !important; text-shadow:none !important;\r\n  text-transform:none !important; list-style:none !important;\r\n  background-image:none; background-color:transparent; box-shadow:none;\r\n  -webkit-tap-highlight-color:transparent;\r\n}\r\n#khof{\r\n  background-color:var(--paper) !important; color:var(--ink) !important;\r\n  font-size:16px !important; line-height:1.5 !important;\r\n  -webkit-font-smoothing:antialiased;\r\n  overflow-x:hidden !important; width:100vw !important;\r\n  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;\r\n  min-height:100svh !important;\r\n}\r\n#khof img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; border-radius:0 !important; }\r\n#khof button{ font:inherit !important; cursor:pointer; text-align:left; display:block; width:100%; }\r\n#khof :focus-visible{ outline:2px solid var(--gold) !important; outline-offset:2px; }\r\n#khof .wrap{ max-width:var(--max); margin-left:auto !important; margin-right:auto !important; padding-left:var(--s3) !important; padding-right:var(--s3) !important; }\r\n\r\n\/* ============ HEADER ============ *\/\r\n#khof .hdr{\r\n  position:sticky !important; top:0; z-index:70;\r\n  background-color:var(--dark) !important;\r\n  border-bottom:1px solid rgba(255,255,255,.07) !important;\r\n}\r\n#khof .hdr__in{\r\n  display:grid; grid-template-columns:36px auto 36px; align-items:center;\r\n  height:var(--hdr) !important;\r\n}\r\n#khof .hdr__logo{ justify-self:center; height:38px !important; }\r\n#khof .hdr__logo img{ width:auto !important; height:100% !important; object-fit:contain !important; }\r\n#khof .hdr__info{\r\n  justify-self:end; width:36px !important; height:36px !important;\r\n  border-radius:12px; display:grid; place-items:center;\r\n  background-color:var(--gold) !important;\r\n  transition:transform .16s ease, background-color .16s ease;\r\n}\r\n#khof .hdr__info:active{ transform:scale(.92); background-color:var(--gold-d) !important; }\r\n#khof .hdr__info svg{ width:18px !important; height:18px !important; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }\r\n\r\n\/* ============ AKCIJSKA TRAKA ============ *\/\r\n#khof .acts{ padding-top:var(--s2) !important; }\r\n#khof .acts__box{\r\n  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));\r\n  background-color:var(--card) !important;\r\n  border:1px solid var(--line) !important;\r\n  border-radius:14px; overflow:hidden;\r\n}\r\n#khof .act{\r\n  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;\r\n  width:auto; text-align:center !important;\r\n  padding:11px 4px !important;\r\n  border-right:1px solid var(--line-2) !important;\r\n  transition:background-color .16s ease;\r\n}\r\n#khof .act:last-child{ border-right:0 !important; }\r\n#khof .act:active{ background-color:var(--gold-bg) !important; }\r\n#khof .act svg{ width:17px !important; height:17px !important; stroke:var(--gold); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }\r\n#khof .act b{\r\n  font-size:.66rem !important; font-weight:700 !important; letter-spacing:.03em !important;\r\n  color:var(--ink) !important; line-height:1.2 !important;\r\n}\r\n#khof .act--static{ opacity:.55; }\r\n#khof .act--static b{ color:var(--muted) !important; }\r\n\r\n\/* ============ INFO MODAL ============ *\/\r\n#khof .inf{\r\n  position:fixed !important; inset:0 !important; z-index:99999;\r\n  background-color:rgba(10,8,6,.7) !important;\r\n  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);\r\n  display:flex; align-items:center; justify-content:center; padding:var(--s3) !important;\r\n  opacity:0; visibility:hidden; pointer-events:none;\r\n  transition:opacity .24s ease, visibility .24s ease;\r\n}\r\n#khof .inf.is-on{ opacity:1; visibility:visible; pointer-events:auto; }\r\n#khof .inf__box{\r\n  position:relative;\r\n  background-color:var(--dark) !important;\r\n  background-image:radial-gradient(120% 70% at 50% 0%, rgba(167,137,99,.12) 0%, transparent 62%) !important;\r\n  border:1px solid rgba(167,137,99,.24) !important;\r\n  border-radius:24px; width:100%; max-width:420px;\r\n  padding:var(--s5) var(--s4) var(--s4) !important;\r\n  max-height:88svh; overflow-y:auto; overscroll-behavior:contain;\r\n  color:#F3EDE4 !important;\r\n  transform:translateY(14px) scale(.97);\r\n  transition:transform .34s cubic-bezier(.32,.72,0,1);\r\n  box-shadow:0 24px 60px rgba(10,8,6,.5) !important;\r\n}\r\n#khof .inf.is-on .inf__box{ transform:translateY(0) scale(1); }\r\n@media (prefers-reduced-motion:reduce){\r\n  #khof .inf, #khof .inf__box{ transition:none !important; }\r\n}\r\n#khof .inf__x{\r\n  position:absolute; top:var(--s3); right:var(--s3);\r\n  width:36px !important; height:36px !important; border-radius:50%;\r\n  display:grid; place-items:center;\r\n  border:1px solid rgba(255,255,255,.18) !important;\r\n  background-color:rgba(255,255,255,.05) !important;\r\n}\r\n#khof .inf__x svg{ width:14px !important; height:14px !important; stroke:#F3EDE4; fill:none; stroke-width:2.4; stroke-linecap:round; }\r\n#khof .inf__logo{ height:44px !important; margin:0 auto var(--s3) !important; }\r\n#khof .inf__logo img{ width:auto !important; height:100% !important; object-fit:contain !important; margin:0 auto !important; }\r\n#khof .inf__n{\r\n  text-align:center; font-size:1.4rem !important; font-weight:800 !important;\r\n  letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--gold) !important;\r\n}\r\n#khof .inf__s{\r\n  text-align:center; font-size:.7rem !important; font-weight:700 !important;\r\n  letter-spacing:.22em !important; text-transform:uppercase !important;\r\n  color:rgba(255,255,255,.48) !important; margin-top:8px !important;\r\n}\r\n#khof .inf__rule{\r\n  height:1px !important; margin:var(--s4) 0 var(--s1) !important;\r\n  background-image:linear-gradient(90deg, transparent, rgba(167,137,99,.55), transparent) !important;\r\n}\r\n#khof .inf__row{\r\n  display:flex; align-items:flex-start; gap:var(--s3);\r\n  padding:var(--s3) 0 !important;\r\n  border-bottom:1px solid rgba(255,255,255,.08) !important;\r\n}\r\n#khof .inf__row:last-of-type{ border-bottom:0 !important; }\r\n#khof .inf__ic{\r\n  flex:0 0 42px; width:42px !important; height:42px !important;\r\n  border-radius:12px; display:grid; place-items:center;\r\n  background-color:rgba(167,137,99,.12) !important;\r\n  border:1px solid rgba(167,137,99,.26) !important;\r\n}\r\n#khof .inf__ic svg{ width:19px !important; height:19px !important; stroke:var(--gold); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }\r\n#khof .inf__k{ font-size:.66rem !important; font-weight:800 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:rgba(255,255,255,.45) !important; }\r\n#khof .inf__v{ font-size:.95rem !important; font-weight:600 !important; margin-top:3px !important; line-height:1.45 !important; color:#F3EDE4 !important; }\r\n#khof .inf__v a{ color:var(--gold) !important; font-weight:700 !important; }\r\n\r\n\/* ============ TABOVI ============ *\/\r\n#khof .tabs-w{\r\n  position:sticky !important; top:var(--hdr); z-index:60;\r\n  background-color:rgba(251,249,246,.96) !important;\r\n  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);\r\n  border-bottom:1px solid var(--line) !important;\r\n  box-shadow:0 8px 20px -14px rgba(26,23,20,.35) !important;\r\n}\r\n\/* bledi rub desno \u2014 signal da se traka skroluje *\/\r\n#khof .tabs-w::after{\r\n  content:''; position:absolute; top:0; right:0; bottom:1px; width:44px;\r\n  pointer-events:none; z-index:2;\r\n  background-image:linear-gradient(90deg, rgba(251,249,246,0), rgba(251,249,246,.97)) !important;\r\n}\r\n#khof .tabs{\r\n  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;\r\n  padding-top:var(--s2) !important; padding-bottom:var(--s2) !important;\r\n}\r\n#khof .tabs::-webkit-scrollbar{ display:none; }\r\n#khof .tab{\r\n  flex:0 0 auto; width:auto;\r\n  padding:9px 16px !important; border-radius:12px;\r\n  border:1px solid var(--line) !important; background-color:var(--card) !important;\r\n  font-size:.76rem !important; font-weight:700 !important; letter-spacing:.07em !important;\r\n  color:var(--muted) !important; white-space:nowrap;\r\n  transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .16s ease;\r\n}\r\n#khof .tab:active{ transform:scale(.95); }\r\n#khof .tab.is-on{\r\n  background-color:var(--gold) !important;\r\n  border-color:var(--gold) !important;\r\n  color:#fff !important;\r\n  box-shadow:0 4px 12px -2px rgba(167,137,99,.55) !important;\r\n}\r\n\r\n\/* jednokratni \"pogledaj ovde\" pokret pri otvaranju *\/\r\n@keyframes khofHint{\r\n  0%,58%   { transform:translateX(0); }\r\n  68%      { transform:translateX(-16px); }\r\n  78%      { transform:translateX(0); }\r\n  86%      { transform:translateX(-9px); }\r\n  100%     { transform:translateX(0); }\r\n}\r\n#khof .tabs.hint{ animation:khofHint 2.2s ease-in-out 1; }\r\n@media (prefers-reduced-motion:reduce){\r\n  #khof .tabs.hint{ animation:none; }\r\n  #khof .tab{ transition:none; }\r\n}\r\n\r\n\/* ============ PANELI ============ *\/\r\n#khof .panel{ display:none; padding-top:var(--s4) !important; padding-bottom:var(--s5) !important; }\r\n#khof .panel.is-on{ display:block; }\r\n#khof .p__h{ margin-bottom:var(--s3) !important; }\r\n#khof .p__k{ font-size:.68rem !important; font-weight:800 !important; letter-spacing:.16em !important; color:var(--gold) !important; }\r\n#khof .p__t{ font-size:1.5rem !important; font-weight:800 !important; letter-spacing:-.035em !important; margin-top:4px !important; }\r\n#khof .p__s{ font-size:.85rem !important; color:var(--muted) !important; margin-top:5px !important; }\r\n\r\n\/* ============ CAROUSEL PREPORUKA ============ *\/\r\n#khof .car{\r\n  display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none;\r\n  scroll-snap-type:x mandatory;\r\n  margin-left:calc(var(--s3) * -1) !important; margin-right:calc(var(--s3) * -1) !important;\r\n  padding-left:var(--s3) !important; padding-right:var(--s3) !important;\r\n}\r\n#khof .car::-webkit-scrollbar{ display:none; }\r\n#khof .sig{\r\n  flex:0 0 calc(100% - 8px); scroll-snap-align:center;\r\n  position:relative; height:430px !important;\r\n  border-radius:20px; overflow:hidden;\r\n  background-color:var(--dark) !important;\r\n}\r\n@media(min-width:700px){ #khof .sig{ flex:0 0 calc(50% - 6px); } }\r\n#khof .sig__ph{ position:absolute !important; inset:0 !important; }\r\n#khof .sig__ph::after{\r\n  content:''; position:absolute; inset:0;\r\n  background-image:linear-gradient(85deg, rgba(14,11,9,.94) 0%, rgba(14,11,9,.72) 46%, rgba(14,11,9,.18) 100%) !important;\r\n}\r\n#khof .sig__in{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding:var(--s4) !important; }\r\n#khof .sig__crown{ width:22px !important; height:22px !important; margin-bottom:var(--s3) !important; }\r\n#khof .sig__crown svg{ width:100% !important; height:100% !important; fill:var(--gold) !important; }\r\n#khof .sig__k{ font-size:.7rem !important; font-weight:800 !important; letter-spacing:.2em !important; color:var(--gold) !important; }\r\n#khof .sig__n{\r\n  font-size:1.9rem !important; font-weight:800 !important;\r\n  letter-spacing:.01em !important; line-height:1.05 !important;\r\n  text-transform:uppercase !important; color:#fff !important;\r\n  margin-top:var(--s2) !important; max-width:15ch;\r\n}\r\n#khof .sig__d{ font-size:.88rem !important; color:rgba(255,255,255,.72) !important; margin-top:var(--s2) !important; max-width:26ch; line-height:1.55 !important; }\r\n#khof .sig__badge{\r\n  display:inline-flex; align-items:center; gap:6px; width:auto;\r\n  margin-top:var(--s4) !important; padding:9px 15px !important; border-radius:10px;\r\n  background-color:rgba(167,137,99,.16) !important;\r\n  border:1px solid rgba(167,137,99,.38) !important;\r\n  color:var(--gold) !important;\r\n  font-size:.68rem !important; font-weight:800 !important; letter-spacing:.12em !important;\r\n}\r\n#khof .sig__go{\r\n  position:absolute; z-index:3; right:var(--s4); bottom:var(--s4);\r\n  width:38px !important; height:38px !important; border-radius:50%;\r\n  display:grid; place-items:center;\r\n  background-color:rgba(255,255,255,.10) !important;\r\n  border:1px solid rgba(255,255,255,.26) !important;\r\n  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);\r\n}\r\n#khof .sig__go svg{ width:16px !important; height:16px !important; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }\r\n#khof .sig{ cursor:pointer; transition:transform .18s ease; }\r\n#khof .sig:active{ transform:scale(.982); }\r\n#khof .sig__p{\r\n  font-size:1.6rem !important; font-weight:800 !important;\r\n  color:var(--gold) !important; margin-top:var(--s4) !important;\r\n  font-variant-numeric:tabular-nums;\r\n}\r\n#khof .dots{ display:flex; gap:6px; justify-content:center; margin-top:var(--s3) !important; }\r\n#khof .dots i{ display:block; width:7px !important; height:7px !important; border-radius:999px; background-color:var(--line) !important; transition:all .2s ease; }\r\n#khof .dots i.is-on{ width:20px !important; background-color:var(--gold) !important; }\r\n\r\n\/* ============ MRE\u017dA KARTICA ============ *\/\r\n#khof .grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); }\r\n@media(min-width:560px){ #khof .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); } }\r\n@media(min-width:820px){ #khof .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }\r\n\r\n#khof .it{\r\n  background-color:var(--card) !important;\r\n  border:1px solid var(--line) !important;\r\n  border-radius:var(--r); overflow:hidden;\r\n  display:flex; flex-direction:column;\r\n  transition:transform .16s;\r\n}\r\n#khof .it:active{ transform:scale(.985); }\r\n#khof .it__ph{ position:relative; aspect-ratio:4\/3; background-color:var(--gold-bg) !important; }\r\n#khof .it__ph--none{ display:grid; place-items:center; }\r\n#khof .it__ph--none b{ font-size:1.5rem !important; font-weight:800 !important; color:var(--gold) !important; opacity:.35; }\r\n#khof .it__tag{\r\n  position:absolute; z-index:2; top:var(--s1); left:var(--s1);\r\n  padding:3px 8px !important; border-radius:999px;\r\n  background-color:rgba(22,19,15,.72) !important; color:#fff !important;\r\n  font-size:.62rem !important; font-weight:700 !important; letter-spacing:.05em !important;\r\n}\r\n#khof .it__b{ padding:10px var(--s2) var(--s2) !important; display:flex; flex-direction:column; flex:1; }\r\n#khof .it__n{ font-size:.88rem !important; font-weight:700 !important; letter-spacing:-.015em !important; line-height:1.3 !important; }\r\n#khof .it__n sup{ font-size:.58rem !important; font-weight:500 !important; color:var(--muted) !important; margin-left:2px !important; }\r\n#khof .it__d{\r\n  font-size:.74rem !important; color:var(--muted) !important; margin-top:3px !important; line-height:1.4 !important;\r\n  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;\r\n}\r\n#khof .it__p{\r\n  margin-top:auto !important; padding-top:var(--s1) !important;\r\n  font-size:.9rem !important; font-weight:800 !important; color:var(--gold-d) !important;\r\n  font-variant-numeric:tabular-nums;\r\n}\r\n#khof .it__p em{ color:var(--muted) !important; font-weight:500 !important; font-size:.7rem !important; margin-left:5px !important; }\r\n\r\n\/* ============ DNO ============ *\/\r\n\/* ============ FOOTER ============ *\/\r\n#khof .ft{\r\n  margin-top:var(--s5) !important;\r\n  border-top:1px solid var(--line) !important;\r\n  padding:var(--s5) 0 calc(var(--s4) + env(safe-area-inset-bottom)) !important;\r\n}\r\n#khof .ft__g{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); }\r\n@media(min-width:560px){ #khof .ft__g{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); } }\r\n#khof .ft__k{\r\n  font-size:.62rem !important; font-weight:800 !important;\r\n  letter-spacing:.18em !important; text-transform:uppercase !important;\r\n  color:var(--gold) !important; margin-bottom:7px !important;\r\n}\r\n#khof .ft__v{ font-size:.86rem !important; color:var(--muted) !important; line-height:1.7 !important; }\r\n#khof .ft__v a{ color:var(--ink) !important; font-weight:600 !important; }\r\n\r\n#khof .ft__fine{\r\n  margin-top:var(--s5) !important;\r\n  font-size:.74rem !important; color:var(--muted) !important; line-height:1.8 !important;\r\n  max-width:62ch;\r\n}\r\n#khof .ft__fine b{ color:var(--ink) !important; font-weight:700 !important; }\r\n\r\n#khof .ft__meta{\r\n  margin-top:var(--s4) !important; padding-top:var(--s3) !important;\r\n  border-top:1px solid var(--line-2) !important;\r\n  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px;\r\n  font-size:.7rem !important; color:var(--muted-2) !important;\r\n}\r\n#khof .ft__meta span{ color:var(--muted-2) !important; }\r\n#khof .ft__by{ color:var(--muted-2) !important; }\r\n#khof .ft__by strong{ color:var(--gold-d) !important; font-weight:700 !important; }\r\n\r\n\/* ============ DETALJ JELA (popup) ============ *\/\r\n#khof .lb{\r\n  position:fixed !important; inset:0 !important; z-index:99999;\r\n  background-color:rgba(18,15,12,.58) !important;\r\n  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);\r\n  display:flex; align-items:flex-end; justify-content:center;\r\n  opacity:0; visibility:hidden; pointer-events:none;\r\n  transition:opacity .24s ease, visibility .24s ease;\r\n}\r\n@media(min-width:560px){ #khof .lb{ align-items:center; padding:var(--s4) !important; } }\r\n#khof .lb.is-on{ opacity:1; visibility:visible; pointer-events:auto; }\r\n#khof .lb__box{\r\n  position:relative;\r\n  background-color:var(--card) !important;\r\n  width:100%; max-width:none;\r\n  height:100vh; height:100svh; max-height:none;\r\n  border-radius:0;\r\n  overflow-y:auto; -webkit-overflow-scrolling:touch;\r\n  overscroll-behavior:contain;\r\n  transform:translateY(26px);\r\n  transition:transform .34s cubic-bezier(.32,.72,0,1);\r\n}\r\n#khof .lb.is-on .lb__box{ transform:translateY(0); }\r\n@media(min-width:560px){\r\n  #khof .lb__box{\r\n    width:100%; max-width:470px;\r\n    height:auto; max-height:88svh;\r\n    border-radius:26px;\r\n    transform:translateY(14px) scale(.97);\r\n    box-shadow:0 24px 60px rgba(18,15,12,.34) !important;\r\n  }\r\n  #khof .lb.is-on .lb__box{ transform:translateY(0) scale(1); }\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  #khof .lb, #khof .lb__box{ transition:none !important; }\r\n}\r\n\r\n#khof .lb__x{\r\n  position:fixed !important; z-index:100001;\r\n  top:calc(env(safe-area-inset-top) + 12px); right:14px;\r\n  width:40px !important; height:40px !important; border-radius:50%;\r\n  display:grid; place-items:center;\r\n  background-color:rgba(18,15,12,.62) !important;\r\n  border:1px solid rgba(255,255,255,.22) !important;\r\n  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);\r\n  box-shadow:0 4px 14px rgba(0,0,0,.3) !important;\r\n  transition:transform .16s ease, background-color .16s ease;\r\n}\r\n#khof .lb__x:active{ transform:scale(.9); background-color:rgba(18,15,12,.8) !important; }\r\n#khof .lb__x svg{ width:16px !important; height:16px !important; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; }\r\n@media(min-width:560px){ #khof .lb__x{ top:20px; right:20px; } }\r\n\r\n\/* slika: fiksna visina, ne gura sadrzaj sa ekrana *\/\r\n#khof .lb__ph{\r\n  height:32vh !important; height:34svh !important;\r\n  min-height:190px !important; max-height:320px !important;\r\n  background-color:var(--gold-bg) !important;\r\n}\r\n@media(min-width:560px){ #khof .lb__ph{ height:250px !important; max-height:none !important; } }\r\n#khof .lb__b{ padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)) !important; }\r\n\r\n#khof .lb__n{\r\n  text-align:center; font-size:1.55rem !important; font-weight:800 !important;\r\n  letter-spacing:.01em !important; line-height:1.1 !important; text-transform:uppercase !important;\r\n}\r\n#khof .lb__badge{\r\n  display:block; width:-moz-fit-content; width:fit-content;\r\n  margin:var(--s3) auto 0 !important; padding:7px 15px !important; border-radius:10px;\r\n  background-color:var(--gold-bg) !important; border:1px solid rgba(167,137,99,.30) !important;\r\n  color:var(--gold-d) !important;\r\n  font-size:.66rem !important; font-weight:800 !important; letter-spacing:.14em !important; text-transform:uppercase !important;\r\n}\r\n#khof .lb__d{\r\n  text-align:center; font-size:.92rem !important; color:var(--muted) !important;\r\n  margin-top:var(--s3) !important; line-height:1.6 !important;\r\n}\r\n#khof .lb__p{\r\n  text-align:center; font-size:1.6rem !important; font-weight:800 !important;\r\n  color:var(--gold-d) !important; margin-top:var(--s4) !important;\r\n  font-variant-numeric:tabular-nums;\r\n}\r\n#khof .lb__note{\r\n  text-align:center; font-size:.72rem !important; color:var(--muted) !important;\r\n  margin-top:8px !important;\r\n}\r\n\r\n\/* --- Passt gut dazu --- *\/\r\n#khof .lb__pk{\r\n  font-size:.66rem !important; font-weight:800 !important; letter-spacing:.16em !important;\r\n  text-transform:uppercase !important; color:var(--gold) !important;\r\n  margin-top:var(--s5) !important; margin-bottom:var(--s2) !important;\r\n}\r\n#khof .lb__pairs{ display:grid; gap:var(--s1); }\r\n#khof .lb__pair{\r\n  display:flex; align-items:center; gap:var(--s2);\r\n  width:100%; text-align:left !important;\r\n  padding:8px !important; border-radius:14px;\r\n  background-color:var(--paper) !important;\r\n  border:1px solid var(--line) !important;\r\n  transition:transform .16s ease, border-color .16s ease;\r\n}\r\n#khof .lb__pair:active{ transform:scale(.985); border-color:var(--gold) !important; }\r\n#khof .lb__pair-ph{\r\n  flex:0 0 48px; width:48px !important; height:48px !important;\r\n  border-radius:10px; overflow:hidden; background-color:var(--gold-bg) !important;\r\n  display:grid; place-items:center;\r\n}\r\n#khof .lb__pair-ph b{ font-size:1rem !important; font-weight:800 !important; color:var(--gold) !important; opacity:.4; }\r\n#khof .lb__pair-t{ flex:1; min-width:0; }\r\n#khof .lb__pair-n{ font-size:.82rem !important; font-weight:700 !important; letter-spacing:.02em !important; text-transform:uppercase !important; line-height:1.25 !important; }\r\n#khof .lb__pair-s{\r\n  font-size:.74rem !important; color:var(--muted) !important; margin-top:2px !important;\r\n  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;\r\n}\r\n#khof .lb__pair-p{ flex:0 0 auto; font-size:.85rem !important; font-weight:800 !important; color:var(--gold-d) !important; }\r\n\r\n#khof .lb__a{\r\n  font-size:.72rem !important; color:var(--muted) !important;\r\n  margin-top:var(--s4) !important; padding-top:var(--s3) !important;\r\n  border-top:1px solid var(--line-2) !important; line-height:1.6 !important;\r\n}\r\n#khof .lb__close{\r\n  margin-top:var(--s4) !important; padding:14px !important; border-radius:999px;\r\n  background-color:var(--ink) !important; color:#fff !important;\r\n  font-size:.85rem !important; font-weight:700 !important; text-align:center !important;\r\n}\r\n<\/style>\r\n\r\n  <!-- ============ HEADER ============ -->\r\n  <div class=\"hdr\">\r\n    <div class=\"wrap hdr__in\">\r\n      <span><\/span>\r\n      <div class=\"hdr__logo\"><img decoding=\"async\" src=\"https:\/\/www.karlsruherhof.de\/images\/logokarlsruherhof.png\" alt=\"Karlsruher Hof\"><\/div>\r\n      <button class=\"hdr__info\" id=\"k-info-open\" aria-label=\"Informationen\">\r\n        <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 11v5.5\"\/><path d=\"M12 7.6v.1\"\/><\/svg>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============ AKCIJSKA TRAKA ============ -->\r\n  <div class=\"wrap acts\">\r\n    <div class=\"acts__box\">\r\n\r\n      <button class=\"act\" id=\"k-save\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 3v12M7.5 10.5 12 15l4.5-4.5\"\/><path d=\"M5 19h14\"\/><\/svg>\r\n        <b>Speichern<\/b>\r\n      <\/button>\r\n\r\n      <a class=\"act\" href=\"tel:+49721572320\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z\"\/><\/svg>\r\n        <b>Anrufen<\/b>\r\n      <\/a>\r\n\r\n      <a class=\"act\" href=\"https:\/\/www.tripadvisor.com\/Restaurant_Review-g187289-d1040089-Reviews-Karlsruher_Hof-Karlsruhe_Baden_Wurttemberg.html\" target=\"_blank\" rel=\"noopener\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 3.5l2.5 5.3 5.7.8-4.1 4 1 5.7-5.1-2.9-5.1 2.9 1-5.7-4.1-4 5.7-.8L12 3.5Z\"\/><\/svg>\r\n        <b>Bewerten<\/b>\r\n      <\/a>\r\n\r\n      <!-- Kad se doda EN: promeniti u <button> i dodati prebacivanje -->\r\n      <div class=\"act act--static\">\r\n        <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M3.5 9h17M3.5 15h17M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18\"\/><\/svg>\r\n        <b>Deutsch<\/b>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============ TABOVI ============ -->\r\n  <div class=\"tabs-w\">\r\n    <div class=\"wrap tabs\" id=\"k-tabs\">\r\n      <button class=\"tab is-on\" data-p=\"p-top\">TOP<\/button>\r\n      <button class=\"tab\" data-p=\"p-menus\">MEN\u00dcS<\/button>\r\n      <button class=\"tab\" data-p=\"p-vorspeisen\">VORSPEISEN<\/button>\r\n      <button class=\"tab\" data-p=\"p-grill\">VOM GRILL<\/button>\r\n      <button class=\"tab\" data-p=\"p-kueche\">AUS DER K\u00dcCHE<\/button>\r\n      <button class=\"tab\" data-p=\"p-beilagen\">BEILAGEN<\/button>\r\n      <button class=\"tab\" data-p=\"p-suesses\">S\u00dcSSES<\/button>\r\n      <button class=\"tab\" data-p=\"p-getraenke\">GETR\u00c4NKE<\/button>\r\n      <button class=\"tab\" data-p=\"p-veg\">VEGETARISCH<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"wrap\">\r\n\r\n    <!-- ============ TAB: TOP ============ -->\r\n    <section class=\"panel is-on\" id=\"p-top\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">EMPFEHLUNG DES HAUSES<\/p>\r\n        <h2 class=\"p__t\">Unsere Klassiker<\/h2>\r\n        <p class=\"p__s\">Wischen f\u00fcr mehr \u2014 antippen f\u00fcr Details.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"car\" id=\"k-car\">\r\n\r\n        <button class=\"sig\" data-open=\"Strumica-Teller\">\r\n          <div class=\"sig__ph\"><img decoding=\"async\" src=\"https:\/\/www.karlsruherhof.de\/images\/strumica_teller_karlsruher_hof.jpg\" alt=\"\"><\/div>\r\n          <div class=\"sig__in\">\r\n            <div class=\"sig__crown\"><svg viewBox=\"0 0 24 24\"><path d=\"M2 8l4 4 6-8 6 8 4-4-3 12H5L2 8Z\"\/><\/svg><\/div>\r\n            <p class=\"sig__k\">CHEF'S EMPFEHLUNG<\/p>\r\n            <h3 class=\"sig__n\">Strumica-Teller<\/h3>\r\n            <p class=\"sig__d\">Ein saftiger Spie\u00df, drei hausgemachte Cevapcici, Pommes frites, Djuvec-Reis und Salat.<\/p>\r\n            <span class=\"sig__badge\">AM BELIEBTESTEN<\/span>\r\n            <span class=\"sig__go\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/span>\r\n            <p class=\"sig__p\">15,50 \u20ac<\/p>\r\n          <\/div>\r\n        <\/button>\r\n\r\n        <button class=\"sig\" data-open=\"Gebratene Leber mit Zwiebeln\">\r\n          <div class=\"sig__ph\"><img decoding=\"async\" src=\"https:\/\/www.karlsruherhof.de\/images\/leber_balkan_art_karlsruher_hof.jpg\" alt=\"\"><\/div>\r\n          <div class=\"sig__in\">\r\n            <div class=\"sig__crown\"><svg viewBox=\"0 0 24 24\"><path d=\"M2 8l4 4 6-8 6 8 4-4-3 12H5L2 8Z\"\/><\/svg><\/div>\r\n            <p class=\"sig__k\">CHEF'S EMPFEHLUNG<\/p>\r\n            <h3 class=\"sig__n\">Leber Balkan Art<\/h3>\r\n            <p class=\"sig__d\">Gegrillte Rinderleber mit ged\u00e4mpften Zwiebeln und kross gegrilltem Speck.<\/p>\r\n            <span class=\"sig__badge\">HAUSREZEPT<\/span>\r\n            <span class=\"sig__go\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/span>\r\n            <p class=\"sig__p\">15,50 \u20ac<\/p>\r\n          <\/div>\r\n        <\/button>\r\n\r\n        <button class=\"sig\" data-open=\"Cevapcici\">\r\n          <div class=\"sig__ph\"><img decoding=\"async\" src=\"https:\/\/www.karlsruherhof.de\/images\/cevapcici.jpg\" alt=\"\"><\/div>\r\n          <div class=\"sig__in\">\r\n            <div class=\"sig__crown\"><svg viewBox=\"0 0 24 24\"><path d=\"M2 8l4 4 6-8 6 8 4-4-3 12H5L2 8Z\"\/><\/svg><\/div>\r\n            <p class=\"sig__k\">CHEF'S EMPFEHLUNG<\/p>\r\n            <h3 class=\"sig__n\">Cevapcici<\/h3>\r\n            <p class=\"sig__d\">Zehn St\u00fcck hausgemachte Hackfleischr\u00f6llchen mit frischen Zwiebeln.<\/p>\r\n            <span class=\"sig__badge\">HAUSGEMACHT<\/span>\r\n            <span class=\"sig__go\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/span>\r\n            <p class=\"sig__p\">14,50 \u20ac<\/p>\r\n          <\/div>\r\n        <\/button>\r\n\r\n        <button class=\"sig\" data-open=\"Zwiebel-Steak\">\r\n          <div class=\"sig__ph\"><img decoding=\"async\" src=\"https:\/\/www.karlsruherhof.de\/images\/zwiebel_steak.jpg\" alt=\"\"><\/div>\r\n          <div class=\"sig__in\">\r\n            <div class=\"sig__crown\"><svg viewBox=\"0 0 24 24\"><path d=\"M2 8l4 4 6-8 6 8 4-4-3 12H5L2 8Z\"\/><\/svg><\/div>\r\n            <p class=\"sig__k\">CHEF'S EMPFEHLUNG<\/p>\r\n            <h3 class=\"sig__n\">Zwiebel-Steak<\/h3>\r\n            <p class=\"sig__d\">Saftiges Schweinesteak mit ged\u00e4mpften Zwiebeln und Pommes frites.<\/p>\r\n            <span class=\"sig__badge\">KLASSIKER<\/span>\r\n            <span class=\"sig__go\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/span>\r\n            <p class=\"sig__p\">15,50 \u20ac<\/p>\r\n          <\/div>\r\n        <\/button>\r\n\r\n      <\/div>\r\n      <div class=\"dots\" id=\"k-dots\"><\/div>\r\n    <\/section>\r\n\r\n    <!-- ============ TAB: MEN\u00dcS ============ -->\r\n    <section class=\"panel\" id=\"p-menus\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">G\u00dcNSTIGER ZUSAMMEN<\/p>\r\n        <h2 class=\"p__t\">Men\u00fcs<\/h2>\r\n        <p class=\"p__s\">Hauptgericht mit Beilage und Getr\u00e4nk.<\/p>\r\n      <\/div>\r\n      <div class=\"grid\">\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/cevapcici.jpg\" data-n=\"Grill-Men\u00fc\" data-pair=\"Beilagensalat, Baklava\" data-note=\"Getr\u00e4nk nach Wahl inklusive.\" data-pr=\"16,90 \u20ac\" data-d=\"Cevapcici mit w\u00fcrzigem Djuvec-Reis und einem Getr\u00e4nk nach Wahl.\" data-a=\"Allergene: a\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/cevapcici.jpg\" alt=\"\"><span class=\"it__tag\">Spare 2,50 \u20ac<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Grill-Men\u00fc<\/span><span class=\"it__d\">Cevapcici + Djuvec-Reis + Getr\u00e4nk<\/span><span class=\"it__p\">16,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/strumica_teller_karlsruher_hof.jpg\" data-n=\"Strumica-Men\u00fc\" data-pair=\"Beilagensalat, Palatschinken\" data-note=\"Getr\u00e4nk nach Wahl inklusive.\" data-pr=\"18,90 \u20ac\" data-d=\"Strumica-Teller mit Salat und einem Getr\u00e4nk nach Wahl.\" data-a=\"Allergene: a, c\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/strumica_teller_karlsruher_hof.jpg\" alt=\"\"><span class=\"it__tag\">Spare 3,00 \u20ac<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Strumica-Men\u00fc<\/span><span class=\"it__d\">Strumica-Teller + Salat + Getr\u00e4nk<\/span><span class=\"it__p\">18,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/spaetzle.jpg\" data-n=\"Veggie-Men\u00fc\" data-pair=\"Beilagensalat, Baklava\" data-note=\"Getr\u00e4nk nach Wahl inklusive.\" data-pr=\"15,90 \u20ac\" data-d=\"Schw\u00e4bische K\u00e4sesp\u00e4tzle mit Beilagensalat und einem Getr\u00e4nk nach Wahl.\" data-a=\"Allergene: a, c, g\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/spaetzle.jpg\" alt=\"\"><span class=\"it__tag\">Vegetarisch<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Veggie-Men\u00fc<\/span><span class=\"it__d\">K\u00e4sesp\u00e4tzle + Salat + Getr\u00e4nk<\/span><span class=\"it__p\">15,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============ TAB: VORSPEISEN ============ -->\r\n    <section class=\"panel\" id=\"p-vorspeisen\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">ZUM BEGINN<\/p>\r\n        <h2 class=\"p__t\">Vorspeisen<\/h2>\r\n      <\/div>\r\n      <div class=\"grid\">\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/vorspeise.jpg\" data-n=\"Gemischte Vorspeisenplatte\" data-pair=\"Fladenbrot, Sliwowitz\" data-pr=\"12,90 \u20ac\" data-d=\"Ajvar, Kajmak, Schafsk\u00e4se, Urnebes und ger\u00f6stete Paprika mit warmem Fladenbrot.\" data-a=\"Allergene: a, g\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/vorspeise.jpg\" alt=\"\"><span class=\"it__tag\">F\u00fcr 2<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Gemischte Vorspeisenplatte <sup>a,g<\/sup><\/span><span class=\"it__d\">Ajvar, Kajmak, Schafsk\u00e4se, Urnebes, Fladenbrot<\/span><span class=\"it__p\">12,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/pep.jpg\" data-n=\"Urnebes\" data-pair=\"Fladenbrot, Jelen Pivo\" data-pr=\"6,50 \u20ac\" data-d=\"W\u00fcrziger Schafsk\u00e4seaufstrich mit Paprika und Knoblauch.\" data-a=\"Allergene: g\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/pep.jpg\" alt=\"\"><span class=\"it__tag\">Scharf<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Urnebes <sup>g<\/sup><\/span><span class=\"it__d\">Schafsk\u00e4seaufstrich mit Paprika und Knoblauch<\/span><span class=\"it__p\">6,50 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/salat.jpg\" data-n=\"Gegrillter Schafsk\u00e4se\" data-pair=\"Fladenbrot, Beilagensalat\" data-pr=\"7,90 \u20ac\" data-d=\"Mit Tomaten, Oliven\u00f6l und Oregano, dazu Fladenbrot.\" data-a=\"Allergene: a, g\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/salat.jpg\" alt=\"\"><span class=\"it__tag\">Vegetarisch<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Gegrillter Schafsk\u00e4se <sup>a,g<\/sup><\/span><span class=\"it__d\">Tomaten, Oliven\u00f6l, Oregano, Fladenbrot<\/span><span class=\"it__p\">7,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"\" data-n=\"Rinderkraftbr\u00fche\" data-pair=\"Fladenbrot\" data-pr=\"4,90 \u20ac\" data-d=\"Klare Rinderbr\u00fche mit feinen Nudeln.\" data-a=\"Allergene: a, c\">\r\n          <span class=\"it__ph it__ph--none\"><b>R<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Rinderkraftbr\u00fche <sup>a,c<\/sup><\/span><span class=\"it__d\">Mit feinen Nudeln<\/span><span class=\"it__p\">4,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============ TAB: VOM GRILL ============ -->\r\n    <section class=\"panel\" id=\"p-grill\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">VOM ROST<\/p>\r\n        <h2 class=\"p__t\">Vom Grill<\/h2>\r\n        <p class=\"p__s\">Alle Grillgerichte mit Pommes frites, Djuvec-Reis und Salat.<\/p>\r\n      <\/div>\r\n      <div class=\"grid\">\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/cevapcici.jpg\" data-n=\"Cevapcici\" data-pair=\"Djuvec-Reis, Beilagensalat, Jelen Pivo\" data-pr=\"14,50 \u20ac\" data-d=\"10 St\u00fcck hausgemachte Hackfleischr\u00f6llchen mit frischen Zwiebeln.\" data-a=\"Allergene: a\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/cevapcici.jpg\" alt=\"\"><span class=\"it__tag\">Beliebt<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Cevapcici <sup>a<\/sup><\/span><span class=\"it__d\">10 St\u00fcck, hausgemacht, mit Zwiebeln<\/span><span class=\"it__p\">14,50 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/strumica_teller_karlsruher_hof.jpg\" data-n=\"Strumica-Teller\" data-pair=\"Beilagensalat, Jelen Pivo, Palatschinken\" data-pr=\"15,50 \u20ac\" data-d=\"1 saftiger Spie\u00df, 3 hausgemachte Cevapcici mit Pommes frites, Djuvec-Reis und Salat.\" data-a=\"Allergene: a, c\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/strumica_teller_karlsruher_hof.jpg\" alt=\"\"><span class=\"it__tag\">Beliebt<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Strumica-Teller <sup>a,c<\/sup><\/span><span class=\"it__d\">Spie\u00df, 3 Cevapcici, Pommes, Reis, Salat<\/span><span class=\"it__p\">15,50 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/leber_balkan_art_karlsruher_hof.jpg\" data-n=\"Gebratene Leber mit Zwiebeln\" data-pair=\"Fladenbrot, Beilagensalat, Sliwowitz\" data-pr=\"15,50 \u20ac\" data-d=\"Mit Pommes frites, Ajvar und Djuvec-Reis.\" data-a=\"Allergene: a\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/leber_balkan_art_karlsruher_hof.jpg\" alt=\"\"><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Gebratene Leber <sup>a<\/sup><\/span><span class=\"it__d\">Zwiebeln, Pommes frites, Ajvar, Djuvec-Reis<\/span><span class=\"it__p\">15,50 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/zwiebel_steak.jpg\" data-n=\"Zwiebel-Steak\" data-pair=\"Djuvec-Reis, Beilagensalat, Jelen Pivo\" data-pr=\"15,50 \u20ac\" data-d=\"Saftiges Schweinesteak mit ged\u00e4mpften Zwiebeln und Pommes frites.\" data-a=\"Allergene: a\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/zwiebel_steak.jpg\" alt=\"\"><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Zwiebel-Steak <sup>a<\/sup><\/span><span class=\"it__d\">Schweinesteak mit ged\u00e4mpften Zwiebeln<\/span><span class=\"it__p\">15,50 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/gemische_vorspeise_2100x800.jpg\" data-n=\"Salatteller mit Cevapcici\" data-pair=\"Fladenbrot, Jelen Pivo\" data-pr=\"13,90 \u20ac\" data-d=\"Gro\u00dfer Beilagensalat mit Cevapcici und frischem Brot.\" data-a=\"Allergene: a\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/gemische_vorspeise_2100x800.jpg\" alt=\"\"><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Salatteller mit Cevapcici <sup>a<\/sup><\/span><span class=\"it__d\">Gro\u00dfer Salat, Cevapcici, frisches Brot<\/span><span class=\"it__p\">13,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============ TAB: AUS DER K\u00dcCHE ============ -->\r\n    <section class=\"panel\" id=\"p-kueche\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">HAUSMANNSKOST<\/p>\r\n        <h2 class=\"p__t\">Aus der K\u00fcche<\/h2>\r\n      <\/div>\r\n      <div class=\"grid\">\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/spaetzle.jpg\" data-n=\"Schw\u00e4bische K\u00e4sesp\u00e4tzle\" data-pair=\"Beilagensalat, Palatschinken\" data-pr=\"12,90 \u20ac\" data-d=\"Mit R\u00f6stzwiebeln und Beilagensalat.\" data-a=\"Allergene: a, c, g\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/spaetzle.jpg\" alt=\"\"><span class=\"it__tag\">Vegetarisch<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Schw\u00e4bische K\u00e4sesp\u00e4tzle <sup>a,c,g<\/sup><\/span><span class=\"it__d\">Mit R\u00f6stzwiebeln und Beilagensalat<\/span><span class=\"it__p\">12,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"\" data-n=\"\u00dcberbackenes Schnitzel\" data-pair=\"Beilagensalat, Jelen Pivo\" data-pr=\"16,90 \u20ac\" data-d=\"Mit Kroketten und Sauce, \u00fcberbacken.\" data-a=\"Allergene: a, c, g\">\r\n          <span class=\"it__ph it__ph--none\"><b>\u00dc<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">\u00dcberbackenes Schnitzel <sup>a,c,g<\/sup><\/span><span class=\"it__d\">Mit Kroketten und Sauce<\/span><span class=\"it__p\">16,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"\" data-n=\"Geschnetzeltes\" data-pair=\"Beilagensalat, Coca-Cola\" data-pr=\"15,90 \u20ac\" data-d=\"Mit Bratkartoffeln und Rahmsauce.\" data-a=\"Allergene: a, g\">\r\n          <span class=\"it__ph it__ph--none\"><b>G<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Geschnetzeltes <sup>a,g<\/sup><\/span><span class=\"it__d\">Mit Bratkartoffeln und Rahmsauce<\/span><span class=\"it__p\">15,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"\" data-n=\"Struwwelpeter\" data-pair=\"Beilagensalat, Jelen Pivo\" data-pr=\"14,90 \u20ac\" data-d=\"Hausklassiker mit extra Sauce.\" data-a=\"Allergene: a, c\">\r\n          <span class=\"it__ph it__ph--none\"><b>S<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Struwwelpeter <sup>a,c<\/sup><\/span><span class=\"it__d\">Hausklassiker mit extra Sauce<\/span><span class=\"it__p\">14,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============ TAB: BEILAGEN ============ -->\r\n    <section class=\"panel\" id=\"p-beilagen\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">DAZU<\/p>\r\n        <h2 class=\"p__t\">Beilagen &amp; Salate<\/h2>\r\n      <\/div>\r\n      <div class=\"grid\">\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/salat.jpg\" data-n=\"Beilagensalat\" data-sub=\"Frisch und knackig\" data-pr=\"4,90 \u20ac\" data-d=\"Frischer gemischter Salat mit Hausdressing.\" data-a=\"\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/salat.jpg\" alt=\"\"><span class=\"it__tag\">Vegetarisch<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Beilagensalat<\/span><span class=\"it__d\">Gemischt, mit Hausdressing<\/span><span class=\"it__p\">4,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/vorspeise.jpg\" data-n=\"Djuvec-Reis\" data-sub=\"W\u00fcrzige Beilage\" data-pr=\"3,90 \u20ac\" data-d=\"W\u00fcrziger Reis mit Paprika und Erbsen.\" data-a=\"\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/vorspeise.jpg\" alt=\"\"><span class=\"it__tag\">Vegetarisch<\/span><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Djuvec-Reis<\/span><span class=\"it__d\">Reis mit Paprika und Erbsen<\/span><span class=\"it__p\">3,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"\" data-n=\"Pommes frites\" data-pr=\"3,50 \u20ac\" data-d=\"Knusprig frittiert.\" data-a=\"\">\r\n          <span class=\"it__ph it__ph--none\"><b>P<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Pommes frites<\/span><span class=\"it__d\">Knusprig frittiert<\/span><span class=\"it__p\">3,50 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"\" data-n=\"Fladenbrot\" data-sub=\"Warm serviert\" data-pr=\"2,50 \u20ac\" data-d=\"Warm serviert.\" data-a=\"Allergene: a\">\r\n          <span class=\"it__ph it__ph--none\"><b>F<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Fladenbrot <sup>a<\/sup><\/span><span class=\"it__d\">Warm serviert<\/span><span class=\"it__p\">2,50 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============ TAB: S\u00dcSSES ============ -->\r\n    <section class=\"panel\" id=\"p-suesses\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">ZUM SCHLUSS<\/p>\r\n        <h2 class=\"p__t\">S\u00fc\u00dfes<\/h2>\r\n      <\/div>\r\n      <div class=\"grid\">\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"https:\/\/www.karlsruherhof.de\/images\/pep.jpg\" data-n=\"Palatschinken\" data-sub=\"S\u00fc\u00dfer Abschluss\" data-pair=\"Sliwowitz\" data-pr=\"6,50 \u20ac\" data-d=\"Mit Nuss-Nougat-Creme und Puderzucker.\" data-a=\"Allergene: a, c, g, h\">\r\n          <span class=\"it__ph\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.karlsruherhof.de\/images\/pep.jpg\" alt=\"\"><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Palatschinken <sup>a,c,g,h<\/sup><\/span><span class=\"it__d\">Mit Nuss-Nougat-Creme<\/span><span class=\"it__p\">6,50 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"vegetarisch\" data-ph=\"\" data-n=\"Baklava\" data-sub=\"S\u00fc\u00dfer Abschluss\" data-pair=\"Sliwowitz\" data-pr=\"5,90 \u20ac\" data-d=\"Bl\u00e4tterteig mit Waln\u00fcssen und Honigsirup, dazu Sahne.\" data-a=\"Allergene: a, g, h\">\r\n          <span class=\"it__ph it__ph--none\"><b>B<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Baklava <sup>a,g,h<\/sup><\/span><span class=\"it__d\">Waln\u00fcsse, Honigsirup, Sahne<\/span><span class=\"it__p\">5,90 \u20ac<\/span><\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============ TAB: GETR\u00c4NKE ============ -->\r\n    <section class=\"panel\" id=\"p-getraenke\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">ZUM ANSTOSSEN<\/p>\r\n        <h2 class=\"p__t\">Getr\u00e4nke<\/h2>\r\n      <\/div>\r\n      <div class=\"grid\">\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"\" data-n=\"Coca-Cola\" data-sub=\"Gut gek\u00fchlt\" data-pr=\"3,20 \u20ac\" data-d=\"Gek\u00fchlt serviert.\" data-a=\"Zusatzstoffe: 1, 4\">\r\n          <span class=\"it__ph it__ph--none\"><b>C<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Coca-Cola <sup>1,4<\/sup><\/span><span class=\"it__d\">Alkoholfrei<\/span><span class=\"it__p\">3,20 \u20ac <em>0,3 l<\/em><\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"\" data-n=\"Jelen Pivo\" data-sub=\"Vom Fass\" data-pr=\"4,50 \u20ac\" data-d=\"Frisch gezapft vom Fass.\" data-a=\"Allergene: a\">\r\n          <span class=\"it__ph it__ph--none\"><b>J<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Jelen Pivo <sup>a<\/sup><\/span><span class=\"it__d\">Vom Fass<\/span><span class=\"it__p\">4,50 \u20ac <em>0,5 l<\/em><\/span><\/span>\r\n        <\/button>\r\n\r\n        <button class=\"it\" data-t=\"\" data-ph=\"\" data-n=\"Sliwowitz\" data-sub=\"Zum Abschluss\" data-pr=\"3,00 \u20ac\" data-d=\"Hausschnaps aus Zwetschgen.\" data-a=\"\">\r\n          <span class=\"it__ph it__ph--none\"><b>S<\/b><\/span>\r\n          <span class=\"it__b\"><span class=\"it__n\">Sliwowitz<\/span><span class=\"it__d\">Hausschnaps aus Zwetschgen<\/span><span class=\"it__p\">3,00 \u20ac <em>2 cl<\/em><\/span><\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============ TAB: VEGETARISCH (puni se sam) ============ -->\r\n    <section class=\"panel\" id=\"p-veg\">\r\n      <div class=\"p__h\">\r\n        <p class=\"p__k\">OHNE FLEISCH<\/p>\r\n        <h2 class=\"p__t\">Vegetarisch<\/h2>\r\n        <p class=\"p__s\">Alle fleischlosen Gerichte auf einen Blick.<\/p>\r\n      <\/div>\r\n      <div class=\"grid\" id=\"k-veg\"><\/div>\r\n    <\/section>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============ FOOTER ============ -->\r\n  <footer class=\"ft\">\r\n    <div class=\"wrap\">\r\n\r\n      <div class=\"ft__g\">\r\n        <div>\r\n          <p class=\"ft__k\">K\u00fcche<\/p>\r\n          <p class=\"ft__v\">Dienstag \u2013 Sonntag<br>17:00 \u2013 22:00 Uhr<br>Montag geschlossen<\/p>\r\n        <\/div>\r\n        <div>\r\n          <p class=\"ft__k\">Telefon<\/p>\r\n          <p class=\"ft__v\"><a href=\"tel:+49721572320\">+49 721 57 23 20<\/a><br>info@karlsruherhof.de<\/p>\r\n        <\/div>\r\n        <div>\r\n          <p class=\"ft__k\">Adresse<\/p>\r\n          <p class=\"ft__v\">Pfalzstr. 13<br>76189 Karlsruhe<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <p class=\"ft__fine\">\r\n        <b>Allergene<\/b> a Glutenhaltiges Getreide \u00b7 c Eier \u00b7 g Milch \u00b7 h Schalenfr\u00fcchte<br>\r\n        <b>Zusatzstoffe<\/b> 1 mit Farbstoff \u00b7 4 mit Geschmacksverst\u00e4rker<br>\r\n        Alle Preise in Euro inkl. MwSt. Weitere Ausk\u00fcnfte gibt Ihnen gerne unser Personal.\r\n      <\/p>\r\n\r\n      <div class=\"ft__meta\">\r\n        <span>\u00a9 2026 Karlsruher Hof<\/span>\r\n        <a class=\"ft__by\" href=\"https:\/\/mk360studio.com\" target=\"_blank\" rel=\"noopener\">QR-Speisekarte von <strong>MK360Studio<\/strong><\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/footer>\r\n\r\n  <!-- ============ \"ZUM STARTBILDSCHIRM\" MODAL ============ -->\r\n  <div class=\"inf\" id=\"k-a2h\">\r\n    <div class=\"inf__box\">\r\n      <button class=\"inf__x\" data-a2h-close aria-label=\"Schlie\u00dfen\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg>\r\n      <\/button>\r\n\r\n      <p class=\"inf__n\">Speichern<\/p>\r\n      <p class=\"inf__s\">Speisekarte auf dem Startbildschirm<\/p>\r\n\r\n      <div class=\"inf__rule\"><\/div>\r\n\r\n      <div class=\"inf__row\">\r\n        <span class=\"inf__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 3v11M8 7l4-4 4 4\"\/><path d=\"M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5\"\/><\/svg><\/span>\r\n        <span>\r\n          <span class=\"inf__k\">iPhone \u00b7 Safari<\/span>\r\n          <span class=\"inf__v\">Teilen-Symbol antippen, dann \u201eZum Home-Bildschirm\u201c<\/span>\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <div class=\"inf__row\">\r\n        <span class=\"inf__ic\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"\/><circle cx=\"12\" cy=\"12\" r=\"1.6\"\/><circle cx=\"12\" cy=\"19\" r=\"1.6\"\/><\/svg><\/span>\r\n        <span>\r\n          <span class=\"inf__k\">Android \u00b7 Chrome<\/span>\r\n          <span class=\"inf__v\">Men\u00fc (drei Punkte), dann \u201eZum Startbildschirm hinzuf\u00fcgen\u201c<\/span>\r\n        <\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============ INFO MODAL ============ -->\r\n  <div class=\"inf\" id=\"k-inf\">\r\n    <div class=\"inf__box\">\r\n      <button class=\"inf__x\" id=\"k-inf-x\" aria-label=\"Schlie\u00dfen\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg>\r\n      <\/button>\r\n\r\n      <div class=\"inf__logo\"><img decoding=\"async\" src=\"https:\/\/www.karlsruherhof.de\/images\/logokarlsruherhof.png\" alt=\"\"><\/div>\r\n      <p class=\"inf__n\">Karlsruher Hof<\/p>\r\n      <p class=\"inf__s\">Balkan &amp; Grill<\/p>\r\n\r\n      <div class=\"inf__rule\"><\/div>\r\n\r\n      <div class=\"inf__row\">\r\n        <span class=\"inf__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.5\"\/><\/svg><\/span>\r\n        <span>\r\n          <span class=\"inf__k\">Adresse<\/span>\r\n          <span class=\"inf__v\">Pfalzstr. 13<br>76189 Karlsruhe<\/span>\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <div class=\"inf__row\">\r\n        <span class=\"inf__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z\"\/><\/svg><\/span>\r\n        <span>\r\n          <span class=\"inf__k\">Telefon<\/span>\r\n          <span class=\"inf__v\"><a href=\"tel:+49721572320\">+49 721 57 23 20<\/a><\/span>\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <div class=\"inf__row\">\r\n        <span class=\"inf__ic\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7.5V12l3.5 2\"\/><\/svg><\/span>\r\n        <span>\r\n          <span class=\"inf__k\">\u00d6ffnungszeiten<\/span>\r\n          <span class=\"inf__v\">Di \u2013 So: 17:00 \u2013 22:00 Uhr<br>Montag geschlossen<\/span>\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <div class=\"inf__row\">\r\n        <span class=\"inf__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 5h16v14H4zM4 10h16M10 10v9\"\/><\/svg><\/span>\r\n        <span>\r\n          <span class=\"inf__k\">Angebot<\/span>\r\n          <span class=\"inf__v\">Restaurant &amp; Biergarten<br>Abholung m\u00f6glich<\/span>\r\n        <\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============ DETALJ ============ -->\r\n  <div class=\"lb\" id=\"k-lb\">\r\n    <div class=\"lb__box\" id=\"k-lb-box\"><\/div>\r\n    <button class=\"lb__x\" data-lb-close aria-label=\"Schlie\u00dfen\">\r\n      <svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg>\r\n    <\/button>\r\n  <\/div>\r\n\r\n<script>\r\n(function(){\r\n  var root = document.getElementById('khof'); if(!root) return;\r\n  var $ = function(i){ return document.getElementById(i); };\r\n\r\n  \/* ---- tab \"Vegetarisch\" se puni sam ---- *\/\r\n  var vegBox = $('k-veg');\r\n  root.querySelectorAll('.panel:not(#p-veg) .it').forEach(function(it){\r\n    if((it.getAttribute('data-t') || '').indexOf('vegetarisch') > -1){\r\n      vegBox.appendChild(it.cloneNode(true));\r\n    }\r\n  });\r\n\r\n  \/* ---- prebacivanje tabova ---- *\/\r\n  var tabs = $('k-tabs');\r\n\r\n  \/* jednokratni pokret trake kao signal da se tu bira *\/\r\n  setTimeout(function(){\r\n    tabs.classList.add('hint');\r\n    setTimeout(function(){ tabs.classList.remove('hint'); }, 2400);\r\n  }, 600);\r\n  tabs.querySelectorAll('.tab').forEach(function(t){\r\n    t.addEventListener('click', function(){\r\n      tabs.querySelectorAll('.tab').forEach(function(x){ x.classList.remove('is-on'); });\r\n      t.classList.add('is-on');\r\n      root.querySelectorAll('.panel').forEach(function(p){ p.classList.remove('is-on'); });\r\n      var p = $(t.getAttribute('data-p')); if(p) p.classList.add('is-on');\r\n\r\n      \/* aktivni tab u vidno polje *\/\r\n      var r = t.getBoundingClientRect(), tr = tabs.getBoundingClientRect();\r\n      if(r.left < tr.left + 12 || r.right > tr.right - 12){\r\n        tabs.scrollTo({ left: tabs.scrollLeft + (r.left - tr.left) - 60, behavior:'smooth' });\r\n      }\r\n      \/* na vrh sadrzaja *\/\r\n      var head = root.querySelector('.tabs-w');\r\n      var y = head.offsetTop;\r\n      if(window.pageYOffset > y) window.scrollTo({ top:y, behavior:'smooth' });\r\n    });\r\n  });\r\n\r\n  \/* ---- tackice carousela ---- *\/\r\n  var car = $('k-car'), dots = $('k-dots');\r\n  if(car && dots){\r\n    var slides = car.querySelectorAll('.sig');\r\n    slides.forEach(function(_, i){\r\n      var d = document.createElement('i');\r\n      if(i === 0) d.className = 'is-on';\r\n      dots.appendChild(d);\r\n    });\r\n    var t2 = false;\r\n    car.addEventListener('scroll', function(){\r\n      if(t2) return; t2 = true;\r\n      requestAnimationFrame(function(){\r\n        var i = Math.round(car.scrollLeft \/ (car.scrollWidth \/ slides.length));\r\n        dots.querySelectorAll('i').forEach(function(d, n){ d.classList.toggle('is-on', n === i); });\r\n        t2 = false;\r\n      });\r\n    }, {passive:true});\r\n  }\r\n\r\n  \/* ---- detalj jela ---- *\/\r\n  var lb = $('k-lb'), lbBox = $('k-lb-box');\r\n\r\n  \/* indeks svih jela po nazivu \u2014 koristi se za \"Passt gut dazu\" *\/\r\n  var index = {};\r\n  root.querySelectorAll('.panel:not(#p-veg) .it').forEach(function(it){\r\n    var n = it.getAttribute('data-n');\r\n    if(n && !index[n]) index[n] = it;\r\n  });\r\n\r\n  function esc(s){\r\n    return String(s || '').replace(\/[&<>\"]\/g, function(c){\r\n      return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;'}[c];\r\n    });\r\n  }\r\n\r\n  function pairRow(name){\r\n    var src = index[name];\r\n    if(!src) return '';\r\n    var ph = src.getAttribute('data-ph');\r\n    var thumb = ph\r\n      ? '<span class=\"lb__pair-ph\"><img decoding=\"async\" loading=\"lazy\" src=\"'+esc(ph)+'\" alt=\"\"><\/span>'\r\n      : '<span class=\"lb__pair-ph\"><b>'+esc(name.charAt(0))+'<\/b><\/span>';\r\n    return '<button class=\"lb__pair\" data-open=\"'+esc(name)+'\">'\r\n      + thumb\r\n      + '<span class=\"lb__pair-t\">'\r\n      + '<span class=\"lb__pair-n\">'+esc(name)+'<\/span>'\r\n      + '<span class=\"lb__pair-s\">'+esc(src.getAttribute('data-sub') || src.getAttribute('data-d') || '')+'<\/span>'\r\n      + '<\/span>'\r\n      + '<span class=\"lb__pair-p\">'+esc(src.getAttribute('data-pr') || '')+'<\/span>'\r\n      + '<\/button>';\r\n  }\r\n\r\n  function detail(t){\r\n    var ph    = t.getAttribute('data-ph');\r\n    var badge = (t.querySelector('.it__tag') || {}).textContent || '';\r\n    var note  = t.getAttribute('data-note') || '';\r\n    var pairs = (t.getAttribute('data-pair') || '').split(',')\r\n                  .map(function(s){ return s.trim(); }).filter(Boolean);\r\n\r\n    var pairsHtml = pairs.map(pairRow).filter(Boolean).join('');\r\n\r\n    lbBox.innerHTML =\r\n      (ph ? '<div class=\"lb__ph\"><img src=\"'+esc(ph)+'\" alt=\"'+esc(t.getAttribute('data-n'))+'\" decoding=\"async\"><\/div>' : '')\r\n      + '<div class=\"lb__b\">'\r\n      + '<h3 class=\"lb__n\">'+esc(t.getAttribute('data-n'))+'<\/h3>'\r\n      + (badge ? '<span class=\"lb__badge\">'+esc(badge)+'<\/span>' : '')\r\n      + '<p class=\"lb__d\">'+esc(t.getAttribute('data-d'))+'<\/p>'\r\n      + '<p class=\"lb__p\">'+esc(t.getAttribute('data-pr'))+'<\/p>'\r\n      + (note ? '<p class=\"lb__note\">'+esc(note)+'<\/p>' : '')\r\n      + (pairsHtml\r\n          ? '<p class=\"lb__pk\">Passt gut dazu<\/p><div class=\"lb__pairs\">'+pairsHtml+'<\/div>'\r\n          : '')\r\n      + (t.getAttribute('data-a') ? '<p class=\"lb__a\">'+esc(t.getAttribute('data-a'))+'<\/p>' : '')\r\n      + '<button class=\"lb__close\" data-lb-close>Schlie\u00dfen<\/button>'\r\n      + '<\/div>';\r\n\r\n    lbBox.scrollTop = 0;\r\n    lb.classList.add('is-on');\r\n    lock();\r\n  }\r\n\r\n  root.addEventListener('click', function(e){\r\n    var o = e.target.closest('[data-open]');\r\n    if(o){ var src = index[o.getAttribute('data-open')]; if(src) detail(src); return; }\r\n    var t = e.target.closest('.it');\r\n    if(t){ detail(t); return; }\r\n  });\r\n\r\n  lb.addEventListener('click', function(e){\r\n    if(e.target === lb || e.target.closest('[data-lb-close]')) close();\r\n  });\r\n\r\n  \/* zakljucavanje skrola stranice dok je popup otvoren\r\n     (iOS ignorise samo overflow:hidden, pa se body fiksira) *\/\r\n  var lockY = 0, locked = false;\r\n  function lock(){\r\n    if(locked) return;\r\n    lockY = window.pageYOffset;\r\n    var b = document.body;\r\n    b.style.position = 'fixed';\r\n    b.style.top = (-lockY) + 'px';\r\n    b.style.left = '0';\r\n    b.style.right = '0';\r\n    b.style.width = '100%';\r\n    locked = true;\r\n  }\r\n  function unlock(){\r\n    if(!locked) return;\r\n    var b = document.body;\r\n    b.style.position = '';\r\n    b.style.top = '';\r\n    b.style.left = '';\r\n    b.style.right = '';\r\n    b.style.width = '';\r\n    window.scrollTo(0, lockY);\r\n    locked = false;\r\n  }\r\n\r\n  function close(){ lb.classList.remove('is-on'); unlock(); }\r\n\r\n  \/* zatvaranje povlacenjem nadole *\/\r\n  var startY = null;\r\n  lbBox.addEventListener('touchstart', function(e){\r\n    startY = (lbBox.scrollTop <= 0) ? e.touches[0].clientY : null;\r\n  }, {passive:true});\r\n  lbBox.addEventListener('touchmove', function(e){\r\n    if(startY === null) return;\r\n    var d = e.touches[0].clientY - startY;\r\n    if(d > 0) lbBox.style.transform = 'translateY(' + Math.min(d, 160) + 'px)';\r\n  }, {passive:true});\r\n  lbBox.addEventListener('touchend', function(e){\r\n    if(startY === null) return;\r\n    var d = e.changedTouches[0].clientY - startY;\r\n    lbBox.style.transform = '';\r\n    if(d > 110) close();\r\n    startY = null;\r\n  });\r\n\r\n  \/* ---- info modal ---- *\/\r\n  var inf = $('k-inf');\r\n  $('k-info-open').addEventListener('click', function(){ inf.classList.add('is-on'); lock(); });\r\n  function closeInf(){ inf.classList.remove('is-on'); unlock(); }\r\n  inf.addEventListener('click', function(e){\r\n    if(e.target === inf || e.target.closest('#k-inf-x')) closeInf();\r\n  });\r\n\r\n  \/* ---- \"Speichern\" \u2014 Zum Startbildschirm ---- *\/\r\n  var a2h = $('k-a2h'), deferred = null;\r\n  window.addEventListener('beforeinstallprompt', function(e){ e.preventDefault(); deferred = e; });\r\n  function closeA2h(){ a2h.classList.remove('is-on'); unlock(); }\r\n  $('k-save').addEventListener('click', function(){\r\n    if(deferred){ deferred.prompt(); deferred = null; return; }\r\n    a2h.classList.add('is-on'); lock();\r\n  });\r\n  a2h.addEventListener('click', function(e){\r\n    if(e.target === a2h || e.target.closest('[data-a2h-close]')) closeA2h();\r\n  });\r\n\r\n  document.addEventListener('keydown', function(e){ if(e.key === 'Escape'){ close(); closeInf(); closeA2h(); } });\r\n})();\r\n<\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Speichern Anrufen Bewerten Deutsch TOP MEN\u00dcS VORSPEISEN VOM GRILL AUS DER K\u00dcCHE BEILAGEN S\u00dcSSES GETR\u00c4NKE VEGETARISCH EMPFEHLUNG DES HAUSES Unsere [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-364","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/pages\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/comments?post=364"}],"version-history":[{"count":46,"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/pages\/364\/revisions"}],"predecessor-version":[{"id":411,"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/pages\/364\/revisions\/411"}],"wp:attachment":[{"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/media?parent=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}