{"id":148,"date":"2026-09-12T08:54:52","date_gmt":"2026-09-12T08:54:52","guid":{"rendered":"https:\/\/befree-hostel.com\/?page_id=148"},"modified":"2026-09-12T08:56:03","modified_gmt":"2026-09-12T08:56:03","slug":"home","status":"publish","type":"page","link":"https:\/\/befree-hostel.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"148\" class=\"elementor elementor-148\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9323525 e-flex e-con-boxed e-con e-parent\" data-id=\"9323525\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90b9c2b elementor-widget elementor-widget-html\" data-id=\"90b9c2b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- Be Free Hostel \u2014 INHALT der Startseite.\r\n     Header und Footer sind eigene Dateien: header.html, footer.html.\r\n     Auf eine normale Seite (kein Canvas), ein HTML-Widget, alles hier hinein.\r\n     Seitentitel und Meta-Beschreibung setzt ihr in WordPress. -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Bagel+Fat+One&family=Shrikhand&family=Karla:ital,wght@0,300..800;1,300..800&family=DM+Mono:wght@400;500&display=swap\" \/>\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\r\n   Be Free Hostel \u2014 Beingasse 13, 1150 Wien\r\n   Flower power meets street art. Pink leads, the logo palette follows.\r\n   Every brand colour below was sampled from the real logo artwork.\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 *\/\r\n\r\n:root{\r\n  \/* \u2500\u2500 brand, sampled from Logo_BeFree_querformat_transparent.png \u2500\u2500 *\/\r\n  --ink:       #0B0B0C;\r\n  --pink:      #FF3D9A;   \/* the lead colour: booking, emphasis, bands *\/\r\n  --pink-mid:  #F97CB6;\r\n  --pink-soft: #FFD9E9;\r\n  --gold:      #E4B430;\r\n  --orange:    #E8871F;\r\n  --turq:      #4FC3CE;\r\n  --violet:    #B444E0;\r\n  --leaf:      #57D96B;\r\n  --cherry:    #E8404C;\r\n\r\n  \/* \u2500\u2500 ground: warm paper, pulled slightly toward the gold \u2500\u2500 *\/\r\n  --paper:     #FFF7E4;\r\n  --paper-rgb: 255,247,228;\r\n  --paper-2:   #FFEFCF;\r\n  --card:      #FFFDF6;\r\n  --text:      #17130E;\r\n  --text-dim:  #6A5B45;\r\n  --rule:      rgba(11,11,12,.16);\r\n\r\n  --shadow:    6px 6px 0 var(--ink);\r\n  --shadow-sm: 3px 3px 0 var(--ink);\r\n\r\n  --maxw: 1200px;\r\n  --read: 66ch;\r\n  --nav-h: 74px;\r\n\r\n  --f-fat:     \"Bagel Fat One\",\"Shrikhand\",system-ui,sans-serif;\r\n  --f-display: \"Shrikhand\",Georgia,\"Times New Roman\",serif;\r\n  --f-body:    \"Karla\",\"Helvetica Neue\",Arial,sans-serif;\r\n  --f-mono:    \"DM Mono\",ui-monospace,\"SF Mono\",Menlo,monospace;\r\n}\r\n\r\n*{box-sizing:border-box}\r\nhtml{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}\r\nbody{\r\n  margin:0;\r\n  background:var(--paper);\r\n  color:var(--text);\r\n  font-family:var(--f-body);\r\n  font-size:17px;\r\n  line-height:1.65;\r\n  -webkit-font-smoothing:antialiased;\r\n  overflow-x:hidden;\r\n}\r\nh1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400}\r\np{margin:0}\r\nimg{max-width:100%;display:block}\r\na{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}\r\n:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:3px}\r\n\r\n.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,5vw,44px)}\r\n.skip{\r\n  position:absolute;left:-9999px;top:0;z-index:200;\r\n  background:var(--pink);color:var(--ink);font-weight:800;\r\n  border:2px solid var(--ink);border-radius:0 0 14px 0;padding:12px 20px;\r\n}\r\n.skip:focus{left:0}\r\n.vh{\r\n  position:absolute;width:1px;height:1px;margin:-1px;padding:0;\r\n  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;\r\n}\r\n\r\n\/* \u2550\u2550\u2550 TYPE SCALE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.t-fat{font-family:var(--f-fat);line-height:.9;letter-spacing:-.02em}\r\n.t-dsp{font-family:var(--f-display);line-height:1.04;letter-spacing:-.005em}\r\n.eyebrow{\r\n  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;\r\n  text-transform:uppercase;color:var(--text-dim);\r\n  display:inline-flex;align-items:center;gap:9px;\r\n}\r\n.eyebrow::before{\r\n  content:\"\";width:14px;height:14px;border-radius:50%;flex:none;\r\n  background:var(--dot,var(--pink));border:2px solid var(--ink);\r\n}\r\n.lede{font-size:clamp(17px,2vw,20px);line-height:1.6;max-width:var(--read)}\r\n.small{font-size:15px;line-height:1.6}\r\n.dim{color:var(--text-dim)}\r\n\r\n\/* \u2550\u2550\u2550 BUTTONS \u2014 pink is always the booking, nowhere else \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.pill{\r\n  display:inline-flex;align-items:center;gap:11px;\r\n  font-family:var(--f-body);font-weight:800;font-size:15px;\r\n  background:var(--pc,var(--pink));color:var(--ink);\r\n  border:2px solid var(--ink);border-radius:99px;\r\n  padding:8px 9px 8px 22px;box-shadow:var(--shadow-sm);\r\n  cursor:pointer;text-decoration:none;white-space:nowrap;\r\n  transition:transform .14s ease,box-shadow .14s ease;\r\n}\r\n.pill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}\r\n.pill:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}\r\n.pill__a{\r\n  width:32px;height:32px;border-radius:50%;flex:none;\r\n  background:var(--paper);border:2px solid var(--ink);\r\n  display:grid;place-items:center;font-size:15px;line-height:1;\r\n}\r\n.pill--ghost{background:transparent;box-shadow:none;padding:8px 20px}\r\n.pill--ghost:hover{background:var(--pink-soft);transform:none;box-shadow:var(--shadow-sm)}\r\n\r\n\/* \u2550\u2550\u2550 STICKER TAGS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.stix{display:flex;flex-wrap:wrap;gap:10px;align-items:center}\r\n.stix > *{\r\n  font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;\r\n  text-transform:uppercase;font-style:normal;\r\n  border:2px solid var(--ink);border-radius:99px;padding:5px 13px;\r\n  background:var(--sc,var(--card));color:var(--ink);\r\n  box-shadow:2px 2px 0 var(--ink);display:inline-block;\r\n}\r\n.stix > *:nth-child(2n){transform:rotate(-3deg)}\r\n.stix > *:nth-child(3n){transform:rotate(2.4deg)}\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 *\/\r\n.nav{\r\n  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);\r\n  display:flex;align-items:center;\r\n  background:rgba(var(--paper-rgb),.90);\r\n  border-bottom:2px solid var(--ink);\r\n  backdrop-filter:blur(10px);\r\n}\r\n.nav__in{display:flex;align-items:center;gap:18px;width:100%}\r\n.nav__brand{display:flex;align-items:center;flex:none;text-decoration:none}\r\n.nav__brand img{height:46px;width:auto}\r\n.nav__links{\r\n  display:flex;gap:4px;margin-left:auto;list-style:none;margin-block:0;padding:0;\r\n}\r\n.nav__links a{\r\n  font-size:14.5px;font-weight:700;text-decoration:none;\r\n  padding:7px 13px;border-radius:99px;border:2px solid transparent;display:block;\r\n}\r\n.nav__links a:hover{background:var(--pink-soft);border-color:var(--ink)}\r\n.nav__side{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}\r\n.nav__links + .nav__side{margin-left:14px}\r\n\r\n.lang{display:inline-flex;border:2px solid var(--ink);border-radius:99px;overflow:hidden;flex:none}\r\n.lang button{\r\n  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;\r\n  border:0;background:var(--card);color:var(--text);\r\n  padding:7px 13px;cursor:pointer;line-height:1;\r\n}\r\n.lang button[aria-pressed=\"true\"]{background:var(--turq);color:var(--ink);font-weight:500}\r\n\r\n.burger{\r\n  display:none;width:44px;height:38px;border:2px solid var(--ink);border-radius:12px;\r\n  background:var(--card);cursor:pointer;padding:0;place-items:center;\r\n}\r\n.burger span{display:block;width:20px;height:2.5px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}\r\n\r\n@media (max-width:980px){\r\n  .nav__links{\r\n    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:2px;\r\n    background:var(--paper);border-bottom:2px solid var(--ink);\r\n    padding:14px clamp(18px,5vw,44px) 20px;display:none;\r\n  }\r\n  .nav__links.open{display:flex}\r\n  .nav__links a{padding:11px 14px;font-size:16px}\r\n  .burger{display:grid}\r\n  .nav__side{margin-left:auto}\r\n  .nav .pill{display:none}\r\n}\r\n\r\n\/* \u2550\u2550\u2550 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\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-top:var(--nav-h);overflow:hidden;\r\n}\r\n#petals{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}\r\n.hero__scrim{\r\n  position:absolute;inset:0;z-index:1;pointer-events:none;\r\n  background:linear-gradient(96deg,\r\n    rgba(var(--paper-rgb),.97) 0%, rgba(var(--paper-rgb),.94) 30%,\r\n    rgba(var(--paper-rgb),.60) 50%, rgba(var(--paper-rgb),.08) 70%,\r\n    rgba(var(--paper-rgb),0) 82%);\r\n}\r\n.hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(40px,7vw,80px)}\r\n.hero h1{\r\n  font-family:var(--f-fat);\r\n  font-size:clamp(48px,11vw,128px);\r\n  line-height:.88;letter-spacing:-.025em;margin-bottom:24px;\r\n}\r\n.hero h1 span{display:block}\r\n.hero h1 .c1{color:var(--pink)}\r\n.hero h1 .c2{color:var(--turq)}\r\n.hero__sub{max-width:46ch;font-size:clamp(16px,1.9vw,19px);line-height:1.58;margin-bottom:26px}\r\n.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}\r\n\r\n@media (max-width:760px){\r\n  .hero__scrim{\r\n    background:linear-gradient(180deg,\r\n      rgba(var(--paper-rgb),.92) 0%, rgba(var(--paper-rgb),.94) 50%,\r\n      rgba(var(--paper-rgb),.78) 80%, rgba(var(--paper-rgb),.40) 100%);\r\n  }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 TICKER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.ticker{\r\n  border-block:2px solid var(--ink);background:var(--gold);color:var(--ink);\r\n  overflow:hidden;white-space:nowrap;padding-block:12px;\r\n}\r\n.ticker__row{display:inline-flex;animation:tick 30s linear infinite;will-change:transform}\r\n.ticker__row span{\r\n  font-family:var(--f-display);font-size:clamp(15px,2.1vw,23px);\r\n  padding-inline:18px;display:inline-block;\r\n}\r\n.ticker__row span::after{content:\"\u273f\";padding-left:18px;opacity:.6}\r\n@keyframes tick{to{transform:translateX(-50%)}}\r\n\r\n\/* \u2550\u2550\u2550 SECTIONS & BANDS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.sec{padding-block:clamp(56px,8.5vw,104px);position:relative}\r\n.sec__head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,44px)}\r\n.sec h2{font-size:clamp(30px,5.2vw,54px)}\r\n\r\n.band{\r\n  background:var(--bg,var(--pink-mid));color:var(--ink);\r\n  border-block:2px solid var(--ink);\r\n  padding-block:clamp(52px,8vw,96px);position:relative;overflow:hidden;\r\n}\r\n.band .eyebrow{color:rgba(11,11,12,.66)}\r\n.band .eyebrow::before{border-color:var(--ink)}\r\n.band .dim{color:rgba(11,11,12,.72)}\r\n.band h2{font-size:clamp(28px,5vw,50px)}\r\n.band .stix > *{box-shadow:2px 2px 0 rgba(0,0,0,.45)}\r\n\r\n.bleedmark{\r\n  font-family:var(--f-fat);\r\n  font-size:clamp(58px,15vw,190px);line-height:.82;letter-spacing:-.03em;\r\n  white-space:nowrap;text-align:center;user-select:none;pointer-events:none;\r\n  margin-inline:calc(50% - 50vw);margin-top:clamp(20px,3vw,34px);\r\n  color:var(--bm,rgba(255,255,255,.40));\r\n}\r\n\r\n\/* \u2550\u2550\u2550 CARDS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.grid{display:grid;gap:clamp(14px,2vw,20px)}\r\n.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}\r\n.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}\r\n\r\n.card{\r\n  background:var(--card);border:2px solid var(--ink);border-radius:22px;\r\n  padding:clamp(20px,2.5vw,28px);box-shadow:var(--shadow-sm);\r\n  display:flex;flex-direction:column;gap:10px;\r\n}\r\n.card h3{font-family:var(--f-body);font-weight:800;font-size:clamp(18px,2.1vw,21px);line-height:1.25}\r\n.card__tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}\r\n\r\n.pcard{\r\n  border:2px solid var(--ink);border-radius:24px;overflow:hidden;\r\n  background:var(--bg,var(--pink-soft));color:var(--ink);box-shadow:var(--shadow-sm);\r\n  display:flex;flex-direction:column;\r\n}\r\n.pcard img{\r\n  width:100%;height:auto;      \/* height:auto or the img height attribute wins over aspect-ratio *\/\r\n  aspect-ratio:4\/3;object-fit:cover;border-bottom:2px solid var(--ink);\r\n}\r\n.pcard__b{padding:18px 18px 22px;display:flex;flex-direction:column;gap:9px;flex:1}\r\n.pcard h3{font-family:var(--f-body);font-weight:800;font-size:19px}\r\n.pcard p{font-size:14.5px;line-height:1.55}\r\n.pcard__m{\r\n  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;\r\n  margin-top:auto;padding-top:8px;border-top:2px solid rgba(11,11,12,.22);\r\n}\r\n\r\n\/* numbered steps \u2014 a real sequence, so real numbers *\/\r\n.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}\r\n.step{\r\n  border:2px solid var(--ink);border-radius:22px;background:var(--card);\r\n  box-shadow:var(--shadow-sm);padding:22px 20px;display:flex;flex-direction:column;gap:10px;\r\n}\r\n.step__n{\r\n  font-family:var(--f-fat);font-size:38px;line-height:1;\r\n  color:var(--sc,var(--pink));-webkit-text-stroke:2px var(--ink);\r\n}\r\n.step h3{font-family:var(--f-body);font-weight:800;font-size:19px}\r\n.step p{font-size:14.5px;line-height:1.55;color:var(--text-dim)}\r\n\r\n\/* \u2550\u2550\u2550 LOCATION MARKERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}\r\n.mark{\r\n  border:2px solid var(--ink);border-radius:20px;background:var(--card);\r\n  box-shadow:var(--shadow-sm);padding:18px 17px;display:flex;flex-direction:column;gap:5px;\r\n}\r\n.mark b{font-family:var(--f-body);font-weight:800;font-size:16px}\r\n.mark span{font-size:14px;line-height:1.5;color:var(--text-dim)}\r\n\r\n\/* \u2550\u2550\u2550 PARALLAX 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\u2550\u2550\u2550\u2550\u2550\r\n   Two columns that drift at different speeds, and inside every frame the\r\n   photograph itself shifts a little against it. The crop is deliberately\r\n   small \u2014 about 4% off the top or bottom at the extremes \u2014 so the picture\r\n   stays a picture: upright, whole, readable. Click it for the full frame. *\/\r\n.px{\r\n  position:relative;background:var(--paper);border-top:2px solid var(--ink);\r\n  padding-block:clamp(46px,7vw,96px);overflow:clip;\r\n}\r\n.px__grid{display:grid;gap:clamp(20px,3.4vw,46px);grid-template-columns:1fr;margin-top:clamp(26px,4vw,46px)}\r\n@media(min-width:860px){\r\n  .px__grid{grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,54px)}\r\n  .px__item:nth-child(even){margin-top:clamp(44px,7vw,112px)}\r\n}\r\n.px__item{\r\n  -webkit-appearance:none;appearance:none;background:none;border:0;margin:0;padding:0;\r\n  display:block;width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer;\r\n}\r\n.px__frame{\r\n  display:block;position:relative;overflow:hidden;\r\n  border:2px solid var(--ink);border-radius:24px;background:var(--card);\r\n  box-shadow:var(--shadow);aspect-ratio:7\/5;\r\n  transition:box-shadow .18s ease,transform .18s cubic-bezier(.2,.9,.3,1);\r\n}\r\n.px__item:hover .px__frame,\r\n.px__item:focus-visible .px__frame{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}\r\n.px__frame img{\r\n  position:absolute;left:0;top:-4%;width:100%;height:108%;\r\n  object-fit:cover;display:block;will-change:transform;\r\n}\r\n.px__tag{\r\n  position:absolute;left:12px;bottom:12px;z-index:2;\r\n  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;\r\n  background:var(--pink);color:var(--ink);border:2px solid var(--ink);border-radius:99px;\r\n  padding:5px 12px;box-shadow:2px 2px 0 var(--ink);\r\n}\r\n.px__item:nth-child(4n+2) .px__tag{background:var(--turq)}\r\n.px__item:nth-child(4n+3) .px__tag{background:var(--gold)}\r\n.px__item:nth-child(4n+4) .px__tag{background:var(--leaf)}\r\n.px__cap{\r\n  display:flex;align-items:baseline;gap:11px;margin-top:13px;\r\n  font-family:var(--f-body);font-weight:800;font-size:clamp(15px,1.8vw,19px);line-height:1.3;\r\n}\r\n.px__cap i{\r\n  font-family:var(--f-mono);font-style:normal;font-size:12px;letter-spacing:.12em;\r\n  color:var(--text-dim);flex:none;\r\n}\r\n\r\n\/* lightbox *\/\r\n.lb{position:fixed;inset:0;z-index:80;display:none;background:rgba(11,11,12,.92);padding:clamp(14px,3vw,34px)}\r\n.lb[open]{display:grid;grid-template-rows:1fr auto;gap:14px;place-items:center}\r\n.lb__fig{\r\n  margin:0;max-width:min(1200px,94vw);max-height:78svh;display:grid;\r\n  border:2px solid var(--ink);border-radius:20px;overflow:hidden;background:#000;\r\n  box-shadow:8px 8px 0 rgba(0,0,0,.5);\r\n}\r\n.lb__fig img{max-width:100%;max-height:78svh;object-fit:contain}\r\n.lb__bar{display:flex;flex-wrap:wrap;gap:11px;align-items:center;justify-content:center}\r\n.lb__cap{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.07em;color:var(--paper);min-width:11ch;text-align:center}\r\n.lb__btn{\r\n  font-family:var(--f-body);font-weight:800;font-size:14px;\r\n  border:2px solid var(--ink);border-radius:99px;background:var(--paper);color:var(--ink);\r\n  padding:8px 17px;cursor:pointer;box-shadow:2px 2px 0 rgba(0,0,0,.55);\r\n}\r\n.lb__btn--x{background:var(--pink)}\r\n\r\n\/* \u2550\u2550\u2550 BOOKING WIDGET (UP Hotel IBE) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.ibe{\r\n  width:100%;max-width:900px;min-height:64px;\r\n  background:var(--card);border:2px solid var(--ink);border-radius:22px;\r\n  padding:clamp(14px,2vw,20px);box-shadow:var(--shadow-sm);\r\n}\r\n.ibe[hidden]{display:none}\r\n\r\n\/* an inline display would outrank the UA rule for [hidden], so the\r\n   fallback carries its layout in CSS and hides on the attribute *\/\r\n.book-fb{display:flex;flex-direction:column;gap:14px;align-items:flex-start}\r\n.book-fb[hidden]{display:none}\r\n\r\n\/* \u2550\u2550\u2550 BOOK BAR \u2014 the search sitting right under the hero \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.bookbar{\r\n  background:var(--gold);border-bottom:2px solid var(--ink);\r\n  padding-block:clamp(26px,3.6vw,44px);\r\n}\r\n.bookbar[hidden]{display:none}\r\n.bookbar__in{display:grid;gap:clamp(16px,2.4vw,28px);align-items:center}\r\n@media(min-width:940px){.bookbar__in{grid-template-columns:minmax(240px,1fr) minmax(0,1.55fr)}}\r\n.bookbar__t{display:flex;flex-direction:column;gap:8px;color:var(--ink)}\r\n.bookbar__t .eyebrow{color:rgba(11,11,12,.66)}\r\n.bookbar__t .eyebrow::before{border-color:var(--ink)}\r\n.bookbar__t h2{font-size:clamp(24px,3.4vw,38px)}\r\n.bookbar__t p{max-width:38ch;color:rgba(11,11,12,.78)}\r\n\r\n\/* the booking form: what shows until the IBE takes over, and whenever\r\n   the engine cannot load at all *\/\r\n.ibeform{\r\n  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;\r\n  background:var(--card);border:2px solid var(--ink);border-radius:22px;\r\n  padding:clamp(14px,2vw,20px);box-shadow:var(--shadow-sm);\r\n}\r\n.ibeform[hidden]{display:none}\r\n.ibeform__f{display:flex;flex-direction:column;gap:5px;flex:1 1 140px;min-width:0}\r\n.ibeform__f span{\r\n  font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;\r\n  text-transform:uppercase;color:var(--text-dim);\r\n}\r\n.ibeform input,.ibeform select{\r\n  font-family:var(--f-body);font-size:15.5px;font-weight:700;color:var(--text);\r\n  background:var(--paper);border:2px solid var(--ink);border-radius:14px;\r\n  padding:9px 12px;width:100%;min-width:0;\r\n}\r\n.ibeform input:focus-visible,.ibeform select:focus-visible{outline:3px solid var(--pink);outline-offset:2px}\r\n.ibeform .pill{flex:0 0 auto}\r\n@media(max-width:520px){\r\n  .ibeform{gap:10px}\r\n  .ibeform__f{flex:1 1 100%}\r\n  .ibeform .pill{width:100%;justify-content:space-between}\r\n}\r\n\r\n.bookbar__w{display:flex;flex-direction:column;gap:12px;min-width:0}\r\n.bookband{margin-bottom:4px}\r\n\r\n\/* the third booking spot: a quiet strip closing the rooms section *\/\r\n.bookrooms{\r\n  border:2px solid var(--ink);border-radius:24px;background:var(--paper-2);\r\n  box-shadow:var(--shadow-sm);padding:clamp(16px,2.2vw,24px);\r\n  display:flex;flex-direction:column;gap:12px;\r\n}\r\n.bookrooms__t{\r\n  font-family:var(--f-body);font-weight:800;font-size:clamp(16px,2vw,19px);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 A BOOKING BUTTON THAT FOLLOWS ON PHONES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.bookfab{\r\n  position:fixed;z-index:45;left:50%;bottom:16px;transform:translate(-50%,140%);\r\n  display:none;align-items:center;gap:10px;\r\n  font-family:var(--f-body);font-weight:800;font-size:15px;text-decoration:none;\r\n  background:var(--pink);color:var(--ink);\r\n  border:2px solid var(--ink);border-radius:99px;\r\n  padding:9px 10px 9px 22px;box-shadow:var(--shadow);\r\n  transition:transform .3s cubic-bezier(.2,.9,.3,1);\r\n}\r\n.bookfab.in{transform:translate(-50%,0)}\r\n@media(max-width:980px){.bookfab{display:inline-flex}}\r\n\r\n\/* \u2550\u2550\u2550 CONTACT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.contact{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}\r\n.ccard{\r\n  border:2px solid var(--ink);border-radius:22px;background:var(--card);\r\n  box-shadow:var(--shadow-sm);padding:24px 22px;display:flex;flex-direction:column;gap:10px;\r\n}\r\n.ccard__n{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--text-dim)}\r\n.ccard h3{font-family:var(--f-body);font-weight:800;font-size:19px}\r\n.ccard a.big{\r\n  font-family:var(--f-display);font-size:clamp(18px,2.4vw,25px);line-height:1.25;\r\n  word-break:break-word;text-decoration-color:var(--pink);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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.foot{background:var(--ink);color:var(--paper);border-top:2px solid var(--ink);padding-block:clamp(40px,6vw,68px)}\r\n.foot__grid{display:grid;gap:clamp(22px,3vw,38px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}\r\n.foot h3{font-family:var(--f-display);font-size:clamp(22px,3.4vw,34px);line-height:1.1;color:var(--pink-soft)}\r\n.foot a{color:var(--paper)}\r\n.foot__l{display:flex;flex-direction:column;gap:7px;font-size:15px}\r\n.foot__k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,247,228,.55);margin-bottom:4px}\r\n.foot__base{\r\n  margin-top:clamp(26px,4vw,42px);padding-top:20px;border-top:1px solid rgba(255,247,228,.22);\r\n  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;\r\n  font-family:var(--f-mono);font-size:12px;color:rgba(255,247,228,.6);\r\n}\r\n.foot__base a{color:rgba(255,247,228,.82)}\r\n\r\n\/* \u2550\u2550\u2550 REVEAL \u2014 cards grow out of a closed bud \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n[data-reveal]{\r\n  opacity:0;transform:translateY(26px) rotate(-4deg) scale(.93);\r\n  transition:opacity .6s cubic-bezier(.2,.9,.3,1),transform .6s cubic-bezier(.2,.9,.3,1);\r\n}\r\n[data-reveal].in{opacity:1;transform:none}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  html{scroll-behavior:auto}\r\n  *,*::before,*::after{\r\n    animation-duration:.001ms!important;animation-iteration-count:1!important;\r\n    transition-duration:.001ms!important;\r\n  }\r\n  [data-reveal]{opacity:1;transform:none}\r\n}\r\n\r\n<\/style>\r\n<style>\r\n\/* \u2500\u2500 Be Free \u2014 Inhalt einer Theme-Seite \u2500\u2500\u2500\u2500\u2500\u2500\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   Header und Footer liegen als eigene Dateien daneben: header.html und\r\n   footer.html.\r\n\r\n   --nav-h ist der Platz, den die Seite oben freih\u00e4lt:\r\n     74px  = ihr benutzt unseren header.html (Standard)\r\n     0px   = euer Theme-Header scrollt normal mit\r\n     eigene H\u00f6he = euer Theme-Header bleibt beim Scrollen stehen        *\/\r\n:root{ --nav-h: 74px; }\r\n\r\n\/* Volle Breite, egal wie schmal der Container des Themes ist.\r\n   Bewusst kein width:100vw \u2014 das rechnet die Scrollbar mit und erzeugt\r\n   genau das Querscrollen, das es verhindern soll. *\/\r\n.befree-full{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw) }\r\n<\/style>\r\n<div class=\"befree-full\">\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\r\n   BILDER \/ PHOTOS \u2014 hier den Ordner eintragen, in dem eure Fotos liegen.\r\n   Beispiel WordPress-Mediathek:\r\n     window.BEFREE_IMG = \"https:\/\/eure-domain.at\/wp-content\/uploads\/befree\/\";\r\n   Leer lassen = die voreingestellten Adressen verwenden.\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 *\/\r\nwindow.BEFREE_IMG = \"\";\r\n\r\n(function () {\r\n  var DEFAULT = \"https:\/\/cdn.jsdelivr.net\/gh\/Piaxoxo\/Do-Step-Inn-Home@c30ae24d013d15758b8f47bd94ddf974f9501d51\/befree\/assets\/img\/\";\r\n  var custom  = (window.BEFREE_IMG || \"\").trim();\r\n  if (custom && custom.slice(-1) !== \"\/\") custom += \"\/\";\r\n  window.BEFREE_IMG_BASE = custom || DEFAULT;\r\n  if (!custom) return;\r\n\r\n  function repoint() {\r\n    var imgs = document.querySelectorAll('img[src^=\"' + DEFAULT + '\"]');\r\n    for (var i = 0; i < imgs.length; i++) {\r\n      imgs[i].src = custom + imgs[i].getAttribute(\"src\").slice(DEFAULT.length);\r\n    }\r\n  }\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", repoint);\r\n  } else { repoint(); }\r\n})();\r\n<\/script>\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 NAV \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n\r\n<main id=\"main\">\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 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"hero\" id=\"top\">\r\n  <canvas id=\"petals\" aria-hidden=\"true\"><\/canvas>\r\n  <div class=\"hero__scrim\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"hero__in wrap\">\r\n    <h1><span data-i18n=\"hero.l1\">Be Free.<\/span><span class=\"c1\" data-i18n=\"hero.l2\">Be You.<\/span><span class=\"c2\" data-i18n=\"hero.l3\">Be Here.<\/span><\/h1>\r\n    <p class=\"hero__sub\" data-i18n=\"hero.sub\">Be Free Hostel Vienna is a colorful and affordable place to stay near Westbahnhof, offering modern travelers a relaxed and flexible experience in the heart of the city. With easy self check-in, a central location and a vibrant atmosphere, it is the perfect base to explore Vienna your own way while connecting with people from around the world.<\/p>\r\n    <div class=\"hero__cta\">\r\n      <a class=\"pill\" href=\"#book\"><span data-i18n=\"cta.book\">Book now<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n      <a class=\"pill pill--ghost\" href=\"#rooms\" data-i18n=\"cta.rooms\">See the rooms<\/a>\r\n    <\/div>\r\n    <div class=\"stix\">\r\n      <i style=\"--sc:var(--pink-soft)\" data-i18n=\"tag.selfcheckin\">Self check-in<\/i>\r\n      <i style=\"--sc:var(--turq)\" data-i18n=\"tag.noreception\">No reception<\/i>\r\n      <i style=\"--sc:var(--gold)\" data-i18n=\"tag.from15\">From 15:00<\/i>\r\n      <i style=\"--sc:var(--leaf)\" data-i18n=\"tag.wifi\">Free WiFi<\/i>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<div class=\"ticker\" aria-hidden=\"true\"><div class=\"ticker__row\" id=\"ticker\"><\/div><\/div>\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 BOOK BAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<!-- Unhidden by befree.js once the IBE key checks out, so a keyless or\r\n     unreachable engine never leaves an empty band under the hero. -->\r\n<section class=\"bookbar\" id=\"bookbar\" data-ibe-host aria-labelledby=\"bookbar-h\">\r\n  <div class=\"wrap bookbar__in\">\r\n    <div class=\"bookbar__t\">\r\n      <span class=\"eyebrow\" data-i18n=\"bar.k\">Free tonight?<\/span>\r\n      <h2 class=\"t-dsp\" id=\"bookbar-h\" data-i18n=\"bar.h\">Find your bed.<\/h2>\r\n      <p class=\"small\" data-i18n=\"bar.p\">Pick your dates and see what is free \u2014 payment online, key on your phone.<\/p>\r\n    <\/div>\r\n    <div class=\"bookbar__w\">\r\n      <div class=\"ibe\" hidden><ibe-up ibe-key=\"75e0a485-2545-432c-8c13-e48b8a8a3fc8\" language=\"en\"><\/ibe-up><\/div>\r\n      <form class=\"ibeform\" data-ibe-form>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.in\">Check-in<\/span>\r\n          <input type=\"date\" name=\"in\" required \/><\/label>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.out\">Check-out<\/span>\r\n          <input type=\"date\" name=\"out\" required \/><\/label>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.pax\">Guests<\/span>\r\n          <select name=\"pax\">\r\n            <option>1<\/option><option selected>2<\/option><option>3<\/option><option>4<\/option>\r\n            <option>5<\/option><option>6<\/option><option>7<\/option><option>8+<\/option>\r\n          <\/select><\/label>\r\n        <button class=\"pill\" type=\"submit\"><span data-i18n=\"bk.go\">Check availability<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/button>\r\n      <\/form>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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 LOCATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"band\" id=\"location\" style=\"--bg:var(--turq)\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec__head\">\r\n      <span class=\"eyebrow\" data-i18n=\"loc.eyebrow\">Top destination<\/span>\r\n      <h2 class=\"t-dsp\" data-i18n-html=\"loc.h\">Vienna is<br \/>right here<\/h2>\r\n    <\/div>\r\n    <div class=\"grid g2\" style=\"align-items:start\">\r\n      <div style=\"display:flex;flex-direction:column;gap:14px\">\r\n        <p class=\"lede\" data-i18n=\"loc.p1\">Located at Beingasse 13, Vienna, Be Free Hostel gives you a vibrant base in one of the city's most connected areas. From here, you can move easily between culture, shopping, restaurants, nightlife, and everyday local life while staying flexible and independent.<\/p>\r\n        <p class=\"lede\" data-i18n=\"loc.p2\">Perfect for city breaks, backpacking trips, and longer stays, this location lets you experience Vienna with energy, convenience, and freedom. It is a smart starting point for travelers who want to stay close to the action and explore the city their own way.<\/p>\r\n      <\/div>\r\n      <div class=\"marks\">\r\n        <div class=\"mark\" data-reveal><b data-i18n=\"loc.m1t\">Beingasse 13<\/b><span data-i18n=\"loc.m1d\">Corner of Goldschlagstra\u00dfe, 1150 Vienna \u2014 the 15th district, Rudolfsheim-F\u00fcnfhaus.<\/span><\/div>\r\n        <div class=\"mark\" data-reveal><b data-i18n=\"loc.m2t\">Central Vienna<\/b><span data-i18n=\"loc.m2d\">Westbahnhof and Mariahilfer Stra\u00dfe, the city's long shopping street, are within walking distance.<\/span><\/div>\r\n        <div class=\"mark\" data-reveal><b data-i18n=\"loc.m3t\">Easy connections<\/b><span data-i18n=\"loc.m3d\">300 m to U3 Schweglerstra\u00dfe, 200 m to the Beingasse bus stop, tram straight to Hauptbahnhof.<\/span><\/div>\r\n        <div class=\"mark\" data-reveal><b data-i18n=\"loc.m4t\">Wiener Stadthalle<\/b><span data-i18n=\"loc.m4d\">Vienna's biggest concert and event hall is a six-minute walk from the front door.<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"stix\" style=\"margin-top:26px\">\r\n      <i style=\"--sc:#FFFFFF\" data-i18n=\"loc.s1\">300 m to U3<\/i>\r\n      <i style=\"--sc:var(--gold)\" data-i18n=\"loc.s2\">200 m to the bus<\/i>\r\n      <i style=\"--sc:var(--pink)\" data-i18n=\"loc.s3\">6 min to Stadthalle<\/i>\r\n      <i style=\"--sc:var(--leaf)\" data-i18n=\"loc.s4\">Westbahnhof on foot<\/i>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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 CHECK-IN \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"band\" id=\"checkin\" style=\"--bg:var(--pink-mid)\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec__head\">\r\n      <span class=\"eyebrow\" data-i18n=\"chk.eyebrow\">How you get in<\/span>\r\n      <h2 class=\"t-dsp\" data-i18n-html=\"chk.h\">A self-service house.<br \/>There is no reception.<\/h2>\r\n      <p class=\"lede\" data-i18n=\"chk.lede\">Everything happens before you arrive, so nothing has to happen when you do. Land at midnight, walk straight in \u2014 nobody is waiting at a desk, and nobody needs to be.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"steps\">\r\n      <div class=\"step\" data-reveal><span class=\"step__n\" style=\"--sc:var(--pink)\">1<\/span>\r\n        <h3 data-i18n=\"chk.s1t\">Book online<\/h3>\r\n        <p data-i18n=\"chk.s1d\">Payment and registration are handled digitally. Nothing to print, nothing to sign at a desk.<\/p><\/div>\r\n      <div class=\"step\" data-reveal><span class=\"step__n\" style=\"--sc:var(--turq)\">2<\/span>\r\n        <h3 data-i18n=\"chk.s2t\">Your check-in link arrives<\/h3>\r\n        <p data-i18n=\"chk.s2d\">By email if you booked with us directly. Booked through Booking.com or another platform? Then it arrives in that platform's message chat \u2014 check there, not your inbox.<\/p><\/div>\r\n      <div class=\"step\" data-reveal><span class=\"step__n\" style=\"--sc:var(--orange)\">3<\/span>\r\n        <h3 data-i18n=\"chk.s3t\">Your QR code opens the door<\/h3>\r\n        <p data-i18n=\"chk.s3d\">Complete the check-in and the code lands on your phone. It opens the front door and your room, from 15:00 onwards, at any hour. No reception, no waiting, no curfew.<\/p><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"grid g2\" style=\"margin-top:20px;align-items:start\">\r\n      <div class=\"card\" style=\"--card:#FFFFFF\">\r\n        <span class=\"card__tag\" data-i18n=\"chk.helpt\">Trouble with the QR code or check-in?<\/span>\r\n        <h3 data-i18n=\"chk.helph\">Call us. Someone always picks up.<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"chk.helpd\">A door that will not open is the worst part of any trip, so we say this plainly: if your code fails or the check-in will not go through, ring this number and we will sort it out.<\/p>\r\n        <p><a class=\"pill\" href=\"tel:+4369919232769\" style=\"--pc:var(--gold)\"><span>+43 699 19232769<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/a><\/p>\r\n      <\/div>\r\n\r\n      <div class=\"card\" style=\"--card:#FFFFFF\">\r\n        <span class=\"card__tag\" data-i18n=\"chk.facet\">Want to see a real face?<\/span>\r\n        <h3 data-i18n=\"chk.faceh\">Our reception is three minutes away.<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"chk.faced\">We cannot always come over to Beingasse \u2014 but the reception at our sister house is a three-minute walk. Drop by whenever you would rather talk to a person than a screen.<\/p>\r\n        <p class=\"small\"><b>Do Step Inn Home<\/b><br \/>Felberstra\u00dfe 20, 1150 Wien<\/p>\r\n        <p><a class=\"pill\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&amp;destination=Felberstra%C3%9Fe%2020%2C%201150%20Wien\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"--pc:var(--turq)\"><span data-i18n=\"chk.faceb\">Get directions<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/a><\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"bleedmark\" style=\"--bm:rgba(255,255,255,.36)\" aria-hidden=\"true\">NO RECEPTION<\/div>\r\n<\/section>\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 ROOMS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"sec\" id=\"rooms\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec__head\">\r\n      <span class=\"eyebrow\" style=\"--dot:var(--pink)\" data-i18n=\"room.eyebrow\">Rooms<\/span>\r\n      <h2 class=\"t-dsp\" data-i18n=\"room.h\">Sleep your way<\/h2>\r\n      <p class=\"lede\" data-i18n=\"room.lede\">Three ways to sleep: behind your own door, behind your own lock, or in the open with everyone else. Everything is freshly renovated, bathrooms are shared throughout the house, and linen is included.<\/p>\r\n    <\/div>\r\n    <div class=\"grid g3\">\r\n      <article class=\"pcard\" style=\"--bg:var(--gold)\" data-reveal>\r\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/cdn.jsdelivr.net\/gh\/Piaxoxo\/Do-Step-Inn-Home@c30ae24d013d15758b8f47bd94ddf974f9501d51\/befree\/assets\/img\/room-private.jpg\" alt=\"\" loading=\"lazy\" width=\"1000\" height=\"750\" \/>\r\n        <div class=\"pcard__b\">\r\n          <h3 data-i18n=\"room.c1t\">Private room<\/h3>\r\n          <p data-i18n=\"room.c1d\">Double, twin, triple or quad. A wide bed on a solid wood platform, a window onto the street, a graffiti mural on the wall \u2014 and a door that closes behind you.<\/p>\r\n          <span class=\"pcard__m\" data-i18n=\"room.c1m\">2 to 4 people \u00b7 Own door<\/span>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"pcard\" style=\"--bg:var(--pink-soft)\" data-reveal>\r\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/cdn.jsdelivr.net\/gh\/Piaxoxo\/Do-Step-Inn-Home@c30ae24d013d15758b8f47bd94ddf974f9501d51\/befree\/assets\/img\/room-capsule.jpg\" alt=\"\" loading=\"lazy\" width=\"1000\" height=\"750\" \/>\r\n        <div class=\"pcard__b\">\r\n          <h3 data-i18n=\"room.c2t\">Capsule bed<\/h3>\r\n          <p data-i18n=\"room.c2d\">A bed in a shared room that locks. Your own light, your own socket, a door you pull shut. The quiet, private way to sleep at a dorm price.<\/p>\r\n          <span class=\"pcard__m\" data-i18n=\"room.c2m\">Lockable \u00b7 Own light \u00b7 Own socket<\/span>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"pcard\" style=\"--bg:var(--turq)\" data-reveal>\r\n        <!-- No open-bunk dorm in the shoot, and illustrating it with another\r\n             room type is how this card was wrong before. It reads as a colour\r\n             card among two photo cards rather than a frame with nothing in\r\n             it. Add an <img> here the day a real dorm photo exists. -->\r\n        <div class=\"pcard__b\">\r\n          <h3 data-i18n=\"room.c3t\">Classic dorm<\/h3>\r\n          <p data-i18n=\"room.c3d\">Open bunk beds in a shared room, lockers for your things, and the lowest price in the house. The easiest way to meet the people you end up exploring the city with.<\/p>\r\n          <span class=\"pcard__m\" data-i18n=\"room.c3m\">Bunk beds \u00b7 Lockers \u00b7 Best price<\/span>\r\n        <\/div>\r\n      <\/article>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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 BOOK 2 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"sec\" id=\"book-rooms\" style=\"padding-top:0\">\r\n  <div class=\"wrap\">\r\n    <div class=\"bookrooms\" data-ibe-host>\r\n      <p class=\"bookrooms__t\" data-i18n=\"bar.rooms\">Seen a room you like? Pick your dates.<\/p>\r\n      <div class=\"ibe\" hidden><ibe-up ibe-key=\"75e0a485-2545-432c-8c13-e48b8a8a3fc8\" language=\"en\"><\/ibe-up><\/div>\r\n      <form class=\"ibeform\" data-ibe-form>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.in\">Check-in<\/span>\r\n          <input type=\"date\" name=\"in\" required \/><\/label>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.out\">Check-out<\/span>\r\n          <input type=\"date\" name=\"out\" required \/><\/label>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.pax\">Guests<\/span>\r\n          <select name=\"pax\">\r\n            <option>1<\/option><option selected>2<\/option><option>3<\/option><option>4<\/option>\r\n            <option>5<\/option><option>6<\/option><option>7<\/option><option>8+<\/option>\r\n          <\/select><\/label>\r\n        <button class=\"pill\" type=\"submit\"><span data-i18n=\"bk.go\">Check availability<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/button>\r\n      <\/form>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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 WHY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"sec\" id=\"why\" style=\"background:var(--paper-2);border-block:2px solid var(--ink)\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec__head\">\r\n      <span class=\"eyebrow\" style=\"--dot:var(--orange)\" data-i18n=\"why.eyebrow\">Why Be Free<\/span>\r\n      <h2 class=\"t-dsp\" data-i18n=\"why.h\">Easy, social, colorful.<\/h2>\r\n      <p class=\"lede\" data-i18n=\"why.lede\">Be Free is designed for travelers who want freedom, a strong location and a stay that feels modern, open and effortless from the moment they arrive.<\/p>\r\n    <\/div>\r\n    <div class=\"grid g3\">\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"why.c1k\">Freedom<\/span>\r\n        <h3 data-i18n=\"why.c1t\">Nobody asks when you arrive<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"why.c1d\">No reception hours, no curfew, no keys to hand back. The house runs on your schedule instead of ours.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"why.c2k\">Together<\/span>\r\n        <h3 data-i18n=\"why.c2t\">A kitchen that is open all night<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"why.c2d\">The ground floor belongs to everyone, around the clock \u2014 a guest kitchen and a common room where trips get planned and people meet.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"why.c3k\">Clean<\/span>\r\n        <h3 data-i18n=\"why.c3t\">Freshly renovated, honestly kept<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"why.c3d\">The thing guests mention most in their reviews is how clean it is. We would rather keep earning that than promise anything fancier.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"why.c4k\">Colour<\/span>\r\n        <h3 data-i18n=\"why.c4t\">Not a beige box<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"why.c4d\">Yellow walls, graffiti murals painted straight onto the plaster, brick and warm wood. Nothing in here is beige, and no two rooms look the same.<\/p><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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 GALLERY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"px\" id=\"gallery\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec__head\">\r\n      <span class=\"eyebrow\" style=\"--dot:var(--gold)\" data-i18n=\"gal.eyebrow\">Inside Be Free<\/span>\r\n      <h2 class=\"t-dsp\" data-i18n=\"gal.h\">Inside the color of Be Free<\/h2>\r\n      <p class=\"lede\" data-i18n=\"gal.lede\">A look at the atmosphere, rooms and feeling of staying at Be Free Hostel Vienna \u2014 vibrant, social and made for modern travelers. Scroll: the pictures drift at their own speed. Click one and it fills the screen.<\/p>\r\n    <\/div>\r\n    <div class=\"px__grid\" id=\"galgrid\"><\/div>\r\n  <\/div>\r\n<\/section>\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 HOUSE RULES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"band\" id=\"rules\" style=\"--bg:var(--violet)\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec__head\">\r\n      <span class=\"eyebrow\" data-i18n=\"rul.eyebrow\">Good to know<\/span>\r\n      <h2 class=\"t-dsp\" data-i18n=\"rul.h\">The honest bits<\/h2>\r\n      <p class=\"lede\" data-i18n=\"rul.lede\">Better to read it here than to discover it at two in the morning. This is a real hostel in a real old building \u2014 here is what that means.<\/p>\r\n    <\/div>\r\n    <div class=\"grid g3\">\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"rul.c1k\">Quiet hours<\/span>\r\n        <h3 data-i18n=\"rul.c1t\">It is an old building<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"rul.c1d\">Sound carries in the stairwell and the kitchen echoes. Quiet hours are respected, and if you are a light sleeper, take a capsule bed \u2014 it is the calmest option in the house.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"rul.c2k\">Bathrooms<\/span>\r\n        <h3 data-i18n=\"rul.c2t\">Showers and toilets are shared<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"rul.c2d\">On every floor, cleaned daily. No private bathrooms anywhere in the house \u2014 that is part of how the price stays where it is.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"rul.c3k\">Kitchen<\/span>\r\n        <h3 data-i18n=\"rul.c3t\">Cook whenever you want<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"rul.c3d\">The guest kitchen on the ground floor is open around the clock. Wash up after yourself and label what you leave in the fridge.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"rul.c4k\">Times<\/span>\r\n        <h3 data-i18n=\"rul.c4t\">Check-in from 15:00<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"rul.c4d\">Arrive any time after that, day or night. Ask us about leaving your bag if you land early or leave late.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"rul.c5k\">Self-service<\/span>\r\n        <h3 data-i18n=\"rul.c5t\">There is no front desk<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"rul.c5d\">Nobody sits in a lobby waiting for you. That is the point of the place \u2014 but the phone is always answered, so you are never on your own.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"rul.c6k\">Groups<\/span>\r\n        <h3 data-i18n=\"rul.c6t\">School trips and teams welcome<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"rul.c6d\">Write to us with your dates and headcount and we will put a quote together for the whole group.<\/p><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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 GROUPS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"band\" id=\"groups\" style=\"--bg:var(--leaf)\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec__head\">\r\n      <span class=\"eyebrow\" data-i18n=\"grp.eyebrow\">Groups<\/span>\r\n      <h2 class=\"t-dsp\" data-i18n-html=\"grp.h\">Group bookings \u2014<br \/>one quote, one invoice.<\/h2>\r\n      <p class=\"lede\" data-i18n=\"grp.lede\">School trips, teams, choirs, clubs. Tell us your dates and how many you are, and we put together one quote for the whole group. Breakfast is not part of the room rate \u2014 we can book it for you around the corner.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"grid g3\">\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"grp.c1k\">Breakfast<\/span>\r\n        <h3 data-i18n=\"grp.c1t\">Bookable at Felberstra\u00dfe 20<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"grp.c1d\">Breakfast is not included in the price. Groups can add it at our sister house, Do Step Inn Home \u2014 a three-minute walk from the front door. Ask for it with your enquiry and it goes on the same quote.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"grp.c2k\">One contact<\/span>\r\n        <h3 data-i18n=\"grp.c2t\">One quote, one invoice<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"grp.c2d\">Beds and any extras you book \u2014 breakfast included if you want it \u2014 arrive on a single offer, so nobody has to chase separate bookings.<\/p><\/div>\r\n      <div class=\"card\" data-reveal><span class=\"card__tag\" data-i18n=\"grp.c3k\">Tell us<\/span>\r\n        <h3 data-i18n=\"grp.c3t\">What we need to know<\/h3>\r\n        <p class=\"small dim\" data-i18n=\"grp.c3d\">Dates, how many people, how you would like the rooms split, and whether you want breakfast added. That is enough to price it.<\/p><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"stix\" style=\"margin-top:24px\">\r\n      <i style=\"--sc:#FFFFFF\" data-i18n=\"grp.s1\">Breakfast bookable, not included<\/i>\r\n      <i style=\"--sc:var(--gold)\" data-i18n=\"grp.s2\">3 minutes on foot<\/i>\r\n      <i style=\"--sc:var(--pink)\" data-i18n=\"grp.s3\">One quote for everyone<\/i>\r\n    <\/div>\r\n\r\n    <div style=\"display:flex;flex-wrap:wrap;gap:12px;margin-top:22px\">\r\n      <a class=\"pill\" href=\"mailto:befree-hostel@dostepinn.at?subject=Gruppenanfrage%20Be%20Free%20Hostel\" style=\"--pc:#FFFFFF\"><span data-i18n=\"grp.cta\">Send a group request<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n      <a class=\"pill pill--ghost\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&amp;destination=Felberstra%C3%9Fe%2020%2C%201150%20Wien\" target=\"_blank\" rel=\"noopener noreferrer\" data-i18n=\"grp.route\">Route to Felberstra\u00dfe 20<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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 BOOK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"band\" id=\"book\" style=\"--bg:var(--pink)\">\r\n  <div class=\"wrap\" style=\"display:flex;flex-direction:column;gap:18px;align-items:flex-start\">\r\n    <span class=\"eyebrow\" data-i18n=\"bk.eyebrow\">Book your stay<\/span>\r\n    <h2 class=\"t-dsp\" data-i18n-html=\"bk.h\">Be Free. Be You.<br \/>Be Here.<\/h2>\r\n    <p class=\"lede\" data-i18n=\"bk.lede\">Pick your dates, pay online, and your key arrives on your phone. That is the whole process.<\/p>\r\n    <!-- UP Hotel IBE \u2014 Be Free's own property key. Never swap in another\r\n         house's key; guests would book the wrong hotel. If the engine cannot\r\n         load, the form below takes over on its own. -->\r\n    <div class=\"bookband\" data-ibe-host>\r\n      <div class=\"ibe\" hidden><ibe-up ibe-key=\"75e0a485-2545-432c-8c13-e48b8a8a3fc8\" language=\"en\"><\/ibe-up><\/div>\r\n      <form class=\"ibeform\" data-ibe-form>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.in\">Check-in<\/span>\r\n          <input type=\"date\" name=\"in\" required \/><\/label>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.out\">Check-out<\/span>\r\n          <input type=\"date\" name=\"out\" required \/><\/label>\r\n        <label class=\"ibeform__f\"><span data-i18n=\"bk.pax\">Guests<\/span>\r\n          <select name=\"pax\">\r\n            <option>1<\/option><option selected>2<\/option><option>3<\/option><option>4<\/option>\r\n            <option>5<\/option><option>6<\/option><option>7<\/option><option>8+<\/option>\r\n          <\/select><\/label>\r\n        <button class=\"pill\" type=\"submit\"><span data-i18n=\"bk.go\">Check availability<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/button>\r\n      <\/form>\r\n    <\/div>\r\n\r\n    <div style=\"display:flex;flex-wrap:wrap;gap:12px;align-items:center\">\r\n      <a class=\"pill pill--ghost\" href=\"#contact\" data-i18n=\"cta.ask\">Ask a question<\/a>\r\n      <a class=\"pill pill--ghost\" href=\"tel:+4369919232769\">+43 699 19232769<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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 CONTACT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"sec\" id=\"contact\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec__head\">\r\n      <span class=\"eyebrow\" style=\"--dot:var(--turq)\" data-i18n=\"ct.eyebrow\">Contact us<\/span>\r\n      <h2 class=\"t-dsp\" data-i18n=\"ct.h\">Reach out to Be Free.<\/h2>\r\n      <p class=\"lede\" data-i18n=\"ct.lede\">Questions, bookings or anything else? Get in touch directly and we will help you quickly and easily.<\/p>\r\n    <\/div>\r\n    <div class=\"contact\">\r\n      <div class=\"ccard\" data-reveal>\r\n        <span class=\"ccard__n\">01<\/span>\r\n        <h3 data-i18n=\"ct.c1t\">Email us<\/h3>\r\n        <a class=\"big\" href=\"mailto:befree-hostel@dostepinn.at\">befree-hostel@dostepinn.at<\/a>\r\n        <p><a class=\"pill\" href=\"mailto:befree-hostel@dostepinn.at\" style=\"--pc:var(--turq)\"><span data-i18n=\"ct.c1b\">Open email<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/a><\/p>\r\n      <\/div>\r\n      <div class=\"ccard\" data-reveal>\r\n        <span class=\"ccard__n\">02<\/span>\r\n        <h3 data-i18n=\"ct.c2t\">Call us<\/h3>\r\n        <a class=\"big\" href=\"tel:+4369919232769\">+43 699 19232769<\/a>\r\n        <p><a class=\"pill\" href=\"tel:+4369919232769\" style=\"--pc:var(--gold)\"><span data-i18n=\"ct.c2b\">Call now<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span><\/a><\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<\/main>\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 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n\r\n<a class=\"bookfab\" id=\"bookfab\" href=\"#book\">\r\n  <span data-i18n=\"cta.book\">Book now<\/span><span class=\"pill__a\" aria-hidden=\"true\">\u2192<\/span>\r\n<\/a>\r\n\r\n<div class=\"lb\" id=\"lb\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Photo\">\r\n  <figure class=\"lb__fig\"><img id=\"lb-img\" alt=\"\" \/><\/figure>\r\n  <div class=\"lb__bar\">\r\n    <button class=\"lb__btn\" id=\"lb-prev\" data-i18n=\"lb.prev\">\u2190 Back<\/button>\r\n    <span class=\"lb__cap\" id=\"lb-cap\"><\/span>\r\n    <button class=\"lb__btn\" id=\"lb-next\" data-i18n=\"lb.next\">Next \u2192<\/button>\r\n    <button class=\"lb__btn lb__btn--x\" id=\"lb-x\" data-i18n=\"lb.close\">Close<\/button>\r\n  <\/div>\r\n<\/div>\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\r\n   Be Free Hostel \u2014 language switch, hero flowers, gallery, lightbox.\r\n   No dependencies. The 3D flower lives in flower.js and is optional.\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 *\/\r\n(function () {\r\n  \"use strict\";\r\n\r\n  var RM = window.matchMedia &&\r\n           window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n  \/* \u2550\u2550\u2550 1. LANGUAGE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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     English is the source of truth: every English string lives in the\r\n     HTML, so the page reads correctly even if this script never runs.\r\n     Only the German strings are carried here.                        *\/\r\n\r\n  var DE = {\r\n    \"skip\": \"Zum Inhalt springen\",\r\n\r\n    \"nav.rooms\": \"Zimmer\", \"nav.location\": \"Lage\", \"nav.checkin\": \"Check-in\",\r\n    \"nav.gallery\": \"Galerie\", \"nav.groups\": \"Gruppen\",\r\n    \"nav.rules\": \"Gut zu wissen\", \"nav.contact\": \"Kontakt\",\r\n    \"nav.menu\": \"Men\u00fc\",\r\n\r\n    \"cta.book\": \"Jetzt buchen\", \"cta.rooms\": \"Zimmer ansehen\", \"cta.ask\": \"Frage stellen\",\r\n\r\n    \"hero.l1\": \"Be Free.\", \"hero.l2\": \"Be You.\", \"hero.l3\": \"Be Here.\",\r\n    \"hero.sub\": \"Das Be Free Hostel Wien ist eine bunte, leistbare Bleibe nahe dem Westbahnhof \u2014 entspannt, flexibel und mitten in der Stadt. Mit unkompliziertem Self-Check-in, zentraler Lage und lebendiger Atmosph\u00e4re ist es die perfekte Basis, um Wien auf deine Art zu entdecken und dabei Leute aus aller Welt zu treffen.\",\r\n\r\n    \"tag.selfcheckin\": \"Self-Check-in\", \"tag.noreception\": \"Keine Rezeption\",\r\n    \"tag.from15\": \"Ab 15:00\", \"tag.wifi\": \"WLAN gratis\",\r\n\r\n    \"loc.eyebrow\": \"Top-Lage\",\r\n    \"loc.h\": \"Wien beginnt<br \/>vor der T\u00fcr\",\r\n    \"loc.p1\": \"In der Beingasse 13 liegt das Be Free Hostel in einem der bestangebundenen Gr\u00e4tzl der Stadt. Von hier kommst du m\u00fchelos zu Kultur, Einkaufsstra\u00dfen, Lokalen, Nachtleben und dem ganz normalen Wiener Alltag \u2014 flexibel und unabh\u00e4ngig.\",\r\n    \"loc.p2\": \"Ob St\u00e4dtetrip, Rucksackreise oder l\u00e4ngerer Aufenthalt: Von hier aus erlebst du Wien mit Energie, kurzen Wegen und Freiheit. Ein kluger Ausgangspunkt f\u00fcr alle, die nah am Geschehen bleiben und die Stadt auf eigene Faust erkunden wollen.\",\r\n    \"loc.m1t\": \"Beingasse 13\",\r\n    \"loc.m1d\": \"Ecke Goldschlagstra\u00dfe, 1150 Wien \u2014 der 15. Bezirk, Rudolfsheim-F\u00fcnfhaus.\",\r\n    \"loc.m2t\": \"Zentral in Wien\",\r\n    \"loc.m2d\": \"Westbahnhof und die Mariahilfer Stra\u00dfe, die lange Einkaufsstra\u00dfe der Stadt, sind zu Fu\u00df erreichbar.\",\r\n    \"loc.m3t\": \"Gute Verbindungen\",\r\n    \"loc.m3d\": \"300 m zur U3 Schweglerstra\u00dfe, 200 m zur Bushaltestelle Beingasse, Stra\u00dfenbahn direkt zum Hauptbahnhof.\",\r\n    \"loc.m4t\": \"Wiener Stadthalle\",\r\n    \"loc.m4d\": \"Wiens gr\u00f6\u00dfte Konzert- und Veranstaltungshalle liegt sechs Gehminuten entfernt.\",\r\n    \"loc.s1\": \"300 m zur U3\", \"loc.s2\": \"200 m zum Bus\",\r\n    \"loc.s3\": \"6 Min zur Stadthalle\", \"loc.s4\": \"Westbahnhof zu Fu\u00df\",\r\n\r\n    \"bk.in\": \"Anreise\", \"bk.out\": \"Abreise\", \"bk.pax\": \"G\u00e4ste\",\r\n    \"bk.go\": \"Verf\u00fcgbarkeit pr\u00fcfen\",\r\n\r\n    \"bar.k\": \"Heute Nacht frei?\",\r\n    \"bar.h\": \"Finde dein Bett.\",\r\n    \"bar.p\": \"Termin w\u00e4hlen und sehen, was frei ist \u2014 Zahlung online, Schl\u00fcssel aufs Handy.\",\r\n    \"bar.rooms\": \"Ein Zimmer gefunden? Dann w\u00e4hl deinen Termin.\",\r\n\r\n    \"chk.eyebrow\": \"So kommst du rein\",\r\n    \"chk.h\": \"Ein Self-Service-Haus.<br \/>Es gibt keine Rezeption.\",\r\n    \"chk.lede\": \"Alles passiert vor deiner Ankunft, damit bei der Ankunft nichts mehr passieren muss. Um Mitternacht da sein und einfach reingehen \u2014 niemand wartet an einem Tresen, und niemand muss es.\",\r\n    \"chk.s1t\": \"Online buchen\",\r\n    \"chk.s1d\": \"Zahlung und Meldung laufen digital. Nichts zum Ausdrucken, nichts an einem Tresen zu unterschreiben.\",\r\n    \"chk.s2t\": \"Dein Check-in-Link kommt\",\r\n    \"chk.s2d\": \"Per E-Mail, wenn du direkt bei uns gebucht hast. \u00dcber Booking.com oder ein anderes Portal gebucht? Dann kommt er im Nachrichten-Chat des Portals \u2014 schau dort nach, nicht im Posteingang.\",\r\n    \"chk.s3t\": \"Dein QR-Code \u00f6ffnet die T\u00fcr\",\r\n    \"chk.s3d\": \"Check-in abschlie\u00dfen, und der Code landet auf deinem Handy. Er \u00f6ffnet Haust\u00fcr und Zimmer \u2014 ab 15:00, zu jeder Uhrzeit. Keine Rezeption, keine Wartezeit, keine Sperrstunde.\",\r\n    \"chk.helpt\": \"Probleme mit dem QR-Code oder dem Check-in?\",\r\n    \"chk.helph\": \"Ruf an. Es hebt immer jemand ab.\",\r\n    \"chk.helpd\": \"Eine T\u00fcr, die nicht aufgeht, ist das Schlimmste auf jeder Reise. Deshalb sagen wir es deutlich: Wenn dein Code streikt oder der Check-in nicht durchgeht, ruf diese Nummer an, und wir bringen das in Ordnung.\",\r\n    \"chk.facet\": \"Lieber ein echtes Gesicht?\",\r\n    \"chk.faceh\": \"Unsere Rezeption ist drei Minuten entfernt.\",\r\n    \"chk.faced\": \"Wir k\u00f6nnen leider nicht immer in die Beingasse r\u00fcberkommen \u2014 aber die Rezeption in unserem Schwesterhaus ist drei Gehminuten entfernt. Komm vorbei, wann immer dir ein Mensch lieber ist als ein Bildschirm.\",\r\n    \"chk.faceb\": \"Route anzeigen\",\r\n\r\n    \"room.eyebrow\": \"Zimmer\",\r\n    \"room.h\": \"Schlaf, wie es dir passt\",\r\n    \"room.lede\": \"Drei Arten zu schlafen: hinter der eigenen T\u00fcr, hinter dem eigenen Schloss oder ganz offen mit allen anderen. Alles frisch renoviert, die B\u00e4der werden im ganzen Haus geteilt, Bettw\u00e4sche ist inklusive.\",\r\n    \"room.c1t\": \"Privatzimmer\",\r\n    \"room.c1d\": \"Doppel, Twin, Dreibett oder Vierbett. Ein breites Bett auf massivem Holzpodest, ein Fenster zur Stra\u00dfe, ein Graffiti-Mural an der Wand \u2014 und eine T\u00fcr, die hinter dir zugeht.\",\r\n    \"room.c1m\": \"2 bis 4 Personen \u00b7 Eigene T\u00fcr\",\r\n    \"room.c2t\": \"Capsule-Bett\",\r\n    \"room.c2d\": \"Ein Bett im geteilten Zimmer, das sich absperren l\u00e4sst. Eigenes Licht, eigene Steckdose, eine T\u00fcr, die du zuziehst. Die ruhige, private Art, zum Dorm-Preis zu schlafen.\",\r\n    \"room.c2m\": \"Absperrbar \u00b7 Eigenes Licht \u00b7 Eigene Steckdose\",\r\n    \"room.c3t\": \"Klassisches Dorm\",\r\n    \"room.c3d\": \"Offene Stockbetten im geteilten Zimmer, Spinde f\u00fcr deine Sachen und der g\u00fcnstigste Preis im Haus. Der einfachste Weg, die Leute zu treffen, mit denen du am Ende durch die Stadt ziehst.\",\r\n    \"room.c3m\": \"Stockbetten \u00b7 Spinde \u00b7 Bester Preis\",\r\n\r\n    \"why.eyebrow\": \"Warum Be Free\",\r\n    \"why.h\": \"Unkompliziert, gesellig, bunt.\",\r\n    \"why.lede\": \"Be Free ist f\u00fcr Reisende gemacht, die Freiheit wollen, eine starke Lage und einen Aufenthalt, der sich vom ersten Moment an modern, offen und m\u00fchelos anf\u00fchlt.\",\r\n    \"why.c1k\": \"Freiheit\", \"why.c1t\": \"Niemand fragt, wann du kommst\",\r\n    \"why.c1d\": \"Keine Rezeptionszeiten, keine Sperrstunde, kein Schl\u00fcssel zum Abgeben. Das Haus richtet sich nach deinem Zeitplan, nicht nach unserem.\",\r\n    \"why.c2k\": \"Gemeinsam\", \"why.c2t\": \"Eine K\u00fcche, die nachts offen ist\",\r\n    \"why.c2d\": \"Das Erdgeschoss geh\u00f6rt allen, rund um die Uhr \u2014 G\u00e4stek\u00fcche und Aufenthaltsraum, wo Ausfl\u00fcge geplant werden und Leute sich treffen.\",\r\n    \"why.c3k\": \"Sauber\", \"why.c3t\": \"Frisch renoviert, ehrlich gef\u00fchrt\",\r\n    \"why.c3d\": \"Was G\u00e4ste in Bewertungen am h\u00e4ufigsten erw\u00e4hnen, ist die Sauberkeit. Das wollen wir uns lieber weiter verdienen, als etwas Feineres zu versprechen.\",\r\n    \"why.c4k\": \"Farbe\", \"why.c4t\": \"Keine beige Schachtel\",\r\n    \"why.c4d\": \"Gelbe W\u00e4nde, Graffiti-Murals direkt auf den Putz gemalt, Ziegel und warmes Holz. Hier drin ist nichts beige, und keine zwei Zimmer sehen gleich aus.\",\r\n\r\n    \"gal.eyebrow\": \"Drinnen bei Be Free\",\r\n    \"gal.h\": \"Die Farben von Be Free\",\r\n    \"gal.lede\": \"Ein Blick auf Atmosph\u00e4re, Zimmer und Lebensgef\u00fchl im Be Free Hostel Wien \u2014 bunt, gesellig und f\u00fcr moderne Reisende gemacht. Beim Scrollen wandern die Bilder in eigenem Tempo. Ein Klick, und das Bild f\u00fcllt den Schirm.\",\r\n\r\n    \"rul.eyebrow\": \"Gut zu wissen\",\r\n    \"rul.h\": \"Das Ehrliche\",\r\n    \"rul.lede\": \"Besser hier gelesen als um zwei Uhr nachts entdeckt. Das ist ein echtes Hostel in einem echten Altbau \u2014 und das hei\u00dft Folgendes.\",\r\n    \"rul.c1k\": \"Ruhezeiten\", \"rul.c1t\": \"Es ist ein Altbau\",\r\n    \"rul.c1d\": \"Im Stiegenhaus tr\u00e4gt der Schall, die K\u00fcche hallt. Ruhezeiten werden eingehalten \u2014 und wer leicht aufwacht, nimmt ein Capsule-Bett, die ruhigste Variante im Haus.\",\r\n    \"rul.c2k\": \"B\u00e4der\", \"rul.c2t\": \"Duschen und WCs werden geteilt\",\r\n    \"rul.c2d\": \"Auf jedem Stock, t\u00e4glich gereinigt. Es gibt im ganzen Haus keine eigenen B\u00e4der \u2014 auch deshalb bleibt der Preis, wo er ist.\",\r\n    \"rul.c3k\": \"K\u00fcche\", \"rul.c3t\": \"Koch, wann du willst\",\r\n    \"rul.c3d\": \"Die G\u00e4stek\u00fcche im Erdgeschoss ist rund um die Uhr offen. Bitte selbst abwaschen und beschriften, was im K\u00fchlschrank bleibt.\",\r\n    \"rul.c4k\": \"Zeiten\", \"rul.c4t\": \"Check-in ab 15:00\",\r\n    \"rul.c4d\": \"Danach kannst du jederzeit ankommen, Tag oder Nacht. Sprich uns wegen des Gep\u00e4cks an, wenn du fr\u00fcher da bist oder sp\u00e4ter abreist.\",\r\n    \"rul.c5k\": \"Self-Service\", \"rul.c5t\": \"Es gibt keine Rezeption\",\r\n    \"rul.c5d\": \"Niemand sitzt in einer Lobby und wartet auf dich. Genau das ist der Sinn des Hauses \u2014 aber ans Telefon geht immer jemand, du bist nie allein.\",\r\n    \"rul.c6k\": \"Gruppen\", \"rul.c6t\": \"Schulklassen und Teams willkommen\",\r\n    \"rul.c6d\": \"Schreib uns Termin und Personenzahl, dann stellen wir ein Angebot f\u00fcr die ganze Gruppe zusammen.\",\r\n\r\n    \"grp.eyebrow\": \"Gruppen\",\r\n    \"grp.h\": \"Gruppenreservierung \u2014<br \/>ein Angebot, eine Rechnung.\",\r\n    \"grp.lede\": \"Schulklassen, Teams, Ch\u00f6re, Vereine. Sag uns Termin und Personenzahl, und wir stellen ein Angebot f\u00fcr die ganze Gruppe zusammen. Fr\u00fchst\u00fcck ist nicht im Zimmerpreis enthalten \u2014 wir buchen es euch aber gern ums Eck dazu.\",\r\n    \"grp.c1k\": \"Fr\u00fchst\u00fcck\", \"grp.c1t\": \"Zubuchbar in der Felberstra\u00dfe 20\",\r\n    \"grp.c1d\": \"Fr\u00fchst\u00fcck ist nicht inkludiert. Gruppen k\u00f6nnen es in unserem Schwesterhaus Do Step Inn Home dazubuchen \u2014 drei Gehminuten von der Haust\u00fcr. Einfach bei der Anfrage dazuschreiben, dann steht es auf demselben Angebot.\",\r\n    \"grp.c2k\": \"Ein Ansprechpartner\", \"grp.c2t\": \"Ein Angebot, eine Rechnung\",\r\n    \"grp.c2d\": \"Betten und alles, was ihr dazubucht \u2014 auf Wunsch auch das Fr\u00fchst\u00fcck \u2014 kommen auf einem Angebot, damit niemand einzelnen Buchungen hinterherlaufen muss.\",\r\n    \"grp.c3k\": \"Sag uns\", \"grp.c3t\": \"Was wir wissen m\u00fcssen\",\r\n    \"grp.c3d\": \"Termin, Personenzahl, gew\u00fcnschte Zimmeraufteilung und ob Fr\u00fchst\u00fcck dazukommen soll. Mehr brauchen wir f\u00fcr den Preis nicht.\",\r\n    \"grp.s1\": \"Fr\u00fchst\u00fcck zubuchbar, nicht inkludiert\", \"grp.s2\": \"3 Gehminuten\", \"grp.s3\": \"Ein Angebot f\u00fcr alle\",\r\n    \"grp.cta\": \"Gruppenanfrage senden\", \"grp.route\": \"Route zur Felberstra\u00dfe 20\",\r\n\r\n    \"bk.eyebrow\": \"Aufenthalt buchen\",\r\n    \"bk.h\": \"Be Free. Be You.<br \/>Be Here.\",\r\n    \"bk.lede\": \"Termin w\u00e4hlen, online zahlen, und dein Schl\u00fcssel kommt aufs Handy. Mehr ist es nicht.\",\r\n\r\n    \"ct.eyebrow\": \"Kontakt\",\r\n    \"ct.h\": \"Schreib uns.\",\r\n    \"ct.lede\": \"Fragen, Buchungen oder sonst etwas? Melde dich direkt, wir helfen schnell und unkompliziert.\",\r\n    \"ct.c1t\": \"E-Mail schreiben\", \"ct.c1b\": \"E-Mail \u00f6ffnen\",\r\n    \"ct.c2t\": \"Anrufen\", \"ct.c2b\": \"Jetzt anrufen\",\r\n\r\n    \"ft.claim\": \"Bleib frei. Triff Leute. Sammle Erinnerungen.\",\r\n    \"ft.claimshort\": \"Be Free. Be You. Be Here.\",\r\n    \"ft.house\": \"Das Haus\", \"ft.reach\": \"Kontakt\",\r\n    \"ft.visit\": \"Auf der Seite\", \"ft.legal\": \"Rechtliches\", \"ft.country\": \"\u00d6sterreich\",\r\n\r\n    \"lb.prev\": \"\u2190 Zur\u00fcck\", \"lb.next\": \"Weiter \u2192\", \"lb.close\": \"Schlie\u00dfen\",\r\n    \"gal.enlarge\": \"gr\u00f6\u00dfer ansehen\"\r\n  };\r\n\r\n  var EN_FALLBACK = { \"gal.enlarge\": \"enlarge\" };\r\n  var EN = null;          \/* filled from the DOM on first run *\/\r\n  var lang = \"en\";\r\n\r\n  function harvestEnglish() {\r\n    EN = {};\r\n    document.querySelectorAll(\"[data-i18n]\").forEach(function (el) {\r\n      EN[el.getAttribute(\"data-i18n\")] = el.textContent;\r\n    });\r\n    document.querySelectorAll(\"[data-i18n-html]\").forEach(function (el) {\r\n      EN[el.getAttribute(\"data-i18n-html\")] = el.innerHTML;\r\n    });\r\n    Object.keys(EN_FALLBACK).forEach(function (k) { EN[k] = EN_FALLBACK[k]; });\r\n  }\r\n\r\n  function t(key) {\r\n    if (lang === \"de\" && DE[key] != null) return DE[key];\r\n    return EN && EN[key] != null ? EN[key] : \"\";\r\n  }\r\n\r\n  function setLang(next, remember) {\r\n    lang = next === \"de\" ? \"de\" : \"en\";\r\n    document.documentElement.lang = lang;\r\n\r\n    document.querySelectorAll(\"[data-i18n]\").forEach(function (el) {\r\n      var v = t(el.getAttribute(\"data-i18n\"));\r\n      if (v) el.textContent = v;\r\n    });\r\n    document.querySelectorAll(\"[data-i18n-html]\").forEach(function (el) {\r\n      var v = t(el.getAttribute(\"data-i18n-html\"));\r\n      if (v) el.innerHTML = v;\r\n    });\r\n\r\n    var en = document.getElementById(\"lang-en\"), de = document.getElementById(\"lang-de\");\r\n    if (en) en.setAttribute(\"aria-pressed\", String(lang === \"en\"));\r\n    if (de) de.setAttribute(\"aria-pressed\", String(lang === \"de\"));\r\n\r\n    relabelGallery();\r\n    syncWidgetLanguage();\r\n    if (lightbox.isOpen()) lightbox.refresh();\r\n\r\n    if (remember) { try { localStorage.setItem(\"befree-lang\", lang); } catch (e) {} }\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550 2. GALLERY DATA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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  var PHOTOS = [\r\n    { f: \"gallery-01-room\",     en: \"A room with a mural\",   de: \"Zimmer mit Mural\",        tEn: \"Sleep\",   tDe: \"Schlafen\" },\r\n    { f: \"gallery-02-capsule\",  en: \"Capsule beds\",          de: \"Kapsel-Betten\",           tEn: \"Capsule\", tDe: \"Kapsel\" },\r\n    { f: \"gallery-03-foosball\", en: \"Foosball in the lounge\",de: \"Wuzzeln im Aufenthalt\",   tEn: \"Play\",    tDe: \"Spielen\" },\r\n    { f: \"gallery-04-arrival\",  en: \"Finding your room\",     de: \"Das Zimmer finden\",       tEn: \"Check-in\",tDe: \"Check-in\" },\r\n    { f: \"gallery-05-hangout\",  en: \"An evening in\",         de: \"Abend im Zimmer\",         tEn: \"Hang out\",tDe: \"Chillen\" },\r\n    { f: \"gallery-06-bathroom\", en: \"Shared bathrooms\",      de: \"Gemeinschaftsb\u00e4der\",      tEn: \"Wash\",    tDe: \"Waschen\" },\r\n    { f: \"gallery-07-lounge\",   en: \"The common room\",       de: \"Der Aufenthaltsraum\",     tEn: \"Lounge\",  tDe: \"Lounge\" },\r\n    { f: \"gallery-08-morning\",  en: \"Morning at the mirrors\",de: \"Morgens am Spiegel\",      tEn: \"Morning\", tDe: \"Morgens\" },\r\n    { f: \"gallery-09-corridor\", en: \"The corridor\",          de: \"Der Gang\",                tEn: \"Inside\",  tDe: \"Drinnen\" },\r\n    { f: \"gallery-10-mood\",     en: \"A good day\",            de: \"Ein guter Tag\",           tEn: \"Mood\",    tDe: \"Stimmung\" },\r\n    { f: \"gallery-11-mirror\",   en: \"Getting ready\",         de: \"Fertigmachen\",            tEn: \"Morning\", tDe: \"Morgens\" },\r\n    { f: \"gallery-12-evening\",  en: \"Snacks and stories\",    de: \"Snacks und Geschichten\",  tEn: \"Evening\", tDe: \"Abends\" }\r\n  ];\r\n\r\n  function label(p) { return lang === \"de\" ? p.de : p.en; }\r\n  function tagOf(p) { return lang === \"de\" ? p.tDe : p.tEn; }\r\n  function srcOf(p) { return window.BEFREE_IMG_BASE + p.f + \".jpg\"; }\r\n\r\n  \/* Speed per card. The two columns pull apart as you scroll, which is\r\n     where the depth comes from \u2014 the photograph is never rotated, never\r\n     masked, never cropped by more than a few percent. *\/\r\n  var SPEED = [1, 1.75, 1.5, 1, 1.85, 1.25, 1.1, 1.7, 1.55, 1, 1.8, 1.35];\r\n\r\n  function buildGallery() {\r\n    var grid = document.getElementById(\"galgrid\");\r\n    if (!grid) return;\r\n    PHOTOS.forEach(function (p, i) {\r\n      var b = document.createElement(\"button\");\r\n      b.type = \"button\";\r\n      b.className = \"px__item\";\r\n      b.dataset.i = i;\r\n      b.dataset.sp = String(SPEED[i] || 1);\r\n\r\n      var fr = document.createElement(\"span\");\r\n      fr.className = \"px__frame\";\r\n\r\n      var im = document.createElement(\"img\");\r\n      im.src = srcOf(p); im.alt = label(p);\r\n      im.loading = i < 2 ? \"eager\" : \"lazy\";\r\n      im.decoding = \"async\";\r\n      im.width = 1400; im.height = 1000;\r\n\r\n      var tg = document.createElement(\"span\");\r\n      tg.className = \"px__tag\"; tg.textContent = tagOf(p);\r\n      fr.append(im, tg);\r\n\r\n      var cap = document.createElement(\"span\");\r\n      cap.className = \"px__cap\";\r\n      var n = document.createElement(\"i\");\r\n      n.textContent = (i < 9 ? \"0\" : \"\") + (i + 1);\r\n      var tx = document.createElement(\"b\");\r\n      tx.textContent = label(p);\r\n      cap.append(n, tx);\r\n\r\n      b.append(fr, cap);\r\n      b.addEventListener(\"click\", function () { lightbox.open(i); });\r\n      grid.appendChild(b);\r\n    });\r\n    relabelGallery();\r\n  }\r\n\r\n  function relabelGallery() {\r\n    var items = document.querySelectorAll(\".px__item\");\r\n    items.forEach(function (b) {\r\n      var p = PHOTOS[+b.dataset.i];\r\n      if (!p) return;\r\n      b.querySelector(\"img\").alt = label(p);\r\n      b.querySelector(\".px__tag\").textContent = tagOf(p);\r\n      b.querySelector(\".px__cap b\").textContent = label(p);\r\n      b.setAttribute(\"aria-label\", label(p) + \" \u2014 \" + t(\"gal.enlarge\"));\r\n    });\r\n  }\r\n\r\n  \/* Scroll parallax. Only cards the viewport can actually see are moved,\r\n     and everything runs inside one rAF, so the page stays cheap. Under\r\n     prefers-reduced-motion nothing moves at all \u2014 the gallery is then a\r\n     plain grid of big photographs, which loses no information. *\/\r\n  function parallaxGallery() {\r\n    var items = [].slice.call(document.querySelectorAll(\".px__item\"));\r\n    if (!items.length || RM) return;\r\n\r\n    var live = [], queued = false;\r\n\r\n    function place() {\r\n      var vh = window.innerHeight || 1;\r\n      var k = window.innerWidth < 860 ? 0.55 : 1;   \/* gentler on a phone *\/\r\n      for (var i = 0; i < live.length; i++) {\r\n        var el = live[i];\r\n        var r = el.getBoundingClientRect();\r\n        var p = ((r.top + r.height \/ 2) - vh \/ 2) \/ vh;    \/* -1 above \u2026 +1 below *\/\r\n        if (p > 1.5) p = 1.5; else if (p < -1.5) p = -1.5;\r\n        var sp = parseFloat(el.dataset.sp) || 1;\r\n        el.style.transform = \"translate3d(0,\" + (p * -30 * sp * k).toFixed(2) + \"px,0)\";\r\n        var im = el.querySelector(\"img\");\r\n        im.style.transform = \"translate3d(0,\" + (p * 3.4 * k).toFixed(2) + \"%,0)\";\r\n      }\r\n    }\r\n\r\n    function onScroll() {\r\n      if (queued) return;\r\n      queued = true;\r\n      requestAnimationFrame(function () { queued = false; place(); });\r\n    }\r\n\r\n    if (window.IntersectionObserver) {\r\n      var io = new IntersectionObserver(function (entries) {\r\n        entries.forEach(function (e) {\r\n          var at = live.indexOf(e.target);\r\n          if (e.isIntersecting && at < 0) live.push(e.target);\r\n          else if (!e.isIntersecting && at >= 0) live.splice(at, 1);\r\n        });\r\n        place();\r\n      }, { rootMargin: \"140px 0px\" });\r\n      items.forEach(function (el) { io.observe(el); });\r\n    } else {\r\n      live = items;\r\n    }\r\n\r\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n    window.addEventListener(\"resize\", onScroll);\r\n    place();\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550 3. LIGHTBOX \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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  var lightbox = (function () {\r\n    var box, img, cap, at = 0, opener = null;\r\n\r\n    function show(i) {\r\n      at = (i + PHOTOS.length) % PHOTOS.length;\r\n      var p = PHOTOS[at];\r\n      img.src = srcOf(p);\r\n      img.alt = label(p);\r\n      cap.textContent = label(p) + \"  \u00b7  \" + (at + 1) + \"\/\" + PHOTOS.length;\r\n    }\r\n    return {\r\n      init: function () {\r\n        box = document.getElementById(\"lb\");\r\n        if (!box) return;\r\n        img = document.getElementById(\"lb-img\");\r\n        cap = document.getElementById(\"lb-cap\");\r\n\r\n        document.getElementById(\"lb-x\").addEventListener(\"click\", this.close);\r\n        document.getElementById(\"lb-prev\").addEventListener(\"click\", function () { show(at - 1); });\r\n        document.getElementById(\"lb-next\").addEventListener(\"click\", function () { show(at + 1); });\r\n        box.addEventListener(\"click\", function (e) { if (e.target === box) lightbox.close(); });\r\n\r\n        window.addEventListener(\"keydown\", function (e) {\r\n          if (!box.hasAttribute(\"open\")) return;\r\n          if (e.key === \"Escape\") lightbox.close();\r\n          else if (e.key === \"ArrowLeft\") show(at - 1);\r\n          else if (e.key === \"ArrowRight\") show(at + 1);\r\n        });\r\n      },\r\n      open: function (i) {\r\n        opener = document.activeElement;\r\n        show(i);\r\n        box.setAttribute(\"open\", \"\");\r\n        document.body.style.overflow = \"hidden\";\r\n        document.getElementById(\"lb-x\").focus();\r\n      },\r\n      close: function () {\r\n        box.removeAttribute(\"open\");\r\n        document.body.style.overflow = \"\";\r\n        if (opener && opener.focus) opener.focus();\r\n      },\r\n      isOpen: function () { return box && box.hasAttribute(\"open\"); },\r\n      refresh: function () { show(at); }\r\n    };\r\n  })();\r\n\r\n  \/* \u2550\u2550\u2550 4. HERO FLOWER FIELD \u2014 2D, the same drawing as the logo \u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n  var PAL = [\"#FF3D9A\", \"#4FC3CE\", \"#E4B430\", \"#E8871F\", \"#B444E0\", \"#57D96B\", \"#E8404C\"];\r\n  var RGB = PAL.map(function (h) {\r\n    return [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];\r\n  });\r\n  function mix(x) {\r\n    var n = RGB.length, s = ((x % n) + n) % n, i = Math.floor(s), f = s - i;\r\n    var a = RGB[i], b = RGB[(i + 1) % n];\r\n    return \"rgb(\" + Math.round(a[0] + (b[0] - a[0]) * f) + \",\" +\r\n                    Math.round(a[1] + (b[1] - a[1]) * f) + \",\" +\r\n                    Math.round(a[2] + (b[2] - a[2]) * f) + \")\";\r\n  }\r\n\r\n  function drawFlower(ctx, x, y, r, petals, rot, open, fill, core) {\r\n    ctx.save();\r\n    ctx.translate(x, y); ctx.rotate(rot);\r\n    ctx.lineJoin = \"round\"; ctx.lineCap = \"round\";\r\n    ctx.strokeStyle = \"#0B0B0C\"; ctx.lineWidth = Math.max(1.5, r * 0.13);\r\n\r\n    var pr = r * 0.62 * open, pw = r * 0.40 * (0.75 + open * 0.35);\r\n    for (var i = 0; i < petals; i++) {\r\n      ctx.save();\r\n      ctx.rotate((i \/ petals) * Math.PI * 2);\r\n      ctx.translate(0, -r * 0.52);\r\n      ctx.beginPath(); ctx.ellipse(0, 0, pw, pr, 0, 0, Math.PI * 2);\r\n      ctx.fillStyle = fill; ctx.fill(); ctx.stroke();\r\n      ctx.beginPath();\r\n      ctx.ellipse(-pw * 0.30, -pr * 0.34, pw * 0.26, pr * 0.26, -0.5, 0, Math.PI * 2);\r\n      ctx.fillStyle = \"rgba(255,255,255,.5)\"; ctx.fill();\r\n      ctx.restore();\r\n    }\r\n    ctx.beginPath(); ctx.arc(0, 0, r * 0.30, 0, Math.PI * 2);\r\n    ctx.fillStyle = core; ctx.fill(); ctx.stroke();\r\n    ctx.beginPath(); ctx.arc(-r * 0.10, -r * 0.11, r * 0.09, 0, Math.PI * 2);\r\n    ctx.fillStyle = \"rgba(255,255,255,.55)\"; ctx.fill();\r\n    ctx.restore();\r\n  }\r\n\r\n  function heroField() {\r\n    var cvs = document.getElementById(\"petals\");\r\n    if (!cvs) return;\r\n    var ctx = cvs.getContext(\"2d\");\r\n    if (!ctx) return;\r\n\r\n    var dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n    var W = 0, H = 0, buds = [], raf = 0, t0 = 0;\r\n\r\n    function seed() {\r\n      var n = window.innerWidth < 700 ? 11 : 20;\r\n      buds = [];\r\n      for (var i = 0; i < n; i++) {\r\n        buds.push({\r\n          x: Math.random(), y: Math.random(),\r\n          r: 16 + Math.random() * 46,\r\n          p: [5, 6, 7, 8][Math.floor(Math.random() * 4)],\r\n          rot: Math.random() * Math.PI * 2,\r\n          spin: (Math.random() - 0.5) * 0.32,\r\n          hue: Math.random() * RGB.length,\r\n          hs: 0.12 + Math.random() * 0.28,\r\n          ph: Math.random() * Math.PI * 2,\r\n          drift: 0.10 + Math.random() * 0.24\r\n        });\r\n      }\r\n    }\r\n    function size() {\r\n      var b = cvs.getBoundingClientRect();\r\n      W = Math.max(1, b.width); H = Math.max(1, b.height);\r\n      cvs.width = Math.round(W * dpr); cvs.height = Math.round(H * dpr);\r\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n    }\r\n    function paint(t) {\r\n      ctx.clearRect(0, 0, W, H);\r\n      buds.forEach(function (f) {\r\n        var px = f.x * W + Math.sin(t * f.drift + f.ph) * W * 0.022;\r\n        var py = f.y * H + Math.cos(t * f.drift * 0.8 + f.ph) * H * 0.028;\r\n        var br = 1 + Math.sin(t * 0.85 + f.ph) * 0.09;\r\n        var hue = f.hue + t * f.hs;\r\n        drawFlower(ctx, px, py, f.r * br, f.p, f.rot + t * f.spin, 0.9,\r\n                   mix(hue), mix(hue + 2.2));\r\n      });\r\n    }\r\n    function frame(ts) {\r\n      if (!t0) t0 = ts;\r\n      paint((ts - t0) \/ 1000);\r\n      raf = requestAnimationFrame(frame);\r\n    }\r\n    function start() { if (!raf && !RM) raf = requestAnimationFrame(frame); }\r\n    function stop() { if (raf) { cancelAnimationFrame(raf); raf = 0; t0 = 0; } }\r\n\r\n    seed(); size();\r\n    if (RM) paint(0); else start();\r\n\r\n    window.addEventListener(\"resize\", function () {\r\n      size(); seed(); if (RM) paint(0);\r\n    }, { passive: true });\r\n\r\n    document.addEventListener(\"visibilitychange\", function () {\r\n      if (document.hidden) stop(); else start();\r\n    });\r\n    if (\"IntersectionObserver\" in window && !RM) {\r\n      new IntersectionObserver(function (es) {\r\n        es[0].isIntersecting ? start() : stop();\r\n      }, { threshold: 0 }).observe(cvs);\r\n    }\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550 5. SMALL PARTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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  function ticker() {\r\n    var row = document.getElementById(\"ticker\");\r\n    if (!row) return;\r\n    var words = [\"TOP DESTINATION\", \"VIENNA\", \"BEINGASSE 13\", \"BE FREE HOSTEL\",\r\n                 \"NO RECEPTION\", \"NO CURFEW\"];\r\n    var html = \"\";\r\n    for (var k = 0; k < 2; k++)\r\n      for (var i = 0; i < words.length; i++) html += \"<span>\" + words[i] + \"<\/span>\";\r\n    row.innerHTML = html;\r\n  }\r\n\r\n  function reveals() {\r\n    var els = [].slice.call(document.querySelectorAll(\"[data-reveal]\"));\r\n    if (!els.length) return;\r\n    if (RM || !(\"IntersectionObserver\" in window)) {\r\n      els.forEach(function (e) { e.classList.add(\"in\"); });\r\n      return;\r\n    }\r\n    var io = new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (e) {\r\n        if (!e.isIntersecting) return;\r\n        var sibs = [].slice.call(e.target.parentNode.children);\r\n        setTimeout(function () { e.target.classList.add(\"in\"); },\r\n                   Math.min(sibs.indexOf(e.target), 5) * 110);\r\n        io.unobserve(e.target);\r\n      });\r\n    }, { threshold: 0.2, rootMargin: \"0px 0px -8% 0px\" });\r\n    els.forEach(function (e) { io.observe(e); });\r\n  }\r\n\r\n  \/* Booking. The form shows immediately \u2014 it is useful on its own and\r\n     leaves no empty frame \u2014 and the UP Hotel widget takes over only once\r\n     the browser confirms <ibe-up> is really defined. That covers a missing\r\n     key, a blocked script, an ad-blocker and a dead network with one path\r\n     instead of four guesses. *\/\r\n  function bookingWidget() {\r\n    var hosts = [].slice.call(document.querySelectorAll(\"[data-ibe-host]\"));\r\n    if (!hosts.length) return;\r\n\r\n    function show(useWidget) {\r\n      hosts.forEach(function (host) {\r\n        var w = host.querySelector(\".ibe\"), f = host.querySelector(\"[data-ibe-form]\");\r\n        if (w) w.hidden = !useWidget;\r\n        if (f) f.hidden = useWidget;\r\n      });\r\n      if (useWidget) syncWidgetLanguage();\r\n    }\r\n\r\n    show(false);\r\n    bookingForm();\r\n\r\n    var el = document.querySelector(\"[data-ibe-host] ibe-up\");\r\n    var key = el && el.getAttribute(\"ibe-key\");\r\n    if (!key || !key.trim() || !window.customElements) return;\r\n\r\n    if (customElements.get(\"ibe-up\")) { show(true); return; }\r\n    customElements.whenDefined(\"ibe-up\").then(function () { show(true); });\r\n  }\r\n\r\n  \/* The IBE reads its language attribute once, when it initialises, so a\r\n     language switch needs a fresh element rather than a changed attribute. *\/\r\n  function syncWidgetLanguage() {\r\n    [].forEach.call(document.querySelectorAll(\"[data-ibe-host] .ibe\"), function (box) {\r\n      if (box.hidden) return;\r\n      var el = box.querySelector(\"ibe-up\");\r\n      if (!el || el.getAttribute(\"language\") === lang) return;\r\n      var fresh = document.createElement(\"ibe-up\");\r\n      fresh.setAttribute(\"ibe-key\", el.getAttribute(\"ibe-key\"));\r\n      fresh.setAttribute(\"language\", lang);\r\n      el.parentNode.replaceChild(fresh, el);\r\n    });\r\n  }\r\n\r\n  \/* Dates cannot be in the past, check-out cannot precede check-in, and a\r\n     submitted form becomes a mail we can answer by hand. *\/\r\n  function bookingForm() {\r\n    var iso = function (d) { return d.toISOString().slice(0, 10); };\r\n    var today = iso(new Date());\r\n\r\n    [].forEach.call(document.querySelectorAll(\"[data-ibe-form]\"), function (form) {\r\n      var inp = form.querySelector('input[name=\"in\"]'),\r\n          out = form.querySelector('input[name=\"out\"]');\r\n      inp.min = out.min = today;\r\n\r\n      inp.addEventListener(\"change\", function () {\r\n        var next = new Date(inp.value);\r\n        next.setDate(next.getDate() + 1);\r\n        out.min = iso(next);\r\n        if (out.value && out.value <= inp.value) out.value = iso(next);\r\n      });\r\n\r\n      form.addEventListener(\"submit\", function (e) {\r\n        e.preventDefault();\r\n        var pax = form.querySelector('select[name=\"pax\"]').value;\r\n        var subject = lang === \"de\" ? \"Anfrage Be Free Hostel\" : \"Booking request \u2014 Be Free Hostel\";\r\n        var body = lang === \"de\"\r\n          ? \"Anreise: \" + inp.value + \"\\nAbreise: \" + out.value + \"\\nG\u00e4ste: \" + pax + \"\\n\\n\"\r\n          : \"Check-in: \" + inp.value + \"\\nCheck-out: \" + out.value + \"\\nGuests: \" + pax + \"\\n\\n\";\r\n        location.href = \"mailto:befree-hostel@dostepinn.at?subject=\" +\r\n          encodeURIComponent(subject) + \"&body=\" + encodeURIComponent(body);\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* The nav's booking pill is hidden on narrow screens, so a floating one\r\n     takes over \u2014 but only between the hero and the booking section, so it\r\n     never covers the thing it points at. One shared state, because two\r\n     observers toggling the same class fight each other. *\/\r\n  function bookingFab() {\r\n    var fab  = document.getElementById(\"bookfab\"),\r\n        hero = document.getElementById(\"top\"),\r\n        book = document.getElementById(\"book\");\r\n    if (!fab || !hero || !(\"IntersectionObserver\" in window)) return;\r\n\r\n    var heroVisible = true, bookVisible = false;\r\n    function update() { fab.classList.toggle(\"in\", !heroVisible && !bookVisible); }\r\n\r\n    function watch(el, set) {\r\n      new IntersectionObserver(function (es) {\r\n        set(es[0].isIntersecting);\r\n        update();\r\n      }, { threshold: 0 }).observe(el);\r\n    }\r\n    watch(hero, function (v) { heroVisible = v; });\r\n    if (book) watch(book, function (v) { bookVisible = v; });\r\n  }\r\n\r\n  function menu() {\r\n    var b = document.getElementById(\"burger\"), l = document.getElementById(\"navlinks\");\r\n    if (!b || !l) return;\r\n    \/* the separate header.html brings its own handler \u2014 binding a second one\r\n       would toggle the menu twice and leave it shut *\/\r\n    if (b.dataset.bound) return;\r\n    b.dataset.bound = \"1\";\r\n    b.addEventListener(\"click\", function () {\r\n      var open = l.classList.toggle(\"open\");\r\n      b.setAttribute(\"aria-expanded\", String(open));\r\n    });\r\n    l.addEventListener(\"click\", function (e) {\r\n      if (e.target.tagName === \"A\") {\r\n        l.classList.remove(\"open\");\r\n        b.setAttribute(\"aria-expanded\", \"false\");\r\n      }\r\n    });\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550 6. GO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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  harvestEnglish();\r\n  buildGallery();\r\n  parallaxGallery();\r\n  lightbox.init();\r\n  ticker();\r\n  heroField();\r\n  reveals();\r\n  menu();\r\n\r\n  var y = document.getElementById(\"year\");\r\n  if (y) y.textContent = String(new Date().getFullYear());\r\n\r\n  \/* the switch lives in the navigation, which a themed page may not have *\/\r\n  var bEn = document.getElementById(\"lang-en\"), bDe = document.getElementById(\"lang-de\");\r\n  if (bEn) bEn.addEventListener(\"click\", function () { setLang(\"en\", true); });\r\n  if (bDe) bDe.addEventListener(\"click\", function () { setLang(\"de\", true); });\r\n\r\n  \/* ?lang=de wins, then a remembered choice, then the browser's own *\/\r\n  var q = new URLSearchParams(location.search).get(\"lang\");\r\n  var saved = null;\r\n  try { saved = localStorage.getItem(\"befree-lang\"); } catch (e) {}\r\n  var auto = (navigator.language || \"en\").toLowerCase().indexOf(\"de\") === 0 ? \"de\" : \"en\";\r\n  setLang(q || saved || auto, false);\r\n  bookingWidget();\r\n  bookingFab();\r\n\r\n  window.BeFree = { reducedMotion: RM, photos: PHOTOS, palette: PAL };\r\n})();\r\n\r\n<\/script>\r\n\r\n<!-- Booking engine (UP Hotel IBE) \u2014 their snippet, last before <\/body> -->\r\n<script type=\"text\/javascript\" src=\"https:\/\/ibe.uphotel.agency\/ibe.min.js\"><\/script>\r\n<link href=\"https:\/\/ibe.uphotel.agency\/ibe.min.css\" rel=\"stylesheet\" \/>\r\n<\/div>\r\n<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\":\"https:\/\/schema.org\",\r\n  \"@type\":\"Hostel\",\r\n  \"name\":\"Be Free Hostel Vienna\",\r\n  \"url\":\"https:\/\/befree-hostel.com\/\",\r\n  \"image\":\"https:\/\/befree-hostel.com\/assets\/img\/gallery-01-room.jpg\",\r\n  \"email\":\"befree-hostel@dostepinn.at\",\r\n  \"telephone\":\"+43 699 19232769\",\r\n  \"address\":{\r\n    \"@type\":\"PostalAddress\",\r\n    \"streetAddress\":\"Beingasse 13\",\r\n    \"postalCode\":\"1150\",\r\n    \"addressLocality\":\"Wien\",\r\n    \"addressRegion\":\"Wien\",\r\n    \"addressCountry\":\"AT\"\r\n  },\r\n  \"checkinTime\":\"15:00\",\r\n  \"amenityFeature\":[\r\n    {\"@type\":\"LocationFeatureSpecification\",\"name\":\"Self check-in\",\"value\":true},\r\n    {\"@type\":\"LocationFeatureSpecification\",\"name\":\"Free WiFi\",\"value\":true},\r\n    {\"@type\":\"LocationFeatureSpecification\",\"name\":\"Shared kitchen\",\"value\":true},\r\n    {\"@type\":\"LocationFeatureSpecification\",\"name\":\"Common room\",\"value\":true}\r\n  ]\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Be Free.Be You.Be Here. Be Free Hostel Vienna is a colorful and affordable place to stay near Westbahnhof, offering modern travelers a relaxed and flexible experience in the heart of the city. With easy self check-in, a central location and a vibrant atmosphere, it is the perfect base to explore Vienna your own way while [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-148","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/befree-hostel.com\/index.php\/wp-json\/wp\/v2\/pages\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/befree-hostel.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/befree-hostel.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/befree-hostel.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/befree-hostel.com\/index.php\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":7,"href":"https:\/\/befree-hostel.com\/index.php\/wp-json\/wp\/v2\/pages\/148\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/befree-hostel.com\/index.php\/wp-json\/wp\/v2\/pages\/148\/revisions\/155"}],"wp:attachment":[{"href":"https:\/\/befree-hostel.com\/index.php\/wp-json\/wp\/v2\/media?parent=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}