/* Erlebniswelt (Gehirnwelt). Übernommen aus dem Prototyp v6 (Referenz V10, Farbe H), auf .hbk-ew begrenzt. Zustände stehen als Klasse an #ew. */
.hbk-ew-page { margin: 0; background: #fff; }
.hbk-ew-page .wp-site-blocks, .hbk-ew-page .wp-site-blocks main, .hbk-ew-page .wp-block-post-content, .hbk-ew-page .hbk-ew { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.hbk-ew { --aub: #281533; --lila: #482966; --t2: #5F5550; position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: #fff; font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--aub); line-height: 1.5; }
.hbk-ew * { box-sizing: border-box; }
.hbk-ew a { color: inherit; }
.hbk-ew #reise { position: fixed; inset: 0; width: 100%; height: 100%; opacity: 0; filter: blur(14px); transition: opacity 1.1s, filter 1.6s ease-out; pointer-events: none; }
.hbk-ew .travel #reise, .hbk-ew .room #reise { opacity: 1; filter: none; pointer-events: auto; }
.hbk-ew .travel .ov, .hbk-ew .room .ov { opacity: 0; pointer-events: none; }
.hbk-ew .zoom .ov__map { filter: blur(0); } .hbk-ew .dive .ov__map { filter: blur(6px); transition: transform 1.2s cubic-bezier(.55,0,.35,1), filter .8s; }
.hbk-ew .spot { position: fixed; left: 0; top: 0; z-index: 3; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; cursor: pointer; display: none; align-items: center; gap: .4rem; font: 600 .75rem/1 Inter, system-ui, sans-serif; color: var(--aub); }
.hbk-ew .room .spot { display: inline-flex; } .hbk-ew .spot, .hbk-ew .spot.flip { transform: translate(0, -100%); } .hbk-ew .spot.flip { flex-direction: row-reverse; }
.hbk-ew .spot i { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--lila); font-style: normal; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 4px 14px rgba(40,21,51,.15); }
.hbk-ew .spot span { background: rgba(255,255,255,.94); border-radius: 999px; padding: .3rem .65rem; box-shadow: 0 6px 18px rgba(40,21,51,.1); white-space: nowrap; }
.hbk-ew .spot.done i { background: var(--aub); color: #fff; } .hbk-ew .spot.here span { background: var(--aub); color: #fff; }
.hbk-ew .station { position: fixed; left: clamp(16px, 4vw, 56px); top: 50%; transform: translateY(-46%); z-index: 4; width: min(28rem, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border: 1px solid #D4D2D8; border-radius: 18px; padding: 1.2rem 1.35rem; opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; box-shadow: 0 20px 50px rgba(40,21,51,.08); }
.hbk-ew .station.right { left: auto; right: clamp(16px, 4vw, 56px); top: calc(50% + 26px); }
.hbk-ew .fold { position: absolute; top: .7rem; right: .7rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #D4D2D8; background: #fff; color: var(--lila); cursor: pointer; font-size: .9rem; line-height: 1; }
.hbk-ew .station.mini .st-body, .hbk-ew .station.mini .dots { display: none; } .hbk-ew .station.mini h2 { margin-bottom: 0; } .hbk-ew .station.mini { padding-block: .8rem; }
.hbk-ew .station.on { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.hbk-ew .station h2 { margin: .25rem 0 .45rem; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 650; color: var(--aub); } .hbk-ew .station p { margin: 0 0 .8rem; color: var(--t2); line-height: 1.5; font-size: .9375rem; }
.hbk-ew .dots { display: flex; gap: .3rem; margin-bottom: .7rem; } .hbk-ew .dots i { width: 20px; height: 3px; border-radius: 2px; background: #D4D2D8; } .hbk-ew .dots i.on { background: var(--lila); }
.hbk-ew .grp { margin-top: .8rem; } .hbk-ew .grp__h { font-size: .6875rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--lila) !important; font-weight: 600; margin: 0 0 .25rem !important; }
.hbk-ew .grp__a { display: flex; align-items: baseline; gap: .6rem; border-top: 1px solid #D4D2D8; padding: .5rem 0; color: var(--aub); text-decoration: none; font-size: .9rem; } .hbk-ew .grp__a span { flex: 1; } .hbk-ew .grp__a small { color: var(--t2); font-size: .75rem; } .hbk-ew .grp__a em { font-style: normal; color: var(--lila); }
.hbk-ew .grp__btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: baseline; gap: .6rem; border-top: 1px solid #D4D2D8; padding: .5rem 0; color: var(--aub); font-size: .9rem; cursor: pointer; } .hbk-ew .grp__btn span { flex: 1; } .hbk-ew .grp__btn small { color: var(--t2); font-size: .75rem; } .hbk-ew .grp__btn em { font-style: normal; color: var(--lila); } .hbk-ew .grp__btn:hover span { color: var(--lila); }
.hbk-ew .acc { border-top: 1px solid #D4D2D8; } .hbk-ew .acc summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; padding: .7rem 0 .55rem; margin: 0 !important; } .hbk-ew .acc summary::-webkit-details-marker { display: none; } .hbk-ew .acc summary span { font-size: .6875rem; color: var(--t2); background: #ECEBEE; border-radius: 999px; padding: .05rem .45rem; letter-spacing: 0; } .hbk-ew .acc summary::after { content: '▾'; margin-left: auto; color: var(--lila); transition: transform .2s; } .hbk-ew .acc[open] summary::after { transform: rotate(180deg); } .hbk-ew .acc .art:first-of-type { border-top: 0; }
.hbk-ew .qbox { background: #ECEBEE; border-radius: 14px; padding: .9rem 1rem; margin: .3rem 0 .9rem; } .hbk-ew .qbox__n { font-size: .6875rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--lila) !important; font-weight: 600; margin: 0 0 .5rem !important; } .hbk-ew .qbox.all .qbox__n { visibility: hidden; height: 0; margin: 0 !important; }
.hbk-ew .qbox:not(.all) .qs { list-style: none; padding: 0; } .hbk-ew .qbox:not(.all) .qs li { font-size: 1.15rem; line-height: 1.45; min-height: 4.4em; letter-spacing: -.01em; }
.hbk-ew .qbox__nav { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .hbk-ew .qbox__nav .btn { margin: 0; padding: .45rem .8rem; font-size: .8125rem; } .hbk-ew .qbox__nav .btn:disabled { opacity: .4; cursor: default; } .hbk-ew .qbox.all .qbox__nav [data-q] { display: none; }
.hbk-ew .qbox__all { all: unset; cursor: pointer; margin-left: auto; font-size: .75rem; color: var(--lila); text-decoration: underline; text-underline-offset: 3px; }
.hbk-ew .qs { margin: .2rem 0 .9rem; padding: 0 0 0 1.3rem; display: grid; gap: .55rem; font-size: .975rem; line-height: 1.45; color: var(--aub); } .hbk-ew .qs li::marker { color: var(--lila); font-weight: 600; }
.hbk-ew .hint { font-size: .8125rem !important; color: var(--t2); background: #ECEBEE; border-radius: 10px; padding: .55rem .7rem; }
.hbk-ew .soon { font-size: .8125rem !important; color: var(--t2) !important; margin: .2rem 0 0 !important; border-top: 1px dashed #D4D2D8; padding-top: .45rem; }
.hbk-ew .art { display: grid; gap: .15rem; border-top: 1px solid #D4D2D8; padding: .6rem 0; color: var(--aub); text-decoration: none; } .hbk-ew .art b { font-weight: 600; font-size: .9375rem; } .hbk-ew .art span { font-size: .8125rem; color: var(--t2); line-height: 1.4; } .hbk-ew .art small { font-size: .6875rem; color: var(--t2); display: flex; gap: .5rem; } .hbk-ew .art small i { font-style: normal; color: var(--lila); font-weight: 600; margin-left: auto; } .hbk-ew .art:hover b { color: var(--lila); }
.hbk-ew .grp__btn.world { align-items: center; border: 1px solid #D4D2D8; border-radius: 12px; padding: .65rem .8rem; margin-top: .45rem; background: #fff; transition: border-color .2s, background .2s; } .hbk-ew .grp__btn.world:hover, .hbk-ew .grp__btn.world:focus-visible { border-color: var(--lila); background: #ECEBEE; } .hbk-ew .grp__btn.world em { font-size: 1rem !important; color: var(--lila); }
.hbk-ew .grp__btn.world b { font-size: .9375rem; } .hbk-ew .grp__btn.world span { display: grid; gap: .1rem; } .hbk-ew .grp__btn.world small { font-size: .75rem; color: var(--t2); } .hbk-ew .grp__btn.world em { font-size: .75rem; white-space: nowrap; }
.hbk-ew .row { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; } .hbk-ew .row .btn--ghost { margin-left: 0; }
.hbk-ew .direct { position: fixed; right: 16px; top: 50px; z-index: 4; display: none; background: rgba(255,255,255,.95); border: 1px solid #D4D2D8; border-radius: 14px; padding: .6rem .7rem; font-size: .8125rem; box-shadow: 0 10px 30px rgba(40,21,51,.08); } .hbk-ew .room .direct { display: block; }
.hbk-ew .direct summary { cursor: pointer; min-height: 24px; display: flex; align-items: center; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lila); font-weight: 600; list-style: none; } .hbk-ew .direct summary::after { content: ' ▾'; } .hbk-ew .direct[open] summary { margin-bottom: .35rem; }
.hbk-ew .direct button { all: unset; display: block; cursor: pointer; padding: .28rem 0; color: var(--aub); } .hbk-ew .direct button:hover { color: var(--lila); } .hbk-ew .direct button b { color: var(--lila); margin-right: .4rem; }
.hbk-ew .ov { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; transition: opacity 1s; }
.hbk-ew .ov__map { position: relative; width: min(100vw, 177.7vh); aspect-ratio: 1536 / 864; transition: transform 1.8s cubic-bezier(.55,0,.35,1); }
.hbk-ew .ov__map img, .hbk-ew .ov__hl { -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 16%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 16%); mask-composite: intersect; }   /* Himmel läuft oben und seitlich ins Weiß der Seite aus */
.hbk-ew .ov__map img { width: 100%; height: 100%; display: block; }
.hbk-ew .ov__hl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .22s ease; }
.hbk-ew .ov__hl.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hbk-ew .ov__hl { transition: none; } }
.hbk-ew .pill { position: absolute; transform: translate(-50%, -50%); border: 0; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--aub); font: 500 .6875rem/1.2 Inter, system-ui, sans-serif; padding: .32rem .65rem; min-height: 24px; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; box-shadow: 0 4px 14px rgba(40,21,51,.10); opacity: .8; transition: opacity .3s; text-decoration: none; cursor: pointer; }
.hbk-ew .pill:hover, .hbk-ew .pill:focus-visible { opacity: 1; }
.hbk-ew .pill b { color: var(--lila); font-weight: 600; }
.hbk-ew .pill.off { opacity: .7; cursor: default; font-style: italic; }
.hbk-ew .pill.live { opacity: 1; background: var(--aub); color: #fff; } .hbk-ew .pill.live b { color: #d9cfe6; }
.hbk-ew .pill.live::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(72,41,102,.35); animation: hbk-ew-puls 1.8s infinite; }
@keyframes hbk-ew-puls { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.hbk-ew .zoom .pill, .hbk-ew .dive .pill, .hbk-ew .travel .pill, .hbk-ew .room .pill { opacity: 0 !important; }
.hbk-ew .intro { position: absolute; left: clamp(16px, 4vw, 64px); top: clamp(16px, 6vh, 64px); width: min(19rem, 26vw); z-index: 3; transition: opacity .5s; }
.hbk-ew .zoom .intro, .hbk-ew .dive .intro, .hbk-ew .travel .intro, .hbk-ew .room .intro { opacity: 0; pointer-events: none; }
.hbk-ew .eyebrow { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lila); font-weight: 600; margin: 0 0 .9rem; } .hbk-ew .eyebrow a { text-decoration: none; color: var(--lila); display: inline-block; padding: .35rem 0; margin: -.35rem 0; }   /* Klickfläche mindestens 24 px */
.hbk-ew h1 { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 .9rem; font-weight: 650; color: var(--aub); }
.hbk-ew .lead { color: var(--t2); line-height: 1.55; margin: 0; font-size: 1rem; }
.hbk-ew .topics { display: none; } .hbk-ew .ring { display: none; }
.hbk-ew :focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; } .hbk-ew .station h2:focus { outline: none; }
@media (min-width: 721px) { .hbk-ew .stack .intro { width: auto; right: clamp(16px, 4vw, 64px); top: 20px; } .hbk-ew .stack h1 br { display: none; } .hbk-ew .stack .ov { place-items: end center; } .hbk-ew .stack .ov__map { width: min(100vw, calc((100vh - var(--introH, 0px)) * 1.7768)); } }
@media (prefers-reduced-motion: reduce) { .hbk-ew .pill.live::after { animation: none; } .hbk-ew *, .hbk-ew *::before, .hbk-ew *::after { transition-duration: .01ms !important; } }
.hbk-ew .ew-nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .9rem; font-size: .875rem; }
.hbk-ew .ew-nav a { color: var(--lila); font-weight: 600; text-decoration: none; padding: .25rem 0; }
.hbk-ew .ew-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hbk-ew .calm { display: flex; gap: .45rem; align-items: center; margin-top: 1rem; font-size: .8125rem; color: var(--t2); cursor: pointer; }
/* Ohne JavaScript und auf dem Handy: Liste der Räume */
.hbk-ew .topics { gap: .5rem; list-style: none; margin: .4rem 16px 24px; padding: 0; }
.hbk-ew .topics a, .hbk-ew .topics .off { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: .7rem; padding: .8rem .95rem; border: 1px solid #D4D2D8; border-radius: 14px; background: #fff; font-size: .9375rem; color: var(--aub); text-decoration: none; }
.hbk-ew .topics b { color: var(--lila); font-weight: 650; width: 1.6rem; } .hbk-ew .topics span { flex: 1; } .hbk-ew .topics small { color: var(--t2); font-size: .75rem; }
.hbk-ew .topics a.live { border-color: var(--aub); box-shadow: 0 8px 24px rgba(40,21,51,.08); } .hbk-ew .topics a.live small { color: var(--lila); font-weight: 600; }
.hbk-ew .topics .off { opacity: .6; }
/* Smartphone: Karte als Fläche unten, Liste darunter */
@media (max-width: 720px) {
	.hbk-ew { position: relative; inset: auto; overflow: visible; min-height: 100vh; height: auto; }
	.hbk-ew #ew:not(.zoom):not(.dive):not(.travel):not(.room) .ov { position: relative; display: block; z-index: 2; }
	.hbk-ew .intro { position: relative; left: auto; top: auto; margin: 20px 16px 8px; width: auto; }
	.hbk-ew .ov__map { width: 100vw; height: 36vh; aspect-ratio: auto; overflow: hidden; transform: none !important; } .hbk-ew .ov__map img { object-fit: cover; -webkit-mask-image: linear-gradient(to top, transparent, #000 14%); mask-image: linear-gradient(to top, transparent, #000 14%); }
	.hbk-ew .ov__map .pill { display: none; }
	.hbk-ew .ov__hl { -webkit-mask-image: linear-gradient(to top, transparent, #000 14%); mask-image: linear-gradient(to top, transparent, #000 14%); }
	.hbk-ew .ring { display: block; position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 3px solid var(--lila); box-shadow: 0 0 0 8px rgba(72,41,102,.15); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s; pointer-events: none; } .hbk-ew .ring.on { opacity: 1; transform: scale(1); }
	.hbk-ew .topics { display: grid; }
	.hbk-ew h1 { font-size: 1.6rem; }
	.hbk-ew .station, .hbk-ew .station.right { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 52vh; transform: translateY(12px); }
	.hbk-ew .station.on, .hbk-ew .station.right.on { transform: none; }
	.hbk-ew .direct { top: 12px; right: 12px; } .hbk-ew .spot span { font-size: .6875rem; padding: .22rem .5rem; } .hbk-ew .spot i { width: 20px; height: 20px; }
}
.hbk-ew .skip { position: fixed; right: 16px; bottom: 16px; z-index: 4; border: 1px solid #D4D2D8; background: rgba(255,255,255,.92); color: var(--aub); border-radius: 999px; padding: .5rem .9rem; font: inherit; font-size: .8125rem; cursor: pointer; display: none; } .hbk-ew .travel .skip { display: block; }
.hbk-ew .status { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: .75rem; color: var(--t2); z-index: 4; opacity: 0; transition: opacity .5s; background: rgba(255,255,255,.8); border-radius: 999px; padding: .25rem .7rem; margin: 0; } .hbk-ew .travel .status, .hbk-ew .room .status { opacity: 1; }
.hbk-ew .fade { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 1.1s; z-index: 5; } .hbk-ew .fade.on { opacity: 1; }
.hbk-ew .btn { display: inline-flex; border: 0; background: var(--aub); color: #fff; border-radius: 999px; padding: .6rem 1.1rem; font: inherit; font-size: .875rem; cursor: pointer; }
.hbk-ew .btn--ghost { background: transparent; color: var(--aub); border: 1px solid #D4D2D8; margin-left: .4rem; }