Do Step Inn Home \u2014 Your calm home base in Vienna | Hotel & Hostel near Westbahnhof<\/title>\r\n <meta name=\"description\" content=\"Feel at home. Step into Vienna. A calm, well-connected home base opposite Westbahnhof, one block off Mariahilfer Stra\u00dfe. Private rooms & dorms, self check-in, rooms for every budget.\" \/>\r\n <meta name=\"keywords\" content=\"hotel near Westbahnhof Vienna, cheap central Vienna hotel, hostel Mariahilfer Stra\u00dfe, self check-in Vienna, private rooms and dorms Vienna, Do Step Inn Home\" \/>\r\n <link rel=\"canonical\" href=\"https:\/\/dostepinn.com\/\" \/>\r\n <meta name=\"robots\" content=\"index,follow\" \/>\r\n\r\n \r\n <meta property=\"og:type\" content=\"business.business\" \/>\r\n <meta property=\"og:title\" content=\"Do Step Inn Home \u2014 Your calm home base in Vienna\" \/>\r\n <meta property=\"og:description\" content=\"Feel at home. Step into Vienna. Opposite Westbahnhof, one block off Mariahilfer Stra\u00dfe. Rooms for every budget, self check-in, the whole city at your door.\" \/>\r\n <meta property=\"og:locale\" content=\"en\" \/>\r\n <meta property=\"og:site_name\" content=\"Do Step Inn Home\" \/>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <link rel=\"icon\" href=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/favicon.svg\" type=\"image\/svg+xml\" \/>\r\n <style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DO STEP INN HOME \u2014 Design System\r\n \"Feel at home. Step into Vienna.\" \u2014 a cinematic golden-hour arrival.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n:root {\r\n \/* \u2500\u2500 Palette \u00b7 warm Vienna golden hour \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n --espresso: #14100C; \/* deep evening base *\/\r\n --espresso-2: #1C160F; \/* elevated dark surface *\/\r\n --espresso-3: #251D14; \/* card \/ raised *\/\r\n --stone: #F4ECDF; \/* warm cream text *\/\r\n --stone-soft: #D8CBB6; \/* secondary text *\/\r\n --stone-dim: rgba(216,203,182,.62);\r\n --cream: #EFE6D6; \/* morning-light section bg *\/\r\n --cream-2: #E7DAC4;\r\n --gold: #C9A24B; \/* signature muted gold *\/\r\n --gold-soft: #E0C078;\r\n --green: #38493B; \/* deep Vienna green *\/\r\n --green-deep: #2A362C;\r\n\r\n \/* \u2500\u2500 Semantic \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n --bg: var(--espresso);\r\n --text: var(--stone);\r\n --muted: var(--stone-soft);\r\n --line: rgba(216,203,182,.16);\r\n --line-strong: rgba(216,203,182,.3);\r\n\r\n \/* \u2500\u2500 Type \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n --serif: \"Fraunces\", \"Cormorant Garamond\", Georgia, \"Times New Roman\", serif;\r\n --sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n\r\n \/* \u2500\u2500 Space & motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n --gutter: clamp(1.25rem, 5vw, 6rem);\r\n --max: 1240px;\r\n --ease: cubic-bezier(.22, 1, .36, 1); \/* decelerating, \"train into station\" *\/\r\n --ease-soft: cubic-bezier(.4, 0, .2, 1);\r\n --shadow: 0 40px 90px -40px rgba(0,0,0,.7), 0 12px 30px -18px rgba(0,0,0,.6);\r\n --radius: 20px;\r\n}\r\n\r\n\/* \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; }\r\nhtml { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\r\n@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }\r\n\r\nbody {\r\n font-family: var(--sans);\r\n font-weight: 400;\r\n background: var(--bg);\r\n color: var(--text);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\nimg, svg { display: block; max-width: 100%; }\r\nbutton { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }\r\na { color: inherit; text-decoration: none; }\r\nul { list-style: none; padding: 0; }\r\n:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }\r\n\r\n\/* Film grain + warmth overlay *\/\r\n.grain {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 9;\r\n opacity: .05; mix-blend-mode: overlay;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n.skip-link {\r\n position: fixed; top: -100px; left: 1rem; z-index: 200;\r\n background: var(--gold); color: var(--espresso); padding: .7rem 1.1rem;\r\n border-radius: 8px; font-weight: 600; transition: top .2s;\r\n}\r\n.skip-link:focus { top: 1rem; }\r\n\r\n\/* \u2500\u2500 Typographic primitives \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.eyebrow {\r\n font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;\r\n color: var(--gold); font-weight: 500; margin-bottom: 1.4rem;\r\n}\r\n.ital { font-style: italic; font-family: var(--serif); }\r\n\r\n.section__title {\r\n font-family: var(--serif); font-weight: 400;\r\n font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02;\r\n letter-spacing: -.01em; margin-bottom: 1.6rem;\r\n}\r\n.section__lede {\r\n font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--muted);\r\n max-width: 46ch; line-height: 1.7;\r\n}\r\n.section__head { max-width: var(--max); margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); }\r\n\r\n\/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.btn {\r\n display: inline-flex; align-items: center; gap: .6rem;\r\n padding: .95rem 1.7rem; border-radius: 100px; font-weight: 500;\r\n letter-spacing: .01em; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;\r\n will-change: transform;\r\n}\r\n.btn--sm { padding: .7rem 1.3rem; font-size: .92rem; }\r\n.btn--lg { padding: 1.15rem 2.4rem; font-size: 1.08rem; }\r\n.btn--gold {\r\n background: linear-gradient(135deg, var(--gold-soft), var(--gold));\r\n color: #241a0c; box-shadow: 0 10px 30px -12px rgba(201,162,75,.6);\r\n}\r\n.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(201,162,75,.75); }\r\n.btn--ghost {\r\n border: 1px solid var(--line-strong); color: var(--text);\r\n background: rgba(244,236,223,.03); backdrop-filter: blur(6px);\r\n}\r\n.btn--ghost:hover { border-color: var(--gold); transform: translateY(-3px); }\r\n.btn__orb, .fab__orb {\r\n width: 12px; height: 12px; border-radius: 50%;\r\n background: radial-gradient(circle at 35% 35%, var(--gold-soft), var(--gold) 60%, transparent);\r\n box-shadow: 0 0 14px 2px rgba(224,192,120,.7);\r\n animation: pulse 2.8s var(--ease-soft) infinite;\r\n}\r\n@keyframes pulse { 0%,100%{ transform: scale(1); opacity:.85 } 50%{ transform: scale(1.25); opacity:1 } }\r\n\r\n.link-gold {\r\n color: var(--gold-soft); border-bottom: 1px solid rgba(224,192,120,.4);\r\n padding-bottom: 2px; font-weight: 500; transition: color .3s, border-color .3s;\r\n}\r\n.link-gold:hover { color: var(--stone); border-color: var(--gold); }\r\n\r\n\/* \u2550\u2550\u2550 NAV \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\r\n display: flex; align-items: center; gap: 1.5rem;\r\n padding: 1.2rem var(--gutter);\r\n transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;\r\n border-bottom: 1px solid transparent;\r\n}\r\n.nav.is-scrolled {\r\n background: rgba(20,16,12,.72); backdrop-filter: blur(16px) saturate(1.2);\r\n border-bottom-color: var(--line); padding-top: .85rem; padding-bottom: .85rem;\r\n}\r\n.nav__brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }\r\n.nav__mark { color: var(--gold); display: grid; place-items: center; }\r\n.nav__word { font-family: var(--serif); font-size: 1.32rem; letter-spacing: .01em; }\r\n.nav__word em { color: var(--gold-soft); font-style: italic; }\r\n.nav__links { display: flex; gap: 2rem; }\r\n.nav__links a { font-size: .95rem; color: var(--stone-soft); position: relative; transition: color .3s; }\r\n.nav__links a::after {\r\n content: \"\"; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;\r\n background: var(--gold); transition: width .4s var(--ease);\r\n}\r\n.nav__links a:hover { color: var(--stone); }\r\n.nav__links a:hover::after { width: 100%; }\r\n.nav__cta {\r\n border: 1px solid var(--line-strong); border-radius: 100px; padding: .6rem 1.2rem;\r\n font-size: .92rem; transition: border-color .3s, background .3s, color .3s;\r\n}\r\n.nav__cta:hover { border-color: var(--gold); background: var(--gold); color: var(--espresso); }\r\n.nav__burger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }\r\n.nav__burger span { width: 24px; height: 2px; background: var(--stone); transition: .3s; }\r\n\r\n\/* \u2550\u2550\u2550 CHAPTER 1 \u2014 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n position: relative; min-height: 100svh; display: flex; align-items: center;\r\n padding: 8rem var(--gutter) 6rem; overflow: hidden;\r\n}\r\n.hero__scene { position: absolute; inset: 0; z-index: 0; }\r\n.hero__scene canvas { display: block; width: 100% !important; height: 100% !important; }\r\n\/* Static golden-hour fallback (also the mobile \/ reduced-motion visual) *\/\r\n.hero__fallback {\r\n position: absolute; inset: 0; z-index: 0;\r\n background-color: #14100c;\r\n background-image:\r\n \/* warm scrim keeps the headline legible over the photo *\/\r\n linear-gradient(180deg, rgba(30,22,14,.28) 0%, rgba(30,22,14,.45) 100%),\r\n url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/hero.jpg\"),\r\n \/* warm golden-hour fallback if hero.jpg is absent *\/\r\n radial-gradient(120% 90% at 74% 16%, rgba(224,192,120,.5), transparent 58%),\r\n radial-gradient(90% 80% at 15% 90%, rgba(120,90,58,.55), transparent 62%),\r\n linear-gradient(165deg, #6b4f34 0%, #4a3826 45%, #33271a 100%);\r\n background-size: cover; background-position: center;\r\n}\r\n\/* faint skyline silhouette under everything *\/\r\n.hero__fallback::after {\r\n content: \"\"; position: absolute; inset: auto 0 0 0; height: 42%;\r\n background:\r\n linear-gradient(180deg, transparent, rgba(30,20,10,.55)),\r\n url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='1440' height='320' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23000' fill-opacity='.5'%3E%3Crect x='60' y='235' width='120' height='85'\/%3E%3Crect x='200' y='255' width='90' height='65'\/%3E%3Crect x='310' y='215' width='70' height='105'\/%3E%3Crect x='500' y='175' width='130' height='145'\/%3E%3Cpath d='M495 175 L565 120 L635 175 Z'\/%3E%3Cpath d='M556 175 L565 35 L574 175 Z'\/%3E%3Crect x='561' y='20' width='8' height='18'\/%3E%3Crect x='665' y='245' width='80' height='75'\/%3E%3Cpath d='M772 245 Q800 182 828 245 Z'\/%3E%3Crect x='766' y='245' width='9' height='75'\/%3E%3Crect x='825' y='245' width='9' height='75'\/%3E%3Crect x='860' y='228' width='90' height='92'\/%3E%3Crect x='965' y='255' width='70' height='65'\/%3E%3Cpath d='M1075 320 L1120 195 L1128 200 L1090 320 Z'\/%3E%3Cpath d='M1165 320 L1120 195 L1112 200 L1150 320 Z'\/%3E%3Crect x='1245' y='238' width='110' height='82'\/%3E%3Crect x='1365' y='215' width='75' height='105'\/%3E%3Ccircle cx='1120' cy='190' r='7'\/%3E%3C\/g%3E%3Cg stroke='%23000' stroke-opacity='.5' stroke-width='3' fill='none'%3E%3Ccircle cx='1120' cy='190' r='82'\/%3E%3Cpath d='M1120 190 L1120 108 M1120 190 L1120 272 M1120 190 L1038 190 M1120 190 L1202 190 M1120 190 L1062 132 M1120 190 L1178 248 M1120 190 L1178 132 M1120 190 L1062 248'\/%3E%3C\/g%3E%3C\/svg%3E\") bottom center \/ cover no-repeat;\r\n opacity: .5;\r\n}\r\n.hero__veil {\r\n position: absolute; inset: 0; z-index: 1;\r\n background: linear-gradient(90deg, rgba(16,12,8,.82) 0%, rgba(16,12,8,.4) 42%, transparent 75%);\r\n}\r\n.hero__inner { position: relative; z-index: 2; max-width: 760px; }\r\n.hero__title {\r\n font-family: var(--serif); font-weight: 300;\r\n font-size: clamp(3rem, 9vw, 7rem); line-height: .98; letter-spacing: -.02em;\r\n margin: .5rem 0 1.8rem;\r\n}\r\n.hero__title span { display: block; }\r\n.hero__title--gold {\r\n font-style: italic;\r\n background: linear-gradient(100deg, var(--gold-soft), var(--gold) 70%);\r\n -webkit-background-clip: text; background-clip: text; color: transparent;\r\n}\r\n.hero__lede {\r\n font-size: clamp(1.1rem, 1.9vw, 1.4rem); color: var(--stone-soft);\r\n max-width: 40ch; line-height: 1.65; margin-bottom: 2.6rem;\r\n}\r\n.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }\r\n.hero__scroll {\r\n position: absolute; bottom: 2rem; left: var(--gutter); z-index: 2;\r\n display: flex; align-items: center; gap: 1rem; font-size: .78rem;\r\n letter-spacing: .2em; text-transform: uppercase; color: var(--stone-dim);\r\n}\r\n.hero__scroll-line {\r\n width: 60px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden;\r\n}\r\n.hero__scroll-line::after {\r\n content: \"\"; position: absolute; inset: 0; width: 40%;\r\n background: var(--gold); animation: scrollpush 2.4s var(--ease) infinite;\r\n}\r\n@keyframes scrollpush { 0%{ transform: translateX(-100%) } 60%,100%{ transform: translateX(250%) } }\r\n\r\n\/* \u2550\u2550\u2550 GENERIC SECTIONS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.section {\r\n position: relative; padding: clamp(5rem, 12vh, 9rem) var(--gutter);\r\n}\r\n.section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }\r\n\/* Warm morning-light sections invert the palette \u2014 the day-arc narrative *\/\r\n.section[data-mood=\"warm\"] {\r\n background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);\r\n color: #2a2016;\r\n}\r\n.section[data-mood=\"warm\"] .eyebrow { color: #9a7526; }\r\n.section[data-mood=\"warm\"] .section__lede,\r\n.section[data-mood=\"warm\"] p { color: #5c4a34; }\r\n.section[data-mood=\"warm\"] .btn--ghost { border-color: rgba(42,32,22,.24); color: #2a2016; background: rgba(42,32,22,.03); }\r\n\r\n\/* \u2500\u2500 Chapter II \u00b7 Home base grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.base__grid {\r\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;\r\n}\r\n.base-card {\r\n background: rgba(255,255,255,.5); border: 1px solid rgba(42,32,22,.1);\r\n border-radius: var(--radius); padding: 2rem 1.7rem;\r\n transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s;\r\n}\r\n.base-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(42,32,22,.28); background: rgba(255,255,255,.75); }\r\n.base-card--tall { grid-row: span 2; grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end;\r\n color: var(--stone); border-color: transparent; overflow: hidden;\r\n background-color: var(--green);\r\n \/* green scrim over a real photo (falls back to the gradient if photo missing) *\/\r\n background-image: linear-gradient(150deg, rgba(42,54,44,.72) 0%, rgba(30,38,30,.9) 100%), url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-cozy.jpg\"), linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);\r\n background-size: cover; background-position: center; }\r\n.base-card--tall h3, .base-card--tall p { color: var(--stone) !important; }\r\n.base-card--tall .base-card__icon { color: var(--gold-soft); }\r\n\/* Photo card (e.g. House bar & coffee) \u2014 dark scrim over a real photo, light text *\/\r\n.base-card--photo {\r\n color: var(--stone); border-color: transparent; overflow: hidden;\r\n background-color: var(--espresso-3);\r\n background-image: linear-gradient(160deg, rgba(20,14,8,.55) 0%, rgba(16,12,8,.85) 100%), url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/bar.jpg\"), linear-gradient(150deg, #2a2016, #14100c);\r\n background-size: cover; background-position: center;\r\n}\r\n.base-card--photo h3, .base-card--photo p { color: var(--stone) !important; }\r\n.base-card--photo .base-card__icon { color: var(--gold-soft); }\r\n.base-card--photo:hover { background-color: var(--espresso-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }\r\n.base-card__icon { width: 44px; height: 44px; color: #8a6a2a; margin-bottom: 1.4rem; }\r\n.base-card__icon svg { width: 100%; height: 100%; }\r\n.base-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: .6rem; }\r\n.base-card p { font-size: .98rem; line-height: 1.6; }\r\n.base-card--tall h3 { font-size: 2rem; }\r\n\r\n\/* \u2500\u2500 Chapter III \u00b7 Rooms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.rooms__tabs {\r\n display: flex; flex-wrap: wrap; gap: .6rem; max-width: var(--max); margin: 0 auto 2rem;\r\n}\r\n.rooms__tab {\r\n padding: .7rem 1.4rem; border-radius: 100px; border: 1px solid rgba(42,32,22,.2);\r\n font-size: .95rem; color: #6b5842; transition: all .3s var(--ease);\r\n}\r\n.rooms__tab.is-active { background: #2a2016; color: var(--cream); border-color: #2a2016; }\r\n.rooms__tab:hover:not(.is-active) { border-color: #9a7526; color: #2a2016; }\r\n.rooms__stage { max-width: var(--max); margin: 0 auto; }\r\n.rooms__panel {\r\n display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);\r\n align-items: stretch;\r\n}\r\n.rooms__panel[hidden] { display: none; }\r\n\/* Real photography with a crafted gradient as automatic fallback.\r\n The photo is the first background layer; if the file is missing it is\r\n simply skipped and the warm gradient below shows through \u2014 no broken image. *\/\r\n.rooms__art {\r\n border-radius: var(--radius); min-height: 340px; position: relative; overflow: hidden;\r\n box-shadow: var(--shadow);\r\n background-color: #221913;\r\n background-image: linear-gradient(150deg, #3a2c1c, #221913);\r\n background-size: cover; background-position: center;\r\n}\r\n.rooms__art[data-art=\"single\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-single.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n.rooms__art[data-art=\"double\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-double.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n.rooms__art[data-art=\"triple\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-friends.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n.rooms__art[data-art=\"quad\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-family.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n.rooms__art[data-art=\"dorm\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-dorm.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n\/* Soft cinematic vignette for depth + consistency across photos *\/\r\n.rooms__art::after {\r\n content: \"\"; position: absolute; inset: 0; pointer-events: none;\r\n background: linear-gradient(180deg, rgba(20,14,8,.12) 0%, transparent 30%, transparent 60%, rgba(20,14,8,.42) 100%);\r\n}\r\n.rooms__copy {\r\n background: rgba(255,255,255,.55); border: 1px solid rgba(42,32,22,.1);\r\n border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem);\r\n display: flex; flex-direction: column; align-items: flex-start;\r\n}\r\n.rooms__copy h3 { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 500; margin-bottom: 1rem; }\r\n.rooms__copy p { margin-bottom: 1.6rem; max-width: 40ch; }\r\n.rooms__spec { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }\r\n.rooms__spec li {\r\n font-size: .84rem; padding: .4rem .9rem; border-radius: 100px;\r\n background: rgba(42,32,22,.07); color: #5c4a34;\r\n}\r\n\r\n\/* \u2500\u2500 Chapter IV & V \u00b7 Guides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.guides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: var(--max); margin: 0 auto; }\r\n.guide-card {\r\n position: relative; border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.8rem);\r\n border: 1px solid var(--line); overflow: hidden;\r\n transition: transform .5s var(--ease), border-color .4s;\r\n}\r\n.guide-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }\r\n.guide-card--vienna { background: linear-gradient(155deg, rgba(56,73,59,.5), rgba(20,16,12,.4)); }\r\n.guide-card--home { background: linear-gradient(155deg, rgba(201,162,75,.16), rgba(20,16,12,.4)); }\r\n.guide-card::before {\r\n content: \"\"; position: absolute; top: -40%; right: -20%; width: 60%; height: 80%;\r\n background: radial-gradient(circle, rgba(224,192,120,.25), transparent 70%); filter: blur(30px);\r\n}\r\n.guide-card__tag {\r\n display: inline-block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;\r\n color: var(--gold); border: 1px solid var(--line-strong); border-radius: 100px;\r\n padding: .35rem .9rem; margin-bottom: 1.4rem; position: relative;\r\n}\r\n.guide-card h3 { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 400; margin-bottom: .8rem; }\r\n.guide-card p { color: var(--stone-soft); margin-bottom: 1.6rem; position: relative; max-width: 40ch; }\r\n.guide-card__prompts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.8rem; }\r\n.guide-card__prompts button {\r\n text-align: left; width: 100%; padding: .7rem 1rem; border-radius: 12px;\r\n border: 1px solid var(--line); background: rgba(244,236,223,.03);\r\n font-size: .92rem; color: var(--stone-soft); transition: all .3s var(--ease);\r\n}\r\n.guide-card__prompts button:hover { border-color: var(--gold); color: var(--stone); transform: translateX(4px); }\r\n\r\n\/* \u2500\u2500 Chapter VI \u00b7 Explore \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.explore__list { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line); }\r\n.explore-row {\r\n display: flex; align-items: baseline; gap: 1.2rem; padding: 1.5rem 0;\r\n border-bottom: 1px solid var(--line); transition: padding-left .4s var(--ease), color .4s;\r\n}\r\n.explore-row:hover { padding-left: 1rem; }\r\n.explore-row__name { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 400; white-space: nowrap; }\r\n.explore-row__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); align-self: center; }\r\n.explore-row__meta { color: var(--stone-soft); font-size: 1rem; white-space: nowrap; }\r\n.explore-row__meta b { color: var(--gold-soft); font-weight: 600; }\r\n.explore__cta { max-width: var(--max); margin: 2.5rem auto 0; color: var(--stone-soft); }\r\n\r\n\/* \u2500\u2500 Our Vienna locations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.loc__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; max-width: var(--max); margin: 0 auto; align-items: stretch; }\r\n.loc__map {\r\n position: relative; border-radius: var(--radius); overflow: hidden; min-height: 380px;\r\n border: 1px solid var(--line-strong);\r\n background: linear-gradient(160deg, rgba(28,22,15,.9), rgba(16,12,8,.95));\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow);\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.loc__mapsvg { width: 100%; height: 100%; }\r\n.loc__pin circle { fill: var(--gold); stroke: rgba(20,16,12,.8); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(224,192,120,.7)); transition: r .3s var(--ease); }\r\n.loc__pin text { fill: #241a0c; font: 700 8px var(--sans); text-anchor: middle; }\r\n.loc__pin[data-pin=\"home\"] circle { fill: var(--gold-soft); r: 9; }\r\n.loc__pin.is-active circle { r: 11; }\r\n.loc__pin { animation: locpulse 3s var(--ease-soft) infinite; transform-box: fill-box; transform-origin: center; }\r\n.loc__pin:nth-child(2){ animation-delay:.4s } .loc__pin:nth-child(3){ animation-delay:.8s }\r\n.loc__pin:nth-child(4){ animation-delay:1.2s } .loc__pin:nth-child(5){ animation-delay:1.6s }\r\n@keyframes locpulse { 0%,100%{ opacity:.85 } 50%{ opacity:1 } }\r\n.loc__maptag {\r\n position: absolute; left: 1rem; bottom: 1rem; font-size: .72rem; letter-spacing: .18em;\r\n text-transform: uppercase; color: var(--stone-dim);\r\n}\r\n.loc__list { display: flex; flex-direction: column; gap: .6rem; }\r\n.loc-card {\r\n display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;\r\n padding: 1.1rem 1.3rem; border-radius: 14px; border: 1px solid var(--line);\r\n background: linear-gradient(150deg, rgba(244,236,223,.05), rgba(244,236,223,.015));\r\n backdrop-filter: blur(8px); transition: transform .4s var(--ease), border-color .3s, background .3s; height: 100%;\r\n}\r\n.loc-card:hover { transform: translateX(5px); border-color: var(--gold); background: linear-gradient(150deg, rgba(201,162,75,.1), rgba(244,236,223,.02)); }\r\n.loc-card__no {\r\n width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;\r\n font-family: var(--serif); font-style: italic; color: var(--gold-soft);\r\n border: 1px solid var(--line-strong); flex-shrink: 0;\r\n}\r\n.loc-card.is-home .loc-card__no { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #241a0c; border-color: transparent; }\r\n.loc-card__body { display: flex; flex-direction: column; min-width: 0; }\r\n.loc-card__body b { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }\r\n.loc-card__body span { font-size: .84rem; color: var(--stone-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n.loc-card__go { color: var(--gold-soft); font-size: .85rem; font-weight: 500; white-space: nowrap; display: inline-flex; gap: .4rem; transition: gap .3s var(--ease); }\r\n.loc-card:hover .loc-card__go { gap: .8rem; }\r\n.loc-card__links { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; white-space: nowrap; }\r\n.loc-card__link { color: var(--gold); font-size: .86rem; font-weight: 600; display: inline-flex; gap: .35rem; transition: gap .3s var(--ease), color .3s; }\r\n.loc-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }\r\n.loc-card:hover .loc-card__link { gap: .7rem; }\r\n@media (max-width: 860px) { .loc__layout { grid-template-columns: 1fr; } .loc__map { min-height: 300px; order: 2; } }\r\n\r\n\/* \u2500\u2500 Chapter VII \u00b7 Easy stay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: var(--max); margin: 0 auto; }\r\n.easy-card {\r\n border: 1px solid rgba(42,32,22,.12); border-radius: var(--radius);\r\n padding: 2.2rem 1.8rem; background: rgba(255,255,255,.5);\r\n transition: transform .5s var(--ease), box-shadow .5s var(--ease);\r\n}\r\n.easy-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(42,32,22,.25); }\r\n.easy-card__num { font-family: var(--serif); font-size: 2.6rem; color: #9a7526; display: inline-flex; margin-bottom: 1rem; }\r\n.easy-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: .6rem; }\r\n.easy__note { text-align: center; margin-top: 2.5rem; max-width: var(--max); margin-inline: auto; }\r\n\r\n\/* \u2500\u2500 Groups & partnerships (glassmorphism) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.groups { position: relative; overflow: hidden; }\r\n.groups__glow {\r\n position: absolute; inset: 0; z-index: 0; pointer-events: none;\r\n background:\r\n radial-gradient(50% 60% at 15% 20%, rgba(201,162,75,.18), transparent 60%),\r\n radial-gradient(45% 55% at 85% 90%, rgba(56,73,59,.5), transparent 60%);\r\n}\r\n.groups .section__head, .groups__grid, .groups__mail { position: relative; z-index: 1; }\r\n.groups__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: var(--max); margin: 0 auto; }\r\n.group-card {\r\n position: relative; display: flex; flex-direction: column; align-items: flex-start;\r\n padding: clamp(1.8rem, 4vw, 2.8rem); border-radius: var(--radius); overflow: hidden;\r\n border: 1px solid var(--line-strong);\r\n background: linear-gradient(150deg, rgba(244,236,223,.08), rgba(244,236,223,.02));\r\n backdrop-filter: blur(14px) saturate(1.1);\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -40px rgba(0,0,0,.6);\r\n transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);\r\n}\r\n.group-card::before {\r\n content: \"\"; position: absolute; top: -40%; right: -20%; width: 55%; height: 80%;\r\n background: radial-gradient(circle, rgba(224,192,120,.28), transparent 70%);\r\n filter: blur(34px); pointer-events: none;\r\n}\r\n.group-card--partner::before { background: radial-gradient(circle, rgba(127,176,138,.3), transparent 70%); }\r\n.group-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 70px -40px rgba(0,0,0,.7); }\r\n.group-card__icon { width: 46px; height: 46px; color: var(--gold-soft); margin-bottom: 1.3rem; position: relative; }\r\n.group-card__icon svg { width: 100%; height: 100%; }\r\n.group-card h3 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 400; margin-bottom: .7rem; }\r\n.group-card p { color: var(--stone-soft); margin-bottom: 1.6rem; max-width: 42ch; line-height: 1.6; }\r\n.group-card__cta { margin-top: auto; color: var(--gold-soft); font-weight: 500; display: inline-flex; gap: .5rem; align-items: center; transition: gap .3s var(--ease); }\r\n.group-card:hover .group-card__cta { gap: .9rem; }\r\n.groups__mail { text-align: center; margin-top: 2.4rem; color: var(--stone-soft); }\r\n\r\n\/* \u2500\u2500 Chapter VIII \u00b7 Book \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.book { text-align: center; overflow: hidden; }\r\n.book::before {\r\n content: \"\"; position: absolute; inset: 0; z-index: 0;\r\n background: radial-gradient(80% 90% at 50% 120%, rgba(201,162,75,.25), transparent 60%);\r\n}\r\n.book__inner { position: relative; z-index: 1; max-width: 720px; }\r\n.book__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; margin-bottom: 1.4rem; }\r\n.book__lede { color: var(--stone-soft); font-size: 1.2rem; max-width: 44ch; margin: 0 auto 2.4rem; }\r\n.book__reassure { margin-top: 1.6rem; font-size: .88rem; color: var(--stone-dim); letter-spacing: .04em; }\r\n\r\n\/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.footer {\r\n padding: 4rem var(--gutter) 3rem; border-top: 1px solid var(--line);\r\n display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start;\r\n}\r\n.footer__brand p { color: var(--stone-dim); margin-top: .6rem; font-size: .92rem; }\r\n.footer__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: flex-end; }\r\n.footer__nav a, .footer__nav button { color: var(--stone-soft); font-size: .95rem; transition: color .3s; }\r\n.footer__nav a:hover { color: var(--gold-soft); }\r\n.footer__legal { grid-column: 1 \/ -1; color: var(--stone-dim); font-size: .82rem; padding-top: 2rem; border-top: 1px solid var(--line); }\r\n\r\n\/* \u2500\u2500 Sticky booking bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.stickybar {\r\n position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 160%);\r\n z-index: 90; display: flex; align-items: center; gap: 1.5rem;\r\n padding: .7rem .7rem .7rem 1.6rem; border-radius: 100px;\r\n background: rgba(28,22,15,.82); backdrop-filter: blur(16px);\r\n border: 1px solid var(--line-strong); box-shadow: var(--shadow);\r\n transition: transform .6s var(--ease); max-width: calc(100vw - 2rem);\r\n}\r\n.stickybar.is-visible { transform: translate(-50%, 0); }\r\n.stickybar__label { font-size: .9rem; color: var(--stone-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n\r\n\/* \u2500\u2500 Floating concierge FAB \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.fab {\r\n position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 91;\r\n display: flex; align-items: center; gap: .7rem; padding: .8rem 1.3rem .8rem .9rem;\r\n border-radius: 100px; background: linear-gradient(135deg, rgba(56,73,59,.95), rgba(28,22,15,.95));\r\n border: 1px solid var(--line-strong); box-shadow: var(--shadow);\r\n transform: translateY(160%); transition: transform .6s var(--ease), border-color .3s;\r\n}\r\n.fab.is-visible { transform: translateY(0); }\r\n.fab:hover { border-color: var(--gold); }\r\n.fab__label { font-size: .92rem; font-weight: 500; }\r\n@media (max-width: 560px) { .fab__label { display: none; } .fab { padding: .9rem; } }\r\n\r\n\/* \u2500\u2500 Reveal-on-scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n[data-reveal] {\r\n opacity: 0; transform: translateY(52px) scale(.985);\r\n transition: opacity 1s var(--ease), transform 1.1s var(--ease);\r\n transition-delay: calc(var(--d, 0) * 110ms);\r\n}\r\n[data-reveal].is-in { opacity: 1; transform: none; }\r\n\r\n\/* \u2550\u2550\u2550 MODALS (booking + chat) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.modal[hidden], .chat[hidden] { display: none; }\r\n.modal, .chat { position: fixed; inset: 0; z-index: 150; display: grid; }\r\n.modal__backdrop {\r\n position: absolute; inset: 0; background: rgba(8,6,4,.6); backdrop-filter: blur(8px);\r\n opacity: 0; transition: opacity .4s var(--ease);\r\n}\r\n.is-open .modal__backdrop { opacity: 1; }\r\n.modal__card {\r\n position: relative; z-index: 1; place-self: center; width: min(500px, calc(100vw - 2rem));\r\n background: linear-gradient(160deg, var(--espresso-3), var(--espresso-2));\r\n border: 1px solid var(--line-strong); border-radius: 24px; padding: 2.5rem;\r\n box-shadow: var(--shadow); transform: translateY(20px) scale(.98); opacity: 0;\r\n transition: transform .5s var(--ease), opacity .4s var(--ease);\r\n}\r\n.is-open .modal__card { transform: none; opacity: 1; }\r\n.modal__close, .chat__close {\r\n position: absolute; top: 1rem; right: 1.2rem; font-size: 1.8rem; line-height: 1;\r\n color: var(--stone-soft); width: 40px; height: 40px; border-radius: 50%;\r\n transition: background .3s, color .3s;\r\n}\r\n.modal__close:hover, .chat__close:hover { background: rgba(244,236,223,.08); color: var(--stone); }\r\n.booking-card__title { font-family: var(--serif); font-size: 2rem; font-weight: 400; margin-bottom: 1.6rem; }\r\n.booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n.booking-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; color: var(--stone-soft); letter-spacing: .05em; text-transform: uppercase; }\r\n.booking-form input, .booking-form select {\r\n font: inherit; font-size: 1rem; text-transform: none; letter-spacing: 0;\r\n padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line-strong);\r\n background: rgba(0,0,0,.25); color: var(--stone); color-scheme: dark;\r\n}\r\n.booking-form input:focus, .booking-form select:focus { border-color: var(--gold); outline: none; }\r\n.booking-form .btn { grid-column: 1 \/ -1; justify-content: center; margin-top: .5rem; }\r\n.booking-card__note { margin-top: 1.2rem; font-size: .84rem; color: var(--stone-dim); }\r\n\r\n\/* \u2550\u2550\u2550 CHAT PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.chat { justify-items: end; }\r\n.chat__panel {\r\n position: relative; z-index: 1; align-self: stretch;\r\n width: min(440px, 100vw); height: 100svh; display: flex; flex-direction: column;\r\n background: linear-gradient(180deg, rgba(28,22,15,.96), rgba(16,12,8,.98));\r\n backdrop-filter: blur(20px); border-left: 1px solid var(--line-strong);\r\n box-shadow: -40px 0 90px -40px rgba(0,0,0,.7);\r\n transform: translateX(100%); transition: transform .55s var(--ease);\r\n}\r\n.is-open .chat__panel { transform: none; }\r\n.chat__header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); gap: .5rem; }\r\n.chat__switch { display: flex; gap: .3rem; background: rgba(0,0,0,.3); padding: .3rem; border-radius: 100px; }\r\n.chat__mode {\r\n display: flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 100px;\r\n font-size: .84rem; color: var(--stone-soft); transition: all .3s var(--ease); white-space: nowrap;\r\n}\r\n.chat__mode-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stone-soft); transition: .3s; }\r\n.chat__mode.is-active { background: rgba(244,236,223,.08); color: var(--stone); }\r\n.chat__mode[data-mode=\"vienna\"].is-active .chat__mode-dot { background: #7fb08a; box-shadow: 0 0 8px #7fb08a; }\r\n.chat__mode[data-mode=\"home\"].is-active .chat__mode-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }\r\n.chat__close { position: static; }\r\n\r\n.chat__body { flex: 1; overflow-y: auto; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; }\r\n.msg { max-width: 85%; padding: .85rem 1.1rem; border-radius: 16px; font-size: .95rem; line-height: 1.55; animation: msgIn .5s var(--ease) both; }\r\n@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }\r\n.msg--bot { align-self: flex-start; background: rgba(244,236,223,.06); border: 1px solid var(--line); border-bottom-left-radius: 4px; }\r\n.msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #241a0c; border-bottom-right-radius: 4px; }\r\n.msg--bot strong { color: var(--gold-soft); }\r\n.msg--bot a { color: var(--gold-soft); text-decoration: underline; }\r\n.msg__pins { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }\r\n.msg__pin { display: flex; gap: .5rem; align-items: baseline; font-size: .86rem; color: var(--stone-soft); }\r\n.msg__pin::before { content: \"\ud83d\udccd\"; font-size: .8rem; }\r\n.typing { display: flex; gap: 4px; padding: 1rem 1.1rem; }\r\n.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-soft); animation: blink 1.2s infinite; }\r\n.typing span:nth-child(2){ animation-delay: .2s } .typing span:nth-child(3){ animation-delay: .4s }\r\n@keyframes blink { 0%,60%,100%{ opacity: .3 } 30%{ opacity: 1 } }\r\n\r\n.chat__prompts { display: flex; gap: .5rem; overflow-x: auto; padding: .8rem 1.2rem; border-top: 1px solid var(--line); }\r\n.chat__prompts button {\r\n white-space: nowrap; padding: .55rem 1rem; border-radius: 100px; border: 1px solid var(--line-strong);\r\n font-size: .84rem; color: var(--stone-soft); transition: all .3s var(--ease); flex-shrink: 0;\r\n}\r\n.chat__prompts button:hover { border-color: var(--gold); color: var(--stone); }\r\n.chat__input { display: flex; gap: .6rem; padding: .9rem 1.2rem; border-top: 1px solid var(--line); }\r\n.chat__input input { flex: 1; font: inherit; padding: .8rem 1.1rem; border-radius: 100px; border: 1px solid var(--line-strong); background: rgba(0,0,0,.3); color: var(--stone); }\r\n.chat__input input:focus { border-color: var(--gold); outline: none; }\r\n.chat__input button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #241a0c; transition: transform .3s; flex-shrink: 0; }\r\n.chat__input button:hover { transform: scale(1.06); }\r\n.chat__disclaimer { font-size: .72rem; color: var(--stone-dim); padding: 0 1.2rem 1rem; text-align: center; }\r\n\r\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 940px) {\r\n .nav__links { display: none; }\r\n .nav__cta { display: none; }\r\n .nav__burger { display: flex; }\r\n .base__grid { grid-template-columns: 1fr 1fr; }\r\n .base-card--tall { grid-column: span 2; grid-row: auto; }\r\n .rooms__panel { grid-template-columns: 1fr; }\r\n .rooms__art { min-height: 240px; }\r\n .guides { grid-template-columns: 1fr; }\r\n .easy__grid { grid-template-columns: 1fr; }\r\n .footer { grid-template-columns: 1fr; }\r\n .footer__nav { justify-content: flex-start; }\r\n\r\n \/* Mobile nav drawer *\/\r\n .nav.is-menu-open .nav__links {\r\n display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;\r\n background: rgba(20,16,12,.97); backdrop-filter: blur(16px); padding: 1.5rem var(--gutter);\r\n gap: 1.2rem; border-bottom: 1px solid var(--line);\r\n }\r\n .nav.is-menu-open .nav__cta { display: inline-flex; position: absolute; top: calc(100% + 12rem); left: var(--gutter); }\r\n}\r\n@media (max-width: 560px) {\r\n .base__grid { grid-template-columns: 1fr; }\r\n .base-card--tall { grid-column: auto; }\r\n .booking-form { grid-template-columns: 1fr; }\r\n .hero__scroll { display: none; }\r\n .stickybar__label { display: none; }\r\n .stickybar { padding: .5rem; left: auto; right: 1rem; transform: translateY(160%); }\r\n .stickybar.is-visible { transform: translateY(0); }\r\n .chat__panel { width: 100vw; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 REDUCED MOTION \u2014 honour the guest's setting \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }\r\n [data-reveal] { opacity: 1 !important; transform: none !important; }\r\n .hero__scene { display: none !important; } \/* static fallback only *\/\r\n .btn__orb, .fab__orb { animation: none; }\r\n [data-parallax] { transform: none !important; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n LIGHT \/ WARM THEME v2 \u2014 cream \u00b7 taupe \u00b7 mocha (Awwwards editorial)\r\n Overrides the dark base to a bright, luxurious gallery look.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root{\r\n --bg: #EAE3D6; \/* warm greige ground *\/\r\n --surface: #FBF8F2; \/* near-white warm card *\/\r\n --surface-2: #F2ECE0; \/* soft cream *\/\r\n --ink: #33291E; \/* deep warm brown text *\/\r\n --ink-soft: #6E6155; \/* taupe brown *\/\r\n --ink-dim: rgba(51,41,30,.5);\r\n --accent: #A6763F; \/* caramel \/ bronze *\/\r\n --accent-soft:#C0904F;\r\n --mocha-a: #9A7452; \/* mocha gradient cards *\/\r\n --mocha-b: #6E5238;\r\n --muted: #6E6155;\r\n --line: rgba(51,41,30,.12);\r\n --line-strong: rgba(51,41,30,.22);\r\n --radius: 26px;\r\n --shadow: 0 30px 70px -40px rgba(51,32,14,.4), 0 10px 24px -16px rgba(51,32,14,.28);\r\n}\r\nbody{ background: var(--bg); color: var(--ink); }\r\n.grain{ opacity:.03; mix-blend-mode:multiply; }\r\n\r\n\/* Nav \u2014 dark text (bright hero + light scrolled bar) *\/\r\n.nav__word{ color: var(--ink); }\r\n.nav__links a{ color: var(--ink-soft); }\r\n.nav__links a:hover{ color: var(--ink); }\r\n.nav__cta{ color: var(--ink); border-color: var(--line-strong); }\r\n.nav__burger span{ background: var(--ink); }\r\n.nav.is-scrolled{ background: rgba(251,248,242,.9); border-bottom-color: var(--line); }\r\n.nav.is-scrolled .nav__cta:hover{ color: #fff; background: var(--accent); border-color: var(--accent); }\r\n.nav.is-menu-open .nav__links{ background: rgba(251,248,242,.98); border-bottom-color: var(--line); }\r\n\r\n\/* Hero \u2014 light cream scrim + dark editorial text over the bright golden scene *\/\r\n.hero__veil{ background: linear-gradient(90deg, rgba(250,246,238,.74) 0%, rgba(250,246,238,.34) 46%, transparent 82%); }\r\n.hero__lede{ color: #5a4c3a; }\r\n.hero__scroll{ color: var(--ink-dim); }\r\n.hero__scroll-line{ background: var(--line-strong); }\r\n.hero .btn--ghost{ color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,.45); }\r\n\r\n\/* Section ledes \/ primitives *\/\r\n.section__lede{ color: var(--ink-soft); }\r\n.eyebrow{ color: var(--accent); }\r\n.link-gold{ color: var(--accent); border-bottom-color: rgba(166,118,63,.4); }\r\n.link-gold:hover{ color: var(--ink); border-bottom-color: var(--accent); }\r\n\r\n\/* Guides *\/\r\n.guide-card{ background: var(--surface); border-color: var(--line); box-shadow: 0 24px 55px -34px rgba(51,32,14,.3); }\r\n.guide-card--vienna{ background: linear-gradient(155deg,#EEEBE0,var(--surface)); }\r\n.guide-card--home{ background: linear-gradient(155deg,#F4E9D6,var(--surface)); }\r\n.guide-card::before{ opacity:.45; }\r\n.guide-card h3{ color: var(--ink); }\r\n.guide-card p{ color: var(--ink-soft); }\r\n.guide-card__tag{ color: var(--accent); border-color: var(--line-strong); }\r\n.guide-card__prompts button{ border-color: var(--line); background: rgba(51,41,30,.03); color: var(--ink-soft); }\r\n.guide-card__prompts button:hover{ border-color: var(--accent); color: var(--ink); }\r\n\r\n\/* Explore *\/\r\n.explore__list, .explore-row{ border-color: var(--line); }\r\n.explore-row__meta{ color: var(--ink-soft); }\r\n.explore-row__meta b{ color: var(--accent); }\r\n.explore-row__line{ background: linear-gradient(90deg,var(--line-strong),transparent); }\r\n.explore__cta{ color: var(--ink-soft); }\r\n\r\n\/* Locations cards *\/\r\n.loc-card{ background: var(--surface); border-color: var(--line); box-shadow: 0 18px 44px -34px rgba(51,32,14,.28); }\r\n.loc-card:hover{ border-color: var(--accent); background: var(--surface); }\r\n.loc-card__body span{ color: var(--ink-soft); }\r\n.loc-card__go{ color: var(--accent); }\r\n.loc-card__link{ color: var(--accent); }\r\n.loc-card__no{ color: var(--accent); border-color: var(--line-strong); }\r\n\r\n\/* Groups *\/\r\n.group-card{ background: var(--surface); border-color: var(--line); box-shadow: 0 24px 55px -34px rgba(51,32,14,.3); }\r\n.group-card h3{ color: var(--ink); }\r\n.group-card p{ color: var(--ink-soft); }\r\n.group-card__cta{ color: var(--accent); }\r\n.group-card__icon{ color: var(--accent); }\r\n.groups__mail{ color: var(--ink-soft); }\r\n.groups__glow{ opacity:.55; }\r\n\r\n\/* Book *\/\r\n.book__lede{ color: var(--ink-soft); }\r\n.book__reassure{ color: var(--ink-dim); }\r\n.book::before{ background: radial-gradient(80% 90% at 50% 120%, rgba(166,118,63,.2), transparent 60%); }\r\n\r\n\/* Footer *\/\r\n.footer{ border-color: var(--line); }\r\n.footer__brand p{ color: var(--ink-soft); }\r\n.footer__nav a, .footer__nav button{ color: var(--ink-soft); }\r\n.footer__nav a:hover{ color: var(--accent); }\r\n.footer__legal{ color: var(--ink-dim); border-color: var(--line); line-height: 1.9; }\r\n.footer__legal a{ color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }\r\n.footer__legal a:hover{ color: var(--accent); }\r\n\r\n\/* \u2500\u2500 Real Google Map (keyless iframe) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.loc__map{\r\n padding: 0; background: none; border: 0; box-shadow: var(--shadow);\r\n border-radius: var(--radius); overflow: hidden; min-height: 440px;\r\n}\r\n.loc__map iframe{\r\n width: 100%; height: 100%; min-height: 440px; border: 0; display: block;\r\n filter: saturate(.92) contrast(.98);\r\n}\r\n@media (max-width: 860px){ .loc__map, .loc__map iframe{ min-height: 320px; } .loc__map{ order: 2; } }\r\n\r\n\/* \u2500\u2500 Parallax \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n[data-parallax]{ will-change: transform; }\r\n\r\n\r\n\/* \u2500\u2500 Base photo-card variants (kitchen, courtyard) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.base-card--kitchen{\r\n background-image: linear-gradient(160deg, rgba(20,14,8,.5) 0%, rgba(16,12,8,.82) 100%), url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/kitchen.jpg\"), linear-gradient(150deg,#2a2016,#14100c);\r\n}\r\n.base-card--courtyard{\r\n background-image: linear-gradient(160deg, rgba(20,14,8,.42) 0%, rgba(30,40,32,.8) 100%), url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/courtyard.jpg\"), linear-gradient(150deg,#38493b,#2a362c);\r\n}\r\n\r\n\/* \u2500\u2500 Gallery (\"A look inside\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.gallery__grid{\r\n display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px;\r\n gap: 1rem; max-width: var(--max); margin: 0 auto;\r\n}\r\n.gallery__item{\r\n position: relative; overflow: hidden; border-radius: 18px; box-shadow: var(--shadow);\r\n background: #2a2016;\r\n}\r\n.gallery__item img{\r\n width: 100%; height: 100%; object-fit: cover; display: block;\r\n transition: transform 1s var(--ease); filter: saturate(1.02);\r\n}\r\n.gallery__item:hover img{ transform: scale(1.07); }\r\n.gallery__item::after{\r\n content: attr(data-label); position: absolute; left: 1rem; bottom: .85rem;\r\n color: #fff; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .01em;\r\n text-shadow: 0 2px 12px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px);\r\n transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none;\r\n}\r\n.gallery__item::before{\r\n content: \"\"; position: absolute; inset: 0; pointer-events: none;\r\n background: linear-gradient(180deg, transparent 45%, rgba(20,14,8,.55) 100%);\r\n opacity: 0; transition: opacity .4s var(--ease);\r\n}\r\n.gallery__item:hover::after, .gallery__item:hover::before{ opacity: 1; }\r\n.gallery__item:hover::after{ transform: translateY(0); }\r\n.gallery__item--wide{ grid-column: span 2; }\r\n.gallery__item--tall{ grid-row: span 2; }\r\n@media (max-width: 860px){\r\n .gallery__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }\r\n .gallery__item--tall{ grid-row: span 1; }\r\n}\r\n\r\n\/* \u2500\u2500 Logo (nav + footer) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.nav__logo{ height: 42px; width: auto; display: block; transition: height .4s var(--ease); }\r\n.nav.is-scrolled .nav__logo{ height: 34px; }\r\n.footer__logo{ height: 54px; width: auto; display: block; margin-bottom: .2rem; }\r\n@media (max-width: 560px){ .nav__logo{ height: 30px; } }\r\n\r\n\/* \u2500\u2500 Footer social links \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.footer__social{ display: flex; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap; }\r\n.footer__social .social{\r\n display: inline-flex; align-items: center; gap: .5rem;\r\n padding: .5rem .9rem .5rem .7rem; border: 1px solid var(--line);\r\n border-radius: 999px; color: var(--ink-soft); font-size: .9rem; font-weight: 500;\r\n background: var(--surface); transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);\r\n}\r\n.footer__social .social svg{ display: block; }\r\n.footer__social .social:hover{\r\n color: var(--accent); border-color: var(--accent); transform: translateY(-2px);\r\n}\r\n@media (prefers-reduced-motion: reduce){ .footer__social .social:hover{ transform: none; } }\r\n\r\n\/* \u2500\u2500 Booking band (UP Hotel IBE) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.bookbar{ position: relative; z-index: 3; padding: 0 var(--gutter) clamp(2rem,5vw,3.5rem); margin-top: clamp(-5.5rem, -6vw, -3rem); }\r\n.bookbar__inner{\r\n max-width: var(--max); margin: 0 auto; background: var(--surface);\r\n border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);\r\n padding: clamp(1.4rem, 3vw, 2.4rem);\r\n}\r\n.bookbar__title{ font-family: var(--serif); font-size: clamp(1.3rem,2.5vw,1.7rem); color: var(--ink); margin-bottom: 1rem; }\r\n.bookbar__note{ margin-top: 1rem; font-size: .84rem; color: var(--ink-dim); letter-spacing: .03em; }\r\n.ibe-wrap{ width: 100%; min-height: 64px; }\r\n.ibe-wrap--book{ margin: 1.8rem auto; max-width: 860px; }\r\n\r\n\/* \u2500\u2500 Group booking request form \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.groups__layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:1.4rem; max-width:var(--max); margin:0 auto; position:relative; z-index:1; align-items:start; }\r\n.group-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,3.5vw,2.6rem); box-shadow:0 24px 55px -34px rgba(51,32,14,.3); }\r\n.group-form h3{ font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:400; color:var(--ink); }\r\n.group-form h3 span{ color:var(--accent); font-size:.62em; font-style:italic; }\r\n.group-form__sub{ color:var(--ink-soft); margin:.5rem 0 1.6rem; font-size:.98rem; }\r\n.group-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem; }\r\n.group-form label{ display:flex; flex-direction:column; gap:.4rem; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }\r\n.group-form .opt{ text-transform:none; letter-spacing:0; opacity:.6; }\r\n.group-form input, .group-form textarea{ font:inherit; font-size:1rem; text-transform:none; letter-spacing:0; padding:.75rem .9rem; border-radius:12px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); transition:border-color .3s; }\r\n.group-form input:focus, .group-form textarea:focus{ outline:none; border-color:var(--accent); }\r\n.group-form__full{ margin-top:1rem; }\r\n.group-form__field{ border:0; padding:0; margin:1.3rem 0 0; }\r\n.group-form__field legend{ font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.7rem; }\r\n.group-form .chk{ display:inline-flex; flex-direction:row; align-items:center; gap:.5rem; text-transform:none; letter-spacing:0; font-size:.95rem; color:var(--ink); margin:0 1.3rem .55rem 0; cursor:pointer; }\r\n.group-form .chk input{ width:auto; accent-color:var(--accent); }\r\n.group-form__ok{ margin-top:1.1rem; color:#2e6b3f; font-size:.96rem; background:rgba(56,107,63,.08); border:1px solid rgba(56,107,63,.28); padding:.85rem 1.05rem; border-radius:12px; }\r\n.group-side{ display:flex; flex-direction:column; gap:1.1rem; }\r\n.group-side .group-card{ height:auto; }\r\n.group-side .groups__mail{ margin:0; text-align:left; }\r\n@media(max-width:860px){ .groups__layout{ grid-template-columns:1fr; } .group-form__grid{ grid-template-columns:1fr; } }\r\n\r\n\/* \u2550\u2550\u2550 SCROLL PROGRESS BAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.scrollbar{\r\n position: fixed; top: 0; left: 0; height: 3px; width: 0%;\r\n background: linear-gradient(90deg, var(--accent-soft), var(--accent));\r\n z-index: 300; pointer-events: none; transition: width .1s linear;\r\n}\r\n\r\n\/* \u2550\u2550\u2550 HORIZONTAL-SCROLL GALLERY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hgallery{ position: relative; background: linear-gradient(180deg, var(--bg), var(--surface-2)); }\r\n.hgallery__pin{\r\n position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;\r\n display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem,3vh,2.2rem);\r\n}\r\n.hgallery__head{ padding: 0 var(--gutter); max-width: var(--max); }\r\n.hgallery__title{ font-family: var(--serif); font-weight: 400; color: var(--ink);\r\n font-size: clamp(1.9rem,4.5vw,3.4rem); line-height: 1.03; margin-top: .4rem; }\r\n.hgallery__hint{ margin-top: .8rem; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }\r\n.hgallery__track{ display: flex; gap: clamp(1rem,1.6vw,1.6rem); padding: 0 var(--gutter); will-change: transform; }\r\n.hg-item{\r\n position: relative; flex: 0 0 auto; width: clamp(240px, 40vw, 540px); height: 60vh; height: 60svh;\r\n border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: #2a2016;\r\n}\r\n.hg-item img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }\r\n.hg-item:hover img{ transform: scale(1.05); }\r\n.hg-item::before{ content:\"\"; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(20,14,8,.6)); }\r\n.hg-item::after{\r\n content: attr(data-label); position: absolute; left: 1.1rem; bottom: 1rem; color: #fff;\r\n font-family: var(--serif); font-size: 1.15rem; text-shadow: 0 2px 12px rgba(0,0,0,.6);\r\n}\r\n\/* Fallback: horizontal swipe strip when JS\/pin is off, mobile, or reduced-motion *\/\r\n.hgallery.is-static .hgallery__pin{ position: static; height: auto; padding: clamp(3rem,8vh,6rem) 0; }\r\n.hgallery.is-static .hgallery__track{ overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; }\r\n.hgallery.is-static .hg-item{ scroll-snap-align: center; height: 52vh; }\r\n@media (max-width: 700px){ .hg-item{ width: 78vw; height: 54vh; } }\r\n@media (prefers-reduced-motion: reduce){\r\n .hgallery__pin{ position: static; height: auto; padding: 3rem 0; }\r\n .hgallery__track{ overflow-x: auto; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 INTERACTIONS: TILT \u00b7 WORD-REVEAL \u00b7 STORY \u00b7 3D FLY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* 3D tilt on cards (set via JS) *\/\r\n[data-tilt]{ transition: transform .5s var(--ease); transform-style: preserve-3d; will-change: transform; }\r\n[data-tilt]:hover{ transition: transform .12s ease-out; }\r\n\r\n\/* Word-by-word heading reveal *\/\r\n.word{ display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg);\r\n transition: opacity .6s var(--ease), transform .6s var(--ease);\r\n transition-delay: calc(var(--wd, 0) * 45ms); }\r\n[data-reveal].is-in .word, .is-in .word{ opacity: 1; transform: none; }\r\n\r\n\/* Sticky story *\/\r\n.story{ position: relative; height: 260vh; background: linear-gradient(180deg, var(--surface-2), var(--bg)); }\r\n.story__pin{ position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column;\r\n align-items: center; justify-content: center; text-align: center; gap: 1.4rem; overflow: hidden; }\r\n.story__eyebrow{ font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }\r\n.story__lines{ display: flex; flex-direction: column; gap: .2rem; }\r\n.story__line{ font-family: var(--serif); font-weight: 300; color: var(--ink);\r\n font-size: clamp(2.2rem, 8vw, 5.5rem); line-height: 1.02; opacity: .12; transform: translateY(.3em);\r\n transition: opacity .5s var(--ease), transform .5s var(--ease); }\r\n.story__line.is-lit{ opacity: 1; transform: none; }\r\n.story__bar{ position: absolute; bottom: 12vh; width: min(260px, 60vw); height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }\r\n.story__bar span{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }\r\n\r\n\/* 3D fly-through of the five houses *\/\r\n.fly{ position: relative; height: 460vh; background: radial-gradient(80% 60% at 50% 30%, #241c12, var(--espresso)); }\r\n.fly__pin{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 900px; }\r\n.fly__head{ position: absolute; top: clamp(5rem, 12vh, 8rem); left: var(--gutter); right: var(--gutter); z-index: 6; }\r\n.fly__head .eyebrow{ color: var(--accent-soft); }\r\n.fly__title{ font-family: var(--serif); font-weight: 300; color: var(--stone);\r\n font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.02; margin-top: .3rem; }\r\n.fly__space{ position: absolute; inset: 0; transform-style: preserve-3d; }\r\n.fly__panel{\r\n position: absolute; left: 50%; top: 50%; width: min(560px, 82vw);\r\n transform: translate(-50%, -50%) translateZ(calc(var(--i) * -900px - 900px));\r\n padding: clamp(1.8rem, 4vw, 3rem); border-radius: 26px; text-align: left;\r\n background: linear-gradient(155deg, rgba(201,162,75,.16), rgba(20,16,12,.55));\r\n border: 1px solid var(--line-strong); backdrop-filter: blur(6px);\r\n box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); will-change: opacity;\r\n}\r\n.fly__panel .fly__no{ font-family: var(--serif); font-style: italic; color: var(--gold-soft); font-size: 1.4rem; }\r\n.fly__panel h3{ font-family: var(--serif); font-weight: 400; color: var(--stone); font-size: clamp(1.8rem, 4vw, 2.8rem); margin: .3rem 0 .5rem; }\r\n.fly__panel p{ color: var(--stone-soft); font-size: 1.02rem; }\r\n.fly__hint{ position: absolute; bottom: 8vh; left: 0; right: 0; text-align: center; z-index: 6;\r\n font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stone-dim); }\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n .story{ height: auto; } .story__pin{ position: static; height: auto; padding: 5rem 0; }\r\n .story__line{ opacity: 1; transform: none; }\r\n .fly{ height: auto; } .fly__pin{ position: static; height: auto; padding: 5rem 0; perspective: none; min-height: auto; }\r\n .fly__space{ position: static; transform: none !important; }\r\n .fly__panel{ position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; width: auto; max-width: 640px; margin: 1rem auto; }\r\n .fly__head{ position: static; margin-bottom: 1.5rem; }\r\n .fly__hint{ display: none; }\r\n .word{ opacity: 1 !important; transform: none !important; }\r\n [data-tilt]{ transform: none !important; }\r\n}\r\n\r\n<\/style>\r\n\r\n \r\n <script type=\"importmap\">\r\n {\r\n \"imports\": {\r\n \"three\": \"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/vendor\/three.module.min.js\"\r\n }\r\n }\r\n <\/script>\r\n\r\n \r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"LodgingBusiness\",\r\n \"name\": \"Do Step Inn Home \u2014 Hotel & Hostel\",\r\n \"description\": \"A calm, well-connected home base in Vienna. Private rooms and dorms opposite Westbahnhof, one block from Mariahilfer Stra\u00dfe. Self check-in, rooms for every budget.\",\r\n \"slogan\": \"Feel at home. Step into Vienna.\",\r\n \"address\": {\r\n \"@type\": \"PostalAddress\",\r\n \"streetAddress\": \"Felberstra\u00dfe 20\",\r\n \"addressLocality\": \"Vienna\",\r\n \"postalCode\": \"1150\",\r\n \"addressCountry\": \"AT\"\r\n },\r\n \"amenityFeature\": [\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Free WiFi\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Self check-in\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Guest kitchen\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Luggage storage\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Garden courtyard\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Parking\", \"value\": true }\r\n ],\r\n \"checkinTime\": \"15:00\",\r\n \"checkoutTime\": \"11:00\",\r\n \"petsAllowed\": \"Please contact the hotel team for confirmation.\",\r\n \"publicAccess\": true,\r\n \"nearbyAttractions\": [\"Westbahnhof\", \"Mariahilfer Stra\u00dfe\", \"Stephansdom\", \"Belvedere Palace\"]\r\n }\r\n <\/script>\r\n <style>\r\n \/* Full-bleed fit for Elementor: break out of the column to full viewport width *\/\r\n #top{ width: 100vw; margin-left: calc(50% - 50vw); }\r\n .bookbar{ width: 100vw; margin-left: calc(50% - 50vw); }\r\n \/* No built-in fixed header in this build \u2014 reclaim the hero's top space *\/\r\n .hero{ padding-top: clamp(3rem, 8vh, 6rem); }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <a class=\"skip-link\" href=\"#chapter-rooms\">Skip to rooms & booking<\/a>\r\n\r\n \r\n <div class=\"grain\" aria-hidden=\"true\"><\/div>\r\n <div class=\"scrollbar\" id=\"scrollbar\" aria-hidden=\"true\"><\/div>\r\n\r\n <main id=\"top\">\r\n\r\n \r\n <section class=\"hero\" id=\"chapter-arrival\" data-chapter aria-label=\"Arrival\">\r\n \r\n <div class=\"hero__scene\" id=\"scene-mount\" aria-hidden=\"true\"><\/div>\r\n <div class=\"hero__fallback\" data-parallax=\"0.25\" aria-hidden=\"true\"><\/div>\r\n <div class=\"hero__veil\" aria-hidden=\"true\"><\/div>\r\n\r\n <div class=\"hero__inner\" data-parallax=\"0.08\">\r\n <p class=\"eyebrow reveal\" data-reveal>Vienna \u00b7 1150 \u00b7 opposite Westbahnhof<\/p>\r\n <h1 class=\"hero__title\">\r\n <span class=\"reveal\" data-reveal>Feel at home.<\/span>\r\n <span class=\"reveal hero__title--gold\" data-reveal data-delay=\"1\">Step into Vienna.<\/span>\r\n <\/h1>\r\n <p class=\"hero__lede reveal\" data-reveal data-delay=\"2\">\r\n Off the train, up the step, and you\u2019re home. Your calm base in the middle of\r\n everything \u2014 rooms for every budget, the whole city at your door.\r\n <\/p>\r\n <div class=\"hero__actions reveal\" data-reveal data-delay=\"3\">\r\n <button class=\"btn btn--gold\" data-open-booking type=\"button\">Start your stay<\/button>\r\n <button class=\"btn btn--ghost\" data-open-concierge=\"vienna\" type=\"button\">\r\n <span class=\"btn__orb\" aria-hidden=\"true\"><\/span> Ask your concierge\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero__scroll reveal\" data-reveal data-delay=\"4\" aria-hidden=\"true\">\r\n <span>Scroll to arrive<\/span>\r\n <span class=\"hero__scroll-line\"><\/span>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"bookbar\" id=\"book-top\" aria-label=\"Check availability\">\r\n <div class=\"bookbar__inner\">\r\n <p class=\"bookbar__title\">Check availability & book direct<\/p>\r\n <div class=\"ibe-wrap\"><ibe-up ibe-key=\"35b41b51-d117-4319-8ccd-11eafa2a07bc\" language=\"en\"><\/ibe-up><\/div>\r\n <p class=\"bookbar__note\">Best rate direct \u00b7 free cancellation options \u00b7 instant confirmation<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section base\" id=\"chapter-base\" data-chapter data-mood=\"warm\" aria-label=\"Your home base\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter II \u00b7 Your home base<\/p>\r\n <h2 class=\"section__title\" data-reveal>\r\n Drop your bag.<br \/><span class=\"ital\">Breathe.<\/span>\r\n <\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Not a party hostel. Not a faceless budget hotel. A warm, easy place to land \u2014\r\n with a kitchen to cook in, a courtyard to slow down in, and your own quiet corner\r\n whenever you want it.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"base__grid\" role=\"list\">\r\n <li class=\"base-card base-card--tall\" data-reveal>\r\n <div class=\"base-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><path d=\"M8 34V12l12-7 12 7v22M16 34V24h8v10\" stroke=\"currentColor\" stroke-width=\"1.4\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <h3>A calm home base<\/h3>\r\n <p>Private singles, doubles, triples and quads \u2014 or a bed in a bright dorm. Every room its own bathroom, linen and fast WiFi. Your space, your budget.<\/p>\r\n <\/li>\r\n <li class=\"base-card base-card--photo base-card--kitchen\" data-reveal>\r\n <div class=\"base-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><path d=\"M6 30h28M10 30V16h20v14M14 16v-4h12v4M17 22h6\" stroke=\"currentColor\" stroke-width=\"1.4\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <h3>Guest kitchen<\/h3>\r\n <p>Cook like a local, share a table, save your euros for the city.<\/p>\r\n <\/li>\r\n <li class=\"base-card base-card--photo base-card--courtyard\" data-reveal>\r\n <div class=\"base-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><path d=\"M20 6C13 12 10 17 10 23a10 10 0 0 0 20 0c0-6-3-11-10-17Z\" stroke=\"currentColor\" stroke-width=\"1.4\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <h3>Garden courtyard<\/h3>\r\n <p>A quiet outdoor corner to catch your breath between adventures.<\/p>\r\n <\/li>\r\n <li class=\"base-card base-card--photo\" data-reveal>\r\n <div class=\"base-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><circle cx=\"20\" cy=\"20\" r=\"13\" stroke=\"currentColor\" stroke-width=\"1.4\" fill=\"none\"\/><path d=\"M20 7v26M7 20h26\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><\/svg>\r\n <\/div>\r\n <h3>House bar & coffee<\/h3>\r\n <p>A proper coffee in the morning, billiards, darts and a small bar for easy evenings in.<\/p>\r\n <\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n \r\n <section class=\"hgallery\" id=\"chapter-gallery\" data-chapter aria-label=\"A look inside\">\r\n <div class=\"hgallery__pin\">\r\n <div class=\"hgallery__head\">\r\n <p class=\"eyebrow\">A look inside<\/p>\r\n <h2 class=\"hgallery__title\">Warm, colourful, <span class=\"ital\">unmistakably ours.<\/span><\/h2>\r\n <p class=\"hgallery__hint\" aria-hidden=\"true\">Keep scrolling \u2192<\/p>\r\n <\/div>\r\n <div class=\"hgallery__track\" id=\"hgtrack\">\r\n <figure class=\"hg-item\" data-label=\"Wiener Espresso\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06286.jpg\" alt=\"An espresso pouring into an Original Wiener cup\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"An easy evening in\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_DSC8180.jpg\" alt=\"A couple with wine in a brick-walled room\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Breakfast buffet\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9695_Lightroom.JPG\" alt=\"Fresh bread and gugelhupf at the breakfast buffet\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"The house bar\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0217_Lightroom.jpg\" alt=\"The house bar with vintage signs and glasses\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"A proper coffee\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06272.jpg\" alt=\"A milky Viennese coffee\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Arrival\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_DSC8075.jpg\" alt=\"A couple arriving in their room with luggage\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Breakfast room\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0229_Lightroom.jpg\" alt=\"Colourful breakfast room with brick walls\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Fresh juice\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9717_Lightroom.JPG\" alt=\"Fresh orange juice at the breakfast buffet\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Your floor\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0170_Lightroom.jpg\" alt=\"Bright hallway to the rooms\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"A glass of red\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06192.jpg\" alt=\"Red wine poured at the house bar\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Festive courtyard\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06332.jpg\" alt=\"Christmas tree in the courtyard at night\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Bright dorms\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_DSC7942.jpg\" alt=\"A guest on a bunk bed in a bright dorm\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Cereals & fruit\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9667_Lightroom.JPG\" alt=\"Cereals and fresh fruit\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Guest kitchen\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0231_Lightroom.jpg\" alt=\"The stainless-steel guest kitchen\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Brick & stairs\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0165_Lightroom.jpg\" alt=\"The brick staircase\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Time to unwind\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_DSC8167.jpg\" alt=\"A couple relaxing with wine\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Fresh bread\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9713_Lightroom.JPG\" alt=\"Slicing fresh bread at breakfast\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Make friends\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06383.jpg\" alt=\"Two guests chatting on a dorm bed\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Fresh fruit\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9702_Lightroom.JPG\" alt=\"A basket of fresh fruit\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Kitchen & lounge\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0232_Lightroom.jpg\" alt=\"Guest kitchen and lounge\" loading=\"lazy\" \/><\/figure>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"story\" id=\"chapter-story\" aria-label=\"Your arrival\">\r\n <div class=\"story__pin\">\r\n <p class=\"story__eyebrow\">Feel at home<\/p>\r\n <div class=\"story__lines\">\r\n <p class=\"story__line\" data-step=\"0\">Off the train.<\/p>\r\n <p class=\"story__line\" data-step=\"1\">Up the step.<\/p>\r\n <p class=\"story__line\" data-step=\"2\"><span class=\"ital\">You\u2019re home.<\/span><\/p>\r\n <\/div>\r\n <div class=\"story__bar\" aria-hidden=\"true\"><span id=\"story-fill\"><\/span><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section rooms\" id=\"chapter-rooms\" data-chapter data-mood=\"warm\" aria-label=\"Rooms made simple\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter III \u00b7 Rooms made simple<\/p>\r\n <h2 class=\"section__title\" data-reveal>Choose by how you travel.<\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n No confusing grid of tiles. Tell us who\u2019s arriving \u2014 we\u2019ll show you where you\u2019ll feel at home.\r\n Honest prices, every budget under one roof.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"rooms__tabs\" role=\"tablist\" aria-label=\"Who's arriving\">\r\n <button role=\"tab\" class=\"rooms__tab is-active\" data-room-tab=\"solo\" aria-selected=\"true\">Solo<\/button>\r\n <button role=\"tab\" class=\"rooms__tab\" data-room-tab=\"couple\" aria-selected=\"false\">Couple<\/button>\r\n <button role=\"tab\" class=\"rooms__tab\" data-room-tab=\"friends\" aria-selected=\"false\">Friends<\/button>\r\n <button role=\"tab\" class=\"rooms__tab\" data-room-tab=\"family\" aria-selected=\"false\">Family<\/button>\r\n <button role=\"tab\" class=\"rooms__tab\" data-room-tab=\"budget\" aria-selected=\"false\">Best value<\/button>\r\n <\/div>\r\n\r\n <div class=\"rooms__stage\" data-reveal>\r\n <div class=\"rooms__panel is-active\" data-room-panel=\"solo\">\r\n <div class=\"rooms__art\" data-art=\"single\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>The Single<\/h3>\r\n <p>Your own quiet room and private bathroom, one block from the city\u2019s biggest street. Perfect for a focused solo trip.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>Private bathroom<\/li><li>Sat-TV & fast WiFi<\/li><li>Self check-in<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rooms__panel\" data-room-panel=\"couple\" hidden>\r\n <div class=\"rooms__art\" data-art=\"double\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>The Double \/ Twin<\/h3>\r\n <p>A warm private room for two \u2014 double or twin beds, your own bathroom, soft morning light. City evenings, quiet nights.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>Double or twin<\/li><li>Private bathroom<\/li><li>Sat-TV & WiFi<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rooms__panel\" data-room-panel=\"friends\" hidden>\r\n <div class=\"rooms__art\" data-art=\"triple\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>Triple & Quad<\/h3>\r\n <p>Travelling as a crew? Private rooms for three or four, own bathroom, room to spread out \u2014 without splitting up.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>3\u20134 beds, private<\/li><li>Private bathroom<\/li><li>Lockers & WiFi<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rooms__panel\" data-room-panel=\"family\" hidden>\r\n <div class=\"rooms__art\" data-art=\"quad\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>Family Room<\/h3>\r\n <p>Keep everyone together in a private quad with its own bathroom \u2014 steps from trams, trains and the shopping street.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>Up to 4 together<\/li><li>Private bathroom<\/li><li>Kitchen access<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rooms__panel\" data-room-panel=\"budget\" hidden>\r\n <div class=\"rooms__art\" data-art=\"dorm\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>Bright Dorm Bed<\/h3>\r\n <p>The smartest way to stay central. A bed in a clean, bright dorm \u2014 private bathroom, fresh linen, a locker of your own.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>Private bathroom<\/li><li>Linen & towel included<\/li><li>Personal locker<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section concierge-intro\" id=\"chapter-concierge\" data-chapter aria-label=\"Your concierge and assistant\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter IV & V \u00b7 Two guides, one tap<\/p>\r\n <h2 class=\"section__title\" data-reveal>Never wonder what\u2019s next.<\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Two calm minds travel with you. One knows Vienna. One knows your stay.\r\n Ask either, any time \u2014 day or night.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"guides\">\r\n <article class=\"guide-card guide-card--vienna\" data-reveal>\r\n <span class=\"guide-card__tag\">Explore Vienna<\/span>\r\n <h3>Vienna Concierge<\/h3>\r\n <p>Your stylish local guide. First-day plans, rainy-day ideas, coffee nearby, free things to do, a romantic evening \u2014 it maps them out for you.<\/p>\r\n <ul class=\"guide-card__prompts\" role=\"list\">\r\n <li><button data-open-concierge=\"vienna\" data-prompt=\"Plan my first day in Vienna\" type=\"button\">Plan my first day<\/button><\/li>\r\n <li><button data-open-concierge=\"vienna\" data-prompt=\"What can I do on a rainy day?\" type=\"button\">Rainy-day ideas<\/button><\/li>\r\n <li><button data-open-concierge=\"vienna\" data-prompt=\"Best free things to do near the hotel\" type=\"button\">Best free things<\/button><\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-concierge=\"vienna\" type=\"button\">Ask Vienna Concierge<\/button>\r\n <\/article>\r\n\r\n <article class=\"guide-card guide-card--home\" data-reveal>\r\n <span class=\"guide-card__tag\">Your stay<\/span>\r\n <h3>Home Assistant<\/h3>\r\n <p>Everything about your stay, answered calmly. Self check-in, late arrival, luggage, getting here, what\u2019s included \u2014 no waiting on a front desk.<\/p>\r\n <ul class=\"guide-card__prompts\" role=\"list\">\r\n <li><button data-open-concierge=\"home\" data-prompt=\"How does self check-in work?\" type=\"button\">How does self check-in work?<\/button><\/li>\r\n <li><button data-open-concierge=\"home\" data-prompt=\"I arrive late \u2014 what now?\" type=\"button\">I arrive late<\/button><\/li>\r\n <li><button data-open-concierge=\"home\" data-prompt=\"Can I store my luggage?\" type=\"button\">Store my luggage<\/button><\/li>\r\n <\/ul>\r\n <button class=\"btn btn--ghost btn--sm\" data-open-concierge=\"home\" type=\"button\">Ask Home Assistant<\/button>\r\n <\/article>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section explore\" id=\"chapter-explore\" data-chapter aria-label=\"Explore Vienna\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter VI \u00b7 From your door<\/p>\r\n <h2 class=\"section__title\" data-reveal>Vienna starts on the doorstep.<\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Opposite Westbahnhof, one block off Mariahilfer Stra\u00dfe. Trams, trains and the\r\n airport bus are a two-minute walk. Here\u2019s the city, measured from your bed.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"explore__list\" role=\"list\">\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Westbahnhof station<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>4 min<\/b> walk \u00b7 U3 \u00b7 U6<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Mariahilfer Stra\u00dfe shopping<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>1 block<\/b> \u00b7 ~6 min walk<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Stephansdom & old town<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>~10 min<\/b> by U3<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Sch\u00f6nbrunn Palace<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>~8 min<\/b> by U-Bahn<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Belvedere Palace<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>~15 min<\/b> by transit<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Vienna Airport<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>direct<\/b> airport bus & CAT<\/span>\r\n <\/li>\r\n <\/ul>\r\n\r\n <p class=\"explore__cta\" data-reveal>\r\n Want it planned for you?\r\n <button class=\"link-gold\" data-open-concierge=\"vienna\" data-prompt=\"Plan my first 24 hours in Vienna from the hotel\" type=\"button\">Ask the Vienna Concierge to plan your first 24 hours \u2192<\/button>\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"fly\" id=\"chapter-family\" aria-label=\"Our five houses in Vienna\">\r\n <div class=\"fly__pin\">\r\n <div class=\"fly__head\">\r\n <p class=\"eyebrow\">Our houses in Vienna<\/p>\r\n <h2 class=\"fly__title\">One family.<br \/><span class=\"ital\">Five ways to stay.<\/span><\/h2>\r\n <\/div>\r\n <div class=\"fly__space\" id=\"flyspace\">\r\n <article class=\"fly__panel\" style=\"--i:0\"><span class=\"fly__no\">01<\/span><h3>Do Step Inn Home<\/h3><p>Felberstra\u00dfe 20 \u00b7 1150 \u00b7 opposite Westbahnhof<\/p><\/article>\r\n <article class=\"fly__panel\" style=\"--i:1\"><span class=\"fly__no\">02<\/span><h3>Be Free Hostel<\/h3><p>Beingasse 13 \u00b7 1150 \u00b7 near Westbahnhof<\/p><\/article>\r\n <article class=\"fly__panel\" style=\"--i:2\"><span class=\"fly__no\">03<\/span><h3>Do Step Inn Central<\/h3><p>S\u00fcdtiroler Platz 3 \u00b7 1040 \u00b7 at Hauptbahnhof<\/p><\/article>\r\n <article class=\"fly__panel\" style=\"--i:3\"><span class=\"fly__no\">04<\/span><h3>Do Step Inn Living<\/h3><p>S\u00fcdtiroler Platz 3 \u00b7 1040 \u00b7 at Hauptbahnhof<\/p><\/article>\r\n <article class=\"fly__panel\" style=\"--i:4\"><span class=\"fly__no\">05<\/span><h3>Innsider<\/h3><p>Wurmbstra\u00dfe 20 \u00b7 Wien<\/p><\/article>\r\n <\/div>\r\n <p class=\"fly__hint\" aria-hidden=\"true\">Scroll to fly through \u2193<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section locations\" id=\"chapter-locations\" data-chapter aria-label=\"Our Vienna locations\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Find your way<\/p>\r\n <h2 class=\"section__title\" data-reveal>All central,<br \/><span class=\"ital\">all well connected.<\/span><\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Pick a pin for live directions in Google Maps \u2014 every house is minutes from a\r\n station and the middle of Vienna.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"loc__layout\">\r\n \r\n <div class=\"loc__map\" data-reveal>\r\n <iframe title=\"Do Step Inn on Google Maps\" loading=\"lazy\" allowfullscreen\r\n referrerpolicy=\"no-referrer-when-downgrade\"\r\n src=\"https:\/\/maps.google.com\/maps?q=Felberstra%C3%9Fe%2020,%201150%20Wien&z=13&output=embed\"><\/iframe>\r\n <\/div>\r\n\r\n \r\n <ul class=\"loc__list\" role=\"list\">\r\n <li><div class=\"loc-card is-home\" data-loccard=\"home\" data-lat=\"48.19685\" data-lng=\"16.33472\" data-reveal>\r\n <span class=\"loc-card__no\">1<\/span>\r\n <span class=\"loc-card__body\"><b>Do Step Inn Home<\/b><span>Felberstra\u00dfe 20 \u00b7 1150 \u00b7 opposite Westbahnhof<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/www.dostepinn.com\/home\/\" target=\"_blank\" rel=\"noopener\">Website <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=Felberstra%C3%9Fe%2020%2C%201150%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <li><div class=\"loc-card\" data-loccard=\"befree\" data-lat=\"48.19431\" data-lng=\"16.33262\" data-reveal>\r\n <span class=\"loc-card__no\">2<\/span>\r\n <span class=\"loc-card__body\"><b>Be Free Hostel<\/b><span>Beingasse 13 \u00b7 1150 \u00b7 near Westbahnhof<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/www.google.com\/search?q=befree+hostel\" target=\"_blank\" rel=\"noopener\">Website <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=Beingasse%2013%2C%201150%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <li><div class=\"loc-card\" data-loccard=\"central\" data-lat=\"48.18533\" data-lng=\"16.37490\" data-reveal>\r\n <span class=\"loc-card__no\">3<\/span>\r\n <span class=\"loc-card__body\"><b>Do Step Inn Central<\/b><span>S\u00fcdtiroler Platz 3 \u00b7 1040 \u00b7 at Hauptbahnhof<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/www.dostepinn.com\/central-hostel\/\" target=\"_blank\" rel=\"noopener\">Website <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=S%C3%BCdtiroler%20Platz%203%2C%201040%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <li><div class=\"loc-card\" data-loccard=\"living\" data-lat=\"48.18548\" data-lng=\"16.37525\" data-reveal>\r\n <span class=\"loc-card__no\">4<\/span>\r\n <span class=\"loc-card__body\"><b>Do Step Inn Living<\/b><span>S\u00fcdtiroler Platz 3 \u00b7 1040 \u00b7 at Hauptbahnhof<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/dostepinn-living.at\/#\/booking\/search\" target=\"_blank\" rel=\"noopener\">Book <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=S%C3%BCdtiroler%20Platz%203%2C%201040%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <li><div class=\"loc-card\" data-loccard=\"innsider\" data-lat=\"48.19050\" data-lng=\"16.33230\" data-reveal>\r\n <span class=\"loc-card__no\">5<\/span>\r\n <span class=\"loc-card__body\"><b>Innsider<\/b><span>Wurmbstra\u00dfe 20 \u00b7 Wien \u00b7 bar & restaurant<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/innsider-restaurant.at\/\" target=\"_blank\" rel=\"noopener\">Restaurant <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=Wurmbstra%C3%9Fe%2020%2C%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section easy\" id=\"chapter-easy\" data-chapter data-mood=\"warm\" aria-label=\"An easy stay\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter VII \u00b7 An easy stay<\/p>\r\n <h2 class=\"section__title\" data-reveal>Arrive on your own time.<\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n No queue, no stress. Self check-in, a late-arrival path, and a place for your bags\r\n before check-in or after you leave. Simple, by design.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"easy__grid\">\r\n <article class=\"easy-card\" data-reveal>\r\n <span class=\"easy-card__num\">15:00<\/span>\r\n <h3>Self check-in<\/h3>\r\n <p>Contactless arrival \u2014 collect your access and settle in on your schedule. Late arrival possible until midnight.<\/p>\r\n <\/article>\r\n <article class=\"easy-card\" data-reveal>\r\n <span class=\"easy-card__num\">11:00<\/span>\r\n <h3>Easy check-out<\/h3>\r\n <p>Quick and contactless. Store your bags in the access-card luggage room and keep exploring.<\/p>\r\n <\/article>\r\n <article class=\"easy-card\" data-reveal>\r\n <span class=\"easy-card__num\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\" width=\"30\" height=\"30\"><path d=\"M6 14h28l-2 20H8L6 14ZM14 14v-3a6 6 0 0 1 12 0v3\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/span>\r\n <h3>Luggage & more<\/h3>\r\n <p>Secure luggage room, free WiFi throughout, parking, and bikes to borrow. Breakfast buffet available each morning.<\/p>\r\n <\/article>\r\n <\/div>\r\n\r\n <p class=\"easy__note\" data-reveal>\r\n Exact policies?\r\n <button class=\"link-gold\" data-open-concierge=\"home\" data-prompt=\"What are your house rules and cancellation policy?\" type=\"button\">Ask the Home Assistant \u2192<\/button>\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"section groups\" id=\"chapter-groups\" data-chapter aria-label=\"Group reservations and partnerships\">\r\n <div class=\"groups__glow\" aria-hidden=\"true\"><\/div>\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Groups & partnerships<\/p>\r\n <h2 class=\"section__title\" data-reveal>Travelling as a group?<br \/><span class=\"ital\">Let\u2019s make it easy.<\/span><\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Sports teams, school trips, tour groups and long stays \u2014 plus tourism & business\r\n partners. One contact for calm bookings across all our Vienna houses.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"groups__layout\">\r\n \r\n <form class=\"group-form\" id=\"group-form\" data-reveal novalidate>\r\n <h3>Group booking request <span>\u00b7 from 10 people<\/span><\/h3>\r\n <p class=\"group-form__sub\">Sports teams, school trips, tour groups & long stays. Tell us what you need \u2014 you\u2019ll receive a tailored offer.<\/p>\r\n\r\n <div class=\"group-form__grid\">\r\n <label>Your name<input name=\"name\" type=\"text\" autocomplete=\"name\" required \/><\/label>\r\n <label>Email<input name=\"email\" type=\"email\" autocomplete=\"email\" required \/><\/label>\r\n <label>Organisation \/ school <span class=\"opt\">(optional)<\/span><input name=\"org\" type=\"text\" \/><\/label>\r\n <label>Phone <span class=\"opt\">(optional)<\/span><input name=\"phone\" type=\"tel\" autocomplete=\"tel\" \/><\/label>\r\n <label>Check-in<input name=\"checkin\" type=\"date\" \/><\/label>\r\n <label>Check-out<input name=\"checkout\" type=\"date\" \/><\/label>\r\n <label>Number of people<input name=\"people\" type=\"number\" min=\"10\" inputmode=\"numeric\" placeholder=\"e.g. 20\" required \/><\/label>\r\n <label>Gender split <span class=\"opt\">(optional)<\/span><input name=\"genders\" type=\"text\" placeholder=\"e.g. 12 female \u00b7 8 male\" \/><\/label>\r\n <\/div>\r\n\r\n <fieldset class=\"group-form__field\">\r\n <legend>Preferred room split<\/legend>\r\n <label class=\"chk\"><input type=\"checkbox\" name=\"rooms\" value=\"Private singles\" \/><span>Private singles<\/span><\/label>\r\n <label class=\"chk\"><input type=\"checkbox\" name=\"rooms\" value=\"Doubles \/ twins\" \/><span>Doubles \/ twins<\/span><\/label>\r\n <label class=\"chk\"><input type=\"checkbox\" name=\"rooms\" value=\"Triples \/ quads\" \/><span>Triples \/ quads<\/span><\/label>\r\n <label class=\"chk\"><input type=\"checkbox\" name=\"rooms\" value=\"Dorm beds\" \/><span>Dorm beds<\/span><\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"group-form__field\">\r\n <legend>Board<\/legend>\r\n <label class=\"chk\"><input type=\"radio\" name=\"board\" value=\"Room only\" checked \/><span>Room only<\/span><\/label>\r\n <label class=\"chk\"><input type=\"radio\" name=\"board\" value=\"With breakfast\" \/><span>With breakfast<\/span><\/label>\r\n <label class=\"chk\"><input type=\"radio\" name=\"board\" value=\"Half-board\" \/><span>Half-board<\/span><\/label>\r\n <\/fieldset>\r\n\r\n <label class=\"group-form__full\">Anything else? <span class=\"opt\">(optional)<\/span>\r\n <textarea name=\"message\" rows=\"3\" placeholder=\"Flexible dates? Budget per person? Arrival time, special wishes\u2026\"><\/textarea>\r\n <\/label>\r\n\r\n <button class=\"btn btn--gold\" type=\"submit\">Send request<\/button>\r\n <p class=\"group-form__ok\" id=\"group-ok\" role=\"status\" hidden>Thank you \u2014 your request is on its way. <b>You\u2019ll receive an offer soon.<\/b> \u2726<\/p>\r\n <\/form>\r\n\r\n \r\n <aside class=\"group-side\">\r\n <a class=\"group-card group-card--partner\" href=\"mailto:reservierung@dostepinn.at?subject=Partnership%20enquiry&body=Hi%20Do%20Step%20Inn%20team%2C%0A%0AWe%27d%20like%20to%20explore%20a%20cooperation.%0A%0ACompany%2Forganisation%3A%0AType%20of%20partnership%3A%0AWebsite%3A%0A%0AThanks%21\" data-reveal>\r\n <div class=\"group-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><path d=\"M14 20l5 5 8-9\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"20\" cy=\"20\" r=\"14\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\/><\/svg>\r\n <\/div>\r\n <h3>Cooperation partners<\/h3>\r\n <p>Agencies, tour operators, companies, universities and long-stay partners. Let\u2019s set up a lasting collaboration.<\/p>\r\n <span class=\"group-card__cta\">Become a partner <span aria-hidden=\"true\">\u2192<\/span><\/span>\r\n <\/a>\r\n <p class=\"groups__mail\" data-reveal>\r\n Prefer to write directly?<br \/><a class=\"link-gold\" href=\"mailto:reservierung@dostepinn.at\">reservierung@dostepinn.at<\/a>\r\n <\/p>\r\n <\/aside>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section book\" id=\"chapter-book\" data-chapter aria-label=\"Book your stay\">\r\n <div class=\"book__inner\" data-reveal>\r\n <p class=\"eyebrow\">Chapter VIII \u00b7 Book your stay<\/p>\r\n <h2 class=\"book__title\">Your step into Vienna<br \/><span class=\"ital\">starts here.<\/span><\/h2>\r\n <p class=\"book__lede\">Rooms for every budget, in the middle of everything. Take the step \u2014 your calm home base is waiting.<\/p>\r\n <div class=\"ibe-wrap ibe-wrap--book\"><ibe-up ibe-key=\"35b41b51-d117-4319-8ccd-11eafa2a07bc\" language=\"en\"><\/ibe-up><\/div>\r\n <p class=\"book__reassure\">Best rate direct \u00b7 Free cancellation options \u00b7 Instant confirmation<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n \r\n <div class=\"stickybar\" id=\"stickybar\" aria-hidden=\"true\">\r\n <span class=\"stickybar__label\">Rooms for every budget \u00b7 from your calm base in Vienna<\/span>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check availability<\/button>\r\n <\/div>\r\n\r\n \r\n <button class=\"fab\" id=\"fab\" data-open-concierge=\"vienna\" type=\"button\" aria-label=\"Ask your concierge\">\r\n <span class=\"fab__orb\" aria-hidden=\"true\"><\/span>\r\n <span class=\"fab__label\">Ask your concierge<\/span>\r\n <\/button>\r\n\r\n \r\n <div class=\"modal\" id=\"booking\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Check availability\" hidden>\r\n <div class=\"modal__backdrop\" data-close-booking><\/div>\r\n <div class=\"modal__card booking-card\" role=\"document\">\r\n <button class=\"modal__close\" data-close-booking aria-label=\"Close\">×<\/button>\r\n <p class=\"eyebrow\">Check availability<\/p>\r\n <h2 class=\"booking-card__title\">Find your room<\/h2>\r\n <form class=\"booking-form\" id=\"booking-form\">\r\n <label>Check-in<input type=\"date\" name=\"checkin\" required \/><\/label>\r\n <label>Check-out<input type=\"date\" name=\"checkout\" required \/><\/label>\r\n <label>Guests\r\n <select name=\"guests\">\r\n <option>1 guest<\/option><option>2 guests<\/option><option>3 guests<\/option>\r\n <option>4 guests<\/option><option>5+ guests<\/option>\r\n <\/select>\r\n <\/label>\r\n <button class=\"btn btn--gold\" type=\"submit\">Search rooms<\/button>\r\n <\/form>\r\n <p class=\"booking-card__note\">You\u2019ll continue to our secure booking engine for live prices and instant confirmation.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"chat\" id=\"chat\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Concierge chat\" hidden>\r\n <div class=\"modal__backdrop\" data-close-chat><\/div>\r\n <div class=\"chat__panel\">\r\n <div class=\"chat__header\">\r\n <div class=\"chat__switch\" role=\"tablist\" aria-label=\"Choose a guide\">\r\n <button role=\"tab\" class=\"chat__mode is-active\" data-mode=\"vienna\" aria-selected=\"true\">\r\n <span class=\"chat__mode-dot\"><\/span> Vienna Concierge\r\n <\/button>\r\n <button role=\"tab\" class=\"chat__mode\" data-mode=\"home\" aria-selected=\"false\">\r\n <span class=\"chat__mode-dot\"><\/span> Home Assistant\r\n <\/button>\r\n <\/div>\r\n <button class=\"chat__close\" data-close-chat aria-label=\"Close chat\">×<\/button>\r\n <\/div>\r\n\r\n <div class=\"chat__body\" id=\"chat-body\" aria-live=\"polite\"><\/div>\r\n\r\n <div class=\"chat__prompts\" id=\"chat-prompts\"><\/div>\r\n\r\n <form class=\"chat__input\" id=\"chat-form\">\r\n <input type=\"text\" id=\"chat-text\" autocomplete=\"off\"\r\n placeholder=\"Ask anything\u2026\" aria-label=\"Type your question\" \/>\r\n <button type=\"submit\" aria-label=\"Send\">\r\n <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path d=\"M4 12l16-8-6 8 6 8-16-8Z\" fill=\"currentColor\"\/><\/svg>\r\n <\/button>\r\n <\/form>\r\n <p class=\"chat__disclaimer\" id=\"chat-disclaimer\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <link href=\"https:\/\/ibe.uphotel.agency\/ibe.min.css\" rel=\"stylesheet\" \/>\r\n <script type=\"text\/javascript\" src=\"https:\/\/ibe.uphotel.agency\/ibe.min.js\"><\/script>\r\n\r\n \r\n <script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CONCIERGE ENGINE \u2014 two guardrailed minds\r\n \u00b7 Vienna Concierge \u2192 local city guide (general suggestions, map pins)\r\n \u00b7 Home Assistant \u2192 hotel facts only; never invents policy\r\n Rule-based & offline: honest by construction. No hallucinated data.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n(function () {\r\n \"use strict\";\r\n\r\n const CONTACT = \"Please contact the hotel team for confirmation.\";\r\n const BOOKING = 'For live prices, availability and booking, use <a href=\"#\" data-open-booking>Check availability<\/a>.';\r\n\r\n \/* \u2500\u2500 Verified hotel facts (single source of truth for the Assistant) \u2500\u2500 *\/\r\n const HOME = [\r\n { k: [\"self check\", \"checkin\", \"check-in\", \"check in\", \"arrive\", \"key\", \"access\"], a:\r\n \"<strong>Self check-in<\/strong> keeps arrival stress-free. Check-in opens at <strong>15:00<\/strong> and you can arrive contactlessly \u2014 you\u2019ll receive your access details for the door and your room. Late arrival is possible <strong>until midnight<\/strong>. If you\u2019ll arrive after midnight, \" + CONTACT.toLowerCase() },\r\n { k: [\"late\", \"midnight\", \"after hours\", \"night arrival\"], a:\r\n \"Arriving late is fine \u2014 <strong>self check-in works up to midnight<\/strong>. You won\u2019t need anyone at a desk. Arriving after midnight? \" + CONTACT },\r\n { k: [\"check-out\", \"checkout\", \"check out\", \"leave\", \"leaving\"], a:\r\n \"<strong>Check-out is 11:00<\/strong>, quick and contactless. Leaving later in the day? Drop your bags in our secure luggage room and keep exploring.\" },\r\n { k: [\"luggage\", \"bag\", \"store\", \"storage\", \"suitcase\"], a:\r\n \"Yes \u2014 there\u2019s a <strong>secure luggage room<\/strong> with card access, so you can store bags before check-in or after check-out and head straight into the city. (Bags stored long-term may need the access card renewed.)\" },\r\n { k: [\"wifi\", \"wi-fi\", \"internet\", \"wlan\"], a:\r\n \"<strong>Free WiFi<\/strong> is available throughout the building \u2014 rooms and common areas.\" },\r\n { k: [\"breakfast\", \"morning\", \"food included\", \"buffet\"], a:\r\n \"A <strong>buffet breakfast<\/strong> is served every morning \u2014 no need to pre-book \u2014 available for a small surcharge. For the current price and times, \" + CONTACT.toLowerCase() },\r\n { k: [\"parking\", \"car\", \"garage\", \"park\"], a:\r\n \"There is <strong>parking available<\/strong> for guests. For spaces and current rates, \" + CONTACT.toLowerCase() },\r\n { k: [\"kitchen\", \"cook\", \"cooking\"], a:\r\n \"You\u2019re welcome to cook \u2014 there\u2019s a <strong>guest kitchen<\/strong>, great for saving your euros for the city.\" },\r\n { k: [\"facilit\", \"amenit\", \"included\", \"what do you have\", \"games\", \"bar\", \"billiard\", \"bike\", \"bicycle\"], a:\r\n \"Your home base includes a <strong>guest kitchen<\/strong>, a garden courtyard, a small house bar, <strong>billiards, darts and giant chess<\/strong>, bikes to borrow, vending, free WiFi and a luggage room. Rooms have private bathrooms, linen and Sat-TV.\" },\r\n { k: [\"room\", \"private\", \"dorm\", \"double\", \"single\", \"family\", \"bathroom\"], a:\r\n \"We\u2019re a hotel <em>and<\/em> hostel \u2014 <strong>rooms for every budget<\/strong>. Private singles, doubles\/twins, triples and quads (each with private bathroom, Sat-TV, WiFi), or a bed in a bright dorm with private bathroom, linen and a locker. \" + BOOKING },\r\n { k: [\"where\", \"address\", \"location\", \"how do i get\", \"get there\", \"directions\", \"from airport\", \"airport\", \"westbahnhof\", \"station\", \"transport\", \"u-bahn\", \"ubahn\", \"tram\"], a:\r\n \"We\u2019re at <strong>Felberstra\u00dfe 20, 1150 Vienna<\/strong>, directly <strong>opposite Westbahnhof<\/strong> (about a 4-minute walk) and one block from Mariahilfer Stra\u00dfe. From the airport, take the <strong>airport bus or CAT<\/strong> toward the city; U3 and U6 both serve Westbahnhof.\" },\r\n { k: [\"price\", \"cost\", \"rate\", \"cheap\", \"how much\", \"available\", \"availability\", \"book\", \"reserve\"], a:\r\n \"Rooms suit every budget, from dorm beds to private rooms. \" + BOOKING },\r\n { k: [\"cancel\", \"cancellation\", \"refund\", \"policy\", \"house rules\", \"rules\", \"pet\", \"smoking\"], a:\r\n \"Cancellation terms and house rules depend on your rate and dates. Rather than guess, here\u2019s the honest answer: <strong>\" + CONTACT + \"<\/strong> You\u2019ll also see the exact terms during booking.\" },\r\n { k: [\"contact\", \"phone\", \"email\", \"reception\", \"call\", \"reach\"], a:\r\n \"The hotel team is happy to help directly. You can reach reception during opening hours \u2014 for the current phone and email, please use the contact details on your booking confirmation, or \" + CONTACT.toLowerCase() },\r\n { k: [\"emergency\", \"help\", \"police\", \"ambulance\", \"fire\", \"doctor\", \"hospital\"], a:\r\n \"For any emergency in Austria, dial <strong>112<\/strong> (general emergency), <strong>133<\/strong> police, <strong>144<\/strong> ambulance, or <strong>122<\/strong> fire. For anything urgent at the hotel, contact the on-site team.\" },\r\n ];\r\n const HOME_FALLBACK =\r\n \"I can help with check-in, luggage, WiFi, breakfast, parking, getting here and facilities. For anything I can\u2019t confirm \u2014 like exact prices or specific policies \u2014 <strong>\" + CONTACT + \"<\/strong>\";\r\n\r\n \/* \u2500\u2500 Vienna Concierge \u00b7 general local suggestions (+ map pins) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const VIENNA = [\r\n { k: [\"first day\", \"24 hour\", \"first 24\", \"one day\", \"itinerary\", \"plan my\", \"plan my first\"], a:\r\n \"Here\u2019s a calm, walkable <strong>first day from your door<\/strong>:\", pins: [\r\n \"Morning \u00b7 coffee + stroll along Mariahilfer Stra\u00dfe (1 block away)\",\r\n \"Midday \u00b7 U3 to Stephansplatz \u2014 Stephansdom & the old town lanes\",\r\n \"Afternoon \u00b7 Hofburg & the Ringstrasse, or Naschmarkt for a bite\",\r\n \"Evening \u00b7 sunset at Belvedere gardens, dinner back near the hotel\" ] },\r\n { k: [\"rain\", \"rainy\", \"bad weather\", \"indoor\", \"when it rains\"], a:\r\n \"Perfect rainy-day ideas, mostly indoors:\", pins: [\r\n \"Kunsthistorisches Museum \u2014 world-class art, easy by U3\",\r\n \"Albertina \u2014 modern masters in the centre\",\r\n \"A grand Viennese caf\u00e9 (Caf\u00e9 Central, Sperl) \u2014 coffee & cake\",\r\n \"Naschmarkt\u2019s covered stalls for a warm bite\" ] },\r\n { k: [\"free\", \"cheap\", \"no money\", \"budget\", \"without paying\"], a:\r\n \"Wonderful <strong>free<\/strong> things near you:\", pins: [\r\n \"Belvedere & Sch\u00f6nbrunn gardens \u2014 free to wander\",\r\n \"Stephansdom \u2014 free to step inside\",\r\n \"Stroll the Ringstrasse & Danube Canal art walls\",\r\n \"Window-shopping + people-watching on Mariahilfer Stra\u00dfe\" ] },\r\n { k: [\"coffee\", \"cafe\", \"caf\u00e9\", \"breakfast out\", \"espresso\"], a:\r\n \"Vienna runs on coffee. Nearby & classic:\", pins: [\r\n \"Caf\u00e9s right along Mariahilfer Stra\u00dfe (1 block)\",\r\n \"Caf\u00e9 Sperl \u2014 historic, elegant, ~10 min\",\r\n \"Caf\u00e9 Central \u2014 grand and iconic, near Stephansplatz\" ] },\r\n { k: [\"romantic\", \"couple\", \"date\", \"evening\", \"sunset\"], a:\r\n \"A romantic Vienna evening:\", pins: [\r\n \"Sunset over the city from Belvedere gardens\",\r\n \"A cand-lit dinner in the old town lanes\",\r\n \"An evening classical concert (many near the centre)\",\r\n \"A slow walk along the illuminated Ringstrasse\" ] },\r\n { k: [\"solo\", \"alone\", \"by myself\", \"traveling alone\"], a:\r\n \"Great picks for solo travellers:\", pins: [\r\n \"MuseumsQuartier \u2014 art, courtyards, easy to linger\",\r\n \"Naschmarkt \u2014 browse & snack at your own pace\",\r\n \"Join a free walking tour from Stephansplatz\",\r\n \"Back home base: kitchen, courtyard & games to meet others\" ] },\r\n { k: [\"food\", \"eat\", \"restaurant\", \"dinner\", \"lunch\", \"schnitzel\", \"local\"], a:\r\n \"Local flavours to seek out:\", pins: [\r\n \"Wiener Schnitzel \u2014 a Viennese classic\",\r\n \"Naschmarkt \u2014 global stalls + Austrian bites (~10 min)\",\r\n \"A traditional Beisl (cosy tavern) in the old town\",\r\n \"Sachertorte with coffee at a grand caf\u00e9\" ] },\r\n { k: [\"museum\", \"art\", \"gallery\", \"history\", \"culture\"], a:\r\n \"Museums worth your time:\", pins: [\r\n \"Kunsthistorisches \u2014 old masters & antiquities\",\r\n \"Albertina \u2014 Monet to Picasso\",\r\n \"MuseumsQuartier \u2014 modern art complex\",\r\n \"Belvedere \u2014 Klimt\u2019s \u2018The Kiss\u2019\" ] },\r\n { k: [\"nearby\", \"close\", \"around\", \"near the hotel\", \"walking distance\", \"near me\"], a:\r\n \"Right around your home base:\", pins: [\r\n \"Mariahilfer Stra\u00dfe shopping \u2014 1 block\",\r\n \"Westbahnhof (U3\/U6, trains, airport bus) \u2014 4 min walk\",\r\n \"Sch\u00f6nbrunn Palace & gardens \u2014 ~8 min by U-Bahn\",\r\n \"Old town \/ Stephansdom \u2014 ~10 min by U3\" ] },\r\n { k: [\"stephansdom\", \"cathedral\", \"st stephen\", \"how do i get to\"], a:\r\n \"To <strong>Stephansdom<\/strong>: walk to Westbahnhof (4 min), take <strong>U3<\/strong> direction Simmering to Stephansplatz \u2014 about 10 minutes total. It\u2019s free to step inside.\", pins: [\r\n \"Westbahnhof \u2192 U3 \u2192 Stephansplatz (~10 min)\" ] },\r\n { k: [\"sch\u00f6nbrunn\", \"schonbrunn\", \"palace\", \"garden\"], a:\r\n \"<strong>Sch\u00f6nbrunn Palace<\/strong> is delightfully close \u2014 U-Bahn from Westbahnhof, roughly 8 minutes. The gardens are free to wander.\", pins: [\r\n \"Westbahnhof \u2192 U-Bahn \u2192 Sch\u00f6nbrunn (~8 min)\" ] },\r\n { k: [\"open today\", \"opening hours\", \"hours today\", \"what is open\"], a:\r\n \"Opening hours change by day and season, so I won\u2019t guess and risk sending you to a closed door. Check the venue\u2019s official page for today\u2019s hours \u2014 and your Vienna Concierge is happy to suggest <em>what<\/em> to see any time.\" },\r\n { k: [\"shopping\", \"shop\", \"mall\", \"buy\", \"mariahilfer\"], a:\r\n \"You\u2019re beside Vienna\u2019s biggest shopping street:\", pins: [\r\n \"Mariahilfer Stra\u00dfe \u2014 1 block from the hotel\",\r\n \"Ringstrassen-Galerien & centre boutiques by U3\",\r\n \"Naschmarkt for food & flea-market finds (weekends)\" ] },\r\n ];\r\n const VIENNA_FALLBACK =\r\n \"I\u2019m your <strong>Vienna Concierge<\/strong> \u2014 ask me for a first-day plan, rainy-day ideas, free things, coffee & food, romantic or solo suggestions, or how to reach a landmark. What are you in the mood for?\";\r\n\r\n const PROMPTS = {\r\n vienna: [\"Plan my first day\", \"Rainy-day ideas\", \"Something nearby\", \"Best free things\", \"Romantic evening\", \"Local food tips\", \"Museums today\"],\r\n home: [\"How does self check-in work?\", \"What time is check-in?\", \"Can I store luggage?\", \"How do I get there?\", \"What facilities are included?\", \"I arrive late \u2014 what now?\"],\r\n };\r\n const GREETING = {\r\n vienna: \"Hallo! I\u2019m your <strong>Vienna Concierge<\/strong> \u2014 your local guide in your pocket. Tell me how you like to travel and I\u2019ll map out the city for you. \ud83d\uddfa\ufe0f\",\r\n home: \"Welcome home. I\u2019m the <strong>Home Assistant<\/strong> \u2014 ask me anything about your stay: check-in, luggage, getting here, what\u2019s included. I only share confirmed details, and point you to the team for anything I can\u2019t. \ud83c\udfe0\",\r\n };\r\n const DISCLAIMER = {\r\n vienna: \"General suggestions only \u00b7 opening hours & prices change \u2014 always confirm before you go.\",\r\n home: \"Confirmed hotel info only \u00b7 for anything unlisted, we\u2019ll point you to the hotel team.\",\r\n };\r\n\r\n function normalize(s) { return (\" \" + s.toLowerCase() + \" \").replace(\/[^a-z0-9\u00e4\u00f6\u00fc\u00df\\s-]\/g, \" \"); }\r\n\r\n function score(text, keys) {\r\n const t = normalize(text);\r\n let hits = 0;\r\n for (const k of keys) if (t.includes(k)) hits += k.length; \/\/ longer phrase = stronger match\r\n return hits;\r\n }\r\n\r\n function answer(mode, text) {\r\n const kb = mode === \"vienna\" ? VIENNA : HOME;\r\n let best = null, bestScore = 0;\r\n for (const item of kb) {\r\n const s = score(text, item.k);\r\n if (s > bestScore) { bestScore = s; best = item; }\r\n }\r\n if (best && bestScore > 0) return { html: best.a, pins: best.pins || null };\r\n return { html: mode === \"vienna\" ? VIENNA_FALLBACK : HOME_FALLBACK, pins: null };\r\n }\r\n\r\n window.Concierge = { answer, PROMPTS, GREETING, DISCLAIMER };\r\n})();\r\n\r\n<\/script>\r\n <script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MAIN \u2014 interactions, reveals, booking, chat orchestration\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n(function () {\r\n \"use strict\";\r\n const $ = (s, r = document) => r.querySelector(s);\r\n const $$ = (s, r = document) => [...r.querySelectorAll(s)];\r\n const reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n const yearEl = document.getElementById(\"year\"); if (yearEl) yearEl.textContent = new Date().getFullYear();\r\n\r\n \/* \u2500\u2500 Nav: scroll state + mobile menu (skipped if header is absent) \u2500\u2500\u2500\u2500 *\/\r\n const nav = $(\"#nav\");\r\n if (nav) {\r\n const onScroll = () => nav.classList.toggle(\"is-scrolled\", window.scrollY > 40);\r\n onScroll();\r\n window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n\r\n const burger = $(\"[data-toggle-menu]\");\r\n if (burger) {\r\n burger.addEventListener(\"click\", () => {\r\n const open = nav.classList.toggle(\"is-menu-open\");\r\n burger.setAttribute(\"aria-expanded\", String(open));\r\n });\r\n }\r\n $$(\".nav__links a\").forEach(a => a.addEventListener(\"click\", () => {\r\n nav.classList.remove(\"is-menu-open\");\r\n if (burger) burger.setAttribute(\"aria-expanded\", \"false\");\r\n }));\r\n }\r\n\r\n \/* \u2500\u2500 Reveal on scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const reveals = $$(\"[data-reveal]\");\r\n reveals.forEach(el => { const d = el.dataset.delay; if (d) el.style.setProperty(\"--d\", d); });\r\n if (reduce || !(\"IntersectionObserver\" in window)) {\r\n reveals.forEach(el => el.classList.add(\"is-in\"));\r\n } else {\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add(\"is-in\"); io.unobserve(e.target); } });\r\n }, { threshold: 0.15, rootMargin: \"0px 0px -8% 0px\" });\r\n reveals.forEach(el => io.observe(el));\r\n }\r\n\r\n \/* \u2500\u2500 Sticky booking bar + FAB reveal after hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const sticky = $(\"#stickybar\");\r\n const fab = $(\"#fab\");\r\n const hero = $(\"#chapter-arrival\");\r\n const bookCh = $(\"#chapter-book\");\r\n if (\"IntersectionObserver\" in window) {\r\n const gate = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.target === hero) {\r\n const past = !e.isIntersecting && e.boundingClientRect.top < 0;\r\n sticky.classList.toggle(\"is-visible\", past);\r\n fab.classList.toggle(\"is-visible\", past);\r\n sticky.setAttribute(\"aria-hidden\", String(!past));\r\n }\r\n \/\/ hide sticky bar over the final booking chapter (redundant there)\r\n if (e.target === bookCh && e.isIntersecting) {\r\n sticky.classList.remove(\"is-visible\");\r\n }\r\n });\r\n }, { threshold: 0 });\r\n gate.observe(hero);\r\n gate.observe(bookCh);\r\n }\r\n\r\n \/* \u2500\u2500 Rooms tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const tabs = $$(\"[data-room-tab]\");\r\n const panels = $$(\"[data-room-panel]\");\r\n tabs.forEach(tab => tab.addEventListener(\"click\", () => {\r\n const key = tab.dataset.roomTab;\r\n tabs.forEach(t => { const on = t === tab; t.classList.toggle(\"is-active\", on); t.setAttribute(\"aria-selected\", String(on)); });\r\n panels.forEach(p => {\r\n const on = p.dataset.roomPanel === key;\r\n p.classList.toggle(\"is-active\", on);\r\n p.hidden = !on;\r\n });\r\n }));\r\n\r\n \/* \u2500\u2500 Parallax (viewport-relative, rAF, reduced-motion aware) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function parallax() {\r\n const els = $$(\"[data-parallax]\");\r\n if (reduce || !els.length) return;\r\n let ticking = false;\r\n const update = () => {\r\n const vh = window.innerHeight || 1;\r\n els.forEach(el => {\r\n const speed = parseFloat(el.dataset.parallax) || 0.15;\r\n const r = el.getBoundingClientRect();\r\n const center = r.top + r.height \/ 2;\r\n const offset = center - vh \/ 2; \/\/ +below \/ -above viewport centre\r\n const shift = Math.max(-140, Math.min(140, -offset * speed));\r\n el.style.transform = `translate3d(0, ${shift.toFixed(1)}px, 0)`;\r\n });\r\n ticking = false;\r\n };\r\n const onScroll = () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } };\r\n window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n window.addEventListener(\"resize\", onScroll, { passive: true });\r\n update();\r\n })();\r\n\r\n \/* \u2500\u2500 Scroll progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function progress() {\r\n const bar = $(\"#scrollbar\");\r\n if (!bar) return;\r\n const upd = () => {\r\n const h = document.documentElement.scrollHeight - window.innerHeight;\r\n bar.style.width = (h > 0 ? (window.scrollY \/ h) * 100 : 0) + \"%\";\r\n };\r\n window.addEventListener(\"scroll\", upd, { passive: true });\r\n window.addEventListener(\"resize\", upd, { passive: true });\r\n upd();\r\n })();\r\n\r\n \/* \u2500\u2500 Horizontal-scroll gallery (pinned; vertical scroll \u2192 sideways) \u2500\u2500 *\/\r\n (function hGallery() {\r\n const sec = $(\"#chapter-gallery\");\r\n const track = $(\"#hgtrack\");\r\n if (!sec || !track) return;\r\n const coarse = window.matchMedia(\"(pointer: coarse)\").matches;\r\n if (reduce || coarse || window.innerWidth < 760) { sec.classList.add(\"is-static\"); return; }\r\n\r\n let maxX = 0, start = 0, ticking = false;\r\n const measure = () => {\r\n maxX = Math.max(0, track.scrollWidth - window.innerWidth);\r\n sec.style.height = (window.innerHeight + maxX) + \"px\";\r\n start = sec.offsetTop;\r\n };\r\n const update = () => {\r\n const x = Math.max(0, Math.min(maxX, window.scrollY - start));\r\n track.style.transform = `translate3d(${-x}px,0,0)`;\r\n ticking = false;\r\n };\r\n const onScroll = () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } };\r\n measure(); update();\r\n window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n window.addEventListener(\"resize\", () => { measure(); update(); }, { passive: true });\r\n window.addEventListener(\"load\", () => { measure(); update(); });\r\n \/\/ remeasure once images have loaded (widths are fixed, but be safe)\r\n track.querySelectorAll(\"img\").forEach(img => img.addEventListener(\"load\", () => { measure(); update(); }, { once: true }));\r\n })();\r\n\r\n \/* \u2500\u2500 3D tilt on cards (pointer-driven) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function tilt() {\r\n if (reduce || window.matchMedia(\"(pointer: coarse)\").matches) return;\r\n $$(\".hg-item, .guide-card, .group-card\").forEach(el => el.setAttribute(\"data-tilt\", \"\"));\r\n $$(\"[data-tilt]\").forEach(el => {\r\n let raf = null;\r\n el.addEventListener(\"pointermove\", (e) => {\r\n const r = el.getBoundingClientRect();\r\n const x = (e.clientX - r.left) \/ r.width - 0.5;\r\n const y = (e.clientY - r.top) \/ r.height - 0.5;\r\n if (raf) cancelAnimationFrame(raf);\r\n raf = requestAnimationFrame(() => {\r\n el.style.transform = `perspective(800px) rotateX(${(-y * 6).toFixed(2)}deg) rotateY(${(x * 6).toFixed(2)}deg)`;\r\n });\r\n });\r\n el.addEventListener(\"pointerleave\", () => { el.style.transform = \"\"; });\r\n });\r\n })();\r\n\r\n \/* \u2500\u2500 Word-by-word heading reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function words() {\r\n let wi = 0;\r\n const split = (node) => {\r\n [...node.childNodes].forEach(child => {\r\n if (child.nodeType === 3) {\r\n if (!child.textContent.trim()) return;\r\n const frag = document.createDocumentFragment();\r\n child.textContent.split(\/(\\s+)\/).forEach(tok => {\r\n if (tok === \"\") return;\r\n if (\/^\\s+$\/.test(tok)) { frag.appendChild(document.createTextNode(tok)); return; }\r\n const s = document.createElement(\"span\");\r\n s.className = \"word\"; s.style.setProperty(\"--wd\", wi++); s.textContent = tok;\r\n frag.appendChild(s);\r\n });\r\n node.replaceChild(frag, child);\r\n } else if (child.nodeType === 1 && child.tagName !== \"BR\") {\r\n split(child);\r\n }\r\n });\r\n };\r\n $$(\".section__title, .book__title\").forEach(t => { wi = 0; split(t); });\r\n })();\r\n\r\n \/* \u2500\u2500 Sticky story: reveal lines as you scroll through \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function story() {\r\n const sec = $(\"#chapter-story\");\r\n if (!sec) return;\r\n const lines = $$(\".story__line\", sec);\r\n const fill = $(\"#story-fill\");\r\n if (reduce) { lines.forEach(l => l.classList.add(\"is-lit\")); return; }\r\n let ticking = false;\r\n const update = () => {\r\n const total = sec.offsetHeight - window.innerHeight || 1;\r\n const p = Math.max(0, Math.min(1, -sec.getBoundingClientRect().top \/ total));\r\n lines.forEach((l, i) => l.classList.toggle(\"is-lit\", p >= i \/ lines.length));\r\n if (fill) fill.style.width = (p * 100) + \"%\";\r\n ticking = false;\r\n };\r\n window.addEventListener(\"scroll\", () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } }, { passive: true });\r\n window.addEventListener(\"resize\", update, { passive: true });\r\n update();\r\n })();\r\n\r\n \/* \u2500\u2500 3D fly-through of the five houses \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function fly() {\r\n const sec = $(\"#chapter-family\");\r\n const space = $(\"#flyspace\");\r\n if (!sec || !space) return;\r\n if (reduce || window.matchMedia(\"(pointer: coarse)\").matches) { sec.classList.add(\"is-static\"); return; }\r\n const panels = $$(\".fly__panel\", sec);\r\n const gap = 900, n = panels.length;\r\n let ticking = false;\r\n const update = () => {\r\n const total = sec.offsetHeight - window.innerHeight || 1;\r\n const p = Math.max(0, Math.min(1, -sec.getBoundingClientRect().top \/ total));\r\n const cam = p * (n + 1) * gap;\r\n space.style.transform = `translateZ(${cam}px)`;\r\n panels.forEach((pan, i) => {\r\n const eff = cam - (i + 1) * gap;\r\n let op;\r\n if (eff < -1400 || eff > 780) op = 0;\r\n else if (eff > 500) op = Math.max(0, (780 - eff) \/ 280);\r\n else if (eff < -900) op = Math.max(0, (eff + 1400) \/ 500);\r\n else op = 1;\r\n pan.style.opacity = op.toFixed(2);\r\n pan.style.pointerEvents = op > 0.5 ? \"auto\" : \"none\";\r\n });\r\n ticking = false;\r\n };\r\n window.addEventListener(\"scroll\", () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } }, { passive: true });\r\n window.addEventListener(\"resize\", update, { passive: true });\r\n update();\r\n })();\r\n\r\n \/* \u2500\u2500 Group booking request \u2192 email to reservierung@dostepinn.at \u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const groupForm = $(\"#group-form\");\r\n if (groupForm) {\r\n groupForm.addEventListener(\"submit\", (e) => {\r\n e.preventDefault();\r\n const f = groupForm;\r\n const val = (n) => (f.elements[n]?.value || \"\").trim();\r\n const name = val(\"name\"), email = val(\"email\"), people = val(\"people\");\r\n if (!name || !email || !people) {\r\n [[\"name\", name], [\"email\", email], [\"people\", people]].forEach(([n, v]) => {\r\n if (!v && f.elements[n]) { f.elements[n].style.borderColor = \"#b4462f\"; }\r\n });\r\n return;\r\n }\r\n const rooms = [...f.querySelectorAll('input[name=\"rooms\"]:checked')].map(x => x.value).join(\", \") || \"\u2014\";\r\n const board = f.querySelector('input[name=\"board\"]:checked')?.value || \"\u2014\";\r\n const lines = [\r\n \"Group booking request\", \"\",\r\n `Name: ${name}`,\r\n `Email: ${email}`,\r\n `Organisation \/ school: ${val(\"org\") || \"\u2014\"}`,\r\n `Phone: ${val(\"phone\") || \"\u2014\"}`,\r\n `Check-in: ${val(\"checkin\") || \"\u2014\"}`,\r\n `Check-out: ${val(\"checkout\") || \"\u2014\"}`,\r\n `Number of people: ${people}`,\r\n `Gender split: ${val(\"genders\") || \"\u2014\"}`,\r\n `Preferred room split: ${rooms}`,\r\n `Board: ${board}`, \"\",\r\n \"Message:\", (val(\"message\") || \"\u2014\"), \"\",\r\n \"\u2014 sent from dostepinn.at\",\r\n ];\r\n const subject = `Group booking request \u2014 ${people} people`;\r\n const href = `mailto:reservierung@dostepinn.at?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines.join(\"\\n\"))}`;\r\n const ok = $(\"#group-ok\");\r\n if (ok) ok.hidden = false;\r\n \/\/ open the guest's email client with everything pre-filled\r\n window.location.href = href;\r\n });\r\n }\r\n\r\n \/* \u2550\u2550 MODAL PLUMBING \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n let lastFocus = null;\r\n function openModal(el) {\r\n lastFocus = document.activeElement;\r\n el.hidden = false;\r\n requestAnimationFrame(() => el.classList.add(\"is-open\"));\r\n document.body.style.overflow = \"hidden\";\r\n const focusable = el.querySelector(\"input, button, select, [tabindex]\");\r\n if (focusable) setTimeout(() => focusable.focus(), 60);\r\n document.addEventListener(\"keydown\", escClose);\r\n }\r\n function closeModal(el) {\r\n el.classList.remove(\"is-open\");\r\n document.body.style.overflow = \"\";\r\n document.removeEventListener(\"keydown\", escClose);\r\n setTimeout(() => { el.hidden = true; }, 500);\r\n if (lastFocus) lastFocus.focus();\r\n }\r\n function escClose(e) { if (e.key === \"Escape\") { const open = $(\".is-open\"); if (open) closeModal(open); } }\r\n\r\n \/* \u2500\u2500 Booking modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const booking = $(\"#booking\");\r\n document.addEventListener(\"click\", (e) => {\r\n const opener = e.target.closest(\"[data-open-booking]\");\r\n if (opener) {\r\n e.preventDefault();\r\n const target = document.getElementById(\"book-top\") || document.getElementById(\"chapter-book\");\r\n if (target) target.scrollIntoView({ behavior: reduce ? \"auto\" : \"smooth\", block: \"start\" });\r\n }\r\n if (e.target.closest(\"[data-close-booking]\")) closeModal(booking);\r\n });\r\n \/\/ sensible default dates\r\n const ci = $('input[name=\"checkin\"]'), co = $('input[name=\"checkout\"]');\r\n if (ci && co) {\r\n const today = new Date(); const t = new Date(today); t.setDate(t.getDate() + 1);\r\n const fmt = (d) => d.toISOString().slice(0, 10);\r\n ci.value = fmt(today); ci.min = fmt(today);\r\n co.value = fmt(t); co.min = fmt(t);\r\n ci.addEventListener(\"change\", () => { co.min = ci.value; if (co.value <= ci.value) { const n = new Date(ci.value); n.setDate(n.getDate() + 1); co.value = fmt(n); } });\r\n }\r\n $(\"#booking-form\").addEventListener(\"submit\", (e) => {\r\n e.preventDefault();\r\n const btn = e.target.querySelector('button[type=\"submit\"]');\r\n btn.textContent = \"Taking you to booking\u2026\";\r\n \/\/ Placeholder: integrate the real booking engine URL here in Phase 3.\r\n setTimeout(() => { btn.textContent = \"Search rooms\"; closeModal(booking); }, 1100);\r\n });\r\n\r\n \/* \u2550\u2550 CHAT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n const chat = $(\"#chat\");\r\n const body = $(\"#chat-body\");\r\n const promptsWrap = $(\"#chat-prompts\");\r\n const form = $(\"#chat-form\");\r\n const input = $(\"#chat-text\");\r\n const disclaimer = $(\"#chat-disclaimer\");\r\n const modeBtns = $$(\".chat__mode\");\r\n let mode = \"vienna\";\r\n const started = { vienna: false, home: false };\r\n\r\n function setMode(next, { greet = true } = {}) {\r\n mode = next;\r\n modeBtns.forEach(b => { const on = b.dataset.mode === next; b.classList.toggle(\"is-active\", on); b.setAttribute(\"aria-selected\", String(on)); });\r\n disclaimer.innerHTML = window.Concierge.DISCLAIMER[next];\r\n input.placeholder = next === \"vienna\" ? \"Ask about Vienna\u2026\" : \"Ask about your stay\u2026\";\r\n renderPrompts();\r\n if (greet && !started[next]) { started[next] = true; addBot(window.Concierge.GREETING[next]); }\r\n }\r\n\r\n function renderPrompts() {\r\n promptsWrap.innerHTML = \"\";\r\n window.Concierge.PROMPTS[mode].forEach(p => {\r\n const b = document.createElement(\"button\");\r\n b.type = \"button\"; b.textContent = p;\r\n b.addEventListener(\"click\", () => submit(p));\r\n promptsWrap.appendChild(b);\r\n });\r\n }\r\n\r\n function scrollDown() { body.scrollTop = body.scrollHeight; }\r\n\r\n function addUser(text) {\r\n const el = document.createElement(\"div\");\r\n el.className = \"msg msg--user\"; el.textContent = text;\r\n body.appendChild(el); scrollDown();\r\n }\r\n function addBot(html, pins) {\r\n const el = document.createElement(\"div\");\r\n el.className = \"msg msg--bot\"; el.innerHTML = html;\r\n if (pins && pins.length) {\r\n const wrap = document.createElement(\"div\"); wrap.className = \"msg__pins\";\r\n pins.forEach(p => { const pin = document.createElement(\"div\"); pin.className = \"msg__pin\"; pin.textContent = p; wrap.appendChild(pin); });\r\n el.appendChild(wrap);\r\n if (window.Scene && window.Scene.dropPins) window.Scene.dropPins(pins.length);\r\n }\r\n body.appendChild(el); scrollDown();\r\n }\r\n function typing() {\r\n const el = document.createElement(\"div\");\r\n el.className = \"msg msg--bot typing\"; el.innerHTML = \"<span><\/span><span><\/span><span><\/span>\";\r\n body.appendChild(el); scrollDown(); return el;\r\n }\r\n\r\n function submit(text) {\r\n text = (text || \"\").trim(); if (!text) return;\r\n addUser(text);\r\n const t = typing();\r\n const { html, pins } = window.Concierge.answer(mode, text);\r\n const delay = reduce ? 200 : 550 + Math.min(text.length * 8, 700);\r\n setTimeout(() => { t.remove(); addBot(html, pins); }, delay);\r\n }\r\n\r\n form.addEventListener(\"submit\", (e) => { e.preventDefault(); submit(input.value); input.value = \"\"; });\r\n modeBtns.forEach(b => b.addEventListener(\"click\", () => setMode(b.dataset.mode)));\r\n\r\n \/\/ Open chat from any [data-open-concierge]; optional data-prompt & mode\r\n document.addEventListener(\"click\", (e) => {\r\n const opener = e.target.closest(\"[data-open-concierge]\");\r\n if (opener) {\r\n e.preventDefault();\r\n const wanted = opener.dataset.openConcierge || \"vienna\";\r\n const prompt = opener.dataset.prompt;\r\n if (wanted !== mode) setMode(wanted, { greet: true });\r\n else if (!started[mode]) setMode(mode, { greet: true });\r\n openModal(chat);\r\n if (prompt) setTimeout(() => submit(prompt), 400);\r\n }\r\n if (e.target.closest(\"[data-close-chat]\")) closeModal(chat);\r\n });\r\n\r\n \/\/ initialise default mode greeting lazily on first open handled above\r\n setMode(\"vienna\", { greet: false });\r\n})();\r\n\r\n<\/script>\r\n <script type=\"module\">\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCENE \u2014 \"Vienna from above\"\r\n A real 3D St. Stephen's Cathedral (Stephansdom) in the 1st district,\r\n seen from a slow bird's-eye orbit at golden hour.\r\n Gated for performance; falls back to the static warm hero if WebGL \/\r\n the CDN is unavailable, or on mobile \/ reduced-motion.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\nconst reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\nconst coarse = window.matchMedia(\"(pointer: coarse)\").matches;\r\nconst smallScreen = window.innerWidth < 900;\r\nconst lowCores = (navigator.hardwareConcurrency || 4) < 4;\r\n\r\nwindow.Scene = { dropPins() {} };\r\n\r\nif (!reduceMotion && !coarse && !smallScreen && !lowCores) {\r\n const boot = () => init().catch(() => {});\r\n if (\"requestIdleCallback\" in window) requestIdleCallback(boot, { timeout: 1500 });\r\n else window.addEventListener(\"load\", boot);\r\n}\r\n\r\n\/* deterministic pseudo-random (Math.random is unavailable in some contexts) *\/\r\nlet _seed = 20260818;\r\nconst rnd = () => { _seed = (_seed * 16807) % 2147483647; return _seed \/ 2147483647; };\r\n\r\nasync function init() {\r\n const mount = document.getElementById(\"scene-mount\");\r\n if (!mount) return;\r\n const THREE = await import(\"three\");\r\n\r\n const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: \"high-performance\" });\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.6));\r\n renderer.setSize(mount.clientWidth, mount.clientHeight);\r\n renderer.shadowMap.enabled = true;\r\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\r\n mount.appendChild(renderer.domElement);\r\n\r\n const scene = new THREE.Scene();\r\n scene.fog = new THREE.Fog(0xe9d9bd, 26, 62);\r\n\r\n const camera = new THREE.PerspectiveCamera(42, mount.clientWidth \/ mount.clientHeight, 0.1, 200);\r\n\r\n \/\/ \u2500\u2500 Golden-hour light \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n scene.add(new THREE.HemisphereLight(0xfff0d8, 0x6a5a44, 1.05));\r\n const sun = new THREE.DirectionalLight(0xffdca8, 2.2);\r\n sun.position.set(-14, 20, 10);\r\n sun.castShadow = true;\r\n sun.shadow.mapSize.set(1024, 1024);\r\n sun.shadow.camera.near = 1; sun.shadow.camera.far = 70;\r\n sun.shadow.camera.left = -24; sun.shadow.camera.right = 24;\r\n sun.shadow.camera.top = 24; sun.shadow.camera.bottom = -24;\r\n scene.add(sun);\r\n scene.add(new THREE.AmbientLight(0xffe9cc, 0.5));\r\n\r\n const city = new THREE.Group();\r\n scene.add(city);\r\n\r\n \/\/ \u2500\u2500 Ground (old-town cobble) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const ground = new THREE.Mesh(\r\n new THREE.CircleGeometry(60, 64),\r\n new THREE.MeshStandardMaterial({ color: 0xbca988, roughness: 1 })\r\n );\r\n ground.rotation.x = -Math.PI \/ 2;\r\n ground.receiveShadow = true;\r\n city.add(ground);\r\n\r\n \/\/ \u2500\u2500 Materials \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const stone = new THREE.MeshStandardMaterial({ color: 0xd9cdb4, roughness: .85 });\r\n const stoneWarm = new THREE.MeshStandardMaterial({ color: 0xcdbb98, roughness: .9 });\r\n\r\n \/\/ Iconic chevron roof texture (Habsburg-style zig-zag tiles)\r\n function roofTexture() {\r\n const c = document.createElement(\"canvas\"); c.width = 128; c.height = 128;\r\n const x = c.getContext(\"2d\");\r\n x.fillStyle = \"#3f6b4e\"; x.fillRect(0, 0, 128, 128);\r\n const cols = [\"#c8a24b\", \"#e8dcc0\", \"#8d3b2e\", \"#3f6b4e\"];\r\n for (let r = 0; r < 8; r++) for (let cc = 0; cc < 8; cc++) {\r\n x.fillStyle = cols[(r + cc) % cols.length];\r\n x.beginPath(); x.moveTo(cc*16, r*16); x.lineTo(cc*16+8, r*16+8);\r\n x.lineTo(cc*16, r*16+16); x.closePath(); x.fill();\r\n }\r\n const t = new THREE.CanvasTexture(c);\r\n t.wrapS = t.wrapT = THREE.RepeatWrapping; t.repeat.set(3, 2);\r\n return t;\r\n }\r\n const roofMat = new THREE.MeshStandardMaterial({ map: roofTexture(), roughness: .7 });\r\n const roofPlain = new THREE.MeshStandardMaterial({ color: 0x6b4a34, roughness: .9 });\r\n\r\n \/\/ \u2500\u2500 STEPHANSDOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const dom = new THREE.Group();\r\n city.add(dom);\r\n\r\n \/\/ Nave\r\n const nave = new THREE.Mesh(new THREE.BoxGeometry(3.4, 3, 8.5), stone);\r\n nave.position.y = 1.5; nave.castShadow = nave.receiveShadow = true;\r\n dom.add(nave);\r\n\r\n \/\/ Steep chevron roof (triangular prism via extruded triangle)\r\n const triShape = new THREE.Shape();\r\n triShape.moveTo(-1.75, 0); triShape.lineTo(1.75, 0); triShape.lineTo(0, 3.1); triShape.closePath();\r\n const roofGeo = new THREE.ExtrudeGeometry(triShape, { depth: 8.5, bevelEnabled: false });\r\n roofGeo.translate(0, 0, -4.25);\r\n const roof = new THREE.Mesh(roofGeo, roofMat);\r\n roof.position.y = 3; roof.castShadow = true;\r\n dom.add(roof);\r\n\r\n \/\/ South Tower \"Steffl\" \u2014 the tall tapering gothic spire\r\n const steffl = new THREE.Group();\r\n steffl.position.set(0, 0, -4.4);\r\n const towerBase = new THREE.Mesh(new THREE.BoxGeometry(1.7, 6, 1.7), stone);\r\n towerBase.position.y = 3; towerBase.castShadow = true; steffl.add(towerBase);\r\n const taper = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 1.15, 5, 4), stoneWarm);\r\n taper.position.y = 8.5; taper.rotation.y = Math.PI \/ 4; taper.castShadow = true; steffl.add(taper);\r\n const spire = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.34, 4.5, 6), roofPlain);\r\n spire.position.y = 13; spire.castShadow = true; steffl.add(spire);\r\n dom.add(steffl);\r\n\r\n \/\/ North Tower \u2014 shorter, green renaissance dome\r\n const north = new THREE.Group();\r\n north.position.set(0, 0, 4.4);\r\n const nBase = new THREE.Mesh(new THREE.BoxGeometry(1.7, 5, 1.7), stone);\r\n nBase.position.y = 2.5; nBase.castShadow = true; north.add(nBase);\r\n const dome = new THREE.Mesh(new THREE.SphereGeometry(1.05, 20, 16, 0, Math.PI * 2, 0, Math.PI \/ 2),\r\n new THREE.MeshStandardMaterial({ color: 0x4a6b52, roughness: .5, metalness: .3 }));\r\n dome.position.y = 5; dome.castShadow = true; north.add(dome);\r\n const lantern = new THREE.Mesh(new THREE.CylinderGeometry(0.18, 0.18, 0.7, 8),\r\n new THREE.MeshStandardMaterial({ color: 0xc8a24b, metalness: .6, roughness: .3 }));\r\n lantern.position.y = 6.1; north.add(lantern);\r\n dom.add(north);\r\n\r\n \/\/ \u2500\u2500 First district around it (instanced blocks with warm facades) \u2500\u2500\u2500\r\n const COUNT = 120;\r\n const bgeo = new THREE.BoxGeometry(1, 1, 1);\r\n const bmat = new THREE.MeshStandardMaterial({ color: 0xcbb897, roughness: .9, vertexColors: false });\r\n const blocks = new THREE.InstancedMesh(bgeo, bmat, COUNT);\r\n blocks.castShadow = blocks.receiveShadow = true;\r\n const dummy = new THREE.Object3D();\r\n const palette = [0xd8c6a4, 0xcbb897, 0xc3ad86, 0xd0be9c, 0xe0d2b4];\r\n const col = new THREE.Color();\r\n let n = 0;\r\n for (let i = 0; i < 600 && n < COUNT; i++) {\r\n const x = (rnd() - 0.5) * 46;\r\n const z = (rnd() - 0.5) * 46;\r\n if (Math.hypot(x, z) < 8) continue; \/\/ keep the cathedral square clear\r\n const w = 1.6 + rnd() * 2.4, d = 1.6 + rnd() * 2.4;\r\n const h = 2 + rnd() * (Math.hypot(x, z) > 18 ? 3 : 4.5);\r\n dummy.position.set(x, h \/ 2, z);\r\n dummy.scale.set(w, h, d);\r\n dummy.rotation.y = Math.round(rnd() * 4) * Math.PI \/ 2;\r\n dummy.updateMatrix();\r\n blocks.setMatrixAt(n, dummy.matrix);\r\n col.setHex(palette[(n * 7) % palette.length]);\r\n blocks.setColorAt(n, col);\r\n n++;\r\n }\r\n blocks.count = n;\r\n city.add(blocks);\r\n\r\n \/\/ Simple pitched roofs on the nearer blocks\r\n const rgeo = new THREE.ConeGeometry(1.15, 1, 4);\r\n const rInst = new THREE.InstancedMesh(rgeo, roofPlain, n);\r\n for (let i = 0; i < n; i++) {\r\n blocks.getMatrixAt(i, dummy.matrix);\r\n dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);\r\n const top = dummy.position.y + dummy.scale.y \/ 2;\r\n const rw = Math.max(dummy.scale.x, dummy.scale.z) * 0.62;\r\n dummy.position.y = top + 0.35; dummy.scale.set(rw, 0.9, rw);\r\n dummy.rotation.set(0, Math.PI \/ 4, 0); dummy.updateMatrix();\r\n rInst.setMatrixAt(i, dummy.matrix);\r\n }\r\n rInst.castShadow = true;\r\n city.add(rInst);\r\n\r\n \/\/ \u2500\u2500 Concierge pins (glow markers dropped by the chatbot) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const pins = new THREE.Group(); city.add(pins);\r\n const pinGeo = new THREE.SphereGeometry(0.22, 14, 14);\r\n const pinMat = new THREE.MeshStandardMaterial({ color: 0xc8a24b, emissive: 0xc8a24b, emissiveIntensity: 1.5 });\r\n window.Scene.dropPins = (k = 3) => {\r\n for (let i = 0; i < k; i++) {\r\n const p = new THREE.Mesh(pinGeo, pinMat);\r\n const a = rnd() * Math.PI * 2, r = 9 + rnd() * 12;\r\n p.position.set(Math.cos(a) * r, 10, Math.sin(a) * r);\r\n p.userData = { ty: 5 + rnd() * 4, t: rnd() * 6 };\r\n pins.add(p);\r\n }\r\n while (pins.children.length > 12) pins.remove(pins.children[0]);\r\n };\r\n\r\n \/\/ \u2500\u2500 Interaction & animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n let mx = 0, my = 0, scrollN = 0;\r\n window.addEventListener(\"pointermove\", e => {\r\n mx = e.clientX \/ window.innerWidth - 0.5; my = e.clientY \/ window.innerHeight - 0.5;\r\n }, { passive: true });\r\n window.addEventListener(\"scroll\", () => {\r\n scrollN = Math.min(window.scrollY \/ (window.innerHeight || 1), 1.3);\r\n }, { passive: true });\r\n\r\n const onResize = () => {\r\n const w = mount.clientWidth, h = mount.clientHeight;\r\n renderer.setSize(w, h); camera.aspect = w \/ h; camera.updateProjectionMatrix();\r\n };\r\n window.addEventListener(\"resize\", onResize);\r\n\r\n let running = true;\r\n document.addEventListener(\"visibilitychange\", () => { running = !document.hidden; if (running) loop(); });\r\n\r\n let frame = 0;\r\n function loop() {\r\n if (!running) return;\r\n frame++;\r\n const t = frame * 0.0016;\r\n \/\/ slow bird's-eye orbit\r\n const radius = 20 - scrollN * 4;\r\n const ang = t + mx * 0.5;\r\n camera.position.set(Math.sin(ang) * radius, 15 + scrollN * 6 - my * 2, Math.cos(ang) * radius);\r\n camera.lookAt(0, 3.5, 0);\r\n\r\n pins.children.forEach(p => {\r\n if (p.position.y > p.userData.ty) p.position.y += (p.userData.ty - p.position.y) * 0.08;\r\n p.userData.t += 0.05;\r\n p.material.emissiveIntensity = 1.3 + Math.sin(p.userData.t * 2) * 0.4;\r\n });\r\n\r\n renderer.render(scene, camera);\r\n requestAnimationFrame(loop);\r\n }\r\n loop();\r\n\r\n \/\/ fade the static fallback out once GL is live\r\n const fb = document.querySelector(\".hero__fallback\");\r\n if (fb) { fb.style.transition = \"opacity 1.4s ease\"; fb.style.opacity = \"0\"; }\r\n}\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Do Step Inn Home \u2014 Your calm home base in Vienna | Hotel & Hostel near Westbahnhof Skip to rooms & booking Vienna \u00b7 1150 \u00b7 opposite Westbahnhof Feel at home. Step into Vienna. Off the train, up the step, and you\u2019re home. Your calm base in the middle of everything \u2014 rooms for every […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":44,"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/pages\/112\/revisions\/278"}],"wp:attachment":[{"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/media?parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n Do Step Inn Home \u2014 Your calm home base in Vienna | Hotel & Hostel near Westbahnhof<\/title>\r\n <meta name=\"description\" content=\"Feel at home. Step into Vienna. A calm, well-connected home base opposite Westbahnhof, one block off Mariahilfer Stra\u00dfe. Private rooms & dorms, self check-in, rooms for every budget.\" \/>\r\n <meta name=\"keywords\" content=\"hotel near Westbahnhof Vienna, cheap central Vienna hotel, hostel Mariahilfer Stra\u00dfe, self check-in Vienna, private rooms and dorms Vienna, Do Step Inn Home\" \/>\r\n <link rel=\"canonical\" href=\"https:\/\/dostepinn.com\/\" \/>\r\n <meta name=\"robots\" content=\"index,follow\" \/>\r\n\r\n \r\n <meta property=\"og:type\" content=\"business.business\" \/>\r\n <meta property=\"og:title\" content=\"Do Step Inn Home \u2014 Your calm home base in Vienna\" \/>\r\n <meta property=\"og:description\" content=\"Feel at home. Step into Vienna. Opposite Westbahnhof, one block off Mariahilfer Stra\u00dfe. Rooms for every budget, self check-in, the whole city at your door.\" \/>\r\n <meta property=\"og:locale\" content=\"en\" \/>\r\n <meta property=\"og:site_name\" content=\"Do Step Inn Home\" \/>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <link rel=\"icon\" href=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/favicon.svg\" type=\"image\/svg+xml\" \/>\r\n <style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DO STEP INN HOME \u2014 Design System\r\n \"Feel at home. Step into Vienna.\" \u2014 a cinematic golden-hour arrival.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n:root {\r\n \/* \u2500\u2500 Palette \u00b7 warm Vienna golden hour \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n --espresso: #14100C; \/* deep evening base *\/\r\n --espresso-2: #1C160F; \/* elevated dark surface *\/\r\n --espresso-3: #251D14; \/* card \/ raised *\/\r\n --stone: #F4ECDF; \/* warm cream text *\/\r\n --stone-soft: #D8CBB6; \/* secondary text *\/\r\n --stone-dim: rgba(216,203,182,.62);\r\n --cream: #EFE6D6; \/* morning-light section bg *\/\r\n --cream-2: #E7DAC4;\r\n --gold: #C9A24B; \/* signature muted gold *\/\r\n --gold-soft: #E0C078;\r\n --green: #38493B; \/* deep Vienna green *\/\r\n --green-deep: #2A362C;\r\n\r\n \/* \u2500\u2500 Semantic \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n --bg: var(--espresso);\r\n --text: var(--stone);\r\n --muted: var(--stone-soft);\r\n --line: rgba(216,203,182,.16);\r\n --line-strong: rgba(216,203,182,.3);\r\n\r\n \/* \u2500\u2500 Type \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n --serif: \"Fraunces\", \"Cormorant Garamond\", Georgia, \"Times New Roman\", serif;\r\n --sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n\r\n \/* \u2500\u2500 Space & motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n --gutter: clamp(1.25rem, 5vw, 6rem);\r\n --max: 1240px;\r\n --ease: cubic-bezier(.22, 1, .36, 1); \/* decelerating, \"train into station\" *\/\r\n --ease-soft: cubic-bezier(.4, 0, .2, 1);\r\n --shadow: 0 40px 90px -40px rgba(0,0,0,.7), 0 12px 30px -18px rgba(0,0,0,.6);\r\n --radius: 20px;\r\n}\r\n\r\n\/* \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; }\r\nhtml { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\r\n@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }\r\n\r\nbody {\r\n font-family: var(--sans);\r\n font-weight: 400;\r\n background: var(--bg);\r\n color: var(--text);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\nimg, svg { display: block; max-width: 100%; }\r\nbutton { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }\r\na { color: inherit; text-decoration: none; }\r\nul { list-style: none; padding: 0; }\r\n:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }\r\n\r\n\/* Film grain + warmth overlay *\/\r\n.grain {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 9;\r\n opacity: .05; mix-blend-mode: overlay;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n.skip-link {\r\n position: fixed; top: -100px; left: 1rem; z-index: 200;\r\n background: var(--gold); color: var(--espresso); padding: .7rem 1.1rem;\r\n border-radius: 8px; font-weight: 600; transition: top .2s;\r\n}\r\n.skip-link:focus { top: 1rem; }\r\n\r\n\/* \u2500\u2500 Typographic primitives \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.eyebrow {\r\n font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;\r\n color: var(--gold); font-weight: 500; margin-bottom: 1.4rem;\r\n}\r\n.ital { font-style: italic; font-family: var(--serif); }\r\n\r\n.section__title {\r\n font-family: var(--serif); font-weight: 400;\r\n font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02;\r\n letter-spacing: -.01em; margin-bottom: 1.6rem;\r\n}\r\n.section__lede {\r\n font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--muted);\r\n max-width: 46ch; line-height: 1.7;\r\n}\r\n.section__head { max-width: var(--max); margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); }\r\n\r\n\/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.btn {\r\n display: inline-flex; align-items: center; gap: .6rem;\r\n padding: .95rem 1.7rem; border-radius: 100px; font-weight: 500;\r\n letter-spacing: .01em; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;\r\n will-change: transform;\r\n}\r\n.btn--sm { padding: .7rem 1.3rem; font-size: .92rem; }\r\n.btn--lg { padding: 1.15rem 2.4rem; font-size: 1.08rem; }\r\n.btn--gold {\r\n background: linear-gradient(135deg, var(--gold-soft), var(--gold));\r\n color: #241a0c; box-shadow: 0 10px 30px -12px rgba(201,162,75,.6);\r\n}\r\n.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(201,162,75,.75); }\r\n.btn--ghost {\r\n border: 1px solid var(--line-strong); color: var(--text);\r\n background: rgba(244,236,223,.03); backdrop-filter: blur(6px);\r\n}\r\n.btn--ghost:hover { border-color: var(--gold); transform: translateY(-3px); }\r\n.btn__orb, .fab__orb {\r\n width: 12px; height: 12px; border-radius: 50%;\r\n background: radial-gradient(circle at 35% 35%, var(--gold-soft), var(--gold) 60%, transparent);\r\n box-shadow: 0 0 14px 2px rgba(224,192,120,.7);\r\n animation: pulse 2.8s var(--ease-soft) infinite;\r\n}\r\n@keyframes pulse { 0%,100%{ transform: scale(1); opacity:.85 } 50%{ transform: scale(1.25); opacity:1 } }\r\n\r\n.link-gold {\r\n color: var(--gold-soft); border-bottom: 1px solid rgba(224,192,120,.4);\r\n padding-bottom: 2px; font-weight: 500; transition: color .3s, border-color .3s;\r\n}\r\n.link-gold:hover { color: var(--stone); border-color: var(--gold); }\r\n\r\n\/* \u2550\u2550\u2550 NAV \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\r\n display: flex; align-items: center; gap: 1.5rem;\r\n padding: 1.2rem var(--gutter);\r\n transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;\r\n border-bottom: 1px solid transparent;\r\n}\r\n.nav.is-scrolled {\r\n background: rgba(20,16,12,.72); backdrop-filter: blur(16px) saturate(1.2);\r\n border-bottom-color: var(--line); padding-top: .85rem; padding-bottom: .85rem;\r\n}\r\n.nav__brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }\r\n.nav__mark { color: var(--gold); display: grid; place-items: center; }\r\n.nav__word { font-family: var(--serif); font-size: 1.32rem; letter-spacing: .01em; }\r\n.nav__word em { color: var(--gold-soft); font-style: italic; }\r\n.nav__links { display: flex; gap: 2rem; }\r\n.nav__links a { font-size: .95rem; color: var(--stone-soft); position: relative; transition: color .3s; }\r\n.nav__links a::after {\r\n content: \"\"; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;\r\n background: var(--gold); transition: width .4s var(--ease);\r\n}\r\n.nav__links a:hover { color: var(--stone); }\r\n.nav__links a:hover::after { width: 100%; }\r\n.nav__cta {\r\n border: 1px solid var(--line-strong); border-radius: 100px; padding: .6rem 1.2rem;\r\n font-size: .92rem; transition: border-color .3s, background .3s, color .3s;\r\n}\r\n.nav__cta:hover { border-color: var(--gold); background: var(--gold); color: var(--espresso); }\r\n.nav__burger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }\r\n.nav__burger span { width: 24px; height: 2px; background: var(--stone); transition: .3s; }\r\n\r\n\/* \u2550\u2550\u2550 CHAPTER 1 \u2014 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n position: relative; min-height: 100svh; display: flex; align-items: center;\r\n padding: 8rem var(--gutter) 6rem; overflow: hidden;\r\n}\r\n.hero__scene { position: absolute; inset: 0; z-index: 0; }\r\n.hero__scene canvas { display: block; width: 100% !important; height: 100% !important; }\r\n\/* Static golden-hour fallback (also the mobile \/ reduced-motion visual) *\/\r\n.hero__fallback {\r\n position: absolute; inset: 0; z-index: 0;\r\n background-color: #14100c;\r\n background-image:\r\n \/* warm scrim keeps the headline legible over the photo *\/\r\n linear-gradient(180deg, rgba(30,22,14,.28) 0%, rgba(30,22,14,.45) 100%),\r\n url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/hero.jpg\"),\r\n \/* warm golden-hour fallback if hero.jpg is absent *\/\r\n radial-gradient(120% 90% at 74% 16%, rgba(224,192,120,.5), transparent 58%),\r\n radial-gradient(90% 80% at 15% 90%, rgba(120,90,58,.55), transparent 62%),\r\n linear-gradient(165deg, #6b4f34 0%, #4a3826 45%, #33271a 100%);\r\n background-size: cover; background-position: center;\r\n}\r\n\/* faint skyline silhouette under everything *\/\r\n.hero__fallback::after {\r\n content: \"\"; position: absolute; inset: auto 0 0 0; height: 42%;\r\n background:\r\n linear-gradient(180deg, transparent, rgba(30,20,10,.55)),\r\n url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='1440' height='320' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23000' fill-opacity='.5'%3E%3Crect x='60' y='235' width='120' height='85'\/%3E%3Crect x='200' y='255' width='90' height='65'\/%3E%3Crect x='310' y='215' width='70' height='105'\/%3E%3Crect x='500' y='175' width='130' height='145'\/%3E%3Cpath d='M495 175 L565 120 L635 175 Z'\/%3E%3Cpath d='M556 175 L565 35 L574 175 Z'\/%3E%3Crect x='561' y='20' width='8' height='18'\/%3E%3Crect x='665' y='245' width='80' height='75'\/%3E%3Cpath d='M772 245 Q800 182 828 245 Z'\/%3E%3Crect x='766' y='245' width='9' height='75'\/%3E%3Crect x='825' y='245' width='9' height='75'\/%3E%3Crect x='860' y='228' width='90' height='92'\/%3E%3Crect x='965' y='255' width='70' height='65'\/%3E%3Cpath d='M1075 320 L1120 195 L1128 200 L1090 320 Z'\/%3E%3Cpath d='M1165 320 L1120 195 L1112 200 L1150 320 Z'\/%3E%3Crect x='1245' y='238' width='110' height='82'\/%3E%3Crect x='1365' y='215' width='75' height='105'\/%3E%3Ccircle cx='1120' cy='190' r='7'\/%3E%3C\/g%3E%3Cg stroke='%23000' stroke-opacity='.5' stroke-width='3' fill='none'%3E%3Ccircle cx='1120' cy='190' r='82'\/%3E%3Cpath d='M1120 190 L1120 108 M1120 190 L1120 272 M1120 190 L1038 190 M1120 190 L1202 190 M1120 190 L1062 132 M1120 190 L1178 248 M1120 190 L1178 132 M1120 190 L1062 248'\/%3E%3C\/g%3E%3C\/svg%3E\") bottom center \/ cover no-repeat;\r\n opacity: .5;\r\n}\r\n.hero__veil {\r\n position: absolute; inset: 0; z-index: 1;\r\n background: linear-gradient(90deg, rgba(16,12,8,.82) 0%, rgba(16,12,8,.4) 42%, transparent 75%);\r\n}\r\n.hero__inner { position: relative; z-index: 2; max-width: 760px; }\r\n.hero__title {\r\n font-family: var(--serif); font-weight: 300;\r\n font-size: clamp(3rem, 9vw, 7rem); line-height: .98; letter-spacing: -.02em;\r\n margin: .5rem 0 1.8rem;\r\n}\r\n.hero__title span { display: block; }\r\n.hero__title--gold {\r\n font-style: italic;\r\n background: linear-gradient(100deg, var(--gold-soft), var(--gold) 70%);\r\n -webkit-background-clip: text; background-clip: text; color: transparent;\r\n}\r\n.hero__lede {\r\n font-size: clamp(1.1rem, 1.9vw, 1.4rem); color: var(--stone-soft);\r\n max-width: 40ch; line-height: 1.65; margin-bottom: 2.6rem;\r\n}\r\n.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }\r\n.hero__scroll {\r\n position: absolute; bottom: 2rem; left: var(--gutter); z-index: 2;\r\n display: flex; align-items: center; gap: 1rem; font-size: .78rem;\r\n letter-spacing: .2em; text-transform: uppercase; color: var(--stone-dim);\r\n}\r\n.hero__scroll-line {\r\n width: 60px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden;\r\n}\r\n.hero__scroll-line::after {\r\n content: \"\"; position: absolute; inset: 0; width: 40%;\r\n background: var(--gold); animation: scrollpush 2.4s var(--ease) infinite;\r\n}\r\n@keyframes scrollpush { 0%{ transform: translateX(-100%) } 60%,100%{ transform: translateX(250%) } }\r\n\r\n\/* \u2550\u2550\u2550 GENERIC SECTIONS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.section {\r\n position: relative; padding: clamp(5rem, 12vh, 9rem) var(--gutter);\r\n}\r\n.section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }\r\n\/* Warm morning-light sections invert the palette \u2014 the day-arc narrative *\/\r\n.section[data-mood=\"warm\"] {\r\n background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);\r\n color: #2a2016;\r\n}\r\n.section[data-mood=\"warm\"] .eyebrow { color: #9a7526; }\r\n.section[data-mood=\"warm\"] .section__lede,\r\n.section[data-mood=\"warm\"] p { color: #5c4a34; }\r\n.section[data-mood=\"warm\"] .btn--ghost { border-color: rgba(42,32,22,.24); color: #2a2016; background: rgba(42,32,22,.03); }\r\n\r\n\/* \u2500\u2500 Chapter II \u00b7 Home base grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.base__grid {\r\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;\r\n}\r\n.base-card {\r\n background: rgba(255,255,255,.5); border: 1px solid rgba(42,32,22,.1);\r\n border-radius: var(--radius); padding: 2rem 1.7rem;\r\n transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s;\r\n}\r\n.base-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(42,32,22,.28); background: rgba(255,255,255,.75); }\r\n.base-card--tall { grid-row: span 2; grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end;\r\n color: var(--stone); border-color: transparent; overflow: hidden;\r\n background-color: var(--green);\r\n \/* green scrim over a real photo (falls back to the gradient if photo missing) *\/\r\n background-image: linear-gradient(150deg, rgba(42,54,44,.72) 0%, rgba(30,38,30,.9) 100%), url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-cozy.jpg\"), linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);\r\n background-size: cover; background-position: center; }\r\n.base-card--tall h3, .base-card--tall p { color: var(--stone) !important; }\r\n.base-card--tall .base-card__icon { color: var(--gold-soft); }\r\n\/* Photo card (e.g. House bar & coffee) \u2014 dark scrim over a real photo, light text *\/\r\n.base-card--photo {\r\n color: var(--stone); border-color: transparent; overflow: hidden;\r\n background-color: var(--espresso-3);\r\n background-image: linear-gradient(160deg, rgba(20,14,8,.55) 0%, rgba(16,12,8,.85) 100%), url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/bar.jpg\"), linear-gradient(150deg, #2a2016, #14100c);\r\n background-size: cover; background-position: center;\r\n}\r\n.base-card--photo h3, .base-card--photo p { color: var(--stone) !important; }\r\n.base-card--photo .base-card__icon { color: var(--gold-soft); }\r\n.base-card--photo:hover { background-color: var(--espresso-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }\r\n.base-card__icon { width: 44px; height: 44px; color: #8a6a2a; margin-bottom: 1.4rem; }\r\n.base-card__icon svg { width: 100%; height: 100%; }\r\n.base-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: .6rem; }\r\n.base-card p { font-size: .98rem; line-height: 1.6; }\r\n.base-card--tall h3 { font-size: 2rem; }\r\n\r\n\/* \u2500\u2500 Chapter III \u00b7 Rooms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.rooms__tabs {\r\n display: flex; flex-wrap: wrap; gap: .6rem; max-width: var(--max); margin: 0 auto 2rem;\r\n}\r\n.rooms__tab {\r\n padding: .7rem 1.4rem; border-radius: 100px; border: 1px solid rgba(42,32,22,.2);\r\n font-size: .95rem; color: #6b5842; transition: all .3s var(--ease);\r\n}\r\n.rooms__tab.is-active { background: #2a2016; color: var(--cream); border-color: #2a2016; }\r\n.rooms__tab:hover:not(.is-active) { border-color: #9a7526; color: #2a2016; }\r\n.rooms__stage { max-width: var(--max); margin: 0 auto; }\r\n.rooms__panel {\r\n display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);\r\n align-items: stretch;\r\n}\r\n.rooms__panel[hidden] { display: none; }\r\n\/* Real photography with a crafted gradient as automatic fallback.\r\n The photo is the first background layer; if the file is missing it is\r\n simply skipped and the warm gradient below shows through \u2014 no broken image. *\/\r\n.rooms__art {\r\n border-radius: var(--radius); min-height: 340px; position: relative; overflow: hidden;\r\n box-shadow: var(--shadow);\r\n background-color: #221913;\r\n background-image: linear-gradient(150deg, #3a2c1c, #221913);\r\n background-size: cover; background-position: center;\r\n}\r\n.rooms__art[data-art=\"single\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-single.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n.rooms__art[data-art=\"double\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-double.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n.rooms__art[data-art=\"triple\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-friends.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n.rooms__art[data-art=\"quad\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-family.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n.rooms__art[data-art=\"dorm\"] { background-image: url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/room-dorm.jpg\"), linear-gradient(150deg,#3a2c1c,#221913); }\r\n\/* Soft cinematic vignette for depth + consistency across photos *\/\r\n.rooms__art::after {\r\n content: \"\"; position: absolute; inset: 0; pointer-events: none;\r\n background: linear-gradient(180deg, rgba(20,14,8,.12) 0%, transparent 30%, transparent 60%, rgba(20,14,8,.42) 100%);\r\n}\r\n.rooms__copy {\r\n background: rgba(255,255,255,.55); border: 1px solid rgba(42,32,22,.1);\r\n border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem);\r\n display: flex; flex-direction: column; align-items: flex-start;\r\n}\r\n.rooms__copy h3 { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 500; margin-bottom: 1rem; }\r\n.rooms__copy p { margin-bottom: 1.6rem; max-width: 40ch; }\r\n.rooms__spec { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }\r\n.rooms__spec li {\r\n font-size: .84rem; padding: .4rem .9rem; border-radius: 100px;\r\n background: rgba(42,32,22,.07); color: #5c4a34;\r\n}\r\n\r\n\/* \u2500\u2500 Chapter IV & V \u00b7 Guides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.guides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: var(--max); margin: 0 auto; }\r\n.guide-card {\r\n position: relative; border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.8rem);\r\n border: 1px solid var(--line); overflow: hidden;\r\n transition: transform .5s var(--ease), border-color .4s;\r\n}\r\n.guide-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }\r\n.guide-card--vienna { background: linear-gradient(155deg, rgba(56,73,59,.5), rgba(20,16,12,.4)); }\r\n.guide-card--home { background: linear-gradient(155deg, rgba(201,162,75,.16), rgba(20,16,12,.4)); }\r\n.guide-card::before {\r\n content: \"\"; position: absolute; top: -40%; right: -20%; width: 60%; height: 80%;\r\n background: radial-gradient(circle, rgba(224,192,120,.25), transparent 70%); filter: blur(30px);\r\n}\r\n.guide-card__tag {\r\n display: inline-block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;\r\n color: var(--gold); border: 1px solid var(--line-strong); border-radius: 100px;\r\n padding: .35rem .9rem; margin-bottom: 1.4rem; position: relative;\r\n}\r\n.guide-card h3 { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 400; margin-bottom: .8rem; }\r\n.guide-card p { color: var(--stone-soft); margin-bottom: 1.6rem; position: relative; max-width: 40ch; }\r\n.guide-card__prompts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.8rem; }\r\n.guide-card__prompts button {\r\n text-align: left; width: 100%; padding: .7rem 1rem; border-radius: 12px;\r\n border: 1px solid var(--line); background: rgba(244,236,223,.03);\r\n font-size: .92rem; color: var(--stone-soft); transition: all .3s var(--ease);\r\n}\r\n.guide-card__prompts button:hover { border-color: var(--gold); color: var(--stone); transform: translateX(4px); }\r\n\r\n\/* \u2500\u2500 Chapter VI \u00b7 Explore \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.explore__list { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line); }\r\n.explore-row {\r\n display: flex; align-items: baseline; gap: 1.2rem; padding: 1.5rem 0;\r\n border-bottom: 1px solid var(--line); transition: padding-left .4s var(--ease), color .4s;\r\n}\r\n.explore-row:hover { padding-left: 1rem; }\r\n.explore-row__name { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 400; white-space: nowrap; }\r\n.explore-row__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); align-self: center; }\r\n.explore-row__meta { color: var(--stone-soft); font-size: 1rem; white-space: nowrap; }\r\n.explore-row__meta b { color: var(--gold-soft); font-weight: 600; }\r\n.explore__cta { max-width: var(--max); margin: 2.5rem auto 0; color: var(--stone-soft); }\r\n\r\n\/* \u2500\u2500 Our Vienna locations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.loc__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; max-width: var(--max); margin: 0 auto; align-items: stretch; }\r\n.loc__map {\r\n position: relative; border-radius: var(--radius); overflow: hidden; min-height: 380px;\r\n border: 1px solid var(--line-strong);\r\n background: linear-gradient(160deg, rgba(28,22,15,.9), rgba(16,12,8,.95));\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow);\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.loc__mapsvg { width: 100%; height: 100%; }\r\n.loc__pin circle { fill: var(--gold); stroke: rgba(20,16,12,.8); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(224,192,120,.7)); transition: r .3s var(--ease); }\r\n.loc__pin text { fill: #241a0c; font: 700 8px var(--sans); text-anchor: middle; }\r\n.loc__pin[data-pin=\"home\"] circle { fill: var(--gold-soft); r: 9; }\r\n.loc__pin.is-active circle { r: 11; }\r\n.loc__pin { animation: locpulse 3s var(--ease-soft) infinite; transform-box: fill-box; transform-origin: center; }\r\n.loc__pin:nth-child(2){ animation-delay:.4s } .loc__pin:nth-child(3){ animation-delay:.8s }\r\n.loc__pin:nth-child(4){ animation-delay:1.2s } .loc__pin:nth-child(5){ animation-delay:1.6s }\r\n@keyframes locpulse { 0%,100%{ opacity:.85 } 50%{ opacity:1 } }\r\n.loc__maptag {\r\n position: absolute; left: 1rem; bottom: 1rem; font-size: .72rem; letter-spacing: .18em;\r\n text-transform: uppercase; color: var(--stone-dim);\r\n}\r\n.loc__list { display: flex; flex-direction: column; gap: .6rem; }\r\n.loc-card {\r\n display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;\r\n padding: 1.1rem 1.3rem; border-radius: 14px; border: 1px solid var(--line);\r\n background: linear-gradient(150deg, rgba(244,236,223,.05), rgba(244,236,223,.015));\r\n backdrop-filter: blur(8px); transition: transform .4s var(--ease), border-color .3s, background .3s; height: 100%;\r\n}\r\n.loc-card:hover { transform: translateX(5px); border-color: var(--gold); background: linear-gradient(150deg, rgba(201,162,75,.1), rgba(244,236,223,.02)); }\r\n.loc-card__no {\r\n width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;\r\n font-family: var(--serif); font-style: italic; color: var(--gold-soft);\r\n border: 1px solid var(--line-strong); flex-shrink: 0;\r\n}\r\n.loc-card.is-home .loc-card__no { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #241a0c; border-color: transparent; }\r\n.loc-card__body { display: flex; flex-direction: column; min-width: 0; }\r\n.loc-card__body b { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }\r\n.loc-card__body span { font-size: .84rem; color: var(--stone-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n.loc-card__go { color: var(--gold-soft); font-size: .85rem; font-weight: 500; white-space: nowrap; display: inline-flex; gap: .4rem; transition: gap .3s var(--ease); }\r\n.loc-card:hover .loc-card__go { gap: .8rem; }\r\n.loc-card__links { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; white-space: nowrap; }\r\n.loc-card__link { color: var(--gold); font-size: .86rem; font-weight: 600; display: inline-flex; gap: .35rem; transition: gap .3s var(--ease), color .3s; }\r\n.loc-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }\r\n.loc-card:hover .loc-card__link { gap: .7rem; }\r\n@media (max-width: 860px) { .loc__layout { grid-template-columns: 1fr; } .loc__map { min-height: 300px; order: 2; } }\r\n\r\n\/* \u2500\u2500 Chapter VII \u00b7 Easy stay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.easy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: var(--max); margin: 0 auto; }\r\n.easy-card {\r\n border: 1px solid rgba(42,32,22,.12); border-radius: var(--radius);\r\n padding: 2.2rem 1.8rem; background: rgba(255,255,255,.5);\r\n transition: transform .5s var(--ease), box-shadow .5s var(--ease);\r\n}\r\n.easy-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(42,32,22,.25); }\r\n.easy-card__num { font-family: var(--serif); font-size: 2.6rem; color: #9a7526; display: inline-flex; margin-bottom: 1rem; }\r\n.easy-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: .6rem; }\r\n.easy__note { text-align: center; margin-top: 2.5rem; max-width: var(--max); margin-inline: auto; }\r\n\r\n\/* \u2500\u2500 Groups & partnerships (glassmorphism) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.groups { position: relative; overflow: hidden; }\r\n.groups__glow {\r\n position: absolute; inset: 0; z-index: 0; pointer-events: none;\r\n background:\r\n radial-gradient(50% 60% at 15% 20%, rgba(201,162,75,.18), transparent 60%),\r\n radial-gradient(45% 55% at 85% 90%, rgba(56,73,59,.5), transparent 60%);\r\n}\r\n.groups .section__head, .groups__grid, .groups__mail { position: relative; z-index: 1; }\r\n.groups__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: var(--max); margin: 0 auto; }\r\n.group-card {\r\n position: relative; display: flex; flex-direction: column; align-items: flex-start;\r\n padding: clamp(1.8rem, 4vw, 2.8rem); border-radius: var(--radius); overflow: hidden;\r\n border: 1px solid var(--line-strong);\r\n background: linear-gradient(150deg, rgba(244,236,223,.08), rgba(244,236,223,.02));\r\n backdrop-filter: blur(14px) saturate(1.1);\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -40px rgba(0,0,0,.6);\r\n transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);\r\n}\r\n.group-card::before {\r\n content: \"\"; position: absolute; top: -40%; right: -20%; width: 55%; height: 80%;\r\n background: radial-gradient(circle, rgba(224,192,120,.28), transparent 70%);\r\n filter: blur(34px); pointer-events: none;\r\n}\r\n.group-card--partner::before { background: radial-gradient(circle, rgba(127,176,138,.3), transparent 70%); }\r\n.group-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 70px -40px rgba(0,0,0,.7); }\r\n.group-card__icon { width: 46px; height: 46px; color: var(--gold-soft); margin-bottom: 1.3rem; position: relative; }\r\n.group-card__icon svg { width: 100%; height: 100%; }\r\n.group-card h3 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 400; margin-bottom: .7rem; }\r\n.group-card p { color: var(--stone-soft); margin-bottom: 1.6rem; max-width: 42ch; line-height: 1.6; }\r\n.group-card__cta { margin-top: auto; color: var(--gold-soft); font-weight: 500; display: inline-flex; gap: .5rem; align-items: center; transition: gap .3s var(--ease); }\r\n.group-card:hover .group-card__cta { gap: .9rem; }\r\n.groups__mail { text-align: center; margin-top: 2.4rem; color: var(--stone-soft); }\r\n\r\n\/* \u2500\u2500 Chapter VIII \u00b7 Book \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.book { text-align: center; overflow: hidden; }\r\n.book::before {\r\n content: \"\"; position: absolute; inset: 0; z-index: 0;\r\n background: radial-gradient(80% 90% at 50% 120%, rgba(201,162,75,.25), transparent 60%);\r\n}\r\n.book__inner { position: relative; z-index: 1; max-width: 720px; }\r\n.book__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; margin-bottom: 1.4rem; }\r\n.book__lede { color: var(--stone-soft); font-size: 1.2rem; max-width: 44ch; margin: 0 auto 2.4rem; }\r\n.book__reassure { margin-top: 1.6rem; font-size: .88rem; color: var(--stone-dim); letter-spacing: .04em; }\r\n\r\n\/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.footer {\r\n padding: 4rem var(--gutter) 3rem; border-top: 1px solid var(--line);\r\n display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start;\r\n}\r\n.footer__brand p { color: var(--stone-dim); margin-top: .6rem; font-size: .92rem; }\r\n.footer__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: flex-end; }\r\n.footer__nav a, .footer__nav button { color: var(--stone-soft); font-size: .95rem; transition: color .3s; }\r\n.footer__nav a:hover { color: var(--gold-soft); }\r\n.footer__legal { grid-column: 1 \/ -1; color: var(--stone-dim); font-size: .82rem; padding-top: 2rem; border-top: 1px solid var(--line); }\r\n\r\n\/* \u2500\u2500 Sticky booking bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.stickybar {\r\n position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 160%);\r\n z-index: 90; display: flex; align-items: center; gap: 1.5rem;\r\n padding: .7rem .7rem .7rem 1.6rem; border-radius: 100px;\r\n background: rgba(28,22,15,.82); backdrop-filter: blur(16px);\r\n border: 1px solid var(--line-strong); box-shadow: var(--shadow);\r\n transition: transform .6s var(--ease); max-width: calc(100vw - 2rem);\r\n}\r\n.stickybar.is-visible { transform: translate(-50%, 0); }\r\n.stickybar__label { font-size: .9rem; color: var(--stone-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n\r\n\/* \u2500\u2500 Floating concierge FAB \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.fab {\r\n position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 91;\r\n display: flex; align-items: center; gap: .7rem; padding: .8rem 1.3rem .8rem .9rem;\r\n border-radius: 100px; background: linear-gradient(135deg, rgba(56,73,59,.95), rgba(28,22,15,.95));\r\n border: 1px solid var(--line-strong); box-shadow: var(--shadow);\r\n transform: translateY(160%); transition: transform .6s var(--ease), border-color .3s;\r\n}\r\n.fab.is-visible { transform: translateY(0); }\r\n.fab:hover { border-color: var(--gold); }\r\n.fab__label { font-size: .92rem; font-weight: 500; }\r\n@media (max-width: 560px) { .fab__label { display: none; } .fab { padding: .9rem; } }\r\n\r\n\/* \u2500\u2500 Reveal-on-scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n[data-reveal] {\r\n opacity: 0; transform: translateY(52px) scale(.985);\r\n transition: opacity 1s var(--ease), transform 1.1s var(--ease);\r\n transition-delay: calc(var(--d, 0) * 110ms);\r\n}\r\n[data-reveal].is-in { opacity: 1; transform: none; }\r\n\r\n\/* \u2550\u2550\u2550 MODALS (booking + chat) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.modal[hidden], .chat[hidden] { display: none; }\r\n.modal, .chat { position: fixed; inset: 0; z-index: 150; display: grid; }\r\n.modal__backdrop {\r\n position: absolute; inset: 0; background: rgba(8,6,4,.6); backdrop-filter: blur(8px);\r\n opacity: 0; transition: opacity .4s var(--ease);\r\n}\r\n.is-open .modal__backdrop { opacity: 1; }\r\n.modal__card {\r\n position: relative; z-index: 1; place-self: center; width: min(500px, calc(100vw - 2rem));\r\n background: linear-gradient(160deg, var(--espresso-3), var(--espresso-2));\r\n border: 1px solid var(--line-strong); border-radius: 24px; padding: 2.5rem;\r\n box-shadow: var(--shadow); transform: translateY(20px) scale(.98); opacity: 0;\r\n transition: transform .5s var(--ease), opacity .4s var(--ease);\r\n}\r\n.is-open .modal__card { transform: none; opacity: 1; }\r\n.modal__close, .chat__close {\r\n position: absolute; top: 1rem; right: 1.2rem; font-size: 1.8rem; line-height: 1;\r\n color: var(--stone-soft); width: 40px; height: 40px; border-radius: 50%;\r\n transition: background .3s, color .3s;\r\n}\r\n.modal__close:hover, .chat__close:hover { background: rgba(244,236,223,.08); color: var(--stone); }\r\n.booking-card__title { font-family: var(--serif); font-size: 2rem; font-weight: 400; margin-bottom: 1.6rem; }\r\n.booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n.booking-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; color: var(--stone-soft); letter-spacing: .05em; text-transform: uppercase; }\r\n.booking-form input, .booking-form select {\r\n font: inherit; font-size: 1rem; text-transform: none; letter-spacing: 0;\r\n padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line-strong);\r\n background: rgba(0,0,0,.25); color: var(--stone); color-scheme: dark;\r\n}\r\n.booking-form input:focus, .booking-form select:focus { border-color: var(--gold); outline: none; }\r\n.booking-form .btn { grid-column: 1 \/ -1; justify-content: center; margin-top: .5rem; }\r\n.booking-card__note { margin-top: 1.2rem; font-size: .84rem; color: var(--stone-dim); }\r\n\r\n\/* \u2550\u2550\u2550 CHAT PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.chat { justify-items: end; }\r\n.chat__panel {\r\n position: relative; z-index: 1; align-self: stretch;\r\n width: min(440px, 100vw); height: 100svh; display: flex; flex-direction: column;\r\n background: linear-gradient(180deg, rgba(28,22,15,.96), rgba(16,12,8,.98));\r\n backdrop-filter: blur(20px); border-left: 1px solid var(--line-strong);\r\n box-shadow: -40px 0 90px -40px rgba(0,0,0,.7);\r\n transform: translateX(100%); transition: transform .55s var(--ease);\r\n}\r\n.is-open .chat__panel { transform: none; }\r\n.chat__header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); gap: .5rem; }\r\n.chat__switch { display: flex; gap: .3rem; background: rgba(0,0,0,.3); padding: .3rem; border-radius: 100px; }\r\n.chat__mode {\r\n display: flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 100px;\r\n font-size: .84rem; color: var(--stone-soft); transition: all .3s var(--ease); white-space: nowrap;\r\n}\r\n.chat__mode-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stone-soft); transition: .3s; }\r\n.chat__mode.is-active { background: rgba(244,236,223,.08); color: var(--stone); }\r\n.chat__mode[data-mode=\"vienna\"].is-active .chat__mode-dot { background: #7fb08a; box-shadow: 0 0 8px #7fb08a; }\r\n.chat__mode[data-mode=\"home\"].is-active .chat__mode-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }\r\n.chat__close { position: static; }\r\n\r\n.chat__body { flex: 1; overflow-y: auto; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; }\r\n.msg { max-width: 85%; padding: .85rem 1.1rem; border-radius: 16px; font-size: .95rem; line-height: 1.55; animation: msgIn .5s var(--ease) both; }\r\n@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }\r\n.msg--bot { align-self: flex-start; background: rgba(244,236,223,.06); border: 1px solid var(--line); border-bottom-left-radius: 4px; }\r\n.msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #241a0c; border-bottom-right-radius: 4px; }\r\n.msg--bot strong { color: var(--gold-soft); }\r\n.msg--bot a { color: var(--gold-soft); text-decoration: underline; }\r\n.msg__pins { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }\r\n.msg__pin { display: flex; gap: .5rem; align-items: baseline; font-size: .86rem; color: var(--stone-soft); }\r\n.msg__pin::before { content: \"\ud83d\udccd\"; font-size: .8rem; }\r\n.typing { display: flex; gap: 4px; padding: 1rem 1.1rem; }\r\n.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-soft); animation: blink 1.2s infinite; }\r\n.typing span:nth-child(2){ animation-delay: .2s } .typing span:nth-child(3){ animation-delay: .4s }\r\n@keyframes blink { 0%,60%,100%{ opacity: .3 } 30%{ opacity: 1 } }\r\n\r\n.chat__prompts { display: flex; gap: .5rem; overflow-x: auto; padding: .8rem 1.2rem; border-top: 1px solid var(--line); }\r\n.chat__prompts button {\r\n white-space: nowrap; padding: .55rem 1rem; border-radius: 100px; border: 1px solid var(--line-strong);\r\n font-size: .84rem; color: var(--stone-soft); transition: all .3s var(--ease); flex-shrink: 0;\r\n}\r\n.chat__prompts button:hover { border-color: var(--gold); color: var(--stone); }\r\n.chat__input { display: flex; gap: .6rem; padding: .9rem 1.2rem; border-top: 1px solid var(--line); }\r\n.chat__input input { flex: 1; font: inherit; padding: .8rem 1.1rem; border-radius: 100px; border: 1px solid var(--line-strong); background: rgba(0,0,0,.3); color: var(--stone); }\r\n.chat__input input:focus { border-color: var(--gold); outline: none; }\r\n.chat__input button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #241a0c; transition: transform .3s; flex-shrink: 0; }\r\n.chat__input button:hover { transform: scale(1.06); }\r\n.chat__disclaimer { font-size: .72rem; color: var(--stone-dim); padding: 0 1.2rem 1rem; text-align: center; }\r\n\r\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 940px) {\r\n .nav__links { display: none; }\r\n .nav__cta { display: none; }\r\n .nav__burger { display: flex; }\r\n .base__grid { grid-template-columns: 1fr 1fr; }\r\n .base-card--tall { grid-column: span 2; grid-row: auto; }\r\n .rooms__panel { grid-template-columns: 1fr; }\r\n .rooms__art { min-height: 240px; }\r\n .guides { grid-template-columns: 1fr; }\r\n .easy__grid { grid-template-columns: 1fr; }\r\n .footer { grid-template-columns: 1fr; }\r\n .footer__nav { justify-content: flex-start; }\r\n\r\n \/* Mobile nav drawer *\/\r\n .nav.is-menu-open .nav__links {\r\n display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;\r\n background: rgba(20,16,12,.97); backdrop-filter: blur(16px); padding: 1.5rem var(--gutter);\r\n gap: 1.2rem; border-bottom: 1px solid var(--line);\r\n }\r\n .nav.is-menu-open .nav__cta { display: inline-flex; position: absolute; top: calc(100% + 12rem); left: var(--gutter); }\r\n}\r\n@media (max-width: 560px) {\r\n .base__grid { grid-template-columns: 1fr; }\r\n .base-card--tall { grid-column: auto; }\r\n .booking-form { grid-template-columns: 1fr; }\r\n .hero__scroll { display: none; }\r\n .stickybar__label { display: none; }\r\n .stickybar { padding: .5rem; left: auto; right: 1rem; transform: translateY(160%); }\r\n .stickybar.is-visible { transform: translateY(0); }\r\n .chat__panel { width: 100vw; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 REDUCED MOTION \u2014 honour the guest's setting \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }\r\n [data-reveal] { opacity: 1 !important; transform: none !important; }\r\n .hero__scene { display: none !important; } \/* static fallback only *\/\r\n .btn__orb, .fab__orb { animation: none; }\r\n [data-parallax] { transform: none !important; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n LIGHT \/ WARM THEME v2 \u2014 cream \u00b7 taupe \u00b7 mocha (Awwwards editorial)\r\n Overrides the dark base to a bright, luxurious gallery look.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root{\r\n --bg: #EAE3D6; \/* warm greige ground *\/\r\n --surface: #FBF8F2; \/* near-white warm card *\/\r\n --surface-2: #F2ECE0; \/* soft cream *\/\r\n --ink: #33291E; \/* deep warm brown text *\/\r\n --ink-soft: #6E6155; \/* taupe brown *\/\r\n --ink-dim: rgba(51,41,30,.5);\r\n --accent: #A6763F; \/* caramel \/ bronze *\/\r\n --accent-soft:#C0904F;\r\n --mocha-a: #9A7452; \/* mocha gradient cards *\/\r\n --mocha-b: #6E5238;\r\n --muted: #6E6155;\r\n --line: rgba(51,41,30,.12);\r\n --line-strong: rgba(51,41,30,.22);\r\n --radius: 26px;\r\n --shadow: 0 30px 70px -40px rgba(51,32,14,.4), 0 10px 24px -16px rgba(51,32,14,.28);\r\n}\r\nbody{ background: var(--bg); color: var(--ink); }\r\n.grain{ opacity:.03; mix-blend-mode:multiply; }\r\n\r\n\/* Nav \u2014 dark text (bright hero + light scrolled bar) *\/\r\n.nav__word{ color: var(--ink); }\r\n.nav__links a{ color: var(--ink-soft); }\r\n.nav__links a:hover{ color: var(--ink); }\r\n.nav__cta{ color: var(--ink); border-color: var(--line-strong); }\r\n.nav__burger span{ background: var(--ink); }\r\n.nav.is-scrolled{ background: rgba(251,248,242,.9); border-bottom-color: var(--line); }\r\n.nav.is-scrolled .nav__cta:hover{ color: #fff; background: var(--accent); border-color: var(--accent); }\r\n.nav.is-menu-open .nav__links{ background: rgba(251,248,242,.98); border-bottom-color: var(--line); }\r\n\r\n\/* Hero \u2014 light cream scrim + dark editorial text over the bright golden scene *\/\r\n.hero__veil{ background: linear-gradient(90deg, rgba(250,246,238,.74) 0%, rgba(250,246,238,.34) 46%, transparent 82%); }\r\n.hero__lede{ color: #5a4c3a; }\r\n.hero__scroll{ color: var(--ink-dim); }\r\n.hero__scroll-line{ background: var(--line-strong); }\r\n.hero .btn--ghost{ color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,.45); }\r\n\r\n\/* Section ledes \/ primitives *\/\r\n.section__lede{ color: var(--ink-soft); }\r\n.eyebrow{ color: var(--accent); }\r\n.link-gold{ color: var(--accent); border-bottom-color: rgba(166,118,63,.4); }\r\n.link-gold:hover{ color: var(--ink); border-bottom-color: var(--accent); }\r\n\r\n\/* Guides *\/\r\n.guide-card{ background: var(--surface); border-color: var(--line); box-shadow: 0 24px 55px -34px rgba(51,32,14,.3); }\r\n.guide-card--vienna{ background: linear-gradient(155deg,#EEEBE0,var(--surface)); }\r\n.guide-card--home{ background: linear-gradient(155deg,#F4E9D6,var(--surface)); }\r\n.guide-card::before{ opacity:.45; }\r\n.guide-card h3{ color: var(--ink); }\r\n.guide-card p{ color: var(--ink-soft); }\r\n.guide-card__tag{ color: var(--accent); border-color: var(--line-strong); }\r\n.guide-card__prompts button{ border-color: var(--line); background: rgba(51,41,30,.03); color: var(--ink-soft); }\r\n.guide-card__prompts button:hover{ border-color: var(--accent); color: var(--ink); }\r\n\r\n\/* Explore *\/\r\n.explore__list, .explore-row{ border-color: var(--line); }\r\n.explore-row__meta{ color: var(--ink-soft); }\r\n.explore-row__meta b{ color: var(--accent); }\r\n.explore-row__line{ background: linear-gradient(90deg,var(--line-strong),transparent); }\r\n.explore__cta{ color: var(--ink-soft); }\r\n\r\n\/* Locations cards *\/\r\n.loc-card{ background: var(--surface); border-color: var(--line); box-shadow: 0 18px 44px -34px rgba(51,32,14,.28); }\r\n.loc-card:hover{ border-color: var(--accent); background: var(--surface); }\r\n.loc-card__body span{ color: var(--ink-soft); }\r\n.loc-card__go{ color: var(--accent); }\r\n.loc-card__link{ color: var(--accent); }\r\n.loc-card__no{ color: var(--accent); border-color: var(--line-strong); }\r\n\r\n\/* Groups *\/\r\n.group-card{ background: var(--surface); border-color: var(--line); box-shadow: 0 24px 55px -34px rgba(51,32,14,.3); }\r\n.group-card h3{ color: var(--ink); }\r\n.group-card p{ color: var(--ink-soft); }\r\n.group-card__cta{ color: var(--accent); }\r\n.group-card__icon{ color: var(--accent); }\r\n.groups__mail{ color: var(--ink-soft); }\r\n.groups__glow{ opacity:.55; }\r\n\r\n\/* Book *\/\r\n.book__lede{ color: var(--ink-soft); }\r\n.book__reassure{ color: var(--ink-dim); }\r\n.book::before{ background: radial-gradient(80% 90% at 50% 120%, rgba(166,118,63,.2), transparent 60%); }\r\n\r\n\/* Footer *\/\r\n.footer{ border-color: var(--line); }\r\n.footer__brand p{ color: var(--ink-soft); }\r\n.footer__nav a, .footer__nav button{ color: var(--ink-soft); }\r\n.footer__nav a:hover{ color: var(--accent); }\r\n.footer__legal{ color: var(--ink-dim); border-color: var(--line); line-height: 1.9; }\r\n.footer__legal a{ color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }\r\n.footer__legal a:hover{ color: var(--accent); }\r\n\r\n\/* \u2500\u2500 Real Google Map (keyless iframe) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.loc__map{\r\n padding: 0; background: none; border: 0; box-shadow: var(--shadow);\r\n border-radius: var(--radius); overflow: hidden; min-height: 440px;\r\n}\r\n.loc__map iframe{\r\n width: 100%; height: 100%; min-height: 440px; border: 0; display: block;\r\n filter: saturate(.92) contrast(.98);\r\n}\r\n@media (max-width: 860px){ .loc__map, .loc__map iframe{ min-height: 320px; } .loc__map{ order: 2; } }\r\n\r\n\/* \u2500\u2500 Parallax \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n[data-parallax]{ will-change: transform; }\r\n\r\n\r\n\/* \u2500\u2500 Base photo-card variants (kitchen, courtyard) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.base-card--kitchen{\r\n background-image: linear-gradient(160deg, rgba(20,14,8,.5) 0%, rgba(16,12,8,.82) 100%), url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/kitchen.jpg\"), linear-gradient(150deg,#2a2016,#14100c);\r\n}\r\n.base-card--courtyard{\r\n background-image: linear-gradient(160deg, rgba(20,14,8,.42) 0%, rgba(30,40,32,.8) 100%), url(\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/courtyard.jpg\"), linear-gradient(150deg,#38493b,#2a362c);\r\n}\r\n\r\n\/* \u2500\u2500 Gallery (\"A look inside\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.gallery__grid{\r\n display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px;\r\n gap: 1rem; max-width: var(--max); margin: 0 auto;\r\n}\r\n.gallery__item{\r\n position: relative; overflow: hidden; border-radius: 18px; box-shadow: var(--shadow);\r\n background: #2a2016;\r\n}\r\n.gallery__item img{\r\n width: 100%; height: 100%; object-fit: cover; display: block;\r\n transition: transform 1s var(--ease); filter: saturate(1.02);\r\n}\r\n.gallery__item:hover img{ transform: scale(1.07); }\r\n.gallery__item::after{\r\n content: attr(data-label); position: absolute; left: 1rem; bottom: .85rem;\r\n color: #fff; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .01em;\r\n text-shadow: 0 2px 12px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px);\r\n transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none;\r\n}\r\n.gallery__item::before{\r\n content: \"\"; position: absolute; inset: 0; pointer-events: none;\r\n background: linear-gradient(180deg, transparent 45%, rgba(20,14,8,.55) 100%);\r\n opacity: 0; transition: opacity .4s var(--ease);\r\n}\r\n.gallery__item:hover::after, .gallery__item:hover::before{ opacity: 1; }\r\n.gallery__item:hover::after{ transform: translateY(0); }\r\n.gallery__item--wide{ grid-column: span 2; }\r\n.gallery__item--tall{ grid-row: span 2; }\r\n@media (max-width: 860px){\r\n .gallery__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }\r\n .gallery__item--tall{ grid-row: span 1; }\r\n}\r\n\r\n\/* \u2500\u2500 Logo (nav + footer) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.nav__logo{ height: 42px; width: auto; display: block; transition: height .4s var(--ease); }\r\n.nav.is-scrolled .nav__logo{ height: 34px; }\r\n.footer__logo{ height: 54px; width: auto; display: block; margin-bottom: .2rem; }\r\n@media (max-width: 560px){ .nav__logo{ height: 30px; } }\r\n\r\n\/* \u2500\u2500 Footer social links \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.footer__social{ display: flex; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap; }\r\n.footer__social .social{\r\n display: inline-flex; align-items: center; gap: .5rem;\r\n padding: .5rem .9rem .5rem .7rem; border: 1px solid var(--line);\r\n border-radius: 999px; color: var(--ink-soft); font-size: .9rem; font-weight: 500;\r\n background: var(--surface); transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);\r\n}\r\n.footer__social .social svg{ display: block; }\r\n.footer__social .social:hover{\r\n color: var(--accent); border-color: var(--accent); transform: translateY(-2px);\r\n}\r\n@media (prefers-reduced-motion: reduce){ .footer__social .social:hover{ transform: none; } }\r\n\r\n\/* \u2500\u2500 Booking band (UP Hotel IBE) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.bookbar{ position: relative; z-index: 3; padding: 0 var(--gutter) clamp(2rem,5vw,3.5rem); margin-top: clamp(-5.5rem, -6vw, -3rem); }\r\n.bookbar__inner{\r\n max-width: var(--max); margin: 0 auto; background: var(--surface);\r\n border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);\r\n padding: clamp(1.4rem, 3vw, 2.4rem);\r\n}\r\n.bookbar__title{ font-family: var(--serif); font-size: clamp(1.3rem,2.5vw,1.7rem); color: var(--ink); margin-bottom: 1rem; }\r\n.bookbar__note{ margin-top: 1rem; font-size: .84rem; color: var(--ink-dim); letter-spacing: .03em; }\r\n.ibe-wrap{ width: 100%; min-height: 64px; }\r\n.ibe-wrap--book{ margin: 1.8rem auto; max-width: 860px; }\r\n\r\n\/* \u2500\u2500 Group booking request form \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.groups__layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:1.4rem; max-width:var(--max); margin:0 auto; position:relative; z-index:1; align-items:start; }\r\n.group-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,3.5vw,2.6rem); box-shadow:0 24px 55px -34px rgba(51,32,14,.3); }\r\n.group-form h3{ font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:400; color:var(--ink); }\r\n.group-form h3 span{ color:var(--accent); font-size:.62em; font-style:italic; }\r\n.group-form__sub{ color:var(--ink-soft); margin:.5rem 0 1.6rem; font-size:.98rem; }\r\n.group-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem; }\r\n.group-form label{ display:flex; flex-direction:column; gap:.4rem; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }\r\n.group-form .opt{ text-transform:none; letter-spacing:0; opacity:.6; }\r\n.group-form input, .group-form textarea{ font:inherit; font-size:1rem; text-transform:none; letter-spacing:0; padding:.75rem .9rem; border-radius:12px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); transition:border-color .3s; }\r\n.group-form input:focus, .group-form textarea:focus{ outline:none; border-color:var(--accent); }\r\n.group-form__full{ margin-top:1rem; }\r\n.group-form__field{ border:0; padding:0; margin:1.3rem 0 0; }\r\n.group-form__field legend{ font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.7rem; }\r\n.group-form .chk{ display:inline-flex; flex-direction:row; align-items:center; gap:.5rem; text-transform:none; letter-spacing:0; font-size:.95rem; color:var(--ink); margin:0 1.3rem .55rem 0; cursor:pointer; }\r\n.group-form .chk input{ width:auto; accent-color:var(--accent); }\r\n.group-form__ok{ margin-top:1.1rem; color:#2e6b3f; font-size:.96rem; background:rgba(56,107,63,.08); border:1px solid rgba(56,107,63,.28); padding:.85rem 1.05rem; border-radius:12px; }\r\n.group-side{ display:flex; flex-direction:column; gap:1.1rem; }\r\n.group-side .group-card{ height:auto; }\r\n.group-side .groups__mail{ margin:0; text-align:left; }\r\n@media(max-width:860px){ .groups__layout{ grid-template-columns:1fr; } .group-form__grid{ grid-template-columns:1fr; } }\r\n\r\n\/* \u2550\u2550\u2550 SCROLL PROGRESS BAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.scrollbar{\r\n position: fixed; top: 0; left: 0; height: 3px; width: 0%;\r\n background: linear-gradient(90deg, var(--accent-soft), var(--accent));\r\n z-index: 300; pointer-events: none; transition: width .1s linear;\r\n}\r\n\r\n\/* \u2550\u2550\u2550 HORIZONTAL-SCROLL GALLERY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hgallery{ position: relative; background: linear-gradient(180deg, var(--bg), var(--surface-2)); }\r\n.hgallery__pin{\r\n position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;\r\n display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem,3vh,2.2rem);\r\n}\r\n.hgallery__head{ padding: 0 var(--gutter); max-width: var(--max); }\r\n.hgallery__title{ font-family: var(--serif); font-weight: 400; color: var(--ink);\r\n font-size: clamp(1.9rem,4.5vw,3.4rem); line-height: 1.03; margin-top: .4rem; }\r\n.hgallery__hint{ margin-top: .8rem; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }\r\n.hgallery__track{ display: flex; gap: clamp(1rem,1.6vw,1.6rem); padding: 0 var(--gutter); will-change: transform; }\r\n.hg-item{\r\n position: relative; flex: 0 0 auto; width: clamp(240px, 40vw, 540px); height: 60vh; height: 60svh;\r\n border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: #2a2016;\r\n}\r\n.hg-item img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }\r\n.hg-item:hover img{ transform: scale(1.05); }\r\n.hg-item::before{ content:\"\"; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(20,14,8,.6)); }\r\n.hg-item::after{\r\n content: attr(data-label); position: absolute; left: 1.1rem; bottom: 1rem; color: #fff;\r\n font-family: var(--serif); font-size: 1.15rem; text-shadow: 0 2px 12px rgba(0,0,0,.6);\r\n}\r\n\/* Fallback: horizontal swipe strip when JS\/pin is off, mobile, or reduced-motion *\/\r\n.hgallery.is-static .hgallery__pin{ position: static; height: auto; padding: clamp(3rem,8vh,6rem) 0; }\r\n.hgallery.is-static .hgallery__track{ overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; }\r\n.hgallery.is-static .hg-item{ scroll-snap-align: center; height: 52vh; }\r\n@media (max-width: 700px){ .hg-item{ width: 78vw; height: 54vh; } }\r\n@media (prefers-reduced-motion: reduce){\r\n .hgallery__pin{ position: static; height: auto; padding: 3rem 0; }\r\n .hgallery__track{ overflow-x: auto; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 INTERACTIONS: TILT \u00b7 WORD-REVEAL \u00b7 STORY \u00b7 3D FLY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* 3D tilt on cards (set via JS) *\/\r\n[data-tilt]{ transition: transform .5s var(--ease); transform-style: preserve-3d; will-change: transform; }\r\n[data-tilt]:hover{ transition: transform .12s ease-out; }\r\n\r\n\/* Word-by-word heading reveal *\/\r\n.word{ display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg);\r\n transition: opacity .6s var(--ease), transform .6s var(--ease);\r\n transition-delay: calc(var(--wd, 0) * 45ms); }\r\n[data-reveal].is-in .word, .is-in .word{ opacity: 1; transform: none; }\r\n\r\n\/* Sticky story *\/\r\n.story{ position: relative; height: 260vh; background: linear-gradient(180deg, var(--surface-2), var(--bg)); }\r\n.story__pin{ position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column;\r\n align-items: center; justify-content: center; text-align: center; gap: 1.4rem; overflow: hidden; }\r\n.story__eyebrow{ font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }\r\n.story__lines{ display: flex; flex-direction: column; gap: .2rem; }\r\n.story__line{ font-family: var(--serif); font-weight: 300; color: var(--ink);\r\n font-size: clamp(2.2rem, 8vw, 5.5rem); line-height: 1.02; opacity: .12; transform: translateY(.3em);\r\n transition: opacity .5s var(--ease), transform .5s var(--ease); }\r\n.story__line.is-lit{ opacity: 1; transform: none; }\r\n.story__bar{ position: absolute; bottom: 12vh; width: min(260px, 60vw); height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }\r\n.story__bar span{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }\r\n\r\n\/* 3D fly-through of the five houses *\/\r\n.fly{ position: relative; height: 460vh; background: radial-gradient(80% 60% at 50% 30%, #241c12, var(--espresso)); }\r\n.fly__pin{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 900px; }\r\n.fly__head{ position: absolute; top: clamp(5rem, 12vh, 8rem); left: var(--gutter); right: var(--gutter); z-index: 6; }\r\n.fly__head .eyebrow{ color: var(--accent-soft); }\r\n.fly__title{ font-family: var(--serif); font-weight: 300; color: var(--stone);\r\n font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.02; margin-top: .3rem; }\r\n.fly__space{ position: absolute; inset: 0; transform-style: preserve-3d; }\r\n.fly__panel{\r\n position: absolute; left: 50%; top: 50%; width: min(560px, 82vw);\r\n transform: translate(-50%, -50%) translateZ(calc(var(--i) * -900px - 900px));\r\n padding: clamp(1.8rem, 4vw, 3rem); border-radius: 26px; text-align: left;\r\n background: linear-gradient(155deg, rgba(201,162,75,.16), rgba(20,16,12,.55));\r\n border: 1px solid var(--line-strong); backdrop-filter: blur(6px);\r\n box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); will-change: opacity;\r\n}\r\n.fly__panel .fly__no{ font-family: var(--serif); font-style: italic; color: var(--gold-soft); font-size: 1.4rem; }\r\n.fly__panel h3{ font-family: var(--serif); font-weight: 400; color: var(--stone); font-size: clamp(1.8rem, 4vw, 2.8rem); margin: .3rem 0 .5rem; }\r\n.fly__panel p{ color: var(--stone-soft); font-size: 1.02rem; }\r\n.fly__hint{ position: absolute; bottom: 8vh; left: 0; right: 0; text-align: center; z-index: 6;\r\n font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stone-dim); }\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n .story{ height: auto; } .story__pin{ position: static; height: auto; padding: 5rem 0; }\r\n .story__line{ opacity: 1; transform: none; }\r\n .fly{ height: auto; } .fly__pin{ position: static; height: auto; padding: 5rem 0; perspective: none; min-height: auto; }\r\n .fly__space{ position: static; transform: none !important; }\r\n .fly__panel{ position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; width: auto; max-width: 640px; margin: 1rem auto; }\r\n .fly__head{ position: static; margin-bottom: 1.5rem; }\r\n .fly__hint{ display: none; }\r\n .word{ opacity: 1 !important; transform: none !important; }\r\n [data-tilt]{ transform: none !important; }\r\n}\r\n\r\n<\/style>\r\n\r\n \r\n <script type=\"importmap\">\r\n {\r\n \"imports\": {\r\n \"three\": \"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/vendor\/three.module.min.js\"\r\n }\r\n }\r\n <\/script>\r\n\r\n \r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"LodgingBusiness\",\r\n \"name\": \"Do Step Inn Home \u2014 Hotel & Hostel\",\r\n \"description\": \"A calm, well-connected home base in Vienna. Private rooms and dorms opposite Westbahnhof, one block from Mariahilfer Stra\u00dfe. Self check-in, rooms for every budget.\",\r\n \"slogan\": \"Feel at home. Step into Vienna.\",\r\n \"address\": {\r\n \"@type\": \"PostalAddress\",\r\n \"streetAddress\": \"Felberstra\u00dfe 20\",\r\n \"addressLocality\": \"Vienna\",\r\n \"postalCode\": \"1150\",\r\n \"addressCountry\": \"AT\"\r\n },\r\n \"amenityFeature\": [\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Free WiFi\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Self check-in\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Guest kitchen\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Luggage storage\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Garden courtyard\", \"value\": true },\r\n { \"@type\": \"LocationFeatureSpecification\", \"name\": \"Parking\", \"value\": true }\r\n ],\r\n \"checkinTime\": \"15:00\",\r\n \"checkoutTime\": \"11:00\",\r\n \"petsAllowed\": \"Please contact the hotel team for confirmation.\",\r\n \"publicAccess\": true,\r\n \"nearbyAttractions\": [\"Westbahnhof\", \"Mariahilfer Stra\u00dfe\", \"Stephansdom\", \"Belvedere Palace\"]\r\n }\r\n <\/script>\r\n <style>\r\n \/* Full-bleed fit for Elementor: break out of the column to full viewport width *\/\r\n #top{ width: 100vw; margin-left: calc(50% - 50vw); }\r\n .bookbar{ width: 100vw; margin-left: calc(50% - 50vw); }\r\n \/* No built-in fixed header in this build \u2014 reclaim the hero's top space *\/\r\n .hero{ padding-top: clamp(3rem, 8vh, 6rem); }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <a class=\"skip-link\" href=\"#chapter-rooms\">Skip to rooms & booking<\/a>\r\n\r\n \r\n <div class=\"grain\" aria-hidden=\"true\"><\/div>\r\n <div class=\"scrollbar\" id=\"scrollbar\" aria-hidden=\"true\"><\/div>\r\n\r\n <main id=\"top\">\r\n\r\n \r\n <section class=\"hero\" id=\"chapter-arrival\" data-chapter aria-label=\"Arrival\">\r\n \r\n <div class=\"hero__scene\" id=\"scene-mount\" aria-hidden=\"true\"><\/div>\r\n <div class=\"hero__fallback\" data-parallax=\"0.25\" aria-hidden=\"true\"><\/div>\r\n <div class=\"hero__veil\" aria-hidden=\"true\"><\/div>\r\n\r\n <div class=\"hero__inner\" data-parallax=\"0.08\">\r\n <p class=\"eyebrow reveal\" data-reveal>Vienna \u00b7 1150 \u00b7 opposite Westbahnhof<\/p>\r\n <h1 class=\"hero__title\">\r\n <span class=\"reveal\" data-reveal>Feel at home.<\/span>\r\n <span class=\"reveal hero__title--gold\" data-reveal data-delay=\"1\">Step into Vienna.<\/span>\r\n <\/h1>\r\n <p class=\"hero__lede reveal\" data-reveal data-delay=\"2\">\r\n Off the train, up the step, and you\u2019re home. Your calm base in the middle of\r\n everything \u2014 rooms for every budget, the whole city at your door.\r\n <\/p>\r\n <div class=\"hero__actions reveal\" data-reveal data-delay=\"3\">\r\n <button class=\"btn btn--gold\" data-open-booking type=\"button\">Start your stay<\/button>\r\n <button class=\"btn btn--ghost\" data-open-concierge=\"vienna\" type=\"button\">\r\n <span class=\"btn__orb\" aria-hidden=\"true\"><\/span> Ask your concierge\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero__scroll reveal\" data-reveal data-delay=\"4\" aria-hidden=\"true\">\r\n <span>Scroll to arrive<\/span>\r\n <span class=\"hero__scroll-line\"><\/span>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"bookbar\" id=\"book-top\" aria-label=\"Check availability\">\r\n <div class=\"bookbar__inner\">\r\n <p class=\"bookbar__title\">Check availability & book direct<\/p>\r\n <div class=\"ibe-wrap\"><ibe-up ibe-key=\"35b41b51-d117-4319-8ccd-11eafa2a07bc\" language=\"en\"><\/ibe-up><\/div>\r\n <p class=\"bookbar__note\">Best rate direct \u00b7 free cancellation options \u00b7 instant confirmation<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section base\" id=\"chapter-base\" data-chapter data-mood=\"warm\" aria-label=\"Your home base\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter II \u00b7 Your home base<\/p>\r\n <h2 class=\"section__title\" data-reveal>\r\n Drop your bag.<br \/><span class=\"ital\">Breathe.<\/span>\r\n <\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Not a party hostel. Not a faceless budget hotel. A warm, easy place to land \u2014\r\n with a kitchen to cook in, a courtyard to slow down in, and your own quiet corner\r\n whenever you want it.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"base__grid\" role=\"list\">\r\n <li class=\"base-card base-card--tall\" data-reveal>\r\n <div class=\"base-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><path d=\"M8 34V12l12-7 12 7v22M16 34V24h8v10\" stroke=\"currentColor\" stroke-width=\"1.4\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <h3>A calm home base<\/h3>\r\n <p>Private singles, doubles, triples and quads \u2014 or a bed in a bright dorm. Every room its own bathroom, linen and fast WiFi. Your space, your budget.<\/p>\r\n <\/li>\r\n <li class=\"base-card base-card--photo base-card--kitchen\" data-reveal>\r\n <div class=\"base-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><path d=\"M6 30h28M10 30V16h20v14M14 16v-4h12v4M17 22h6\" stroke=\"currentColor\" stroke-width=\"1.4\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <h3>Guest kitchen<\/h3>\r\n <p>Cook like a local, share a table, save your euros for the city.<\/p>\r\n <\/li>\r\n <li class=\"base-card base-card--photo base-card--courtyard\" data-reveal>\r\n <div class=\"base-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><path d=\"M20 6C13 12 10 17 10 23a10 10 0 0 0 20 0c0-6-3-11-10-17Z\" stroke=\"currentColor\" stroke-width=\"1.4\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <h3>Garden courtyard<\/h3>\r\n <p>A quiet outdoor corner to catch your breath between adventures.<\/p>\r\n <\/li>\r\n <li class=\"base-card base-card--photo\" data-reveal>\r\n <div class=\"base-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><circle cx=\"20\" cy=\"20\" r=\"13\" stroke=\"currentColor\" stroke-width=\"1.4\" fill=\"none\"\/><path d=\"M20 7v26M7 20h26\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><\/svg>\r\n <\/div>\r\n <h3>House bar & coffee<\/h3>\r\n <p>A proper coffee in the morning, billiards, darts and a small bar for easy evenings in.<\/p>\r\n <\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n \r\n <section class=\"hgallery\" id=\"chapter-gallery\" data-chapter aria-label=\"A look inside\">\r\n <div class=\"hgallery__pin\">\r\n <div class=\"hgallery__head\">\r\n <p class=\"eyebrow\">A look inside<\/p>\r\n <h2 class=\"hgallery__title\">Warm, colourful, <span class=\"ital\">unmistakably ours.<\/span><\/h2>\r\n <p class=\"hgallery__hint\" aria-hidden=\"true\">Keep scrolling \u2192<\/p>\r\n <\/div>\r\n <div class=\"hgallery__track\" id=\"hgtrack\">\r\n <figure class=\"hg-item\" data-label=\"Wiener Espresso\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06286.jpg\" alt=\"An espresso pouring into an Original Wiener cup\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"An easy evening in\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_DSC8180.jpg\" alt=\"A couple with wine in a brick-walled room\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Breakfast buffet\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9695_Lightroom.JPG\" alt=\"Fresh bread and gugelhupf at the breakfast buffet\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"The house bar\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0217_Lightroom.jpg\" alt=\"The house bar with vintage signs and glasses\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"A proper coffee\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06272.jpg\" alt=\"A milky Viennese coffee\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Arrival\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_DSC8075.jpg\" alt=\"A couple arriving in their room with luggage\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Breakfast room\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0229_Lightroom.jpg\" alt=\"Colourful breakfast room with brick walls\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Fresh juice\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9717_Lightroom.JPG\" alt=\"Fresh orange juice at the breakfast buffet\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Your floor\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0170_Lightroom.jpg\" alt=\"Bright hallway to the rooms\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"A glass of red\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06192.jpg\" alt=\"Red wine poured at the house bar\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Festive courtyard\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06332.jpg\" alt=\"Christmas tree in the courtyard at night\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Bright dorms\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_DSC7942.jpg\" alt=\"A guest on a bunk bed in a bright dorm\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Cereals & fruit\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9667_Lightroom.JPG\" alt=\"Cereals and fresh fruit\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Guest kitchen\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0231_Lightroom.jpg\" alt=\"The stainless-steel guest kitchen\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Brick & stairs\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0165_Lightroom.jpg\" alt=\"The brick staircase\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Time to unwind\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_DSC8167.jpg\" alt=\"A couple relaxing with wine\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Fresh bread\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9713_Lightroom.JPG\" alt=\"Slicing fresh bread at breakfast\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Make friends\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/DSC06383.jpg\" alt=\"Two guests chatting on a dorm bed\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Fresh fruit\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/IMG_9702_Lightroom.JPG\" alt=\"A basket of fresh fruit\" loading=\"lazy\" \/><\/figure>\r\n <figure class=\"hg-item\" data-label=\"Kitchen & lounge\"><img decoding=\"async\" src=\"https:\/\/piaxoxo.github.io\/Do-Step-Inn-Home\/assets\/img\/_MG_0232_Lightroom.jpg\" alt=\"Guest kitchen and lounge\" loading=\"lazy\" \/><\/figure>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"story\" id=\"chapter-story\" aria-label=\"Your arrival\">\r\n <div class=\"story__pin\">\r\n <p class=\"story__eyebrow\">Feel at home<\/p>\r\n <div class=\"story__lines\">\r\n <p class=\"story__line\" data-step=\"0\">Off the train.<\/p>\r\n <p class=\"story__line\" data-step=\"1\">Up the step.<\/p>\r\n <p class=\"story__line\" data-step=\"2\"><span class=\"ital\">You\u2019re home.<\/span><\/p>\r\n <\/div>\r\n <div class=\"story__bar\" aria-hidden=\"true\"><span id=\"story-fill\"><\/span><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section rooms\" id=\"chapter-rooms\" data-chapter data-mood=\"warm\" aria-label=\"Rooms made simple\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter III \u00b7 Rooms made simple<\/p>\r\n <h2 class=\"section__title\" data-reveal>Choose by how you travel.<\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n No confusing grid of tiles. Tell us who\u2019s arriving \u2014 we\u2019ll show you where you\u2019ll feel at home.\r\n Honest prices, every budget under one roof.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"rooms__tabs\" role=\"tablist\" aria-label=\"Who's arriving\">\r\n <button role=\"tab\" class=\"rooms__tab is-active\" data-room-tab=\"solo\" aria-selected=\"true\">Solo<\/button>\r\n <button role=\"tab\" class=\"rooms__tab\" data-room-tab=\"couple\" aria-selected=\"false\">Couple<\/button>\r\n <button role=\"tab\" class=\"rooms__tab\" data-room-tab=\"friends\" aria-selected=\"false\">Friends<\/button>\r\n <button role=\"tab\" class=\"rooms__tab\" data-room-tab=\"family\" aria-selected=\"false\">Family<\/button>\r\n <button role=\"tab\" class=\"rooms__tab\" data-room-tab=\"budget\" aria-selected=\"false\">Best value<\/button>\r\n <\/div>\r\n\r\n <div class=\"rooms__stage\" data-reveal>\r\n <div class=\"rooms__panel is-active\" data-room-panel=\"solo\">\r\n <div class=\"rooms__art\" data-art=\"single\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>The Single<\/h3>\r\n <p>Your own quiet room and private bathroom, one block from the city\u2019s biggest street. Perfect for a focused solo trip.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>Private bathroom<\/li><li>Sat-TV & fast WiFi<\/li><li>Self check-in<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rooms__panel\" data-room-panel=\"couple\" hidden>\r\n <div class=\"rooms__art\" data-art=\"double\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>The Double \/ Twin<\/h3>\r\n <p>A warm private room for two \u2014 double or twin beds, your own bathroom, soft morning light. City evenings, quiet nights.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>Double or twin<\/li><li>Private bathroom<\/li><li>Sat-TV & WiFi<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rooms__panel\" data-room-panel=\"friends\" hidden>\r\n <div class=\"rooms__art\" data-art=\"triple\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>Triple & Quad<\/h3>\r\n <p>Travelling as a crew? Private rooms for three or four, own bathroom, room to spread out \u2014 without splitting up.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>3\u20134 beds, private<\/li><li>Private bathroom<\/li><li>Lockers & WiFi<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rooms__panel\" data-room-panel=\"family\" hidden>\r\n <div class=\"rooms__art\" data-art=\"quad\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>Family Room<\/h3>\r\n <p>Keep everyone together in a private quad with its own bathroom \u2014 steps from trams, trains and the shopping street.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>Up to 4 together<\/li><li>Private bathroom<\/li><li>Kitchen access<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rooms__panel\" data-room-panel=\"budget\" hidden>\r\n <div class=\"rooms__art\" data-art=\"dorm\" aria-hidden=\"true\"><\/div>\r\n <div class=\"rooms__copy\">\r\n <h3>Bright Dorm Bed<\/h3>\r\n <p>The smartest way to stay central. A bed in a clean, bright dorm \u2014 private bathroom, fresh linen, a locker of your own.<\/p>\r\n <ul class=\"rooms__spec\" role=\"list\">\r\n <li>Private bathroom<\/li><li>Linen & towel included<\/li><li>Personal locker<\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check dates & price<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section concierge-intro\" id=\"chapter-concierge\" data-chapter aria-label=\"Your concierge and assistant\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter IV & V \u00b7 Two guides, one tap<\/p>\r\n <h2 class=\"section__title\" data-reveal>Never wonder what\u2019s next.<\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Two calm minds travel with you. One knows Vienna. One knows your stay.\r\n Ask either, any time \u2014 day or night.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"guides\">\r\n <article class=\"guide-card guide-card--vienna\" data-reveal>\r\n <span class=\"guide-card__tag\">Explore Vienna<\/span>\r\n <h3>Vienna Concierge<\/h3>\r\n <p>Your stylish local guide. First-day plans, rainy-day ideas, coffee nearby, free things to do, a romantic evening \u2014 it maps them out for you.<\/p>\r\n <ul class=\"guide-card__prompts\" role=\"list\">\r\n <li><button data-open-concierge=\"vienna\" data-prompt=\"Plan my first day in Vienna\" type=\"button\">Plan my first day<\/button><\/li>\r\n <li><button data-open-concierge=\"vienna\" data-prompt=\"What can I do on a rainy day?\" type=\"button\">Rainy-day ideas<\/button><\/li>\r\n <li><button data-open-concierge=\"vienna\" data-prompt=\"Best free things to do near the hotel\" type=\"button\">Best free things<\/button><\/li>\r\n <\/ul>\r\n <button class=\"btn btn--gold btn--sm\" data-open-concierge=\"vienna\" type=\"button\">Ask Vienna Concierge<\/button>\r\n <\/article>\r\n\r\n <article class=\"guide-card guide-card--home\" data-reveal>\r\n <span class=\"guide-card__tag\">Your stay<\/span>\r\n <h3>Home Assistant<\/h3>\r\n <p>Everything about your stay, answered calmly. Self check-in, late arrival, luggage, getting here, what\u2019s included \u2014 no waiting on a front desk.<\/p>\r\n <ul class=\"guide-card__prompts\" role=\"list\">\r\n <li><button data-open-concierge=\"home\" data-prompt=\"How does self check-in work?\" type=\"button\">How does self check-in work?<\/button><\/li>\r\n <li><button data-open-concierge=\"home\" data-prompt=\"I arrive late \u2014 what now?\" type=\"button\">I arrive late<\/button><\/li>\r\n <li><button data-open-concierge=\"home\" data-prompt=\"Can I store my luggage?\" type=\"button\">Store my luggage<\/button><\/li>\r\n <\/ul>\r\n <button class=\"btn btn--ghost btn--sm\" data-open-concierge=\"home\" type=\"button\">Ask Home Assistant<\/button>\r\n <\/article>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section explore\" id=\"chapter-explore\" data-chapter aria-label=\"Explore Vienna\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter VI \u00b7 From your door<\/p>\r\n <h2 class=\"section__title\" data-reveal>Vienna starts on the doorstep.<\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Opposite Westbahnhof, one block off Mariahilfer Stra\u00dfe. Trams, trains and the\r\n airport bus are a two-minute walk. Here\u2019s the city, measured from your bed.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"explore__list\" role=\"list\">\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Westbahnhof station<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>4 min<\/b> walk \u00b7 U3 \u00b7 U6<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Mariahilfer Stra\u00dfe shopping<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>1 block<\/b> \u00b7 ~6 min walk<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Stephansdom & old town<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>~10 min<\/b> by U3<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Sch\u00f6nbrunn Palace<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>~8 min<\/b> by U-Bahn<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Belvedere Palace<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>~15 min<\/b> by transit<\/span>\r\n <\/li>\r\n <li class=\"explore-row\" data-reveal>\r\n <span class=\"explore-row__name\">Vienna Airport<\/span>\r\n <span class=\"explore-row__line\" aria-hidden=\"true\"><\/span>\r\n <span class=\"explore-row__meta\"><b>direct<\/b> airport bus & CAT<\/span>\r\n <\/li>\r\n <\/ul>\r\n\r\n <p class=\"explore__cta\" data-reveal>\r\n Want it planned for you?\r\n <button class=\"link-gold\" data-open-concierge=\"vienna\" data-prompt=\"Plan my first 24 hours in Vienna from the hotel\" type=\"button\">Ask the Vienna Concierge to plan your first 24 hours \u2192<\/button>\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"fly\" id=\"chapter-family\" aria-label=\"Our five houses in Vienna\">\r\n <div class=\"fly__pin\">\r\n <div class=\"fly__head\">\r\n <p class=\"eyebrow\">Our houses in Vienna<\/p>\r\n <h2 class=\"fly__title\">One family.<br \/><span class=\"ital\">Five ways to stay.<\/span><\/h2>\r\n <\/div>\r\n <div class=\"fly__space\" id=\"flyspace\">\r\n <article class=\"fly__panel\" style=\"--i:0\"><span class=\"fly__no\">01<\/span><h3>Do Step Inn Home<\/h3><p>Felberstra\u00dfe 20 \u00b7 1150 \u00b7 opposite Westbahnhof<\/p><\/article>\r\n <article class=\"fly__panel\" style=\"--i:1\"><span class=\"fly__no\">02<\/span><h3>Be Free Hostel<\/h3><p>Beingasse 13 \u00b7 1150 \u00b7 near Westbahnhof<\/p><\/article>\r\n <article class=\"fly__panel\" style=\"--i:2\"><span class=\"fly__no\">03<\/span><h3>Do Step Inn Central<\/h3><p>S\u00fcdtiroler Platz 3 \u00b7 1040 \u00b7 at Hauptbahnhof<\/p><\/article>\r\n <article class=\"fly__panel\" style=\"--i:3\"><span class=\"fly__no\">04<\/span><h3>Do Step Inn Living<\/h3><p>S\u00fcdtiroler Platz 3 \u00b7 1040 \u00b7 at Hauptbahnhof<\/p><\/article>\r\n <article class=\"fly__panel\" style=\"--i:4\"><span class=\"fly__no\">05<\/span><h3>Innsider<\/h3><p>Wurmbstra\u00dfe 20 \u00b7 Wien<\/p><\/article>\r\n <\/div>\r\n <p class=\"fly__hint\" aria-hidden=\"true\">Scroll to fly through \u2193<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section locations\" id=\"chapter-locations\" data-chapter aria-label=\"Our Vienna locations\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Find your way<\/p>\r\n <h2 class=\"section__title\" data-reveal>All central,<br \/><span class=\"ital\">all well connected.<\/span><\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Pick a pin for live directions in Google Maps \u2014 every house is minutes from a\r\n station and the middle of Vienna.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"loc__layout\">\r\n \r\n <div class=\"loc__map\" data-reveal>\r\n <iframe title=\"Do Step Inn on Google Maps\" loading=\"lazy\" allowfullscreen\r\n referrerpolicy=\"no-referrer-when-downgrade\"\r\n src=\"https:\/\/maps.google.com\/maps?q=Felberstra%C3%9Fe%2020,%201150%20Wien&z=13&output=embed\"><\/iframe>\r\n <\/div>\r\n\r\n \r\n <ul class=\"loc__list\" role=\"list\">\r\n <li><div class=\"loc-card is-home\" data-loccard=\"home\" data-lat=\"48.19685\" data-lng=\"16.33472\" data-reveal>\r\n <span class=\"loc-card__no\">1<\/span>\r\n <span class=\"loc-card__body\"><b>Do Step Inn Home<\/b><span>Felberstra\u00dfe 20 \u00b7 1150 \u00b7 opposite Westbahnhof<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/www.dostepinn.com\/home\/\" target=\"_blank\" rel=\"noopener\">Website <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=Felberstra%C3%9Fe%2020%2C%201150%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <li><div class=\"loc-card\" data-loccard=\"befree\" data-lat=\"48.19431\" data-lng=\"16.33262\" data-reveal>\r\n <span class=\"loc-card__no\">2<\/span>\r\n <span class=\"loc-card__body\"><b>Be Free Hostel<\/b><span>Beingasse 13 \u00b7 1150 \u00b7 near Westbahnhof<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/www.google.com\/search?q=befree+hostel\" target=\"_blank\" rel=\"noopener\">Website <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=Beingasse%2013%2C%201150%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <li><div class=\"loc-card\" data-loccard=\"central\" data-lat=\"48.18533\" data-lng=\"16.37490\" data-reveal>\r\n <span class=\"loc-card__no\">3<\/span>\r\n <span class=\"loc-card__body\"><b>Do Step Inn Central<\/b><span>S\u00fcdtiroler Platz 3 \u00b7 1040 \u00b7 at Hauptbahnhof<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/www.dostepinn.com\/central-hostel\/\" target=\"_blank\" rel=\"noopener\">Website <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=S%C3%BCdtiroler%20Platz%203%2C%201040%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <li><div class=\"loc-card\" data-loccard=\"living\" data-lat=\"48.18548\" data-lng=\"16.37525\" data-reveal>\r\n <span class=\"loc-card__no\">4<\/span>\r\n <span class=\"loc-card__body\"><b>Do Step Inn Living<\/b><span>S\u00fcdtiroler Platz 3 \u00b7 1040 \u00b7 at Hauptbahnhof<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/dostepinn-living.at\/#\/booking\/search\" target=\"_blank\" rel=\"noopener\">Book <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=S%C3%BCdtiroler%20Platz%203%2C%201040%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <li><div class=\"loc-card\" data-loccard=\"innsider\" data-lat=\"48.19050\" data-lng=\"16.33230\" data-reveal>\r\n <span class=\"loc-card__no\">5<\/span>\r\n <span class=\"loc-card__body\"><b>Innsider<\/b><span>Wurmbstra\u00dfe 20 \u00b7 Wien \u00b7 bar & restaurant<\/span><\/span>\r\n <span class=\"loc-card__links\">\r\n <a class=\"loc-card__link\" href=\"https:\/\/innsider-restaurant.at\/\" target=\"_blank\" rel=\"noopener\">Restaurant <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n <a class=\"loc-card__go\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=Wurmbstra%C3%9Fe%2020%2C%20Wien\" target=\"_blank\" rel=\"noopener\">Route <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n <\/span>\r\n <\/div><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section easy\" id=\"chapter-easy\" data-chapter data-mood=\"warm\" aria-label=\"An easy stay\">\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Chapter VII \u00b7 An easy stay<\/p>\r\n <h2 class=\"section__title\" data-reveal>Arrive on your own time.<\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n No queue, no stress. Self check-in, a late-arrival path, and a place for your bags\r\n before check-in or after you leave. Simple, by design.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"easy__grid\">\r\n <article class=\"easy-card\" data-reveal>\r\n <span class=\"easy-card__num\">15:00<\/span>\r\n <h3>Self check-in<\/h3>\r\n <p>Contactless arrival \u2014 collect your access and settle in on your schedule. Late arrival possible until midnight.<\/p>\r\n <\/article>\r\n <article class=\"easy-card\" data-reveal>\r\n <span class=\"easy-card__num\">11:00<\/span>\r\n <h3>Easy check-out<\/h3>\r\n <p>Quick and contactless. Store your bags in the access-card luggage room and keep exploring.<\/p>\r\n <\/article>\r\n <article class=\"easy-card\" data-reveal>\r\n <span class=\"easy-card__num\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\" width=\"30\" height=\"30\"><path d=\"M6 14h28l-2 20H8L6 14ZM14 14v-3a6 6 0 0 1 12 0v3\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/span>\r\n <h3>Luggage & more<\/h3>\r\n <p>Secure luggage room, free WiFi throughout, parking, and bikes to borrow. Breakfast buffet available each morning.<\/p>\r\n <\/article>\r\n <\/div>\r\n\r\n <p class=\"easy__note\" data-reveal>\r\n Exact policies?\r\n <button class=\"link-gold\" data-open-concierge=\"home\" data-prompt=\"What are your house rules and cancellation policy?\" type=\"button\">Ask the Home Assistant \u2192<\/button>\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"section groups\" id=\"chapter-groups\" data-chapter aria-label=\"Group reservations and partnerships\">\r\n <div class=\"groups__glow\" aria-hidden=\"true\"><\/div>\r\n <div class=\"section__head\">\r\n <p class=\"eyebrow\" data-reveal>Groups & partnerships<\/p>\r\n <h2 class=\"section__title\" data-reveal>Travelling as a group?<br \/><span class=\"ital\">Let\u2019s make it easy.<\/span><\/h2>\r\n <p class=\"section__lede\" data-reveal>\r\n Sports teams, school trips, tour groups and long stays \u2014 plus tourism & business\r\n partners. One contact for calm bookings across all our Vienna houses.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"groups__layout\">\r\n \r\n <form class=\"group-form\" id=\"group-form\" data-reveal novalidate>\r\n <h3>Group booking request <span>\u00b7 from 10 people<\/span><\/h3>\r\n <p class=\"group-form__sub\">Sports teams, school trips, tour groups & long stays. Tell us what you need \u2014 you\u2019ll receive a tailored offer.<\/p>\r\n\r\n <div class=\"group-form__grid\">\r\n <label>Your name<input name=\"name\" type=\"text\" autocomplete=\"name\" required \/><\/label>\r\n <label>Email<input name=\"email\" type=\"email\" autocomplete=\"email\" required \/><\/label>\r\n <label>Organisation \/ school <span class=\"opt\">(optional)<\/span><input name=\"org\" type=\"text\" \/><\/label>\r\n <label>Phone <span class=\"opt\">(optional)<\/span><input name=\"phone\" type=\"tel\" autocomplete=\"tel\" \/><\/label>\r\n <label>Check-in<input name=\"checkin\" type=\"date\" \/><\/label>\r\n <label>Check-out<input name=\"checkout\" type=\"date\" \/><\/label>\r\n <label>Number of people<input name=\"people\" type=\"number\" min=\"10\" inputmode=\"numeric\" placeholder=\"e.g. 20\" required \/><\/label>\r\n <label>Gender split <span class=\"opt\">(optional)<\/span><input name=\"genders\" type=\"text\" placeholder=\"e.g. 12 female \u00b7 8 male\" \/><\/label>\r\n <\/div>\r\n\r\n <fieldset class=\"group-form__field\">\r\n <legend>Preferred room split<\/legend>\r\n <label class=\"chk\"><input type=\"checkbox\" name=\"rooms\" value=\"Private singles\" \/><span>Private singles<\/span><\/label>\r\n <label class=\"chk\"><input type=\"checkbox\" name=\"rooms\" value=\"Doubles \/ twins\" \/><span>Doubles \/ twins<\/span><\/label>\r\n <label class=\"chk\"><input type=\"checkbox\" name=\"rooms\" value=\"Triples \/ quads\" \/><span>Triples \/ quads<\/span><\/label>\r\n <label class=\"chk\"><input type=\"checkbox\" name=\"rooms\" value=\"Dorm beds\" \/><span>Dorm beds<\/span><\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"group-form__field\">\r\n <legend>Board<\/legend>\r\n <label class=\"chk\"><input type=\"radio\" name=\"board\" value=\"Room only\" checked \/><span>Room only<\/span><\/label>\r\n <label class=\"chk\"><input type=\"radio\" name=\"board\" value=\"With breakfast\" \/><span>With breakfast<\/span><\/label>\r\n <label class=\"chk\"><input type=\"radio\" name=\"board\" value=\"Half-board\" \/><span>Half-board<\/span><\/label>\r\n <\/fieldset>\r\n\r\n <label class=\"group-form__full\">Anything else? <span class=\"opt\">(optional)<\/span>\r\n <textarea name=\"message\" rows=\"3\" placeholder=\"Flexible dates? Budget per person? Arrival time, special wishes\u2026\"><\/textarea>\r\n <\/label>\r\n\r\n <button class=\"btn btn--gold\" type=\"submit\">Send request<\/button>\r\n <p class=\"group-form__ok\" id=\"group-ok\" role=\"status\" hidden>Thank you \u2014 your request is on its way. <b>You\u2019ll receive an offer soon.<\/b> \u2726<\/p>\r\n <\/form>\r\n\r\n \r\n <aside class=\"group-side\">\r\n <a class=\"group-card group-card--partner\" href=\"mailto:reservierung@dostepinn.at?subject=Partnership%20enquiry&body=Hi%20Do%20Step%20Inn%20team%2C%0A%0AWe%27d%20like%20to%20explore%20a%20cooperation.%0A%0ACompany%2Forganisation%3A%0AType%20of%20partnership%3A%0AWebsite%3A%0A%0AThanks%21\" data-reveal>\r\n <div class=\"group-card__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 40 40\"><path d=\"M14 20l5 5 8-9\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"20\" cy=\"20\" r=\"14\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\/><\/svg>\r\n <\/div>\r\n <h3>Cooperation partners<\/h3>\r\n <p>Agencies, tour operators, companies, universities and long-stay partners. Let\u2019s set up a lasting collaboration.<\/p>\r\n <span class=\"group-card__cta\">Become a partner <span aria-hidden=\"true\">\u2192<\/span><\/span>\r\n <\/a>\r\n <p class=\"groups__mail\" data-reveal>\r\n Prefer to write directly?<br \/><a class=\"link-gold\" href=\"mailto:reservierung@dostepinn.at\">reservierung@dostepinn.at<\/a>\r\n <\/p>\r\n <\/aside>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section book\" id=\"chapter-book\" data-chapter aria-label=\"Book your stay\">\r\n <div class=\"book__inner\" data-reveal>\r\n <p class=\"eyebrow\">Chapter VIII \u00b7 Book your stay<\/p>\r\n <h2 class=\"book__title\">Your step into Vienna<br \/><span class=\"ital\">starts here.<\/span><\/h2>\r\n <p class=\"book__lede\">Rooms for every budget, in the middle of everything. Take the step \u2014 your calm home base is waiting.<\/p>\r\n <div class=\"ibe-wrap ibe-wrap--book\"><ibe-up ibe-key=\"35b41b51-d117-4319-8ccd-11eafa2a07bc\" language=\"en\"><\/ibe-up><\/div>\r\n <p class=\"book__reassure\">Best rate direct \u00b7 Free cancellation options \u00b7 Instant confirmation<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n \r\n <div class=\"stickybar\" id=\"stickybar\" aria-hidden=\"true\">\r\n <span class=\"stickybar__label\">Rooms for every budget \u00b7 from your calm base in Vienna<\/span>\r\n <button class=\"btn btn--gold btn--sm\" data-open-booking type=\"button\">Check availability<\/button>\r\n <\/div>\r\n\r\n \r\n <button class=\"fab\" id=\"fab\" data-open-concierge=\"vienna\" type=\"button\" aria-label=\"Ask your concierge\">\r\n <span class=\"fab__orb\" aria-hidden=\"true\"><\/span>\r\n <span class=\"fab__label\">Ask your concierge<\/span>\r\n <\/button>\r\n\r\n \r\n <div class=\"modal\" id=\"booking\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Check availability\" hidden>\r\n <div class=\"modal__backdrop\" data-close-booking><\/div>\r\n <div class=\"modal__card booking-card\" role=\"document\">\r\n <button class=\"modal__close\" data-close-booking aria-label=\"Close\">×<\/button>\r\n <p class=\"eyebrow\">Check availability<\/p>\r\n <h2 class=\"booking-card__title\">Find your room<\/h2>\r\n <form class=\"booking-form\" id=\"booking-form\">\r\n <label>Check-in<input type=\"date\" name=\"checkin\" required \/><\/label>\r\n <label>Check-out<input type=\"date\" name=\"checkout\" required \/><\/label>\r\n <label>Guests\r\n <select name=\"guests\">\r\n <option>1 guest<\/option><option>2 guests<\/option><option>3 guests<\/option>\r\n <option>4 guests<\/option><option>5+ guests<\/option>\r\n <\/select>\r\n <\/label>\r\n <button class=\"btn btn--gold\" type=\"submit\">Search rooms<\/button>\r\n <\/form>\r\n <p class=\"booking-card__note\">You\u2019ll continue to our secure booking engine for live prices and instant confirmation.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"chat\" id=\"chat\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Concierge chat\" hidden>\r\n <div class=\"modal__backdrop\" data-close-chat><\/div>\r\n <div class=\"chat__panel\">\r\n <div class=\"chat__header\">\r\n <div class=\"chat__switch\" role=\"tablist\" aria-label=\"Choose a guide\">\r\n <button role=\"tab\" class=\"chat__mode is-active\" data-mode=\"vienna\" aria-selected=\"true\">\r\n <span class=\"chat__mode-dot\"><\/span> Vienna Concierge\r\n <\/button>\r\n <button role=\"tab\" class=\"chat__mode\" data-mode=\"home\" aria-selected=\"false\">\r\n <span class=\"chat__mode-dot\"><\/span> Home Assistant\r\n <\/button>\r\n <\/div>\r\n <button class=\"chat__close\" data-close-chat aria-label=\"Close chat\">×<\/button>\r\n <\/div>\r\n\r\n <div class=\"chat__body\" id=\"chat-body\" aria-live=\"polite\"><\/div>\r\n\r\n <div class=\"chat__prompts\" id=\"chat-prompts\"><\/div>\r\n\r\n <form class=\"chat__input\" id=\"chat-form\">\r\n <input type=\"text\" id=\"chat-text\" autocomplete=\"off\"\r\n placeholder=\"Ask anything\u2026\" aria-label=\"Type your question\" \/>\r\n <button type=\"submit\" aria-label=\"Send\">\r\n <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path d=\"M4 12l16-8-6 8 6 8-16-8Z\" fill=\"currentColor\"\/><\/svg>\r\n <\/button>\r\n <\/form>\r\n <p class=\"chat__disclaimer\" id=\"chat-disclaimer\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <link href=\"https:\/\/ibe.uphotel.agency\/ibe.min.css\" rel=\"stylesheet\" \/>\r\n <script type=\"text\/javascript\" src=\"https:\/\/ibe.uphotel.agency\/ibe.min.js\"><\/script>\r\n\r\n \r\n <script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CONCIERGE ENGINE \u2014 two guardrailed minds\r\n \u00b7 Vienna Concierge \u2192 local city guide (general suggestions, map pins)\r\n \u00b7 Home Assistant \u2192 hotel facts only; never invents policy\r\n Rule-based & offline: honest by construction. No hallucinated data.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n(function () {\r\n \"use strict\";\r\n\r\n const CONTACT = \"Please contact the hotel team for confirmation.\";\r\n const BOOKING = 'For live prices, availability and booking, use <a href=\"#\" data-open-booking>Check availability<\/a>.';\r\n\r\n \/* \u2500\u2500 Verified hotel facts (single source of truth for the Assistant) \u2500\u2500 *\/\r\n const HOME = [\r\n { k: [\"self check\", \"checkin\", \"check-in\", \"check in\", \"arrive\", \"key\", \"access\"], a:\r\n \"<strong>Self check-in<\/strong> keeps arrival stress-free. Check-in opens at <strong>15:00<\/strong> and you can arrive contactlessly \u2014 you\u2019ll receive your access details for the door and your room. Late arrival is possible <strong>until midnight<\/strong>. If you\u2019ll arrive after midnight, \" + CONTACT.toLowerCase() },\r\n { k: [\"late\", \"midnight\", \"after hours\", \"night arrival\"], a:\r\n \"Arriving late is fine \u2014 <strong>self check-in works up to midnight<\/strong>. You won\u2019t need anyone at a desk. Arriving after midnight? \" + CONTACT },\r\n { k: [\"check-out\", \"checkout\", \"check out\", \"leave\", \"leaving\"], a:\r\n \"<strong>Check-out is 11:00<\/strong>, quick and contactless. Leaving later in the day? Drop your bags in our secure luggage room and keep exploring.\" },\r\n { k: [\"luggage\", \"bag\", \"store\", \"storage\", \"suitcase\"], a:\r\n \"Yes \u2014 there\u2019s a <strong>secure luggage room<\/strong> with card access, so you can store bags before check-in or after check-out and head straight into the city. (Bags stored long-term may need the access card renewed.)\" },\r\n { k: [\"wifi\", \"wi-fi\", \"internet\", \"wlan\"], a:\r\n \"<strong>Free WiFi<\/strong> is available throughout the building \u2014 rooms and common areas.\" },\r\n { k: [\"breakfast\", \"morning\", \"food included\", \"buffet\"], a:\r\n \"A <strong>buffet breakfast<\/strong> is served every morning \u2014 no need to pre-book \u2014 available for a small surcharge. For the current price and times, \" + CONTACT.toLowerCase() },\r\n { k: [\"parking\", \"car\", \"garage\", \"park\"], a:\r\n \"There is <strong>parking available<\/strong> for guests. For spaces and current rates, \" + CONTACT.toLowerCase() },\r\n { k: [\"kitchen\", \"cook\", \"cooking\"], a:\r\n \"You\u2019re welcome to cook \u2014 there\u2019s a <strong>guest kitchen<\/strong>, great for saving your euros for the city.\" },\r\n { k: [\"facilit\", \"amenit\", \"included\", \"what do you have\", \"games\", \"bar\", \"billiard\", \"bike\", \"bicycle\"], a:\r\n \"Your home base includes a <strong>guest kitchen<\/strong>, a garden courtyard, a small house bar, <strong>billiards, darts and giant chess<\/strong>, bikes to borrow, vending, free WiFi and a luggage room. Rooms have private bathrooms, linen and Sat-TV.\" },\r\n { k: [\"room\", \"private\", \"dorm\", \"double\", \"single\", \"family\", \"bathroom\"], a:\r\n \"We\u2019re a hotel <em>and<\/em> hostel \u2014 <strong>rooms for every budget<\/strong>. Private singles, doubles\/twins, triples and quads (each with private bathroom, Sat-TV, WiFi), or a bed in a bright dorm with private bathroom, linen and a locker. \" + BOOKING },\r\n { k: [\"where\", \"address\", \"location\", \"how do i get\", \"get there\", \"directions\", \"from airport\", \"airport\", \"westbahnhof\", \"station\", \"transport\", \"u-bahn\", \"ubahn\", \"tram\"], a:\r\n \"We\u2019re at <strong>Felberstra\u00dfe 20, 1150 Vienna<\/strong>, directly <strong>opposite Westbahnhof<\/strong> (about a 4-minute walk) and one block from Mariahilfer Stra\u00dfe. From the airport, take the <strong>airport bus or CAT<\/strong> toward the city; U3 and U6 both serve Westbahnhof.\" },\r\n { k: [\"price\", \"cost\", \"rate\", \"cheap\", \"how much\", \"available\", \"availability\", \"book\", \"reserve\"], a:\r\n \"Rooms suit every budget, from dorm beds to private rooms. \" + BOOKING },\r\n { k: [\"cancel\", \"cancellation\", \"refund\", \"policy\", \"house rules\", \"rules\", \"pet\", \"smoking\"], a:\r\n \"Cancellation terms and house rules depend on your rate and dates. Rather than guess, here\u2019s the honest answer: <strong>\" + CONTACT + \"<\/strong> You\u2019ll also see the exact terms during booking.\" },\r\n { k: [\"contact\", \"phone\", \"email\", \"reception\", \"call\", \"reach\"], a:\r\n \"The hotel team is happy to help directly. You can reach reception during opening hours \u2014 for the current phone and email, please use the contact details on your booking confirmation, or \" + CONTACT.toLowerCase() },\r\n { k: [\"emergency\", \"help\", \"police\", \"ambulance\", \"fire\", \"doctor\", \"hospital\"], a:\r\n \"For any emergency in Austria, dial <strong>112<\/strong> (general emergency), <strong>133<\/strong> police, <strong>144<\/strong> ambulance, or <strong>122<\/strong> fire. For anything urgent at the hotel, contact the on-site team.\" },\r\n ];\r\n const HOME_FALLBACK =\r\n \"I can help with check-in, luggage, WiFi, breakfast, parking, getting here and facilities. For anything I can\u2019t confirm \u2014 like exact prices or specific policies \u2014 <strong>\" + CONTACT + \"<\/strong>\";\r\n\r\n \/* \u2500\u2500 Vienna Concierge \u00b7 general local suggestions (+ map pins) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const VIENNA = [\r\n { k: [\"first day\", \"24 hour\", \"first 24\", \"one day\", \"itinerary\", \"plan my\", \"plan my first\"], a:\r\n \"Here\u2019s a calm, walkable <strong>first day from your door<\/strong>:\", pins: [\r\n \"Morning \u00b7 coffee + stroll along Mariahilfer Stra\u00dfe (1 block away)\",\r\n \"Midday \u00b7 U3 to Stephansplatz \u2014 Stephansdom & the old town lanes\",\r\n \"Afternoon \u00b7 Hofburg & the Ringstrasse, or Naschmarkt for a bite\",\r\n \"Evening \u00b7 sunset at Belvedere gardens, dinner back near the hotel\" ] },\r\n { k: [\"rain\", \"rainy\", \"bad weather\", \"indoor\", \"when it rains\"], a:\r\n \"Perfect rainy-day ideas, mostly indoors:\", pins: [\r\n \"Kunsthistorisches Museum \u2014 world-class art, easy by U3\",\r\n \"Albertina \u2014 modern masters in the centre\",\r\n \"A grand Viennese caf\u00e9 (Caf\u00e9 Central, Sperl) \u2014 coffee & cake\",\r\n \"Naschmarkt\u2019s covered stalls for a warm bite\" ] },\r\n { k: [\"free\", \"cheap\", \"no money\", \"budget\", \"without paying\"], a:\r\n \"Wonderful <strong>free<\/strong> things near you:\", pins: [\r\n \"Belvedere & Sch\u00f6nbrunn gardens \u2014 free to wander\",\r\n \"Stephansdom \u2014 free to step inside\",\r\n \"Stroll the Ringstrasse & Danube Canal art walls\",\r\n \"Window-shopping + people-watching on Mariahilfer Stra\u00dfe\" ] },\r\n { k: [\"coffee\", \"cafe\", \"caf\u00e9\", \"breakfast out\", \"espresso\"], a:\r\n \"Vienna runs on coffee. Nearby & classic:\", pins: [\r\n \"Caf\u00e9s right along Mariahilfer Stra\u00dfe (1 block)\",\r\n \"Caf\u00e9 Sperl \u2014 historic, elegant, ~10 min\",\r\n \"Caf\u00e9 Central \u2014 grand and iconic, near Stephansplatz\" ] },\r\n { k: [\"romantic\", \"couple\", \"date\", \"evening\", \"sunset\"], a:\r\n \"A romantic Vienna evening:\", pins: [\r\n \"Sunset over the city from Belvedere gardens\",\r\n \"A cand-lit dinner in the old town lanes\",\r\n \"An evening classical concert (many near the centre)\",\r\n \"A slow walk along the illuminated Ringstrasse\" ] },\r\n { k: [\"solo\", \"alone\", \"by myself\", \"traveling alone\"], a:\r\n \"Great picks for solo travellers:\", pins: [\r\n \"MuseumsQuartier \u2014 art, courtyards, easy to linger\",\r\n \"Naschmarkt \u2014 browse & snack at your own pace\",\r\n \"Join a free walking tour from Stephansplatz\",\r\n \"Back home base: kitchen, courtyard & games to meet others\" ] },\r\n { k: [\"food\", \"eat\", \"restaurant\", \"dinner\", \"lunch\", \"schnitzel\", \"local\"], a:\r\n \"Local flavours to seek out:\", pins: [\r\n \"Wiener Schnitzel \u2014 a Viennese classic\",\r\n \"Naschmarkt \u2014 global stalls + Austrian bites (~10 min)\",\r\n \"A traditional Beisl (cosy tavern) in the old town\",\r\n \"Sachertorte with coffee at a grand caf\u00e9\" ] },\r\n { k: [\"museum\", \"art\", \"gallery\", \"history\", \"culture\"], a:\r\n \"Museums worth your time:\", pins: [\r\n \"Kunsthistorisches \u2014 old masters & antiquities\",\r\n \"Albertina \u2014 Monet to Picasso\",\r\n \"MuseumsQuartier \u2014 modern art complex\",\r\n \"Belvedere \u2014 Klimt\u2019s \u2018The Kiss\u2019\" ] },\r\n { k: [\"nearby\", \"close\", \"around\", \"near the hotel\", \"walking distance\", \"near me\"], a:\r\n \"Right around your home base:\", pins: [\r\n \"Mariahilfer Stra\u00dfe shopping \u2014 1 block\",\r\n \"Westbahnhof (U3\/U6, trains, airport bus) \u2014 4 min walk\",\r\n \"Sch\u00f6nbrunn Palace & gardens \u2014 ~8 min by U-Bahn\",\r\n \"Old town \/ Stephansdom \u2014 ~10 min by U3\" ] },\r\n { k: [\"stephansdom\", \"cathedral\", \"st stephen\", \"how do i get to\"], a:\r\n \"To <strong>Stephansdom<\/strong>: walk to Westbahnhof (4 min), take <strong>U3<\/strong> direction Simmering to Stephansplatz \u2014 about 10 minutes total. It\u2019s free to step inside.\", pins: [\r\n \"Westbahnhof \u2192 U3 \u2192 Stephansplatz (~10 min)\" ] },\r\n { k: [\"sch\u00f6nbrunn\", \"schonbrunn\", \"palace\", \"garden\"], a:\r\n \"<strong>Sch\u00f6nbrunn Palace<\/strong> is delightfully close \u2014 U-Bahn from Westbahnhof, roughly 8 minutes. The gardens are free to wander.\", pins: [\r\n \"Westbahnhof \u2192 U-Bahn \u2192 Sch\u00f6nbrunn (~8 min)\" ] },\r\n { k: [\"open today\", \"opening hours\", \"hours today\", \"what is open\"], a:\r\n \"Opening hours change by day and season, so I won\u2019t guess and risk sending you to a closed door. Check the venue\u2019s official page for today\u2019s hours \u2014 and your Vienna Concierge is happy to suggest <em>what<\/em> to see any time.\" },\r\n { k: [\"shopping\", \"shop\", \"mall\", \"buy\", \"mariahilfer\"], a:\r\n \"You\u2019re beside Vienna\u2019s biggest shopping street:\", pins: [\r\n \"Mariahilfer Stra\u00dfe \u2014 1 block from the hotel\",\r\n \"Ringstrassen-Galerien & centre boutiques by U3\",\r\n \"Naschmarkt for food & flea-market finds (weekends)\" ] },\r\n ];\r\n const VIENNA_FALLBACK =\r\n \"I\u2019m your <strong>Vienna Concierge<\/strong> \u2014 ask me for a first-day plan, rainy-day ideas, free things, coffee & food, romantic or solo suggestions, or how to reach a landmark. What are you in the mood for?\";\r\n\r\n const PROMPTS = {\r\n vienna: [\"Plan my first day\", \"Rainy-day ideas\", \"Something nearby\", \"Best free things\", \"Romantic evening\", \"Local food tips\", \"Museums today\"],\r\n home: [\"How does self check-in work?\", \"What time is check-in?\", \"Can I store luggage?\", \"How do I get there?\", \"What facilities are included?\", \"I arrive late \u2014 what now?\"],\r\n };\r\n const GREETING = {\r\n vienna: \"Hallo! I\u2019m your <strong>Vienna Concierge<\/strong> \u2014 your local guide in your pocket. Tell me how you like to travel and I\u2019ll map out the city for you. \ud83d\uddfa\ufe0f\",\r\n home: \"Welcome home. I\u2019m the <strong>Home Assistant<\/strong> \u2014 ask me anything about your stay: check-in, luggage, getting here, what\u2019s included. I only share confirmed details, and point you to the team for anything I can\u2019t. \ud83c\udfe0\",\r\n };\r\n const DISCLAIMER = {\r\n vienna: \"General suggestions only \u00b7 opening hours & prices change \u2014 always confirm before you go.\",\r\n home: \"Confirmed hotel info only \u00b7 for anything unlisted, we\u2019ll point you to the hotel team.\",\r\n };\r\n\r\n function normalize(s) { return (\" \" + s.toLowerCase() + \" \").replace(\/[^a-z0-9\u00e4\u00f6\u00fc\u00df\\s-]\/g, \" \"); }\r\n\r\n function score(text, keys) {\r\n const t = normalize(text);\r\n let hits = 0;\r\n for (const k of keys) if (t.includes(k)) hits += k.length; \/\/ longer phrase = stronger match\r\n return hits;\r\n }\r\n\r\n function answer(mode, text) {\r\n const kb = mode === \"vienna\" ? VIENNA : HOME;\r\n let best = null, bestScore = 0;\r\n for (const item of kb) {\r\n const s = score(text, item.k);\r\n if (s > bestScore) { bestScore = s; best = item; }\r\n }\r\n if (best && bestScore > 0) return { html: best.a, pins: best.pins || null };\r\n return { html: mode === \"vienna\" ? VIENNA_FALLBACK : HOME_FALLBACK, pins: null };\r\n }\r\n\r\n window.Concierge = { answer, PROMPTS, GREETING, DISCLAIMER };\r\n})();\r\n\r\n<\/script>\r\n <script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MAIN \u2014 interactions, reveals, booking, chat orchestration\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n(function () {\r\n \"use strict\";\r\n const $ = (s, r = document) => r.querySelector(s);\r\n const $$ = (s, r = document) => [...r.querySelectorAll(s)];\r\n const reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n const yearEl = document.getElementById(\"year\"); if (yearEl) yearEl.textContent = new Date().getFullYear();\r\n\r\n \/* \u2500\u2500 Nav: scroll state + mobile menu (skipped if header is absent) \u2500\u2500\u2500\u2500 *\/\r\n const nav = $(\"#nav\");\r\n if (nav) {\r\n const onScroll = () => nav.classList.toggle(\"is-scrolled\", window.scrollY > 40);\r\n onScroll();\r\n window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n\r\n const burger = $(\"[data-toggle-menu]\");\r\n if (burger) {\r\n burger.addEventListener(\"click\", () => {\r\n const open = nav.classList.toggle(\"is-menu-open\");\r\n burger.setAttribute(\"aria-expanded\", String(open));\r\n });\r\n }\r\n $$(\".nav__links a\").forEach(a => a.addEventListener(\"click\", () => {\r\n nav.classList.remove(\"is-menu-open\");\r\n if (burger) burger.setAttribute(\"aria-expanded\", \"false\");\r\n }));\r\n }\r\n\r\n \/* \u2500\u2500 Reveal on scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const reveals = $$(\"[data-reveal]\");\r\n reveals.forEach(el => { const d = el.dataset.delay; if (d) el.style.setProperty(\"--d\", d); });\r\n if (reduce || !(\"IntersectionObserver\" in window)) {\r\n reveals.forEach(el => el.classList.add(\"is-in\"));\r\n } else {\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add(\"is-in\"); io.unobserve(e.target); } });\r\n }, { threshold: 0.15, rootMargin: \"0px 0px -8% 0px\" });\r\n reveals.forEach(el => io.observe(el));\r\n }\r\n\r\n \/* \u2500\u2500 Sticky booking bar + FAB reveal after hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const sticky = $(\"#stickybar\");\r\n const fab = $(\"#fab\");\r\n const hero = $(\"#chapter-arrival\");\r\n const bookCh = $(\"#chapter-book\");\r\n if (\"IntersectionObserver\" in window) {\r\n const gate = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.target === hero) {\r\n const past = !e.isIntersecting && e.boundingClientRect.top < 0;\r\n sticky.classList.toggle(\"is-visible\", past);\r\n fab.classList.toggle(\"is-visible\", past);\r\n sticky.setAttribute(\"aria-hidden\", String(!past));\r\n }\r\n \/\/ hide sticky bar over the final booking chapter (redundant there)\r\n if (e.target === bookCh && e.isIntersecting) {\r\n sticky.classList.remove(\"is-visible\");\r\n }\r\n });\r\n }, { threshold: 0 });\r\n gate.observe(hero);\r\n gate.observe(bookCh);\r\n }\r\n\r\n \/* \u2500\u2500 Rooms tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const tabs = $$(\"[data-room-tab]\");\r\n const panels = $$(\"[data-room-panel]\");\r\n tabs.forEach(tab => tab.addEventListener(\"click\", () => {\r\n const key = tab.dataset.roomTab;\r\n tabs.forEach(t => { const on = t === tab; t.classList.toggle(\"is-active\", on); t.setAttribute(\"aria-selected\", String(on)); });\r\n panels.forEach(p => {\r\n const on = p.dataset.roomPanel === key;\r\n p.classList.toggle(\"is-active\", on);\r\n p.hidden = !on;\r\n });\r\n }));\r\n\r\n \/* \u2500\u2500 Parallax (viewport-relative, rAF, reduced-motion aware) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function parallax() {\r\n const els = $$(\"[data-parallax]\");\r\n if (reduce || !els.length) return;\r\n let ticking = false;\r\n const update = () => {\r\n const vh = window.innerHeight || 1;\r\n els.forEach(el => {\r\n const speed = parseFloat(el.dataset.parallax) || 0.15;\r\n const r = el.getBoundingClientRect();\r\n const center = r.top + r.height \/ 2;\r\n const offset = center - vh \/ 2; \/\/ +below \/ -above viewport centre\r\n const shift = Math.max(-140, Math.min(140, -offset * speed));\r\n el.style.transform = `translate3d(0, ${shift.toFixed(1)}px, 0)`;\r\n });\r\n ticking = false;\r\n };\r\n const onScroll = () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } };\r\n window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n window.addEventListener(\"resize\", onScroll, { passive: true });\r\n update();\r\n })();\r\n\r\n \/* \u2500\u2500 Scroll progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function progress() {\r\n const bar = $(\"#scrollbar\");\r\n if (!bar) return;\r\n const upd = () => {\r\n const h = document.documentElement.scrollHeight - window.innerHeight;\r\n bar.style.width = (h > 0 ? (window.scrollY \/ h) * 100 : 0) + \"%\";\r\n };\r\n window.addEventListener(\"scroll\", upd, { passive: true });\r\n window.addEventListener(\"resize\", upd, { passive: true });\r\n upd();\r\n })();\r\n\r\n \/* \u2500\u2500 Horizontal-scroll gallery (pinned; vertical scroll \u2192 sideways) \u2500\u2500 *\/\r\n (function hGallery() {\r\n const sec = $(\"#chapter-gallery\");\r\n const track = $(\"#hgtrack\");\r\n if (!sec || !track) return;\r\n const coarse = window.matchMedia(\"(pointer: coarse)\").matches;\r\n if (reduce || coarse || window.innerWidth < 760) { sec.classList.add(\"is-static\"); return; }\r\n\r\n let maxX = 0, start = 0, ticking = false;\r\n const measure = () => {\r\n maxX = Math.max(0, track.scrollWidth - window.innerWidth);\r\n sec.style.height = (window.innerHeight + maxX) + \"px\";\r\n start = sec.offsetTop;\r\n };\r\n const update = () => {\r\n const x = Math.max(0, Math.min(maxX, window.scrollY - start));\r\n track.style.transform = `translate3d(${-x}px,0,0)`;\r\n ticking = false;\r\n };\r\n const onScroll = () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } };\r\n measure(); update();\r\n window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n window.addEventListener(\"resize\", () => { measure(); update(); }, { passive: true });\r\n window.addEventListener(\"load\", () => { measure(); update(); });\r\n \/\/ remeasure once images have loaded (widths are fixed, but be safe)\r\n track.querySelectorAll(\"img\").forEach(img => img.addEventListener(\"load\", () => { measure(); update(); }, { once: true }));\r\n })();\r\n\r\n \/* \u2500\u2500 3D tilt on cards (pointer-driven) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function tilt() {\r\n if (reduce || window.matchMedia(\"(pointer: coarse)\").matches) return;\r\n $$(\".hg-item, .guide-card, .group-card\").forEach(el => el.setAttribute(\"data-tilt\", \"\"));\r\n $$(\"[data-tilt]\").forEach(el => {\r\n let raf = null;\r\n el.addEventListener(\"pointermove\", (e) => {\r\n const r = el.getBoundingClientRect();\r\n const x = (e.clientX - r.left) \/ r.width - 0.5;\r\n const y = (e.clientY - r.top) \/ r.height - 0.5;\r\n if (raf) cancelAnimationFrame(raf);\r\n raf = requestAnimationFrame(() => {\r\n el.style.transform = `perspective(800px) rotateX(${(-y * 6).toFixed(2)}deg) rotateY(${(x * 6).toFixed(2)}deg)`;\r\n });\r\n });\r\n el.addEventListener(\"pointerleave\", () => { el.style.transform = \"\"; });\r\n });\r\n })();\r\n\r\n \/* \u2500\u2500 Word-by-word heading reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function words() {\r\n let wi = 0;\r\n const split = (node) => {\r\n [...node.childNodes].forEach(child => {\r\n if (child.nodeType === 3) {\r\n if (!child.textContent.trim()) return;\r\n const frag = document.createDocumentFragment();\r\n child.textContent.split(\/(\\s+)\/).forEach(tok => {\r\n if (tok === \"\") return;\r\n if (\/^\\s+$\/.test(tok)) { frag.appendChild(document.createTextNode(tok)); return; }\r\n const s = document.createElement(\"span\");\r\n s.className = \"word\"; s.style.setProperty(\"--wd\", wi++); s.textContent = tok;\r\n frag.appendChild(s);\r\n });\r\n node.replaceChild(frag, child);\r\n } else if (child.nodeType === 1 && child.tagName !== \"BR\") {\r\n split(child);\r\n }\r\n });\r\n };\r\n $$(\".section__title, .book__title\").forEach(t => { wi = 0; split(t); });\r\n })();\r\n\r\n \/* \u2500\u2500 Sticky story: reveal lines as you scroll through \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function story() {\r\n const sec = $(\"#chapter-story\");\r\n if (!sec) return;\r\n const lines = $$(\".story__line\", sec);\r\n const fill = $(\"#story-fill\");\r\n if (reduce) { lines.forEach(l => l.classList.add(\"is-lit\")); return; }\r\n let ticking = false;\r\n const update = () => {\r\n const total = sec.offsetHeight - window.innerHeight || 1;\r\n const p = Math.max(0, Math.min(1, -sec.getBoundingClientRect().top \/ total));\r\n lines.forEach((l, i) => l.classList.toggle(\"is-lit\", p >= i \/ lines.length));\r\n if (fill) fill.style.width = (p * 100) + \"%\";\r\n ticking = false;\r\n };\r\n window.addEventListener(\"scroll\", () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } }, { passive: true });\r\n window.addEventListener(\"resize\", update, { passive: true });\r\n update();\r\n })();\r\n\r\n \/* \u2500\u2500 3D fly-through of the five houses \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n (function fly() {\r\n const sec = $(\"#chapter-family\");\r\n const space = $(\"#flyspace\");\r\n if (!sec || !space) return;\r\n if (reduce || window.matchMedia(\"(pointer: coarse)\").matches) { sec.classList.add(\"is-static\"); return; }\r\n const panels = $$(\".fly__panel\", sec);\r\n const gap = 900, n = panels.length;\r\n let ticking = false;\r\n const update = () => {\r\n const total = sec.offsetHeight - window.innerHeight || 1;\r\n const p = Math.max(0, Math.min(1, -sec.getBoundingClientRect().top \/ total));\r\n const cam = p * (n + 1) * gap;\r\n space.style.transform = `translateZ(${cam}px)`;\r\n panels.forEach((pan, i) => {\r\n const eff = cam - (i + 1) * gap;\r\n let op;\r\n if (eff < -1400 || eff > 780) op = 0;\r\n else if (eff > 500) op = Math.max(0, (780 - eff) \/ 280);\r\n else if (eff < -900) op = Math.max(0, (eff + 1400) \/ 500);\r\n else op = 1;\r\n pan.style.opacity = op.toFixed(2);\r\n pan.style.pointerEvents = op > 0.5 ? \"auto\" : \"none\";\r\n });\r\n ticking = false;\r\n };\r\n window.addEventListener(\"scroll\", () => { if (!ticking) { requestAnimationFrame(update); ticking = true; } }, { passive: true });\r\n window.addEventListener(\"resize\", update, { passive: true });\r\n update();\r\n })();\r\n\r\n \/* \u2500\u2500 Group booking request \u2192 email to reservierung@dostepinn.at \u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const groupForm = $(\"#group-form\");\r\n if (groupForm) {\r\n groupForm.addEventListener(\"submit\", (e) => {\r\n e.preventDefault();\r\n const f = groupForm;\r\n const val = (n) => (f.elements[n]?.value || \"\").trim();\r\n const name = val(\"name\"), email = val(\"email\"), people = val(\"people\");\r\n if (!name || !email || !people) {\r\n [[\"name\", name], [\"email\", email], [\"people\", people]].forEach(([n, v]) => {\r\n if (!v && f.elements[n]) { f.elements[n].style.borderColor = \"#b4462f\"; }\r\n });\r\n return;\r\n }\r\n const rooms = [...f.querySelectorAll('input[name=\"rooms\"]:checked')].map(x => x.value).join(\", \") || \"\u2014\";\r\n const board = f.querySelector('input[name=\"board\"]:checked')?.value || \"\u2014\";\r\n const lines = [\r\n \"Group booking request\", \"\",\r\n `Name: ${name}`,\r\n `Email: ${email}`,\r\n `Organisation \/ school: ${val(\"org\") || \"\u2014\"}`,\r\n `Phone: ${val(\"phone\") || \"\u2014\"}`,\r\n `Check-in: ${val(\"checkin\") || \"\u2014\"}`,\r\n `Check-out: ${val(\"checkout\") || \"\u2014\"}`,\r\n `Number of people: ${people}`,\r\n `Gender split: ${val(\"genders\") || \"\u2014\"}`,\r\n `Preferred room split: ${rooms}`,\r\n `Board: ${board}`, \"\",\r\n \"Message:\", (val(\"message\") || \"\u2014\"), \"\",\r\n \"\u2014 sent from dostepinn.at\",\r\n ];\r\n const subject = `Group booking request \u2014 ${people} people`;\r\n const href = `mailto:reservierung@dostepinn.at?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines.join(\"\\n\"))}`;\r\n const ok = $(\"#group-ok\");\r\n if (ok) ok.hidden = false;\r\n \/\/ open the guest's email client with everything pre-filled\r\n window.location.href = href;\r\n });\r\n }\r\n\r\n \/* \u2550\u2550 MODAL PLUMBING \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n let lastFocus = null;\r\n function openModal(el) {\r\n lastFocus = document.activeElement;\r\n el.hidden = false;\r\n requestAnimationFrame(() => el.classList.add(\"is-open\"));\r\n document.body.style.overflow = \"hidden\";\r\n const focusable = el.querySelector(\"input, button, select, [tabindex]\");\r\n if (focusable) setTimeout(() => focusable.focus(), 60);\r\n document.addEventListener(\"keydown\", escClose);\r\n }\r\n function closeModal(el) {\r\n el.classList.remove(\"is-open\");\r\n document.body.style.overflow = \"\";\r\n document.removeEventListener(\"keydown\", escClose);\r\n setTimeout(() => { el.hidden = true; }, 500);\r\n if (lastFocus) lastFocus.focus();\r\n }\r\n function escClose(e) { if (e.key === \"Escape\") { const open = $(\".is-open\"); if (open) closeModal(open); } }\r\n\r\n \/* \u2500\u2500 Booking modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const booking = $(\"#booking\");\r\n document.addEventListener(\"click\", (e) => {\r\n const opener = e.target.closest(\"[data-open-booking]\");\r\n if (opener) {\r\n e.preventDefault();\r\n const target = document.getElementById(\"book-top\") || document.getElementById(\"chapter-book\");\r\n if (target) target.scrollIntoView({ behavior: reduce ? \"auto\" : \"smooth\", block: \"start\" });\r\n }\r\n if (e.target.closest(\"[data-close-booking]\")) closeModal(booking);\r\n });\r\n \/\/ sensible default dates\r\n const ci = $('input[name=\"checkin\"]'), co = $('input[name=\"checkout\"]');\r\n if (ci && co) {\r\n const today = new Date(); const t = new Date(today); t.setDate(t.getDate() + 1);\r\n const fmt = (d) => d.toISOString().slice(0, 10);\r\n ci.value = fmt(today); ci.min = fmt(today);\r\n co.value = fmt(t); co.min = fmt(t);\r\n ci.addEventListener(\"change\", () => { co.min = ci.value; if (co.value <= ci.value) { const n = new Date(ci.value); n.setDate(n.getDate() + 1); co.value = fmt(n); } });\r\n }\r\n $(\"#booking-form\").addEventListener(\"submit\", (e) => {\r\n e.preventDefault();\r\n const btn = e.target.querySelector('button[type=\"submit\"]');\r\n btn.textContent = \"Taking you to booking\u2026\";\r\n \/\/ Placeholder: integrate the real booking engine URL here in Phase 3.\r\n setTimeout(() => { btn.textContent = \"Search rooms\"; closeModal(booking); }, 1100);\r\n });\r\n\r\n \/* \u2550\u2550 CHAT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n const chat = $(\"#chat\");\r\n const body = $(\"#chat-body\");\r\n const promptsWrap = $(\"#chat-prompts\");\r\n const form = $(\"#chat-form\");\r\n const input = $(\"#chat-text\");\r\n const disclaimer = $(\"#chat-disclaimer\");\r\n const modeBtns = $$(\".chat__mode\");\r\n let mode = \"vienna\";\r\n const started = { vienna: false, home: false };\r\n\r\n function setMode(next, { greet = true } = {}) {\r\n mode = next;\r\n modeBtns.forEach(b => { const on = b.dataset.mode === next; b.classList.toggle(\"is-active\", on); b.setAttribute(\"aria-selected\", String(on)); });\r\n disclaimer.innerHTML = window.Concierge.DISCLAIMER[next];\r\n input.placeholder = next === \"vienna\" ? \"Ask about Vienna\u2026\" : \"Ask about your stay\u2026\";\r\n renderPrompts();\r\n if (greet && !started[next]) { started[next] = true; addBot(window.Concierge.GREETING[next]); }\r\n }\r\n\r\n function renderPrompts() {\r\n promptsWrap.innerHTML = \"\";\r\n window.Concierge.PROMPTS[mode].forEach(p => {\r\n const b = document.createElement(\"button\");\r\n b.type = \"button\"; b.textContent = p;\r\n b.addEventListener(\"click\", () => submit(p));\r\n promptsWrap.appendChild(b);\r\n });\r\n }\r\n\r\n function scrollDown() { body.scrollTop = body.scrollHeight; }\r\n\r\n function addUser(text) {\r\n const el = document.createElement(\"div\");\r\n el.className = \"msg msg--user\"; el.textContent = text;\r\n body.appendChild(el); scrollDown();\r\n }\r\n function addBot(html, pins) {\r\n const el = document.createElement(\"div\");\r\n el.className = \"msg msg--bot\"; el.innerHTML = html;\r\n if (pins && pins.length) {\r\n const wrap = document.createElement(\"div\"); wrap.className = \"msg__pins\";\r\n pins.forEach(p => { const pin = document.createElement(\"div\"); pin.className = \"msg__pin\"; pin.textContent = p; wrap.appendChild(pin); });\r\n el.appendChild(wrap);\r\n if (window.Scene && window.Scene.dropPins) window.Scene.dropPins(pins.length);\r\n }\r\n body.appendChild(el); scrollDown();\r\n }\r\n function typing() {\r\n const el = document.createElement(\"div\");\r\n el.className = \"msg msg--bot typing\"; el.innerHTML = \"<span><\/span><span><\/span><span><\/span>\";\r\n body.appendChild(el); scrollDown(); return el;\r\n }\r\n\r\n function submit(text) {\r\n text = (text || \"\").trim(); if (!text) return;\r\n addUser(text);\r\n const t = typing();\r\n const { html, pins } = window.Concierge.answer(mode, text);\r\n const delay = reduce ? 200 : 550 + Math.min(text.length * 8, 700);\r\n setTimeout(() => { t.remove(); addBot(html, pins); }, delay);\r\n }\r\n\r\n form.addEventListener(\"submit\", (e) => { e.preventDefault(); submit(input.value); input.value = \"\"; });\r\n modeBtns.forEach(b => b.addEventListener(\"click\", () => setMode(b.dataset.mode)));\r\n\r\n \/\/ Open chat from any [data-open-concierge]; optional data-prompt & mode\r\n document.addEventListener(\"click\", (e) => {\r\n const opener = e.target.closest(\"[data-open-concierge]\");\r\n if (opener) {\r\n e.preventDefault();\r\n const wanted = opener.dataset.openConcierge || \"vienna\";\r\n const prompt = opener.dataset.prompt;\r\n if (wanted !== mode) setMode(wanted, { greet: true });\r\n else if (!started[mode]) setMode(mode, { greet: true });\r\n openModal(chat);\r\n if (prompt) setTimeout(() => submit(prompt), 400);\r\n }\r\n if (e.target.closest(\"[data-close-chat]\")) closeModal(chat);\r\n });\r\n\r\n \/\/ initialise default mode greeting lazily on first open handled above\r\n setMode(\"vienna\", { greet: false });\r\n})();\r\n\r\n<\/script>\r\n <script type=\"module\">\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCENE \u2014 \"Vienna from above\"\r\n A real 3D St. Stephen's Cathedral (Stephansdom) in the 1st district,\r\n seen from a slow bird's-eye orbit at golden hour.\r\n Gated for performance; falls back to the static warm hero if WebGL \/\r\n the CDN is unavailable, or on mobile \/ reduced-motion.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\nconst reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\nconst coarse = window.matchMedia(\"(pointer: coarse)\").matches;\r\nconst smallScreen = window.innerWidth < 900;\r\nconst lowCores = (navigator.hardwareConcurrency || 4) < 4;\r\n\r\nwindow.Scene = { dropPins() {} };\r\n\r\nif (!reduceMotion && !coarse && !smallScreen && !lowCores) {\r\n const boot = () => init().catch(() => {});\r\n if (\"requestIdleCallback\" in window) requestIdleCallback(boot, { timeout: 1500 });\r\n else window.addEventListener(\"load\", boot);\r\n}\r\n\r\n\/* deterministic pseudo-random (Math.random is unavailable in some contexts) *\/\r\nlet _seed = 20260818;\r\nconst rnd = () => { _seed = (_seed * 16807) % 2147483647; return _seed \/ 2147483647; };\r\n\r\nasync function init() {\r\n const mount = document.getElementById(\"scene-mount\");\r\n if (!mount) return;\r\n const THREE = await import(\"three\");\r\n\r\n const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: \"high-performance\" });\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.6));\r\n renderer.setSize(mount.clientWidth, mount.clientHeight);\r\n renderer.shadowMap.enabled = true;\r\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\r\n mount.appendChild(renderer.domElement);\r\n\r\n const scene = new THREE.Scene();\r\n scene.fog = new THREE.Fog(0xe9d9bd, 26, 62);\r\n\r\n const camera = new THREE.PerspectiveCamera(42, mount.clientWidth \/ mount.clientHeight, 0.1, 200);\r\n\r\n \/\/ \u2500\u2500 Golden-hour light \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n scene.add(new THREE.HemisphereLight(0xfff0d8, 0x6a5a44, 1.05));\r\n const sun = new THREE.DirectionalLight(0xffdca8, 2.2);\r\n sun.position.set(-14, 20, 10);\r\n sun.castShadow = true;\r\n sun.shadow.mapSize.set(1024, 1024);\r\n sun.shadow.camera.near = 1; sun.shadow.camera.far = 70;\r\n sun.shadow.camera.left = -24; sun.shadow.camera.right = 24;\r\n sun.shadow.camera.top = 24; sun.shadow.camera.bottom = -24;\r\n scene.add(sun);\r\n scene.add(new THREE.AmbientLight(0xffe9cc, 0.5));\r\n\r\n const city = new THREE.Group();\r\n scene.add(city);\r\n\r\n \/\/ \u2500\u2500 Ground (old-town cobble) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const ground = new THREE.Mesh(\r\n new THREE.CircleGeometry(60, 64),\r\n new THREE.MeshStandardMaterial({ color: 0xbca988, roughness: 1 })\r\n );\r\n ground.rotation.x = -Math.PI \/ 2;\r\n ground.receiveShadow = true;\r\n city.add(ground);\r\n\r\n \/\/ \u2500\u2500 Materials \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const stone = new THREE.MeshStandardMaterial({ color: 0xd9cdb4, roughness: .85 });\r\n const stoneWarm = new THREE.MeshStandardMaterial({ color: 0xcdbb98, roughness: .9 });\r\n\r\n \/\/ Iconic chevron roof texture (Habsburg-style zig-zag tiles)\r\n function roofTexture() {\r\n const c = document.createElement(\"canvas\"); c.width = 128; c.height = 128;\r\n const x = c.getContext(\"2d\");\r\n x.fillStyle = \"#3f6b4e\"; x.fillRect(0, 0, 128, 128);\r\n const cols = [\"#c8a24b\", \"#e8dcc0\", \"#8d3b2e\", \"#3f6b4e\"];\r\n for (let r = 0; r < 8; r++) for (let cc = 0; cc < 8; cc++) {\r\n x.fillStyle = cols[(r + cc) % cols.length];\r\n x.beginPath(); x.moveTo(cc*16, r*16); x.lineTo(cc*16+8, r*16+8);\r\n x.lineTo(cc*16, r*16+16); x.closePath(); x.fill();\r\n }\r\n const t = new THREE.CanvasTexture(c);\r\n t.wrapS = t.wrapT = THREE.RepeatWrapping; t.repeat.set(3, 2);\r\n return t;\r\n }\r\n const roofMat = new THREE.MeshStandardMaterial({ map: roofTexture(), roughness: .7 });\r\n const roofPlain = new THREE.MeshStandardMaterial({ color: 0x6b4a34, roughness: .9 });\r\n\r\n \/\/ \u2500\u2500 STEPHANSDOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const dom = new THREE.Group();\r\n city.add(dom);\r\n\r\n \/\/ Nave\r\n const nave = new THREE.Mesh(new THREE.BoxGeometry(3.4, 3, 8.5), stone);\r\n nave.position.y = 1.5; nave.castShadow = nave.receiveShadow = true;\r\n dom.add(nave);\r\n\r\n \/\/ Steep chevron roof (triangular prism via extruded triangle)\r\n const triShape = new THREE.Shape();\r\n triShape.moveTo(-1.75, 0); triShape.lineTo(1.75, 0); triShape.lineTo(0, 3.1); triShape.closePath();\r\n const roofGeo = new THREE.ExtrudeGeometry(triShape, { depth: 8.5, bevelEnabled: false });\r\n roofGeo.translate(0, 0, -4.25);\r\n const roof = new THREE.Mesh(roofGeo, roofMat);\r\n roof.position.y = 3; roof.castShadow = true;\r\n dom.add(roof);\r\n\r\n \/\/ South Tower \"Steffl\" \u2014 the tall tapering gothic spire\r\n const steffl = new THREE.Group();\r\n steffl.position.set(0, 0, -4.4);\r\n const towerBase = new THREE.Mesh(new THREE.BoxGeometry(1.7, 6, 1.7), stone);\r\n towerBase.position.y = 3; towerBase.castShadow = true; steffl.add(towerBase);\r\n const taper = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 1.15, 5, 4), stoneWarm);\r\n taper.position.y = 8.5; taper.rotation.y = Math.PI \/ 4; taper.castShadow = true; steffl.add(taper);\r\n const spire = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.34, 4.5, 6), roofPlain);\r\n spire.position.y = 13; spire.castShadow = true; steffl.add(spire);\r\n dom.add(steffl);\r\n\r\n \/\/ North Tower \u2014 shorter, green renaissance dome\r\n const north = new THREE.Group();\r\n north.position.set(0, 0, 4.4);\r\n const nBase = new THREE.Mesh(new THREE.BoxGeometry(1.7, 5, 1.7), stone);\r\n nBase.position.y = 2.5; nBase.castShadow = true; north.add(nBase);\r\n const dome = new THREE.Mesh(new THREE.SphereGeometry(1.05, 20, 16, 0, Math.PI * 2, 0, Math.PI \/ 2),\r\n new THREE.MeshStandardMaterial({ color: 0x4a6b52, roughness: .5, metalness: .3 }));\r\n dome.position.y = 5; dome.castShadow = true; north.add(dome);\r\n const lantern = new THREE.Mesh(new THREE.CylinderGeometry(0.18, 0.18, 0.7, 8),\r\n new THREE.MeshStandardMaterial({ color: 0xc8a24b, metalness: .6, roughness: .3 }));\r\n lantern.position.y = 6.1; north.add(lantern);\r\n dom.add(north);\r\n\r\n \/\/ \u2500\u2500 First district around it (instanced blocks with warm facades) \u2500\u2500\u2500\r\n const COUNT = 120;\r\n const bgeo = new THREE.BoxGeometry(1, 1, 1);\r\n const bmat = new THREE.MeshStandardMaterial({ color: 0xcbb897, roughness: .9, vertexColors: false });\r\n const blocks = new THREE.InstancedMesh(bgeo, bmat, COUNT);\r\n blocks.castShadow = blocks.receiveShadow = true;\r\n const dummy = new THREE.Object3D();\r\n const palette = [0xd8c6a4, 0xcbb897, 0xc3ad86, 0xd0be9c, 0xe0d2b4];\r\n const col = new THREE.Color();\r\n let n = 0;\r\n for (let i = 0; i < 600 && n < COUNT; i++) {\r\n const x = (rnd() - 0.5) * 46;\r\n const z = (rnd() - 0.5) * 46;\r\n if (Math.hypot(x, z) < 8) continue; \/\/ keep the cathedral square clear\r\n const w = 1.6 + rnd() * 2.4, d = 1.6 + rnd() * 2.4;\r\n const h = 2 + rnd() * (Math.hypot(x, z) > 18 ? 3 : 4.5);\r\n dummy.position.set(x, h \/ 2, z);\r\n dummy.scale.set(w, h, d);\r\n dummy.rotation.y = Math.round(rnd() * 4) * Math.PI \/ 2;\r\n dummy.updateMatrix();\r\n blocks.setMatrixAt(n, dummy.matrix);\r\n col.setHex(palette[(n * 7) % palette.length]);\r\n blocks.setColorAt(n, col);\r\n n++;\r\n }\r\n blocks.count = n;\r\n city.add(blocks);\r\n\r\n \/\/ Simple pitched roofs on the nearer blocks\r\n const rgeo = new THREE.ConeGeometry(1.15, 1, 4);\r\n const rInst = new THREE.InstancedMesh(rgeo, roofPlain, n);\r\n for (let i = 0; i < n; i++) {\r\n blocks.getMatrixAt(i, dummy.matrix);\r\n dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);\r\n const top = dummy.position.y + dummy.scale.y \/ 2;\r\n const rw = Math.max(dummy.scale.x, dummy.scale.z) * 0.62;\r\n dummy.position.y = top + 0.35; dummy.scale.set(rw, 0.9, rw);\r\n dummy.rotation.set(0, Math.PI \/ 4, 0); dummy.updateMatrix();\r\n rInst.setMatrixAt(i, dummy.matrix);\r\n }\r\n rInst.castShadow = true;\r\n city.add(rInst);\r\n\r\n \/\/ \u2500\u2500 Concierge pins (glow markers dropped by the chatbot) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const pins = new THREE.Group(); city.add(pins);\r\n const pinGeo = new THREE.SphereGeometry(0.22, 14, 14);\r\n const pinMat = new THREE.MeshStandardMaterial({ color: 0xc8a24b, emissive: 0xc8a24b, emissiveIntensity: 1.5 });\r\n window.Scene.dropPins = (k = 3) => {\r\n for (let i = 0; i < k; i++) {\r\n const p = new THREE.Mesh(pinGeo, pinMat);\r\n const a = rnd() * Math.PI * 2, r = 9 + rnd() * 12;\r\n p.position.set(Math.cos(a) * r, 10, Math.sin(a) * r);\r\n p.userData = { ty: 5 + rnd() * 4, t: rnd() * 6 };\r\n pins.add(p);\r\n }\r\n while (pins.children.length > 12) pins.remove(pins.children[0]);\r\n };\r\n\r\n \/\/ \u2500\u2500 Interaction & animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n let mx = 0, my = 0, scrollN = 0;\r\n window.addEventListener(\"pointermove\", e => {\r\n mx = e.clientX \/ window.innerWidth - 0.5; my = e.clientY \/ window.innerHeight - 0.5;\r\n }, { passive: true });\r\n window.addEventListener(\"scroll\", () => {\r\n scrollN = Math.min(window.scrollY \/ (window.innerHeight || 1), 1.3);\r\n }, { passive: true });\r\n\r\n const onResize = () => {\r\n const w = mount.clientWidth, h = mount.clientHeight;\r\n renderer.setSize(w, h); camera.aspect = w \/ h; camera.updateProjectionMatrix();\r\n };\r\n window.addEventListener(\"resize\", onResize);\r\n\r\n let running = true;\r\n document.addEventListener(\"visibilitychange\", () => { running = !document.hidden; if (running) loop(); });\r\n\r\n let frame = 0;\r\n function loop() {\r\n if (!running) return;\r\n frame++;\r\n const t = frame * 0.0016;\r\n \/\/ slow bird's-eye orbit\r\n const radius = 20 - scrollN * 4;\r\n const ang = t + mx * 0.5;\r\n camera.position.set(Math.sin(ang) * radius, 15 + scrollN * 6 - my * 2, Math.cos(ang) * radius);\r\n camera.lookAt(0, 3.5, 0);\r\n\r\n pins.children.forEach(p => {\r\n if (p.position.y > p.userData.ty) p.position.y += (p.userData.ty - p.position.y) * 0.08;\r\n p.userData.t += 0.05;\r\n p.material.emissiveIntensity = 1.3 + Math.sin(p.userData.t * 2) * 0.4;\r\n });\r\n\r\n renderer.render(scene, camera);\r\n requestAnimationFrame(loop);\r\n }\r\n loop();\r\n\r\n \/\/ fade the static fallback out once GL is live\r\n const fb = document.querySelector(\".hero__fallback\");\r\n if (fb) { fb.style.transition = \"opacity 1.4s ease\"; fb.style.opacity = \"0\"; }\r\n}\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Do Step Inn Home \u2014 Your calm home base in Vienna | Hotel & Hostel near Westbahnhof Skip to rooms & booking Vienna \u00b7 1150 \u00b7 opposite Westbahnhof Feel at home. Step into Vienna. Off the train, up the step, and you\u2019re home. Your calm base in the middle of everything \u2014 rooms for every […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":44,"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/pages\/112\/revisions\/278"}],"wp:attachment":[{"href":"https:\/\/dostepinn.com\/index.php\/wp-json\/wp\/v2\/media?parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}