/* Wissenswelten: Themenseite (nur auf Themenseiten geladen, die die neue Datenstruktur lesen). Baut auf hbk.css auf. */

.hbk-ww-room .hbk-room__lead { max-width: 52ch; }
.hbk-ww-room .hbk-room__content { min-width: 0; } /* sonst verbreitert die scrollbare Stationsleiste die Spalte */

/* Inhaltsverzeichnis „In diesem Raum“ */
.hbk-ww-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; }
.hbk-ww-toc__h { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); margin: 0 0 .6rem; }
.hbk-ww-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; counter-reset: st; }
.hbk-ww-toc li { counter-increment: st; }
.hbk-ww-toc a { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--aub); text-decoration: none; font-size: .9375rem; background: #fff; }
.hbk-ww-toc a::before { content: counter(st); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--lavendel-hell, #EEE8F4); color: var(--lila); font-size: .8125rem; font-weight: 600; }
.hbk-ww-toc a:hover, .hbk-ww-toc a:focus-visible { border-color: var(--lila); }

/* Stationen */
.hbk-ww-station { scroll-margin-top: calc(var(--header, 72px) + 1rem); }
.hbk-ww-station .hbk-h2 { max-width: 24ch; }
.hbk-ww-station .hbk-prose h3 { font-size: 1.35rem; margin-top: 0; }
.hbk-ww-station > .hbk-h2 + .hbk-ww-group { margin-top: 1.5rem; }
.hbk-ww-group + .hbk-ww-group, .hbk-prose + .hbk-ww-group, .hbk-ww-note + .hbk-ww-group { margin-top: 2.25rem; }
.hbk-ww-group__h { font-size: 1rem; font-weight: 600; letter-spacing: .01em; color: var(--lila); margin: 0 0 .5rem; }

/* Reflexionsfragen */
.hbk-ww-questions { list-style: none; margin: 0; padding: 0; counter-reset: q; display: flex; flex-direction: column; gap: .75rem; }
.hbk-ww-questions li { counter-increment: q; position: relative; padding: 1rem 1.25rem 1rem 3.5rem; background: var(--sand); border-radius: 14px; font-size: 1.125rem; line-height: 1.45; color: var(--aub); }
.hbk-ww-questions li::before { content: counter(q); position: absolute; left: 1rem; top: 1rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--lila); font-size: .875rem; font-weight: 600; }
.hbk-ww-note { margin: 1rem 0 0; font-size: .9375rem; color: var(--t2); border-left: 3px solid var(--lavendel, #886BAE); padding: .1rem 0 .1rem .9rem; max-width: 60ch; }

/* Raum ohne Themenseite (Weitergehen) */
.hbk-row--static { grid-template-columns: minmax(0, 1fr); }
.hbk-row--static:hover { padding-left: 0; border-bottom-color: var(--line); }

.hbk-ww-soon { color: var(--t2); font-style: italic; }

@media (max-width: 781px) {
	.hbk-ww-room .hbk-row { grid-template-columns: minmax(0, 1fr) 20px; row-gap: .35rem; }
	.hbk-ww-room .hbk-row__meta { grid-column: 1; grid-row: 2; padding-top: 0; }
	.hbk-ww-room .hbk-row__arrow { grid-column: 2; grid-row: 1; }
	.hbk-ww-toc ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
	.hbk-ww-toc a { white-space: nowrap; }
	.hbk-ww-questions li { font-size: 1.0625rem; padding: .9rem 1rem .9rem 3.1rem; }
	.hbk-ww-questions li::before { left: .8rem; top: .9rem; }
}

/* Artikel: Hinweis, in welchem Raum und an welcher Station der Artikel liegt */
.hbk-ww-where { border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; margin: 0 0 1.6rem; font-size: .9375rem; color: var(--aub); background: #fff; }
.hbk-ww-where p { margin: 0; }
.hbk-ww-where__k { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lila); font-weight: 600; margin-right: .4rem; }
.hbk-ww-where__a { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .35rem !important; }
.hbk-ww-where__a a { color: var(--lila); font-weight: 600; text-decoration: none; font-size: .875rem; }
.hbk-ww-where__a a:hover, .hbk-ww-where__a a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.hbk-ww-where p + p + p { margin-top: .6rem; }

/* Ankunft mit gemaltem Raumbild: kräftige Farben brauchen einen dichteren Schleier hinter dem Text (Lesbarkeit) */
.hbk-ww-room .hbk-room__veil { background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.55) 62%, rgba(255,255,255,0) 82%), linear-gradient(0deg, rgba(255,255,255,.9), rgba(255,255,255,0) 30%); }
@media (max-width: 760px) { .hbk-ww-room .hbk-room__veil { background: rgba(255,255,255,.86); } }