{"id":412,"date":"2026-08-17T08:53:10","date_gmt":"2026-08-17T08:53:10","guid":{"rendered":"https:\/\/mk360studio.com\/?page_id=412"},"modified":"2026-08-17T09:50:48","modified_gmt":"2026-08-17T09:50:48","slug":"elementor-412","status":"publish","type":"page","link":"https:\/\/mk360studio.com\/de\/elementor-412\/","title":{"rendered":"Elementor #412"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"412\" class=\"elementor elementor-412\" 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-b94d938 e-con-full e-flex e-con e-parent\" data-id=\"b94d938\" 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-3d81f9e elementor-widget elementor-widget-html\" data-id=\"3d81f9e\" 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  v20 \"lista\"\r\n  ----------------------------------------------------------------\r\n  Bez fotografija. Sve kategorije jedna pod drugom.\r\n  Fiksna gornja traka + lepljiva traka kategorija + okruglo dugme\r\n  dole desno koje uvek otvara brzi skok na kategoriju.\r\n  ----------------------------------------------------------------\r\n  SADRZAJ: menja se SAMO u nizu KHOF_MENU na dnu koda.\r\n  TEMA: na <div id=\"khof\"> stoji data-theme=\"dark\".\r\n        Promeni u \"light\" za svetlu varijantu.\r\n  ----------------------------------------------------------------\r\n  WORDPRESS \/ ELEMENTOR: widget \"HTML\" -> nalepi CEO kod.\r\n  ================================================================\r\n-->\r\n\r\n<div id=\"khof\" data-theme=\"light\">\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\/* ============ TEMA ============ *\/\r\n#khof[data-theme=\"dark\"]{\r\n  --bg:#0E0C0A; --bg-2:#15120F; --bg-3:#1C1815;\r\n  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.05);\r\n  --ink:#F2EBE1; --muted:#9A8D80; --muted-2:#6E6459;\r\n  --gold:#B79463; --gold-soft:rgba(183,148,99,.14);\r\n  --sheet:#15120F;\r\n  --nav:#16130F; --nav-line:rgba(255,255,255,.09);\r\n}\r\n#khof[data-theme=\"light\"]{\r\n  --bg:#FBF9F6; --bg-2:#FFFFFF; --bg-3:#F4EFE8;\r\n  --line:#ECE5DC; --line-2:#F4EFE8;\r\n  --ink:#1A1714; --muted:#857A6E; --muted-2:#A79C92;\r\n  --gold:#8A6C45; --gold-soft:#F5EFE6;\r\n  --sheet:#FFFFFF;\r\n  --nav:#16130F; --nav-line:rgba(255,255,255,.09);\r\n}\r\n#khof{\r\n  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;\r\n  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:34px;\r\n  --hdr:60px; --rail:46px;\r\n  --max:840px;\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(--bg) !important; color:var(--ink) !important;\r\n  font-size:16px !important; line-height:1.5 !important;\r\n  -webkit-font-smoothing:antialiased;\r\n  width:100% !important; max-width:100% !important;\r\n  min-height:100vh !important; min-height:100svh !important;\r\n}\r\n#khof img{ display:block !important; width:100% !important; height:100% !important; object-fit:contain !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\/* ============ FIKSNA GORNJA TRAKA ============ *\/\r\n\/* ceo gornji blok je JEDAN lepljivi element \u2014 ostaje u toku dokumenta,\r\n   pa nista ne moze da zavuce ispod njega i nema spacera koji se meri *\/\r\n#khof .topbar{\r\n  position:sticky !important; top:0; z-index:70;\r\n  background-color:var(--nav) !important;\r\n  box-shadow:0 10px 26px -18px rgba(0,0,0,.75) !important;\r\n}\r\n#khof .hdr{ height:var(--hdr) !important; }\r\n#khof .hdr__in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--hdr) !important; }\r\n#khof .hdr__logo{ justify-self:center; height:42px !important; max-width:190px !important; }\r\n#khof .hdr__logo img{ width:auto !important; max-width:100% !important; height:100% !important; margin:0 auto !important; }\r\n#khof .hdr__info{\r\n  justify-self:end; width:auto;\r\n  display:inline-flex; align-items:center; gap:7px;\r\n  padding:9px 13px 9px 11px !important; border-radius:10px;\r\n  background-color:#fff !important; color:var(--nav) !important;\r\n  font-size:.6rem !important; font-weight:800 !important;\r\n  letter-spacing:.2em !important; text-transform:uppercase !important;\r\n  transition:transform .16s ease, background-color .16s ease;\r\n}\r\n#khof .hdr__info:active{ transform:scale(.93); background-color:#EFE7DB !important; }\r\n#khof .hdr__info svg{ width:15px !important; height:15px !important; stroke:var(--nav); fill:none; stroke-width:2.1; stroke-linecap:round; }\r\n\r\n\/* ============ AKCIJSKA TRAKA ============ *\/\r\n#khof .acts{ padding-top:var(--s4) !important; }\r\n#khof .acts__box{\r\n  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));\r\n  background-color:var(--bg-2) !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; 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(--bg-3) !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{ font-size:.66rem !important; font-weight:700 !important; letter-spacing:.03em !important; color:var(--ink) !important; }\r\n#khof .act--static{ opacity:.5; }\r\n#khof .act--static b{ color:var(--muted) !important; }\r\n\r\n\/* ============ TRAKA KATEGORIJA ============ *\/\r\n#khof .rail-w{ position:relative; background-color:var(--nav) !important; }\r\n#khof .rail-w::after{\r\n  content:''; position:absolute; top:0; right:0; bottom:0; width:46px; pointer-events:none; z-index:2;\r\n  background-image:linear-gradient(90deg, transparent, var(--nav) 76%) !important;\r\n}\r\n#khof .rail{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 0 12px !important; }\r\n#khof .rail::-webkit-scrollbar{ display:none; }\r\n#khof .rail button{\r\n  flex:0 0 auto; width:auto; padding:9px 15px !important; border-radius:9px;\r\n  border:1px solid rgba(255,255,255,.16) !important; background-color:transparent !important;\r\n  font-size:.74rem !important; font-weight:700 !important; letter-spacing:.05em !important;\r\n  text-transform:uppercase !important; color:rgba(255,255,255,.62) !important; white-space:nowrap;\r\n  transition:background-color .2s ease, color .2s ease, border-color .2s ease;\r\n}\r\n@media(min-width:560px){ #khof .rail button{ font-size:.76rem !important; padding:9px 18px !important; letter-spacing:.08em !important; } }\r\n#khof .rail button.is-on{\r\n  background-color:var(--gold) !important; border-color:var(--gold) !important; color:#fff !important;\r\n}\r\n\r\n\/* ============ SEKCIJE ============ *\/\r\n#khof .sec{ padding-top:var(--s5) !important; scroll-margin-top:calc(var(--fixed, 106px) + 10px) !important; }\r\n#khof .sec__h{ margin-bottom:var(--s3) !important; }\r\n#khof .sec__t{\r\n  font-size:1.28rem !important; font-weight:800 !important;\r\n  letter-spacing:.09em !important; text-transform:uppercase !important; line-height:1.15 !important;\r\n}\r\n#khof .sec__u{\r\n  height:2px !important; width:38px !important; margin-top:10px !important; border-radius:2px;\r\n  background-color:var(--gold) !important;\r\n}\r\n#khof .sec__n{ font-size:.8rem !important; color:var(--muted) !important; margin-top:10px !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:0 var(--s3) 2px !important;\r\n}\r\n#khof .car::-webkit-scrollbar{ display:none; }\r\n#khof .sig{\r\n  position:relative; flex:0 0 84%; max-width:330px;\r\n  scroll-snap-align:start;\r\n  height:390px !important; border-radius:16px; overflow:hidden;\r\n  background-color:#16130F !important;\r\n  transition:transform .18s ease;\r\n}\r\n@media(min-width:560px){ #khof .sig{ flex:0 0 46%; max-width:none; height:400px !important; } }\r\n#khof .sig:active{ transform:scale(.985); }\r\n#khof .sig__ph{ position:absolute !important; inset:0 !important; }\r\n#khof .sig__ph img{ object-fit:cover !important; }\r\n#khof .sig__ph::after{\r\n  content:''; position:absolute; inset:0;\r\n  background-image:linear-gradient(180deg, rgba(14,11,9,.30) 0%, rgba(14,11,9,.72) 52%, rgba(14,11,9,.96) 100%) !important;\r\n}\r\n#khof .sig__in{\r\n  position:relative; z-index:2; height:100%;\r\n  display:flex; flex-direction:column; justify-content:flex-end;\r\n  padding:var(--s4) !important;\r\n}\r\n#khof .sig__k{\r\n  font-size:.6rem !important; font-weight:800 !important; letter-spacing:.2em !important;\r\n  text-transform:uppercase !important; color:#C6A470 !important;\r\n}\r\n#khof .sig__n{\r\n  font-size:1.4rem !important; font-weight:800 !important;\r\n  letter-spacing:.02em !important; text-transform:uppercase !important;\r\n  line-height:1.1 !important; color:#fff !important; margin-top:9px !important;\r\n}\r\n#khof .sig__d{\r\n  font-size:.8rem !important; color:rgba(255,255,255,.68) !important;\r\n  margin-top:9px !important; line-height:1.55 !important;\r\n  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;\r\n}\r\n#khof .sig__f{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-top:var(--s3) !important; }\r\n#khof .sig__p{ font-size:1.25rem !important; font-weight:800 !important; color:#C6A470 !important; font-variant-numeric:tabular-nums; }\r\n#khof .sig__go{\r\n  width:34px !important; height:34px !important; border-radius:9px;\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,.24) !important;\r\n}\r\n#khof .sig__go svg{ width:15px !important; height:15px !important; stroke:#fff; fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }\r\n\r\n#khof .dots{ display:flex; gap:5px; margin-top:var(--s3) !important; }\r\n#khof .dots i{ display:block; width:6px !important; height:6px !important; border-radius:999px; background-color:var(--line) !important; transition:all .22s ease; }\r\n#khof .dots i.is-on{ width:22px !important; background-color:var(--gold) !important; }\r\n\r\n\/* ============ RED \/ JELO ============ *\/\r\n#khof .row{\r\n  display:grid;\r\n  grid-template-columns:minmax(0,1fr) minmax(18px,auto) auto;\r\n  grid-template-rows:auto auto;\r\n  align-items:baseline; column-gap:9px;\r\n  padding:14px 0 !important;\r\n  border-bottom:1px solid var(--line-2) !important;\r\n  transition:opacity .16s ease;\r\n  text-align:left !important;\r\n}\r\n#khof .row:last-child{ border-bottom:0 !important; }\r\n#khof .row:active{ opacity:.6; }\r\n\r\n#khof .row__n{\r\n  grid-column:1; grid-row:1;\r\n  font-size:.94rem !important; font-weight:600 !important;\r\n  letter-spacing:.01em !important; line-height:1.35 !important;\r\n}\r\n#khof .row__n sup{ font-size:.58rem !important; font-weight:500 !important; color:var(--muted-2) !important; margin-left:3px !important; }\r\n#khof .row__tag{\r\n  display:inline-block; margin-left:7px !important;\r\n  font-size:.58rem !important; font-weight:800 !important; letter-spacing:.12em !important;\r\n  text-transform:uppercase !important; vertical-align:2px;\r\n  padding:2px 7px !important; border-radius:5px;\r\n  background-color:var(--gold-soft) !important; color:var(--gold) !important;\r\n}\r\n\r\n\/* tackasta vodilica \u2014 isti obrazac kao u popupu *\/\r\n#khof .row__l{\r\n  grid-column:2; grid-row:1;\r\n  align-self:baseline; height:1px !important;\r\n  margin-bottom:5px !important; min-width:18px;\r\n  background-image:radial-gradient(circle, var(--line) 1px, transparent 1px) !important;\r\n  background-size:5px 2px; background-repeat:repeat-x;\r\n}\r\n\r\n#khof .row__p{\r\n  grid-column:3; grid-row:1;\r\n  text-align:right !important; white-space:nowrap;\r\n  font-size:.92rem !important; font-weight:700 !important; color:var(--gold) !important;\r\n  font-variant-numeric:tabular-nums;\r\n}\r\n#khof .row__p em{\r\n  display:block; font-size:.66rem !important; font-weight:500 !important;\r\n  color:var(--muted-2) !important; margin-top:3px !important;\r\n  letter-spacing:.02em !important; white-space:nowrap;\r\n}\r\n\r\n\/* opis ide pod naziv, ne pod cenu *\/\r\n#khof .row__d{\r\n  grid-column:1 \/ 3; grid-row:2;\r\n  font-size:.79rem !important; color:var(--muted) !important;\r\n  margin-top:4px !important; line-height:1.55 !important; max-width:52ch;\r\n}\r\n\r\n\/* ============ POPUP JELA ============ *\/\r\n#khof .pop{\r\n  position:fixed !important; inset:0 !important; z-index:99999;\r\n  background-color:rgba(20,16,12,.58) !important;\r\n  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);\r\n  display:flex; align-items:flex-end; justify-content:center;\r\n  opacity:0; visibility:hidden; pointer-events:none;\r\n  transition:opacity .3s ease, visibility .3s ease;\r\n}\r\n@media(min-width:600px){ #khof .pop{ align-items:center; padding:var(--s4) !important; } }\r\n#khof .pop.is-on{ opacity:1; visibility:visible; pointer-events:auto; }\r\n\r\n#khof .pop__box{\r\n  position:relative;\r\n  background-color:var(--sheet) !important;\r\n  border-radius:20px 20px 0 0; width:100%; max-width:430px;\r\n  max-height:90svh; overflow-y:auto; overscroll-behavior:contain;\r\n  transform:translateY(22px);\r\n  transition:transform .42s cubic-bezier(.22,.68,0,1);\r\n  box-shadow:0 -20px 60px rgba(20,16,12,.32) !important;\r\n}\r\n@media(min-width:600px){\r\n  #khof .pop__box{ border-radius:20px; transform:translateY(10px) scale(.98); box-shadow:0 30px 80px rgba(20,16,12,.4) !important; }\r\n}\r\n#khof .pop.is-on .pop__box{ transform:translateY(0) scale(1); }\r\n\r\n\/* --- zatvaranje: diskretno --- *\/\r\n#khof .pop__x{\r\n  position:absolute; z-index:5; top:15px; right:15px;\r\n  width:34px !important; height:34px !important; border-radius:50%;\r\n  display:grid; place-items:center;\r\n  background-color:var(--bg-3) !important;\r\n  transition:opacity .16s ease;\r\n}\r\n#khof .pop__x:active{ opacity:.6; }\r\n#khof .pop__x svg{ width:13px !important; height:13px !important; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; }\r\n#khof .pop__x--photo{ background-color:rgba(20,16,12,.42) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }\r\n#khof .pop__x--photo svg{ stroke:rgba(255,255,255,.9); }\r\n\r\n\/* --- fotografija --- *\/\r\n#khof .pop__ph{\r\n  position:relative;\r\n  height:30vh !important; height:32svh !important;\r\n  min-height:180px !important; max-height:290px !important;\r\n  background-color:var(--bg-3) !important;\r\n}\r\n#khof .pop__ph img{ object-fit:cover !important; }\r\n#khof .pop__ph::after{\r\n  content:''; position:absolute; left:0; right:0; bottom:0; height:30%;\r\n  background-image:linear-gradient(180deg, transparent, var(--sheet)) !important;\r\n}\r\n@media(min-width:600px){ #khof .pop__ph{ height:220px !important; max-height:none !important; } }\r\n\r\n\/* --- telo --- *\/\r\n#khof .pop__b{ padding:30px 26px calc(28px + env(safe-area-inset-bottom)) !important; }\r\n#khof .pop__b--photo{ padding-top:16px !important; }\r\n\r\n#khof .pop__k{\r\n  font-size:.58rem !important; font-weight:700 !important;\r\n  letter-spacing:.28em !important; text-transform:uppercase !important;\r\n  color:var(--gold) !important;\r\n}\r\n#khof .pop__n{\r\n  font-size:1.6rem !important; font-weight:600 !important;\r\n  letter-spacing:-.015em !important; line-height:1.2 !important;\r\n  margin-top:12px !important;\r\n}\r\n#khof .pop__b:not(.pop__b--photo) .pop__n,\r\n#khof .pop__b:not(.pop__b--photo) .pop__k{ padding-right:40px !important; }\r\n\r\n#khof .pop__hr{ height:1px !important; background-color:var(--line) !important; margin:20px 0 !important; }\r\n\r\n#khof .pop__d{\r\n  font-size:.9rem !important; font-weight:400 !important;\r\n  color:var(--muted) !important; line-height:1.8 !important; max-width:36ch;\r\n}\r\n\r\n\/* --- cena kao stavka, ne kao naslov --- *\/\r\n#khof .pop__price{\r\n  display:flex; align-items:baseline; gap:10px;\r\n  margin-top:22px !important; padding-top:16px !important;\r\n  border-top:1px solid var(--line) !important;\r\n}\r\n#khof .pop__price span{\r\n  font-size:.58rem !important; font-weight:700 !important;\r\n  letter-spacing:.26em !important; text-transform:uppercase !important;\r\n  color:var(--muted-2) !important;\r\n}\r\n#khof .pop__price i{\r\n  flex:1; height:1px !important; margin-bottom:5px !important;\r\n  background-image:radial-gradient(circle, var(--line) 1px, transparent 1px) !important;\r\n  background-size:5px 2px; background-repeat:repeat-x;\r\n}\r\n#khof .pop__price b{\r\n  font-size:1.15rem !important; font-weight:600 !important;\r\n  color:var(--ink) !important; font-variant-numeric:tabular-nums; letter-spacing:-.01em !important;\r\n}\r\n#khof .pop__note{\r\n  font-size:.7rem !important; color:var(--muted-2) !important;\r\n  margin-top:8px !important; letter-spacing:.02em !important;\r\n}\r\n\r\n\/* --- passt gut dazu: tihi redovi sa tackicama --- *\/\r\n#khof .pop__pk{\r\n  font-size:.58rem !important; font-weight:700 !important;\r\n  letter-spacing:.26em !important; text-transform:uppercase !important;\r\n  color:var(--gold) !important;\r\n  margin-top:32px !important; margin-bottom:4px !important;\r\n}\r\n#khof .pop__pair{\r\n  display:flex; align-items:baseline; gap:10px; width:100%;\r\n  padding:13px 0 !important; text-align:left !important;\r\n  border-bottom:1px solid var(--line) !important;\r\n  transition:opacity .16s ease;\r\n}\r\n#khof .pop__pair:active{ opacity:.55; }\r\n#khof .pop__pair-n{ font-size:.9rem !important; font-weight:500 !important; letter-spacing:-.005em !important; }\r\n#khof .pop__pair-s{ font-size:.7rem !important; color:var(--muted-2) !important; margin-left:7px !important; }\r\n#khof .pop__pair-l{\r\n  flex:1; height:1px !important; margin-bottom:5px !important;\r\n  background-image:radial-gradient(circle, var(--line) 1px, transparent 1px) !important;\r\n  background-size:5px 2px; background-repeat:repeat-x;\r\n}\r\n#khof .pop__pair-p{\r\n  flex:0 0 auto; font-size:.88rem !important; font-weight:600 !important;\r\n  color:var(--gold) !important; font-variant-numeric:tabular-nums;\r\n}\r\n\r\n#khof .pop__a{\r\n  font-size:.66rem !important; color:var(--muted-2) !important;\r\n  margin-top:28px !important; letter-spacing:.1em !important;\r\n  text-transform:uppercase !important; line-height:1.7 !important;\r\n}\r\n\r\n\/* ============ INFO \/ SPEICHERN MODAL ============ *\/\r\n#khof .inf{\r\n  position:fixed !important; inset:0 !important; z-index:99999;\r\n  background-color:rgba(26,23,20,.52) !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(--sheet) !important;\r\n  border:1px solid var(--line) !important;\r\n  border-radius:22px; width:100%; max-width:400px;\r\n  padding:var(--s5) var(--s4) var(--s4) !important;\r\n  max-height:88svh; overflow-y:auto; overscroll-behavior:contain;\r\n  transform:translateY(12px) scale(.97);\r\n  transition:transform .32s cubic-bezier(.32,.72,0,1);\r\n}\r\n#khof .inf.is-on .inf__box{ transform:translateY(0) scale(1); }\r\n#khof .inf__x{\r\n  position:absolute; top:var(--s3); right:var(--s3);\r\n  width:34px !important; height:34px !important; border-radius:50%;\r\n  display:grid; place-items:center;\r\n  background-color:var(--bg-3) !important; border:1px solid var(--line) !important;\r\n}\r\n#khof .inf__x svg{ width:14px !important; height:14px !important; stroke:var(--ink); fill:none; stroke-width:2.4; stroke-linecap:round; }\r\n#khof .inf__box--crest{ padding-top:0 !important; overflow:hidden; }\r\n#khof .inf__crest{\r\n  margin:0 calc(var(--s4) * -1) var(--s4) !important;\r\n  padding:30px var(--s4) 26px !important;\r\n  background-color:var(--nav) !important;\r\n  border-radius:21px 21px 0 0;\r\n  text-align:center;\r\n}\r\n#khof .inf__crest .inf__logo{ height:54px !important; margin:0 auto !important; }\r\n#khof .inf__crest .inf__logo img{ width:auto !important; max-width:100% !important; height:100% !important; object-fit:contain !important; margin:0 auto !important; }\r\n#khof .inf__x--light{ background-color:rgba(255,255,255,.12) !important; }\r\n#khof .inf__x--light svg{ stroke:rgba(255,255,255,.9); }\r\n#khof .inf__n{ font-size:1.05rem !important; font-weight:800 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--gold) !important; }\r\n#khof .inf__s{ font-size:.66rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:var(--muted-2) !important; margin-top:7px !important; }\r\n#khof .inf__rule{ height:1px !important; margin:var(--s4) 0 var(--s1) !important; background-image:linear-gradient(90deg, transparent, var(--gold), transparent) !important; opacity:.55; }\r\n#khof .inf__row{ padding:var(--s3) 0 !important; border-bottom:1px solid var(--line-2) !important; }\r\n#khof .inf__row:last-of-type{ border-bottom:0 !important; }\r\n#khof .inf__k{ display:block; font-size:.6rem !important; font-weight:800 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--muted-2) !important; }\r\n#khof .inf__v{ display:block; font-size:.9rem !important; font-weight:600 !important; margin-top:4px !important; line-height:1.5 !important; }\r\n#khof .inf__v a{ color:var(--gold) !important; font-weight:700 !important; }\r\n\r\n\/* ============ IZBOR PLATFORME ZA OCENU ============ *\/\r\n#khof .rev__opt{\r\n  display:flex; align-items:center; gap:var(--s2);\r\n  padding:15px var(--s3) !important; border-radius:12px;\r\n  border:1px solid var(--line) !important;\r\n  background-color:var(--bg-2) !important;\r\n  margin-top:var(--s2) !important;\r\n  transition:border-color .18s ease, transform .16s ease;\r\n}\r\n#khof .rev__opt:active{ transform:scale(.985); border-color:var(--gold) !important; }\r\n#khof .rev__n{ flex:1; min-width:0; font-size:.95rem !important; font-weight:600 !important; letter-spacing:-.005em !important; }\r\n#khof .rev__go{ flex:0 0 auto; }\r\n#khof .rev__go svg{ width:15px !important; height:15px !important; stroke:var(--muted-2); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }\r\n\r\n\/* ============ FOOTER ============ *\/\r\n\/* Topla pescana traka \u2014 tamnija od menija, ali sa tamnim tekstom.\r\n   Ako bi ipak hteo tamnu varijantu: --ft-bg:#2A2420, a boje teksta\r\n   zameniti belim na 60-90% (vidi verziju v33). *\/\r\n#khof .ft{\r\n  --ft-bg:#EDE4D6;\r\n  --ft-line:#DDD1BE;\r\n  --ft-ink:#2A241E;\r\n  --ft-text:#6E6355;\r\n  --ft-label:#7C603C;\r\n  --ft-quiet:#93877A;\r\n\r\n  margin-top:var(--s5) !important;\r\n  background-color:var(--ft-bg) !important;\r\n  border-top:1px solid var(--ft-line) !important;\r\n  padding:var(--s5) 0 calc(var(--s5) + 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:.6rem !important; font-weight:800 !important;\r\n  letter-spacing:.22em !important; text-transform:uppercase !important;\r\n  color:var(--ft-label) !important; margin-bottom:9px !important;\r\n}\r\n#khof .ft__v{ font-size:.86rem !important; color:var(--ft-text) !important; line-height:1.75 !important; }\r\n#khof .ft__v a{ color:var(--ft-ink) !important; font-weight:600 !important; }\r\n\r\n\/* sitna slova: obavezna po zakonu, kontrast mora da drzi *\/\r\n#khof .ft__fine{\r\n  margin-top:var(--s5) !important; padding-top:var(--s4) !important;\r\n  border-top:1px solid var(--ft-line) !important;\r\n  font-size:.74rem !important; color:var(--ft-text) !important;\r\n  line-height:1.85 !important; max-width:64ch;\r\n}\r\n#khof .ft__fine b{ color:var(--ft-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(--ft-line) !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(--ft-quiet) !important;\r\n}\r\n#khof .ft__by{ color:var(--ft-quiet) !important; }\r\n#khof .ft__by strong{ color:var(--ft-label) !important; font-weight:700 !important; }\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  #khof *{ transition:none !important; scroll-behavior:auto !important; }\r\n}\r\n<\/style>\r\n\r\n  <!-- ====== GORNJI BLOK: logo + kategorije (jedan lepljivi element) ====== -->\r\n  <div class=\"topbar\">\r\n  <!-- ============ FIKSNA TRAKA ============ -->\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        Info\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- ============ TRAKA KATEGORIJA ============ -->\r\n  <div class=\"rail-w\">\r\n    <div class=\"wrap rail\" id=\"k-rail\"><\/div>\r\n  <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============ AKCIJSKA TRAKA ============ -->\r\n  <div class=\"wrap acts\">\r\n    <div class=\"acts__box\">\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      <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      <button class=\"act\" id=\"k-rev-open\">\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      <\/button>\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    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============ LISTA ============ -->\r\n  <div class=\"wrap\" id=\"k-list\"><\/div>\r\n\r\n  <!-- ============ FOOTER ============ -->\r\n  <footer class=\"ft\">\r\n    <div class=\"wrap\">\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>11:00 \u2013 14:30 Uhr<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      <p class=\"ft__fine\">\r\n        <b>Zusatzstoffe<\/b> Die hochgestellten Zahlen (1, 2, 3, 7, 9, 10) entsprechen der Kennzeichnung\r\n        auf unserer gedruckten Speisekarte. Die vollst\u00e4ndige Legende erhalten Sie bei unserem Personal.<br>\r\n        <b>Allergene<\/b> Auskunft \u00fcber Allergene gibt Ihnen gerne unser Personal.<br>\r\n        Alle Preise in Euro inkl. MwSt. \u00c4nderungen vorbehalten.\r\n      <\/p>\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    <\/div>\r\n  <\/footer>\r\n\r\n  <!-- ============ POPUP JELA ============ -->\r\n  <div class=\"pop\" id=\"k-pop\">\r\n    <div class=\"pop__box\" id=\"k-pop-box\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- ============ INFO ============ -->\r\n  <div class=\"inf\" id=\"k-inf\">\r\n    <div class=\"inf__box inf__box--crest\">\r\n      <button class=\"inf__x inf__x--light\" data-inf-close aria-label=\"Schlie\u00dfen\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg><\/button>\r\n      <div class=\"inf__crest\">\r\n        <div class=\"inf__logo\"><img decoding=\"async\" src=\"https:\/\/www.karlsruherhof.de\/images\/logokarlsruherhof.png\" alt=\"Karlsruher Hof\"><\/div>\r\n      <\/div>\r\n      <div class=\"inf__row\" style=\"padding-top:0!important\"><span class=\"inf__k\">Adresse<\/span><span class=\"inf__v\">Pfalzstr. 13<br>76189 Karlsruhe<\/span><\/div>\r\n      <div class=\"inf__row\"><span class=\"inf__k\">Telefon<\/span><span class=\"inf__v\"><a href=\"tel:+49721572320\">+49 721 57 23 20<\/a><\/span><\/div>\r\n      <div class=\"inf__row\"><span class=\"inf__k\">\u00d6ffnungszeiten<\/span><span class=\"inf__v\">Di \u2013 So<br>11:00 \u2013 14:30 Uhr<br>17:00 \u2013 22:00 Uhr<br>Montag geschlossen<\/span><\/div>\r\n      <div class=\"inf__row\"><span class=\"inf__k\">Angebot<\/span><span class=\"inf__v\">Restaurant &amp; Biergarten<br>Abholung m\u00f6glich<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============ BEWERTEN ============ -->\r\n  <div class=\"inf\" id=\"k-rev\">\r\n    <div class=\"inf__box\">\r\n      <button class=\"inf__x\" data-rev-close aria-label=\"Schlie\u00dfen\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg><\/button>\r\n      <p class=\"inf__n\">Bewerten<\/p>\r\n      <p class=\"inf__s\">Wir freuen uns \u00fcber Ihre Bewertung<\/p>\r\n      <div class=\"inf__rule\"><\/div>\r\n\r\n      <a class=\"rev__opt\" href=\"https:\/\/search.google.com\/local\/writereview?placeid=ChIJD0cnz8oGl0cR54A4Q168qV8\" target=\"_blank\" rel=\"noopener\">\r\n        <span class=\"rev__n\">Google<\/span>\r\n        <span class=\"rev__go\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/span>\r\n      <\/a>\r\n\r\n      <a class=\"rev__opt\" href=\"https:\/\/www.tripadvisor.com\/Restaurant_Review-g187289-d1040089-Reviews-Karlsruher_Hof-Karlsruhe_Baden_Wurttemberg.html\" target=\"_blank\" rel=\"noopener\">\r\n        <span class=\"rev__n\">Tripadvisor<\/span>\r\n        <span class=\"rev__go\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============ SPEICHERN ============ -->\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\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg><\/button>\r\n      <p class=\"inf__n\">Speichern<\/p>\r\n      <p class=\"inf__s\">Auf dem Startbildschirm<\/p>\r\n      <div class=\"inf__rule\"><\/div>\r\n      <div class=\"inf__row\"><span class=\"inf__k\">iPhone \u00b7 Safari<\/span><span class=\"inf__v\">Teilen-Symbol antippen, dann \u201eZum Home-Bildschirm\u201c<\/span><\/div>\r\n      <div class=\"inf__row\"><span class=\"inf__k\">Android \u00b7 Chrome<\/span><span class=\"inf__v\">Men\u00fc (drei Punkte), dann \u201eZum Startbildschirm hinzuf\u00fcgen\u201c<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<script>\r\n(function(){\r\n\/* ==================================================================\r\n   SADRZAJ \u2014 menja se SAMO ovde.\r\n   n = naziv \u00b7 d = opis \u00b7 p = cena \u00b7 u = jedinica (0,5 l)\r\n   a = alergeni \u00b7 t = oznaka (Beliebt, Vegetarisch...)\r\n   pair = \"dobro ide uz\", nazivi drugih jela odvojeni zapetom\r\n   ================================================================== *\/\r\nvar KHOF_MENU = [\r\n\r\n  { id:\"empfehlung\", short:\"Empfehlung\", name:\"Empfehlung des Hauses\",\r\n    note:\"Die Klassiker unseres Hauses.\",\r\n    items:[\r\n      { n:\"Strumica-Teller\", img:\"https:\/\/www.karlsruherhof.de\/images\/strumica_teller_karlsruher_hof.jpg\", p:\"13,50 \u20ac\", a:\"1,2\", t:\"Empfehlung\",\r\n        d:\"1 Spie\u00df, 3 Cevapcici, Pommes frites, Djuvec-Reis und Salat.\",\r\n        pair:\"Gemischter Salat\" },\r\n      { n:\"Leber \u201eBalkan Art\u201c\", img:\"https:\/\/www.karlsruherhof.de\/images\/leber_balkan_art_karlsruher_hof.jpg\", p:\"12,90 \u20ac\", t:\"Empfehlung\",\r\n        d:\"Gegrillte Rinderleber mit ged\u00e4mpften Zwiebeln, gegrilltem Speck, Pommes frites, Djuvec-Reis und Salat.\",\r\n        pair:\"Gemischter Salat\" },\r\n      { n:\"Zwiebel Steak\", img:\"https:\/\/www.karlsruherhof.de\/images\/zwiebel_steak.jpg\", p:\"14,50 \u20ac\", t:\"Empfehlung\",\r\n        d:\"Schweinesteak mit ged\u00e4mpften Zwiebeln, Pommes frites und Salat.\",\r\n        pair:\"Gemischter Salat\" },\r\n      { n:\"Alexanderspie\u00df\", img:\"https:\/\/www.karlsruherhof.de\/images\/gemische_vorspeise_2100x800.jpg\", p:\"17,90 \u20ac\", a:\"1,2\", t:\"Empfehlung\",\r\n        d:\"Verschiedene Fleischsorten, Balkangem\u00fcse mit K\u00e4se \u00fcberbacken, R\u00f6sti und Salat.\" }\r\n    ]},\r\n\r\n  { id:\"suppen\", short:\"Suppen\", name:\"Suppen\", items:[\r\n      { n:\"Zwiebelsuppe\", p:\"4,90 \u20ac\" },\r\n      { n:\"Rinderkraftbr\u00fche mit Markkl\u00f6\u00dfchen\", p:\"4,90 \u20ac\" },\r\n      { n:\"Tomatencremesuppe\", p:\"4,90 \u20ac\", d:\"Mit Sahneh\u00e4ubchen.\" },\r\n      { n:\"Waldpilzcremesuppe\", p:\"5,40 \u20ac\" }\r\n    ]},\r\n\r\n  { id:\"vorspeisen\", short:\"Vorspeisen\", name:\"Vorspeisen\", items:[\r\n      { n:\"Gegrillte Peperoni am Spie\u00df\", p:\"6,90 \u20ac\",\r\n        d:\"Mit Oliven\u00f6l, Knoblauch und Brot.\" },\r\n      { n:\"Gegrillte Champignons\", p:\"7,90 \u20ac\",\r\n        d:\"Mit Oliven\u00f6l, Knoblauch und Brot.\" },\r\n      { n:\"Gebackener K\u00e4se\", p:\"8,50 \u20ac\",\r\n        d:\"Mit Zwiebelringen und Toastbrot.\" },\r\n      { n:\"Gegrillter K\u00e4se\", p:\"8,90 \u20ac\",\r\n        d:\"Mit Peperoni, Tomaten, Knoblauch und Brot.\" },\r\n      { n:\"Feuerteller aus der Pfanne\", p:\"9,50 \u20ac\",\r\n        d:\"Peperoni, Champignons, Knoblauch, Oliven\u00f6l mit K\u00e4sehaube und Brot.\" }\r\n    ]},\r\n\r\n  { id:\"salate\", short:\"Salate\", name:\"Salate\", items:[\r\n      { n:\"Gemischter Salat\", p:\"3,90 \/ 6,50 \u20ac\", u:\"klein \/ gro\u00df\" },\r\n      { n:\"Italienischer Salat\", p:\"11,50 \u20ac\", a:\"1,2,3,10\",\r\n        d:\"Mit Schinken, K\u00e4se, Eier, Thunfisch und Brot.\" },\r\n      { n:\"Salat \u201eBalkan Art\u201c\", p:\"11,90 \u20ac\", a:\"7\",\r\n        d:\"Mit Tomaten, Paprika, Gurken, Zwiebeln, geriebener K\u00e4se, Oliven und Brot.\" },\r\n      { n:\"Salat mit Putenstreifen\", p:\"12,90 \u20ac\",\r\n        d:\"Mit gebratenen Putenstreifen, Eier und Brot.\" },\r\n      { n:\"Salat mit Cevapcici\", p:\"11,90 \u20ac\",\r\n        d:\"Gemischter Salat mit Cevapcici, Zwiebeln und dazu Brot.\" },\r\n      { n:\"Salat mit Garnelen\", p:\"14,90 \u20ac\",\r\n        d:\"Gemischter Salat mit gegrillten Garnelen.\" }\r\n    ]},\r\n\r\n  { id:\"grill\", short:\"Grill\", name:\"Balkan-Grillspezialit\u00e4ten\",\r\n    note:\"Nach Art des Hauses.\",\r\n    items:[\r\n      { n:\"Cevapcici\", p:\"13,50 \u20ac\", a:\"1,2\", t:\"Beliebt\",\r\n        d:\"Hackfleischr\u00f6llchen mit Pommes frites, Djuvec-Reis und Salat.\",\r\n        pair:\"Gemischter Salat\" },\r\n      { n:\"Gegrillte Rinderleber \u201eMazedonischer Art\u201c\", p:\"13,90 \u20ac\",\r\n        d:\"Mit Knoblauchrahmso\u00dfe, Bratkartoffeln und Salat.\" },\r\n      { n:\"Raznjici\", p:\"14,50 \u20ac\", a:\"1,2\",\r\n        d:\"2 Schweinekammspie\u00dfe, Pommes frites, Djuvec-Reis und Salat.\",\r\n        pair:\"Gemischter Salat\" },\r\n      { n:\"3 Hacksteaks\", p:\"14,90 \u20ac\", a:\"1,2\",\r\n        d:\"Mit K\u00e4se gef\u00fcllt, Pommes frites, Djuvec-Reis und Salat.\" },\r\n      { n:\"Sestinska Pecenica\", p:\"14,90 \u20ac\",\r\n        d:\"2 Schweinelachse, Kr\u00e4uterbutter, Pommes frites, Djuvec-Reis und Salat.\" },\r\n      { n:\"R\u00e4ubersteak\", p:\"16,90 \u20ac\", a:\"1\",\r\n        d:\"Schweinelachse gef\u00fcllt mit Edamer K\u00e4se im Speckmantel, Pommes frites, Djuvec-Reis und Salat.\" },\r\n      { n:\"Dorf-Teller\", p:\"17,90 \u20ac\", a:\"1,2\",\r\n        d:\"Lamm und Schweinekotelett, Hacksteak, Pommes frites, Djuvec-Reis und Salat.\" },\r\n      { n:\"Mixed Grill\", p:\"17,90 \u20ac\", a:\"1,2\",\r\n        d:\"Raznjici, R\u00e4ubersteak, Hacksteak gef\u00fcllt mit K\u00e4se, Rinderleber, Pommes frites, Djuvec-Reis und Salat.\" },\r\n      { n:\"Steak Teller\", p:\"17,90 \u20ac\", a:\"1,2\",\r\n        d:\"Rumpsteak, Schweinelachse, Hacksteak, Balkangem\u00fcse, Pommes frites, Djuvec-Reis und Salat.\" }\r\n    ]},\r\n\r\n  { id:\"international\", short:\"International\", name:\"Internationale Gerichte\", items:[\r\n      { n:\"Vegetarischer Teller\", p:\"13,90 \u20ac\", t:\"Vegetarisch\",\r\n        d:\"Brokkoli, Blumenkohl, So\u00dfe Hollandaise, Gem\u00fcse, gegrillte Champignons, Kroketten und Djuvec-Reis.\" },\r\n      { n:\"Schweineschnitzel paniert\", p:\"13,50 \u20ac\",\r\n        d:\"Mit Pommes frites und Salat.\" },\r\n      { n:\"Rahmschnitzel\", p:\"14,50 \u20ac\",\r\n        d:\"Paniert oder nicht paniert. Schweineschnitzel, Rahmso\u00dfe, Sp\u00e4tzle und Salat.\" }\r\n    ]},\r\n\r\n  { id:\"kinder\", short:\"Kinder\", name:\"F\u00fcr unsere kleinen G\u00e4ste\", items:[\r\n      { n:\"Max und Moritz\", p:\"8,90 \u20ac\",\r\n        d:\"Schweineschnitzel, Pommes frites, Ketchup und Salat.\" },\r\n      { n:\"Harry-Potter-Teller\", p:\"8,90 \u20ac\", a:\"1,2\",\r\n        d:\"Hacksteak, Pommes frites, Ketchup und Salat.\" },\r\n      { n:\"Struwwelpeter\", p:\"8,90 \u20ac\",\r\n        d:\"Putenschnitzel paniert, Pommes frites, Ketchup und Salat.\" },\r\n      { n:\"Heiditeller\", p:\"8,90 \u20ac\", a:\"1,2\",\r\n        d:\"3 Cevapcici, Pommes frites, Ketchup und Salat.\" }\r\n    ]},\r\n\r\n  { id:\"hunger\", short:\"Kleiner Hunger\", name:\"F\u00fcr kleinen Hunger\",\r\n    note:\"Gaumenfreuden f\u00fcr kleinen Hunger.\",\r\n    items:[\r\n      { n:\"Toast Hawai\", p:\"9,50 \u20ac\", a:\"1,2,3,10\",\r\n        d:\"Mit Schinken, Ananas und K\u00e4se \u00fcberbacken.\" },\r\n      { n:\"Balkan Toast\", p:\"11,90 \u20ac\", a:\"1,2\",\r\n        d:\"Mit Hacksteak, Balkangem\u00fcse und K\u00e4sehaube.\" },\r\n      { n:\"Herren Toast\", p:\"11,90 \u20ac\", a:\"1\",\r\n        d:\"Mit Schweinelendchen, Pfefferso\u00dfe und K\u00e4se \u00fcberbacken.\" },\r\n      { n:\"K\u00e4sesp\u00e4tzle\", p:\"10,50 \u20ac\", a:\"1\", t:\"Vegetarisch\" },\r\n      { n:\"Schinkennudeln\", p:\"10,50 \u20ac\", a:\"2,3,10\" },\r\n      { n:\"Wurstsalat mit Brot\", p:\"10,50 \u20ac\", a:\"3,9,10\" },\r\n      { n:\"Wurstsalat mit Pommes frites\", p:\"10,90 \u20ac\", a:\"3,9,10\" },\r\n      { n:\"Wurstsalat mit Bratkartoffeln\", p:\"11,50 \u20ac\", a:\"3,9,10\" },\r\n      { n:\"Stra\u00dfburger Wurstsalat\", p:\"11,90 \u20ac\", a:\"1,3,9,10\",\r\n        d:\"Mit Bratkartoffeln.\" }\r\n    ]},\r\n\r\n  { id:\"fisch\", short:\"Fisch\", name:\"Fisch-Spezialit\u00e4ten\", items:[\r\n      { n:\"Lachsfilet\", p:\"20,50 \u20ac\",\r\n        d:\"Mit Zitronenso\u00dfe, Nudeln und Salat.\" },\r\n      { n:\"Pangasiusfilet\", p:\"16,90 \u20ac\",\r\n        d:\"Mit So\u00dfe Hollandaise, Brokkoli, Salzkartoffeln und Salat.\" },\r\n      { n:\"Zanderfilet\", p:\"19,50 \u20ac\",\r\n        d:\"Mit Rieslingso\u00dfe, Salzkartoffeln und Salat.\" }\r\n    ]},\r\n\r\n  { id:\"platten\", short:\"Platten\", name:\"F\u00fcr mehrere Personen\", items:[\r\n      { n:\"Balkanplatte\", p:\"19,90 \/ 38,80 \u20ac\", u:\"1 \/ 2 Personen\", a:\"1,2\",\r\n        d:\"R\u00e4ubersteak, Hacksteaks mit K\u00e4se gef\u00fcllt, Cevapcici, Lammkotelett, Rinderleber, Balkangem\u00fcse, Pommes frites, Djuvec-Reis und Salat.\" },\r\n      { n:\"Familienplatte\", p:\"19,90 \/ 34,00 \u20ac\", u:\"1 \/ 2 Personen\", a:\"1,2\",\r\n        d:\"Schweinefleisch-Spie\u00df, kleines Schnitzel, Hacksteak, R\u00e4ubersteak, Champignonso\u00dfe, Pommes frites, Kroketten, Djuvec-Reis und Salat.\" },\r\n      { n:\"\u201eKarlsruher Hof\u201c Platte\", p:\"20,90 \/ 40,80 \u20ac\", u:\"1 \/ 2 Personen\",\r\n        d:\"Puten- und Schweinemedaillon, Rumpsteak, Gem\u00fcse-Pfifferlingsrahmso\u00dfe, Bratkartoffeln und Salat.\" }\r\n    ]}\r\n];\r\n\r\nvar KHOF_PHONE = \"+49721572320\";\r\n\r\n\/* ================= LOGIKA ================= *\/\r\nvar root = document.getElementById('khof'); if(!root) return;\r\nvar $ = function(i){ return document.getElementById(i); };\r\nfunction esc(s){\r\n  return String(s == null ? '' : s).replace(\/[&<>\"]\/g, function(c){\r\n    return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;'}[c];\r\n  });\r\n}\r\n\r\n\/* --- indeks svih jela po nazivu (za \"dobro ide uz\") --- *\/\r\nvar byName = {};\r\nKHOF_MENU.forEach(function(c){\r\n  c.items.forEach(function(it){ if(!byName[it.n]) byName[it.n] = it; });\r\n});\r\n\r\n\/* --- render trake kategorija --- *\/\r\n$('k-rail').innerHTML = KHOF_MENU.map(function(c, i){\r\n  return '<button data-go=\"'+c.id+'\"'+(i===0?' class=\"is-on\"':'')+'>'+esc(c.short || c.name)+'<\/button>';\r\n}).join('');\r\n\r\n\/* --- render liste --- *\/\r\n$('k-list').innerHTML = KHOF_MENU.map(function(c){\r\n  \/* --- preporuka kuce: horizontalni carousel sa slikama --- *\/\r\n  if(c.id === 'empfehlung'){\r\n    var cards = c.items.map(function(it){\r\n      return '<button class=\"sig\" data-open=\"'+esc(it.n)+'\">'\r\n        + (it.img ? '<span class=\"sig__ph\"><img src=\"'+esc(it.img)+'\" alt=\"\" loading=\"lazy\" decoding=\"async\"><\/span>' : '')\r\n        + '<span class=\"sig__in\">'\r\n        + '<span class=\"sig__k\">Empfehlung des Hauses<\/span>'\r\n        + '<span class=\"sig__n\">'+esc(it.n)+'<\/span>'\r\n        + (it.d ? '<span class=\"sig__d\">'+esc(it.d)+'<\/span>' : '')\r\n        + '<span class=\"sig__f\"><span class=\"sig__p\">'+esc(it.p)+'<\/span>'\r\n        + '<span class=\"sig__go\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/span>'\r\n        + '<\/span><\/span><\/button>';\r\n    }).join('');\r\n    return '<section class=\"sec\" id=\"sec-'+esc(c.id)+'\">'\r\n      + '<div class=\"sec__h\"><h2 class=\"sec__t\">'+esc(c.name)+'<\/h2><div class=\"sec__u\"><\/div>'\r\n      + (c.note ? '<p class=\"sec__n\">'+esc(c.note)+'<\/p>' : '') + '<\/div>'\r\n      + '<div class=\"car\" id=\"k-car\">'+cards+'<\/div>'\r\n      + '<div class=\"dots\" id=\"k-dots\"><\/div>'\r\n      + '<\/section>';\r\n  }\r\n  var rows = c.items.map(function(it, n){\r\n    return '<button class=\"row\" data-i=\"'+esc(c.id)+':'+n+'\">'\r\n      + '<span class=\"row__n\">'+esc(it.n)\r\n      + (it.a ? '<sup>'+esc(it.a.replace(\/,\\s*\/g, ','))+'<\/sup>' : '')\r\n      + (it.t ? '<span class=\"row__tag\">'+esc(it.t)+'<\/span>' : '')\r\n      + '<\/span>'\r\n      + '<i class=\"row__l\"><\/i>'\r\n      + '<span class=\"row__p\">'+esc(it.p)\r\n      + (it.u ? '<em>'+esc(it.u)+'<\/em>' : '')\r\n      + '<\/span>'\r\n      + (it.d ? '<span class=\"row__d\">'+esc(it.d)+'<\/span>' : '')\r\n      + '<\/button>';\r\n  }).join('');\r\n  return '<section class=\"sec\" id=\"sec-'+esc(c.id)+'\">'\r\n    + '<div class=\"sec__h\"><h2 class=\"sec__t\">'+esc(c.name)+'<\/h2><div class=\"sec__u\"><\/div>'\r\n    + (c.note ? '<p class=\"sec__n\">'+esc(c.note)+'<\/p>' : '') + '<\/div>'\r\n    + rows + '<\/section>';\r\n}).join('');\r\n\r\n\/* --- tackice carousela --- *\/\r\n(function(){\r\n  var car = $('k-car'), dots = $('k-dots');\r\n  if(!car || !dots) return;\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 t = false;\r\n  car.addEventListener('scroll', function(){\r\n    if(t) return; t = true;\r\n    requestAnimationFrame(function(){\r\n      var i = Math.round(car.scrollLeft \/ (car.scrollWidth \/ slides.length));\r\n      if(i > slides.length - 1) i = slides.length - 1;\r\n      dots.querySelectorAll('i').forEach(function(d, n){ d.classList.toggle('is-on', n === i); });\r\n      t = false;\r\n    });\r\n  }, {passive:true});\r\n})();\r\n\r\n\/* --- visina lepljivog bloka (jedan element, bez spacera) --- *\/\r\nvar topbar = root.querySelector('.topbar');\r\nfunction fixedH(){ return topbar ? topbar.offsetHeight : 106; }\r\nfunction syncFixed(){ root.style.setProperty('--fixed', fixedH() + 'px'); }\r\nsyncFixed();\r\nif(document.fonts && document.fonts.ready) document.fonts.ready.then(syncFixed);\r\nif(window.ResizeObserver && topbar) new ResizeObserver(syncFixed).observe(topbar);\r\nwindow.addEventListener('resize', syncFixed);\r\n\r\n\/* --- skrol na sekciju --- *\/\r\nfunction offset(){ return fixedH() + 8; }\r\nfunction goTo(id){\r\n  var el = $('sec-' + id); if(!el) return;\r\n  window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - offset(), behavior:'smooth' });\r\n}\r\n\r\n\/* --- scrollspy --- *\/\r\nvar rail = $('k-rail');\r\nvar tick = false;\r\nfunction spy(){\r\n  var y = window.pageYOffset + offset() + 20, on = KHOF_MENU[0].id;\r\n  KHOF_MENU.forEach(function(c){\r\n    var el = $('sec-' + c.id);\r\n    if(el && el.offsetTop <= y) on = c.id;\r\n  });\r\n  rail.querySelectorAll('button').forEach(function(b){\r\n    var active = b.getAttribute('data-go') === on;\r\n    b.classList.toggle('is-on', active);\r\n    if(active){\r\n      var br = b.getBoundingClientRect(), rr = rail.getBoundingClientRect();\r\n      if(br.left < rr.left + 14 || br.right > rr.right - 14){\r\n        rail.scrollTo({ left: rail.scrollLeft + (br.left - rr.left) - 60, behavior:'smooth' });\r\n      }\r\n    }\r\n  });\r\n  tick = false;\r\n}\r\nwindow.addEventListener('scroll', function(){ if(!tick){ tick = true; requestAnimationFrame(spy); } }, {passive:true});\r\nspy();\r\n\r\n\/* --- zakljucavanje skrola --- *\/\r\nvar lockY = 0, locked = false;\r\nfunction lock(){\r\n  if(locked) return;\r\n  lockY = window.pageYOffset;\r\n  var b = document.body;\r\n  b.style.position = 'fixed'; b.style.top = (-lockY)+'px';\r\n  b.style.left = '0'; b.style.right = '0'; b.style.width = '100%';\r\n  locked = true;\r\n}\r\nfunction unlock(){\r\n  if(!locked) return;\r\n  var b = document.body;\r\n  b.style.position = ''; b.style.top = ''; b.style.left = ''; b.style.right = ''; b.style.width = '';\r\n  window.scrollTo(0, lockY);\r\n  locked = false;\r\n}\r\n\r\n\/* --- popup jela --- *\/\r\nvar pop = $('k-pop'), popBox = $('k-pop-box');\r\nfunction closePop(){ pop.classList.remove('is-on'); unlock(); }\r\n\r\nfunction pairRow(name){\r\n  var it = byName[name]; if(!it) return '';\r\n  return '<button class=\"pop__pair\" data-open=\"'+esc(name)+'\">'\r\n    + '<span class=\"pop__pair-n\">'+esc(name)\r\n    + (it.u ? '<span class=\"pop__pair-s\">'+esc(it.u)+'<\/span>' : '') + '<\/span>'\r\n    + '<i class=\"pop__pair-l\"><\/i>'\r\n    + '<span class=\"pop__pair-p\">'+esc(it.p)+'<\/span><\/button>';\r\n}\r\n\r\nfunction detail(it){\r\n  var pairs = (it.pair || '').split(',').map(function(s){ return s.trim(); }).filter(Boolean);\r\n  var ph = pairs.map(pairRow).filter(Boolean).join('');\r\n  var hasImg = !!it.img;\r\n\r\n  popBox.innerHTML =\r\n    '<button class=\"pop__x'+(hasImg ? ' pop__x--photo' : '')+'\" data-pop-close aria-label=\"Schlie\u00dfen\">'\r\n    + '<svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg><\/button>'\r\n    + (hasImg ? '<div class=\"pop__ph\"><img src=\"'+esc(it.img)+'\" alt=\"'+esc(it.n)+'\" decoding=\"async\"><\/div>' : '')\r\n    + '<div class=\"pop__b'+(hasImg ? ' pop__b--photo' : '')+'\">'\r\n    + (it.t ? '<p class=\"pop__k\">'+esc(it.t)+'<\/p>' : '')\r\n    + '<h3 class=\"pop__n\">'+esc(it.n)+'<\/h3>'\r\n    + (it.d ? '<div class=\"pop__hr\"><\/div><p class=\"pop__d\">'+esc(it.d)+'<\/p>' : '')\r\n    + '<div class=\"pop__price\"><span>Preis<\/span><i><\/i><b>'+esc(it.p)+'<\/b><\/div>'\r\n    + (it.u ? '<p class=\"pop__note\">'+esc(it.u)+'<\/p>' : '')\r\n    + (ph ? '<p class=\"pop__pk\">Passt gut dazu<\/p>'+ph : '')\r\n    + (it.a ? '<p class=\"pop__a\">Zusatzstoffe '+esc(it.a).replace(\/,\/g, ' \u00b7 ')+'<\/p>' : '')\r\n    + '<\/div>';\r\n\r\n  popBox.scrollTop = 0;\r\n  pop.classList.add('is-on');\r\n  lock();\r\n}\r\n\r\n\/* --- info \/ speichern --- *\/\r\nvar inf = $('k-inf'), a2h = $('k-a2h'), deferred = null;\r\nwindow.addEventListener('beforeinstallprompt', function(e){ e.preventDefault(); deferred = e; });\r\nfunction closeInf(){ inf.classList.remove('is-on'); unlock(); }\r\nfunction closeA2h(){ a2h.classList.remove('is-on'); unlock(); }\r\n$('k-info-open').addEventListener('click', function(){ inf.classList.add('is-on'); lock(); });\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\ninf.addEventListener('click', function(e){ if(e.target === inf || e.target.closest('[data-inf-close]')) closeInf(); });\r\n\r\nvar rev = $('k-rev');\r\nfunction closeRev(){ rev.classList.remove('is-on'); unlock(); }\r\n$('k-rev-open').addEventListener('click', function(){ rev.classList.add('is-on'); lock(); });\r\nrev.addEventListener('click', function(e){\r\n  if(e.target.closest('.rev__opt')){ closeRev(); return; }\r\n  if(e.target === rev || e.target.closest('[data-rev-close]')) closeRev();\r\n});\r\na2h.addEventListener('click', function(e){ if(e.target === a2h || e.target.closest('[data-a2h-close]')) closeA2h(); });\r\n\r\n\/* --- klikovi u listi i popupu --- *\/\r\nroot.addEventListener('click', function(e){\r\n  var o = e.target.closest('[data-open]');\r\n  if(o){ var it = byName[o.getAttribute('data-open')]; if(it) detail(it); return; }\r\n  var r = e.target.closest('.row');\r\n  if(r){\r\n    var parts = r.getAttribute('data-i').split(':');\r\n    var cat = KHOF_MENU.filter(function(c){ return c.id === parts[0]; })[0];\r\n    if(cat) detail(cat.items[+parts[1]]);\r\n    return;\r\n  }\r\n  var g = e.target.closest('.rail [data-go]');\r\n  if(g){ goTo(g.getAttribute('data-go')); return; }\r\n});\r\npop.addEventListener('click', function(e){\r\n  if(e.target === pop || e.target.closest('[data-pop-close]')) closePop();\r\n});\r\n\r\ndocument.addEventListener('keydown', function(e){\r\n  if(e.key === 'Escape'){ closePop(); closeInf(); closeRev(); closeA2h(); }\r\n});\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>Info Speichern Anrufen Bewerten Deutsch K\u00fcche Dienstag \u2013 Sonntag11:00 \u2013 14:30 Uhr17:00 \u2013 22:00 UhrMontag geschlossen Telefon +49 721 57 [&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-412","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/pages\/412","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=412"}],"version-history":[{"count":46,"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/pages\/412\/revisions"}],"predecessor-version":[{"id":459,"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/pages\/412\/revisions\/459"}],"wp:attachment":[{"href":"https:\/\/mk360studio.com\/de\/wp-json\/wp\/v2\/media?parent=412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}